/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/12-ust/section.css
 *
 * Her bildirime `!important` eklendi. Sebep:
 * florax teması `.post-entry h2 { font-size: 36px !important }` gibi
 * kurallar taşıyor ve `!important` özgüllüğü dinlemiyor. Ayrıntı:
 * scripts/gs-important.mjs başlığı ve assets/base.css.
 */
/* ─── 12-ust · HEADER ─────────────────────────────────────────────────────────
 *
 * Palet `base.css`teki ortak koyu paletten gelir (`--gs-koyu-*`); bu dosyada
 * çıplak hex YOKTUR. Boşluklar `--gs-bo-1…6`/`--gs-ritim` ölçeğinden
 * (Ö-106); ölçeğe girmeyen tek sınıf BİLEŞENİN KENDİ ÖLÇÜSÜDÜR ve aşağıda
 * yorumla işaretlidir (Ö-108'in ikinci sınıfı).
 *
 * ⚠️ `!important` YAZILMAZ — köprü ekler (`scripts/gs-important.mjs`, Ö-014).
 * ⚠️ `.us-ilerleme`nin `width`i CSS'te TANIMLI DEĞİL: `motion.ts` onu her
 *    karede satır içi yazıyor ve `!important` satır içi stili yener (Ö-023).
 *    JS'siz varsayılan genişlik `0`dır ve o da bu dosyada değil, elemanın
 *    `width` bildirmemesinden gelir.
 */

.gs-12-ust {
    --us-metin: var(--gs-koyu-metin);
    --us-ikincil: var(--gs-koyu-ikincil);
    --us-silik: var(--gs-koyu-silik);
    --us-hat: var(--gs-koyu-hat);
    --us-aralik: 0.14em;

    /* ── DİKİŞ ①: header'ın KENDİ yüksekliği ──────────────────────────────
     * Değerler TAHMİN DEĞİL, ÖLÇÜM (F3.3, `/k/anasayfa`, `.us` yüksekliği):
     *   <1025 px → 57 px   tek satır: marka + mandal (panel akışın dışında)
     *   ≥1025 px → 81 px   tek satır: marka · nav · telefon · CTA · dil
     * Sözleşme ikiye ayrılıyor: `--us-h` iç yükseklik (56 / 80), `--us-kenar`
     * alt kenarlık (1 px). Toplamı ölçülen değerdir.
     *
     * 🔴 Ö-092 ① BURADA KAPANIYOR. Eski header dar ekranda ÜÇ SATIRA sarıyordu
     * (164 px) ve satır sayısı DİLE bağlıydı (375'te TR iki, DE üç satır).
     * Sağ blok mandalın altına indiği için satır sayısı artık dilden BAĞIMSIZ:
     * marka + mandal her dilde tek satır.
     *
     * 🔴 Seçici listesi neden İKİ elemanı birden hedefliyor: custom property
     * KARDEŞTEN miras alınmaz, ATADAN alınır (M-080'in ölçtüğü tuzak).
     * `--us-h`yi sonraki bölüme de vermezsek `calc(var(--us-h) …)` orada
     * ÇÖZÜLEMEZ. Değer böylece tek yerde kalır, iki kural ayrışamaz. */
}

.gs-12-ust,
.gs-12-ust + .gs {
    --us-h: 3.5rem;
    /* Alt kenarlığın KALINLIĞI (rengi `--us-hat`). Ayrı bir ad, çünkü ilk
     * ekran hesabına giren şey renk değil, kapladığı 1 px'tir. */
    --us-kenar: 1px;
}

/* ── DİKİŞ ②: sonraki bölüm ilk ekranda ne kadar yer kaldığını bilir ───────
 * `--gs-ust-yer` `base.css`te NÖTR tanımlıdır (`0rem`); değerini üstteki bölüm
 * verir. Bağımlılık TEK YÖNLÜ: açılış header'ı tanımaz, header açılışı tanır.
 * Seçici GENERİKTİR (`+ .gs`) — hangi bölüm altına gelirse gelsin çalışır,
 * yani F4'ün on beş sayfası için ayrıca kural yazılmaz. */
.gs-12-ust + .gs {
    --gs-ust-yer: calc(var(--us-h) + var(--us-kenar) + var(--gs-ust-ek));
}

.gs-12-ust .us {
    position: relative !important;
    z-index: 20 !important;
    background: rgb(var(--gs-koyu-zemin-rgb) / 0.94) !important;
    border-bottom: 1px solid var(--us-hat) !important;
    font-family: var(--gs-font) !important;
    color: var(--us-ikincil) !important;
}

/* Kumpas: çentikli cetvel. Header'ın alt kenarı sayfanın ölçü şeridi. */
.gs-12-ust .us::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: 0 !important;
    inset-block-end: -1px !important;
    height: 5px !important;
    background-image: repeating-linear-gradient(
        90deg,
        var(--us-hat) 0 1px,
        transparent 1px,
        transparent 2.25rem
    ) !important;
    background-repeat: no-repeat !important;
    background-position: 0 100% !important;
    pointer-events: none !important;
}

.gs-12-ust .us-ilerleme {
    position: absolute !important;
    z-index: 1 !important;
    inset-block-end: -1px !important;
    inset-inline-start: 0 !important;
    height: 2px !important;
    background: var(--us-metin) !important;
}

.gs-12-ust .us-sinir {
    max-width: var(--gs-container) !important;
    margin-inline: auto !important;
    padding-inline: var(--gs-gutter) !important;
}

.gs-12-ust .us-ic {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--gs-bo-4) !important;
    min-height: var(--us-h) !important;
}

/* ── MARKA ────────────────────────────────────────────────────────────────── */

.gs-12-ust .us-marka {
    display: flex !important;
    align-items: center !important;
    gap: var(--gs-bo-3) !important;
}

.gs-12-ust .us-marka-mark {
    width: auto !important;
    height: 2rem !important;   /* bileşenin kendi ölçüsü — logonun optik yüksekliği */
    transition: transform 0.3s ease !important;
}

.gs-12-ust .us-marka:hover .us-marka-mark {
    transform: translateY(-2px) !important;
}

.gs-12-ust .us-marka-yazi {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;   /* bileşenin kendi ölçüsü — iki satırın optik kilidi */
    line-height: 1 !important;
}

.gs-12-ust .us-marka-ad {
    font-size: var(--gs-fs-4) !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    color: var(--us-metin) !important;
}

.gs-12-ust .us-marka-alt {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: 0.34em !important;
    color: var(--us-silik) !important;
}

/* ── MANDAL — <1025 px'te menüyü açan tek düğme ───────────────────────────
 * `<summary>` tarayıcının kendi mandalıdır: Tab ile odaklanır, Enter/Space
 * ile açılır, ekran okuyucuya "genişletilmiş/daraltılmış" olarak geçer ve
 * BUNUN İÇİN JAVASCRIPT GEREKMEZ. Ö-018'in kısıtı bu yüzden ısırmıyor. */

.gs-12-ust .us-mandal {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--gs-bo-2) !important;
    min-height: var(--gs-hedef) !important;
    padding-block: var(--gs-bo-2) !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 800 !important;
    letter-spacing: var(--us-aralik) !important;
    text-transform: uppercase !important;
    color: var(--us-metin) !important;
    cursor: pointer !important;
    list-style: none !important;
}

/* Tarayıcının varsayılan üçgeni kaldırılır — yerine kendi işaretimiz geçiyor.
 * WebKit ayrı bir sözde eleman kullandığı için iki kural birden gerekir. */
.gs-12-ust .us-mandal::-webkit-details-marker {
    display: none !important;
}

/* İki çizgi: kapalıyken üst üste iki çubuk, açıkken çarpı.
 * `currentColor` kullanılır ki odak/hover rengiyle birlikte değişsin. */
.gs-12-ust .us-mandal-cizgi {
    position: relative !important;
    display: block !important;
    width: 1.125rem !important;   /* bileşenin kendi ölçüsü — ikon kutusu 18×18 */
    height: 2px !important;
    background: currentColor !important;
    transition: background-color 0.2s ease !important;
}

.gs-12-ust .us-mandal-cizgi::before,
.gs-12-ust .us-mandal-cizgi::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: 0 !important;
    height: 2px !important;
    background: currentColor !important;
    transition: transform 0.2s ease !important;
}

.gs-12-ust .us-mandal-cizgi::before {
    inset-block-start: -6px !important;
}

.gs-12-ust .us-mandal-cizgi::after {
    inset-block-start: 6px !important;
}

.gs-12-ust .us-panel[open] .us-mandal-cizgi {
    background: transparent !important;
}

.gs-12-ust .us-panel[open] .us-mandal-cizgi::before {
    transform: translateY(6px) rotate(45deg) !important;
}

.gs-12-ust .us-panel[open] .us-mandal-cizgi::after {
    transform: translateY(-6px) rotate(-45deg) !important;
}

/* ── PANEL — mandalın altına inen menü ────────────────────────────────────
 * Akışın DIŞINDA (`position: absolute`): açılınca header'ı uzatmaz, yani
 * `--us-h` sabit kalır ve altındaki bölümün dikişi kaymaz. */
.gs-12-ust .us-panel-ic {
    position: absolute !important;
    z-index: 5 !important;
    inset-inline: 0 !important;
    inset-block-start: 100% !important;
    display: grid !important;
    gap: var(--gs-bo-5) !important;
    /* Panel kadraja SIĞMAK zorunda. Yüksekliği yalnız header'a değil,
     * header'ın ÜSTÜNDE harcanan yere de bağlı: bir duyuru bandı varken panel
     * ekranın çok aşağısından başlar ve `100svh - --us-h` kadraj dışına
     * taşardı (ölçüldü: 375×700, bant açıkken panelin dibi 229 px dışarıda). */
    max-height: calc(100svh - var(--us-h) - var(--us-kenar) - var(--gs-ust-ek)) !important;
    overflow-y: auto !important;
    padding: var(--gs-bo-5) var(--gs-gutter) var(--gs-bo-6) !important;
    background: var(--gs-koyu-zemin) !important;
    border-block-end: 1px solid var(--us-hat) !important;
}

.gs-12-ust .us-nav-liste {
    display: grid !important;
    gap: var(--gs-bo-1) !important;
}

/* Hizmetler dar ekranda AÇILIR MENÜ DEĞİL, girintili bir alt listedir:
 * panelin içinde ikinci bir mandal, tek elle kullanılan bir menüde fazladan
 * bir dokunuş demek. Aynı altı bağlantı, bir adım eksiğiyle. */
.gs-12-ust .us-alt {
    display: grid !important;
    gap: var(--gs-bo-1) !important;
    margin-inline-start: var(--gs-bo-4) !important;
    padding-inline-start: var(--gs-bo-4) !important;
    border-inline-start: 1px solid var(--us-hat) !important;
}

/* ── DOKUNMA HEDEFİ — WCAG 2.2 AA · 2.5.8 (Ö-084 ②) ──────────────────────
 * Metnin ölçüsü hedefin ölçüsü DEĞİLDİR. Kutu `--gs-hedef` kadar büyür, metin
 * dikeyde ORTALANIR — yazının konumu kaymaz, çevresindeki dokunulabilir alan
 * büyür. `inline-flex` bu yüzden: `block` olsaydı metin tepeye yapışırdı. */
.gs-12-ust .us-bag {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--gs-hedef) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: var(--us-ikincil) !important;
    cursor: pointer !important;
}

.gs-12-ust .us-bag:hover {
    color: var(--us-metin) !important;
}

/* Alt çizgi kutunun DİBİNE değil, ortalanmış metnin altına oturur: kutu
 * `--gs-hedef` kadar yükseldi, çizgi onunla aşağı kaysaydı yazıdan koparadı.
 * `calc` kutunun fazlasını geri alıyor. */
.gs-12-ust .us-bag::after {
    content: "" !important;
    position: absolute !important;
    inset-block-end: calc((var(--gs-hedef) - 1.4em) / 2 - 0.35rem) !important;
    inset-inline-start: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: var(--us-metin) !important;
    transition: width 0.25s ease !important;
}

.gs-12-ust .us-bag:hover::after {
    width: 100% !important;
}

/* Dar ekranda grup bir MENÜ DEĞİL, yalnız bir başlık: tıklanacak bir hedefi
 * olmadığı için düğme değil, etiket gibi durur.
 * ⚠️ Bu kural `.us-bag`den SONRA gelmek ZORUNDA — ikisi de (0,2,0). */
.gs-12-ust .us-grup-bas {
    color: var(--us-silik) !important;
    cursor: default !important;
}

.gs-12-ust .us-grup-bas:hover::after {
    width: 0 !important;
}

.gs-12-ust .us-ok {
    display: none !important;
}

/* ── SAĞ BLOK — telefon · CTA · dil ───────────────────────────────────────── */

.gs-12-ust .us-sag {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--gs-bo-4) !important;
    padding-block-start: var(--gs-bo-5) !important;
    border-block-start: 1px solid var(--us-hat) !important;
}

.gs-12-ust .us-tel {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;   /* bileşenin kendi ölçüsü — etiket ↔ numara optik kilidi */
    min-height: var(--gs-hedef) !important;
    line-height: 1.1 !important;
}

.gs-12-ust .us-tel-et {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--us-aralik) !important;
    text-transform: uppercase !important;
    color: var(--us-silik) !important;
}

.gs-12-ust .us-tel-no {
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    color: var(--us-metin) !important;
    font-variant-numeric: tabular-nums !important;
}

/* ── DÜĞME — DESIGN.md §5 ⑤ · sayfadaki tek kırmızı ───────────────────────
 * Sözleşme `10-aks-hatti`nin `.ax-dugme-kucuk`unun ölçülmüş hâlidir; SINIF
 * paylaşılmaz, DEĞER paylaşılır (M-107). Dolgu ölçeğe yuvarlanmadı: bileşenin
 * kendi ölçüsüdür (0.62 / 1.05 rem), yuvarlansa sözleşme değişirdi. */
.gs-12-ust .us-dugme {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--gs-hedef) !important;
    padding: 0.62rem 1.05rem !important;
    background: var(--gs-primary) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: var(--gs-white) !important;
    transition: background-color 0.25s ease !important;
}

.gs-12-ust .us-dugme:hover {
    background: var(--gs-koyu-metin) !important;
    color: var(--gs-koyu-zemin) !important;
}

/* ⚠️ Aralık `--gs-bo-1` (4px): dil kodları 24 px'lik hedeflere büyüyünce şerit
 * genişliyor. Görsel aralık kutuların kendi iç boşluğundan gelir (Ö-088). */
.gs-12-ust .us-dil {
    display: flex !important;
    align-items: center !important;
    gap: var(--gs-bo-1) !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
}

.gs-12-ust .us-dil a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: var(--gs-hedef) !important;
    min-height: var(--gs-hedef) !important;
    color: var(--us-silik) !important;
}

.gs-12-ust .us-dil a:hover {
    color: var(--us-metin) !important;
}

.gs-12-ust .us-dil a[aria-current="page"] {
    padding-bottom: 0.15rem !important;   /* bileşenin kendi ölçüsü — çizginin metne payı */
    border-bottom: 1px solid var(--us-metin) !important;
    color: var(--us-metin) !important;
}

/* ── 768px ve üzeri — header yapışkan ─────────────────────────────────────
 * <768'de yapışkan DEĞİL: telefon boyunda kalıcı bir çubuk ekranın %8'ini
 * yer ve hattın camını kısaltır. Bu, F3.3'te BİLEREK değiştirilmedi —
 * ölçülmüş durum korundu (KARAR.md Ö-1xx). */
/* ── ODAK HALKASI ─────────────────────────────────────────────────────────
 * Koyu zeminde halka AÇIK olmak ZORUNDA. `base.css`in varsayılanı
 * `--gs-primary`dir (#B40404) ve bu zeminde **2.36:1** — görünmez
 * (DESIGN.md §3). Ölçüldü ve düzeltildi: F3.3 turunda `12-ust`in dört durağı
 * kırmızı halka taşıyordu.
 * `--gs-koyu-metin` aynı zeminde **13.73:1**. */
.gs-12-ust :focus-visible {
    outline: 2px solid var(--us-metin) !important;
    outline-offset: 3px !important;
}

@media (min-width: 768px) {
    .gs-12-ust .us {
        position: sticky !important;
        top: 0 !important;
    }

    /* ⚠️ `--gs-ust-h` kenarlığı İÇERMEZ, `--gs-ust-yer` içerir. İkisi 1 px
     * ayrışır ve bu BİLEREK: yapışkan cam kenarlığın ALTINA girsin diye
     * (header z-index 20, camı örter — arada boşluk kalmaz). Özgün tasarım da
     * aynı ayrımı yapıyordu: `--ax-ust-h: 5rem` (80) ↔ `--ax-ust-yer: 5.0625rem`
     * (81). İlk ekran hesabı ise gerçekten kaplanan yeri ister. */
    .gs-12-ust,
    .gs-12-ust + .gs {
        --gs-ust-h: var(--us-h);
    }
}

/* ── 1025px ve üzeri — panel çözülür, nav satır içi ───────────────────────
 * `<details>` burada bir mandal DEĞİL: mandal gizlenir, `.us-panel-ic` akışa
 * döner. Yani kullanıcının dar ekranda bıraktığı kapalı hâl geniş ekranda
 * yapışıp kalmaz — `open` özniteliği görünürlüğü artık belirlemiyor.
 *
 * 🔴 `details > div`in `display`i açıkken/kapalıyken tarayıcı tarafından
 * DEĞİŞTİRİLMEZ; kapalı `<details>`te içerik `content-visibility` ile gizlenir.
 * Bu yüzden `.us-panel-ic`e burada açık bir `display` verilir ve
 * `content-visibility: visible` ile içerik geri getirilir. */
@media (min-width: 1025px) {
    .gs-12-ust,
    .gs-12-ust + .gs {
        --us-h: 5rem;
    }

    .gs-12-ust .us-mandal {
        display: none !important;
    }

    /* 🔴 `<details>`in kapalı içeriği İKİ AYRI mekanizmayla gizleniyor ve
     * tarayıcılar ikiye ayrılıyor — geniş ekranda İKİSİNİ DE ezmek gerekir:
     *   eski yol  `details:not([open]) > *:not(summary) { display: none }`
     *   yeni yol  `details::details-content { content-visibility: hidden }`
     * Yazar kuralı UA kuralını köken olarak yener (özgüllükten bağımsız), yani
     * ikisi de geri alınabiliyor. `::details-content`i tanımayan tarayıcı o
     * satırı sessizce atar — zararsız.
     *
     * ⚠️ `display: contents` KULLANILMADI: `<details>` düzleştirilince
     * `::details-content`in hâlâ üretilip üretilmediği tarayıcıya göre
     * değişiyor. `<details>` normal bir esnek çocuk olarak kalıyor. */
    .gs-12-ust .us-panel {
        flex: 1 1 auto !important;
    }

    .gs-12-ust .us-panel::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
    }

    .gs-12-ust .us-panel-ic {
        position: static !important;
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: var(--gs-bo-6) !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        background: none !important;
        border-block-end: 0 !important;
        content-visibility: visible !important;
    }

    .gs-12-ust .us-nav {
        flex: 1 1 auto !important;
    }

    .gs-12-ust .us-nav-liste {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--gs-bo-6) !important;
    }

    .gs-12-ust .us-grup {
        position: relative !important;
    }

    .gs-12-ust .us-grup-bas {
        color: var(--us-ikincil) !important;
        cursor: pointer !important;
    }

    .gs-12-ust .us-grup-bas:hover::after {
        width: 100% !important;
    }

    /* Tetikleyicinin altındaki boşluk fareyle geçilebilir olmalı, yoksa menü
     * yol yarısında kapanır. */
    .gs-12-ust .us-grup-bas::before {
        content: "" !important;
        position: absolute !important;
        inset-block: -0.5rem -1.25rem !important;
        inset-inline: -0.75rem !important;
    }

    .gs-12-ust .us-ok {
        display: inline-block !important;
        margin-inline-start: var(--gs-bo-1) !important;
        font-size: var(--gs-fs-1) !important;
        transition: transform 0.2s ease !important;
    }

    .gs-12-ust .us-grup:hover .us-ok,
    .gs-12-ust .us-grup:focus-within .us-ok {
        transform: rotate(180deg) !important;
    }

    /* Açılır menü — JavaScript YOK. `:hover` fareyle, `:focus-within` klavye
     * ve dokunmayla açar (tetikleyici bir `<button>`, Tab ile odaklanır). */
    .gs-12-ust .us-alt {
        position: absolute !important;
        z-index: 5 !important;
        inset-block-start: calc(100% + 1.25rem) !important;
        inset-inline-start: -1rem !important;
        display: grid !important;
        gap: var(--gs-bo-3) !important;
        min-width: 15rem !important;   /* bileşenin kendi ölçüsü — en uzun hizmet adı */
        margin-inline-start: 0 !important;
        padding: var(--gs-bo-4) !important;
        background: var(--gs-koyu-zemin) !important;
        border: 1px solid var(--us-hat) !important;
        border-top-color: rgb(255 255 255 / 0.12) !important;
        border-inline-start: 1px solid var(--us-hat) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-6px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
    }

    .gs-12-ust .us-grup:hover .us-alt,
    .gs-12-ust .us-grup:focus-within .us-alt {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .gs-12-ust .us-sag {
        gap: var(--gs-bo-4) !important;
        padding-block-start: 0 !important;
        border-block-start: 0 !important;
    }
}