/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/11-duyuru-bandi/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.
 */
/* ─── `.gs-11-duyuru-bandi` altına SCOPE'LANMIŞ düz CSS ──────────────────────
 *
 * Her seçici sarmalayıcıyla başlar (florax Bootstrap tabanlı ve global
 * seçiciler taşıyor — DESIGN.md ④).
 *
 * ⚠️ `!important` ELLE YAZILMAZ — `npm run port` her bildirime ekler (Ö-014).
 * ⚠️ İçerik BAŞLANGIÇTA GÖRÜNÜRDÜR; başlangıç gizleme CSS'e yazılmaz
 *    (DESIGN.md ⑤).
 *
 * ── Varyant RENKLE DEĞİL DESENLE ayrılır ───────────────────────────────────
 * `00-duyuru-testi`de kurulan ayrım burada koyu palete taşındı: sol şerit
 * düz · çapraz taramalı · kesikli olur. İki gerekçe bugün de geçerli:
 *   1. Kitte üç ayrı "durum rengi" YOK; uydurulan her renk yeni bir kontrast
 *      borcudur. Kırmızı zaten bu zeminde çizgi OLAMAZ (2.10:1 — aşağı bak).
 *   2. Desen renk körlüğünden bağımsız okunur.
 * Ayrıca varyantın YAZILI karşılığı da basılıyor (`.db-rozet`), yani ayrım
 * yalnız desene de bırakılmıyor.
 *
 * ── HESAPLANMIŞ kontrastlar — bant zemini #24282A üzerinde ─────────────────
 *   beyaz             14.87:1 ✓✓
 *   #E6E9EA (başlık)  12.19:1 ✓✓   ← .db-baslik · .db-buton · odak halkası
 *   #B9BFC2 (gövde)    8.00:1 ✓✓   ← .db-metin · .db-rozet · çarpı
 *   #8E9599 (şerit)    4.89:1 ✓    ← grafik + buton alt çizgisi (1.4.11 ≥ 3)
 *   #363B3E            1.31:1 ✗    ← YALNIZ ayırıcı çizgi, bilgi taşımaz
 *   #B40404           2.10:1 ✗    ← bu zeminde metin/çizgi OLAMAZ, hiç yok
 * (Sayfanın kendi zemini #1B1E20'de bu değerler biraz daha yüksekti; bant
 *  yüzeyi bir tık açık olduğu için YENİDEN hesaplandı, devralınmadı.)
 *
 * ── Koyu palet — eskiden YEREL, F10.1'den beri ortak ───────────────────────
 * Elementor kitinde koyu zemin tokenı yok; palet bu yüzden bir zamanlar
 * burada yerel duruyordu. F3.3 ortak paleti `base.css`e taşıdı, F10.1 bu
 * bölümü ona bağladı: tema anahtarı paleti tek yerden çevirir.
 *
 * ── VARSAYILAN DURUM JAVASCRIPT'SİZ ÇALIŞIR ────────────────────────────────
 * `.db-etkin` yoksa kapatma düğmesi hiç görünmez; bant tam ve okunur durur.
 */

.gs-11-duyuru-bandi {
    /* Koyu palet — ortak palete YASLANIR (F10.1, aynı hex). Bant zemini
     * sayfanın YÜZEYİDİR, zemini değil (yukarıdaki kontrast tablosu). */
    --db-zemin: var(--gs-koyu-yuzey);
    --db-metin: var(--gs-koyu-metin);
    --db-ikincil: var(--gs-koyu-ikincil);
    --db-silik: var(--gs-koyu-silik);
    --db-hat: var(--gs-koyu-hat);

    --db-serit: 6px;
    --db-aralik: 0.14em;
    /* Kumanda kutusu — bileşenin kendi ölçüsü (DESIGN.md §5), boşluk değil.
     * `--gs-hedef` (24) tabanının üstünde tutuluyor: tek elle kullanılan bir
     * bantta mandal ve kapat yan yana duruyor. */
    --db-kumanda: 2.25rem;

    font-family: var(--gs-font) !important;
    color: var(--db-ikincil) !important;
}

/* ── DİKİŞ — bandın yüksekliği ve altındaki sayfanın ilk ekranı ────────────
 *
 * Sayfanın açılışı `min-height: calc(100svh - var(--gs-ust-yer))` kullanır.
 * `--gs-ust-yer` `base.css`te NÖTR tanımlıdır (`0rem`) ve tek başına hiçbir
 * şeyi değiştirmez; değerini "üstüne konan bölümler" verir. Bağımlılık TEK
 * YÖNLÜ: sayfa bandı tanımaz, bant sayfayı tanır.
 *
 * 🔴 F3.3'TE ZİNCİR UZADI. Bant eskiden doğrudan `10-aks-hatti`nin komşusuydu;
 * artık araya header giriyor:
 *     11-duyuru-bandi  →  12-ust  →  10-aks-hatti
 * Bant TOPLAMI YAPMAZ, yalnız kendi payını `--gs-ust-ek` olarak bildirir;
 * toplamı header kurar. Böylece bant araya kaç bölüm girdiğini bilmek
 * zorunda kalmaz ve kural bölüm sayısından bağımsızdır.
 *
 * 🔴 Seçici listeleri neden birden çok elemanı hedefliyor: custom property
 * KARDEŞTEN miras alınmaz, ATADAN alınır (M-080'in ölçtüğü tuzak). `--db-h`
 * zincirin ÜÇÜNCÜ elemanında da tanımlı olmazsa orada `var(--db-h)`
 * ÇÖZÜLEMEZ. `--us-h`yi zaten `12-ust` sonraki komşuya veriyor.
 *
 * ⚠️ `--db-h` bandın SABİT yüksekliği değil, EN YÜKSEK hâlidir. Sözleşmenin
 * en uzun kaydı (DE — 43 karakter başlık + 134 karakter gövde) her kırılımın
 * EN DAR ucunda basılıp `getBoundingClientRect()` ile okunur, sonra yukarı
 * yuvarlanır.
 *
 * 🔴 Bu değerler İKİ KEZ geçersizleşti ve iki kez yeniden ölçüldü:
 *   2026-08-31 · F2.5.1'in TİPOGRAFİK ÖLÇEĞİ  → <768 287.1 · 768 174.5 ·
 *               ≥1025 120.6
 *   2026-09-04 · F3.4'ün MANDALI (K-123)      → <768  78.2 · 768 150.3 ·
 *               ≥1025 120.6   (hepsi DE kaydıyla, KAPALI hâlde)
 * **Ders: punto ölçeği ya da yerleşim değişirse bu üç sayı yeniden ölçülür**;
 * bandın yüksekliği içeriğine bağlı olduğu için hiçbir tip denetimi bunu
 * yakalamaz.
 *
 * ⚠️ YALNIZ `<768` GÜNCELLENDİ. K-123 kısa ekranı yetkilendirdi; 768–1024 ve
 * ≥1025 kilitli yüzeylerdir ve oradaki bildirimler zaten ölçülenin ÜSTÜNDE
 * (180 ≥ 150.3 · 128 ≥ 120.6), yani dikiş fazla düzeltiyor — güvenli yön
 * (aşağıya bak). Onları ölçülen değere çekmek açılışın `min-height`ini
 * büyütür, yani kilitli masaüstü yerleşimini oynatırdı.
 * 🔵 768'in 174.5 → 150.3 düşüşü F3.4'ün ESERİ DEĞİL: metin sütununun
 * genişliği bu turda değişmedi (ölçüldü: `padding-inline` ≥768'de aynen geri
 * veriliyor) ve ≥1025 değeri 120.6'da SABİT kaldı. 174.5 bayattı.
 *
 * ⚠️ `--db-h` `<768`te bandın KAPALI hâlidir. Mandal açılınca bant akışta
 * büyür ve altındaki her şey aşağı iner — bu kullanıcının kendi eylemidir,
 * ilk boyamanın hâli değil. Dikişin işi ilk ekranı doğru kurmaktır.
 *
 * Banda `min-height` VERİLMEDİ — bant içeriğine sarılır. Yani kısa bir
 * duyuruda dikiş bandın gerçek yüksekliğinden BÜYÜK olur ve açılış olması
 * gerekenden birkaç düzine piksel kısalır. Bu bilerek seçilen yön: fazla
 * düzeltme açılışın altında koyu zeminden bir şerit bırakır (görünmez, üstelik
 * kaydırma ipucu olur); EKSİK düzeltme ise açılışın alt şeridini kadraj dışına
 * atardı. */
.gs-11-duyuru-bandi,
.gs-11-duyuru-bandi + .gs,
.gs-11-duyuru-bandi + .gs + .gs {
    --db-h: 5rem;   /* 80px ≥ ölçülen 78.2 (DE, 320, KAPALI) — F3.4 · K-123 */
}

@media (min-width: 768px) {
    .gs-11-duyuru-bandi,
    .gs-11-duyuru-bandi + .gs,
    .gs-11-duyuru-bandi + .gs + .gs {
        --db-h: 11.25rem;   /* 180px ≥ ölçülen 150.3 (DE, 1024) — ⚠️ bu
                             * basamağın en yükseği DAR uçta değil GENİŞ uçta:
                             * `--gs-fs-5` bir `clamp(…,1.9vw,…)` ve 1024'te
                             * 768'dekinden büyük. F3.4'te yeniden ölçüldü;
                             * değer BİLEREK düşürülmedi (kilitli yüzey). */
    }
}

@media (min-width: 1025px) {
    .gs-11-duyuru-bandi,
    .gs-11-duyuru-bandi + .gs,
    .gs-11-duyuru-bandi + .gs + .gs {
        --db-h: 8rem;   /* 128px ≥ ölçülen 120.6 (DE, 1440) — F3.4'te
                         * yeniden ölçüldü, DEĞİŞMEDİ. */
    }
}

/* Bandın SÖYLEDİĞİ tek şey: "üstünüzde şu kadar yer harcandı."
 * Toplamı kim yapacaksa o yapar — bant altındaki bölümlerin ne olduğunu
 * BİLMEZ. İki elemana birden veriliyor çünkü ikisi de okuyor: header kendi
 * dikişini ve açılır panelinin yüksekliğini bundan hesaplıyor, açılış ise
 * header'ın yazdığı toplamı. */
.gs-11-duyuru-bandi + .gs,
.gs-11-duyuru-bandi + .gs + .gs {
    --gs-ust-ek: var(--db-h);
}

/* Kapatılan bant yer kaplamaz — dikiş sıfıra döner, yoksa açılış bandın
 * yüksekliği kadar kısa kalırdı. */
.gs-11-duyuru-bandi[data-kapali] + .gs,
.gs-11-duyuru-bandi[data-kapali] + .gs + .gs {
    --gs-ust-ek: 0rem;
}

/* 🔴 `.db`ye `height` ve `opacity` YAZILMAZ: kapatma hareketi bu iki özelliği
 * her karede satır içi yazıyor ve köprü CSS'teki her bildirime `!important`
 * ekliyor — CSS'te tanımlı olsalardı hareket sessizce ölürdü (Ö-023).
 * Aynı sebeple banda hiç `min-height` de verilmiyor: `.db` serbest kalsın ve
 * sıfıra kadar kapanabilsin. */
.gs-11-duyuru-bandi .db {
    overflow: hidden !important;
    background: var(--db-zemin) !important;
    border-bottom: 1px solid var(--db-hat) !important;
}

.gs-11-duyuru-bandi[data-kapali] .db {
    display: none !important;
}

/* ── <768 · BANT BİR MANDALA İNER (K-123) ──────────────────────────────────
 * Ölçüldü: eski yerleşim 320'de DE kaydıyla 287.1 px, 375×667'de 237.5 px —
 * açılışın alt şeridi 198 / 123.4 px kadraj dışında kalıyordu. Akışta kalan
 * tek şey artık ROZET + BAŞLIK; gövde ve buton mandalın altına iner.
 * İki kumanda (mandal · kapat) akıştan çıkarılıp sağ üste asıldı — grid
 * satırında dursalardı satır yüksekliğini 13.2'den 36'ya çıkarırlardı ve
 * bütçe (320'de ~89 px) tutmazdı. */
.gs-11-duyuru-bandi .db-ic {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "rozet"
        "yazi"
        "buton" !important;
    align-items: start !important;
    gap: var(--gs-bo-1) 1.25rem !important;
    max-width: var(--gs-container) !important;
    margin-inline: auto !important;
    padding-block: var(--gs-bo-2) !important;
    /* Şeritten sonra NEFES PAYI: ölçüldü, `calc(gutter + serit)` ile şerit
     * rozete bitişik düşüyor ve etiketi kesiyormuş gibi okunuyordu. */
    padding-inline: calc(var(--gs-gutter) + var(--db-serit) + 0.85rem)
        var(--gs-gutter) !important;
}

/* ── Kumandaların altına girmeyi ÖNLEYEN pay ───────────────────────────────
 * 🔴 Pay `.db-ic`e verilmez, kumandaların GERÇEKTEN örttüğü iki öğeye verilir.
 * Ölçüldü: kumandalar y=8…44 arasını kaplıyor, yani yalnız rozet satırını ve
 * başlığın ilk satırını buluyorlar. Pay sütunun tamamına verildiğinde gövde
 * metni 375'te ALTI satıra sıkışıyor ve sağda 72 px boş kalıyordu — açık
 * bandı gereksiz yere 34 px uzatan bir kusur. Gövde ve buton tam genişlikte
 * akar. */
.gs-11-duyuru-bandi .db-rozet,
.gs-11-duyuru-bandi .db-baslik {
    padding-inline-end: var(--db-kumanda) !important;
}

.gs-11-duyuru-bandi.db-etkin .db-rozet,
.gs-11-duyuru-bandi.db-etkin .db-baslik {
    padding-inline-end: calc(2 * var(--db-kumanda)) !important;
}

/* ── Sol şerit — varyantın taşıyıcısı ──────────────────────────────────────
 * Ayrı bir eleman değil `::before`: markup üç varyantta da AYNI kalsın.
 * Bandın kendi kenarında değil KONTEYNERİN kenarında duruyor — 1440'ta
 * viewport kenarına yapışsaydı metinden 70 px uzakta, ilgisiz bir çizgi
 * olurdu. */
.gs-11-duyuru-bandi .db-ic::before {
    content: "" !important;
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: var(--gs-gutter) !important;
    width: var(--db-serit) !important;
    background: var(--db-silik) !important;
}

/* uyarı → çapraz tarama: şantiye bandı. */
.gs-11-duyuru-bandi .db[data-varyant="uyari"] .db-ic::before {
    background: repeating-linear-gradient(
        45deg,
        var(--db-metin) 0 5px,
        var(--db-zemin) 5px 10px
    ) !important;
}

/* kutlama → kesikli: ölçü çizgisi. */
.gs-11-duyuru-bandi .db[data-varyant="kutlama"] .db-ic::before {
    background: repeating-linear-gradient(
        180deg,
        var(--db-silik) 0 9px,
        var(--db-zemin) 9px 16px
    ) !important;
}

/* ── Rozet ─────────────────────────────────────────────────────────────────
 * Üç karşılık da markup'ta; `[data-varyant]` ikisini gizler. Varsayılan
 * GÖRÜNEN `bilgi`dir — tanımsız ya da beklenmedik bir varyant gelse bile
 * rozet boş kalmaz. */
.gs-11-duyuru-bandi .db-rozet {
    grid-area: rozet !important;
    align-self: center !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: var(--db-aralik) !important;
    text-transform: uppercase !important;
    color: var(--db-ikincil) !important;
}

/* 🔴 ÖLÇÜLDÜ — büyük harf ÇOCUĞA yazılmak zorunda. `base.css` her metin
 * elemanına `text-transform: none !important` uyguluyor (miras kırıcı bir
 * SIFIRLAMA; `letter-spacing` gibi `inherit` değil). Yani `.db-rozet`teki
 * `uppercase` `<span>`lara HİÇ inmiyor: `.gs span` (0,1,1) !important, doğrudan
 * seçici olduğu için mirası yener. Bizim (0,2,0)'ımız onu yener.
 * `10-aks-hatti` bu tuzağa düşmüyor çünkü etiketlerinde ara `<span>` yok. */
.gs-11-duyuru-bandi .db-rozet-bilgi,
.gs-11-duyuru-bandi .db-rozet-uyari,
.gs-11-duyuru-bandi .db-rozet-kutlama {
    text-transform: uppercase !important;
}

.gs-11-duyuru-bandi .db-rozet-uyari,
.gs-11-duyuru-bandi .db-rozet-kutlama {
    display: none !important;
}

.gs-11-duyuru-bandi .db[data-varyant="uyari"] .db-rozet-bilgi,
.gs-11-duyuru-bandi .db[data-varyant="kutlama"] .db-rozet-bilgi {
    display: none !important;
}

.gs-11-duyuru-bandi .db[data-varyant="uyari"] .db-rozet-uyari,
.gs-11-duyuru-bandi .db[data-varyant="kutlama"] .db-rozet-kutlama {
    display: inline !important;
}

/* ── Yazı ──────────────────────────────────────────────────────────────── */
.gs-11-duyuru-bandi .db-yazi {
    grid-area: yazi !important;
}

/* 🔴 <768'de bir basamak İNER (fs-5 → fs-4) ve gerekçesi ÖLÇÜLMÜŞTÜR:
 * 320'de başlık sütunu 196.4 px ve sözleşmenin en uzun kaydı (DE, 43 karakter)
 * fs-5'te ÜÇ satıra çıkıyor — bant 109.4 px olup bütçeyi (≈89 px) aşıyordu.
 * fs-4'te iki satır. Hiyerarşi puntoyla değil AĞIRLIK ve RENKLE korunuyor:
 * başlık 700/`--db-metin`, gövde 400/`--db-ikincil`. Ölçek dışına çıkılmadı
 * (`--gs-fs-1…7`); gövde 16 px'te KALIYOR — Ö-084'ün dersi, dip yükseltilir,
 * indirilmez. */
.gs-11-duyuru-bandi .db-baslik {
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.008em !important;
    color: var(--db-metin) !important;
}

.gs-11-duyuru-bandi .db-metin {
    margin-top: 0.3rem !important;
    /* Okunaklılık: satır uzunluğu 1440'ta 110 karaktere çıkıyordu. */
    max-width: 78ch !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.55 !important;
    color: var(--db-ikincil) !important;
}

/* ── Buton ─────────────────────────────────────────────────────────────────
 * Dolgu değil alt çizgili bağlantı (Tek Kırmızı Kuralı — Section.tsx'te
 * gerekçesi). Alt çizgi `--db-silik`: 4.89:1, WCAG 1.4.11'in 3:1 eşiğinin
 * üstünde. */
.gs-11-duyuru-bandi .db-buton {
    grid-area: buton !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-block !important;
    padding-bottom: 0.15rem !important;
    border-bottom: 1px solid var(--db-silik) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    color: var(--db-metin) !important;
}

.gs-11-duyuru-bandi .db-buton::after {
    content: " →" !important;
    font-weight: 400 !important;
}

.gs-11-duyuru-bandi .db-buton:hover {
    border-bottom-color: var(--db-metin) !important;
}

/* Metni ya da bağlantısı olmayan duyuruda `<a>` HİÇ çocuk taşımaz.
 * ⚠️ `:empty` gerçekten boş olmayı ister — içine boşluk ya da yorum düşerse
 * tutmaz (Ö-066). */
.gs-11-duyuru-bandi .db-buton:empty {
    display: none !important;
}

/* ── MANDAL — <768'de gövdeyi indiren kapak (K-123) ────────────────────────
 *
 * `<summary>` tarayıcının kendi mandalıdır: Tab ile odaklanır, Enter/Space ile
 * açılır, ekran okuyucuya "genişletildi/daraltıldı" olarak geçer ve BUNUN İÇİN
 * JAVASCRIPT GEREKMEZ. Ö-018'in kısıtı bu yüzden ısırmıyor — header aynı
 * mekanizmayı F3.3'te kurdu (Ö-110 · Ö-111), burada DEVRALINIYOR (M-107).
 *
 * Kapatma düğmesi gibi bu da akışın DIŞINDA: satırda dursaydı bant 13 px
 * uzardı ve bütçe (320'de ~89 px) tutmazdı. Kapatmanın SOLUNDA duruyor;
 * JavaScript yoksa kapatma hiç yok, mandal köşeye geçer. */
.gs-11-duyuru-bandi .db-mandal {
    position: absolute !important;
    inset-block-start: var(--gs-bo-2) !important;
    inset-inline-end: var(--gs-gutter) !important;
    display: grid !important;
    place-items: center !important;
    width: var(--db-kumanda) !important;
    height: var(--db-kumanda) !important;
    color: var(--db-ikincil) !important;
    cursor: pointer !important;
    list-style: none !important;
}

.gs-11-duyuru-bandi.db-etkin .db-mandal {
    inset-inline-end: calc(var(--gs-gutter) + var(--db-kumanda)) !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
 * (header'ın `us-mandal`ında ölçülmüş kalıp). */
.gs-11-duyuru-bandi .db-mandal::-webkit-details-marker {
    display: none !important;
}

.gs-11-duyuru-bandi .db-mandal:hover {
    color: var(--db-metin) !important;
}

/* İşaret ÇİZİLİR, karakter olarak yazılmaz — çarpı ile aynı gerekçe: yazı
 * tipine bağlı kalmasın, çizgi kalınlığı bandın kendi diliyle aynı olsun.
 * İki çubuk aşağı bakan bir çentik kurar; açılınca tamamı 180° döner. */
.gs-11-duyuru-bandi .db-mandal-ok {
    position: relative !important;
    display: block !important;
    width: 0.75rem !important;   /* bileşenin kendi ölçüsü — işaret kutusu 12×12 */
    height: 0.75rem !important;
    transition: transform 0.2s ease !important;
}

.gs-11-duyuru-bandi .db-mandal-ok::before,
.gs-11-duyuru-bandi .db-mandal-ok::after {
    content: "" !important;
    position: absolute !important;
    inset-block-start: 45% !important;
    width: 60% !important;
    height: 1px !important;
    background: currentColor !important;
}

.gs-11-duyuru-bandi .db-mandal-ok::before {
    inset-inline-start: 0 !important;
    transform: rotate(45deg) !important;
}

.gs-11-duyuru-bandi .db-mandal-ok::after {
    inset-inline-end: 0 !important;
    transform: rotate(-45deg) !important;
}

.gs-11-duyuru-bandi .db-detay[open] .db-mandal-ok {
    transform: rotate(180deg) !important;
}

/* Kapak KAPALIYKEN buton da inmiş sayılır: gövdeyle birlikte gizlenir, yoksa
 * bant 34 px uzar ve bütçe tutmaz. `:has` deponun kendi kalıbı (Ö-061).
 *
 * 🔴 Dosyanın TEK `max-width` kuralı ve gerekçesi ölçülmüş: bu bildirim
 * `:has()` yüzünden (0,5,0) özgüllüğünde: mobil-öncelikli yazılıp ≥768'de
 * `display: inline-block` ile geri alınsaydı, o geri alma `.db-buton:empty`in
 * (0,3,0) gizlemesini de EZERDİ — butonsuz bir duyuruda geriye 1 px'lik alt
 * çizgi kalırdı (Ö-066'nın kapattığı hâl). Kural bu yüzden geri alınmıyor,
 * hiç doğmuyor. */
@media (max-width: 767.98px) {
    .gs-11-duyuru-bandi .db-ic:has(.db-detay:not([open])) .db-buton {
        display: none !important;
    }
}

/* ── Kapatma ───────────────────────────────────────────────────────────────
 * JS onaylanana kadar GÖRÜNMEZ. `init` reduced-motion'da hiç çağrılmaz
 * (Ö-018); görünür kalsaydı o kullanıcılarda tıklanınca hiçbir şey yapmayan
 * ölü bir düğme olurdu. */
.gs-11-duyuru-bandi .db-kapat {
    /* <768'de AKIŞTA DEĞİL: sağ üst köşeye asılı (yukarıdaki bütçe notu).
     * ≥768'de `grid-area: kapat` ile akışa döner. */
    position: absolute !important;
    inset-block-start: var(--gs-bo-2) !important;
    inset-inline-end: var(--gs-gutter) !important;
    display: none !important;
    align-self: center !important;
    width: var(--db-kumanda) !important;
    height: var(--db-kumanda) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
}

.gs-11-duyuru-bandi.db-etkin .db-kapat {
    display: grid !important;
    place-items: center !important;
}

/* Çarpı çizilir, karakter olarak yazılmaz: yazı tipine bağlı kalmasın ve
 * çizgi kalınlığı bandın kendi çizgi diliyle aynı olsun. */
.gs-11-duyuru-bandi .db-carpi {
    position: relative !important;
    display: block !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
}

.gs-11-duyuru-bandi .db-carpi::before,
.gs-11-duyuru-bandi .db-carpi::after {
    content: "" !important;
    position: absolute !important;
    inset-block-start: 50% !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: var(--db-ikincil) !important;
}

.gs-11-duyuru-bandi .db-carpi::before {
    transform: rotate(45deg) !important;
}

.gs-11-duyuru-bandi .db-carpi::after {
    transform: rotate(-45deg) !important;
}

.gs-11-duyuru-bandi .db-kapat:hover .db-carpi::before,
.gs-11-duyuru-bandi .db-kapat:hover .db-carpi::after {
    background: var(--db-metin) !important;
}

/* Koyu zeminde odak halkası AÇIK olmalı — `base.css`in kırmızısı burada
 * 2.10:1 ile görünmez (DESIGN.md §3). */
.gs-11-duyuru-bandi :focus-visible {
    outline: 2px solid var(--db-metin) !important;
    outline-offset: 3px !important;
}

/* ── 768+ · rozet ile yazı yan yana ──────────────────────────────────────── */
/* ── 768+ · MANDAL ÇÖZÜLÜR, rozet ile yazı yan yana ────────────────────────
 * Buradan itibaren bant KİLİTLİ hâline döner: gövde başlığın altına akar,
 * buton kendi sütununda durur, kapatma grid'e geri girer. Yani `<768`in
 * mandalı bir EK durumdur, yeni bir bant değil. */
@media (min-width: 768px) {
    .gs-11-duyuru-bandi .db-ic {
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "rozet yazi  kapat"
            "rozet buton kapat" !important;
        gap: 0.6rem 1.5rem !important;
        padding-block: 1.1rem !important;
    }

    /* Kumandalar için ayrılan pay burada GEREKSİZ — kapat akışa döndü,
     * mandal yok. */
    .gs-11-duyuru-bandi .db-rozet,
    .gs-11-duyuru-bandi .db-baslik,
    .gs-11-duyuru-bandi.db-etkin .db-rozet,
    .gs-11-duyuru-bandi.db-etkin .db-baslik {
        padding-inline-end: 0 !important;
    }

    .gs-11-duyuru-bandi .db-rozet {
        align-self: start !important;
        padding-top: 0.15rem !important;
    }

    /* Kilitli punto geri gelir — daralma yalnız `<768`in hâliydi. */
    .gs-11-duyuru-bandi .db-baslik {
        font-size: var(--gs-fs-5) !important;
    }

    .gs-11-duyuru-bandi .db-mandal {
        display: none !important;
    }

    /* 🔴 `<details>`in kapalı içeriği İKİ AYRI mekanizmayla gizleniyor ve
     * tarayıcılar ikiye ayrılıyor — çözerken İKİSİNİ DE ezmek gerekir
     * (Ö-111'de header'da ölçüldü):
     *   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).
     * `::details-content`i tanımayan tarayıcı o satırı sessizce atar.
     *
     * ⚠️ `display: contents` KULLANILMADI: `<details>` düzleştirilince
     * `::details-content`in üretilip üretilmediği tarayıcıya göre değişiyor. */
    .gs-11-duyuru-bandi .db-detay::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
    }

    .gs-11-duyuru-bandi .db-metin {
        display: block !important;
    }

    .gs-11-duyuru-bandi .db-kapat {
        position: static !important;
        grid-area: kapat !important;
    }
}

/* ── 1025+ · tek satırda: rozet · yazı · buton · kapat ───────────────────── */
@media (min-width: 1025px) {
    .gs-11-duyuru-bandi .db-ic {
        grid-template-columns: auto 1fr auto auto !important;
        grid-template-areas: "rozet yazi buton kapat" !important;
        align-items: center !important;
        gap: 0 2rem !important;
    }

    .gs-11-duyuru-bandi .db-rozet {
        align-self: center !important;
        padding-top: 0 !important;
    }
}