/* ===================================================================
   Header / Footer
   =================================================================== */

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--dur-base) var(--ease);
}
.site-header[data-scrolled] { box-shadow: var(--shadow-sm); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-h);
}

.site-header__logo {
    display: flex;
    align-items: center;
    flex: none;
    min-width: 0;
    /* Bağlantının basılabilir alanı logonun kendi yüksekliği kadardı: dar
       ekranda 29px'e düşüyor ve "anasayfaya dön" için parmakla zor
       yakalanıyordu. Kutu başlık şeridinin tamamını kaplar; görünüm
       değişmez, yalnızca hedef büyür. */
    min-height: 44px;
}
.site-header__logo img { width: auto; height: var(--logo-h); max-height: none; }
.site-header__wordmark {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-primary);
}

.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

/* ---------- Masaüstü menü ---------- */
.primary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-nav__item { position: relative; margin: 0; }

.primary-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-control);
    white-space: nowrap;
}
.primary-nav__link:hover { color: var(--color-primary); }

.primary-nav__link[aria-current="page"],
.primary-nav__link[data-active="true"] { color: var(--color-primary); }

.primary-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 6px;
    height: 2px;
    background: var(--color-accent);
}

.primary-nav__caret { transition: transform var(--dur-fast) var(--ease); }
[aria-expanded="true"] .primary-nav__caret { transform: rotate(180deg); }

/* ---------- Açılır menü ---------- */
.submenu {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    z-index: 10;
    min-width: 260px;
    padding: var(--space-2);
    margin: 0;
    list-style: none;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility var(--dur-fast);
}
.primary-nav__item.has-children [aria-expanded="true"] + .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.submenu li { margin: 0; }
.submenu a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
}
.submenu a:hover { background: var(--color-surface); color: var(--color-primary); }
.submenu a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

.primary-nav__item.is-cta { margin-left: var(--space-3); }
/* Etiket iki kelimeyse ("Kayıt Ol") butonun dar kutusunda alt alta
   kırılıyordu; çubuktaki buton tek satır kalır. */
.primary-nav__item.is-cta .btn { white-space: nowrap; }

/* Dar masaüstü: büyüyen menü metni 1200px altında sıkışabiliyor.
   Kırılım noktasını kaydırmak yerine boşlukları biraz daraltmak yeterli. */
@media (min-width: 992px) and (max-width: 1199px) {
    .primary-nav__link { padding-inline: var(--space-2); }
    .primary-nav__item.is-cta { margin-left: var(--space-2); }
}

/* ---------- Mobil menü ---------- */
@media (max-width: 991px) {
    .site-header__toggle { display: inline-flex; }

    .primary-nav {
        position: fixed;
        inset: var(--header-h) 0 0 auto;
        width: min(360px, 88vw);
        padding: var(--space-5) var(--space-5) var(--space-8);
        background: var(--color-background);
        border-left: 1px solid var(--color-border);
        overflow-y: auto;
        /* Panelin sonuna gelindiğinde kaydırma arkadaki sayfayı sürüklemesin
           (iOS'ta gövde kilidi tek başına bunu engellemiyor). */
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform var(--dur-base) var(--ease);
        visibility: hidden;
    }
    .primary-nav[data-open] { transform: none; visibility: visible; }

    .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .primary-nav__item { border-bottom: 1px solid var(--color-border); }

    .primary-nav__link {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-4) 0;
        font-size: var(--text-base);
    }
    .primary-nav__link[aria-current="page"]::after { display: none; }

    /* Mobilde açılır menü akordiyona dönüşür */
    .submenu {
        position: static;
        min-width: 0;
        padding: 0 0 var(--space-3) var(--space-4);
        border: 0;
        box-shadow: none;
        transform: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }
    .primary-nav__item.has-children [aria-expanded="true"] + .submenu { display: block; }

    /* CTA menü panelinin en üstüne alınır */
    .primary-nav__item.is-cta {
        order: -1;
        margin: 0 0 var(--space-4);
        border-bottom: 0;
    }
    .primary-nav__item.is-cta .btn { width: 100%; min-height: 48px; }

    .nav-backdrop {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: rgba(16, 32, 58, .45);
        z-index: 90;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-surface-dark);
    color: rgba(255, 255, 255, .8);
    padding-block: var(--space-8) var(--space-5);
    font-size: var(--text-sm);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr auto;
    gap: var(--space-7);
    /* Çizginin ÜSTÜNDEKİ boşluk. Altındakiyle (.site-footer__bottom
       padding-top) eşit tutuluyor: çizgi iki yanı da aynı olan bir ayraç,
       biri iki katıysa metin çizgiye değil ortadaki boşluğa yaslanmış
       görünüyordu. İkisi de --space-5. */
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-footer__org-logo {
    width: auto;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    margin-bottom: var(--space-4);
}

.site-footer__address { font-style: normal; line-height: 1.9; }
.site-footer__label { color: rgba(255, 255, 255, .55); }

.site-footer a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); text-decoration: underline; }

.site-footer__heading {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: var(--space-4);
}

.site-footer__nav ul,
.site-footer__social ul { list-style: none; margin: 0; padding: 0; }
.site-footer__nav li { margin-bottom: var(--space-3); }

.site-footer__social ul { display: flex; gap: var(--space-3); }
.site-footer__social li { margin: 0; }
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-control);
}
.site-footer__social a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-surface-dark);
}

/* Seyahat hizmeti / belge satırı. Izgaranın bütün sütunlarını aşar ve
   ortalanır: bir sütuna bırakılsaydı dar bir kolona sıkışır, uzun belge
   numarası satır satır kırılırdı. Footer'ı bölen çizginin hemen üstünde
   durur — çizgi .site-footer__top'un border-bottom'ı olduğu için satırın
   burada, o kutunun son çocuğu olması yeterli.

   Punto ve renk künye satırıyla aynı kademede: bilgi zorunlu ama footer'ın
   ana içeriğiyle yarışmamalı. */
.site-footer__travel {
    grid-column: 1 / -1;
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-5);
    font-size: var(--text-xs);
}
.site-footer__event { color: var(--color-accent); font-weight: 600; margin: 0; }
.site-footer__copy { color: rgba(255, 255, 255, .55); margin: 0; }

@media (max-width: 991px) {
    .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 599px) {
    .site-footer__top { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; }
}

/* ===================================================================
   Sayfa başlığı bandı
   =================================================================== */

.page-hero {
    position: relative;
    padding-block: clamp(36px, 6vw, 64px);
    background: var(--color-primary-900);
    color: var(--color-text-invert);
    overflow: hidden;
}

/* Dekoratif değil: koyu bandı kırmak için çok düşük opaklıklı ızgara.
   Ek dosya yüklemez. */
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 64px);
    pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero__title {
    margin: 0;
    color: var(--color-text-invert);
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
}

.page-hero__sub {
    margin: var(--space-3) 0 0;
    max-width: var(--measure);
    color: rgba(255, 255, 255, .78);
    font-size: var(--text-lg);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-xs);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, .35); }
.breadcrumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .95); }

/* ===================================================================
   Ortak içerik bileşenleri (birden fazla modülde kullanılır)
   =================================================================== */

/* ---------- Uzun metin sayfası ---------- */
.text-page__body { font-size: var(--text-lg); line-height: 1.75; max-width: none; }
.text-page__body p { margin-bottom: var(--space-5); }

.signature {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-accent);
    max-width: 380px;
}
.signature p { margin: 0; line-height: 1.7; }
.signature__name { font-weight: 600; font-size: var(--text-lg); font-family: var(--font-heading); }
.signature__role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Akordiyon ---------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }

.accordion__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) 0;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
}
.accordion__trigger:hover { color: var(--color-primary); }

.accordion__icon { flex: none; margin-top: 3px; color: var(--color-primary); transition: transform var(--dur-fast) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

.accordion__panel { padding: 0 0 var(--space-5); color: var(--color-text-muted); max-width: var(--measure); }
.accordion__panel p:last-child { margin-bottom: 0; }

/* ---------- İndirme listesi ---------- */
.download-list { list-style: none; margin: 0; padding: 0; }
.download-list li { margin: 0; border-bottom: 1px solid var(--color-border); }
.download-list li:first-child { border-top: 1px solid var(--color-border); }

.download-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color var(--dur-fast) var(--ease);
}
.download-item:hover { background: var(--color-surface); color: var(--color-primary); }

.download-item__icon { flex: none; color: var(--color-primary); }
.download-item__label { flex: 1; font-size: var(--text-sm); }
.download-item__action { flex: none; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }

.download-item.is-disabled { color: var(--color-text-subtle); pointer-events: none; }
.download-item.is-disabled .download-item__icon,
.download-item.is-disabled .download-item__action { color: var(--color-text-subtle); }


/* ---------- Boş durum ---------- */
.empty-state {
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-text-muted);
}

/* --- Banner yerleşim noktası -------------------------------------------
   Panelden yönetilen görsel alan. Banner yoksa şablon hiçbir şey basmadığı
   için burada boş durum kuralı gerekmiyor. */
.banner-slot { padding-block: var(--space-7); }
.banner-slot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
/* Tıklanabilir banner: fare üzerindeyken hafif geri çekilme. */
.banner-slot__link {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: opacity var(--dur-base) var(--ease);
}
.banner-slot__link:hover { opacity: .92; }
.banner-slot__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ===================================================================
   Sayfa üstü banner şeridi (templates/banner-hero.php)

   Kampanya afişleri kendi tipografisiyle hazırlanmış bütün görseller.
   Kırpılırlarsa başlıkları kesilir; bu yüzden oran korunur ve görsel
   hiçbir kırılma noktasında kırpılmaz. Yerleşim yatay kaydırma üzerine
   kurulu, böylece JavaScript olmadan da çalışır.
   =================================================================== */

/* Zemin afişin kendi lacivertine çekildi. Şerit önce saydamdı; ikinci
   banner'a geçerken o karenin görseli 'lazy' yüklendiği için henüz boyanmamış
   alan sayfanın beyazını gösteriyor, kutunun üstünde ince bir beyaz bant
   olarak okunuyordu. Koyu zeminde aynı boşluk afişin içinde kaybolur. */
.banner-hero {
    position: relative;
    /* Ölçülen değerler: her iki afişin sol kenar sütunu üstte #001442,
       altta #001238 / #161d39. Zemin bu iki uca kurulduğu için contain'in
       solda bıraktığı şerit afişin devamı gibi okunur. */
    background: linear-gradient(180deg, #001442 0%, #0a1734 100%);
}

.banner-hero__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* Kaydırma çubuğu şeridin altında koyu bir bant olarak görünüyordu;
       her iki motorda da tümüyle kaldırılıyor, kaydırma yine çalışır. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.banner-hero__track::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Oran yalnız slaytlara verildiğinde şerit, slaytlardan 8 px yüksek kalıyordu
   (esnek satırın kendi ölçüsü); afişin altında ince bir lacivert bant olarak
   okunuyordu. Şerit de aynı orana bağlanınca yüksekliği slaytla birebir olur.
   Yalnız geniş ekran: dar ekranda kutunun yüksekliğini oran değil metnin
   kendisi belirliyor (aşağıdaki 899/599 px kuralları). */
@media (min-width: 900px) {
    .banner-hero__track { aspect-ratio: var(--banner-ratio, 2.3) / 1; }
}
.banner-hero__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.banner-hero__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* Afişin kaynak oranı 2/1 (ajans dosyası 13667x6833). Kutu bilerek daha
       basık: 2:1 kutu masaüstünde ekranın neredeyse tamamını yiyor, altındaki
       içerik katlamanın çok altında kalıyordu. 2.3:1'de yükseklik %13 azalıyor
       ve afişin yazısı ekranın üst yarısına çıkıyor. Afiş contain ile
       basıldığı için kutunun yüksekliği doğrudan afişin boyu demek: oranı
       küçültmek şeridi de görseli de birlikte büyütür, boşluk eklemez.

       Afiş sağ üste yaslanır (aşağıdaki img kuralı); orandan artan pay
       solda, yazının durduğu boş zeminde kalır.

       'max-block-size: 82vh' burada YOK: kutuyu orandan koparıp kırpmayı
       öngörülemez kılıyordu. Yükseklik yalnız orandan gelir.

       Oranı templates/banner-hero.php ölçer (--banner-ratio): yayındaki en
       yayvan afiş kadar yayvan, en az 2.3. Sabit 2.3 iken 2.545:1 afiş
       kutuyu dolduramıyor, altta boş bir bant kalıyordu. Değişken
       gelmezse (eski önbellek, başka şablon) 2.3'e düşer. */
    aspect-ratio: var(--banner-ratio, 2.3) / 1;
}

.banner-hero__slide picture,
.banner-hero__link { display: block; width: 100%; height: 100%; line-height: 0; }
/* Geniş ekranda contain: kutu (2.3:1) afişten (2:1) daha basık olduğu için
   cover görseli büyütüp kırpıyordu — harita/bina olduğundan iri
   görünüyordu. contain afişin tamamını gösterir, yani konu küçülür ve hiçbir
   kenar kesilmez. Çıpa SAĞ ÜST: afiş sağ üst köşeye yaslanır, açıkta kalan
   şerit solda kalır — orası zaten yazının durduğu boş zemin.
   Şeridin zemini iki afişin de sol kenarından ölçülen laciverte boyandığı
   için (aşağıdaki .banner-hero kuralı) geçiş yerinde dikiş görünmez. */
.banner-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right top;
    display: block;
    vertical-align: bottom;
}
.banner-hero__link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* --- Görselin üstündeki metin katmanı --- */

/* Ajansın yeni afişleri YAZISIZ teslim edildi: başlık, tarih ve buton artık
   JPEG'in içinde değil, aşağıdaki katmanda gerçek metin olarak duruyor.
   Kazanç ölçülebilir: metin panelden değişiyor, ekran okuyucuya ulaşıyor,
   buton tıklanabilir ve dar ekranda yazı görselden bağımsız büyüyor.

   Metinsiz afişlerde (yazı görselin içine gömülüyse) bu sınıf hiç basılmaz;
   .banner-hero__slide o zaman eskisi gibi yalnızca görseldir. */
.banner-hero__slide--text {
    position: relative;
    isolation: isolate;
    /* Afişin kendi turuncusu. Sitenin --color-accent'i (#F8D269) daha sarı;
       aynı görselin üstünde yan yana durunca iki ayrı marka rengi gibi
       okunuyordu. Değer afişten ölçüldü (yazılı JPEG, turuncu satırın
       gövdesi). Yalnızca bu şeride bağlı: site jetonu değişmiyor. */
    --banner-accent: #F7A23A;
}

/* Zemin karartma. Afişlerin metin tarafı zaten koyu (gece göğü / lacivert),
   ama görsel dar ekranda yatay da kırpılıyor ve o zaman metnin altına açık
   bir bölge gelebiliyor. Perde soldan sağa siliniyor: yazının durduğu tarafı
   koyultur, afişin konusunu (bina, harita) açıkta bırakır. */
.banner-hero__slide--text::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(6, 18, 38, .78) 0%,
        rgba(6, 18, 38, .55) 34%,
        rgba(6, 18, 38, .12) 58%,
        transparent 76%);
    pointer-events: none;
}

/* Metin sayfanın kolonuyla hizalanır: gezinme çubuğundaki logo ve kayıt
   butonu ile aynı sol kenardan başlar. Katman tıklamayı geçirir — yalnızca
   butonun kendisi tıklanabilir, böylece parmakla kaydırma ve oklar çalışır. */
.banner-hero__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}
/* Şeridin metni sayfanın 1200 px'lik kolonuna hizalanmıyor.
   Neden: afiş tam genişlikte ve yazı afişte sol kenardan ~%4.7'de başlıyor.
   Kolona sokulunca 1920 px'lik bir ekranda 360 px içeriden başlıyor, yani
   afişteki yerinin iki katı kadar sağda — ve kolonun genişliği yazıyı da
   küçültüyordu. Sol kenar afişteki oranın (%4.7) biraz sağında tutuluyor:
   birebir oran ekranda kenara fazla yapışık duruyordu. Sağda sınır yok,
   satır uzunluğunu aşağıdaki em ölçüleri belirliyor. */
.banner-hero__body .container {
    width: 100%;
    max-inline-size: none;
    margin-inline: 0;
    padding-inline-start: clamp(var(--gutter), 7vw, 180px);
    padding-inline-end: var(--gutter);
}

/* Sol ok bu genişliklerden itibaren görünür ve kenardan en çok 28+40=68 px
   yer kaplar. 900-1200 px arasında 7vw bunun hemen dibine düşüyor; taban
   ölçü, okun başlığın son satırına değmesini engeller. Geniş ekranda 7vw
   zaten büyük olduğu için bir şey değiştirmez. */
@media (min-width: 900px) {
    .banner-hero__body .container { padding-inline-start: max(7vw, 86px); }
}

/* Başlık afişteki gibi 2-3 satıra sarılır; sağdaki konuya (bina, harita)
   girmesin diye sütun genişliği karakterle sınırlanır. */
.banner-hero__eyebrow,
.banner-hero__heading {
    margin: 0;
    font-family: var(--font-heading);
    line-height: 1.04;
    /* Afişin açık tonlu bölgelerine denk gelirse de okunur kalsın diye. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    /* Afişteki tipografi büyük harf; metnin kendisi normal yazılır ki
       ekran okuyucu harf harf hecelemesin ve panelde okunur dursun. */
    text-transform: uppercase;
}

/* Üst satır afişte başlıktan HEM daha büyük HEM çok daha ince: ölçüldüğünde
   büyük harf yüksekliği 55/43, kalem kalınlığı ise yarısı kadar (.085'e
   karşı .20). Bu yüzden 300 kesimi ayrıca yüklendi (assets/css/fonts.css);
   600/700 ile aradaki fark hiç kurulamıyordu. */
.banner-hero__eyebrow {
    /* Varsayılan beyaz; turuncu, metindeki *yıldız* işaretinden gelir
       (.banner-hero__mark). Renk kesime gömülü olsaydı harita afişinin
       beyaz "SAĞLIKTA" satırı bu alana hiç giremezdi. */
    color: var(--color-text-invert);
    font-weight: 300;
    letter-spacing: .01em;
    /* Punto afişin kendi oranından: turuncu satırın büyük-harf yüksekliği
       afiş genişliğinin %5.43'ü ölçüldü, yani doğrudan vw. Sabit rem ile
       kurulduğunda geniş ekranda afiştekinin belirgin altında kalıyordu. */
    font-size: clamp(2.125rem, 5.4vw, 6rem);
    /* Ölçüler em: sınır satırın kendi puntosuna göre ölçülmeli, yoksa
       başlık büyüdükçe sarma noktası kayıyor. Üst satır afişte tek satır;
       8.5em onu bölmeden tutar, sağdaki binaya da girmez. */
    max-inline-size: 8.5em;
}

.banner-hero__heading {
    color: var(--color-text-invert);
    font-weight: 700;
    letter-spacing: .005em;
    /* Başlığın büyük-harf yüksekliği afiş genişliğinin %4.29'u ölçüldü. */
    font-size: clamp(1.75rem, 4.3vw, 4.75rem);
    /* Başlık afişte iki (harita afişinde üç) satır; 7em o kırılmayı verir. */
    max-inline-size: 7em;
}

/* Başlık içindeki vurgulu bölüm (metinde *yıldız* ile işaretlenir).
   Harita afişinde "Ortak Platformu" satırı böyle turuncu.

   Afişte bu bölüm başlığın KENDİ satırıdır. Sarma serbest bırakıldığında
   telefonda satırın ortasından bölünüyordu ("TÜRKİYE'NİN ORTAK /
   PLATFORMU"); nowrap işaretli bölümü bir arada tutar, kırılma da
   kendiliğinden onun başına düşer. İşaretlenen bölüm bir satıra sığacak
   uzunlukta olmalı — panelde de böyle kullanılıyor (bir-iki kelime). */
.banner-hero__mark { color: var(--banner-accent); }

/* Başlıktaki işaretli bölüm bölünmez. Üst satırdaki işaret bu kuralın
   dışında: orada işaret çoğu zaman satırın tamamını kaplar ve dar
   ekranda sarabilmesi gerekir. */
.banner-hero__heading .banner-hero__mark { white-space: nowrap; }

/* Üst satır varken başlık ona yapışır — afişte ikisi tek blok gibi durur. */
.banner-hero__eyebrow + .banner-hero__heading { margin-top: .06em; }

/* Harita afişindeki ara satır ("Sağlığın Geleceğine Aynı Noktadan
   Bakıyoruz"). Aynı söz bina afişinde şeridin ANA BAŞLIĞI: orada üst satır
   (300, turuncu) ve başlık (700, beyaz) olarak iki alana bölünmüş duruyor.
   Burada ise başlığın altındaki ikincil satır.

   Ölçüldüğünde iki slayt aynı cümleyi iki ayrı yazıyla okuyordu: birinde
   5.4vw/300/büyük harf, diğerinde 1.35vw/600/normal yazım ve satırın
   tamamı turuncu. Aile eşitlenmişti ama kesim, yazım ve renk dağılımı
   ayrık kalmıştı — dört kat punto farkı.

   Bu yüzden alt satır üst satırın KESİMİNE geçiyor: 300, büyük harf,
   varsayılan beyaz ve turuncu yalnızca *yıldız* işaretinden. Punto,
   durduğu yerin izin verdiği kademede kalır (2.6vw): cümle bu slaytta
   başlık değil, başlığın altındaki satır. Böylece iki slaytta aynı söz
   aynı sesle, yalnız iki farklı boyda okunur. */
.banner-hero__subtitle {
    /* em cinsinden: sınır satırın kendi puntosuna göre ölçülmeli, yoksa
       punto büyüdükçe sarma noktası kayar. 9.5em, aşağıdaki blok kuralıyla
       ayrılan ikinci yarıyı ("AYNI NOKTADAN BAKIYORUZ", ölçüldü: 9.17em)
       tek satırda tutar. */
    max-inline-size: 9.5em;
    /* Başlıkla arasındaki nefes: aynı kesimde oldukları için bitişik
       yazıldığında başlığın dördüncü satırı gibi okunuyordu. */
    margin: .5em 0 0;
    font-family: var(--font-heading);
    font-weight: 300;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-size: clamp(1.125rem, 2.6vw, 2.875rem);
    line-height: 1.06;
    color: var(--color-text-invert);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* İşaretli bölüm kendi satırıdır. Bina afişinde bu iki yarı zaten iki ayrı
   alanda (üst satır / başlık) durur ve cümle "SAĞLIĞIN GELECEĞİNE" ile
   "AYNI NOKTADAN BAKIYORUZ" arasından bölünür; burada tek alanda olduğu
   için bölünmeyi bu kural verir.

   Genişlik sınırıyla yapılamadı, ölçüldü: "AYNI NOKTADAN BAKIYORUZ" 9.17em,
   "SAĞLIĞIN GELECEĞİNE AYNI" 9.20em. Aradaki .03em'lik farkı ayıracak bir
   sütun genişliği yok — hangi sınır konursa konsun ya "AYNI" yukarı
   çıkıyor ya da ikinci yarı üç satıra düşüyordu. */
.banner-hero__subtitle .banner-hero__mark { display: block; }

/* Tarih ve yer satırı. Başlıktan belirgin bir boşlukla ayrılır: afişte de
   ikisi arasında bir nefes var, bitişik yazılınca tek blok gibi okunuyor. */
.banner-hero__meta {
    /* Tarih ve mekân afişte iki ayrı satır; burada tek alandan geliyor ve
       geniş ekranda tek satıra sığar. Genişlik ölçüsü satırın ortasından
       ("JW Marriott / Hotel, Ankara") bölünmesin diye verildi. */
    max-inline-size: 46ch;
    margin: clamp(18px, 2.8vw, 42px) 0 0;
    font-family: var(--font-body);
    font-size: clamp(.9375rem, 1.18vw, 1.625rem);
    line-height: 1.5;
    /* Afişte tarih ve mekân alt alta iki satır. İkisi tek alanda tutuluyor
       (panelde tek kutu, tek kayıt); satır sonu metnin kendisinden gelir. */
    white-space: pre-line;
    color: var(--color-text-invert);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Buton sitenin diğer butonlarıyla aynı: .btn-accent rengi ve köşesi
   (--radius-control: 0, yani kare). Afişte yarı saydam beyaz bir hap
   çizilmişti ve bir süre öyle kuruldu; yayıncının kararıyla banner butonu
   gezinme çubuğundaki ve beyaz şerittteki kayıt butonlarıyla aynı görünüme
   döndü — aynı işi yapan üç buton üç ayrı biçimde okunmuyor.

   Renk ve köşe .btn / .btn-accent'ten geliyor, burada tekrarlanmıyor.
   Buradakiler yalnızca afişin üstünde durmaktan gelen farklar: tıklanabilir
   kalması, afişteki punto ve büyük harf, koyu zeminde kenarını ayıran
   gölge. */
.banner-hero__btn {
    pointer-events: auto;
    margin-top: clamp(16px, 2.4vw, 34px);
    padding-inline: clamp(20px, 2.2vw, 32px);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1rem, 1.22vw, 1.7rem);
    letter-spacing: .045em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

/* Dar ekran: 1920/820 kutusu burada bir şerit kadar kalıyor ve metin sığmıyor.
   Kutu dikleşir, görsel sağa hizalanır (bina ve harita kadrajda kalsın),
   perde de yatay değil dikey silinir — yazı görselin her yerinde okunur. */
@media (max-width: 899px) {
    .banner-hero__slide--text { aspect-ratio: 4 / 3; }
    /* Dar ekranda kutu afişten DİK: contain burada afişi ince bir şeride
       düşürürdü, o yüzden geniş ekranın contain'i cover'a döner. */
    .banner-hero__slide--text img { object-fit: cover; object-position: 72% center; }
    .banner-hero__slide--text::after {
        background: linear-gradient(180deg,
            rgba(6, 18, 38, .72) 0%,
            rgba(6, 18, 38, .62) 46%,
            rgba(6, 18, 38, .80) 100%);
    }
    .banner-hero__eyebrow { max-inline-size: 6.5em; }
    .banner-hero__heading { max-inline-size: 6em; }
    .banner-hero__meta     { max-inline-size: 30ch; }

    /* Oklar dar ekranda şeridin dikey ortasında duruyor, yani tam metin
       bloğunun üstünde: tarih satırının üzerine biniyorlardı. Dokunmatikte
       şerit zaten parmakla kaydırılıyor ve altta noktalar duruyor, ok
       gerekmiyor. */
    /* Ok kuralları bu dosyada aşağıda tanımlı; kaynak sırası eşit
       belirginlikte onları öne alıyordu. Bu yüzden bir kademe belirgin. */
    .banner-hero .banner-hero__arrow { display: none; }
}

/* Noktaların altında kalmasın diye: dar ekranda metin bloğu şeridin
   alt kenarına yaklaşıyor, kaydırma noktaları da orada duruyor. */
@media (max-width: 599px) {
    /* Dar ekranda kutunun yüksekliğini artık oran değil METNİN KENDİSİ
       belirler. Sabit oranda (9/8) yazının üstünde ~60 px boş bir bant
       kalıyordu; burada blok akışa giriyor, üstünde ve altında yalnızca
       kendi iç boşluğu kadar (18/26 px) yer var. Görsel arkaya alınır ve
       kutuyu doldurur, yani yüksekliği de metin belirler. */
    .banner-hero__slide--text {
        aspect-ratio: auto;
        background: #061226;
    }
    /* Görsel zemine iner: mutlak konumda kutuyu kaplar, yükseklik
       hesabından çıkar. */
    .banner-hero__slide--text > picture,
    .banner-hero__slide--text > .banner-hero__link {
        position: absolute;
        inset: 0;
    }
    /* Afiş SAĞDAN hizalı: 2:1 görsel kutunun yüksekliğine göre büyütülür
       (genişliği kutunun ~2 katı olur, bina/harita iri görünür) ve taşan
       bant tamamen soldan alınır. */
    .banner-hero__slide--text img {
        object-fit: cover;
        object-position: right center;
    }
    /* Perde iki katman: soldan sağa (yazının olduğu sol taraf koyu, afişin
       konusunun durduğu sağ taraf açık) ve üstten alta hafif bir genel
       karartma. Yazı boydan boya okunur, görsel yine seçilir. */
    .banner-hero__slide--text::after {
        background:
            linear-gradient(90deg,
                rgba(6, 18, 38, .80) 0%,
                rgba(6, 18, 38, .45) 62%,
                rgba(6, 18, 38, .10) 100%),
            linear-gradient(180deg,
                rgba(6, 18, 38, .25) 0%,
                rgba(6, 18, 38, .45) 100%);
    }
    /* Metin katmanı akışa girer: kutunun yüksekliği buradan doğar. */
    .banner-hero__body {
        position: relative;
        inset: auto;
        align-items: stretch;
        padding-block: 18px 26px;
    }

    /* Dar ekranda yazı kenara daha yakın başlar: 7vw burada 27 px ve
       satırların büyüyebileceği genişliği alıyordu. */
    .banner-hero__body .container {
        padding-inline-start: max(16px, 4vw);
        padding-inline-end: 12px;
    }

    /* Afişte üst satır TEK satır; telefonda 6.5em onu ikiye bölüyordu
       ("SAĞLIĞIN / GELECEĞİNE") ve başlıkla birlikte dört satır oluyordu.
       Barlow Condensed'de bu 19 karakterlik satır ~8.6em yer tutar; 12em
       sınır onu bölünmeden tutar, punto da 5.4vw'den 11vw'ye çıkar
       (393 px'lik ekranda 21 px yerine 43 px). Toplam üç satır. */
    .banner-hero__eyebrow {
        font-size: min(11vw, 52px);
        max-inline-size: 12em;
    }
    /* Başlık afişteki gibi iki satır kalır: "AYNI NOKTADAN" ~6.1em, tamamı
       ~10.8em; 9em sınır tam o aradan böler. */
    .banner-hero__heading {
        font-size: min(8.8vw, 42px);
        max-inline-size: 9em;
    }
    /* Alt satır telefonda da başlıkların kademesinde kalır: üst satır
       11vw, başlık 8.8vw, alt satır 5.4vw. 13em sınır onu burada da iki
       satıra böler. */
    .banner-hero__subtitle {
        font-size: min(5.4vw, 26px);
    }
    /* Tarih/mekân ve buton da bir kademe büyür, aralarındaki boşluk azalır:
       blok kısaldıkça üstte ve altta kalan boşluk da küçülüyor. */
    .banner-hero__meta {
        margin-top: min(4vw, 22px);
        font-size: min(4.4vw, 20px);
        line-height: 1.4;
        max-inline-size: 26ch;
    }
    .banner-hero__btn {
        margin-top: min(4vw, 22px);
        font-size: min(4.6vw, 21px);
    }
}

/* --- Oklar ve noktalar --- */

/* Kontroller görselin üstüne bindirilir: altta ayrı bir şerit açmak banner'ı
   gereksiz uzatıyordu. Katmanın kendisi tıklamayı geçirir; yalnızca oklar ve
   noktalar tıklanabilir kalır, böylece afiş bağlantısı örtülmez. */
/* Kontroller görselin üstüne bindirilir: oklar sol ve sağ kenarda dikey
   ortada, noktalar alt kenarda ortada. Katmanın kendisi tıklamayı geçirir;
   yalnızca oklar ve noktalar tıklanabilir kalır, böylece afiş örtülmez. */
.banner-hero__controls {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Oklar: banner'ın dikey ortasında, sol ve sağ kenarda. */
.banner-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--radius-control);
    background: rgba(16,32,58,.55);
    color: var(--color-text-invert);
    cursor: pointer;
    /* Afişin açık tonlu bölgelerinde de seçilebilsin diye hafif gölge. */
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
    transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.banner-hero__arrow--prev { inset-inline-start: clamp(8px, 2vw, 28px); }
.banner-hero__arrow--next { inset-inline-end: clamp(8px, 2vw, 28px); }
.banner-hero__arrow:hover { background: rgba(16,32,58,.8); border-color: rgba(255,255,255,.6); }
.banner-hero__arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.banner-hero__arrow--prev svg { transform: scaleX(-1); }

/* Geçiş çubukları banner'ın en altında, iki okun ortasında ve görselin
   üstünde durur. Arkalarındaki koyu hap kaldırıldı: afişin altında duran
   siyah bir bant gibi duruyordu. Noktaların açık afişlerde de seçilebilir
   kalmasını artık haptaki zemin değil, noktanın kendi gölgesi sağlıyor. */
.banner-hero__dots {
    position: absolute;
    inset-inline-start: 50%;
    bottom: clamp(8px, 1.4vw, 18px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    pointer-events: auto;
    padding-inline: 6px;
}

/* Nokta görsel olarak 9px kalır ama basılacak alan düğmenin kendisidir:
   9px'lik bir hedefe parmakla isabet edilmiyordu. Düğme kutuları yan yana
   döşenir (aralarında boşluk yok, dolgu var), böylece hedefler ne küçük
   kalır ne de üst üste binip yanlış noktaya götürür. */
.banner-hero__dot {
    display: grid;
    place-items: center;
    width: auto;
    height: 36px;
    padding: 0 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
.banner-hero__dot::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.75);
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
    transition: background 200ms var(--ease), width 200ms var(--ease);
}
.banner-hero__dot:hover::before { background: #fff; }
.banner-hero__dot[aria-current="true"]::before { width: 26px; background: var(--color-accent); }
.banner-hero__dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* --- Şeride sabit kayıt butonu --- */

/* Buton şeridin alt kenarına, afişin üstüne bindirilir; kaydırılan raya
   değil şeridin kendisine bağlıdır, böylece hangi banner görünürse
   görünsün aynı noktada durur. Sağ kenarda: alt kenarın ortası kaydırma
   noktalarının yeri, buton oraya girerse ikisi üst üste biner. Katman
   tıklamayı geçirir: yalnızca butonun kendisi tıklanabilir, afiş
   bağlantısı örtülmez. */
.banner-hero__cta {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(12px, 2vw, 26px);
    z-index: 3;
    pointer-events: none;
}

/* Sağ kenarı sayfanın kolonuyla aynı yerde biter: şeridin dışına taşmaz ve
   gezinme çubuğundaki kayıt butonunun tam altına hizalanır. */
.banner-hero__cta .container {
    display: flex;
    justify-content: flex-end;
}
.banner-hero__cta .btn {
    pointer-events: auto;
    /* Afişin açık tonlu bölgelerinde de kenarı seçilebilsin diye. */
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}


/* ===================================================================
   Kayıt şeridi — anasayfada banner altında, /kimler-katilmali/ sonunda.
   İki sayfa da aynı bloğu (templates/kayit-serit.php) basıyor; biçim
   modül dosyasında kalsaydı ikinci sayfada çıplak görünürdü.

   İçerik sola hizalı, buton sağda; dar ekranda buton metnin altına iner.
   Şeridin altındaki ince altın çizgi, anasayfada koyu hero'ya geçişi
   keskin bir kenar yerine bilinçli bir sınırla yapar.
   =================================================================== */
.kayit-serit {
    background: #fff;
    border-bottom: 3px solid var(--color-accent);
    /* Şerit bir geçiş bandı, kendi başına bir bölüm değil: banner ile koyu
       hero arasında bölüm ölçüsünde bir boşluk açınca sayfanın ilk ekranı
       yalnızca bu bandı gösteriyordu. Yükseklik metnin kendi ölçüsüne
       indirildi. */
    padding-block: clamp(20px, 2.4vw, 32px);
}

/* Buton metin bloğunun dikey ORTASINDA. Bir süre son satıra hizalıydı
   (flex-end): şeritte üç satır varken ortalama butonu satırların arasında
   bir yere düşürüyordu. Kapsam satırı kaldırıldıktan sonra
   (2026-09-04-kayit-seridi-kapsam-satiri.sql) blok künye + ana cümleye
   indi ve son satıra hizalama butonu şeridin altına yapıştırıyor,
   üstünde boşluk bırakıyordu. Ortalama artık blok kısaldığı için doğru
   olanı yapıyor.

   Sarma durumunda (dar ekran) hizalama satır başına uygulanır, yani
   buton metnin altına indiğinde bu kuralın etkisi yoktur. */
.kayit-serit__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 48px);
    flex-wrap: wrap;
}

/* Metin bloğu şeridin genişliğini kaplamaz: butona yer kalmalı. Satır
   uzunluğu ölçüyü ch cinsinden verilen max-width'ler tutuyor; esneme payı
   bu yüzden geniş bırakılabiliyor. */
.kayit-serit__text { flex: 1 1 44rem; min-width: 0; }
.kayit-serit__text > :last-child { margin-bottom: 0; }

/* Şeridin başlığı sayfanın ilk okunan cümlesi: banner'ın hemen altında,
   kayıt çağrısını taşıyor. h4 ölçüsünde kaldığında künye satırı ile
   kapsam satırının arasında kaybolduğu için bir kademe büyütüldü (h3). */
.kayit-serit__lead {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    line-height: 1.25;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    max-width: 62ch;
}

.kayit-serit__detail {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    max-width: 74ch;
}

/* Cümlenin ikinci yarısı geniş ekranda kendi satırında. Dar ekranda
   akışa dönüyor: zorlanmış satır sonu orada metni erken kırıp altına
   tek kelimelik satırlar bırakıyordu. */
.kayit-serit__clause { display: inline; }

/* Şablon ikinci yarıyı ltrim'liyor (satır başında boşlukla başlamasın
   diye), dolayısıyla akışa döndüğünde noktalı virgülle bitişiyordu:
   "gündemi;kamunun". Boşluk burada geri veriliyor — blok olduğunda
   gerekmediği için yalnız dar ekranda. */
.kayit-serit__clause::before { content: " "; }

@media (min-width: 768px) {
    .kayit-serit__clause { display: block; }
    .kayit-serit__clause::before { content: none; }
}

/* Künye satırı şeridin başında duruyor ve tarih/yer bilgisini taşıyor;
   ortak .eyebrow ölçüsü (14px) bu iş için fazla küçük kalıyordu: zirvenin
   adı ve tarihi başlıkla birlikte okunmalı, altında kaybolmamalı. */
.kayit-serit .eyebrow {
    font-size: var(--text-sm);
    letter-spacing: .06em;
    margin-bottom: var(--space-2);
}

/* Yayıncı dipnot alanını doldurursa: şeridin en altında, vurgulu. */
.kayit-serit__meta {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0;
}

.kayit-serit__action { flex: 0 0 auto; }

/* Sayfadaki asıl çağrı bu buton: gezinme çubuğundaki küçük kayıt
   bağlantısının tekrarı değil, şeridin bitiş noktası. Ortak .btn ölçüsü
   (44px, 16px metin) bu boyda bir şeritte gözden kaçıyordu. */
.kayit-serit__action .btn {
    min-height: 56px;
    padding: var(--space-4) var(--space-7);
    font-size: var(--text-lg);
}

/* ===================================================================
   Yüzen hızlı işlem butonları (WhatsApp + Kayıt)

   İki ayrı biçim, tek işaretleme (templates/floating-cta.php):

   · Geniş ekran: sağ kenarda üst üste duran yuvarlak ikon butonları.
     Yazı gizlenir — köşede duran bir kutu sayfanın içeriğini kapatmasın.
   · Telefon (<600px): ekranın altına yerleşen, parmakla ulaşılan bant.
     Yazı burada görünür: ikon tek başına "ne yapacağım" sorusunu
     telefonda cevaplamıyor, çünkü üzerine gelip ipucu okumak yok.
   =================================================================== */

.floating-cta {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-5);
    /* Onay bandı (200) ve lightbox (200) ÜSTÜNDE değil ALTINDA kalır:
       modalın önüne geçen yüzen buton kapatma düğmesini gölgeler.
       150, gezinme çubuğunun (100) üstü ama onların altı. */
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.floating-cta__btn {
    position: relative;   /* ipucu balonu buna göre yerleşir */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
}

.floating-cta__btn:hover { transform: scale(1.06); }

.floating-cta__icon { flex: none; }

/* Geniş ekranda buton yalnız ikondur; yazı DOM'dan SİLİNMEZ, yalnız
   görünmez olur — ekran okuyucu butonu adsız okumasın. */
.floating-cta__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Geniş ekran: üzerine gelince ne olduğu yazsın ---

   İkon tek başına "ne yapacağım" sorusunu cevaplamıyordu. Tarayıcının
   kendi title ipucu bu iş için yetersiz: yarım saniye gecikmeyle çıkıyor,
   sitenin tipografisini kullanmıyor ve klavyeyle gezen ziyaretçiye hiç
   görünmüyor. Bu yüzden ipucu, zaten işaretlemede duran etiketin
   kendisinden kuruluyor — ikinci bir düğüm eklenmiyor.

   Gizliyken opacity 0 kullanılır, display/visibility DEĞİL: ikisi de
   düğümü erişilebilirlik ağacından düşürür ve buton adsız kalırdı.
   pointer-events kapalı, yoksa balon imlecin altına girip butonun
   hover'ını kendi üstüne alıyor ve titreşim yapıyor. */
@media (min-width: 600px) {
    .floating-cta__label {
        /* sr-only kısıtları geri alınır; kutu yeniden ölçü kazanır. */
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;

        top: 50%;
        right: calc(100% + var(--space-2));
        padding: 6px 10px;
        background: var(--color-surface-dark);
        color: var(--color-text-invert);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.2;

        opacity: 0;
        transform: translate(var(--space-1), -50%);
        transition: opacity .15s ease, transform .15s ease;
        pointer-events: none;
    }

    /* Fare ve klavye aynı ipucunu görür: :focus-visible olmadan sekmeyle
       gezen ziyaretçi ikonun ne olduğunu hiçbir yerde okuyamıyordu. */
    .floating-cta__btn:hover .floating-cta__label,
    .floating-cta__btn:focus-visible .floating-cta__label {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* WhatsApp: zemin markanın kendi yeşili, işaret beyaz. */
.floating-cta__btn--whatsapp {
    background: var(--color-whatsapp);
    color: var(--color-text-invert);
}
.floating-cta__btn--whatsapp:hover { background: var(--color-whatsapp-hover); }

/* Kayıt: sitedeki diğer kayıt çağrılarıyla aynı renk (.btn-accent). */
.floating-cta__btn--register {
    background: var(--color-accent);
    color: var(--color-text);
}
.floating-cta__btn--register:hover { background: var(--color-accent-600); }

/* Çerez onay bandı açıkken yığın bandın üstüne çıkar: ikisi de alt
   kenara sabitlenmiş, üst üste binerlerse ziyaretçi ne onay verebilir
   ne WhatsApp'a ulaşabilir. Bant kapatılınca düğüm DOM'dan siliniyor,
   kural kendiliğinden düşer. */
body:has(.consent-bar) .floating-cta {
    bottom: calc(var(--space-5) + 96px);
}

/* --- Telefon: alt bant --- */
@media (max-width: 599px) {
    /* Bant ekranın alt kenarına yapışır ve köşeleri KIRILMAZ: sitenin
       buton dili baştan sona köşeli (--radius-control: 0), yuvarlatılmış
       bir kart bandı sayfanın geri kalanına yabancı duruyordu. Kenardan
       pay da bırakılmaz — yüzen bir kart değil, ekranın alt şeridi. */
    .floating-cta {
        inset: auto 0 0 0;
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-2);
        background: var(--color-background);
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: var(--shadow-md);
    }

    /* Bant tüm genişliği paylaşır: iki eylem eşit dokunma alanı alır. */
    .floating-cta__btn {
        flex: 1 1 0;
        width: auto;
        height: auto;
        min-height: 52px;
        flex-direction: column;
        gap: 2px;
        padding: var(--space-2);
        /* Hücreler de köşeli: bandın kendisi köşeliyken içindeki dolgulu
           kayıt kutusunun yuvarlak kalması tek başına oval görünüyordu. */
        border-radius: 0;
        box-shadow: none;
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.2;
    }

    .floating-cta__btn:hover { transform: none; }

    /* İkon bantta küçülür: yuvarlak butondaki ölçü (26px), altına yazı
       da giren bir hücrede satırları sıkıştırıyor. Ölçü işaretlemedeki
       width/height'ı ezer. */
    .floating-cta__icon { width: 22px; height: 22px; }

    .floating-cta__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    /* WhatsApp bantta zeminsiz durur: bandın kendisi beyaz bir yüzey,
       içine ikinci bir renkli kutu daha koymak iki butonu da vurgusuz
       bırakıyor. İşaret marka yeşilinde, yazı gövde renginde. */
    .floating-cta__btn--whatsapp {
        background: transparent;
        color: var(--color-text);
    }
    .floating-cta__btn--whatsapp:hover { background: var(--color-surface-sunken); }
    .floating-cta__btn--whatsapp .floating-cta__icon { color: var(--color-whatsapp); }

    /* Bandın vurgulu eylemi kayıt: dolgulu kalır. */
    .floating-cta__btn--register { background: var(--color-accent); }

    /* Bant içeriğin üstünde duruyor; alt bilginin son satırı bandın
       altında kalıcı olarak gizlenmesin diye gövdeye pay bırakılır. */
    body:has(.floating-cta) { padding-bottom: 84px; }

    /* Onay bandı telefonda tüm genişliği kaplıyor: yığını yükselten
       masaüstü payı burada fazla, bant kendi yüksekliği kadar kalkar. */
    body:has(.consent-bar) .floating-cta {
        bottom: 148px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-cta__btn { transition: none; }
    .floating-cta__btn:hover { transform: none; }
}

/* Balon kayarak değil, olduğu yerde açılır. Kural YALNIZ geniş ekrana
   yazılır: telefonda etiket akışta duran düz bir yazı, ona translate
   uygulamak onu yarım satır yukarı kaydırırdı. */
@media (prefers-reduced-motion: reduce) and (min-width: 600px) {
    .floating-cta__label { transition: none; transform: translate(0, -50%); }
}

@media print {
    .floating-cta { display: none !important; }
}