/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/20-sayfa/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.
 */
/* ─── 20-sayfa · DÜZ İÇERİK SAYFASI ───────────────────────────────────────────
 *
 * Tez: sayfa bir EK BELGEDİR (Section.tsx başındaki nota bak).
 *
 * 🔒 Kurallar diğer yüzeylerle aynı: `!important` yazılmaz · çıplak hex yok ·
 * punto `--gs-fs-1…7` · boşluk `--gs-bo-1…6` · `opacity`/`transform`
 * TANIMLANMAZ (Ö-023) · kenarlık `border` kısayoluyla (Ö-135) · koyu zeminde
 * `:focus-visible` ezilir (Ö-113).
 *
 * ⚠️ Gövde tipografisi `19-blog-tekil`inkiyle AYNI sözleşmedir (§5 ⑯) — ama
 * sınıf paylaşılmaz, çünkü bölüm CSS'i `.gs-<slug>` altında scope'lu
 * (M-107: paylaşılan şey SÖZLEŞME, sınıf adı değil). Değerler birebir aynı.
 */

.gs-20-sayfa {
    --sy-zemin: var(--gs-koyu-zemin);
    --sy-yuzey: var(--gs-koyu-yuzey);
    --sy-metin: var(--gs-koyu-metin);
    --sy-ikincil: var(--gs-koyu-ikincil);
    --sy-silik: var(--gs-koyu-silik);
    --sy-hat: var(--gs-koyu-hat);
    --sy-eylem: var(--gs-primary);

    --sy-aralik: 0.14em;
    --sy-sinir: min(92vw, 74rem);
    --sy-okuma: min(92vw, 42rem);

    background: var(--sy-zemin) !important;
    color: var(--sy-ikincil) !important;
}

.gs-20-sayfa .sy {
    background-image: repeating-linear-gradient(
        135deg,
        rgb(255 255 255 / 0.016) 0,
        rgb(255 255 255 / 0.016) 1px,
        transparent 1px,
        transparent 7px
    ) !important;
}

.gs-20-sayfa .sy-sinir {
    width: var(--sy-sinir) !important;
    margin-inline: auto !important;
}

.gs-20-sayfa .sy-etiket {
    margin: 0 0 var(--gs-bo-3) !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--sy-aralik) !important;
    text-transform: uppercase !important;
    color: var(--sy-silik) !important;
}

.gs-20-sayfa .sy-gizli-baslik {
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.gs-20-sayfa .sy-banner {
    padding-block: var(--gs-ritim) var(--gs-bo-6) !important;
    border-bottom: 1px solid var(--sy-hat) !important;
}

.gs-20-sayfa .sy-baslik {
    margin: 0 !important;
    max-width: 22ch !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.018em !important;
    color: var(--sy-metin) !important;
}

/* ── GÖVDE TİPOGRAFİSİ — §5 ⑯ ────────────────────────────────────────────── */

.gs-20-sayfa .sy-govde-kap {
    padding-block: var(--gs-ritim) !important;
}

/* 🔴 GÖVDE DE İSTEĞE BAĞLIDIR — §5 ⑨, katalog bloğuyla AYNI kalıp (Ö-177).
 * Katalog sayfasının `post_content`i TEK BİR KISA KODdur (`[gurtes_katalog]`)
 * ve o kısa kod bu bölümün kendi yuvasında basılıyor; sağlayıcı gövdeden
 * ayıkladığı için burada geriye hiçbir şey kalmıyor. Kural olmasaydı sayfanın
 * başında bir `--gs-ritim` boyunda boş kutu dururdu. */
.gs-20-sayfa .sy-govde:empty {
    display: none !important;
}

.gs-20-sayfa .sy-govde-kap:has(.sy-govde:empty) {
    display: none !important;
}

.gs-20-sayfa .sy-govde {
    width: var(--sy-okuma) !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.75 !important;
    color: var(--sy-ikincil) !important;
}

.gs-20-sayfa .sy-govde > :first-child {
    margin-top: 0 !important;
}

.gs-20-sayfa .sy-govde p {
    margin: 0 0 var(--gs-bo-5) !important;
}

.gs-20-sayfa .sy-govde h2 {
    margin: var(--gs-ritim) 0 var(--gs-bo-4) !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.012em !important;
    color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-govde h3,
.gs-20-sayfa .sy-govde h4,
.gs-20-sayfa .sy-govde h5 {
    margin: var(--gs-bo-6) 0 var(--gs-bo-3) !important;
    font-size: var(--gs-fs-5) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-govde h4,
.gs-20-sayfa .sy-govde h5 {
    font-size: var(--gs-fs-4) !important;
}

.gs-20-sayfa .sy-govde strong,
.gs-20-sayfa .sy-govde b {
    font-weight: 700 !important;
    color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-govde ol {
    margin: 0 0 var(--gs-bo-5) !important;
    padding-left: var(--gs-bo-6) !important;
}

.gs-20-sayfa .sy-govde ul {
    margin: 0 0 var(--gs-bo-5) !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.gs-20-sayfa .sy-govde li {
    margin: 0 0 var(--gs-bo-2) !important;
}

.gs-20-sayfa .sy-govde ul > li {
    position: relative !important;
    padding-left: var(--gs-bo-5) !important;
}

.gs-20-sayfa .sy-govde ul > li::before {
    content: "" !important;
    position: absolute !important;
    inset-block-start: 0.85em !important;
    inset-inline-start: 0 !important;
    width: var(--gs-bo-3) !important;
    border-top: 1px solid var(--sy-eylem) !important;
}

.gs-20-sayfa .sy-govde a {
    border-bottom: 1px solid var(--sy-hat) !important;
    text-decoration: none !important;
    color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-govde a:hover {
    border-bottom-color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-govde img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: var(--gs-bo-6) 0 !important;
    border: 1px solid var(--sy-hat) !important;
    border-top-color: rgb(255 255 255 / 0.09) !important;
}

.gs-20-sayfa .sy-govde table {
    display: block !important;
    width: 100% !important;
    margin: var(--gs-bo-6) 0 !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
    font-size: var(--gs-fs-3) !important;
    font-variant-numeric: tabular-nums !important;
}

.gs-20-sayfa .sy-govde th,
.gs-20-sayfa .sy-govde td {
    padding: var(--gs-bo-3) var(--gs-bo-4) !important;
    border-bottom: 1px solid var(--sy-hat) !important;
    text-align: start !important;
    vertical-align: top !important;
}

/* `<hr>` kendi ölçüsünü bildirir — Ö-165. */
.gs-20-sayfa .sy-govde hr {
    height: 0 !important;
    margin: var(--gs-ritim) 0 !important;
    border: 0 solid transparent !important;
    border-top: 1px solid var(--sy-hat) !important;
    color: var(--sy-hat) !important;
}

/* ── KATALOG — yalnız katalog sayfasında ─────────────────────────────────
 * 🔴 Blok, sağlayıcı boş döndüğünde `:empty` ile TAMAMEN düşer (§5 ⑨).
 * Etiket de düşmeli, yoksa yasal sayfalarda başlıksız bir "Katalog" kelimesi
 * kalırdı — `:has()` ile bağlanıyor, JavaScript'siz. */

.gs-20-sayfa .sy-katalog-kap {
    padding-block: 0 var(--gs-ritim) !important;
}

.gs-20-sayfa .sy-katalog:empty {
    display: none !important;
}

.gs-20-sayfa .sy-katalog-kap:has(.sy-katalog:empty) {
    display: none !important;
}

/* Katalog eklentisinin kendi markup'ı geliyor — sınıf yazamayız, ham
   etiketler biçimlendiriliyor. ⚠️ `gurtes-katalog` eklentisi OKUNUR,
   DEĞİŞTİRİLMEZ (CLAUDE.md §10); burada yalnız çıktısı sayfanın diline
   çevriliyor. */
.gs-20-sayfa .sy-katalog img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid var(--sy-hat) !important;
}

.gs-20-sayfa .sy-katalog a,
.gs-20-sayfa .sy-katalog button {
    border: 1px solid var(--sy-hat) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--sy-metin) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ── Eklentinin YÜZEYLERİ — sayfanın diline çevriliyor ───────────────────
 *
 * 🔴 ÖLÇÜLDÜ (F7.2 · `npm run erisim --wp`): katalog sayfası GÖRÜNÜR şekilde
 * bozuktu — gurtesv2'de **126 kontrast ihlali + 39 görünmez odak halkası**,
 * sitenin tamamındaki ihlallerin HEPSİ bu sayfada. Sebep bir çarpışma:
 * eklenti kendi bileşenlerini AÇIK yüzeylerle çiziyor (`#fff` · `--gk-soft`),
 * sayfa ise KOYU; `base.css` metni `color: inherit`e çektiği için yazı açık
 * kalıyor ve beyaz üstüne beyaz düşüyordu. "PDF indir" düğmesinin yazısı
 * **1.05** kontrastla okunamıyordu.
 *
 * 🔵 ÇÖZÜM eklentinin KENDİ DEĞİŞKENLERİNİ bizim scope'umuzda yeniden
 * tanımlamak — `tokens.css`in Elementor'un `--e-global-*`ına yaslanma kalıbı
 * (Kural 3). Eklentinin dosyasına DOKUNULMAZ (`CLAUDE.md §10`) ve bir eklenti
 * güncellemesi bunu bozmaz: değişken adları kaldığı sürece çeviri ayakta.
 * ⚠️ Eklenti `.gk.gk` yazarak 0-2-0 belirginlik kuruyor; buradaki üç sınıflık
 * seçici (0-3-0) onu yener — köprünün `!important`i özel değişkenlere
 * EKLENMEZ (`gs-important.mjs`), o yüzden belirginlik gerçekten gerekli.
 *
 * Kullanıcı kararı (2026-09-13): katalog sayfası da öteki sayfalarla AYNI
 * koyu dilde görünecek, açık bir panele çekilmeyecek.
 * Ölçüm sonrası: 88 metin öğesi → eşiğin altında **0**, en düşük **5.81**. */
.gs-20-sayfa .sy-katalog .gk {
    --gk-text: var(--sy-ikincil);
    --gk-head: var(--sy-metin);
    --gk-accent: var(--sy-silik);
    --gk-line: var(--sy-hat);
    --gk-soft: var(--sy-yuzey);
    --gk-shadow: none;
}

/* ⚠️ Beş yüzey değişkenle çözülemez: eklenti onlara doğrudan `#fff` yazıyor
 * (`katalog.css` 153 · 319 · 405 · 434 · 546). Tek tek çevriliyor. */
.gs-20-sayfa .sy-katalog .gk-featured,
.gs-20-sayfa .sy-katalog .gk-card,
.gs-20-sayfa .sy-katalog .gk-chip,
.gs-20-sayfa .sy-katalog .gk-search input[type="search"],
.gs-20-sayfa .sy-katalog button.gk-letter:hover {
    background: var(--sy-yuzey) !important;
}

/* Seçili harf ve etiket — yukarıdaki genel `button` kuralı zemini saydam
 * yaptığı için seçim İŞARETSİZ kalıyordu (bozuk hâlde de öyleydi). Eylem
 * rengi geri konuyor; `--sy-metin` üstünde ölçülen kontrast 5.81. */
.gs-20-sayfa .sy-katalog .gk-letter.is-active,
.gs-20-sayfa .sy-katalog .gk-chip.is-active {
    border-color: var(--sy-eylem) !important;
    background: var(--sy-eylem) !important;
    color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-katalog .gk-chip.is-active .gk-chip__count {
    background: rgb(255 255 255 / 0.22) !important;
    color: var(--sy-metin) !important;
}

/* ── KAPANIŞ ─────────────────────────────────────────────────────────────── */

.gs-20-sayfa .sy-kapanis {
    padding-block: 0 var(--gs-ritim) !important;
    border-top: 1px solid var(--sy-hat) !important;
}

.gs-20-sayfa .sy-geri {
    margin: var(--gs-bo-5) 0 0 !important;
}

.gs-20-sayfa .sy-bag {
    display: inline-flex !important;
    gap: var(--gs-bo-2) !important;
    align-items: center !important;
    min-height: var(--gs-hedef) !important;
    border-bottom: 1px solid var(--sy-hat) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-bag:hover {
    border-bottom-color: var(--sy-metin) !important;
}

.gs-20-sayfa .sy-geri-ok {
    font-weight: 400 !important;
}

/* ⚠️ `input` BU LİSTEDE OLMAK ZORUNDA ve bir ölçümle geldi (F7.2): katalog
 * eklentisinin arama kutusu `a`/`button` değil `input`tur, yani bu ezme onu
 * KAÇIRIYORDU ve `base.css`in varsayılanı ısırdı — halka `--gs-primary`
 * kırmızısı, koyu zeminde **2.1:1** (Ö-113'ün aynısı, bu kez bir input'ta).
 * Ölçüldü: liste genişletilince tek değer `2px solid rgb(230, 233, 234)`. */
.gs-20-sayfa a:focus-visible,
.gs-20-sayfa button:focus-visible,
.gs-20-sayfa summary:focus-visible,
.gs-20-sayfa input:focus-visible,
.gs-20-sayfa select:focus-visible,
.gs-20-sayfa textarea:focus-visible {
    outline: 2px solid var(--sy-metin) !important;
    outline-offset: 3px !important;
}