@layer sections {
/* Blog/Insights HUB — premium editorial (2026-06-22 "premium standart"; hub sadeleşmesi
   Patron 2026-06-23: bento ızgara + chip rayı + featured-as-hero KALKTI). Güncel tasarım:
   hero slider (masthead + dönen yazı + kontroller) + 12-kategori eşit showcase + kapanış CTA bandı.
   CHROME tek kaynağı: Materials.css glass/atmosphere/rim/glow + Colors.css atmosphere primitifleri;
   bu dosya yalnız aile düzeni, tipografi rolleri, ızgaralar ve durumlar.
   Belgeli ham istisnalar (Kart #002): aspect-ratio (16/9), fluid clamp() ve @media KOŞUL. */

/* ---------------------------------------------------------------- *
 * 0. Hub kabuğu + atmosfer + ray
 * ---------------------------------------------------------------- */

/* Blog ailesi TEK STANDART okuma ölçüsü (Patron 2026-07-03 "tokenize et, farklılıkları kaldır"):
   okuma yüzeyi aile genelinde kolonunu doldurur; PC'de dar 72ch şeridi yasak. Utils.css'teki
   tfg-reading-surface kapağı `utilities` katmanında olduğundan doğrudan max-inline-size override'ı
   ÇALIŞMAZ (utilities > sections) — ölçü token'ı aile köklerinde ezilir. Sayfa-başına farklı
   okuma ölçüsü tanımlamak yasaktır; tek tanım burasıdır (anti-drift gate korur). */
[data-tfg="on"] .blog-hub,
[data-tfg="on"] .blog-detail-page {
    --tfg-reading-measure: 100%;
}

/* Bölümler-arası dikey ritim = kanonik standart (.tfg-page-stack ile aynı token).
   Footer geçişi GLOBAL .tfg-footer margin-top'ı (--tfg-geometry-footer-transition-gap = bu gap)
   ile gelir — burada AYRICA padding-block-end EKLEME: footer margin'ine biniyordu (36px + 40px
   = 76px, bölüm-arası 32px'in 2.4 katı; Patron 2026-06-23 footer-boşluğu düzeltmesi). */
[data-tfg="on"] .blog-hub {
    position: relative;
    display: grid;
    gap: var(--tfg-geometry-page-section-gap);
    isolation: isolate;
}

[data-tfg="on"] .blog-hub__atmosphere {
    position: absolute;
    inset-block-start: calc(var(--tfg-space-8) * -1);
    inset-inline: 0;
    block-size: min(var(--tfg-container-sm), 70vh);
    z-index: var(--z-negative);
    pointer-events: none;
    background:
        radial-gradient(60% 60% at 18% 12%, var(--tfg-atmosphere-warm), transparent 70%),
        radial-gradient(55% 55% at 88% 6%, var(--tfg-atmosphere-cool), transparent 72%),
        radial-gradient(50% 50% at 60% 40%, var(--tfg-atmosphere-violet), transparent 75%);
    opacity: 0.9;
    filter: saturate(1.05);
}

/* Rail elemanları tfg-rail genişliğine (min(100%−2×gutter, shell)) bırakıldı —
   eski inline-size:100% override'ı gutter'ı eziyordu (88rem altı full-bleed).
   Artık tüm genişliklerde kanonik rail gutter'ı (16px mobil) uygulanır. */
[data-tfg="on"] .blog-hub__rail,
[data-tfg="on"] .blog-hub__hero,
[data-tfg="on"] .blog-hub__breadcrumb {
    margin-inline: auto;
}

[data-tfg="on"] .blog-hub__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-letter-spacing-wide);
    text-transform: uppercase;
}

[data-tfg="on"] .blog-hub__eyebrow--accent {
    color: var(--tfg-accent-warm-bright);
}

/* ---------------------------------------------------------------- *
 * 1. Kütüphane masthead + 12-kategori EŞİT showcase (kategori-egaliter hero)
 *    + image-2 stili kategori kartları (servis-hero görseli + cam-panel)
 * ---------------------------------------------------------------- */
[data-tfg="on"] .blog-hub__hero {
    position: relative;

    /* breadcrumb→hero boşluğunu standart (/sectors ~flush) seviyeye çek: hub grid'inin
       --tfg-geometry-page-section-gap'inin çoğunu geri al (token tüm genişliklerde geçerli —
       mobilde otomatik space-8). Net = space-2 breadcrumb boşluğu. */
    margin-block-start: calc(var(--tfg-geometry-page-section-gap) * -1 + var(--tfg-space-2));
}

/* Eyebrow = gold-outline pill (slide kategori pill'i ile aynı dil) */
[data-tfg="on"] .blog-hero-slider__masthead .blog-hub__eyebrow {
    padding: var(--tfg-space-1) var(--tfg-space-3);
    border: var(--tfg-border-hairline) solid var(--tfg-accent-ring, var(--tfg-accent-warm));
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-panel-background-soft);
    color: var(--tfg-accent-warm-bright);
}

[data-tfg="on"] .blog-hub__heading {
    margin: 0;
    font-family: var(--tfg-font-display);
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-title);
    letter-spacing: var(--tfg-letter-spacing-tight, -0.01em);
    text-wrap: balance;
}

/* SEO/GEO görünür intro paragrafı — masthead içinde, "Blog" başlığının ALTINDA
   (AI-arama "answer-first" metni). Kompakt body-sm; tam metin görünür (clamp yok). */
[data-tfg="on"] .blog-hub__intro {
    margin: 0;
    max-inline-size: min(100%, 48ch);
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-sm);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

/* ul semantiği: liste yapısı sarmalayıcıda, <a> doğal link rolünde (a11y B fix'i).
   <li> display:contents ile ızgara-nötr — grid çocuğu <a> olarak kalır. */
[data-tfg="on"] .blog-topic-grid {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

/* Image-2 stili: servis-hero görseli dolu + alt cam-panel (index + isim + açıklama + ok). */
[data-tfg="on"] .blog-topic-grid__item {
    display: contents;
}

[data-tfg="on"] .blog-topic-card {
    position: relative;
    display: grid;
    aspect-ratio: 5 / 4;
    min-block-size: var(--tfg-card-min-height-default);
    border-radius: var(--tfg-radius-lg);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
}

[data-tfg="on"] .blog-topic-card__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-negative);
    display: grid;
}

[data-tfg="on"] .blog-topic-card__media picture {
    display: block;
    block-size: 100%;
    inline-size: 100%;
}

[data-tfg="on"] .blog-topic-card__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--tfg-duration-slow, 480ms) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-topic-card:hover .blog-topic-card__image,
[data-tfg="on"] .blog-topic-card:focus-visible .blog-topic-card__image {
    transform: scale(1.05);
}

[data-tfg="on"] .blog-topic-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--tfg-glass-scrim-bg) 100%);
}

[data-tfg="on"] .blog-topic-card__panel {
    align-self: end;
    margin: clamp(0.7rem, 1.1vw, 1rem);
    display: grid;
    gap: var(--tfg-space-2);
    padding: clamp(0.9rem, 1.3vw, 1.2rem);
    border-radius: var(--tfg-radius-md);
    background: var(--tfg-glass-card-background-strong, var(--tfg-glass-card-background));
    border: var(--tfg-glass-card-border);
    box-shadow: var(--tfg-glass-card-shadow);
    -webkit-backdrop-filter: var(--tfg-glass-card-blur);
    backdrop-filter: var(--tfg-glass-card-blur);
    transition: border-color var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-topic-card:hover .blog-topic-card__panel,
[data-tfg="on"] .blog-topic-card:focus-visible .blog-topic-card__panel,
[data-tfg="on"] .blog-topic-card.is-active .blog-topic-card__panel {
    border-color: var(--tfg-accent-ring, var(--tfg-accent-warm));
}

[data-tfg="on"] .blog-topic-card__index {
    justify-self: start;
    padding: var(--tfg-space-1) var(--tfg-space-3);
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-panel-background-soft);
    border: var(--tfg-panel-border);
    color: var(--tfg-accent-warm-bright);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-bold);
    letter-spacing: var(--tfg-letter-spacing-wide);
}

[data-tfg="on"] .blog-topic-card__name {
    color: var(--tfg-text-primary);
    font-size: var(--tfg-font-size-body-lg);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-tight);
    text-wrap: balance;
    transition: color var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-topic-card:hover .blog-topic-card__name,
[data-tfg="on"] .blog-topic-card:focus-visible .blog-topic-card__name {
    color: var(--tfg-accent-warm-bright);
}

[data-tfg="on"] .blog-topic-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-caption);
    line-height: var(--tfg-line-height-body);
}

[data-tfg="on"] .blog-topic-card__cue {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    color: var(--tfg-accent-warm-bright);
}

[data-tfg="on"] .blog-category-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfg-space-2);
}

/* "Explore by Category" — standart SectionHeader'ı ana-sayfa gibi ortala (eyebrow + gold başlık + subtitle) */
[data-tfg="on"] .blog-hub__topics .tfg-section-header {
    place-items: center;
    margin-block-end: var(--tfg-space-6);
    text-align: center;
}

/* ---------------------------------------------------------------- *
 * 1b. Premium otomatik-geçişli HERO SLIDER (medya-sol + metin-sağ)
 * ---------------------------------------------------------------- */
[data-tfg="on"] .blog-hero-slider {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;

    /* Kanonik hero standardı (solutions-hero / /sectors) — uydurma clamp YOK:
       yükseklik SAF içerik-güdümlü (solutions-hero gibi, sabit floor yok); düşük
       frame-min-block tabanı içeriğin altında kalır → içerik sürer; çerçeve hero-frame-radius. */
    min-block-size: var(--tfg-hero-frame-min-block);
    border-radius: var(--tfg-hero-frame-radius);
    overflow: hidden;
    background: var(--tfg-glass-card-background);
    border: var(--tfg-glass-card-border-strong, var(--tfg-glass-card-border));
    box-shadow: var(--tfg-glass-card-shadow);
}

/* SOL kolon: dönen görsel. Medya-slide ABSOLUTE → satır yüksekliğine intrinsic
   katkı vermez; satır yüksekliği = SAĞ panel içeriği, görsel cover ile doldurur
   (kare görsel artık yüksekliği şişirmez, kırpılma olmaz). */
[data-tfg="on"] .blog-hero-slider__media {
    position: relative;
    min-inline-size: 0;
    min-block-size: 0;
    overflow: hidden;
}

[data-tfg="on"] .blog-hero-slider__media-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tfg-duration-slow, 600ms) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-hero-slider__media-slide.is-active {
    opacity: 1;
    visibility: visible;
}

[data-tfg="on"] .blog-hero-slider__media-slide picture {
    display: block;
    block-size: 100%;
    inline-size: 100%;
}

[data-tfg="on"] .blog-hero-slider__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* SAĞ kolon: içerik paneli (masthead + dönen yazı + kontroller) */
[data-tfg="on"] .blog-hero-slider__panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--tfg-space-4);
    padding: var(--tfg-hero-shell-padding);
    min-width: 0;
    background: var(--tfg-glass-card-background-strong, var(--tfg-glass-card-background));
    -webkit-backdrop-filter: var(--tfg-glass-card-blur);
    backdrop-filter: var(--tfg-glass-card-blur);
}

[data-tfg="on"] .blog-hero-slider__masthead {
    display: grid;
    gap: var(--tfg-space-2);
    justify-items: center;
    padding-block-end: var(--tfg-space-3);
    border-block-end: var(--tfg-glass-card-border);
    text-align: center;
}

[data-tfg="on"] .blog-hero-slider__copy-stage {
    position: relative;
    display: grid;
    align-content: center;
}

[data-tfg="on"] .blog-hero-copy {
    grid-area: 1 / 1;
    display: grid;
    gap: var(--tfg-space-3);
    justify-items: start;
    align-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tfg-duration-slow, 600ms) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-hero-copy.is-active {
    opacity: 1;
    visibility: visible;
}

[data-tfg="on"] .blog-hero-copy__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tfg-space-3);
}

[data-tfg="on"] .blog-hero-copy__meta-line {
    display: inline-flex;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    letter-spacing: var(--tfg-letter-spacing-wide);
}

[data-tfg="on"] .blog-hero-copy__dot {
    opacity: 0.6;
}

[data-tfg="on"] .blog-hero-copy__title {
    margin: 0;
    font-family: var(--tfg-font-display);
    font-size: clamp(1.5rem, 1rem + 1.3vw, 2.4rem);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-title);
    letter-spacing: var(--tfg-letter-spacing-tight, -0.01em);
    color: var(--tfg-accent-warm-bright);
    text-wrap: balance;
}

[data-tfg="on"] .blog-hero-copy__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

[data-tfg="on"] .blog-hero-copy__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tfg-space-3);
    inline-size: 100%;
    margin-block-start: var(--tfg-space-2);
}

[data-tfg="on"] .blog-hero-copy__author {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-letter-spacing-wide);
}

/* Kontroller: ok + nokta + pause */
[data-tfg="on"] .blog-hero-slider__controls {
    display: flex;
    align-items: center;
    gap: var(--tfg-space-3);
}

[data-tfg="on"] .blog-hero-slider__center {
    display: flex;
    align-items: center;
    gap: var(--tfg-space-3);
}

[data-tfg="on"] .blog-hero-slider__arrow,
[data-tfg="on"] .blog-hero-slider__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tfg-control-min-height);
    block-size: var(--tfg-control-min-height);
    border: var(--tfg-panel-border);
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-panel-background-soft);
    color: var(--tfg-text-secondary);
    cursor: pointer;
    transition:
        border-color var(--tfg-duration-fast) var(--tfg-ease-standard),
        color var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-hero-slider__arrow:hover,
[data-tfg="on"] .blog-hero-slider__arrow:focus-visible,
[data-tfg="on"] .blog-hero-slider__pause:hover,
[data-tfg="on"] .blog-hero-slider__pause:focus-visible {
    border-color: var(--tfg-accent-ring, var(--tfg-accent-warm));
    color: var(--tfg-text-primary);
}

[data-tfg="on"] .blog-hero-slider__dots {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--tfg-space-2);
}

/* WCAG 2.5.8 (AA) target size: the visual dot stays var(--tfg-space-2) (8px) but the BUTTON is a
   var(--tfg-space-6) (24px) tap target — the dot is drawn by ::before so the hit area meets the 24px
   minimum without enlarging the visual marker. */
[data-tfg="on"] .blog-hero-slider__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tfg-space-6);
    block-size: var(--tfg-space-6);
    min-inline-size: var(--tfg-space-6);
    min-block-size: var(--tfg-space-6);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

[data-tfg="on"] .blog-hero-slider__dot::before {
    content: "";
    inline-size: var(--tfg-space-2);
    block-size: var(--tfg-space-2);
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-panel-background-soft);
    box-shadow: inset 0 0 0 var(--tfg-border-hairline) var(--tfg-rim-light-gradient);
    transition:
        inline-size var(--tfg-duration-fast) var(--tfg-ease-standard),
        background-color var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-hero-slider__dot.is-active::before {
    inline-size: var(--tfg-space-6);
    background: var(--tfg-accent-warm-bright);
}

@media (max-width: 64rem) {
    /* 2-kolon hero → tek kolon: görsel üstte band, içerik paneli altında.
       Sabit yükseklik KALKAR (auto) — yoksa yığılı panel içeriği kırpılır. */
    [data-tfg="on"] .blog-hero-slider {
        grid-template-columns: 1fr;
        min-block-size: 0;
    }

    /* tek kolonda görsel = üst band; kanonik mobil-stage token'ı (absolute slide inset:0 doldurur) */
    [data-tfg="on"] .blog-hero-slider__media {
        block-size: var(--tfg-hero-mobile-stage-min-block);
        min-block-size: 0;
    }
}

/* Kategori sonuç başlığı (filtre aktifken) */
[data-tfg="on"] .blog-category-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tfg-space-4);
    padding: var(--tfg-space-5) var(--tfg-space-6);
    border-radius: var(--tfg-radius-lg);
}

[data-tfg="on"] .blog-category-intro__eyebrow {
    display: block;
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-letter-spacing-wide);
    text-transform: uppercase;
}

[data-tfg="on"] .blog-category-intro h2 {
    margin: var(--tfg-space-1) 0 var(--tfg-space-2);
    font-size: var(--tfg-font-size-title-sm);
    line-height: var(--tfg-line-height-title);
}

[data-tfg="on"] .blog-category-intro p {
    margin: 0;
    max-inline-size: min(100%, var(--tfg-page-hero-desc-max-width));
    color: var(--tfg-text-secondary);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- *
 * 4. Kapanış CTA bandı (eski sidebar CTA'nın yerine)
 * ---------------------------------------------------------------- */
[data-tfg="on"] .blog-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tfg-space-6);
    padding: clamp(1.5rem, 3vw, 2.75rem);
    border-radius: var(--tfg-radius-lg);
    border-color: var(--tfg-accent-ring, var(--tfg-accent-warm));
}

[data-tfg="on"] .blog-cta-band__copy {
    display: grid;
    gap: var(--tfg-space-2);
    max-inline-size: min(100%, 44ch);
}

[data-tfg="on"] .blog-cta-band__copy h2 {
    margin: 0;
    font-size: var(--tfg-font-size-title-sm);
    line-height: var(--tfg-line-height-title);
    text-wrap: balance;
}

[data-tfg="on"] .blog-cta-band__copy p {
    margin: 0;
    color: var(--tfg-text-secondary);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- *
 * 5. Yazı detayı: okuma yüzeyi (BlogDetail.razor — DOKUNULMADI)
 * ---------------------------------------------------------------- */

/* Premium okuma-sidebar kabuğu (ToC + Kaynaklar): servis detay premium ToC pattern'iyle
   token-birebir hizalı (Services.css .service-detail-sidebar .sticky-wrapper + .anchor-nav a
   + nav-dot). Blog ailesine scoped — AnchorNav bileşeni navbar/solutions/corporate'ta da
   kullanıldığı için .blog-detail-sidebar altına kapatıldı (Patron 2026-07-03: "premium UI"). */
[data-tfg="on"] .blog-detail-page .blog-detail-sidebar,
[data-tfg="on"] .blog-detail-sidebar {
    display: grid;
    gap: var(--tfg-space-5);
    padding: var(--tfg-card-padding-compact);
    border: var(--tfg-glass-shell-border);
    border-radius: var(--tfg-radius-xl);
    background:
        var(--tfg-metric-frame-center-radiance),
        var(--tfg-glass-shell-background);
    box-shadow: var(--tfg-glass-shell-shadow);
}

[data-tfg="on"] .blog-detail-sidebar__title {
    color: var(--tfg-text-headline);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-letter-spacing-wide);
    text-transform: uppercase;
    padding-block-end: var(--tfg-space-3);
    border-block-end: var(--tfg-panel-border);
}

/* ToC maddeleri = tam-genişlik premium pill (servis .anchor-nav a ile aynı token seti). */
[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tfg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__link {
    display: flex;
    align-items: center;
    gap: var(--tfg-space-3);
    inline-size: 100%;
    min-width: 0;
    min-height: var(--tfg-control-min-height);
    padding: var(--tfg-space-3);
    border: var(--tfg-panel-border);
    border-radius: var(--tfg-radius-lg);
    background: var(--tfg-glass-card-background);
    color: var(--tfg-text-secondary);
    text-decoration: none;
    transition:
        border-color var(--tfg-duration-fast) var(--tfg-ease-standard),
        background var(--tfg-duration-fast) var(--tfg-ease-standard),
        color var(--tfg-duration-fast) var(--tfg-ease-standard),
        transform var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__link:hover,
[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__link:focus-visible,
[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__link.is-active {
    border: var(--tfg-glass-card-hover-border);
    background: var(--tfg-glass-card-hover-background);
    color: var(--tfg-text-headline);
    transform: var(--tfg-glass-card-hover-transform);
}

[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__dot {
    flex-shrink: 0;
    inline-size: var(--tfg-space-2);
    aspect-ratio: 1;
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-accent-warm-bright);
    box-shadow: var(--tfg-warm-glow);
}

[data-tfg="on"] .blog-detail-sidebar .tfg-anchor-nav__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* İki sidebar kartı (ToC ↔ Kaynaklar) yapışıktı (0px); premium kabuk ritmi için ayır. */
[data-tfg="on"] .blog-detail-sidebar + .blog-detail-sidebar {
    margin-block-start: var(--tfg-space-5);
}

[data-tfg="on"] .blog-post {
    display: grid;
    gap: var(--tfg-space-6);
    justify-items: start;
}

/* Bölüm-arası boşluk = site standardı (Patron 2026-07-03): üst küme (etiket → yazar kartı →
   quick-answer) space-6 ritminde KALIR; makale bölümleri, SSS ve kapanış CTA'sı sayfa-bölüm
   standardına (--tfg-geometry-page-section-gap, 40/32) çıkar. Grid'de margin gap'e EKLENİR;
   fark calc ile alınır ve token mobil kırılımda kendiliğinden 32'ye düşer. */
[data-tfg="on"] .blog-post > .blog-post__section,
[data-tfg="on"] .blog-post > .blog-post__faq,
[data-tfg="on"] .blog-post > .blog-post__next-step {
    margin-block-start: calc(var(--tfg-geometry-page-section-gap) - var(--tfg-space-6));
}

[data-tfg="on"] .blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tfg-space-3);
}

[data-tfg="on"] .blog-post__meta-item {
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    letter-spacing: var(--tfg-letter-spacing-wide);
}

[data-tfg="on"] .blog-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfg-space-2);
}

[data-tfg="on"] .blog-post__hero-image {
    display: grid;
    inline-size: 100%;
    border-radius: var(--tfg-radius-lg);
    overflow: hidden;
}

[data-tfg="on"] .blog-post__hero-image picture {
    display: block;
    inline-size: 100%;
}

/* .blog-post__hero aspect-ratio now comes from the shared --tfg-hero-media-aspect standard
   (Sections/Hero.css) — no per-family hero ratio (Patron 2026-07-02). */
[data-tfg="on"] .blog-post__hero {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: inherit;
}

[data-tfg="on"] .blog-post__section {
    display: grid;
    gap: var(--tfg-space-3);
    inline-size: 100%;
}

[data-tfg="on"] .blog-post__text {
    font-size: var(--tfg-font-size-body);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

/* ── Answer-first body blocks — typed section-block vocabulary (Patron 2026-07-02).
   TFG-token-only, 6-color-safe (accent/info — NEVER --sentinel: emergency/IR-only, §1.3).
   No gold-italic (§1.3 italic-accent invariant). Blocks stack in the .blog-post__section grid. */

/* keyTakeaway — callout box with an info left-rail */
[data-tfg="on"] .blog-post__callout {
    position: relative;
    display: grid;
    gap: var(--tfg-space-2);
    padding: var(--tfg-space-4) var(--tfg-space-5);
    padding-inline-start: var(--tfg-space-6);
    background: var(--tfg-surface-heavy);
    border: var(--tfg-border-hairline) solid var(--tfg-surface-border-strong);
    border-radius: var(--tfg-radius-md);
    box-shadow: var(--tfg-shadow-md);
    overflow: hidden;
}

[data-tfg="on"] .blog-post__callout::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--tfg-space-1);
    background: var(--tfg-info);
}

[data-tfg="on"] .blog-post__callout-label {
    display: inline-flex;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-info);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-letter-spacing-wide);
    text-transform: uppercase;
}

[data-tfg="on"] .blog-post__callout-text {
    margin: 0;
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-lg);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

/* pullQuote — large editorial break, gold left-rail (NOT gold-italic) */
[data-tfg="on"] .blog-post__pullquote {
    display: grid;
    gap: var(--tfg-space-2);
    padding-inline-start: var(--tfg-space-5);
    border-inline-start: var(--tfg-space-1) solid var(--tfg-accent-warm);
}

[data-tfg="on"] .blog-post__pullquote-text {
    margin: 0;
    color: var(--tfg-text-headline);
    font-size: var(--tfg-font-size-2xl);
    line-height: var(--tfg-line-height-tight);
    font-weight: var(--tfg-font-weight-semibold);
    text-wrap: balance;
}

[data-tfg="on"] .blog-post__pullquote-cite {
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
}

/* statRow — framework-anchored figure cards */
[data-tfg="on"] .blog-post__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tfg-space-24) * 2)), 1fr));
    gap: var(--tfg-space-3);
}

[data-tfg="on"] .blog-post__stat {
    display: grid;
    align-content: start;
    gap: var(--tfg-space-2);
    padding: var(--tfg-space-4);
    background: var(--tfg-surface-heavy);
    border: var(--tfg-border-hairline) solid var(--tfg-surface-border-strong);
    border-radius: var(--tfg-radius-md);
    box-shadow: var(--tfg-shadow-md);
}

[data-tfg="on"] .blog-post__stat-value {
    color: var(--tfg-accent-warm-bright);
    font-size: var(--tfg-font-size-2xl);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-tight);
    font-variant-numeric: tabular-nums;
}

[data-tfg="on"] .blog-post__stat-label {
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    line-height: var(--tfg-line-height-body);
}

/* stepList — numbered premium list */
[data-tfg="on"] .blog-post__steps {
    display: grid;
    gap: var(--tfg-space-3);
    padding: 0;
    list-style: none;
    counter-reset: blog-step;
}

[data-tfg="on"] .blog-post__step {
    position: relative;
    counter-increment: blog-step;
    padding-inline-start: var(--tfg-space-7);
    min-block-size: var(--tfg-space-6);
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-lg);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

[data-tfg="on"] .blog-post__step::before {
    content: counter(blog-step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: var(--tfg-space-6);
    block-size: var(--tfg-space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-accent-warm-soft);
    color: var(--tfg-accent-warm-bright);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-bold);
}

/* figure — inline content image + caption */
[data-tfg="on"] .blog-post__figure {
    display: grid;
    gap: var(--tfg-space-2);
}

[data-tfg="on"] .blog-post__figure-img {
    inline-size: 100%;
    block-size: auto;
    border: var(--tfg-border-hairline) solid var(--tfg-surface-border);
    border-radius: var(--tfg-radius-lg);
}

[data-tfg="on"] .blog-post__figure-cite {
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    text-align: center;
}

[data-tfg="on"] .blog-post__next-step {
    display: grid;
    gap: var(--tfg-space-8);
    padding: var(--tfg-space-6);
    inline-size: 100%;
    justify-items: center;
}

/* Yazı detayı HERO (services dili, ContentPageLayout HeroAside 2-kolon slot'u):
   sol meta + CTA satırları, sağ aside = hero görsel çerçevesi + içindekiler derinlik-haritası.
   Derinlik-haritası .blog-cat-hero__depth ile paylaşılır. Token-only. */
[data-tfg="on"] .blog-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tfg-space-3);
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
}

[data-tfg="on"] .blog-detail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfg-space-3);
}

[data-tfg="on"] .blog-detail-hero-aside {
    display: grid;
    gap: var(--tfg-space-3);
    min-width: 0;
}

[data-tfg="on"] .blog-detail-hero-aside .blog-post__hero-image {
    box-shadow: var(--tfg-rim-light), var(--tfg-rim-shadow);
}

/* Answer-first gövde (Patron 2026-07-01): Kısa cevap kutusu (altın sol-şerit) + kaynaklar
   listesi + FAQ aralığı. FAQ akordeonu tfg-faq-* primitive'lerini giyer. Token-only. */
[data-tfg="on"] .blog-post__answer {
    position: relative;
    inline-size: 100%;
    display: grid;
    gap: var(--tfg-space-3);
    overflow: hidden;
}

[data-tfg="on"] .blog-post__answer::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--tfg-space-1);
    background: linear-gradient(180deg, var(--tfg-accent-warm-bright), var(--tfg-accent-warm-deep));
}

[data-tfg="on"] .blog-post__answer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-accent-warm-bright);
    font-size: var(--tfg-font-size-caption);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-letter-spacing-wide);
    text-transform: uppercase;
}

[data-tfg="on"] .blog-post__answer-list {
    display: grid;
    gap: var(--tfg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-tfg="on"] .blog-post__answer-list li {
    position: relative;
    padding-inline-start: var(--tfg-space-5);
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-lg);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

[data-tfg="on"] .blog-post__answer-list li::before {
    content: "\2192";
    position: absolute;
    inset-inline-start: 0;
    color: var(--tfg-accent-warm-bright);
    font-weight: var(--tfg-font-weight-bold);
}

[data-tfg="on"] .blog-post__sources-list {
    display: grid;
    gap: var(--tfg-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Kaynak linkleri = premium glass link-kart (ToC pill diliyle aynı token seti + dış-link oku).
   Dış link olduklarını cool renk + ↗ göstergesi korur (Patron 2026-07-03: "premium olsun"). */
[data-tfg="on"] .blog-post__sources-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tfg-space-3);
    align-items: center;
    padding: var(--tfg-space-3);
    border: var(--tfg-panel-border);
    border-radius: var(--tfg-radius-lg);
    background: var(--tfg-glass-card-background);
    color: var(--tfg-accent-cool);
    font-size: var(--tfg-font-size-body-sm);
    line-height: var(--tfg-line-height-body);
    text-decoration: none;
    transition:
        border-color var(--tfg-duration-fast) var(--tfg-ease-standard),
        background var(--tfg-duration-fast) var(--tfg-ease-standard),
        color var(--tfg-duration-fast) var(--tfg-ease-standard),
        transform var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-post__sources-list a::after {
    content: "\2197";
    font-weight: var(--tfg-font-weight-semibold);
    transition: transform var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-post__sources-list a:hover,
[data-tfg="on"] .blog-post__sources-list a:focus-visible {
    border: var(--tfg-glass-card-hover-border);
    background: var(--tfg-glass-card-hover-background);
    color: var(--tfg-text-headline);
    transform: var(--tfg-glass-card-hover-transform);
}

[data-tfg="on"] .blog-post__sources-list a:hover::after,
[data-tfg="on"] .blog-post__sources-list a:focus-visible::after {
    transform: translate(calc(var(--tfg-space-1) / 2), calc(var(--tfg-space-1) / -2));
}

/* Yazar şeridi dengesi (AuthorByline, blog-only): default `space-between` geniş ekranda
   kimliği sola / tarihleri sağ-ÜST köşeye itiyordu → ortada ölü boşluk + tarihler asılı.
   Premium yazar-şeridi kalıbı: kimlik büyüyerek doldurur, tarihler dikey-ORTALI + sağa hizalı.
   Bileşen "blog-only" olduğu için düzeltme blog ailesinde; `[data-tfg]` özgüllüğü scoped
   defaultları geçer (Patron 2026-07-03: yazar kartı "kısa/dengesiz"). */
[data-tfg="on"] .blog-detail-page .author-byline__body {
    align-items: center;
}

[data-tfg="on"] .blog-detail-page .author-byline__identity {
    flex: 1 1 auto;
    min-inline-size: 0;
}

[data-tfg="on"] .blog-detail-page .author-byline__meta {
    flex: 0 0 auto;
    align-items: flex-end;
    text-align: end;
}

@media (max-width: 48rem) {
    [data-tfg="on"] .blog-detail-page .author-byline__meta {
        align-items: flex-start;
        text-align: start;
    }
}

[data-tfg="on"] .blog-post__faq {
    display: grid;
    gap: var(--tfg-space-4);
    inline-size: 100%;
}

/* Yazı detayı 2-kolon okuma kabuğu (mockup: içerik SOL + sabit sidebar SAĞ). ContentPageLayout'un
   content-page__layout grid'i page-specific (Solutions/Corporate) — blog route'unda tanımlı değildi,
   sidebar tam-genişlik yığılıyordu (Patron 2026-07-01). Scoped .blog-detail-page. */
[data-tfg="on"] .blog-detail-page .content-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(var(--tfg-grid-col-14), var(--tfg-grid-card-min));
    gap: var(--tfg-space-7);
    align-items: start;
}

[data-tfg="on"] .blog-detail-page .content-page__main {
    order: 1;
    min-width: 0;
}

[data-tfg="on"] .blog-detail-page .content-page__sidebar {
    order: 2;
    min-width: 0;
    position: sticky;
    inset-block-start: var(--tfg-space-6);
    align-self: start;
}

@media (max-width: 64rem) {
    [data-tfg="on"] .blog-detail-page .content-page__layout {
        grid-template-columns: 1fr;
    }

    [data-tfg="on"] .blog-detail-page .content-page__sidebar {
        position: static;
    }
}

/* ---------------------------------------------------------------- *
 * 6. İlgili yazılar (BlogDetail.razor — DOKUNULMADI)
 * ---------------------------------------------------------------- */
[data-tfg="on"] .blog-related {
    display: grid;
    gap: var(--tfg-space-4);
}

[data-tfg="on"] .blog-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tfg-grid-col-14), 1fr));
    gap: var(--tfg-space-4);
    align-items: stretch;
}

[data-tfg="on"] .blog-related__card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--tfg-space-3);
    padding: var(--tfg-space-5);
    justify-items: start;
    min-width: 0;
}

[data-tfg="on"] .blog-related__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
}

[data-tfg="on"] .blog-related__title {
    font-size: var(--tfg-font-size-body-lg);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-title);
    text-wrap: balance;
}

[data-tfg="on"] .blog-related__summary {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-sm);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- *
 * 6b. Kategori iniş sayfası (BlogCategory.razor) — SERVICES pillar-hero dili
 *     (Patron 2026-07-01 "services alt kategoriden örnek al"): 2-kolon cam hero
 *     (premium chip başlık + H1 + lead + tek CTA + kapsam pill'leri | infografik
 *     kare çerçeve + derinlik-haritası) + premium kartlar (index + köşe ok).
 *     CHROME tek kaynağı: Materials.css glass + Colors.css atmosphere; bu dosya
 *     yalnız aile düzeni. Token-only, ham hex/px YOK.
 * ---------------------------------------------------------------- */
[data-tfg="on"] .blog-cat-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 3.4vw, 3.25rem);
    align-items: center;

    /* breadcrumb→hero boşluğunu standart (/sectors, blog-hub__hero) space-2 seviyesine çek:
       .blog-hub grid'inin --tfg-geometry-page-section-gap'ini geri al (blog-hub__hero ile birebir). */
    margin-block-start: calc(var(--tfg-geometry-page-section-gap) * -1 + var(--tfg-space-2));
    padding: clamp(1.5rem, 3vw, 2.75rem);
    border-radius: var(--tfg-radius-xl, var(--tfg-radius-lg));
    background: var(--tfg-glass-card-background-strong, var(--tfg-glass-card-background));
    border: var(--tfg-glass-card-border-strong, var(--tfg-glass-card-border));
    box-shadow: var(--tfg-glass-card-shadow);
    -webkit-backdrop-filter: var(--tfg-glass-card-blur);
    backdrop-filter: var(--tfg-glass-card-blur);
    overflow: hidden;
}

[data-tfg="on"] .blog-cat-hero::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--tfg-border-hairline);
    background: var(--tfg-glass-shell-highlight-line, var(--tfg-glass-shell-top-highlight));
    opacity: 0.7;
}

[data-tfg="on"] .blog-cat-hero__text {
    display: grid;
    gap: var(--tfg-space-4);
    justify-items: start;
    min-width: 0;
}

/* Kategori hero başlığı — SEMANTİK font token (blog-hub__heading ham clamp'ı yerine;
   Patron 2026-07-01 "puntoları tokenize et"). Hub'ın kendi başlığı ayrı, dokunulmadı. */
[data-tfg="on"] .blog-cat-hero__title {
    margin: 0;
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-role-section-title);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-title);
    letter-spacing: var(--tfg-letter-spacing-tight, -0.01em);
    text-wrap: balance;
}

[data-tfg="on"] .blog-cat-hero__lead {
    margin: 0;
    max-inline-size: 52ch;
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-lg);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

[data-tfg="on"] .blog-category__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfg-space-3);
    margin-block-start: var(--tfg-space-2);
}

[data-tfg="on"] .blog-cat-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfg-space-2);
}

/* Sağ: infografik kare çerçeve + derinlik-haritası (services aside dili) */
[data-tfg="on"] .blog-cat-hero__stage {
    display: grid;
    gap: var(--tfg-space-3);
    min-width: 0;
}

[data-tfg="on"] .blog-cat-hero__frame {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--tfg-radius-lg);
    overflow: hidden;
    border: var(--tfg-glass-card-border);
    background:
        radial-gradient(120% 90% at 18% 8%, var(--tfg-atmosphere-warm), transparent 55%),
        radial-gradient(120% 90% at 88% 92%, var(--tfg-atmosphere-cool), transparent 55%),
        var(--tfg-canvas-raised);
    display: grid;
    place-items: center;
}

[data-tfg="on"] .blog-cat-hero__glyph {
    display: grid;
    place-items: center;
    inline-size: var(--tfg-space-24);
    block-size: var(--tfg-space-24);
    border-radius: var(--tfg-radius-lg);
    border: var(--tfg-border-hairline) solid var(--tfg-accent-ring, var(--tfg-accent-warm));
    background: var(--tfg-panel-background-soft);
    color: var(--tfg-accent-warm-bright);
}

[data-tfg="on"] .blog-cat-hero__cap {
    position: absolute;
    inset-block-end: var(--tfg-space-3);
    inset-inline: var(--tfg-space-3);
    text-align: center;
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
    letter-spacing: var(--tfg-letter-spacing-wide);
    text-transform: uppercase;
}

[data-tfg="on"] .blog-cat-hero__depth {
    display: grid;
    gap: var(--tfg-space-2);
}

[data-tfg="on"] .blog-cat-hero__depth-item {
    display: flex;
    align-items: center;
    gap: var(--tfg-space-3);
    padding: var(--tfg-space-3) var(--tfg-space-4);
    border: var(--tfg-panel-border);
    border-radius: var(--tfg-radius-md);
    background: var(--tfg-glass-card-background);
    text-decoration: none;
    transition: border-color var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .blog-cat-hero__depth-item:hover,
[data-tfg="on"] .blog-cat-hero__depth-item:focus-visible {
    border-color: var(--tfg-accent-ring, var(--tfg-accent-warm));
}

[data-tfg="on"] .blog-cat-hero__depth-index {
    color: var(--tfg-accent-warm-bright);
    font-weight: var(--tfg-font-weight-bold);
    font-variant-numeric: tabular-nums;
    font-size: var(--tfg-font-size-caption);
}

[data-tfg="on"] .blog-cat-hero__depth-title {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-sm);
    line-height: var(--tfg-line-height-tight);
}

[data-tfg="on"] .blog-category__posts {
    display: grid;
    gap: var(--tfg-space-6);
}

/* Kategori yazı kartları — index + köşe ok (services related-card dili); .tfg-card üstüne düzen */
[data-tfg="on"] .blog-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tfg-space-4);
    align-items: stretch;
}

[data-tfg="on"] .blog-cat-card {
    grid-template-rows: auto auto 1fr auto;
    gap: var(--tfg-space-3);
    padding: var(--tfg-space-5);
    justify-items: start;
    min-width: 0;
    overflow: hidden;
}

[data-tfg="on"] .blog-cat-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tfg-space-3);
    inline-size: 100%;
}

[data-tfg="on"] .blog-cat-card__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-text-muted);
    font-size: var(--tfg-font-size-caption);
}

[data-tfg="on"] .blog-cat-card__index {
    color: var(--tfg-accent-warm-bright);
    font-weight: var(--tfg-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

[data-tfg="on"] .blog-cat-card__arrow {
    display: grid;
    place-items: center;
    inline-size: var(--tfg-space-8);
    block-size: var(--tfg-space-8);
    border: var(--tfg-panel-border);
    border-radius: var(--tfg-radius-pill);
    color: var(--tfg-accent-warm-bright);
}

[data-tfg="on"] .blog-cat-card:hover .blog-cat-card__arrow,
[data-tfg="on"] .blog-cat-card:focus-within .blog-cat-card__arrow {
    border-color: var(--tfg-accent-ring, var(--tfg-accent-warm));
}

[data-tfg="on"] .blog-cat-card__title {
    margin: 0;
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-size-body-lg);
    font-weight: var(--tfg-font-weight-bold);
    line-height: var(--tfg-line-height-title);
    text-wrap: balance;
}

[data-tfg="on"] .blog-cat-card__summary {
    margin: 0;
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-sm);
    line-height: var(--tfg-line-height-body);
    text-wrap: pretty;
}

[data-tfg="on"] .blog-cat-card--lead {
    grid-column: 1 / -1;
}

[data-tfg="on"] .blog-cat-card--lead .blog-cat-card__title {
    font-size: var(--tfg-font-size-title);
}

@media (max-width: 64rem) {
    [data-tfg="on"] .blog-cat-hero {
        grid-template-columns: 1fr;
    }

    [data-tfg="on"] .blog-cat-hero__stage {
        order: -1;
    }
}

@media (max-width: 48rem) {
    [data-tfg="on"] .blog-cat-grid {
        grid-template-columns: 1fr;
    }

    [data-tfg="on"] .blog-cat-card--lead {
        grid-column: 1;
    }
}

/* ---------------------------------------------------------------- *
 * 7. Duyarlı düzen + hareket azaltma
 * ---------------------------------------------------------------- */
@media (max-width: 64rem) {
    [data-tfg="on"] .blog-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    /* hub gap + hero negatif-margin kompensasyonu artık base'de --tfg-geometry-page-section-gap
       token'ıyla (mobilde otomatik space-8) — mobil override gereksiz, kaldırıldı. */
    [data-tfg="on"] .blog-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Mobil 2-kol: aspect-ratio'yu kapat — 5/4 + min-block ikilisi min-genişlik (240px)
       dayatıp 2-kolu taşırıyordu; mobilde yükseklik içerik-güdümlü. */
    [data-tfg="on"] .blog-topic-card {
        aspect-ratio: auto;
        min-block-size: calc(var(--tfg-space-24) * 2);
    }

    [data-tfg="on"] .blog-topic-card__desc {
        display: none;
    }

    [data-tfg="on"] .blog-cta-band {
        flex-direction: column;
        align-items: flex-start;
    }

    [data-tfg="on"] .blog-post__next-step {
        padding: var(--tfg-space-5) var(--tfg-space-4);
    }
}

@media (forced-colors: active) {
    /* WHC: arka-plan dolgusu düşer — nokta sınır çizer, aktif durum sistem rengiyle konuşur. */
    [data-tfg="on"] .blog-hero-slider__dot::before {
        border: var(--tfg-border-hairline) solid var(--tfg-forced-color-text);
        background: var(--tfg-forced-color-canvas);
    }

    [data-tfg="on"] .blog-hero-slider__dot.is-active::before {
        background: var(--tfg-forced-color-selected);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-tfg="on"] .blog-topic-card,
    [data-tfg="on"] .blog-hero-slider__media-slide,
    [data-tfg="on"] .blog-hero-copy,
    [data-tfg="on"] .blog-hero-slider__dot::before {
        transition: none;
    }
}
}