@charset "UTF-8";
/* ==========================================================================
   SPORTARIHI — V14 "MERMER"
   ==========================================================================

   Bu dosya, iletilen referans tasarımın kendisinden kuruldu. Önceki turun
   ("FLOODLIGHT": gece zemini + altın vurgu) hiçbir jetonu, hiçbir bileşeni
   taşınmadı — o yön bırakıldı.

   ── KAVRAM: KLASİK YAYIN ───────────────────────────────────────────────────

   Zemin kâğıt, mürekkep siyah, tek vurgu bronz. Spor tarihi burada bir
   "gece maçı" değil, bir ARŞİV YILLIĞI: sütun başlıkları, ince çerçeveler,
   versal etiketler, sepya fotoğraflar ve antikite motifleri.

   Üç kural:

   1. ZEMİN AÇIK, ÇERÇEVE İNCE. Sayfa #F8F8F4 kâğıt; içerik beyaz kartlarda,
      kartların kenarı 1px sıcak gri. Gölge neredeyse yok — bu bir kâğıt
      yüzey, bir arayüz değil.
   2. TİPOGRAFİ TAŞIYOR. Manşetler Playfair Display (klasik, yüksek
      kontrastlı serif), gövde ve gezinme Source Serif 4, yalnızca küçük
      versal etiketler Archivo.
   3. BRONZ TEK VURGU. #97774C: düğmeler, bağlantılar, etiket çizgileri.
      İkinci bir vurgu rengi yok.

   ── MOBİL ÖNCE ─────────────────────────────────────────────────────────────

   Bütün ölçüler önce telefon için yazıldı; `min-width` sorguları yalnızca
   genişledikçe ekliyor. Dokunma hedefleri en az 44px, yapışkan öğelerde
   `env(safe-area-inset-*)`, yatay şeritler `scroll-snap` ile duruyor.
   ========================================================================== */

/* ---------------------------------------------------------------- FONTLAR */
/*
 * Dördü de yerel `assets/fonts/` altında (woff2, değişken eksen). Projeye
 * CDN girmiyor: "zip'i public_html'e aç" sözü, internete bağımlı bir yazı
 * tipiyle bozulurdu.
 *
 * Playfair Display bu turda eklendi — referansın manşet sesi bu. Bodoni
 * Moda dosyada kaldı ama artık hiçbir yerde kullanılmıyor; bir sonraki
 * temizlikte silinebilir.
 */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('../fonts/playfair-display-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('../fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('../fonts/playfair-display-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('../fonts/playfair-display-latin-ext-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-ext-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- RESET */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- JETONLAR */

:root {
  /* ── Kâğıt ────────────────────────────────────────────────────────────
     Referanstan alınan sıcak kırık beyazlar. Nötr gri kullanılmadı:
     sayfanın tamamı hafifçe sarıya kayık, bir arşiv kâğıdı gibi. */
  --paper-000: #FFFFFF;   /* kart yüzeyi */
  --paper-050: #FCFCF9;
  --paper-100: #F8F8F4;   /* sayfa zemini */
  --paper-200: #F3F1EC;   /* manşet bandı, vurgulu bölüm */
  --paper-300: #ECE8DF;   /* dolu ayırıcı */

  --line-100: #E6E2D8;    /* ince çerçeve */
  --line-200: #D7D1C4;    /* belirgin çizgi */
  --line-300: #BCB4A2;

  /* ── Bronz ────────────────────────────────────────────────────────────
     Tek vurgu. Referanstaki düğme rengi #97774C; çevresine bir açık ve bir
     koyu ton eklendi (üzerine gelme ve küçük metin kontrastı için). */
  --bronze-300: #C6AC80;
  --bronze-400: #B39463;
  /*
   * Ana vurgu. Referanstaki düğme rengi #97774C idi; beyaz yazıyla kontrast
   * oranı 4,15 çıkıyordu (WCAG AA küçük metin için 4,5 ister). İki adım
   * koyulaştırıldı: renk gözle aynı bronz, oran 4,88.
   */
  --bronze-500: #8A6C42;
  --bronze-600: #7A5F3A;  /* küçük metinde AA kontrast */
  --bronze-wash: #F2EBDD;
  --bronze-line: rgba(151, 119, 76, 0.34);

  /* ── Mürekkep ─────────────────────────────────────────────────────── */
  --ink-900: #12130F;     /* manşet */
  --ink-800: #1D1E1A;     /* koyu bant zemini */
  --ink-700: #2A2A27;     /* gövde metni */
  --ink-500: #5E5C55;     /* ikincil */
  /*
   * Sessiz metin. #86837A kâğıt üzerinde 3,56 veriyordu; künye satırları ve
   * "3 kayıt" gibi 10–11 piksellik yazılar bu renkte okunmuyordu. 5,0.e
   * çekildi — hâlâ geri planda ama artık erişilebilir.
   */
  --ink-400: #6E6B62;
  --on-dark: #F6F4EE;

  /* ── Yazı tipleri ─────────────────────────────────────────────────── */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /*
   * ── Ölçek ────────────────────────────────────────────────────────────
   * Tabanı telefon; `clamp()` ile büyüyor ama alt sınır telefonda okunur
   * olacak şekilde seçildi, masaüstü değerinden küçültülerek değil.
   */
  --t-micro:  0.6875rem;   /* 11 — versal etiket */
  --t-tiny:   0.75rem;     /* 12 */
  --t-small:  0.8125rem;   /* 13 */
  --t-meta:   0.875rem;    /* 14 — künye */
  --t-base:   1rem;        /* 16 */
  --t-lead:   clamp(1.0625rem, 1rem + 0.45vw, 1.1875rem);
  --t-read:   clamp(1.0625rem, 1.02rem + 0.3vw, 1.1875rem);
  --t-h5:     1.0625rem;
  --t-h4:     clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --t-h3:     clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem);
  --t-h2:     clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem);
  --t-h1:     clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem);

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-plain: 1.5;
  --lh-read:  1.72;

  --track-head: -0.012em;
  --track-label: 0.14em;
  --track-word: 0.1em;

  /* ── Aralık ───────────────────────────────────────────────────────── */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 2.75rem;  --s8: 3.5rem;
  --s9: 4.5rem;   --s10: 6rem;

  --gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);

  /* ── Genişlik ─────────────────────────────────────────────────────── */
  --wrap: 78rem;        /* 1248 */
  --wrap-tight: 62rem;
  --read: 41rem;

  --bar-h: 4.25rem;
  --tab-h: 3.75rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 150ms;
  --base: 280ms;

  /* Kâğıt yüzeyde gölge neredeyse yok; yükselti çizgiyle anlatılıyor. */
  --lift: 0 1px 2px rgba(18, 19, 15, 0.04);
  --lift-2: 0 2px 4px rgba(18, 19, 15, 0.05), 0 12px 28px -18px rgba(18, 19, 15, 0.22);
}

body {
  margin: 0;
  background: var(--paper-100);
  color: var(--ink-700);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: var(--lh-plain);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1;
  /*
   * Kâğıt dokusu: çok hafif, iki katmanlı bir gradyan. Görsel dosyası
   * kullanılmadı — bir doku PNG'si hem istek hem bayt demek, buradaki iş
   * yalnızca yüzeyin düz olmadığını hissettirmek.
   */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(151, 119, 76, 0.035) 0%, rgba(151, 119, 76, 0) 45%),
    radial-gradient(circle at 82% 78%, rgba(151, 119, 76, 0.028) 0%, rgba(151, 119, 76, 0) 40%);
  background-attachment: fixed;
}

:focus-visible { outline: 2px solid var(--bronze-500); outline-offset: 3px; }

::selection { background: var(--bronze-wash); color: var(--ink-900); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s4); top: -5rem; z-index: 300;
  background: var(--bronze-500); color: #fff;
  padding: var(--s3) var(--s4);
  font-family: var(--sans); font-weight: 700;
  transition: top var(--fast);
}
.skip-link:focus { top: var(--s3); }

.num { font-variant-numeric: tabular-nums lining-nums; }
.quiet { color: var(--ink-400); }

/* ---------------------------------------------------------------- KAPSAYICI */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--tight { max-width: var(--wrap-tight); }
.wrap--read  { max-width: calc(var(--read) + var(--gutter) * 2); }

/* ------------------------------------------------- ORTAK TİPOGRAFİ PARÇALARI */

/*
 * Versal etiket. Referanstaki "ÖZEL DOSYA" / "FUTBOL" kutucukları: küçük,
 * geniş harf aralıklı, ince çerçeveli. Sitenin her yerinde aynı.
 */
.tagbox {
  display: inline-flex; align-items: center;
  height: 1.625rem;
  padding: 0 var(--s3);
  border: 1px solid var(--line-200);
  background: var(--paper-000);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.tagbox--bronze { border-color: var(--bronze-line); color: var(--bronze-600); background: var(--bronze-wash); }
.tagbox--solid  { border-color: var(--ink-900); background: var(--ink-900); color: var(--paper-100); }

/* Çizgisiz küçük künye satırı: tarih · süre · arşiv no */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* Bölüm başlığı — referanstaki "Öne Çıkan Hikayeler" satırı. */
.rule {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
@media (min-width: 40rem) {
  .rule { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s5); }
}
.rule__title {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--track-head);
  line-height: 1.15;
  color: var(--ink-900);
}
.rule__note { margin-top: var(--s2); font-size: var(--t-meta); color: var(--ink-500); max-width: 60ch; }

/* Bronz "daha fazla" bağlantısı. */
.more {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--serif);
  font-size: var(--t-meta);
  color: var(--bronze-600);
  white-space: nowrap;
}
.more u { text-decoration-color: var(--bronze-line); text-underline-offset: 3px; }
.more svg { width: 1rem; height: 1rem; transition: transform var(--fast); }
.more:hover svg { transform: translateX(3px); }

/* Düğmeler. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.875rem;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.btn svg { width: 1rem; height: 1rem; }
.btn--bronze { background: var(--bronze-500); color: #fff; }
.btn--bronze:hover { background: var(--bronze-600); }
.btn--ink { background: var(--ink-800); color: var(--paper-100); }
.btn--ink:hover { background: var(--ink-900); }
.btn--line { border-color: var(--line-200); background: var(--paper-000); color: var(--ink-700); }
.btn--line:hover { border-color: var(--bronze-500); color: var(--bronze-600); }

/* Alıntı — referansta iki yerde: manşet yanında ve bölüm kenarlarında. */
.quote {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-500);
}
.quote--tiny { font-size: var(--t-meta); }

/* ==========================================================================
   1. BAŞLIK BANDI
   ==========================================================================
   Referanstaki üst bant: solda sütun amblemi + logotip + slogan, ortada
   gezinme, sağda arama ve bronz eylem düğmesi. Yapışkan; kaydırıldığında
   altına bir çizgi ve hafif bir zemin alıyor.
   ========================================================================== */

.mast {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper-100);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.mast[data-stuck='true'] {
  background: rgba(248, 248, 244, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line-100);
  box-shadow: 0 1px 0 rgba(18, 19, 15, 0.02);
}

.mast__in {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--bar-h);
}

/* ------------------------------------------------------------- LOGOTİP */

.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand__mark { width: 2rem; height: 2rem; color: var(--ink-900); flex: none; }
@media (min-width: 48rem) { .brand__mark { width: 2.375rem; height: 2.375rem; } }
.brand__mark svg { width: 100%; height: 100%; }

.brand__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink-900);
  text-transform: uppercase;
}
.brand__tag {
  display: none;
  margin-top: 0.22rem;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
}
@media (min-width: 30rem) { .brand__tag { display: block; } }

/* -------------------------------------------------------------- GEZİNME */

.nav { display: none; }
@media (min-width: 64rem) {
  .nav {
    display: flex; align-items: center; gap: clamp(var(--s3), 1.1vw, var(--s5));
    margin-inline: auto;
  }
}
.nav a {
  position: relative;
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink-700);
  padding-block: var(--s2);
  transition: color var(--fast);
}
.nav a:hover { color: var(--bronze-600); }
.nav a[aria-current='page'] { color: var(--ink-900); }
.nav a[aria-current='page']::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 1px;
  background: var(--ink-900);
}

/* ------------------------------------------------------------ SAĞ UÇLAR */

.mast__end { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex: none; }
@media (min-width: 64rem) { .mast__end { margin-left: 0; } }

.icon-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none;
  color: var(--ink-700);
  transition: color var(--fast);
}
.icon-btn:hover { color: var(--bronze-600); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

.mast__cta { display: none; }
@media (min-width: 80rem) { .mast__cta { display: inline-flex; } }

/* Dar ekranda menü düğmesi; 64rem'den itibaren gizli. */
.menu-btn { display: grid; }
@media (min-width: 64rem) { .menu-btn { display: none; } }

/* ==========================================================================
   2. MOBİL MENÜ — tam ekran kâğıt
   ==========================================================================
   Telefonda daraltılmış bir masaüstü menüsü değil: sayfanın üstünü kaplayan,
   aynı kâğıt zeminde, parmakla rahat gezilen bir dizin. Her satır 3rem;
   bölümler ayrılmış; arama en üstte, çünkü aranan şey çoğu zaman bir isim.
   ========================================================================== */

.drawer {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden;
  /* Panel kapalıyken ekranın sağına ötelenmiş duruyor; `overflow: hidden`
     olmazsa o öteleme belgeye yatay kaydırma ekliyor. */
  overflow: hidden;
}
.drawer[data-open='true'] { visibility: visible; }

.drawer__veil {
  position: absolute; inset: 0;
  background: rgba(18, 19, 15, 0.42);
  opacity: 0;
  transition: opacity var(--base);
}
.drawer[data-open='true'] .drawer__veil { opacity: 1; }

.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(23rem, 100%);
  display: flex; flex-direction: column;
  background: var(--paper-100);
  border-left: 1px solid var(--line-200);
  transform: translateX(100%);
  transition: transform var(--base) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}
.drawer[data-open='true'] .drawer__panel { transform: translateX(0); }

.drawer__head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--gutter);
  padding-top: calc(var(--s4) + env(safe-area-inset-top));
  background: var(--paper-100);
  border-bottom: 1px solid var(--line-100);
}

.drawer__body { padding: var(--s5) var(--gutter) 0; }

.drawer__label {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
  margin: var(--s6) 0 var(--s2);
}
.drawer__label:first-child { margin-top: 0; }

.drawer__link {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 3rem;
  border-bottom: 1px solid var(--line-100);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink-900);
}
.drawer__link[aria-current='page'] { color: var(--bronze-600); }
.drawer__link small {
  margin-left: auto;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
}
.drawer__link--sub { font-family: var(--serif); font-size: 1rem; min-height: 2.75rem; color: var(--ink-700); }

.drawer__foot { margin-top: auto; padding: var(--s6) var(--gutter) 0; }

body.nav-lock { overflow: hidden; }

/* ==========================================================================
   3. ARAMA KATMANI
   ==========================================================================
   Arama kutusu başlık bandını daraltmıyor: simgeye basınca bandın altından
   tek satırlık bir şerit açılıyor. Formun kendisi normal bir GET formu,
   JavaScript kapalıyken de /ara sayfasına gider.
   ========================================================================== */

.seek {
  display: none;
  border-bottom: 1px solid var(--line-100);
  background: var(--paper-200);
}
.seek[data-open='true'] { display: block; }

.seek form {
  display: flex; align-items: center; gap: var(--s3);
  padding-block: var(--s3);
}
.seek input {
  flex: 1; min-width: 0;
  border: 0; background: none;
  padding: var(--s3) 0;
  font-family: var(--display);
  font-size: clamp(1.125rem, 1rem + 1vw, 1.625rem);
  color: var(--ink-900);
}
.seek input::placeholder { color: var(--ink-400); }
.seek input:focus { outline: none; }
.seek button { flex: none; }

/* ==========================================================================
   4. MANŞET
   ==========================================================================
   Referanstaki açılış: solda etiket + manşet + giriş + düğme, sağda büyük
   sepya kolaj. Zemin kâğıttan bir ton koyu (#F3F1EC), altında ince bir çizgi.

   Telefonda sıra TERSİNE dönmüyor — görsel üstte, metin altında değil:
   önce metin, sonra görsel. Sebep: manşetin işi neyin anlatıldığını
   söylemek ve arşiv fotoğraflarının çoğu küçük ekranda tek başına bunu
   söyleyemiyor. Görsel hemen altında, ilk kaydırmada tamamen görünüyor.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--paper-200);
  border-bottom: 1px solid var(--line-100);
  overflow: hidden;
}

/* Kâğıdın dokusu: iki geniş, çok soluk huzme. Görsel dosyası yok. */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(151, 119, 76, 0.10) 0%, rgba(151, 119, 76, 0) 58%),
    radial-gradient(ellipse at 8% 90%, rgba(151, 119, 76, 0.07) 0%, rgba(151, 119, 76, 0) 52%);
  pointer-events: none;
}

.hero__in {
  position: relative;
  display: grid;
  gap: var(--s6);
  padding-block: var(--s6) var(--s7);
}
@media (min-width: 62rem) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: var(--s7);
    padding-block: var(--s7) var(--s8);
    min-height: 36rem;
  }
}

.hero__text { display: grid; gap: var(--s4); align-content: center; }

.hero__title {
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  text-wrap: balance;
  max-width: 14ch;
}
.hero__lede {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 46ch;
}

.hero__act {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5);
  margin-top: var(--s2);
}

/* Sayfa göstergesi: manşet kaç kayıttan hangisini gösteriyor. */
.hero__index {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-word);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
/*
 * `display: flex` kuralı tarayıcının kendi `[hidden] { display: none }`
 * kuralını eziyor. Betik kapalıyken gösterge GÖRÜNMELİ DEĞİL: çalışmayan
 * üç düğme, tam da düzeltmeye çalıştığımız hatanın kendisi olurdu.
 */
.hero__index[hidden] { display: none; }
.hero__bar { display: flex; align-items: center; gap: 0.4rem; }
.hero__bar span { display: block; width: 1.75rem; height: 2px; background: var(--line-200); }
.hero__bar span[data-on] { background: var(--ink-900); width: 2.5rem; }
/* Referanstaki numaralı gösterge: 01 · 02 · 03 */
/*
 * Hâneler arasındaki boşluk `gap` ile değil, düğmelerin KENDİ dolgusuyla
 * veriliyor. Görünüm birebir aynı (aradaki 16 piksel duruyor) ama dokunma
 * hedefi 18 pikselden 34 piksele çıkıyor — 18 piksellik bir hedef telefonda
 * ıskalanıyordu ve WCAG 2.2'nin 24 piksel alt sınırının da altındaydı.
 */
.hero__nums { display: flex; gap: 0; margin-left: var(--s2); }
/* Etkin olmayan hâne yine soluk ama okunur: `--line-300` 1,8 kontrast
   veriyordu (WCAG AA 4,5 ister). */
.hero__nums span { color: var(--ink-400); opacity: 0.75; }
.hero__nums span[data-on] { color: var(--ink-900); font-weight: 600; }

/* --------------------------------------------------------------- GÖRSEL */

.hero__art { position: relative; }
/*
 * Geniş ekranda görsel sağ kenara kadar taşıyor: referansta kolaj sayfanın
 * kenarında bitiyor, bir kutunun içinde değil. `max()` hem dar hem geniş
 * pencerede doğru payı veriyor.
 */
@media (min-width: 62rem) {
  /* Sarmalayıcının sağ payı sıfırlanıyor, görsel de ortalama payı kadar
     dışarı çekiliyor: sonuç tam olarak pencerenin sağ kenarı. */
  .hero__in { padding-right: 0; }
  .hero__art { margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2)); }
}
.hero__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-300);
}
@media (min-width: 62rem) { .hero__frame { aspect-ratio: 16 / 11; min-height: 28rem; } }

.hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /*
   * Arşiv fotoğrafları çok farklı kaynaklardan geliyor. Hafif bir sıcaklık
   * ve kontrast düzeltmesi hepsini aynı kâğıda oturtuyor. Sepya FİLTRESİ
   * değil: renk korunuyor, yalnızca doygunluk biraz alınıyor.
   */
  filter: saturate(0.82) contrast(1.05);
}

/*
 * Telefonda görsel iki kenara da taşıyor: dar ekranda 20 piksellik bir
 * kenar boşluğu, fotoğrafı bir kutuya hapsediyor ve manşetin gücünü alıyor.
 */
@media (max-width: 61.99rem) {
  .hero__art { margin-inline: calc(var(--gutter) * -1); }
}

/*
 * Görselin kâğıda karışması: sol ve üst kenarda kâğıt rengine geçiş.
 * YALNIZCA geniş ekranda — orada görsel metnin yanında duruyor ve sert bir
 * kenar iki sütunu birbirinden koparıyor. Telefonda metnin altında tek
 * başına duruyor; orada aynı geçiş solmuş bir fotoğraf gibi görünüyordu.
 */
/*
 * Referansta kolajın kenarları kâğıda KARIŞIYOR — bir kutu içinde durmuyor.
 * Aynı etki iki katmanla: `mask-image` kenarları eritiyor, üstteki gradyan
 * da sol yarıyı kâğıt rengine çekiyor ki metinle görsel arasında sert bir
 * sınır kalmasın.
 */
@media (min-width: 62rem) {
  .hero__frame {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 16%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 16%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
    mask-composite: intersect;
  }
  .hero__frame::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, var(--paper-200) 0%, rgba(243, 241, 236, 0.35) 22%, rgba(243, 241, 236, 0) 44%);
    pointer-events: none;
  }
}

/*
 * Referansın sağ üst köşesinde, kolajın yanında bir söz var. Orada kolajın
 * üst köşesi kâğıt; bizim manşet görselimiz o köşeyi de dolduruyor ve söz
 * fotoğrafın üstünde okunmuyordu. Okunurluk süsü yener: çizilmiyor.
 * (Slogan zaten logotipin altında duruyor.)
 */
.hero__pull { display: none; }

/* Manşette kapak yoksa: metin tek sütun, tipografi büyür. */
.hero--bare .hero__in,
.hero__slide--bare { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.hero--bare .hero__title,
.hero__slide--bare .hero__title { max-width: 18ch; }

/* --------------------------------------------------------- MANŞET GEÇİŞİ */
/*
 * Birden fazla manşet varsa her biri bir "slayt". Görünmeyen slayt `hidden`
 * ile tamamen kalkıyor: ne okunuyor, ne sekmeyle geziliyor, ne de yerinde
 * boşluk bırakıyor. Kaydırmalı bir şerit değil — üst üste duran iki düzen
 * yüksekliği sabitlemeyi gerektirirdi ve farklı uzunluktaki girişlerde
 * manşeti ya kırpardı ya da altında boşluk bırakırdı.
 *
 * Geçiş yalnızca opaklık + 6 pikselik bir kayma: düzen hesabı yaptırmayan
 * iki özellik. `prefers-reduced-motion` açıkken hiç oynamıyor.
 */
.hero__slide[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__slide { animation: hero-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes hero-in {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: none; }
  }
}

/*
 * Hâneler artık düğme. Görünüm aynı kalıyor (düğmenin kendi zemini ve
 * çerçevesi sıfırlanıyor), ama dokunma hedefi büyüyor: 1,5rem yükseklik
 * ve negatif pay, metni yerinden oynatmadan.
 */
.hero__nums button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.65rem 0.5rem;
  margin: -0.65rem 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-400);
  opacity: 0.75;
  cursor: pointer;
  transition: color var(--fast), opacity var(--fast);
}
.hero__nums button:hover { color: var(--bronze-600); opacity: 1; }
.hero__nums button[data-on] { color: var(--ink-900); font-weight: 600; opacity: 1; cursor: default; }
.hero__nums button:focus-visible { outline: 2px solid var(--bronze-500); outline-offset: 3px; }
.hero__bar span { transition: background-color var(--fast), width var(--fast); }

/* ==========================================================================
   5. DAL ŞERİDİ
   ==========================================================================
   Referanstaki ikon satırı: spor dalları, aralarında dikey ince çizgi, en
   sağda bir alıntı hücresi. Telefonda yatay kaydırılıyor — dört sütuna
   sıkıştırıp ikonları 18 piksele düşürmek yerine.
   ========================================================================== */

.branches {
  background: var(--paper-050);
  border-bottom: 1px solid var(--line-100);
}
.branches__in { display: flex; align-items: stretch; }

.branches__row {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.branches__row::-webkit-scrollbar { display: none; }

.branch {
  flex: none;
  display: grid; justify-items: center; align-content: center; gap: var(--s3);
  min-width: 6.5rem;
  padding: var(--s5) var(--s3);
  border-right: 1px solid var(--line-100);
  scroll-snap-align: start;
  text-align: center;
  transition: background var(--fast), color var(--fast);
}
@media (min-width: 62rem) { .branch { flex: 1; min-width: 0; } }
.branch:first-child { border-left: 1px solid var(--line-100); }
.branch:hover { background: var(--paper-000); color: var(--bronze-600); }

.branch__ico { width: 1.875rem; height: 1.875rem; color: var(--ink-900); stroke-width: 1.5; }
.branch:hover .branch__ico { color: var(--bronze-500); }
.branch__name {
  font-family: var(--serif);
  font-size: var(--t-meta);
  color: var(--ink-700);
  white-space: nowrap;
}
.branch[aria-current='page'] .branch__name { color: var(--bronze-600); font-weight: 600; }
/*
 * Referansta ikonun altında yalnızca dalın ADI var, kayıt sayısı yok.
 * Sayı şeridi bir istatistik tablosuna çeviriyordu; burada yaptığı iş
 * "hangi dallar var" sorusunu yanıtlamak.
 */
.branch__n { display: none; }

/* Şeridin sağ ucundaki alıntı hücresi — yalnızca geniş ekranda. */
.branches__say { display: none; }
@media (min-width: 75rem) {
  .branches__say {
    display: flex; align-items: center; gap: var(--s4);
    flex: none;
    width: 18rem;
    padding: var(--s4) 0 var(--s4) var(--s5);
    border-left: 1px solid var(--line-100);
  }
}
.branches__say .quote { font-size: var(--t-meta); line-height: 1.5; }

/* ==========================================================================
   6. BÖLÜM
   ========================================================================== */

.band { padding-block: var(--s7); }
@media (min-width: 62rem) { .band { padding-block: var(--s8); } }
.band--tint { background: var(--paper-200); border-block: 1px solid var(--line-100); }
.band--tight { padding-block: var(--s6); }

/* ==========================================================================
   7. ÖNE ÇIKANLAR IZGARASI
   ==========================================================================
   Referansın orta bloğu: solda büyük kart, ortada üç küçük kayıt, sağda
   "Tarihte Bugün" kutusu. Üç sütun 68rem'den itibaren; öncesinde sırayla
   alt alta ve her biri kendi içinde okunur.
   ========================================================================== */

.showcase { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 48rem) {
  .showcase { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .showcase__side { grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
  .showcase { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr) minmax(0, 0.8fr); }
  .showcase__side { grid-column: auto; }
}

/* ------------------------------------------------- BÜYÜK KART (yazı üstte) */

.lead {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-800);
  isolation: isolate;
}
.lead__media { position: relative; aspect-ratio: 4 / 5; }
@media (min-width: 48rem) { .lead__media { aspect-ratio: 3 / 4; } }
@media (min-width: 68rem) { .lead__media { aspect-ratio: 4 / 5; } }

.lead__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.06);
  transition: transform 700ms var(--ease);
}
.lead:hover .lead__media img { transform: scale(1.03); }

.lead__veil {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 13, 11, 0.92) 0%,
    rgba(12, 13, 11, 0.72) 24%,
    rgba(12, 13, 11, 0.16) 58%,
    rgba(12, 13, 11, 0) 82%
  );
}
.lead__body {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: var(--s3);
  padding: var(--s5);
}
@media (min-width: 68rem) { .lead__body { padding: var(--s6); } }

.lead__title {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: var(--track-head);
  color: #fff;
  text-wrap: balance;
}
.lead__excerpt {
  font-size: var(--t-meta);
  line-height: 1.55;
  color: rgba(246, 244, 238, 0.82);
  max-width: 48ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead .meta { color: rgba(246, 244, 238, 0.62); }
.lead .tagbox { background: rgba(12, 13, 11, 0.55); border-color: rgba(246, 244, 238, 0.4); color: #fff; }

/* Kapaksız büyük kart: aynı yer, kâğıt üzerinde. */
.lead--bare { background: var(--paper-000); border: 1px solid var(--line-100); }
.lead--bare .lead__media { display: none; }
.lead--bare .lead__body { position: static; padding: var(--s6); }
.lead--bare .lead__title { color: var(--ink-900); }
.lead--bare .lead__excerpt { color: var(--ink-500); }
.lead--bare .meta { color: var(--ink-400); }

/* ------------------------------------------- KÜÇÜK KAYIT (görsel + metin) */

.stack { display: grid; gap: 0; border: 1px solid var(--line-100); background: var(--paper-000); }

.brief {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4);
  border-bottom: 1px solid var(--line-100);
  transition: background var(--fast);
}
@media (min-width: 30rem) { .brief { grid-template-columns: 8.5rem minmax(0, 1fr); } }
/*
 * 48–68rem arası vitrin iki sütuna geçiyor ve yan sütun yalnızca ~270 px
 * kalıyor. Orada 8.5rem'lik görsel sütunu metne 85 px bırakıyordu; başlık
 * sığıyordu ama "Amerikan Futbolu" gibi uzun bir etiket sığmıyor ve belgeyi
 * 13 px taşırıyordu. Ölçü viewport'a değil, hücrenin gerçek genişliğine
 * bakmalı: bu aralıkta görsel sütunu daraltılıyor.
 */
@media (min-width: 48rem) and (max-width: 67.999rem) {
  .showcase .brief { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); gap: var(--s3); }
}
.brief:last-child { border-bottom: 0; }
.brief:hover { background: var(--paper-050); }

.brief__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-300);
}
.brief__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.brief__media--void {
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--line-300);
  background:
    repeating-linear-gradient(135deg, rgba(151,119,76,0.05) 0 1px, transparent 1px 8px),
    var(--paper-200);
}

/* `minmax(0, 1fr)` yalnızca SÜTUNU daraltıyor; ızgara çocuğunun kendi
   "otomatik en küçük boyutu" hâlâ içeriğinin min-content'i kadar. Uzun bir
   başlık (veya bölünmeyen bir kelime) bu yüzden sütunu taşırıyordu — 768 px'te
   belge 781 px oluyordu. `min-width: 0` o otomatik tabanı kaldırıyor,
   `grid-template-columns` ise iç satırları da aynı tabana bağlıyor. */
.brief__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--s2);
  align-content: start;
}
/* Izgara çocuğunun otomatik en küçük boyutu içeriğinin min-content'i kadar;
   `nowrap` bir etiket bu yüzden sütunu taşırabiliyor. */
.brief__body > * { min-width: 0; }
.brief .tagbox {
  max-width: 100%;
  /* Dar hücrede tek satırda kalmaktansa iki satıra insin. */
  white-space: normal;
  height: auto;
  min-height: 1.625rem;
  padding-block: 0.15rem;
}
.brief__title {
  font-family: var(--display);
  font-size: var(--t-h5);
  font-weight: 600;
  line-height: 1.24;
  color: var(--ink-900);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.brief:hover .brief__title { color: var(--bronze-600); }

/* ------------------------------------------------- YAN KUTU (çerçeveli) */

.box {
  border: 1px solid var(--line-200);
  background: var(--paper-000);
}
.box__head {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-100);
}
.box__mark { width: 1.75rem; height: 1.75rem; color: var(--bronze-500); flex: none; margin-top: 0.1rem; }
.box__title {
  font-family: var(--display);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-900);
}
.box__sub { font-family: var(--serif); font-size: var(--t-meta); color: var(--ink-500); }
.box__body { padding: var(--s3) var(--s5) var(--s5); }
.box__foot { padding: 0 var(--s5) var(--s5); }
.box__foot .btn { width: 100%; }

/* Tarihte Bugün satırları: yıl solda, olay sağda. */
.onthis { display: grid; }
.onthis li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-100);
}
.onthis li:last-child { border-bottom: 0; }
.onthis__year {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bronze-600);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.onthis__text { font-size: var(--t-meta); line-height: 1.5; color: var(--ink-700); }

/* ==========================================================================
   8. EFSANELER ŞERİDİ
   ==========================================================================
   Portre karolar, yatay kaydırmalı. Referansta yedi tane yan yana; burada
   kaç tane varsa o kadar, telefonda parmakla sürüklenerek.
   ========================================================================== */

.faces {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 8.5rem;
  gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--s2);
}
.faces::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) { .faces { grid-auto-columns: 10rem; gap: var(--s4); } }

.face {
  scroll-snap-align: start;
  display: block;
  border: 1px solid var(--line-100);
  background: var(--paper-000);
  transition: border-color var(--fast);
}
.face:hover { border-color: var(--bronze-line); }

.face__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-300);
}
.face__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) saturate(0.85) contrast(1.06);
  transition: filter var(--base), transform 600ms var(--ease);
}
.face:hover .face__media img { filter: grayscale(0) saturate(0.95); transform: scale(1.04); }
.face__media--void {
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 2.25rem;
  color: var(--line-300);
  background: linear-gradient(160deg, var(--paper-200), var(--paper-300));
}

.face__body { padding: var(--s3); text-align: center; }
.face__name {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-900);
}
.face:hover .face__name { color: var(--bronze-600); }
.face__kind {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Şerit başlığının sağındaki ok düğmeleri. */
.pager-btns { display: flex; gap: var(--s2); }
/*
 * Şerit zaten tamamen sığıyorsa oklar HİÇ basılmıyor.
 *
 * Eskiden iki ok her zaman duruyor, dört portre masaüstüne sığdığı için
 * ikisi de `disabled` oluyordu. %35 opaklık, "bu düğme şu an kapalı"
 * demeye yetmiyordu: okur tıklıyor, hiçbir şey olmuyor ve haklı olarak
 * "bozuk" diyordu. Betik şeridi ölçüp kutuyu gizliyor.
 */
.pager-btns[hidden] { display: none; }
.pager-btns button {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line-200);
  background: var(--paper-000);
  color: var(--ink-700);
  transition: border-color var(--fast), color var(--fast);
}
.pager-btns button:hover:not(:disabled) { border-color: var(--bronze-500); color: var(--bronze-600); }
.pager-btns button:disabled { opacity: 0.35; cursor: default; }
.pager-btns svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   9. KART IZGARASI (liste sayfaları)
   ========================================================================== */

.grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); } }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-100);
  background: var(--paper-000);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.card:hover { border-color: var(--line-200); box-shadow: var(--lift-2); }

.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-300);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 600ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__media--void {
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2.5rem; color: var(--line-300);
  background:
    repeating-linear-gradient(135deg, rgba(151,119,76,0.05) 0 1px, transparent 1px 9px),
    var(--paper-200);
}

.card__body { display: grid; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); flex: 1; align-content: start; }
.card__title {
  font-family: var(--display);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  text-wrap: balance;
}
.card:hover .card__title { color: var(--bronze-600); }
.card__excerpt {
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line-100); }

/* ==========================================================================
   10. SATIR LİSTESİ (son eklenenler, arşiv sicili)
   ========================================================================== */

.rows { border-top: 1px solid var(--line-100); }
.rows__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line-100);
  transition: background var(--fast);
}
@media (min-width: 62rem) {
  .rows__item {
    grid-template-columns: 6.5rem 4.5rem minmax(0, 1fr) 9rem;
    align-items: center;
    gap: var(--s5);
    padding-inline: var(--s3);
    margin-inline: calc(var(--s3) * -1);
  }
}
.rows__item:hover { background: var(--paper-050); }

.rows__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-300); }
.rows__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }

.rows__year {
  display: none;
  font-family: var(--display);
  font-size: 1.375rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 62rem) { .rows__year { display: block; } }
.rows__item:hover .rows__year { color: var(--bronze-600); }

.rows__main { min-width: 0; display: grid; gap: var(--s2); }
.rows__title {
  font-family: var(--display);
  font-size: var(--t-h5);
  font-weight: 600;
  line-height: 1.26;
  color: var(--ink-900);
}
.rows__item:hover .rows__title { color: var(--bronze-600); }
.rows__note {
  font-size: var(--t-meta);
  line-height: 1.55;
  color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 62rem) { .rows__note { -webkit-line-clamp: 1; } }

.rows__end {
  display: none;
  text-align: right;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
}
@media (min-width: 62rem) { .rows__end { display: grid; gap: 0.25rem; } }

/* ==========================================================================
   11. HİKÂYE SAYFASI
   ==========================================================================
   Sitenin asıl ürünü. Referansın dili burada da geçerli: kâğıt zemin,
   klasik serif manşet, ince çerçeveler, bronz vurgu.

   Sıra: künye yolu → etiket → manşet → giriş → künye satırı → kapak →
   metin → konular → kaynaklar. Kapak başlığın ÜSTÜNDE değil ALTINDA:
   klasik bir yayında önce ne okuyacağınızı, sonra fotoğrafı görürsünüz.
   ========================================================================== */

.read { padding-block: var(--s6) var(--s8); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--s5);
}
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--bronze-600); }
.crumbs svg { width: 0.75rem; height: 0.75rem; opacity: 0.6; }

.head-art { display: grid; gap: var(--s4); max-width: 52rem; }
.head-art__title {
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  text-wrap: balance;
}
.head-art__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-500);
  max-width: 46ch;
}

/* Künye satırı — çift çizgi arasında. */
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  padding-block: var(--s3);
  border-top: 1px solid var(--ink-900);
  border-bottom: 1px solid var(--line-100);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  color: var(--ink-500);
}
.byline__cat { color: var(--bronze-600); }
.byline__no { margin-left: auto; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* Kapak: tam genişlik değil, okuma sütunundan biraz taşan bir çerçeve. */
.cover { margin-top: var(--s6); }
.cover__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-300);
  border: 1px solid var(--line-100);
}
@media (min-width: 62rem) { .cover__frame { aspect-ratio: 21 / 9; } }
.cover__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) contrast(1.05); }
.cover__cap {
  margin-top: var(--s3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-400);
}

/* ------------------------------------------------------------------ METİN */

.prose {
  max-width: var(--read);
  margin: var(--s7) 0 0;
  font-family: var(--serif);
  font-size: var(--t-read);
  line-height: var(--lh-read);
  color: var(--ink-700);
}
.prose > * + * { margin-top: 1.35em; }
.prose p { text-wrap: pretty; }

/* İlk paragraf: klasik yayın girişi. */
.prose > p:first-child { font-size: 1.08em; color: var(--ink-900); }
.prose > p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: 700;
  padding: 0.06em 0.09em 0 0;
  color: var(--bronze-500);
}

.prose h2 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  margin-top: 2em;
}
.prose h3 {
  font-family: var(--display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.26;
  color: var(--ink-900);
  margin-top: 1.7em;
}

.prose a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--bronze-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--bronze-600); text-decoration-color: var(--bronze-600); }

.prose strong { font-weight: 700; color: var(--ink-900); }

.prose blockquote {
  margin-block: 2em;
  padding: var(--s2) 0 var(--s2) var(--s5);
  border-left: 2px solid var(--bronze-400);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink-900);
}

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: 0.45em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.4em; }
.prose ul > li::before {
  content: '';
  position: absolute; left: 0.3em; top: 0.72em;
  width: 0.45em; height: 1px;
  background: var(--bronze-500);
}
.prose ol { list-style: decimal; }
.prose ol::marker { color: var(--bronze-600); }

.prose figure { margin-block: 2.1em; }
.prose figcaption { margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-400); }
.prose hr { border: 0; height: 1px; background: var(--line-100); margin-block: 2.6em; }

/* ------------------------------------------------------- METİN SONRASI */

.after {
  max-width: var(--read);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-100);
}
.after + .after { margin-top: var(--s6); }
.after h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-600);
  margin-bottom: var(--s4);
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  display: inline-flex; align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--s4);
  border: 1px solid var(--line-200);
  background: var(--paper-000);
  font-size: var(--t-meta);
  color: var(--ink-700);
  transition: border-color var(--fast), color var(--fast);
}
.tag:hover { border-color: var(--bronze-500); color: var(--bronze-600); }

.sources { display: grid; gap: var(--s3); counter-reset: src; }
.sources li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s3);
  font-size: var(--t-meta);
  line-height: 1.55;
}
.sources li::before {
  counter-increment: src;
  content: counter(src, decimal-leading-zero);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--bronze-600);
  font-variant-numeric: tabular-nums;
  padding-top: 0.22em;
}
.sources a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--line-200);
  text-underline-offset: 2px;
  word-break: break-word;
}
.sources a:hover { text-decoration-color: var(--bronze-500); }
.sources .pub { display: block; font-size: var(--t-small); color: var(--ink-400); }

/* Okuma çizgisi — sayfanın en üstünde ince bir bronz şerit. */
.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 2px; background: transparent; pointer-events: none;
}
.progress span { display: block; height: 100%; width: 0; background: var(--bronze-500); }

/* Sonraki hikâye — koyu bant. */
.next {
  display: block;
  background: var(--ink-800);
  color: var(--on-dark);
  padding-block: var(--s6) var(--s7);
}
.next__k {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-300);
  margin-bottom: var(--s3);
}
.next__t {
  display: block;
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--track-head);
  color: #fff;
  max-width: 22ch;
}
.next:hover .next__t { color: var(--bronze-300); }
.next .meta { color: rgba(246, 244, 238, 0.55); margin-top: var(--s4); }

/* ==========================================================================
   12. EDİTORYAL SAYFA
   ========================================================================== */

.leaf { padding-block: var(--s7) var(--s9); }
.leaf__title {
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  max-width: 18ch;
}
.leaf__contact a {
  font-family: var(--display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--bronze-400);
  text-underline-offset: 4px;
  word-break: break-word;
}
.leaf__contact a:hover { color: var(--bronze-600); }

/* ==========================================================================
   13. ÇIKMAZ (404)
   ========================================================================== */

.deadend { display: grid; align-content: center; min-height: 62vh; padding-block: var(--s8); }
.deadend__code {
  font-family: var(--display);
  font-size: clamp(4.5rem, 3rem + 14vw, 11rem);
  font-weight: 700;
  line-height: 0.85;
  color: var(--paper-300);
  letter-spacing: -0.02em;
}
.deadend__title {
  margin-top: var(--s4);
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
}
.deadend__lede { margin-top: var(--s4); font-size: var(--t-lead); color: var(--ink-500); max-width: 40ch; }
.deadend__act { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ==========================================================================
   14. İNDEKS BAŞLIĞI (liste / dizin / dönem sayfaları)
   ========================================================================== */

.index {
  background: var(--paper-200);
  border-bottom: 1px solid var(--line-100);
  padding-block: var(--s6) var(--s6);
}
@media (min-width: 62rem) { .index { padding-block: var(--s7); } }

.index__grid { display: grid; gap: var(--s5); }
@media (min-width: 62rem) {
  .index__grid { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.8fr); align-items: end; gap: var(--s7); }
}
.index__title {
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  max-width: 18ch;
  text-wrap: balance;
}
.index__intro { margin-top: var(--s4); font-size: var(--t-lead); line-height: 1.6; color: var(--ink-500); max-width: 48ch; }

/* Sayaçlar: rakam büyük, etiket küçük. */
.tally { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-200); }
.tally__item { display: grid; gap: 0.15rem; }
.tally__n {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bronze-600);
  font-variant-numeric: tabular-nums;
}
.tally__k {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Arama kutusu — indeks başlığında. */
.find {
  display: flex; gap: var(--s2);
  border: 1px solid var(--line-200);
  background: var(--paper-000);
  padding: 0.3rem;
}
.find:focus-within { border-color: var(--bronze-500); }
.find input {
  flex: 1; min-width: 0;
  border: 0; background: none;
  padding: var(--s2) var(--s3);
  font-size: 1rem;              /* 16px: iOS odaklanınca sayfayı büyütmez */
  color: var(--ink-900);
}
.find input::placeholder { color: var(--ink-400); }
.find input:focus { outline: none; }
.find .btn { min-height: 2.5rem; padding-inline: var(--s4); }

/* Süzgeç/çip şeridi. */
.chips {
  display: flex; gap: var(--s2);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--s2);
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 62rem) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 2.5rem;
  padding: 0 var(--s4);
  border: 1px solid var(--line-200);
  background: var(--paper-000);
  font-size: var(--t-meta);
  color: var(--ink-700);
  white-space: nowrap;
  transition: border-color var(--fast), color var(--fast);
}
.chip:hover, .chip[aria-current='page'] { border-color: var(--bronze-500); color: var(--bronze-600); }
.chip__k { font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); }
.chip .count { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* Sayfalama. */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-200);
}
.pager__status { font-family: var(--sans); font-size: var(--t-small); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.pager__links { display: flex; gap: var(--s2); }

/* Boş durum. */
.empty {
  padding: var(--s8) var(--s5);
  text-align: center;
  border: 1px dashed var(--line-200);
  background: var(--paper-050);
  color: var(--ink-500);
}
.empty strong {
  display: block;
  font-family: var(--display);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--s2);
}

/* Dipnot. */
.note {
  margin-top: var(--s6);
  padding-left: var(--s4);
  border-left: 2px solid var(--line-200);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-400);
  max-width: 52rem;
}

/* ==========================================================================
   15. KONU DOSYASI BAŞLIĞI
   ========================================================================== */

.dossier {
  background: var(--paper-200);
  border-bottom: 1px solid var(--line-100);
  padding-block: var(--s6);
}
@media (min-width: 62rem) { .dossier { padding-block: var(--s7); } }

.dossier__head {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}
@media (min-width: 48rem) { .dossier__head { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s6); align-items: end; } }
@media (min-width: 62rem) { .dossier__head { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s7); } }
.dossier__head--bare { grid-template-columns: minmax(0, 1fr); }

.dossier__portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-300);
  border: 1px solid var(--line-200);
}
.dossier__portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.06); }

.dossier__name {
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--track-head);
  color: var(--ink-900);
  text-wrap: balance;
}
.dossier__lede { margin-top: var(--s4); font-size: var(--t-lead); line-height: 1.6; color: var(--ink-500); max-width: 54ch; }

.facts {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-200);
}
.fact { display: grid; gap: 0.2rem; }
.fact__k {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
}
.fact__v {
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.fact__v--bronze { color: var(--bronze-600); }

/* ==========================================================================
   16. KRONOLOJİ (dönemler)
   ========================================================================== */

.chrono { border-top: 1px solid var(--line-200); }
.chrono__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3) var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line-100);
  transition: background var(--fast);
}
@media (min-width: 48rem) { .chrono__row { gap: var(--s5); } }
.chrono__row:hover { background: var(--paper-050); }

.chrono__decade {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 6ch;
}
.chrono__row:hover .chrono__decade { color: var(--bronze-600); }

.chrono__track { position: relative; height: 0.4rem; background: var(--paper-300); }
.chrono__bar {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(to right, var(--bronze-500), var(--bronze-300));
}
.chrono__n {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   17. KONU LİSTESİ
   ========================================================================== */

.roll { border-top: 1px solid var(--line-200); }
.roll__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3) var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line-100);
  transition: background var(--fast);
}
@media (min-width: 62rem) { .roll__row { padding-inline: var(--s3); margin-inline: calc(var(--s3) * -1); } }
.roll__row:hover { background: var(--paper-050); }
.roll__name {
  font-family: var(--display);
  font-size: var(--t-h5);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-900);
}
.roll__row:hover .roll__name { color: var(--bronze-600); }
.roll__note {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.roll__n { justify-self: end; text-align: right; display: grid; gap: 0.15rem; }
.roll__n b {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bronze-600);
  font-variant-numeric: tabular-nums;
}
.roll__n span {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* İki eşit sütun. */
.duo { display: grid; gap: var(--s7); }
@media (min-width: 62rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); } }

/* Sayaç şeridi (arşiv merkezi). */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-100);
  border: 1px solid var(--line-100);
}
@media (min-width: 48rem) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figure { background: var(--paper-000); padding: var(--s5) var(--s4); display: grid; gap: 0.2rem; }
.figure__n {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.figure__k {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ==========================================================================
   18. ALT BİLGİ
   ========================================================================== */

.foot {
  background: var(--ink-800);
  color: rgba(246, 244, 238, 0.72);
  padding-block: var(--s8) var(--s6);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}
.foot__top { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .foot__top { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); } }

.foot__brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); color: #fff; }
.foot__brand svg { width: 2rem; height: 2rem; }
.foot__brand span {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.foot__note { font-size: var(--t-meta); line-height: 1.7; max-width: 34ch; color: rgba(246, 244, 238, 0.6); }

.foot h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-300);
  margin-bottom: var(--s4);
}
.foot ul { display: grid; gap: 0.7rem; }
.foot li a { font-size: var(--t-meta); color: rgba(246, 244, 238, 0.72); }
.foot li a:hover { color: var(--bronze-300); }

.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(246, 244, 238, 0.12);
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: rgba(246, 244, 238, 0.45);
}

/* Koyu bantta bir çağrı kutusu (arşiv merkezi / keşif). */
.callout {
  display: grid; gap: var(--s4);
  padding: var(--s6);
  background: var(--ink-800);
  color: var(--on-dark);
}
.callout h2 {
  font-family: var(--display);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.callout p { font-size: var(--t-meta); line-height: 1.6; color: rgba(246, 244, 238, 0.68); }
.callout .btn { justify-self: start; }

/* ------------------------------------------------- İNDEKS BAŞLIĞI EKLERİ */

.index__side { display: grid; gap: var(--s4); align-content: end; }
.hub__exits { display: flex; flex-wrap: wrap; gap: var(--s3); }
.deadend__seek { max-width: 32rem; }

/* Konu dosyasındaki "en yeni kayıt": tam genişlikte tek bir büyük kart. */
.lead--wide .lead__media { aspect-ratio: 16 / 9; }

/* ---------------------------------------------- HİKÂYE SAYFASI HİZASI */
/*
 * Klasik bir yayın sayfasında metin sütunu ORTADA durur; kapak ondan biraz
 * geniştir. Sayfa 62rem'lik bir sarmalayıcıda; künye, manşet ve metin
 * 41rem'de ortalanıyor, kapak sarmalayıcının tamamını kullanıyor.
 */
.read .crumbs,
.read .head-art,
.read .byline,
.read .prose,
.read .after { max-width: var(--read); margin-inline: auto; }
.read .cover { max-width: none; }

/* Bölüm üst etiketi — kısa bir bronz çizgi ve versal bir kelime. */
.rule__eyebrow {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-600);
}
.rule__eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: var(--bronze-500); }

/* Efsaneler şeridi ve yanındaki söz — referansın sağ kenarı. */
.faces-wrap { display: grid; gap: var(--s5); }
@media (min-width: 75rem) {
  .faces-wrap { grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; gap: var(--s7); }
}
.faces-say { display: none; }
@media (min-width: 75rem) {
  .faces-say {
    display: block;
    padding-left: var(--s5);
    border-left: 1px solid var(--line-200);
    font-size: var(--t-lead);
    line-height: 1.5;
  }
}

/* ==========================================================================
   19. SPOR DALLARI
   ==========================================================================
   Şerit ana sayfada, ızgara /spor-dallari sayfasında. İkinci bir taksonomi
   yok: ikisi de `categories` tablosundan besleniyor.
   ========================================================================== */

/* Katalogda ikonu olmayan dal: jenerik kupa DEĞİL, baş harf. */
.branch__letter,
.branch-card__letter {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--ink-400);
}

/* Şeridin sonundaki "tüm dallar" hücresi. */
.branch--all .branch__name { color: var(--bronze-600); font-weight: 600; }
.branch--all .branch__ico { color: var(--bronze-500); }

/*
 * Şerit 14 dala kadar çıkabiliyor. Telefonda yatay kaydırma zaten vardı;
 * burada `scroll-snap` eklendi ve hücre genişliği sabitlendi ki parmak
 * bıraktığında şerit yarım bir ikonun üstünde durmasın.
 */
/*
 * TELEFON: yatay şerit, parmakla sürüklenir, `scroll-snap` ile durur.
 * Hücre genişliği sabit; parmak bırakıldığında şerit yarım bir ikonun
 * üstünde kalmıyor. Dokunma hedefi 6.5rem × 5.5rem — 44 pikselin epey
 * üstünde.
 */
.branches__row { scroll-snap-type: x mandatory; }
.branch { scroll-snap-align: start; }

/*
 * MASAÜSTÜ: kaydırma yok, IZGARA.
 *
 * Eski kural hücrelere `flex: 1` veriyordu: altı dalla ferah, on dört dalla
 * ezikti. Sonraki deneme sabit genişlik + kaydırmaydı; bu sefer de dalların
 * yarısı ekranın dışında kalıyor ve kaydırılabildiği belli olmuyordu.
 *
 * `auto-fit` + `minmax` ikisini de çözüyor: bütün dallar görünür, hücreler
 * eşit, satır sayısı pencereye göre kendiliğinden ayarlanıyor. On dört dal
 * 1440'ta iki satır; kalabalık değil, düzenli.
 */
@media (min-width: 62rem) {
  .branches__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0;
    overflow: visible;
  }
  .branch {
    min-width: 0;
    border-right: 1px solid var(--line-100);
    border-bottom: 1px solid var(--line-100);
  }
  .branch:first-child { border-left: 1px solid var(--line-100); }
  /* Izgarada "ilk hücre" satır başı demek değil; sol kenarı hepsine ver. */
  .branches__row > .branch { border-left: 1px solid var(--line-100); margin-left: -1px; }
}

/* --------------------------------------------- /spor-dallari ızgarası */

.branch-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .branch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.branch-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  min-height: 5.5rem;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line-100);
  background: var(--paper-000);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.branch-card:hover { border-color: var(--line-200); box-shadow: var(--lift-2); }

.branch-card__ico {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--line-100);
  background: var(--paper-100);
  color: var(--ink-900);
}
.branch-card:hover .branch-card__ico { border-color: var(--bronze-line); color: var(--bronze-600); }
.branch-card__ico svg { width: 1.625rem; height: 1.625rem; }

.branch-card__body { display: grid; gap: 0.2rem; min-width: 0; }
.branch-card__name {
  font-family: var(--display);
  font-size: var(--t-h5);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
}
.branch-card:hover .branch-card__name { color: var(--bronze-600); }
.branch-card__note {
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.branch-card__n { text-align: right; display: grid; gap: 0.1rem; }
.branch-card__n b {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bronze-600);
  font-variant-numeric: tabular-nums;
}
.branch-card__n span {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --------------------------------------------- /spor-tarihi: otorite ağacı */
/*
 * Kümeler sütunlara bölünüyor; her sütun bir ana merkez. Telefonda alt alta,
 * geniş ekranda `auto-fit` ile kendiliğinden sığdığı kadar sütun. Sayılar
 * sağa yaslı: göz aşağı inerken kapsamı tek bakışta okuyor.
 */
.pillars {
  display: grid;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
  .pillars { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s6); }
}
.pillars__head {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-600);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-200);
}
.pillars__list { list-style: none; margin: 0; padding: 0; }
.pillars__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-100);
  font-family: var(--serif);
  font-size: var(--t-meta);
}
.pillars__list a { color: var(--ink-800); text-decoration: none; }
.pillars__list a:hover { color: var(--bronze-600); text-decoration: underline; text-underline-offset: 0.2em; }
.pillars__list span { color: var(--ink-400); }
.pillars__list b { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-400); }