/*
 * Top Banner: Sayfa icerik alaninin tepesinde, otomatik olarak yukari
 * dogru kapanan ve kullanici tarafindan acilip kapatilabilen banner.
 * Acikken: ok yukari (kapatma niyeti); kapaliyken: ok asagi (acma niyeti).
 */

.top-banner {
    /* Banner kapaliyken animasyon hedefi olarak kullanilacak max-height ust siniri.
       Acikken icerik (resim) dogal yuksekliginde render olur ve max-height bunu sinirlamaz. */
    --top-banner-max-height: 200px;
    /* Toggle butonunun banner alt cizgisinin disina ne kadar tasacagi. */
    --top-banner-toggle-size: 28px;

    position: relative;
    width: 100%;
    max-height: var(--top-banner-max-height);
    /* Yatayda .container ile gorsel olarak hizali kalsin diye padding-x veriliyor
       (.container desktop'ta 40px, mobile'da 1rem yatay padding kullaniyor).
       Banner artik .container DISINDA render edildigi icin kendi padding'ini yonetir;
       boylece sayfa-spesifik .container padding override'lari banner'i bozmaz. */
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: visible;
    transition:
        max-height 1500ms cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 1500ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    will-change: max-height;
    /* KRITIK: Banner element'inin kendisi tiklamalari engellemez. Boylece banner
       (kapali veya acik) altindaki sayfa butonlarini hicbir zaman bloklamaz.
       Cocuklarin (content/toggle) kendi pointer-events kurallari bagimsiz calisir;
       'none' parent + 'auto' child kombinasyonu CSS spec'ine gore child'in click
       almasina izin verir, banner sadece transparan bir layout konteyneri olur. */
    pointer-events: none;
}

/* Clip layer: banner overflow'u toggle butonu icin "visible" oldugundan, icerik
   yukari translate edilirken banner sinirinin disina tasmamasi icin ayri bir
   wrapper kullaniyoruz. overflow:hidden burada calisir; toggle bundan etkilenmez. */
.top-banner__clip {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

/* Banner ic icerigi: kapanirken hem yukari kayar hem solar.
   transform + opacity birlikte kullanilarak "yukari dogru fade-out" hissi olusur.
   transition'lar toggle butonunu etkilemesin diye banner'a degil, sadece content'a
   uygulanir; toggle her durumda tam opaklikta gorunur kalir.
   pointer-events: auto -> banner element'i pointer-events:none olsa da content
   kendi click alanini geri kazanir (resim acikken kullanici hover/click edebilsin). */
.top-banner__content {
    width: 100%;
    border-radius: inherit;
    line-height: 0; /* img alt-ust beyaz boslugu engellemek icin. */
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 1300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 1500ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    pointer-events: auto;
}

/* Banner resmi: tam genislik, en-boy oranini koruyarak yuksekligi otomatik.
   opacity transition: API confirm ile role degisirse JS ".top-banner__image--swapping"
   class'ini gecici olarak ekler -> resim soluklasir -> yeni src yuklendikten sonra
   class kaldirilir -> resim geri belirir. Boylece content swap kullanici icin
   sicrama yerine smooth bir gecis olur. */
.top-banner__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

.top-banner__image--swapping {
    opacity: 0;
}

/* Banner LinkUrl ayarli ise gorsel <a> ile sarmalanir. Link tum gorsel alanini
   kapsar ve cursor: pointer ile kullaniciya tiklanabilir oldugunu belirtir.
   text-decoration ve color reset edilir; img kendi hover effect'ine sahip degil
   ama hover'da hafif opaklik ile tikla-edilebilir oldugunun gorsel feedback'i verilir.
   color: inherit ki ileride link icine yazi eklenirse banner'a uyumlu olsun. */
.top-banner__link {
    display: block;
    width: 100%;
    line-height: 0; /* img alt-ust beyaz boslugu engellemek icin (parent .top-banner__content ile ayni). */
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
    cursor: pointer;
    transition: opacity 160ms ease-in-out;
}

.top-banner__link:hover,
.top-banner__link:focus-visible {
    opacity: 0.92;
}

.top-banner__link:focus-visible {
    outline: 2px solid #11bf2b;
    outline-offset: 2px;
}

/* Toggle butonu yatayda tam ortada konumlanir.
   Acik state: dikeyde banner alt kenarinin yarisi tasacak sekilde (translateY 50%) -> banner ile entegre gorunum.
   Kapali state: tamamen banner alt kenarinin disinda (translateY 100%) -> toggle'in ust kenari banner.bottom
   ile ayni hizada olur; banner kapali + margin yokken bu noktanin viewport top = 0 olmasi sayesinde toggle
   dairesinin ust sinirini pencerenin baslangicina hizalar (toggle tamamen gorunur kalir).
   transform transition'i banner kapanma transition'iyla ayni 1500ms suresinde tutulur ki toggle yarim
   konumdan tam disari konuma yumusak sekilde kayar.
   color degeri SVG path'inde stroke="currentColor" oldugu icin ikon rengini belirler. */
.top-banner__toggle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: var(--top-banner-toggle-size);
    height: var(--top-banner-toggle-size);
    padding: 0;
    border: 1px solid #cdd6d0;
    border-radius: 50%;
    background-color: #ffffff;
    color: #7d8398;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transition:
        background-color 160ms ease-in-out,
        color 160ms ease-in-out,
        border-color 160ms ease-in-out,
        box-shadow 160ms ease-in-out,
        transform 1500ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    /* Banner pointer-events:none oldugu icin toggle kendisi explicit olarak auto.
       Acik state'te kullanici toggle ile banner'i kapatabilir; kapali state'te bu
       degerin uzerinden gecen ek kurallar (asagida) toggle'i reveal'e bagli yapar. */
    pointer-events: auto;
}

.top-banner__toggle:hover {
    background-color: #11bf2b;
    border-color: #11bf2b;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(17, 191, 43, 0.25);
}

.top-banner__toggle:focus-visible {
    outline: 2px solid #11bf2b;
    outline-offset: 2px;
}

/* SVG ok ikonu varsayilan olarak yukari bakar (acik durumdaki niyet: kapat). */
.top-banner__toggle-icon {
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    display: block;
}


/* Kapali durum: max-height 0 ile yer kaplamaz, alt margin sifirlanir.
   Banner sayfa icerigini asagi itmemesi icin margin-top kullanilmaz; bunun yerine
   toggle butonu translateY(100%) ile tamamen banner.bottom altina (viewport top'a)
   tasinir; boylece toggle gorunur kalir AMA sayfa icerigi yukari kaymaz. */
.top-banner[data-state="closed"] {
    max-height: 0;
    margin-bottom: 0;
}

.top-banner[data-state="closed"] .top-banner__toggle-icon {
    transform: rotate(180deg);
}

/* Kapanirken icerik yukari dogru kayarak fade-out olur (yukari sufle/swipe efekti);
   pointer-events kapatilarak gorunmez resme tiklama engellenir. */
.top-banner[data-state="closed"] .top-banner__content {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* Kapali durumda toggle butonu:
   1) translateY(100%) -> banner.bottom (= viewport top 0) altina tamamen tasinir, dairenin
      ust sinirini pencerenin baslangiciyla hizalar.
   2) opacity: 0 -> default olarak gorunmez (sayfa temiz kalir).
   3) pointer-events: none KRITIK: aksi halde gorunmez toggle, sayfanin tepesindeki
      butonlarin tiklamalarini engelliyordu (toggle z-index: 2 ile sayfa icerigi uzerinde duruyor).
   Hover-revealed class JS tarafindan banner'in acikken kaplayacagi alana mouse ile
   geldiginde eklenir; o anda toggle opacity: 1 olur ve pointer-events: auto ile
   tiklanabilir hale gelir. transform 1500ms transition ile banner kapanma animasyonuyla
   senkron sekilde yarim konumdan tam disari konuma yumusakca kayar. */
.top-banner[data-state="closed"] .top-banner__toggle {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 100%);
    transition:
        opacity 200ms ease-in-out,
        transform 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.top-banner[data-state="closed"].top-banner--hover-revealed .top-banner__toggle,
.top-banner[data-state="closed"] .top-banner__toggle:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Tablet/mobil: .container yatay padding'i 1rem (16px); banner'in da ayni hizada
   kalmasi icin yatay padding'i kucult. */
@media (max-width: 992px) {
    .top-banner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Mobil: alt margin ve toggle biraz daha kompakt olsun (resim aspect ratio'yu zaten korur). */
@media (max-width: 576px) {
    .top-banner {
        --top-banner-toggle-size: 26px;
        margin-bottom: 20px;
    }
}

/* Hareket azaltma tercihine saygi (animasyonlari devredisi birak). */
@media (prefers-reduced-motion: reduce) {
    .top-banner,
    .top-banner__toggle-icon,
    .top-banner__toggle {
        transition: none;
    }
}

/* Flicker onleme: dismissed kullanicilar icin partial'daki inline script bu attribute'u
   ekler. Banner ilk paint'te closed state'te animasyonsuz (anlik) gorunur; ana JS
   init asamasinda bu attribute kaldirilir, sonraki manuel acma normal smooth animasyonla
   calisir. */
.top-banner[data-no-transition],
.top-banner[data-no-transition] .top-banner__content,
.top-banner[data-no-transition] .top-banner__toggle,
.top-banner[data-no-transition] .top-banner__toggle-icon {
    transition: none !important;
}

/* STICKY MODE (AutoCollapse=false): Toggle butonu tamamen gizlenir; kullanici banner'i
   kapatamaz. visibility:hidden + pointer-events:none -> ne tikla alir ne de hover-revealed
   selector'larina maruz kalir (visibility:hidden ile :hover ve diger pseudo'lar tetiklenmez).
   display:none yerine visibility:hidden tercih edilmesinin nedeni: layout'u koru
   (banner yuksekligi, toggle absolute oldugu icin etkilenmez ama ileride relative bir
   icerik eklenirse kayma olmasin) ve aria-hidden gibi a11y duzeltmeleriyle birlikte
   calisabilsin. */
.top-banner--sticky .top-banner__toggle {
    visibility: hidden;
    pointer-events: none;
}