/**
 * page-hero.css — Yeniden kullanılabilir sayfa-hero bileşeni (.phero)
 *
 * atlas_page_hero() ile render edilir; birden fazla sayfadan çağrılabilir.
 * Sınıf adları anasayfa hero'sundan (.hero*) TAMAMEN bağımsızdır (.phero*),
 * böylece anasayfa tasarımını etkilemez. JS kancaları: [data-phero],
 * [data-phero-dot] (main.js). Nav gömülü modda `.has-phero-nav` body sınıfı,
 * top-bar'ı anasayfadaki gibi split-cut yapar ve header.php solid nav'ı bastırır.
 */

/* ══════════════════════ ÜST BAR — hero genişliği + split cut ══════════════════════ */
/* Sadece anasayfada: üst bar hero paneliyle aynı genişliğe daralır; soldaki
   logo-genişliği (var(--logo-tab-w)) bölümü, aşağıdaki hero logo sekmesiyle
   kesintisiz lacivert bir sütun oluşturur. Birleşme hizasında, üst barın altını
   nav şeridine bağlayan içbükey "split cut" (hızla inip geri yükselen kesim). */

.has-phero-nav { --hero-r: 32px; --logo-tab-w: 264px; --topbar-h: 42px; --wave-h: 40px; }

@media (min-width: 769px) {
    /* Üst bar hero'yla BİRLEŞMEZ — ayrı ve hero genişliğinde; altı tek, geniş
       içbükey bir kesimle ortadan daralır, SAĞ ve SOL KENARLARDA düz/kare kalır.
       Kutunun toplam yüksekliği sabit calc(--topbar-h + --wave-h) (overflow:
       hidden ile korunur, içerik onu büyütemez); her iki mask katmanı da AYNI
       calc(--topbar-h + --wave-h) boyutuna göre hesaplanır (path() sabit px
       olduğu için responsive değildir; preserveAspectRatio='none' ile her
       genişliğe esneyen bir svg mask'e çeviriyoruz). */
    .has-phero-nav .top-bar { background-color: transparent; }
    .has-phero-nav .top-bar__inner {
        align-items: center;
        padding: 0 10%;
        height: calc(var(--topbar-h));
        overflow: hidden;
        background-color: var(--color-navy);
        -webkit-mask:
            linear-gradient(#000, #000) top / 100% 0 no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L720,0 C689.76,0 678.24,160 648,160 L72,160 C41.76,160 30.24,0 0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% calc(var(--topbar-h)) no-repeat;
        mask:
            linear-gradient(#000, #000) top / 100% 0 no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L720,0 C689.76,0 678.24,160 648,160 L72,160 C41.76,160 30.24,0 0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% calc(var(--topbar-h)) no-repeat;
    }
}

/* ══════════════════════════ HERO ══════════════════════════ */

.phero {
    --hero-navy: var(--color-navy);
    --hero-r: 32px;
    --mast-cut: 40px; /* hero-figure'ın masthead arkasına yükseldiği miktar (ayarlanabilir) */
    --head-cut: 26px; /* menü şeridinin altındaki içbükey kesim yüksekliği (ayarlanabilir) */
    --pills-h: 92px; /* sol-alt marka şeridinin sabit yüksekliği (mobilde de değişmez) */
    background-color: #fff;
    padding-block: var(--space-8) var(--space-6); /* topbar ile hero arasında hafif boşluk */
}

/* Masthead diğer TÜM hero katmanlarının üstünde durur — açılan menü (dropdown /
   mobil panel) içerik, dots ve marka şeridini örtsün. z-index shell içindeki en
   yüksek katmandan (brands = 5) büyük olmalı; yoksa aynı/sonraki DOM öğeleri
   (phero__content z:2) menünün üstüne boyanır. */
.phero__mast { position: relative; z-index: 10; }
.phero__mast .masthead { gap: var(--space-8); padding-inline: clamp(var(--space-6), 4vw, var(--space-12)); }
/* Menü öğeleri şeritte ortada; beyaz zemin ::before'da (mask geri açılınca kırpma olmaz).
   Sınır mobil menüyle AYNI (900 — components.css): altında nav hamburger'a döner. */
@media (min-width: 900px) {
    .phero__mast .masthead__collapse { justify-content: center; }
    /* Logo (akışta, solda) yer ayırır; header kalan tüm genişliği kaplar,
       dikeyde flex ile ortalı (align-items: center — padding ile değil). */
    .phero__mast .masthead__collapse {
        position: relative;
        flex: 1 1 auto;
        align-self: stretch;
        padding-inline: var(--space-8);
    }
    /* Top-bar ile BİREBİR aynı mask: 1. katman 100% 0 (sıfır yükseklik, no-op),
       2. katman svg bottom / 100% 100% → tüm yüksekliği kaplar (top-bar'daki
       calc(--topbar-h) yerine burada ::before inset:0 olduğu için 100%). */
    .phero__mast .masthead__collapse::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: #fff;
        -webkit-mask:
            linear-gradient(#000, #000) top / 100% 0 no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L720,0 C689.76,0 678.24,160 648,160 L72,160 C41.76,160 30.24,0 0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
        mask:
            linear-gradient(#000, #000) top / 100% 0 no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L720,0 C689.76,0 678.24,160 648,160 L72,160 C41.76,160 30.24,0 0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    }
}

.phero__mast .masthead__brand { display: flex; align-items: center; }
/* Görsel arkada olduğu için logo beyaz (components.css'teki invert korunur) */
.phero__mast .masthead--hero .masthead__brand .custom-logo { height: 52px; }

/* — Lacivert panel — */
.phero__shell {
    position: relative;
    z-index: 1;
    /* overflow: hidden KALDIRILDI → masthead açılır menüsü (.sub-menu) kısa/compact
       panelden aşağı taşabilsin, kırpılmasın. Taşan görsel katmanı (.phero__bg)
       ayrıca .phero__clip kırpar; navy zemin border-radius ile zaten yuvarlak kalır. */
    border-radius: var(--hero-r);
    color: #fff;
    background-color: var(--color-navy); /* slider yoksa/açılmadan panel lacivert kalır */
}

/* Yalnızca dekoratif arka plan görselini yuvarlatılmış panele kırpar.
   Masthead (.phero__mast) ve içerik bu katmanın DIŞINDA, shell'in doğrudan
   çocuğudur; bu yüzden açılır menü panel dışına taşabilir. */
.phero__clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

/* Arka plan görseli (varsayılan) — lacivert üstünde bulanık + düşük opaklık, en altta.
   --phero-blur inline gelir (atlas_page_hero 'blur' argumanı).
   Seçici .phero__clip ile birlikte (0,2,0): WooCommerce sayfalarında
   `.woocommerce-page img { height:auto }` (0,1,1) tek sınıfı eziyor; yükseklik
   auto kalınca yatay görsel (1920×600) panelin yalnız üst şeridini kaplıyordu. */
.phero__clip .phero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(var(--phero-blur, 0));
    transform: scale(1.1); /* blur kenarındaki saydam boşluğu örter */
    opacity: 0.5;
    pointer-events: none;
}


.phero__body {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    padding-inline: clamp(var(--space-10), 7vw, 8rem);
    padding-block-end: var(--pills-h); /* içerik alttaki marka şeridini örtmesin */
}
.phero__content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
    padding-block: var(--space-20) var(--space-16);
}
.phero__title {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-weight: 800;
}
.phero__accent { color: var(--color-accent); }
.phero__lead {
    margin-top: var(--space-5);
    margin-inline: auto;
    max-width: 34rem;
    font-size: clamp(var(--text-base), 2vw, var(--text-lg));
    line-height: var(--leading-loose);
    color: rgb(255 255 255 / 0.85);
}
.phero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }

/* .btn-hero (sitenin imza butonu) → global components.css'e taşındı (footer/sosyal
   ikonlar gibi her sayfada gerekli). Burada yalnızca kullanımı kaldı. */

/* ── Kompakt/statik varyant: slider + marka şeridi yok, kısa panel, küçük font ──
   Kullanım: atlas_page_hero(['modifier'=>'phero--compact','slides'=>[],'brands'=>false]) */
.phero--compact .phero__shell {
    background:
        radial-gradient(120% 150% at 100% 0%, rgb(27 156 230 / 0.22), transparent 55%),
        var(--color-navy);
}
.phero--compact .phero__shell::after { display: none; } /* pills fileto kaldır */
.phero--compact .phero__body {
    min-height: 0;
    padding-block-end: 0;
}
/* Yükseklik eklenmez — panel içeriği kadar; yalnız kısa bir iç boşluk kalır */
.phero--compact .phero__content {
    padding-block: var(--space-8);
}
.phero--compact .phero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}
.phero--compact .phero__lead { font-size: var(--text-base); }

/* — Slider görselleri: panel genişliğinde, solda lacivert perde (dikişsiz) — */
.phero__figure {
    position: absolute;
    inset: 0;
    margin: 1px;
    z-index: 1;
    overflow: hidden;          /* slaytları (scale 1.05) kendi içinde kırpar — shell overflow'una bağlı değil */
    border-radius: inherit;
}
/* Siyah gölge/perde kaldırıldı (kullanıcı isteği) — görsel net ve gölgesiz.
   Blur yalnızca slayt geçişinde (aşağıdaki .phero__slide). */
/* Slayt: aktif değilken blurlu + hafif büyük + saydam; aktif olunca netleşir,
   yerine oturur ve belirir → geçiş "blur + kayma + fade" birlikte olur, ama
   duran görsel her zaman NET kalır. */
.phero__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: blur(14px);
    transform: scale(1.05);
    transition:
        opacity 700ms var(--ease-default),
        filter 800ms var(--ease-default),
        transform 1000ms var(--ease-default);
    will-change: opacity, filter, transform;
}
.phero__slide.is-active { opacity: 1; filter: blur(0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .phero__slide { filter: none; transform: none; transition: opacity 300ms linear; }
    .phero__slide.is-active { filter: none; transform: none; }
}

/* — Sol dikey slayt çizgileri — */
.phero__dots {
    position: absolute;
    left: clamp(var(--space-5), 2.6vw, var(--space-10));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 3;
}
.phero__dots button {
    width: 18px; height: 3px;
    padding: 0;
    border-radius: var(--radius-full);
    background-color: rgb(255 255 255 / 0.4);
    transition: background-color var(--duration-fast) var(--ease-default), width var(--duration-fast) var(--ease-default);
}
.phero__dots button.is-active { width: 26px; background-color: var(--color-accent); }

/* — Sol-alt: beyaz şerit içinde bayi/marka logoları (marquee) —
   Kesim asimetrik: sol kenar düz (flush); yalnızca sağ uç yukarı doğru S-kavisle
   daralır. Genişlik %80. */
.phero__brands {
    position: absolute;
    left: 0; bottom: 0;
    z-index: 4;
    width: 80%;
    height: var(--pills-h);
    padding: var(--space-5) 0 var(--space-5) var(--space-8);
    background-color: #fff;
    -webkit-mask:
        linear-gradient(#000, #000) bottom / 100% 0 no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L648,0 C678.24,0 689.76,160 720,160 L0,160 Z' fill='black'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
    mask:
        linear-gradient(#000, #000) bottom / 100% 0 no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L648,0 C678.24,0 689.76,160 720,160 L0,160 Z' fill='black'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
/* Logolar sağa doğru solar */
.phero__brands .phero__brands-viewport {
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.phero__brands .phero__logo { height: 52px; }
/* Sol üstte küçük beyaz fileto — hero-pills mask'i çocuklarını kırptığı için
   hero-shell'e koyup şeridin üst kenarına oturtuyoruz (bottom = şerit yüksekliği).
   Radial-gradient: sağ-üst köşede çeyrek daire şeffaf, beyaz alan sol-altta —
   sol-altta border-radius kesmişçesine içbükey geçiş. */
.phero__shell::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(var(--pills-h) - 1px);
    width: 32px; height: 32px;
    z-index: 5;
    background: radial-gradient(circle 32px at 100% 0, transparent calc(32px - 0.5px), #fff 32px);
}
.phero__pill {
    width: 84px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background-color: #fff;
    color: var(--color-navy);
    font-size: 1rem;
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.phero__pill:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.phero__pill--prev .icon { transform: rotate(180deg); }

/* ══════════════════════════ BAYİ / MARKA ŞERİDİ (marquee) ══════════════════════════ */

.phero__brands-wrap { background-color: #fff; padding-block: var(--space-10); }
.phero__brands-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.phero__brands-marquee {
    display: flex;
    gap: clamp(var(--space-10), 5vw, var(--space-20));
    width: max-content;
    animation: phero-brands-scroll 45s linear infinite;
}
.phero__brands-marquee:hover { animation-play-state: paused; }
.phero__brands-list {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-10), 5vw, var(--space-20));
    flex: 0 0 auto;
}
.phero__brand { flex: 0 0 auto; display: flex; align-items: center; }
.phero__logo { height: 52px; width: auto; object-fit: contain; }

@keyframes phero-brands-scroll {
    to { transform: translateX(calc(-50% - clamp(var(--space-10), 5vw, var(--space-20)) / 2)); }
}

/* ══════════════════════════ HERO — RESPONSIVE (anasayfayla aynı) ══════════════════════════ */
/* Topbar: %10 yan boşluk dar ekranda içeriği taşırıyordu — kademeli daralt (anasayfayla aynı). */
@media (max-width: 1200px) {
    .has-phero-nav .top-bar__inner { padding: 0 7%; }
    .has-phero-nav .top-bar__info { gap: var(--space-4); }
    .has-phero-nav .top-bar__end { gap: var(--space-3); }
}
/* Desktop hero-nav 769'a kadar korunur (mobil menü sınırı 768 — components.css);
   1024 altında yalnızca boşluklar sıkılaşır, tasarım değişmez. */
@media (max-width: 1024px) {
    .phero__mast .masthead--hero .masthead__brand .custom-logo { height: 42px; }
    .phero__mast .masthead { gap: var(--space-4); padding-inline: var(--space-5); }
    .phero__mast .masthead__collapse { padding-inline: var(--space-4); }
}
/* Hero mobil — sınır mobil menüyle AYNI (768); 769+ desktop hero bozulmadan kalır. */
@media (max-width: 768px) {
    .phero__body { flex-direction: column; align-items: stretch; min-height: 0; padding-inline: clamp(var(--space-5), 4vw, var(--space-8)); padding-block-end: 0; }
    .phero__content { max-width: none; padding-block: var(--space-10) var(--space-8); }
    .phero__figure { position: relative; width: 100%; margin: 0; height: 260px; }
    .phero__figure::before { background: none; }
    .phero__dots { display: none; }
    .phero__pill { width: 68px; height: 40px; }
}
@media (max-width: 680px) {
    .phero__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 480px) {
    .phero__logo { height: 38px; }
}