/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/18-blog-liste/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.
 */
/* ─── 18-blog-liste · BLOG LİSTESİ ────────────────────────────────────────────
 *
 * Tez: ana sayfadaki not şeridinin TAM HÂLİ + paftalar (Section.tsx notu).
 *
 * 🔒 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) · `<a>` kendi
 * kutusunu bildirir (Ö-118) · koyu zeminde `:focus-visible` ezilir (Ö-113).
 */

.gs-18-blog-liste {
    --bl-zemin: var(--gs-koyu-zemin);
    --bl-yuzey: var(--gs-koyu-yuzey);
    --bl-metin: var(--gs-koyu-metin);
    --bl-ikincil: var(--gs-koyu-ikincil);
    --bl-silik: var(--gs-koyu-silik);
    --bl-hat: var(--gs-koyu-hat);
    --bl-eylem: var(--gs-primary);

    --bl-aralik: 0.14em;
    --bl-sinir: min(92vw, 74rem);
    --bl-no-w: 2.25rem;

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

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

/* ── METİN KATMANLARI — §5 ④ ─────────────────────────────────────────────── */

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

.gs-18-blog-liste .bl-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;
}

/* ── BANNER — §5 ⑫ ───────────────────────────────────────────────────────── */

.gs-18-blog-liste .bl-banner {
    padding-block: var(--gs-ritim) var(--gs-bo-6) !important;
    border-bottom: 1px solid var(--bl-hat) !important;
}

.gs-18-blog-liste .bl-baslik {
    margin: 0 0 var(--gs-bo-4) !important;
    max-width: 16ch !important;
    font-size: var(--gs-fs-7) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.028em !important;
    color: var(--bl-metin) !important;
}

/* Künye: "PAFTA 02 / 07" — çizim setinin sayfa numarası gibi okunur. */
.gs-18-blog-liste .bl-kunye {
    display: flex !important;
    gap: var(--gs-bo-2) !important;
    align-items: baseline !important;
    margin: 0 !important;
}

.gs-18-blog-liste .bl-kunye-et {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--bl-aralik) !important;
    text-transform: uppercase !important;
    color: var(--bl-silik) !important;
}

.gs-18-blog-liste .bl-kunye-deger {
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--bl-metin) !important;
}

.gs-18-blog-liste .bl-kunye-ayrac {
    font-size: var(--gs-fs-3) !important;
    color: var(--bl-silik) !important;
}

/* ── REVİZYON LİSTESİ ────────────────────────────────────────────────────── */

.gs-18-blog-liste .bl-liste-kap {
    padding-block: var(--gs-ritim) var(--gs-bo-6) !important;
}

/* Dar ekranda başlık şeridi gizli: orada satır tek sütuna iniyor. */
.gs-18-blog-liste .bl-tablo-bas {
    display: none !important;
}

.gs-18-blog-liste .bl-tablo-et {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--bl-aralik) !important;
    text-transform: uppercase !important;
    color: var(--bl-silik) !important;
}

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

.gs-18-blog-liste .bl-satir {
    border-bottom: 1px solid var(--bl-hat) !important;
}

/* Satırın tamamı bağlantı — hedef bir kelime değil bir kayıt. */
.gs-18-blog-liste .bl-bag {
    display: grid !important;
    grid-template-columns: var(--bl-no-w) 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-18-blog-liste .bl-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(--bl-silik) !important;
}

/* Konu isteğe bağlı — §5 ⑨. Boşsa satırı boş bir kutuyla bölmez. */
.gs-18-blog-liste .bl-konu {
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--bl-aralik) !important;
    text-transform: uppercase !important;
    color: var(--bl-silik) !important;
}

.gs-18-blog-liste .bl-konu:empty {
    display: none !important;
}

.gs-18-blog-liste .bl-yazi-baslik {
    font-size: var(--gs-fs-5) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--bl-metin) !important;
}

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

.gs-18-blog-liste .bl-bag:hover .bl-yazi-baslik {
    text-decoration: underline !important;
    text-underline-offset: 0.22em !important;
}

/* ── BOŞ HÂL — §5 ⑧ ──────────────────────────────────────────────────────── */

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

/* ── PAFTALAR — sayfalama ────────────────────────────────────────────────── */

.gs-18-blog-liste .bl-pafta-kap {
    padding-block: 0 var(--gs-ritim) !important;
}

.gs-18-blog-liste .bl-pafta-liste {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gs-bo-2) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Kumandası olmayan kumanda kalmaz: tek pafta varsa sağlayıcı boş liste
   döndürüyor ve boş hâl görünmez bir kutu (Ö-105). */
.gs-18-blog-liste .bl-pafta-bos {
    display: none !important;
}

.gs-18-blog-liste .bl-pafta-bag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: var(--gs-hedef) !important;
    min-height: var(--gs-hedef) !important;
    padding: 0.4rem 0.7rem !important;
    border: 1px solid var(--bl-hat) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    text-decoration: none !important;
    color: var(--bl-ikincil) !important;
}

.gs-18-blog-liste .bl-pafta-bag:hover {
    border-color: var(--bl-metin) !important;
    color: var(--bl-metin) !important;
}

/* Geçerli pafta — JavaScript'siz işaretleniyor: sağlayıcı `[data-durum]`
   yazıyor, CSS onu okuyor. */
.gs-18-blog-liste .bl-pafta-bag[data-durum="simdi"] {
    border-color: var(--bl-metin) !important;
    background: var(--bl-metin) !important;
    color: var(--bl-zemin) !important;
}

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

.gs-18-blog-liste a:focus-visible {
    outline: 2px solid var(--bl-metin) !important;
    outline-offset: 3px !important;
}

/* ── 768px ve üzeri — cetvel açılır ──────────────────────────────────────── */

@media (min-width: 768px) {
    .gs-18-blog-liste {
        --bl-no-w: 3rem;
    }

    /* ⚠️ Sütunlar SABİT, `auto` DEĞİL (Ö-108): başlık şeridi ile satırlar ayrı
       ızgara örnekleri ve `auto` her birinde ayrı çözülür. */
    .gs-18-blog-liste .bl-tablo-bas,
    .gs-18-blog-liste .bl-bag {
        display: grid !important;
        grid-template-columns: var(--bl-no-w) minmax(0, 12rem) minmax(0, 1fr) 6rem !important;
        gap: var(--gs-bo-5) !important;
        align-items: baseline !important;
    }

    .gs-18-blog-liste .bl-tablo-bas {
        padding-block: var(--gs-bo-2) !important;
        border-bottom: 1px solid var(--bl-hat) !important;
    }

    .gs-18-blog-liste .bl-no {
        grid-row: auto !important;
    }

    .gs-18-blog-liste .bl-tarih {
        text-align: end !important;
    }
}