/* Sayfa stilleri.
 *
 * Bütün renk, yazı tipi ve süre değerleri tokens.css içindeki adlandırılmış
 * değişkenlerden gelir. Bu dosyada satır içi renk yoktur.
 *
 * ── Okuma sırası ─────────────────────────────────────────────────────────
 *  1 temel · 2 atmosfer · 3 hareket · 3b kayan bant · 4 bant & başlık · 5 hero
 *  6 portre · 7 zaman şeridi · 8 ara söz · 9 filtre & defter · 10 kitaplar
 * 11 yazı & iz · 12 basın · 13 ses · 14 ölçüm
 * (15 · ziyaretçi defteri 2026-08-31'de kaldırıldı)
 * 16 iletişim & künye · 17 yuva · 18 palet · 19 sayfa · 20 duyarlı
 * 21 imleç & mürekkep · 22 azaltılmış hareket
 */

/* ══════════════════════════════════════════════════════════ 1 · TEMEL ═══ */

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

html {
  overflow-x: clip;            /* clip — hidden değil: sticky'yi bozmaz */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 400;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
figure { margin: 0; }

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}
button { cursor: pointer; text-align: inherit; }

/* Odak halkası hiçbir zaman animasyonlanmaz ve hiçbir zaman kaldırılmaz —
   klavyeyle gezen kişi nerede olduğunu her an görmek zorundadır. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Kaydırma çubuğu da sahnenin parçası. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-sunk); }
::-webkit-scrollbar-thumb {
  background: oklch(from var(--accent) l c h / 0.22);
  border: 3px solid var(--surface-sunk);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: oklch(from var(--accent) l c h / 0.42); }
html { scrollbar-width: thin; scrollbar-color: var(--line) var(--surface-sunk); }

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-lg);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-meta);
  font-size: var(--text-sm);
}
.skip:focus { left: var(--space-md); top: var(--space-md); }

/* ═════════════════════════════════════════════════════ 2 · ATMOSFER ═══ */

/* Film greni. Küçük bir gürültü döşemesi altı adımda kaydırılır — göz bunu
   sürekli titreşim olarak okur, oysa tek bir görsel vardır. */
.gren {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.032;
  background-repeat: repeat;
  animation: gren-oyna 1.1s steps(6) infinite;
  transition: opacity var(--dur-2) var(--ease-out);
}

/* Hero ekrandayken atmosfer katmanları kapanır — video net kalsın. */
.gren[data-kapali='true'],
.isik[data-kapali='true'] { opacity: 0; }
@keyframes gren-oyna {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-3%, 2%, 0); }
  33%  { transform: translate3d(2%, -3%, 0); }
  50%  { transform: translate3d(-2%, -2%, 0); }
  66%  { transform: translate3d(3%, 1%, 0); }
  83%  { transform: translate3d(-1%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* İmleç ışığı. `screen` yalnızca karanlığı açar: zaten parlak olan metne
   neredeyse hiç dokunmaz, arka planı kaldırır. Kontrast bu yüzden bozulmaz. */
.isik {
  position: fixed;
  top: 0;
  left: 0;
  width: 52rem;
  height: 52rem;
  margin: -26rem 0 0 -26rem;
  z-index: var(--z-raised);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.42;
  background: radial-gradient(circle closest-side, var(--accent-glow) 0%, transparent 70%);
  transition: opacity var(--dur-2) var(--ease-out);
}

/* ══════════════════════════════════════════════════════ 3 · HAREKET ═══ */

/* Gizleyen her kural `[data-hareket='acik']` altındadır. Bu niteliği yalnızca
   js/motion.js koyar. Betik yüklenmez ya da ondan önce bir hata atılırsa
   sayfa hareketsiz ama TAM görünür kalır — hiçbir metin animasyona bağlı
   olarak kaybolmaz. Karanlık bir sayfada bu, boş bir ekranla dolu bir ekran
   arasındaki farktır. */

/* PERDE — metin maskenin altından yukarı sıyrılır. Satırlar js/motion.js
   içinde ölçülüp sarmalanır; buradaki iş yalnızca geçişi tanımlamaktır. */
.perde__s { display: block; overflow: hidden; }
.perde__i { display: block; }

/* Satırlara bölme yazı tipleri yerleşene kadar bekler; o aralıkta hedef
   saklanır ki metin görünüp tekrar kaybolmasın. */
[data-hareket='acik'] .perde--bekle { opacity: 0; }

[data-hareket='acik'] .perde__i {
  transform: translate3d(0, 108%, 0);
  transition: transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--sira, 0) * 85ms);
}
[data-hareket='acik'] [data-perde].is-acik .perde__i { transform: translate3d(0, 0, 0); }

/* Blok kipi: satırlara bölünemeyen (iç biçimlemesi olan) öğeler bir bütün
   olarak yükselir. */
[data-hareket='acik'] .perde--blok {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}
[data-hareket='acik'] .perde--blok.is-acik { opacity: 1; transform: none; }

/* DERİNLİK — kaydırmaya bağlı öteleme. Değer js tarafından yazılır. */
[data-hareket='acik'] [data-derinlik] { transform: translate3d(0, var(--kay, 0px), 0); }

/* ÖLÇÜ — kılcal çizgi kendini soldan sağa çizer. */
[data-hareket='acik'] [data-cizil] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
[data-hareket='acik'] [data-cizil].is-cizili { transform: scaleX(1); }

/* ÖLÇÜ — eğri çizgi için aynı ilke: `scaleX` düz çizgide işe yarar, eğride
   deforme eder; SVG karşılığı `stroke-dashoffset`dir. `pathLength="1"`
   sayesinde gerçek yay uzunluğu ölçmeye gerek kalmaz. Aynı gözlemci
   (`olcuKur`, js/motion.js) tetikler, aynı `.is-cizili` sınıfını yazar. */
[data-hareket='acik'] [data-cizil-yol] path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1px;
  transition: stroke-dashoffset var(--dur-3) var(--ease-out);
}
[data-hareket='acik'] [data-cizil-yol] circle {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  transition-delay: calc(var(--dur-3) * 0.7);
}
[data-hareket='acik'] [data-cizil-yol].is-cizili path { stroke-dashoffset: 0; }
[data-hareket='acik'] [data-cizil-yol].is-cizili circle { opacity: 1; }

/* ═════════════════════════════════════════════════ 3b · KAYAN BANT ═══ */

/* Sürekli kayan tek şerit — `.gren` gibi kaydırmadan bağımsız kendi
   döngüsünde çalışır, `[data-hareket]`e bağlı DEĞİLDİR: motion.js hiç
   yüklenmese bile kayar (ya da azaltılmış hareket isteniyorsa durur).
   İçerik js/app.js tarafından iki kez art arda basılır; CSS yalnızca
   %50 öteler, dikiş kaybolur. Kayan kopya `aria-hidden`dir — ekran
   okuyucu `.marquee`nin kendi `aria-label`ını okur. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-kay var(--marquee-dur, 38s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:has(:focus-visible) .marquee__track { animation-play-state: paused; }

@keyframes marquee-kay {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.marquee__item {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-inline-end: var(--space-2xl);
  white-space: nowrap;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.marquee__kind {
  color: var(--accent);
  font-weight: 500;
}

/* ─── hero varyantı: sahnenin üst kenarına oturan şerit (yalnızca kitaplar) ─── */
.reel__ticker {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-raised);
  padding-block: var(--space-lg);
  padding-inline: var(--gutter);
  background: linear-gradient(to bottom, var(--scrim), transparent);
  border-bottom: var(--rule-hair) solid oklch(from var(--text) l c h / 0.14);
}
.reel__ticker .marquee__item { font-size: var(--text-md); color: var(--text-3); }

/* ─── künye varyantı: özgeçmişin başında, şeritten önce ─── */
.marquee--kunye {
  margin-bottom: var(--space-2xl);
  padding-block: var(--space-xl);
  border-block: var(--rule-hair) solid var(--line-2);
}
.marquee--kunye .marquee__item {
  padding-inline-end: var(--space-3xl);
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════ 4 · BANT & BAŞLIK ═══ */

.band {
  position: relative;
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
  background: var(--band-tone, var(--surface));
}

/* ── Açık bant ────────────────────────────────────────────────────────────
   Sayfa siyah–beyaz dönüşümlü ilerler: hero siyah, altındaki bant beyaz,
   onun altındaki siyah… Bantlar arasında ayırıcı çizgi YOKTUR; kontrastın
   kendisi ayırıcıdır.

   Tek bir şey yapılır: temel tokenlar bu bantta yeniden tanımlanır. Bütün
   bileşenler zaten `var(--text)`, `var(--line)`, `var(--accent)` üzerinden
   çalıştığı için hiçbiri ayrıca yazılmaz — tokenların varlık sebebi budur.

   Değerler ölçülerek seçildi. Açık zeminde eşik koyu zemindekinden ÇOK daha
   çabuk kaybedilir: aynı vurgu, siyah üstünde 9:1 iken beyaz üstünde 2:1'e
   düşer. Bu yüzden açık bantta vurgu koyultulur, sönük metin koyultulur. */
.acik {
  /* Hero videosu 2026-08-07'de değişti; palet baştan ölçüldü (bkz.
     tokens.css tepesi). Zemin artık kumlu/haki bir sıcaklık taşır (hue 80,
     videonun ortalama/baskın rengi) — buz-mavisi değil, ısıtılmış kağıt
     gibi bir açık ton. Koyu metin AYNI hue ailesinde kalır, tersine dönmüş
     aynı mantık. Vurgu ayrı ölçülen hue 50'de (kehribar/pas) — açık
     zeminde okunsun diye koyu ve doygun çekilir; koyu banttaki gibi açık
     değildir. Kontrast tuval piksel okumasıyla yeniden ÖLÇÜLDÜ: en sönük
     metin en açık yüzeye karşı 6.60:1, vurgu zemine karşı 8.03:1. */
  --surface:        oklch(96%   0.022 80);
  --surface-2:      oklch(93.5% 0.028 80);
  --surface-raised: oklch(99%   0.010 80);
  --surface-sunk:   oklch(90%   0.032 80);
  --surface-void:   oklch(96%   0.022 80);

  --text:       oklch(21% 0.035 80);
  --text-2:     oklch(33% 0.032 80);
  --text-3:     oklch(44% 0.028 80);
  --text-faint: oklch(47% 0.024 80);

  --line:     oklch(45% 0.06 80 / 0.32);
  --line-2:   oklch(45% 0.06 80 / 0.17);
  --line-lit: oklch(45% 0.09 80 / 0.58);

  --accent:      oklch(42% 0.17 50);
  --accent-lit:  oklch(34% 0.15 50);
  --accent-deep: oklch(55% 0.13 50);
  --accent-ink:  oklch(98% 0.010 50);
  --accent-wash: oklch(42% 0.17 50 / 0.08);
  --accent-glow: oklch(50% 0.16 50 / 0.20);

  --scrim:       oklch(96% 0.010 80 / 0.72);
  --scrim-solid: oklch(97% 0.008 80 / 0.94);
  --focus:       oklch(38% 0.17 50);

  /* Görseller karanlık bantta kısılır; açık bantta kısılmaz. */
  --img-kis: none;

  background: var(--surface);
  color: var(--text-2);
}

/* ── Özgeçmiş: beyaz zemin ────────────────────────────────────────────────
   Kullanıcı isteğiyle (2026-08-07, önce altın denendi sonra beyaza
   çevrildi) bu bant `.acik`'in krem zemini yerine salt beyaz kullanır —
   metin/çizgi/vurgu mantığı `.acik`'ten miras kalır. `--text-3`/
   `--text-faint` altın zemin için koyultulmuştu (L40%/L42%); beyaz krem
   (L96%) ve altından (L80%) da açık olduğu için kontrastları hâlâ
   güvenli, tekrar gevşetmeye gerek yok. */
.band--bio.acik {
  --surface:    var(--surface-bio);
  --text-3:     oklch(40% 0.028 80);
  --text-faint: oklch(42% 0.024 80);
}

/* ── Basın: gazete kağıdı ─────────────────────────────────────────────────
   Bant 2026-08-24'te karanlıktan açığa çevrildi (kullanıcı isteği: siyah
   zemin okumayı zorluyor). Zemin `.acik`in kreminden bir tık daha beyaz
   ve daha nötr (`--surface-press`), bu yüzden `--text-3`/`--text-faint`
   burada özellikle GEVŞETİLMEDİ: daha açık zemin, aynı metin, daha yüksek
   oran. Ölçüldü — bkz. § 12 başındaki not. */
.band--press.acik { --surface: var(--surface-press); }

/* Sesli kayıtlar bandı 2026-08-24'te basının üstüne taşındı ve iki KREM
   bant (Kitaplar → Sesli Kayıtlar) yan yana düştü; sayfa bantları çizgiyle
   değil TONLA ayırdığı için sınır kayboldu. Bu bant kendi `--tone-audio`
   niyetini (bir kademe koyu krem) açık kipte de uygular: 96% → 93.5% →
   98% (basının kağıdı) sırası üç sınırı da görünür kılar. */
.band--audio.acik { --surface: var(--surface-2); }

/* Karanlık bantta görseller sahneye oturması için kısılır. Tek yerden
   yönetilir ki açık bantta tek satırla iptal edilebilsin.

   Kısma yalnızca fare/hassas işaretçili cihazlarda uygulanır: geri açılışı
   `:hover`'a bağlıdır ve dokunmatikte hover hiç tetiklenmez. Koruma
   olmadan dokunmatik ziyaretçi (mobil trafiğin çoğunluğu) hiçbir görseli
   gerçek renginde göremezdi — js/motion.js'teki `inceImlec` denetimiyle
   aynı mantık (yalnızca `hover: hover and pointer: fine`de çalışır). */
:root { --img-kis: none; }
@media (hover: hover) and (pointer: fine) {
  :root { --img-kis: saturate(0.7) brightness(0.82); }
}

.band--portre  { padding-block: var(--space-4xl) var(--space-3xl); --band-tone: var(--tone-portre); }
.band--bio     { --band-tone: var(--tone-bio); }
.band--work    { --band-tone: var(--tone-work); }
.band--books   { padding-block: var(--space-4xl) var(--space-3xl); --band-tone: var(--tone-books); }
.band--media   { --band-tone: var(--tone-media); }
.band--press   { --band-tone: var(--tone-press); }
.band--audio   { padding-block: var(--space-3xl) var(--space-4xl); --band-tone: var(--tone-audio); }
.band--impact  { --band-tone: var(--tone-impact); }
.band--book    { padding-block: var(--space-3xl) var(--space-4xl); --band-tone: var(--tone-guest); }

.wrap { max-width: var(--page-max); margin-inline: auto; }
.wrap--narrow { max-width: 48rem; }

/* İki sütun / blok — dolu vurgu-mavisi bir şerit, başlık ve not sütununun
   solunda durur. Bandın kendi rengi ne olursa olsun (koyu ya da açık) blok
   her zaman `--accent` dolgusunu taşır; tek değişen zeminin tonudur. */
.head {
  display: grid;
  grid-template-columns: clamp(2.25rem, 4vw, 3.5rem) 1fr;
  column-gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.head__mark {
  background: var(--accent);
  min-height: 100%;
}

.head__col { max-width: var(--measure); }

.head__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.head__note {
  margin-top: var(--space-lg);
  max-width: var(--measure-narrow);
  font-size: var(--text-md);
  color: var(--text-3);
}

/* Ortalı başlık — yalnızca simetrik duran bölümlerde (zaman şeridi). Blok
   düzenini almaz: altındaki dikey rayla ortalı simetri kurar, .orn süsü
   zaten kendi vurgu işaretini taşır. */
.head--mid {
  display: block;
  max-width: none;
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.head--mid .head__note { margin-inline: auto; }

.head__title--wide {
  font-family: var(--font-meta);
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em;   /* son harfin aralığı sağda boşluk bırakmasın */
  /* `.head__title`in miras bıraktığı `--leading-tight` (0.94) büyük serif
     başlıklar için ölçüldü; bu daha küçük harf-aralıklı varyantta Türkçe
     noktalı harfleri (İ, ö) perde perdesinin `overflow: hidden` kutusunun
     üstünden keser. Bu varyant kendi satır yüksekliğini alır. */
  line-height: var(--leading-snug);
}

/* Başlığın üstündeki çizgi–işaret–çizgi süsü. Tek dekoratif öğe. */
.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.orn__rule {
  width: 5.5rem;
  height: var(--rule-hair);
  background: linear-gradient(to right, transparent, var(--line-lit));
}
.orn__rule:last-child { background: linear-gradient(to left, transparent, var(--line-lit)); }
.orn__mark {
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--accent);
}

/* Bölüm içi ara başlık. */
.sub {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--line-2);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-2xl) var(--space-3xl);
  align-items: start;
}

/* ═══════════════════════════════════════════════════════ 5 · HERO ═══ */

/* Sabit tam ekran sahne — kaydırmaya bağlı HİÇBİR hareket yoktur (kullanıcı
   isteği). Görsel/canvas durağan durur; isim sabit durur.
   `.reel__stage` bilerek `position: relative`dir, `sticky` DEĞİL:
   section zaten tam 1 ekran yüksekliğinde olduğu için sticky bir ebeveynde
   "yapışma payı" hiç kalmaz — kullanıcı 1 piksel kaydırır kaydırmaz sahne
   erken kaymaya başlar. Normal akış, sahnenin section ile birlikte tek
   parça hareket etmesini sağlar. */
.reel {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--surface-void);
}

.reel__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

.reel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Görsel moduna geçildiğinde canvas kaldırılır ve tersi — ikisi asla üst
   üste binmez; sürücü seçimi js/reel.js içinde yapılır.

   Görüntünün üstünde perde/gren/sinematik gölge YOKTUR — sahne net kalsın
   diye bilinçli bir seçim, hâlâ geçerli. Yazının da gölgesi yoktur (kullanıcı
   isteği); okunabilirlik boyut ve konumdan gelir. İki istisna kullanıcı
   isteğiyle sonradan eklendi (2026-08-03): sağda cam kısayol sütunu
   (`.reel__nav`) ve altta kayan bant (`.reel__ticker`) — ikisi de sahnenin
   kendisine değil yalnızca kenarlarına oturur, video alanının ortası hâlâ
   çıplak kalır. */

/* Kesilmiş portre — arka planı olmayan PNG, sahnenin sağ-alt boşluğuna
   oturur (isim sol üstte, nav sağ kenarda; ikisiyle de çakışmaz). Diğer
   fotoğraflarla aynı kısma tabidir (`--img-kis`) ki sahneye ait görünsün.
   Giriş kaydırmadan bağımsız, TEK seferlik bir animasyon — nav/bant gibi
   "kendi döngüsünde" katmanlardan biri, motion.js'in üç ilkesine dahil
   değil çünkü scroll'a hiç bağlı değil. */
.reel__figure {
  position: absolute;
  right: clamp(7rem, 19vw, 15rem);
  bottom: 0;
  z-index: 1;
  height: min(94%, 58rem);
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  filter: var(--img-kis);
  animation: figur-gir var(--dur-4) var(--ease-out) 200ms both;
}

@keyframes figur-gir {
  from { opacity: 0; transform: translate3d(0, 4%, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel__figure { animation: none; opacity: 1; }
}

@media (max-width: 47.99rem) {
  .reel__figure {
    left: 0;
    right: 0;
    margin-inline: auto;
    height: 72%;
    max-width: 82vw;
  }
}

.reel__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gutter);
  text-align: left;
}

/* İmleç merceği — yalnızca hero'da, fareyle gezinirken sahneyi "bozuyormuş"
   hissi verir. Renk ters çevrilmez (yüzde çirkin duruyordu) — bunun yerine
   sinyal bozulması gibi grileşme + kontrast/parlaklık sıçraması: bir analog
   yayının o noktada koptuğu izlenimi. z-index isim/nav/bant'ın (10) altında,
   video/figürün üstünde durur — metne hiç değmez. */
.reel__interfere {
  position: absolute;
  top: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  z-index: 2;
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;
  backdrop-filter: grayscale(0.85) contrast(1.3) brightness(1.12);
  -webkit-backdrop-filter: grayscale(0.85) contrast(1.3) brightness(1.12);
  mask-image: radial-gradient(circle, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 100%);
  transition: opacity var(--dur-1) var(--ease-out);
}

.reel__name {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

/* İsmin altındaki canlı çizgi — vurgu rengi, hafif ışımalı (`.mile__dot`nun
   açık durumuyla aynı ilke). Sabit durur, kaydırmaya da tekrar bir giriş
   animasyonuna da bağlı değil. */
.reel__rule {
  display: block;
  width: 4rem;
  height: var(--rule-thick);
  margin-block: var(--space-sm) var(--space-xs);
  background: var(--accent);
  box-shadow: 0 0 14px 1px var(--accent-glow);
}

.reel__title {
  font-family: var(--font-meta);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-2);
}

/* Sağda dikey duran cam düğme sütunu — bölümlere hızlı erişim. Sahnenin
   video/canvas'ı hâlâ arkasında seçilir (`backdrop-filter`); `.dock`tan
   ayrı bir bileşendir çünkü `.dock` yalnızca hero'dan sonra belirir. */
.reel__nav {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transform: translateY(-50%);
}

.reel__nav__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  overflow: hidden;
  padding: var(--space-lg) var(--space-2xl);
  border: var(--rule-hair) solid var(--glass-border);
  border-left: var(--rule-thick) solid transparent;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-2);
  font-family: var(--font-meta);
  font-size: var(--text-lg);
  text-align: left;
  white-space: nowrap;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.reel__nav__btn:hover,
.reel__nav__btn:focus-visible {
  background: var(--glass-bg-hover);
  border-color: var(--accent);
  border-left-color: var(--accent);
  color: var(--text);
  transform: translate3d(-6px, 0, 0);
  box-shadow: 0 16px 34px -18px var(--accent-glow);
}
.reel__nav__btn:active { transform: translate3d(-2px, 0, 0) scale(0.98); }

/* Düğmenin altında imleci izleyen bir ışık — `.isik`/`.reel__interfere`
   ile aynı fikir (sahne fareye tepki verir), burada tek bir düğmenin
   içine hapsolmuş hâli. Konum js/motion.js'teki `dugmeIsigiKur()`
   tarafından `--isik-x`/`--isik-y` olarak yazılır; JS hiç çalışmazsa
   konum ortada sabit kalır. Yalnızca ince-işaretçili, hover destekleyen
   cihazlarda görünür (`isikKur`'daki `inceImlec` denetimiyle aynı ilke) —
   dokunmatikte hiç render edilmez. Yazı `.reel__nav__label` ile ayrı bir
   katmanda üstte durur, ışık metnin altından geçer. */
.reel__nav__label { position: relative; z-index: 1; }

/* Etiketin ardından beliren ok — `.ledger__go`/`.clip__go`nun aynı "gel-git"
   dilinin hero'daki karşılığı: dinlenme hâlinde kısılmış, üzerine gelince
   yerine kayan bir yön işareti. Yeni bir hareket türü değil, var olan
   göstergenin burada tekrarı. */
.reel__nav__arrow {
  position: relative;
  z-index: 1;
  flex: none;
  opacity: 0;
  transform: translate3d(-6px, 0, 0);
  color: var(--accent);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.reel__nav__btn:hover .reel__nav__arrow,
.reel__nav__btn:focus-visible .reel__nav__arrow {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .reel__nav__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(
      circle 160px at var(--isik-x, 50%) var(--isik-y, 50%),
      var(--accent-glow) 0%, transparent 70%);
    transition: opacity var(--dur-1) var(--ease-out);
    pointer-events: none;
  }
  .reel__nav__btn:hover::before,
  .reel__nav__btn:focus-visible::before { opacity: 1; }
}

@media (max-width: 47.99rem) {
  .reel__nav {
    top: auto;
    bottom: var(--space-2xl);
    right: var(--gutter);
    left: var(--gutter);
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .reel__nav__btn { padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); }
}

/* ═════════════════════════════════════════════════════ 6 · PORTRE ═══ */

.portre {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-2xl) var(--space-4xl);
  align-items: center;
}

.portre__fig { position: relative; }

/* Fotoğraf karanlığın içinden çıkar: mavi kılcal çerçeve, dışa doğru bir
   ışıma, üstünde hafif bir karartma. Fotoğraf sahneye ait olur. */
.portre__img {
  width: 100%;
  filter: var(--img-kis);
  border: var(--rule-hair) solid var(--line);
  box-shadow:
    0 0 0 1px var(--surface-void),
    0 60px 90px -60px oklch(from var(--accent) l c h / 0.35),
    0 30px 70px -40px oklch(0% 0 0 / 0.9);
  transition: filter var(--dur-2) var(--ease-out);
}
.portre__fig:hover .portre__img { filter: none; }

/* Köşelik — fotoğrafın dört köşesinin dışında duran, kaydırma sahneye
   girdiğinde kendini çizen ince bir kıvrım. Tek bir yol main.css/index.html
   içinde bir kez tanımlanır, diğer üç köşe aynasıyla (`scaleX`/`scaleY`)
   türetilir — dört ayrı çizim yerine tek bir motifin dört yansıması. */
.portre__kose {
  position: absolute;
  width: clamp(2.75rem, 4vw, 4.25rem);
  aspect-ratio: 1;
  overflow: visible;
  color: var(--line-lit);
  pointer-events: none;
}
.portre__kose circle { fill: var(--accent); }
.portre__kose--tl { top: -1.1rem;    left: -1.1rem; }
.portre__kose--tr { top: -1.1rem;    right: -1.1rem;  transform: scaleX(-1); }
.portre__kose--bl { bottom: -1.1rem; left: -1.1rem;   transform: scaleY(-1); }
.portre__kose--br { bottom: -1.1rem; right: -1.1rem;  transform: scale(-1, -1); }

.portre__cap {
  margin-top: var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.portre__ad {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.portre__ad em {
  font-style: italic;
  color: var(--accent);
}

.portre__metin {
  margin-top: var(--space-lg);
  max-width: var(--measure-narrow);
  font-size: var(--text-md);
  line-height: var(--leading-read);
  color: var(--text-2);
  text-align: justify;
}

.portre__kunye {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--line-2);
  display: grid;
  gap: var(--space-md);
}
.portre__kunye > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
}
.portre__kunye dt {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.portre__kunye dd { font-size: var(--text-md); color: var(--text-2); }

/* ══════════════════════════════════════════════ 7 · ZAMAN ŞERİDİ ═══ */

/* Dikey kilometre taşları. Üç sütun: yıl · ray · olay. Ray tek bir kılcal
   çizgidir; noktalar rayın üstüne oturur. Satır bir akordeondur — aynı anda
   tek satır açık kalır. */

.mile {
  --mile-col: 10rem;       /* yıl sütunu */
  --mile-gap: 2.5rem;      /* raydan metne */
  --mile-dot-y: calc(var(--space-lg) + 0.46rem + 4px);
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
}

.mile__row { position: relative; }

/* Ray parça parça çizilir: her satır kendi diliminden sorumludur. Böylece
   ilk satırda ilk noktadan başlar, son satırda son noktada biter — açık
   satırın metninin yanından aşağı sarkan başıboş bir çizgi kalmaz. */
.mile__row::before {
  content: '';
  position: absolute;
  left: var(--mile-col);
  top: 0;
  bottom: 0;
  width: var(--rule-hair);
  background: var(--line-2);
}
.mile__row:first-child::before { top: var(--mile-dot-y); }
.mile__row:last-child::before  { bottom: auto; height: var(--mile-dot-y); }

.mile__head {
  display: grid;
  grid-template-columns: var(--mile-col) 1fr;
  align-items: start;
  width: 100%;
  /* Butonun kendi yatay iç boşluğu sıfırlanır: 6 px'lik varsayılan, yıl
     sütununu ayrıntı panelindeki vurgu çizgisinden kaydırıyordu. */
  padding-inline: 0;
  padding-block: var(--space-lg);
  text-align: left;
  cursor: pointer;
  border-bottom: var(--rule-hair) solid var(--line-2);
  transition: border-color var(--dur-1) var(--ease-out);
}

.mile__year {
  justify-self: end;
  padding-right: calc(var(--mile-gap) - 0.5rem);
  font-family: var(--font-meta);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-faint);
  transition: color var(--dur-1) var(--ease-out);
}

/* Nokta rayın tam üstünde. Kapalıyken içi boş bir halka, açıkken dolu ve
   ışıyan — durumu renk değil biçim taşır. */
.mile__dot {
  position: absolute;
  left: var(--mile-col);
  top: var(--mile-dot-y);
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-pill);
  background: var(--band-tone, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--line-lit);
  transition:
    background var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.mile__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-lg);
  padding-left: var(--mile-gap);
}

.mile__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out);
}

.mile__tag {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.mile__head:hover .mile__title,
.mile__head:focus-visible .mile__title { color: var(--text); }
.mile__head:hover .mile__year,
.mile__head:focus-visible .mile__year { color: var(--accent); }
.mile__head:hover .mile__dot,
.mile__head:focus-visible .mile__dot { box-shadow: inset 0 0 0 1.5px var(--accent); }

.mile__row[data-open='true'] .mile__year  { color: var(--accent); }
.mile__row[data-open='true'] .mile__title { color: var(--text); }
.mile__row[data-open='true'] .mile__head  { border-bottom-color: transparent; }
.mile__row[data-open='true'] .mile__dot {
  background: var(--accent);
  box-shadow:
    0 0 0 4px var(--band-tone, var(--surface)),
    0 0 14px 2px var(--accent-glow),
    inset 0 0 0 1.5px var(--accent);
}

/* Yükseklik JS tarafından ölçülüp yazılır; burada yalnızca geçiş tanımlıdır. */
.mile__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-2) var(--ease-out);
}

.mile__inner {
  display: grid;
  grid-template-columns: var(--mile-col) 1fr;
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--line-2);
}
.mile__row:last-child .mile__inner { border-bottom: 0; }

/* Yıl sütununun hizasında kalan kısa vurgu çizgisi — metni raya bağlar. */
.mile__cut {
  justify-self: end;
  width: 1.75rem;
  height: var(--rule-thick);
  margin-top: 0.72em;
  margin-right: calc(var(--mile-gap) - 0.5rem);
  background: var(--accent);
}

.mile__text {
  padding-left: var(--mile-gap);
  max-width: var(--measure);
  font-size: var(--text-md);
  color: var(--text-3);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.mile__row[data-open='true'] .mile__text {
  opacity: 1;
  transition-delay: var(--dur-1);
}

/* Satır görseli — yalnızca `gorsel` alanı dolu kayıtlarda çıkar (js/app.js).
   Diğer fotoğraflarla aynı kısma tabidir (`--img-kis`), aynı satır fade'iyle
   açılır (`.mile__text` ile eşzamanlı). */
.mile__img {
  grid-column: 2;
  padding-left: var(--mile-gap);
  margin-top: var(--space-lg);
  max-width: 26rem;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.mile__row[data-open='true'] .mile__img {
  opacity: 1;
  transition-delay: var(--dur-1);
}
.mile__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--rule-hair) solid var(--line-2);
  filter: var(--img-kis);
  transition: filter var(--dur-2) var(--ease-out);
}
.mile__img:hover img { filter: none; }
.mile__img-cap {
  margin-top: var(--space-xs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ═══════════════════════════════════════════════════ 8 · ARA SÖZ ═══ */

/* Bölümler arasında nefes alan tek cümle. Sayfanın en büyük ikinci tipografik
   olayı; kendi bandı yoktur, karanlığın içinde asılı durur. Sözün sağında
   sessiz, tek seferlik bir klip durur (`.lede__clip`) — metinle aynı sütun
   grubunda, dar ekranda alta düşer. */
.lede {
  padding-block: var(--space-4xl);
  padding-inline: var(--gutter);
  background: var(--surface-void);
  /* Scrub geçişinde video 1.5x'e kadar büyüyor (bkz. js/motion.js
     ledeScrubKur) — kırpma olmazsa bu büyüme komşu bölümlerin üstüne
     taşar. */
  overflow: clip;
}
.lede.acik { background: var(--surface-lede); }
.lede__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--page-max);
  margin-inline: auto;
}

/* `.head`/`.head__mark` ile birebir aynı kalıp (bkz. Külliyat başlığı) —
   kalın vurgu çizgisi solda, metin sağda. */
.lede__col {
  display: grid;
  grid-template-columns: clamp(2.25rem, 4vw, 3.5rem) 1fr;
  column-gap: var(--space-xl);
}
.lede__mark {
  align-self: start;
  width: 100%;
  height: 3.5rem;
  background: var(--accent);
}

.lede__text {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  /* Standart --leading-tight'tan %20 daha açık (%15 + kullanıcının
     eklediği %5) — yalnızca burada (token'ın kendisi değişmedi). */
  line-height: calc(var(--leading-tight) * 1.20);
  letter-spacing: var(--tracking-tight);
  color: var(--text-3);
}

/* Bu ikisi için `.perde--blok`nun standart fade+yükselişi yerine daha
   belirgin bir maske-sıyırma: alttan yukarı açılan bir `clip-path`.
   Satır satır PERDE (satirlaraBol) burada kullanılamaz çünkü `.lede__text`
   içinde `<span class="mark">` gibi iç biçimleme var — o fonksiyon metni
   düz metne indirger, işaretlemeyi kaybederdi. Bu yüzden BLOK kipi kalır.

   ÖNEMLİ: `clip-path` GÖZLEMLENEN öğenin (`.lede__text`/`.lede__cite`)
   kendisine uygulanamaz — sıfır yükseklikli bir kutu IntersectionObserver
   için de "yok" sayılır, öğe hiç görünüşe girmiyormuş gibi davranır ve
   `is-acik` asla eklenmez (kısır döngü, ölçülerek bulundu). Bu yüzden
   gözlemlenen dış öğe HER ZAMAN tam boyutlu/saydamsız tutulur; maskeleme
   yalnızca iç sarmalda (`.lede__reveal`) olur. */
[data-hareket='acik'] .lede__text.perde--blok,
[data-hareket='acik'] .lede__cite.perde--blok {
  opacity: 1;
  transform: none;
}
[data-hareket='acik'] .lede__reveal {
  display: block;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-2) var(--ease-out),
    clip-path var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}
[data-hareket='acik'] .lede__text.perde--blok.is-acik .lede__reveal,
[data-hareket='acik'] .lede__cite.perde--blok.is-acik .lede__reveal {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: none;
}
[data-hareket='acik'] .lede__cite .lede__reveal { transition-delay: 120ms; }
/* Seçili metin gibi görünen kalıcı vurgu — kullanıcı isteğiyle tarayıcının
   kendi metin-seçim görünümü taklit edildi: dolgu mavi, üstündeki yazı
   açık renk. Satır kırılırsa her satır kendi kutusunu alır (varsayılan
   satır-içi boyama davranışı), tıpkı gerçek bir seçimde olduğu gibi. */
.mark {
  color: var(--accent-ink);
  font-style: italic;
  background: var(--accent);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lede__cite {
  margin-top: var(--space-lg);
  font-family: var(--font-meta);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

/* Çerçevesiz, düz klip — çizgi/gölge yok. Zemin bandın kendi zeminiyle
   (`--surface-lede`) AYNI — video sabit tonda değil, sahne sahne değişiyor;
   videoya özel bir renk hangi kareye göre eşleşse başka karede uymuyordu
   (kullanıcı isteğiyle geri alındı). Sayfanın kendi zeminiyle eşleşince
   giriş animasyonunun küçültme anında (scale 0.97) açılan ince boşluk da
   sahneye ait görünür, yama gibi durmaz. Video sayfa yüklenirken OYNAMAZ —
   `data-lede-clip` içindeki `<video>` yalnızca kaydırma bu bölüme geldiğinde
   app.js tarafından başlatılır, tek seferliktir (loop yok), başlarken
   `figur-gir` ile aynı girişi paylaşır (hero'daki figürle aynı kalıp —
   yeni bir tür değil). */
.lede__clip {
  background: var(--surface-lede);
}
.lede__vid {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: var(--img-kis);
  opacity: 0;
}
.lede__clip.is-oynuyor .lede__vid {
  filter: none;
  animation: figur-gir var(--dur-4) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .lede__vid { opacity: 1; }
  .lede__clip.is-oynuyor .lede__vid { animation: none; }
}

.pairs { display: grid; gap: var(--space-md); }
.pairs > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
}
.pairs dt {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.pairs dd { font-size: var(--text-md); color: var(--text-2); }

.pairs--wide {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-xl);
}
.pairs--wide > div { grid-template-columns: 1fr; gap: var(--space-xs); }
.pairs--wide dd { font-size: var(--text-lg); color: var(--text); }

/* ══════════════════════════════════════════ 9 · FİLTRE & DEFTER ═══ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--line-2);
}

/* Sekme, dolgu kutusu değil — altı çizilen bir kelime, dinlenirken.
   Üzerine gelince ya da seçiliyken arkadan gerçek bir hap (pill) zemini
   dolar — `::before`, negatif z-index'le metnin ARKASINA oturur, metni
   bir `<span>`a sarmaya gerek kalmaz. Önceki büyüme/gölge dili tek başına
   yeterince "belirgin" bulunmadı (kullanıcı isteği, 2026-08-12); bu, ince
   çizgiden dolu bir şekle geçen ayrı bir teknik — `.chip.is-on`daki dolu
   zemin mantığının sekmedeki karşılığı. */
.filters__btn {
  position: relative;
  padding-block: var(--space-xs);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  transition:
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out);
}
.filters__btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -0.55em -0.9em;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px oklch(from var(--accent) l c h / 0.35);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.filters__btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-md) * -1 - 1px);
  height: var(--rule-thick);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
/* Fare üzerine gelince hap zemini dolar, buton büyüyerek yükselir ve
   altındaki çizgi yarı dolar — sekme henüz seçili olmasa bile canlı
   olduğunu gösterir. Seçili sekmenin dolu çizgisi (.is-on) hover'da
   EZİLMESİN diye :not(.is-on) ile ayrı tutuldu. */
.filters__btn:hover {
  color: var(--accent-lit);
  transform: translateY(-3px) scale(1.14);
  filter: drop-shadow(0 8px 14px oklch(from var(--accent-glow) l c h / 0.35));
}
.filters__btn:hover::before { opacity: 1; transform: scale(1); }
.filters__btn:not(.is-on):hover::after {
  transform: scaleX(0.55);
  background: var(--accent-lit);
}
.filters__btn.is-on { color: var(--accent); }
.filters__btn.is-on::before { opacity: 1; transform: scale(1); }
.filters__btn.is-on::after { transform: scaleX(1); }
.filters__btn.is-on:hover { color: var(--accent-lit); }
.filters__btn.is-on:hover::before {
  background: oklch(from var(--accent) l c h / 0.16);
  box-shadow: inset 0 0 0 1px var(--accent-lit);
}
.filters__btn.is-on:hover::after { background: var(--accent-lit); }

.subfilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

/* Chip DİNLENİRKEN KOYUDUR, üzerine gelince AÇILIR (kullanıcı isteği,
   2026-08-24) — önceki hâlin tersi. Dolgu bandın kendi mürekkebidir
   (`--text`), yazı bandın zemini: hangi bantta olursa olsun chip o bandın
   en güçlü karşıtlığını takar, ayrı bir renk uydurulmaz. Hover'da dolgu
   bandın en açık yüzeyine (`--surface-raised`) düşer, yazı ve kenar vurguya
   geçer — koyudan açığa net bir sıçrama. Seçili chip ikisinin arasındaki
   üçüncü hâldir: dolu vurgu.

   Ölçüldü (tuvalden gerçek RGB, açık bantta): dinlenme 15.87:1,
   hover 8.72:1, seçili 8.49:1 — üçü de 4.5:1'in çok üstünde. Koyu chip
   bandın kendisine karşı da 15.87:1, yani zeminden net ayrışıyor. */
.chip {
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--text);
  border-radius: var(--radius-pill);
  background: var(--text);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--surface);
  transition:
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.chip:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
  color: var(--accent);
  transform: translateY(-2px) scale(1.16);
  box-shadow: 0 14px 26px -12px var(--accent-glow);
}
.chip.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
/* Seçili chip de açılır; "seçili" bilgisi kaybolmasın diye açık zemine
   vurgu renginde bir iç halka bırakır. */
.chip.is-on:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
  color: var(--accent);
  box-shadow:
    inset 0 0 0 var(--rule-thick) var(--accent),
    0 14px 26px -12px var(--accent-glow);
  transform: translateY(-2px) scale(1.16);
}

.panel[hidden] { display: none; }

/* ── Defter: uzun listelerin taşıyıcısı ────────────────────────────────── */

.ledger { display: grid; }

.ledger__row {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg) var(--space-xl);
  align-items: start;
  padding-block: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--line-2);
  transition:
    background var(--dur-1) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
/* Fare üzerine gelince satır büyüyüp öne çıkar (kullanıcı isteği,
   2026-08-12: başlangıçta 1.02, sonra "%30 artır" — büyüme miktarı
   (0.02) %30 artırılıp 1.026'ya çekildi, gölge de aynı oranda güçlendi).
   `z-index` yalnızca hover'da yükseltilir ki büyüyen satır komşularının
   üstünde kalsın. */
.ledger__row:hover {
  background: oklch(from var(--accent) l c h / 0.05);
  transform: scale(1.026);
  box-shadow: 0 31px 57px -39px var(--accent-glow);
  z-index: 1;
}
.ledger__row:last-child { border-bottom: 0; }

.ledger--tight .ledger__row { padding-block: var(--space-lg); }

.ledger__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.ledger__thumb {
  width: 3.25rem;
  aspect-ratio: 2 / 3;
  flex: none;
  overflow: hidden;
  border: var(--rule-hair) solid var(--line-2);
  background: var(--surface-sunk);
}
.ledger__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-kis);
  transition: filter var(--dur-2) var(--ease-out);
}
.ledger__row:hover .ledger__thumb img { filter: none; }

.ledger__body { min-width: 0; }

.ledger__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--text);
  text-wrap: pretty;
}

.ledger__sub {
  margin-top: var(--space-xs);
  font-size: var(--text-md);
  color: var(--text-3);
}

.ledger__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ledger__go::after { content: '→'; }
/* Filtre sekmesindeki hap zeminin ("bu buton tipi") burada tekrarı — metnin
   arkasına negatif z-index'le oturur, ok da kendi gel-git mesafesini korur. */
.ledger__go::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -0.4em -0.6em;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ledger__go:hover { gap: var(--space-md); color: var(--accent-lit); }
.ledger__go:hover::before { opacity: 1; transform: scale(1); }

.ledger__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-align: right;
}
.ledger__side span { white-space: nowrap; }

.doi {
  padding: 0.1em 0.5em;
  border: var(--rule-hair) solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--text-3);
  transition:
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.doi:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 12px 22px -12px var(--accent-glow);
}

/* Doğrulanmamış kayıt. Görünür ve dürüst — gizlenmez. */
.draft {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0.08em 0.45em;
  border: var(--rule-hair) dashed var(--line-lit);
  border-radius: var(--radius-pill);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
  vertical-align: 0.14em;
}

.empty {
  padding-block: var(--space-2xl);
  font-size: var(--text-md);
  color: var(--text-faint);
}

/* ── Külliyat bandının kendi ölçeği ───────────────────────────────────────
   Sayfanın en yoğun okunan bölümü burası; sekmeler, chip'ler ve defter
   satırları birer kademe büyütüldü (kullanıcı isteği, 2026-08-24). Ölçek
   bilerek `#kulliyat` altına kapsandı — aynı `.ledger`/`.chip` kalıbını
   kullanan medya ve basın bantları eski ölçüsünde kalır. */
#kulliyat .head__note { font-size: var(--text-lg); }

#kulliyat .filters {
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
}
#kulliyat .filters__btn { font-size: var(--text-sm); }
#kulliyat .filters__btn::after { bottom: calc(var(--space-lg) * -1 - 1px); }

#kulliyat .subfilters {
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
#kulliyat .chip {
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
}

#kulliyat .ledger__row { padding-block: calc(var(--space-xl) * 1.25); }
#kulliyat .ledger__thumb { width: 4.25rem; }
#kulliyat .ledger__title { font-size: var(--text-2xl); }
#kulliyat .ledger__sub { font-size: var(--text-lg); }
#kulliyat .ledger__go,
#kulliyat .ledger__side { font-size: var(--text-sm); }

/* ═════════════════════════════════════════════════ 10 · KİTAPLAR ═══ */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-3xl) var(--space-2xl);
}

.book {
  display: grid;
  gap: var(--space-lg);
  text-align: left;
  cursor: pointer;
  perspective: 1300px;
}

/* Kitap üç boyutlu durur: sırt sola kaçar, kapak hafifçe döner. Üzerine
   gelince raftan çekilir gibi öne çıkar ve ışık alır. Perspektif ebeveynde,
   dönüş burada — ikisi aynı öğede olursa derinlik düzleşir. */
.book__solid {
  position: relative;
  aspect-ratio: 3 / 4.4;
  transform-style: preserve-3d;
  transform: rotateY(-15deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.book:hover .book__solid,
.book:focus-visible .book__solid { transform: rotateY(-6deg) translate3d(0, -12px, 30px); }

/* Kapak görseli ve çizilen levha aynı kutuyu doldurur. */
.book__cover,
.book__face {
  position: absolute;
  inset: 0;
  box-shadow: 0 45px 65px -45px oklch(0% 0 0 / 0.95);
}

.book__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface-sunk);
  border: var(--rule-hair) solid var(--line-2);
  filter: var(--img-kis);
  transition: filter var(--dur-2) var(--ease-out);
}
.book:hover .book__cover { filter: none; }

/* Gerçek kapak yoksa sayfanın kendi diliyle çizilen levha. */
.book__front {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--line-2);
  background:
    linear-gradient(155deg,
      oklch(from var(--accent) l c h / 0.11) 0%,
      transparent 45%),
    var(--surface-raised);
}

/* Sırt: kapağın sol kenarından geriye kaçan ince yüz. */
.book__spine {
  inset: 0 auto 0 0;
  width: 1.4rem;
  transform: rotateY(90deg);
  transform-origin: left center;
  background: linear-gradient(to right, var(--surface-sunk), var(--surface-raised));
  border-block: var(--rule-hair) solid var(--line-2);
  box-shadow: none;
}

.book__rule {
  display: block;
  width: 2rem;
  height: var(--rule-thick);
  background: var(--accent);
}

.book__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--text);
}

/* Alt başlık — kapak levhasında başlığın altındaki ikinci satır. */
.book__alt {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-3);
}

.book__imprint {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.book__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* ═════════════════════════════════════════════════ 11 · YAZI & İZ ═══ */

.notes { display: grid; gap: var(--space-lg); }

.note {
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--line-2);
  border-left: var(--rule-thick) solid var(--accent-deep);
  background: var(--surface-raised);
  transition: border-left-color var(--dur-1) var(--ease-out);
}
.note:hover { border-left-color: var(--accent); }

.note__where {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.note__title {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text);
}
.note__text {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════ 12 · BASIN ═══ */

/* Bölüm, kart ızgarasından bir HABER SAYFASI düzenine geçti (kullanıcı
   isteği, 2026-08-24: "gerçek bir haber sitesi gibi görünsün"). Dört kat:
   künye şeridi → manşet → kapsam başlıklı akış → sağda kısa haber ve
   kaynak sütunu. Düzenin tamamı `#basin` içinde kalır; sayfanın geri
   kalanı bu sınıfları kullanmaz.

   Bant AÇIK zeminlidir (aynı gün, ikinci istek: "bu siyahlık okumamı
   engelliyor"). Buradaki her renk `.acik`in tokenlarından gelir; tek
   istisna fotoğrafın üstündeki künye şerididir (`.clip__stamp`) — o,
   bandın tonundan bağımsız kendi karanlık şeridini taşır, çünkü altında
   ne olacağı fotoğrafa göre değişir. Ölçüm (tuvalden gerçek RGB): en sönük
   metin kağıda karşı 6.42:1, vurgu 8.48:1, sağ sütunun tonlu kutusunda en
   sönük metin 5.62:1 — hepsi 4.5:1'in üstünde. */

.press {
  display: grid;
  gap: var(--space-xl);
}

/* ── Künye şeridi: bölüm adı | kural | sayım ve tarih ─────────────────── */

.press__kunye {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-thick) solid var(--line);
}
.press__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.press__cizgi {
  flex: 1;
  height: var(--rule-hair);
  background: var(--line-2);
}
.press__sayac {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.press__sayac b {
  font-weight: 400;
  color: var(--accent);
}

/* ── Manşet: fotoğraf solda, metin sağda; kart değil, sayfanın kendisi ──
   Kenarlık yerine altındaki kural taşır — çerçevelenmiş bir kart gibi
   değil, gazetenin birinci sayfası gibi okunsun. */

.manset {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--line-2);
}
.manset__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sunk);
}
.manset__media img,
.manset__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-kis);
  transition: filter var(--dur-2) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.manset:hover .manset__media img { filter: none; transform: scale(1.03); }

.manset__govde {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.manset__kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.manset__kunye b {
  font-weight: 400;
  text-transform: uppercase;
  color: var(--accent);
}
/* Dolu vurgu rozetiyle "bu, bugünün manşeti" der — bölümün tek dolu
   zeminli etiketi, bu yüzden göz önce oraya düşer. */
.manset__rozet {
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--accent);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.manset__baslik {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}
.manset:hover .manset__baslik { color: var(--accent-lit); }
.manset__ozet {
  max-width: var(--measure-narrow);
  font-size: var(--text-lg);
  line-height: var(--leading-read);
  color: var(--text-2);
}
.manset .clip__go { margin-top: var(--space-xs); }

/* ── Gövde: akış + sağ sütun ──────────────────────────────────────────── */

.press__govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;
}
.press__akis {
  display: grid;
  gap: var(--space-xl);
}

/* Kapsam başlığı — ad, boydan boya kural, sayım. Gazetede sayfa üstündeki
   bölüm çizgisinin karşılığı. */
.grup__bas {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.grup__ad {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.grup__cizgi {
  flex: 1;
  height: var(--rule-hair);
  background: var(--line-2);
}
.grup__adet {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
/* Haber kartları üçerli akar (kullanıcı isteği, 2026-08-24). Geniş ekranda
   sayı SABİTTİR — `auto-fill` bırakılsaydı sağ sütunlu bantta 2, sütunsuz
   tüm-haberler sayfasında 5-6 kart çıkar, iki sayfa aynı ritmi tutmazdı.
   Dar ekranda otomatik akışa dönülür; orada üç kart okunmayacak kadar
   incelirdi. */
.grup__kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-lg);
}
@media (min-width: 75rem) {
  .grup__kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Akışın altındaki geçiş: bant arşivin tamamını dökmez, kalanı yeni
   sekmede haberler.html'e bırakır (kullanıcı isteği, 2026-08-24). Kart
   değil bir EŞİK gibi durur: üstünde kural, ortasında tek satır. */
.press__devam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-thick) solid var(--line);
  transition: color var(--dur-1) var(--ease-out), gap var(--dur-1) var(--ease-out);
}
.press__devam__ana {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text);
  transition: color var(--dur-1) var(--ease-out);
}
.press__devam__adet {
  margin-right: auto;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.press__devam__ok { color: var(--accent); }
.press__devam:hover { gap: var(--space-sm) var(--space-lg); }
.press__devam:hover .press__devam__ana { color: var(--accent); }
.press__devam:hover .press__devam__ok { color: var(--accent-lit); }

/* İki eşik kademesi (kullanıcı isteği, 2026-08-27). Kapsam eşiği öbeğin
   İÇİNDE durur ve sessizdir — kalın kural orada bandı ikiye bölerdi. Arşiv
   eşiği bandın kapanışıdır, kalın kuralı o taşır. */
.press__devam--grup {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--line-2);
}
.press__devam--grup .press__devam__ana { font-size: var(--text-lg); }
.press__devam--arsiv { margin-top: var(--space-sm); }

/* ── Haber arşivi sayfası (haberler.html) ─────────────────────────────── */
/* Gazete sayfasının RİTMİ alındı (kullanıcı isteği, 2026-08-27): üstte adın
   iki kalın kural arasına oturduğu künye levhası ve tarih, altında manşet
   ile kaynak dizini, sonra kapsam bölümleri. Palet, kart dili ve tipografi
   sitenin kendisinden — buraya hazır bir tema girmedi. */

.mast {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.mast__ust { margin: 0; }
/* Ad ile tarih aynı taban çizgisinde, aralarında boşluk: gazete künyesinde
   ad solda, gün sağda durur. */
.mast__orta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
  border-block: var(--rule-thick) solid var(--line);
}
.mast__ad {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text);
}
.mast__tarih {
  margin: 0;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.mast__slogan {
  max-width: var(--measure-narrow);
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-read);
  color: var(--text-3);
}
/* Bölüm sekmeleri künyenin hemen altında bir şerit gibi durur. */
.mast__nav {
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--line-2);
}

/* Gazetenin ilk katı: manşet solda, kaynak dizini sağda. Ölçüler banttaki
   `.press__govde` ile AYNI — iki sayfa aynı sütun ritmini tutsun. */
.arsiv__ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-thick) solid var(--line);
}
/* Arşivde manşet sayfanın açılışıdır; bandın manşetinden bir kademe daha
   büyük okunur. */
.arsiv__ust .manset__baslik { font-size: var(--text-3xl); }
.arsiv__yan { top: var(--space-lg); }

.tum__ust { margin-bottom: var(--space-sm); }
.tum__geri {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-1) var(--ease-out);
}
.tum__geri:hover { color: var(--accent); }

/* ── Sağ sütun: kısa haberler ve kaynak listesi ───────────────────────── */

.press__rail {
  position: sticky;
  top: var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}
/* Sağ sütunun kutuları kağıttan bir tık koyu (`--surface-2`): beyaz kağıt
   üstünde beyaz kutu görünmez, gazetenin gri kutusu gibi hafifçe tonlanır. */
.rail__blok {
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--line-2);
  background: var(--surface-2);
}
.rail__bas {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--line-2);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.kaynaklar { display: grid; }
.kaynak {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--line-2);
  font-family: var(--font-meta);
  font-size: var(--text-sm);
  text-align: left;
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease-out);
}
.kaynaklar li:last-child .kaynak { border-bottom: 0; }
.kaynak__adet {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.kaynak:hover { color: var(--accent-lit); }
.kaynak:hover .kaynak__adet { color: var(--accent); }
.kaynak.is-on { color: var(--accent); }
.kaynak.is-on .kaynak__adet { color: var(--accent); }

.clip {
  display: grid;
  grid-template-rows: auto 1fr;
  border: var(--rule-hair) solid var(--line);
  background: var(--surface-raised);
  overflow: hidden;
  transition:
    border-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.clip:hover {
  border-color: var(--line-lit);
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 40px 60px -50px oklch(from var(--accent) l c h / 0.4);
}

.clip__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sunk);
}
.clip__media img,
.clip__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-kis);
  transition: filter var(--dur-2) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.clip:hover .clip__media img { filter: none; transform: scale(1.04); }

/* Yayın adı ve tarih GÖRSELİN üstünde durur, bandın değil. Bu yüzden bandın
   tokenlarını izlemez: hangi bantta olursa olsun karanlık şerit + açık metin
   kullanır. Açık bantta banda uysaydı, koyu metin parlak bir fotoğrafın
   üstüne düşerdi — ölçüldü, 4.5:1'in altında kalıyordu. */
.clip__stamp {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: linear-gradient(to top,
    var(--press-scrim) 0%,
    var(--press-scrim-soft) 55%,
    transparent 100%);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}
.clip__stamp b {
  font-weight: 400;
  text-transform: uppercase;
  color: var(--press-label);
  text-shadow: 0 1px 3px oklch(4% 0 0 / 0.9);
}
.clip__stamp span {
  color: var(--press-text);
  text-shadow: 0 1px 3px oklch(4% 0 0 / 0.9);
}
/* Kapsam etiketi (Ulusal / Yerel / Uluslararası) — haber sayfalarındaki
   bölüm rozeti. Damganın sağ ucuna kaçar, kendi çerçevesini taşır. */
.clip__kapsam {
  margin-left: auto;
  padding: 0.15em 0.6em;
  border: var(--rule-hair) solid oklch(from var(--press-label) l c h / 0.5);
  border-radius: var(--radius-pill);
  font-style: normal;
  text-transform: uppercase;
  color: var(--press-label);
  text-shadow: 0 1px 3px oklch(4% 0 0 / 0.9);
}
/* Manşetin künyesi fotoğrafın değil bandın üstünde durur — orada karanlık
   şerit yok, bu yüzden bandın kendi tokenlarını kullanır. */
.manset__kunye .clip__kapsam {
  margin-left: 0;
  border-color: var(--line);
  color: var(--text-3);
  text-shadow: none;
}

.clip__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.clip__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--text);
  text-wrap: pretty;
  transition: color var(--dur-1) var(--ease-out);
}
.clip:hover .clip__title { color: var(--accent-lit); }

.clip__sum {
  font-size: var(--text-md);
  color: var(--text-3);
}

.clip__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--dur-1) var(--ease-out);
}
.clip__go::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -0.4em -0.6em;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.clip:hover .clip__go { gap: var(--space-md); }
.clip:hover .clip__go::before { opacity: 1; transform: scale(1); }

/* ═════════════════════════════════════════════════════ 13 · SES ═══ */

/* Sesli Kayıtlar alanının stili AYRI DOSYADADIR: css/ses.css. Bölüm
   2026-08-27'de on iki eşit karttan sahne + çalma listesi düzenine geçti
   (kullanıcı isteği); stil o geçişte yazıldığı yerde bırakıldı — burada
   yalnızca izi var ki dosya arasında kaybolmasın. */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-xl);
  border-top: var(--rule-hair) solid var(--line-2);
}

.metric {
  padding-top: var(--space-xl);
  border-right: var(--rule-hair) solid var(--line-2);
  padding-right: var(--space-xl);
}
.metric:last-child { border-right: 0; }

/* Sayı sahnenin en parlak yeridir: ölçülmüş olan tek şey odur. */
.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.metric__label {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  color: var(--text-2);
}

.metric__src {
  margin-top: var(--space-xs);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.metrics__note {
  margin-top: var(--space-xl);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--text-faint);
}

/* ══════════════════════════════════════════ 16 · İLETİŞİM & KÜNYE ═══ */

.colophon {
  padding-block: var(--space-2xl);
  padding-inline: var(--gutter);
  border-top: var(--rule-hair) solid var(--line-2);
  background: var(--surface-sunk);
}

/* Kullanıcı isteğiyle (2026-08-07) önce salt beyaz denendi, sonra sesli
   kayıtlar bandıyla (`band--audio.acik`, podcast bölümü) AYNI zemine
   çekildi. `.acik`'in kendi `background: var(--surface)` bildirimi
   normalde her `.acik` öğesine (bant olsun olmasın) uygulanır, ama
   `.colophon`'un KENDİ `background: var(--surface-sunk)` bildirimi
   dosyada ondan SONRA geldiği için eşit özgüllükte onu eziyordu — bu
   yüzden `--surface-sunk`'ı doğrudan `--surface`'e eşitlemek gerekti;
   `--surface-2`ye değil (tuval piksel okumasıyla doğrulandı, ikisi
   farklı: 0.96 0.022 80 vs 0.935 0.028 80 — podcast bandı ilkini
   kullanıyor, çünkü `.band--audio`'nun kendi `--tone-audio` eşlemesi
   de aynı `.acik` çakışmasıyla ezilip `--surface`'e düşüyor). */
.colophon.acik { --surface-sunk: var(--surface); }

/* `.pairs--wide`in genel 16rem taban ölçüsü künyede 5. öge (X hesabı) Web'in
   sağına düşmeden bir alt satıra kaçırıyordu — burada, yalnızca künyede,
   dar bir tabana (13rem) çekildi. `.sheet`teki `.pairs--wide` (kitap
   ayrıntısı) bu kuralı MİRAS ALMAZ, kendi 16rem'inde kalır — orada zaten
   üç öge tek sütuna düşüyor, daraltmak gerekmiyordu. */
.colophon__pairs {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--space-xl);
}

.colophon__body {
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-faint);
}
.colophon__body strong { font-weight: 400; color: var(--text-3); }
.colophon__body em { font-style: normal; color: var(--text-3); }
.colophon__body a {
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: var(--line-lit);
  transition: color var(--dur-1) var(--ease-out);
}
.colophon__body a:hover { color: var(--accent); }

.colophon__set {
  margin-top: var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* Künyenin en altı, sağa yaslı — kullanıcı isteği (2026-08-07). */
.colophon__credit {
  margin-top: var(--space-md);
  text-align: right;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* Sosyal medya satırı — `.doi` rozetinin metin yerine ikon taşıyan hâli.
   Aynı hap/dolgu davranışını (`.doi:hover`) miras alır, yalnızca kare bir
   dokunma alanına dönüşür. */
.colophon__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em;
}
.colophon__x-glyph {
  display: block;
  width: 0.85em;
  height: 0.85em;
  fill: currentColor;
}

/* ══════════════════════════════════════════════════ 17 · YUVA ═══ */

/* Sayfanın tek kalıcı gezinme aracı. İlk ekrandan sonra alttan yükselir.
   `.acik` sınıfı burada bir bant değil, kullanıcı isteğiyle sabit bir
   seçim: zemin beyaza, yazılar maviye çekilir — sayfanın hangi bandının
   üstünde durursa dursun `.dock` her zaman aynı okunur. Zemin SALT BEYAZ
   ve opak (`--surface-dock`) — eski cam görünüm (bulanık, yarı saydam
   zemin) kullanıcı isteğiyle kaldırıldı: "saydamlık olmasın, net görülsün". */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  z-index: var(--z-dock);
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--surface-dock);
  box-shadow: 0 30px 60px -30px oklch(0% 0 0 / 0.9);
  transform: translate3d(-50%, calc(100% + var(--space-2xl)), 0);
  opacity: 0;
  transition:
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out);
}
.dock[data-open='true'] { transform: translate3d(-50%, 0, 0); opacity: 1; }

.dock__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: oklch(from var(--accent) l c h / 0.62);
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.dock__btn:hover {
  color: var(--accent-ink);
  background: var(--accent);
  transform: scale(1.35);
}
.dock__btn[aria-current='true'] { color: var(--accent); background: var(--accent-wash); }

/* ═════════════════════════════════════════════════ 18 · PALET ═══ */

.palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: start center;
  padding: clamp(3rem, 12vh, 9rem) var(--space-lg) var(--space-lg);
}
.palette[hidden] { display: none; }

.palette__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(8px);
}

.palette__box {
  position: relative;
  width: min(42rem, 100%);
  border: var(--rule-hair) solid var(--line);
  background: var(--surface-raised);
  box-shadow: 0 60px 90px -40px oklch(0% 0 0 / 0.95);
  animation: palet-gel var(--dur-2) var(--ease-out);
}
@keyframes palet-gel {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.99); }
}

.palette__input {
  width: 100%;
  padding: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--line-2);
  font-size: var(--text-xl);
  color: var(--text);
}
.palette__input::placeholder { color: var(--text-faint); }
.palette__input:focus-visible { outline: none; }

.palette__list { max-height: min(48vh, 26rem); overflow-y: auto; }

.palette__opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--text-2);
}
.palette__opt[aria-selected='true'] {
  background: var(--accent-wash);
  color: var(--text);
  box-shadow: inset var(--rule-thick) 0 0 var(--accent);
}
.palette__opt span:last-child {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.palette__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-top: var(--rule-hair) solid var(--line-2);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.palette__foot kbd {
  padding: 0.1em 0.4em;
  border: var(--rule-hair) solid var(--line-2);
  border-radius: var(--radius-xs);
}

/* ═════════════════════════════════════════════════ 19 · SAYFA ═══ */

/* Kitap ayrıntısı. Sağdan giren bir levha — sayfayı örtmez, kenara oturur. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: flex-end;
}
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(6px);
}

.sheet__box {
  position: relative;
  width: min(34rem, 100%);
  height: 100%;
  overflow-y: auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
  border-left: var(--rule-hair) solid var(--line);
  background: var(--surface-raised);
  box-shadow: -50px 0 90px -40px oklch(0% 0 0 / 0.95);
  animation: sayfa-gir var(--dur-2) var(--ease-out);
}
@keyframes sayfa-gir {
  from { transform: translate3d(4%, 0, 0); opacity: 0; }
}

.sheet__x {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: var(--rule-hair) solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--text-3);
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.sheet__x:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.14);
  box-shadow: 0 10px 20px -10px var(--accent-glow);
}

.sheet__title {
  margin-bottom: var(--space-lg);
  padding-right: var(--space-2xl);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.sheet__cover {
  margin-bottom: var(--space-lg);
  border: var(--rule-hair) solid var(--line-2);
  background: var(--surface-sunk);
}
.sheet__cover img { width: 100%; filter: var(--img-kis); }

.sheet__text {
  font-size: var(--text-md);
  color: var(--text-2);
}

.sheet__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.sheet__link:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 26px -14px var(--accent-glow);
}

/* ══════════════════════════════════════════════════ 20 · DUYARLI ═══ */

@media (max-width: 64rem) {
  .portre { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .lede__inner { grid-template-columns: minmax(0, 1fr); }
  .split  { grid-template-columns: minmax(0, 1fr); }
  /* Basın: manşet ve sağ sütun tek kolona iner; sütun artık yapışkan
     durmaz, akışın altında normal bir blok olur. */
  .manset { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .press__govde { grid-template-columns: minmax(0, 1fr); }
  .arsiv__ust { grid-template-columns: minmax(0, 1fr); }
  .press__rail { position: static; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .metric { border-right: 0; padding-right: 0; }
}

@media (max-width: 46rem) {
  body { font-size: var(--text-md); }

  .band { padding-block: var(--space-2xl); }
  .band--portre, .band--books { padding-block: var(--space-3xl) var(--space-2xl); }
  .lede { padding-block: var(--space-3xl); }

  /* 44 px dokunma hedefi tabanı. Akan metin içindeki bağlantılar (künye
     paragrafı) WCAG 2.5.8'in satır içi istisnası kapsamındadır; bağımsız
     duran her hedef bu tabana çekilir. */
  .chip, .filters__btn, .dock__btn,
  .doi, .ledger__go, .sheet__link {
    min-height: 44px;
  }
  .chip, .dock__btn, .doi { display: inline-flex; align-items: center; }
  .ledger__go { display: inline-flex; align-items: center; }
  .colophon__body .doi, .colophon__body a { min-height: 0; display: inline; }

  /* Zaman şeridi tek sütuna düşer: yıl metnin üstüne çıkar, ray sola yapışır. */
  .mile { --mile-col: 0px; --mile-gap: 1.5rem; }
  .mile__head, .mile__inner { grid-template-columns: 1fr; }
  .mile__dot { left: 0; }
  .mile__year {
    justify-self: start;
    padding-right: 0;
    padding-left: var(--mile-gap);
    margin-bottom: var(--space-xs);
  }
  .mile__cut { justify-self: start; margin: 0 0 var(--space-sm) var(--mile-gap); }
  .mile__img { grid-column: 1; max-width: none; }

  .portre__kunye > div, .pairs > div { grid-template-columns: 1fr; gap: var(--space-2xs); }

  .ledger__row { grid-template-columns: minmax(0, 1fr); }
  .ledger__side { justify-content: flex-start; text-align: left; }
  .ledger__main { grid-template-columns: minmax(0, 1fr); }
  .ledger__thumb { width: 4rem; }

  .shelf { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2xl) var(--space-lg); }
  .book__solid { transform: rotateY(-9deg); }

  /* Basın künyesi dar ekranda tek satıra sığmaz: aradaki kural düşer,
     sayım alt satıra iner. Manşet başlığı bir kademe küçülür. */
  .press__kunye { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
  .press__cizgi { display: none; }
  .press__rail { grid-template-columns: minmax(0, 1fr); }
  .manset__baslik { font-size: var(--text-2xl); }
  .arsiv__ust .manset__baslik { font-size: var(--text-2xl); }
  .manset__ozet { font-size: var(--text-md); }
  .mast__ad { font-size: var(--text-3xl); }
  .grup__kartlar { grid-template-columns: minmax(0, 1fr); }
  .kaynak { min-height: 44px; }

  .filters { gap: var(--space-lg); }
  /* Büyütülen külliyat ölçeği dar ekranda geri çekilir: sekme aralığı ve
     satır boşluğu bandın kendi büyük değerlerinden bir kademe iner. */
  #kulliyat .filters { gap: var(--space-xl); margin-bottom: var(--space-xl); }
  #kulliyat .subfilters { margin-bottom: var(--space-xl); }
  #kulliyat .ledger__row { padding-block: var(--space-xl); }
  #kulliyat .ledger__thumb { width: 4rem; }

  .sheet__box { width: 100%; padding: var(--space-xl) var(--space-lg) var(--space-2xl); }

  /* Yuva dar ekranda yana kayabilir; kesilmesin diye kenarlara yapışır. */
  .dock {
    left: var(--space-md);
    right: var(--space-md);
    transform: translate3d(0, calc(100% + var(--space-2xl)), 0);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock[data-open='true'] { transform: translate3d(0, 0, 0); }
}

/* ══════════════════════════════════════════════ 21 · İMLEÇ & MÜREKKEP ═══ */

/* Fare imleci gerçek bir dolma kalem UCU (kullanıcı isteği, 2026-08-14 —
   önce soyut bir biçimdi, ucu aşağı bakıyordu, altında gövde/kabza vardı;
   şimdi yalnızca uç var, YUKARI bakıyor, biraz büyüdü, gövde kaldırıldı).
   İmleç sabiti (15 2) tam ucun sivri noktasında. Renkler tokens.css'teki
   --accent-deep ile aynı tondan, sabit rgb() olarak yazılmak zorunda —
   imleç görselleri sayfanın CSS değişken kapsamının dışında çözülür,
   `var()` orada işe yaramaz. */
:root {
  --imlec-kalem:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28'%3E%3Cpath d='M15 2C20 6 24 11 21.5 17.5C21 20.5 19.3 23.5 17 25.5L13 25.5C10.7 23.5 9 20.5 8.5 17.5C6 11 10 6 15 2Z' fill='rgb(250,246,238)' stroke='rgb(139,63,3)' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='15' y1='9' x2='15' y2='23' stroke='rgb(139,63,3)' stroke-width='1.1'/%3E%3Ccircle cx='15' cy='11.5' r='1.8' fill='rgb(139,63,3)'/%3E%3C/svg%3E")
    15 2, auto;
}
html { cursor: var(--imlec-kalem); }

/* Mürekkep sıçraması — tıklanan noktada js/app.js'in oluşturduğu geçici
   `.murekkep` düğümü etrafında çok sayıda düzensiz lekecik dağılır, animasyon
   bitince kendini siler. Renkler siyah/kahverengi (kullanıcı isteği) —
   --accent-deep ve --surface-void arasından js/app.js'te rastgele seçilir.
   Her lekenin boyutu ve `border-radius`'u da js/app.js'te rastgele üretilir
   ki gerçek mürekkep gibi düzensiz görünsün; burada yalnızca hareket
   (`--dx`/`--dy`/`--gecikme`) tanımlanır. */
.murekkep {
  position: fixed;
  z-index: var(--z-modal);
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.murekkep__damla {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: murekkep-damla var(--dur-2) var(--ease-out) forwards;
  animation-delay: var(--gecikme, 0ms);
}
@keyframes murekkep-damla {
  0%   { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.4); opacity: 0.92; }
  30%  { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);   opacity: 0.88; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot, 0deg)) scale(0.3);
    opacity: 0;
  }
}

/* ══════════════════════════════════════════ 22 · AZALTILMIŞ HAREKET ═══ */

/* Hareket kapanır, içerik AÇIK kalır. Hiçbir şey animasyona bağlı olarak
   gizlenmez — perde ve ölçü sınıfları js/motion.js tarafından doğrudan
   "açık" duruma alınır. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .gren { display: none; }
  .perde__i { transform: none; }
  .perde--blok { opacity: 1; transform: none; }
  [data-cizil] { transform: scaleX(1); }
  [data-cizil-yol] path { stroke-dashoffset: 0; }
  [data-cizil-yol] circle { opacity: 1; }
  [data-derinlik] { transform: none; }
}