/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/19-blog-tekil/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.
 */
/* ─── 19-blog-tekil · TEKİL BLOG YAZISI ───────────────────────────────────────
 *
 * Tez: sayfa bir TEKNİK NOTTUR (Section.tsx başındaki nota bak).
 *
 * 🔴 BU DOSYADA YENİ BİR ŞEY VAR: **gövde tipografisi sözleşmesi**
 * (DESIGN.md §5 ⑯). Gövde HTML'i yöneticiden geliyor, yani sınıf yazamayız —
 * ham etiketler (`h2`…`h5`, `p`, `ul`, `ol`, `table`, `img`, `figure`, `a`,
 * `strong`, `blockquote`) `.by-govde` scope'unda biçimlendirilir.
 *
 * ⚠️ `base.css` bütün metin elemanlarına `text-transform: none` mirası
 * zorluyor (Ö-081) — gövdede zaten büyük harf istemiyoruz, sorun yok.
 * ⚠️ `base.css`in `li` ve `dd` marj sıfırlaması (Ö-090 · Ö-118) burada
 * ISIRIR: gövdenin listeleri marj İSTER, o yüzden burada geri veriliyor.
 *
 * 🔒 Diğer kurallar 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).
 */

.gs-19-blog-tekil {
    --by-zemin: var(--gs-koyu-zemin);
    --by-yuzey: var(--gs-koyu-yuzey);
    --by-yuzey-ust: var(--gs-koyu-yuzey-ust);
    --by-metin: var(--gs-koyu-metin);
    --by-ikincil: var(--gs-koyu-ikincil);
    --by-silik: var(--gs-koyu-silik);
    --by-hat: var(--gs-koyu-hat);
    --by-eylem: var(--gs-primary);

    --by-aralik: 0.14em;
    --by-sinir: min(92vw, 74rem);
    /* Okuma sütunu — gövde sayfanın tamamını kaplamaz. */
    --by-okuma: min(92vw, 42rem);

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

.gs-19-blog-tekil .by {
    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-19-blog-tekil .by-sinir {
    width: var(--by-sinir) !important;
    margin-inline: auto !important;
}

/* ── KÜNYE ───────────────────────────────────────────────────────────────── */

.gs-19-blog-tekil .by-kunye {
    padding-block: var(--gs-ritim) var(--gs-bo-6) !important;
}

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

.gs-19-blog-tekil .by-baslik {
    margin: 0 0 var(--gs-bo-4) !important;
    max-width: 26ch !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-satir {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gs-bo-2) var(--gs-bo-5) !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding-top: var(--gs-bo-3) !important;
    border-top: 1px solid var(--by-hat) !important;
}

.gs-19-blog-tekil .by-konu {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--by-aralik) !important;
    text-transform: uppercase !important;
    color: var(--by-silik) !important;
}

.gs-19-blog-tekil .by-konu:empty {
    display: none !important;
}

.gs-19-blog-tekil .by-tarih {
    font-size: var(--gs-fs-3) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--by-ikincil) !important;
}

/* ── ÇERÇEVE ① + KAPAK ───────────────────────────────────────────────────── */

.gs-19-blog-tekil .by-cerceve {
    position: relative !important;
    margin-block: 0 !important;
    border: 1px solid var(--by-hat) !important;
    border-top-color: rgb(255 255 255 / 0.09) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: var(--by-yuzey) !important;
}

.gs-19-blog-tekil .by-cerceve img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gs-19-blog-tekil .by-kapak {
    aspect-ratio: 16 / 9 !important;
}

.gs-19-blog-tekil .by-kapak-bos {
    display: none !important;
}

/* ── GÖVDE TİPOGRAFİSİ — §5 ⑯ ─────────────────────────────────────────────
 * Ham etiketler biçimlendiriliyor; sınıf yazamayız çünkü HTML yöneticiden
 * geliyor. Punto ölçeğinin DIŞINA çıkılmıyor. */

.gs-19-blog-tekil .by-govde-kap {
    padding-block: var(--gs-ritim) !important;
}

.gs-19-blog-tekil .by-govde {
    width: var(--by-okuma) !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.75 !important;
    color: var(--by-ikincil) !important;
}

.gs-19-blog-tekil .by-govde > :first-child {
    margin-top: 0 !important;
}

.gs-19-blog-tekil .by-govde p {
    margin: 0 0 var(--gs-bo-5) !important;
}

.gs-19-blog-tekil .by-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(--by-metin) !important;
}

.gs-19-blog-tekil .by-govde h3 {
    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(--by-metin) !important;
}

/* h4 ve h5 aynı basamağı paylaşır ve AĞIRLIKLA ayrılır — punto ölçeği yedi
   basamak, başlık hiyerarşisi beş düzey; ölçeği bozmak yerine ağırlık ve
   harf aralığı kullanılıyor. */
.gs-19-blog-tekil .by-govde h4,
.gs-19-blog-tekil .by-govde h5 {
    margin: var(--gs-bo-6) 0 var(--gs-bo-3) !important;
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-govde h5 {
    letter-spacing: var(--by-aralik) !important;
    text-transform: uppercase !important;
    font-size: var(--gs-fs-2) !important;
    color: var(--by-silik) !important;
}

.gs-19-blog-tekil .by-govde strong,
.gs-19-blog-tekil .by-govde b {
    font-weight: 700 !important;
    color: var(--by-metin) !important;
}

/* ⚠️ `base.css` `li`nin marjını sıfırlıyor (Ö-118); gövdenin listeleri onu
   İSTER ve burada geri veriliyor. */
.gs-19-blog-tekil .by-govde ul,
.gs-19-blog-tekil .by-govde ol {
    margin: 0 0 var(--gs-bo-5) !important;
    padding-left: var(--gs-bo-6) !important;
}

.gs-19-blog-tekil .by-govde li {
    margin: 0 0 var(--gs-bo-2) !important;
}

.gs-19-blog-tekil .by-govde ul {
    list-style: none !important;
    padding-left: 0 !important;
}

/* Madde işareti bir nokta değil bir ÇENTİK — sayfanın kalanıyla aynı dil. */
.gs-19-blog-tekil .by-govde ul > li {
    position: relative !important;
    padding-left: var(--gs-bo-5) !important;
}

.gs-19-blog-tekil .by-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(--by-eylem) !important;
}

.gs-19-blog-tekil .by-govde a {
    border-bottom: 1px solid var(--by-hat) !important;
    text-decoration: none !important;
    color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-govde a:hover {
    border-bottom-color: var(--by-metin) !important;
}

/* Gövde görselleri çerçeveye girer — sayfadaki tek açıklık biçimi ①. */
.gs-19-blog-tekil .by-govde img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: var(--gs-bo-6) 0 !important;
    border: 1px solid var(--by-hat) !important;
    border-top-color: rgb(255 255 255 / 0.09) !important;
}

.gs-19-blog-tekil .by-govde figure {
    margin: var(--gs-bo-6) 0 !important;
}

.gs-19-blog-tekil .by-govde figcaption {
    margin-top: var(--gs-bo-2) !important;
    font-size: var(--gs-fs-2) !important;
    color: var(--by-silik) !important;
}

/* ── TABLO — ölçüldü: 68 yazıda 119 satır, 292 hücre ──────────────────────
 * ⚠️ Dar ekranda tablo TAŞAR ve taşmaması için kaydırılabilir bir kutuya
 * konur. Tabloyu daraltmak sayıları okunmaz yapardı. */
.gs-19-blog-tekil .by-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-19-blog-tekil .by-govde th,
.gs-19-blog-tekil .by-govde td {
    padding: var(--gs-bo-3) var(--gs-bo-4) !important;
    border-bottom: 1px solid var(--by-hat) !important;
    text-align: start !important;
    vertical-align: top !important;
}

.gs-19-blog-tekil .by-govde th {
    font-weight: 700 !important;
    letter-spacing: var(--by-aralik) !important;
    text-transform: uppercase !important;
    font-size: var(--gs-fs-1) !important;
    color: var(--by-silik) !important;
}

.gs-19-blog-tekil .by-govde tr:nth-child(2n) td {
    background: var(--by-yuzey) !important;
}

/* ── AYIRICI ─────────────────────────────────────────────────────────────
 * 🔴 `<hr>` KENDİ ÖLÇÜSÜNÜ BİLDİRMEK ZORUNDA — ve bunu ölçüm söyledi (Ö-165).
 * `hr` bir kenarlıktan ibarettir; laboratuvarda `globals.css`in
 * `.gs * { border-style: none }` kuralı (Ö-135'in düzeltmesi) onu siliyor ve
 * yükseklik **0** oluyor, WordPress'te tarayıcı varsayılanı kalıyor ve **2**.
 * İki dünya 18 px ayrışıyordu. Kendi kenarlığını ve marjını yazınca ikisi de
 * aynı şeyi çiziyor — ve ayırıcı sayfanın dilinde bir çizgi oluyor.
 * 🔵 Bu, benim düzeltmemin yan etkisiydi: bir taban düzeltmesi başka bir
 * tabanı açabilir. */
.gs-19-blog-tekil .by-govde hr {
    height: 0 !important;
    margin: var(--gs-ritim) 0 !important;
    border: 0 solid transparent !important;
    border-top: 1px solid var(--by-hat) !important;
    /* ⚠️ `color` da açıkça yazılır: tarayıcı `hr`ye varsayılan `gray` veriyor
       ve laboratuvar mirası devralıyordu — iki dünya `color`da ayrışıyordu.
       Görünmez bir özellik ama ölçüm onu da karşılaştırıyor ve haklı. */
    color: var(--by-hat) !important;
}

.gs-19-blog-tekil .by-govde blockquote {
    margin: var(--gs-bo-6) 0 !important;
    padding-left: var(--gs-bo-5) !important;
    border-left: 1px solid var(--by-eylem) !important;
    color: var(--by-metin) !important;
}

/* ── AYNI KONUDAN ────────────────────────────────────────────────────────── */

.gs-19-blog-tekil .by-ilgili {
    padding-block: var(--gs-ritim) !important;
    border-top: 1px solid var(--by-hat) !important;
}

.gs-19-blog-tekil .by-h2 {
    margin: 0 0 var(--gs-bo-5) !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.012em !important;
    color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-ilgili-liste {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-top: 1px solid var(--by-hat) !important;
}

.gs-19-blog-tekil .by-ilgili-satir {
    border-bottom: 1px solid var(--by-hat) !important;
}

.gs-19-blog-tekil .by-ilgili-bag {
    display: grid !important;
    grid-template-columns: 2.25rem minmax(0, 1fr) !important;
    gap: var(--gs-bo-1) var(--gs-bo-4) !important;
    align-items: baseline !important;
    padding-block: var(--gs-bo-4) !important;
    text-decoration: none !important;
    color: inherit !important;
}

.gs-19-blog-tekil .by-ilgili-no {
    grid-row: span 3 !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--by-silik) !important;
}

.gs-19-blog-tekil .by-ilgili-konu {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--by-aralik) !important;
    text-transform: uppercase !important;
    color: var(--by-silik) !important;
}

.gs-19-blog-tekil .by-ilgili-konu:empty {
    display: none !important;
}

.gs-19-blog-tekil .by-ilgili-ad {
    font-size: var(--gs-fs-5) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-ilgili-tarih {
    font-size: var(--gs-fs-3) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--by-ikincil) !important;
}

.gs-19-blog-tekil .by-ilgili-bag:hover .by-ilgili-ad {
    text-decoration: underline !important;
    text-underline-offset: 0.22em !important;
}

.gs-19-blog-tekil .by-bos {
    padding-block: var(--gs-bo-6) !important;
    font-size: var(--gs-fs-3) !important;
    font-style: italic !important;
    color: var(--by-silik) !important;
}

.gs-19-blog-tekil .by-geri {
    margin: var(--gs-bo-6) 0 0 !important;
}

.gs-19-blog-tekil .by-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(--by-hat) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-bag:hover {
    border-bottom-color: var(--by-metin) !important;
}

.gs-19-blog-tekil .by-geri-ok {
    font-weight: 400 !important;
}

/* ── ODAK — koyu zeminde EZİLİR (Ö-113) ──────────────────────────────────── */

.gs-19-blog-tekil a:focus-visible {
    outline: 2px solid var(--by-metin) !important;
    outline-offset: 3px !important;
}

/* ── 768px ve üzeri ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .gs-19-blog-tekil .by-ilgili-bag {
        grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr) 6rem !important;
        gap: var(--gs-bo-5) !important;
    }

    .gs-19-blog-tekil .by-ilgili-no {
        grid-row: auto !important;
    }

    .gs-19-blog-tekil .by-ilgili-tarih {
        text-align: end !important;
    }
}