/* ===========================================================================
   KRONOS — Türkiye Tarih Atlası · stil katmanı
   Sıcak editöryel / arşiv okuma odası estetiği.
   Krem kâğıt + bordo aksan, yuvarlak hatlar, metin ağırlıklı, okunabilir.
   =========================================================================== */

/* ---- TOKENLAR ----------------------------------------------------------- */
:root {
  /* yüzeyler — sıcak kâğıt tonları */
  --bg-0: oklch(0.975 0.007 300);     /* sayfa zemini · beyazdan hafif mora çalan */
  --bg-1: oklch(0.997 0.003 300);     /* kart / panel · neredeyse beyaz */
  --bg-2: oklch(0.963 0.009 300);     /* yükseltilmiş yüzey */
  --bg-3: oklch(0.933 0.013 300);     /* hover / aktif */
  --line: oklch(0.89 0.011 300);      /* ince çizgi */
  --line-soft: oklch(0.915 0.009 300 / 0.85);

  /* metin — sıcak mürekkep */
  --ink:  oklch(0.27 0.018 50);       /* ana metin */
  --ink-2: oklch(0.43 0.018 52);      /* ikincil */
  --ink-3: oklch(0.53 0.016 56);      /* silik / etiket — WCAG AA: krem zeminde ≥4.5:1 */

  /* aksanlar — JSX bu adları kullanıyor; --amber Tweaks'ten değiştirilebilir */
  --amber: oklch(0.46 0.145 16);      /* birincil — bordo (varsayılan) */
  --amber-dim: color-mix(in oklch, var(--amber) 14%, transparent);
  --cyan:  oklch(0.5 0.075 205);      /* ikincil — sakin petrol mavisi */
  --cyan-dim: color-mix(in oklch, var(--cyan) 14%, transparent);

  /* tema renkleri — krem üzerinde okunan derin, sofistike tonlar */
  --th-reform: oklch(0.5 0.085 205);  /* modernleşme · petrol mavisi */
  --th-sol:    oklch(0.5 0.16 25);    /* devrim · derin kırmızı */
  --th-darbe:  oklch(0.52 0.11 58);   /* darbe · yanık toprak */
  --th-rejim:  oklch(0.47 0.115 305); /* rejim · erik moru */
  --th-kriz:   oklch(0.53 0.15 6);    /* kriz · gül-kızıl */
  --th-dis:    oklch(0.46 0.07 252);  /* dış politika · arduvaz mavi */

  --radius: 12px;
  --radius-lg: 18px;
  --rail-w: 270px;
  --footer-h: 32px;            /* kalıcı kaynak/künye şeridi */

  /* SAĞ-ALT YÜZEN İSTİF (KURAL B) — dock + güncelleme pili tek kaynaktan hizalanır.
     --dock-h: dock yüksekliği (⚙44 + gap12 + asistan44). --dock-bottom: dock alt
     çapası; makro/panel durumları bunu kaydırır, pil calc ile TAM üstüne oturur
     (dock-bottom + dock-h + --stack-gap → ≥10px boşluk). */
  --dock-h: 100px;
  --stack-gap: 12px;
  --dock-bottom: calc(18px + var(--footer-h));

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-ui);  /* mono kaldırıldı — terminal hissi gitti */

  --shadow-sm: 0 1px 2px oklch(0.4 0.03 50 / 0.05), 0 2px 8px oklch(0.4 0.03 50 / 0.05);
  --shadow-md: 0 2px 6px oklch(0.4 0.03 50 / 0.06), 0 10px 28px -8px oklch(0.4 0.03 50 / 0.13);
  --shadow-lg: 0 4px 12px oklch(0.4 0.03 50 / 0.08), 0 24px 60px -18px oklch(0.4 0.03 50 / 0.22);

  color-scheme: light;
}

/* ---- KARANLIK MOD ------------------------------------------------------- *
   Aynı editöryel kimlik, gece okuma odası: derin mürekkep-arduvaz yüzeyler,
   sıcak parşömen metin. Tüm renkler token olduğu için tek blok yeter.
   --amber (aksan) JSX'te inline atanır; app.js karanlıkta onu parlatır.        */
html[data-theme="dark"] {
  --bg-0: oklch(0.178 0.013 285);     /* sayfa zemini · derin arduvaz-mürekkep */
  --bg-1: oklch(0.224 0.015 285);     /* kart / panel */
  --bg-2: oklch(0.258 0.017 286);     /* yükseltilmiş yüzey */
  --bg-3: oklch(0.318 0.021 287);     /* hover / aktif */
  --line: oklch(0.365 0.019 287);     /* ince çizgi */
  --line-soft: oklch(0.345 0.017 287 / 0.7);

  --ink:  oklch(0.935 0.012 75);      /* ana metin · sıcak parşömen */
  --ink-2: oklch(0.79 0.014 68);      /* ikincil */
  --ink-3: oklch(0.63 0.014 62);      /* silik / etiket — koyu zeminde AA */

  --amber-dim: color-mix(in oklch, var(--amber) 22%, transparent);
  --cyan:  oklch(0.7 0.085 205);      /* gece için aydınlatılmış petrol */
  --cyan-dim: color-mix(in oklch, var(--cyan) 20%, transparent);

  /* tema renkleri — koyu zeminde okunacak şekilde aydınlatıldı */
  --th-reform: oklch(0.68 0.1 205);
  --th-sol:    oklch(0.66 0.17 25);
  --th-darbe:  oklch(0.7 0.12 62);
  --th-rejim:  oklch(0.66 0.13 305);
  --th-kriz:   oklch(0.68 0.16 8);
  --th-dis:    oklch(0.66 0.09 252);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 8px oklch(0 0 0 / 0.32);
  --shadow-md: 0 2px 6px oklch(0 0 0 / 0.36), 0 12px 30px -8px oklch(0 0 0 / 0.55);
  --shadow-lg: 0 4px 14px oklch(0 0 0 / 0.42), 0 28px 70px -18px oklch(0 0 0 / 0.7);

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  /* Telefonun renkli sistem emojilerini (⚖ ⛓ ⚠ ⟳ …) kapat: geometrik
     glyph'ler monokrom metin olarak çizilsin — Claude tasarım dili. */
  font-variant-emoji: text;
}

#root { height: 100%; }

/* ===========================================================================
   HAT İKONLARI (window.KronosArt.Icon) — renkli emoji yerine tek renkli SVG.
   1em ölçek: bulunduğu kapsayıcının font-size'ını izler, metinle hizalanır.
   =========================================================================== */
.kic {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -0.145em; flex: none; overflow: visible;
}
/* metin yanında kullanılan ikona soluk değil tam currentColor; çizgi inceliği
   küçük boyutlarda net kalsın diye vector-effect ile sabitlenir */
.kic path { vector-effect: non-scaling-stroke; }

::selection { background: var(--amber); color: #fff; }

/* yumuşak scrollbarlar */
::-webkit-scrollbar { height: 11px; width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 3px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.85 0.015 70); }

/* ---- ATMOSFER: çok hafif sıcak kâğıt dokusu --------------------------- */
.atmos {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, oklch(0.99 0.009 300 / 0.9), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, oklch(0.955 0.014 308 / 0.55), transparent 65%);
}
.vignette { display: none; }

/* ---- KARANLIK MOD · atmosfer + yüzey ince ayarları --------------------- */
html[data-theme="dark"] .atmos {
  background:
    radial-gradient(ellipse 95% 75% at 50% -14%, oklch(0.3 0.035 286 / 0.7), transparent 62%),
    radial-gradient(ellipse 80% 70% at 100% 112%, oklch(0.31 0.045 300 / 0.5), transparent 66%),
    radial-gradient(ellipse 70% 55% at -5% 100%, color-mix(in oklch, var(--amber) 22%, transparent), transparent 70%);
}
/* arka plan SVG'leri gecede daha okunur — hafif, sıcak aksan tonunda */
html[data-theme="dark"] .atmos-art { opacity: .12; color: color-mix(in oklch, var(--amber) 55%, var(--ink-3)); }
html[data-theme="dark"] .atmos-art .ka-stars { color: color-mix(in oklch, var(--cyan) 60%, var(--ink)); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0.02 287); }
html[data-theme="dark"] .dr-figure img { filter: brightness(.82) sepia(.1) saturate(.9); }
html[data-theme="dark"] .dr-figure:hover img { filter: brightness(.98) saturate(1); }
html[data-theme="dark"] ::selection { background: var(--amber); color: oklch(0.16 0.012 285); }

/* ===========================================================================
   APP KABUĞU
   =========================================================================== */
.app { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }

/* ---- ÜST BAR ----------------------------------------------------------- */
.topbar {
  display: flex; align-items: stretch; height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex: none;
}
.brand {
  display: flex; align-items: center; gap: 13px; padding: 0 24px 0 22px;
  border-right: 1px solid var(--line); flex: none;
}
.brand-mark {
  width: 30px; height: 30px; position: relative; flex: none;
  border: 2px solid var(--amber); border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-1);
}
.brand-mark::after {              /* sakin merkez nokta — neon süpürme yok */
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber);
}
.brand-name {
  /* <h1> olduğu için tarayıcı varsayılan margin'ini sıfırla — div gibi görünsün */
  margin: 0;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em;
  font-size: 23px; line-height: 1.05; color: var(--ink); white-space: nowrap;
  max-width: 60vw; overflow: hidden;
  transition: max-width .34s ease, opacity .24s ease, margin .34s ease;
}
.brand-sub {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink-3); margin-top: 3px; font-weight: 500; white-space: nowrap;
}

/* min-width:0 + overflow-x:auto → modlar tek satıra sığmazsa (8 mod) topbar'ı
   bozmadan yatay kayar; geniş ekranda taşma yok, scrollbar gizli. */
.modes { display: flex; align-items: center; gap: 4px; padding: 0 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  /* taşma ipucu — kenarlarda yumuşatma yalnızca o yönde kaydırılacak içerik varken
     (--mfade-l/r app.js'te scroll konumuna göre güncellenir; sığıyorsa ikisi de 0) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mfade-l, 0px), #000 calc(100% - var(--mfade-r, 0px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--mfade-l, 0px), #000 calc(100% - var(--mfade-r, 0px)), transparent 100%); }
.modes::-webkit-scrollbar { display: none; }
.mode-btn {
  appearance: none; background: none; border: none; cursor: pointer; flex: none;
  color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  letter-spacing: 0.005em; padding: 9px 16px; border-radius: 100px;
  display: flex; align-items: center; gap: 9px;
  position: relative; transition: color .18s, background .18s;
}
.mode-btn:hover { color: var(--ink); background: var(--bg-2); }
.mode-btn .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  transition: all .18s; opacity: 0.5;
}
.mode-btn.active { color: var(--amber); background: var(--amber-dim); }
.mode-btn.active .dot { background: var(--amber); opacity: 1; }
.mode-btn.tutorial-nav-btn {
  color: var(--amber); background: var(--amber-dim); border: 1px solid color-mix(in oklch, var(--amber) 24%, var(--line));
  font-weight: 700; margin-right: 6px; box-shadow: 0 1px 0 color-mix(in oklch, var(--amber) 12%, transparent) inset;
}
.mode-btn.tutorial-nav-btn:hover {
  color: #fff; background: var(--amber); border-color: var(--amber);
}
.tutorial-nav-ic { font-size: 15px; line-height: 1; }
.tutorial-nav-tx { white-space: nowrap; }

.topbar-right {
  margin-left: auto; display: flex; align-items: center; gap: 16px;
  padding: 0 20px 0 24px; border-left: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.01em; font-weight: 500;
}
/* arşiv ölçüsü — sessiz tek satır metadata, orta-nokta ayraçlı */
.stats { display: flex; align-items: baseline; gap: 9px; }
.stat { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-3); white-space: nowrap; }
.stat + .stat::before {
  content: "·"; margin-right: 9px; color: var(--line); font-weight: 600;
}
.stat b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.led { display: none; }
.clock { color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* aydınlık ↔ karanlık tema düğmesi */
.theme-toggle {
  --tt-cut: var(--bg-1);
  appearance: none; flex: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover {
  color: var(--amber); background: var(--bg-2); --tt-cut: var(--bg-2);
  border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle.is-dark { color: var(--amber); }
.tt-glyph { display: block; overflow: visible; }
.tt-core { transition: r .35s cubic-bezier(.2,.7,.3,1); }
.tt-cut { opacity: 0; transition: opacity .3s ease; }
.theme-toggle.is-dark .tt-cut { opacity: 1; }
.tt-rays { transform-box: fill-box; transform-origin: center;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.3,1); }
.theme-toggle.is-dark .tt-rays { opacity: 0; transform: scale(.4) rotate(45deg); }
body[data-motion="0"] .tt-core, body[data-motion="0"] .tt-cut,
body[data-motion="0"] .tt-rays, body[data-motion="0"] .theme-toggle { transition: none; }

/* derin bağlantı kopyalama düğmesi — ikon (tema düğmesiyle aynı ölçü) */
.linkcopy {
  appearance: none; flex: none; cursor: pointer;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.linkcopy:hover {
  color: var(--amber); background: var(--bg-2);
  border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); transform: translateY(-1px);
}
.linkcopy:active { transform: translateY(0); }
.linkcopy.done { color: var(--th-reform); border-color: color-mix(in oklch, var(--th-reform) 50%, var(--line)); }
.linkcopy .lc-ic { font-size: 13px; line-height: 1; }
.linkcopy .lc-tx { display: none; }
/* çok geniş ekranda metinli pill'e dönüşür */
@media (min-width: 1460px) {
  .linkcopy { width: auto; min-height: 40px; padding: 0 12px; border-radius: 100px; font-size: 12.5px; }
  .linkcopy .lc-tx { display: inline; }
}

/* ---- ARAÇ ÇUBUĞU (filtre + zoom) --------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: 16px; padding: 11px 22px;
  border-bottom: 1px solid var(--line); background: var(--bg-0);
  flex: none; min-height: 56px;
}
.tb-label {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ink-3); text-transform: uppercase; flex: none; font-weight: 600;
}

/* ── alt filtre çubuğu KATLA/AÇ düğmesi (−/+ SVG) + katlanmış slim durum ── */
.tb-toggle {
  appearance: none; flex: none; cursor: pointer;
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg-1); color: var(--ink-2);
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s, border-color .18s, color .18s, box-shadow .18s, width .26s, height .26s;
}
.tb-toggle:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 50%, var(--line));
  background: var(--bg-2); transform: translateY(-1px); box-shadow: 0 3px 10px -6px color-mix(in oklch, var(--amber) 70%, transparent); }
.tb-toggle:active { transform: scale(0.93); }
.tb-toggle:focus-visible { outline: 2px solid color-mix(in oklch, var(--amber) 55%, transparent); outline-offset: 2px; }
.tb-toggle .ka { width: 17px; height: 17px; display: block; }
/* − (açık) ↔ + (katlı): dikey çubuk anında belirir (sürekli yeniden-render
   CSS geçişlerini başa sardığı için katlama anlık uygulanır → her zaman doğru) */
.tb-toggle .ka-tbv { transform: scaleY(0); transform-origin: 12px 12px; }
.toolbar.collapsed .tb-toggle .ka-tbv { transform: scaleY(1); }

/* katlanmış: yalnız düğme kalır, çubuk ince bir tutamağa iner → timeline'a yer açılır */
.toolbar.collapsed { min-height: 0; padding-top: 5px; padding-bottom: 5px; gap: 0; }
.toolbar.collapsed > :not(.tb-toggle) { display: none; }
.toolbar.collapsed .tb-toggle { width: 36px; height: 36px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  min-height: 40px; padding: 9px 12px 9px 9px; border: 1px solid var(--line);
  border-radius: 100px; color: var(--ink-2); background: var(--bg-1);
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s, border-color .18s, color .18s, box-shadow .18s;
  user-select: none; white-space: nowrap;
}
/* SVG tema amblemi — alt menünün svg-odaklı çekirdeği; currentColor ile tema rengini alır */
.chip-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
  color: var(--chip-c); filter: grayscale(0); opacity: 1; /* açık taban — 'none'dan geçişin Chrome'da takılmasını önler */
  transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s, opacity .2s; }
.chip-ic .ka { width: 18px; height: 18px; display: block; }
.chip-lbl { line-height: 1; }
.chip-cnt {
  font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1;
  min-width: 15px; padding: 2px 4px; border-radius: 100px; flex: none; text-align: center;
  color: var(--ink); background: color-mix(in oklch, var(--chip-c) 14%, var(--bg-0));
  transition: background .18s, color .18s, opacity .18s; font-variant-numeric: tabular-nums;
}
.chip:hover { border-color: color-mix(in oklch, var(--chip-c) 50%, var(--line));
  background: color-mix(in oklch, var(--chip-c) 9%, var(--bg-1)); color: var(--ink);
  transform: translateY(-1px); box-shadow: 0 3px 12px -6px color-mix(in oklch, var(--chip-c) 70%, transparent); }
.chip:hover .chip-ic { transform: scale(1.16) rotate(-3deg); }
.chip:active { transform: translateY(0) scale(0.97); }
/* açık (gösterilen): amblem canlı ve renkli, içsel animasyonu akar */
.chip.on { color: var(--ink); border-color: color-mix(in oklch, var(--chip-c) 38%, var(--line)); background: color-mix(in oklch, var(--chip-c) 7%, var(--bg-1)); }
/* sönük (filtrelenmiş): amblem griye düşer ve donar — durum gözle okunur */
.chip.off { opacity: 0.62; background: var(--bg-0); }
.chip.off .chip-ic { filter: grayscale(0.85); opacity: 0.5; }
.chip.off .chip-ic .ka, .chip.off .chip-ic .ka * { animation-play-state: paused !important; }
.chip.off .chip-cnt { color: var(--ink-2); background: var(--bg-2); }

.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.zoom-grp { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: var(--bg-1); }
.zoom-btn {
  appearance: none; border: none; background: transparent; color: var(--ink-2);
  cursor: pointer; min-width: 40px; min-height: 40px; font-size: 17px; font-family: var(--font-ui);
  display: grid; place-items: center; transition: all .15s;
}
.zoom-btn:hover { background: var(--bg-3); color: var(--amber); }
.zoom-btn + .zoom-btn { border-left: 1px solid var(--line); }
.era-btn {
  appearance: none; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--ink-2); cursor: pointer; font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.005em; min-height: 40px; padding: 0 15px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.era-btn:hover { background: var(--bg-2); color: var(--ink); border-color: color-mix(in oklch, var(--cyan) 45%, var(--line)); }

/* dönem ön-ayarları tek bir segmentli kontrolde toplandı (zoom-grp ile aynı dil) */
.era-grp { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: var(--bg-1); }
.era-grp .era-btn { border: none; border-radius: 0; background: transparent; min-height: 40px; padding: 0 16px; }
.era-grp .era-btn + .era-btn { border-left: 1px solid var(--line); }
.era-grp .era-btn:hover { background: var(--bg-3); color: var(--amber); }
/* alt menü — reaktif basış + erişilebilir odak halkası (çip/dönem/zoom ortak dil) */
.era-btn:active { transform: scale(0.95); }
.zoom-btn:active { transform: scale(0.9); }
.chip:focus-visible, .era-btn:focus-visible, .zoom-btn:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--chip-c, var(--cyan)) 60%, transparent); outline-offset: 2px;
}

.search {
  display: flex; align-items: center; gap: 9px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 100px; padding: 0 14px; height: 34px;
  transition: border-color .15s;
}
.search:focus-within { border-color: color-mix(in oklch, var(--amber) 50%, var(--line)); }
.search input {
  background: none; border: none; outline: none; color: var(--ink);
  font-family: var(--font-ui); font-size: 13.5px; width: 160px; letter-spacing: 0.005em;
}
.search input::placeholder { color: var(--ink-3); }
.search .ic { color: var(--ink-3); font-size: 14px; }

/* ===========================================================================
   GÖVDE: rail + timeline + drawer
   =========================================================================== */
.body { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---- SOL RAY (mod bağlamı) --------------------------------------------- */
.rail {
  width: var(--rail-w); flex: none; border-right: 1px solid var(--line);
  background: var(--bg-1); display: flex; flex-direction: column; min-height: 0;
}
.rail-head {
  margin: 0;
  padding: 18px 20px 14px;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: 0.005em;
  display: flex; align-items: baseline; justify-content: space-between;
}
.rail-head .cnt { color: var(--ink-3); font-family: var(--font-ui); font-size: 13px; font-weight: 600; }
.rail-body { overflow-y: auto; flex: 1; padding: 4px 12px 12px; }

/* desen kartı (rail) */
.pat {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 15px; margin-bottom: 10px; cursor: pointer; background: var(--bg-1);
  transition: all .16s; box-shadow: var(--shadow-sm);
}
.pat:hover { background: var(--bg-1); border-color: oklch(0.82 0.014 70); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pat.active { border-color: var(--amber); background: color-mix(in oklch, var(--amber) 6%, var(--bg-1)); box-shadow: var(--shadow-md); }
.pat-top { display: flex; align-items: center; gap: 11px; }
.pat-glyph {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 13px; color: var(--amber); background: var(--bg-2);
}
.pat.active .pat-glyph { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.pat-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.005em; }
.pat-cnt { margin-left: auto; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.pat-sum { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; }
.pat-cadence { font-family: var(--font-ui); font-size: 12px; color: var(--amber); font-weight: 600; margin-top: 9px; letter-spacing: 0.01em; }

/* rail bilgi metni */
.rail-note {
  padding: 16px 20px; font-size: 13px; line-height: 1.65; color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}
.rail-note b { color: var(--amber); font-weight: 600; }

/* küçük lejand satırı */
.legend-row { display:flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:12.5px; color:var(--ink-2); padding: 5px 0; }
.legend-row .ln { width: 24px; height: 0; border-top: 2px dashed var(--ink-3); flex: none; }
.legend-row .ln.core { border-top: 2px solid var(--amber); }
.legend-row .ln.user { border-top: 2px dotted var(--cyan); }

/* ---- KOMUTA yönergesi: kısa, ikonlu tek-satır kartlar ---- */
.rail-cmds { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
.rail-cmd { display: flex; align-items: center; gap: 11px; padding: 7px 9px; border-radius: 10px;
  transition: background .15s; }
.rail-cmd:hover { background: color-mix(in oklch, var(--amber) 7%, transparent); }
.rc-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  color: var(--amber); background: color-mix(in oklch, var(--amber) 11%, transparent); font-size: 15px; }
.rc-tx { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; }
.rc-tx b { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink); }
.rc-sub { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3); }

/* ---- LEJANT FİLTRELERİ: tek tek açılıp kapanan satırlar + toplu gizle ---- */
.legend-toggles { display: flex; flex-direction: column; gap: 2px; }
.legend-toggles .lg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lg-head-tx { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); }
.lg-all { appearance: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: none; border: 0; padding: 4px 6px; border-radius: 7px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--ink-3);
  transition: color .15s, background .15s; }
.lg-all:hover { color: var(--amber); background: color-mix(in oklch, var(--amber) 9%, transparent); }
.lg-toggle { appearance: none; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 6px 8px; border-radius: 9px; gap: 11px;
  transition: background .15s, opacity .15s; }
.lg-toggle:hover { background: color-mix(in oklch, var(--amber) 8%, transparent); }
.lg-toggle .lg-sw { flex: none; display: grid; place-items: center; width: 26px; color: var(--ink-2); }
.lg-toggle .lg-lbl { flex: 1; min-width: 0; }
.lg-toggle .lg-chk { flex: none; display: grid; place-items: center; color: var(--amber); }
.lg-toggle.off { opacity: 0.5; }
.lg-toggle.off .lg-sw { color: var(--ink-3); }
.lg-toggle.off .lg-chk { color: var(--ink-3); }
.lgsw { display: block; }

/* ===========================================================================
   TIMELINE TUVALİ
   =========================================================================== */
.canvas-wrap { flex: 1; position: relative; min-width: 0; overflow: hidden; background: var(--bg-0); isolation: isolate; }
.canvas-wrap::before, .canvas-wrap::after { pointer-events: none; }
/* Tek fotoğraf katmanı: seçili olayın görseli ÖZNE değil DOKU.
   Eskiden iki kopya (bulanık tam-ekran + keskin "arşiv duvarı") üst üste gelip
   hayalet/çift-pozlama yaratıyordu. Artık tek, ağır bulanık, düşük opaklıklı,
   desatüre bir zemin — metin ve veri net kalsın diye bilinçli olarak bastırılmış. */
body[data-event-bg="1"] .canvas-wrap::before {
  content: ""; position: absolute; inset: -48px; z-index: 0;
  background-image: var(--selected-event-bg);
  background-size: cover; background-position: center;
  filter: blur(22px) sepia(.16) saturate(.5) brightness(1.05);
  opacity: .20; transform: scale(1.06);
  transition: opacity .5s ease, filter .5s ease;
}
body[data-event-bg="1"] .canvas-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, transparent 0%, color-mix(in oklch, var(--bg-0) 46%, transparent) 74%),
    linear-gradient(90deg, var(--bg-0) 0%, color-mix(in oklch, var(--bg-0) 60%, transparent) 22%, color-mix(in oklch, var(--bg-0) 52%, transparent) 78%, var(--bg-0) 100%);
}
html[data-theme="dark"] body[data-event-bg="1"] .canvas-wrap::before {
  filter: blur(26px) saturate(.55) brightness(.6);
  opacity: .34;
}
html[data-theme="dark"] body[data-event-bg="1"] .canvas-wrap::after {
  background:
    radial-gradient(ellipse 72% 62% at 50% 42%, color-mix(in oklch, var(--bg-0) 12%, transparent) 0%, color-mix(in oklch, var(--bg-0) 68%, transparent) 78%),
    linear-gradient(90deg, var(--bg-0) 0%, color-mix(in oklch, var(--bg-0) 58%, transparent) 28%, color-mix(in oklch, var(--bg-0) 62%, transparent) 78%, var(--bg-0) 100%);
}
/* (Kaldırıldı) Eski "arşiv duvarı" (.canvas-scroll::before): aynı fotoğrafın
   keskin, maskeli ikinci kopyasıydı; tam-ekran bulanık katmanla çift-pozlama
   yaratıyordu. Tek doku katmanı (.canvas-wrap::before) yeterli ve daha sade. */
.canvas-scroll {
  position: absolute; inset: 0; overflow-x: auto; overflow-y: auto;
  overscroll-behavior: contain; cursor: grab; z-index: 1;
}
.canvas-scroll.drag { cursor: grabbing; }
.track {
  position: relative; height: 100%; min-width: 100%;
  /* eksen tek akış öğesi; en alta yerleşir → sticky bottom her kaydırmada alta yapışır.
     mutlak konumlu çocuklar (düğüm/yay/grid) flex dışıdır, etkilenmez. */
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* yıl ekseni — dikey kaydırmada tuvalin altına yapışır, yatayda içerikle birlikte kayar */
.axis {
  position: sticky; bottom: 0; left: 0; height: 44px;
  border-top: 1px solid var(--line);
  background: linear-gradient(to top, var(--bg-1) 0%, var(--bg-1) 62%, transparent);
  z-index: 6; pointer-events: none;
}
/* dikey grid çizgileri — tuvalin tüm yüksekliği boyunca uzanır */
.grid-ln {
  position: absolute; top: 0; bottom: 44px; width: 1px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--line-soft));
  pointer-events: none;
}
.tick { position: absolute; bottom: 0; height: 44px; }
.tick .yr {
  position: absolute; bottom: 13px; left: 0; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.tick.major .yr { color: var(--ink-2); font-weight: 600; }
.tick .notch { position: absolute; bottom: 0; left: 0; width: 1px; height: 7px; background: var(--line); }
.tick.major .notch { height: 11px; background: var(--ink-3); }

/* dönem bantları (Osmanlı / Cumhuriyet / Modern) */
.era-band {
  position: absolute; top: 0; bottom: 44px; z-index: 1; pointer-events: none;
  border-left: 1px dashed var(--line-soft);
}
.era-band .era-tag {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; opacity: 0.7; white-space: nowrap;
}
.era-svg {
  position: absolute; top: 0; left: 0; height: 112px; z-index: 1;
  pointer-events: none; overflow: visible;
}
.era-zone { color: var(--ink-3); }
.era-zone.era-osmanli { color: color-mix(in oklch, var(--amber) 78%, var(--ink-2)); }
.era-zone.era-cumhuriyet { color: color-mix(in oklch, var(--th-rejim) 70%, var(--amber)); }
.era-zone.era-modern { color: color-mix(in oklch, var(--cyan) 76%, var(--ink-2)); }
.era-fill {
  fill: currentColor; opacity: .105;
}
.era-wave {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 1 10;
  stroke-linecap: round; opacity: .45;
}
.era-zone.era-osmanli .era-wave {
  stroke-width: 1.6;
  stroke-dasharray: 1 8;
  opacity: .55;
}
.era-zone.era-cumhuriyet .era-wave {
  stroke-width: 1.2;
  stroke-dasharray: none;
  opacity: .65;
}
.era-zone.era-modern .era-wave {
  stroke-width: 1.5;
  stroke-dasharray: 8 6;
  stroke-linecap: butt;
  opacity: .5;
}
.era-label {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; font-weight: 800; fill: currentColor; opacity: .92;
  paint-order: stroke; stroke: color-mix(in oklch, var(--bg-0) 82%, transparent); stroke-width: 3px;
}
.era-years {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  fill: currentColor; opacity: .58; font-variant-numeric: tabular-nums;
}
.era-icon {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .34;
}
.era-icon-cumhuriyet path:first-child { fill: currentColor; fill-opacity: .12; }
.era-break-line {
  stroke: var(--amber); stroke-width: 2.1; stroke-dasharray: 6 5; opacity: .72;
}
.era-break-dot {
  fill: var(--bg-0); stroke: var(--amber); stroke-width: 2;
}
.era-break-label {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  fill: var(--amber); letter-spacing: .05em;
  paint-order: stroke; stroke: color-mix(in oklch, var(--bg-0) 86%, transparent); stroke-width: 3px;
}

/* SVG bağlantı katmanı */
.links-svg { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
/* Bağlantı yayları — türler birbirinden BELİRGİN farklı; dinlenmede sakin/ince
   (kalabalık görünmesin), sıcak (seçili/hover) hâlde net.
   · Doğrudan (core): düz, kehribar
   · Dolaylı (pattern): ince noktalı, camgöbeği
   · Köprü (bond): uzun kesik-nokta, altın
   · Kullanıcı (user): seyrek kesik */
.link-path { fill: none; stroke: var(--ink-3); stroke-width: 1.5; opacity: 0.0;
  stroke-linecap: round; transition: opacity .3s, stroke .3s, stroke-width .3s; }
.link-path.show { opacity: 0.2; }
.link-path.core { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: none; }
.link-path.pattern { stroke: var(--cyan); stroke-width: 1.4; stroke-dasharray: 1.5 5.5; }
.link-path.user { stroke: var(--cyan); stroke-dasharray: 2 5; stroke-width: 1.6; }
.link-path.bond { stroke: #C99A3A; stroke-width: 1.8; stroke-dasharray: 11 3 2 3; }
.link-path.bond.show { opacity: 0.34; }
.link-path.bond.show.hot { opacity: 0.96; stroke-width: 2.6; }
.link-path.show.hot { opacity: 0.9; stroke-width: 2; }

/* Lejant filtreleri (body-class) — türü tek tek ya da topluca gizle */
body.hide-core   .link-path.core,
body.hide-pattern .link-path.pattern { display: none; }
body.hide-book .node.book { opacity: 0.1; pointer-events: none; filter: grayscale(1); }

/* olay düğümü */
.node {
  position: absolute; transform: translate(-50%, 0); z-index: 4;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  /* kart metni seçilemez/kopyalanamaz — sürükle-kaydırırken de istenmeyen seçimi önler */
  user-select: none; -webkit-user-select: none;
}
.node-dot {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--bg-0); border: 3px solid var(--node-c, var(--ink-3));
  box-shadow: 0 0 0 4px var(--bg-0);
  transition: all .2s; position: relative; z-index: 2;
}
.node-stem {
  width: 2px; background: var(--node-c, var(--line));
  opacity: 0.35; transition: opacity .2s;
}
.node-card {
  width: 178px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 10px 13px 11px; position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s; box-shadow: var(--shadow-sm); overflow: hidden;
  transform-origin: center center;
}
.node-thumb {
  height: 46px;
  margin: -10px -13px 8px -13px;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
  overflow: hidden;
  background: color-mix(in oklch, var(--node-c, var(--amber)) 10%, var(--bg-2));
}
.node-thumb img {
  /* Portre görsellerin çoğunlukta olduğu ince şeritte yüzler alt-yarıda kesilip çene
     görünüyordu; kırpmayı üst-üçlüğe (göz hizası ~%30) yasla. */
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 30%;
  filter: saturate(.82) contrast(.94) sepia(.08);
  opacity: .72;
  /* görsel yüklenirken/kırıkken UA'nın alt-metni + kırık ikonu şeridin dışına
     taşmasın: metin görünmez, taşma zaten .node-thumb'da kırpılıyor. */
  color: transparent; font-size: 0;
}
/* onError → yalnız tonlu zemin (kırık görsel ikonu tamamen kalkar) */
.node-thumb.thumb-broken img { display: none; }
img.img-broken { display: none !important; }
.node:hover .node-thumb img,
.node.selected .node-thumb img,
.node.dom-current .node-thumb img { opacity: .94; filter: saturate(.98) contrast(.98); }
body[data-reactive="1"] .node-card { will-change: transform; }
.node-card::before {                 /* sol tema şeridi */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--node-c, var(--line));
}
.node-yr {
  min-height: 16px; padding-right: 84px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--node-c, var(--ink-3)); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.node-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.2; margin: 3px 0 0; letter-spacing: 0.005em; color: var(--ink); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* desen imzası — her kartı dolduran ağır daireler yerine sessiz bir glif şeridi */
.node-pats {
  position: absolute; top: 9px; right: 10px; max-width: 82px; height: 18px;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  flex-wrap: nowrap; overflow: hidden; margin: 0;
}
.node-pat {
  width: 14px; height: 14px; flex: 0 0 14px; display: grid; place-items: center;
  font-family: Georgia, 'Times New Roman', serif; font-size: 10.5px; font-weight: 700; line-height: 1;
  color: color-mix(in oklch, var(--cyan) 62%, var(--ink-3));
  background: color-mix(in oklch, var(--cyan) 7%, transparent);
  border: 1px solid color-mix(in oklch, var(--cyan) 18%, transparent);
  border-radius: 4px; text-align: center; overflow: hidden;
}
.node-subcnt {
  min-width: 18px; height: 14px; padding: 0 3px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 800; line-height: 1;
  color: var(--ink-3); letter-spacing: 0; font-variant-numeric: tabular-nums;
  background: color-mix(in oklch, var(--bg-3) 64%, transparent);
  border: 1px solid color-mix(in oklch, var(--line) 76%, transparent);
  border-radius: 999px;
}

/* ── NODE KANIT GÖSTERGE: kartın altında ince renkli çubuk ── */
.node-ev {
  height: 3px; margin: 8px -13px -11px; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--line);
}
.node-ev.nev-akademik { background: var(--cyan); opacity: 0.7; }
.node-ev.nev-derleme  { background: var(--amber); opacity: 0.55; }
.node-ev.nev-bekliyor { background: var(--ink-3); opacity: 0.25; }
.node-ev.nev-contested { position: relative; }
.node-ev.nev-contested::after {
  content: ""; position: absolute; top: -2px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 4px var(--amber);
}
.nev-warn {
  font-size: 12px; line-height: 1; position: absolute; right: 13px; top: -13px;
  color: var(--amber); pointer-events: none; display: grid; place-items: center;
}

.node:hover { z-index: 7; }
.node:hover .node-dot { transform: scale(1.2); }
.node:hover .node-card { border-color: var(--node-c); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.node:hover .node-stem { opacity: 0.7; }

.node.selected { z-index: 8; }
.node.selected .node-dot { transform: scale(1.3); box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 7px color-mix(in oklch, var(--node-c) 30%, transparent); }
.node.selected .node-card { border-color: var(--node-c); box-shadow: 0 0 0 2px color-mix(in oklch, var(--node-c) 45%, transparent), var(--shadow-md); }
.node.selected .node-stem { opacity: 0.7; }

.node.related .node-card { border-color: color-mix(in oklch, var(--node-c) 55%, var(--line)); box-shadow: var(--shadow-md); }

/* ── İLİŞKİ İŞARETİ: tıklanan olaya bağlı kartlar — ilişki rengiyle çerçeve + numara ── */
.node.rel-marked { z-index: 7; }
.node.rel-marked .node-card {
  border-color: var(--rel-c, var(--node-c));
  box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--rel-c, var(--node-c)) 50%, transparent), var(--shadow-md);
}
.node.rel-marked .node-card::before { background: var(--rel-c, var(--node-c)); width: 4px; }
.node.rel-marked .node-dot { border-color: var(--rel-c, var(--node-c)); transform: scale(1.12); }
.node.rel-marked .node-stem { opacity: 0.6; background: var(--rel-c, var(--node-c)); }
/* numaralı rozet — sol üst köşede yanar (compare rozetiyle çakışmaz) */
.node-rel-badge {
  position: absolute; top: -10px; left: -10px; z-index: 9;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px;
  background: var(--rel-c, var(--amber)); color: #fff;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg-1);
  box-shadow: 0 2px 9px color-mix(in oklch, var(--rel-c, var(--amber)) 55%, transparent);
}

/* dim: sönükleştirme TAMAMEN filter: opacity() üzerinden. kr-rise giriş
   animasyonu (fill: both) 'opacity' ÖZELLİĞİNİ 1'e sabitlediğinden opacity
   özelliği kullanılmaz — kullanılsaydı hareket-kapalıyken filtreyle çarpışıp
   (0.34 × 0.4 ≈ 0.14) aşırı soluklaşırdı. filter, animasyonun dokunmadığı
   kanaldır → hareket açık/kapalı her durumda tutarlı ~%40 sönük. */
.node.dim { filter: saturate(0.55) opacity(0.4); }
.node.dim:hover { filter: saturate(0.9) opacity(0.95); }

/* karşılaştır / harita seçim rozeti */
.node-badge {
  position: absolute; top: -9px; right: -9px; z-index: 6;
  width: 23px; height: 23px; border-radius: 50%; background: var(--amber); color: #fff;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; box-shadow: var(--shadow-md); border: 2px solid var(--bg-1);
}

/* tuval üstü ipucu */
.canvas-hint {
  position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); font-weight: 500;
  letter-spacing: 0.005em; background: var(--bg-1); border: 1px solid var(--line);
  padding: 9px 18px; border-radius: 100px; z-index: 6; pointer-events: none;
  display: flex; align-items: center; gap: 10px; white-space: nowrap; box-shadow: var(--shadow-md);
}
.canvas-hint b { color: var(--amber); font-weight: 600; }
.canvas-hint kbd {
  font-family: var(--font-ui); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; color: var(--ink-2); font-size: 12px; font-weight: 600;
}

/* boş-durum — hiçbir olay görünmediğinde (tüm temalar kapalı / arama eşleşmesiz) */
.canvas-empty {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  display: grid; place-items: center; padding: 24px;
}
/* makro bant açıkken kartı çizelge alanında ortala, bandın üstünü kapatma */
.canvas-wrap.with-macro .canvas-empty { bottom: 104px; }
.canvas-empty-card {
  pointer-events: auto; max-width: 420px; text-align: center;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 30px; box-shadow: var(--shadow-md);
}
.canvas-empty-ic {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  color: var(--amber); background: var(--amber-dim); border: 1px solid color-mix(in oklch, var(--amber) 22%, var(--line));
}
.canvas-empty-h {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  color: var(--ink); margin-bottom: 7px; letter-spacing: 0.01em;
}
.canvas-empty-s {
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); font-weight: 500;
}

/* ===========================================================================
   SAĞ DRAWER — detay
   =========================================================================== */
.drawer {
  position: fixed; top: var(--panel-top, 120px); right: 0; bottom: 0; z-index: 20;
  width: min(468px, 94vw); flex: none; border-left: 1px solid var(--line); background: var(--bg-1);
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate;
}
/* MASAÜSTÜ: olay/detay çekmecesi sağ kenardan değil, ekranın TAM ORTASINDAN açılan
   yüzen bir kart olarak belirir. Zemin (timeline) etrafta görünür/tıklanır kalır →
   yandaki kartlara tıklayıp dolaşım sürebilir; boşluğa tıklayınca kapanır.
   Domino paneli hariç (o, kendiliğinden oynayan filmin parçası; sağda kalır). */
.drawer:not(.domino-panel) {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  /* Yükseklik, üstte araç çubuğu + altta yıl-şeridi/footer için ~120px pay
     bırakacak biçimde sınırlı → merkez dolap alttaki timeline şeridini ÖRTMEZ. */
  height: auto; max-height: calc(100vh - 240px);
  border: 1px solid var(--line); border-radius: 18px;
}
body[data-event-bg="1"] .drawer::before {
  content: ""; position: absolute; inset: -28px; z-index: 0; pointer-events: none;
  background-image: var(--selected-event-bg); background-size: cover; background-position: center top;
  filter: blur(12px) sepia(.08) saturate(.92) brightness(1.02);
  opacity: .28; transform: scale(1.045);
}
body[data-event-bg="1"] .drawer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--bg-1) 48%, transparent) 0%, color-mix(in oklch, var(--bg-1) 82%, transparent) 44%, var(--bg-1) 100%),
    linear-gradient(90deg, color-mix(in oklch, var(--bg-1) 62%, transparent), var(--bg-1));
}
html[data-theme="dark"] body[data-event-bg="1"] .drawer::before {
  filter: blur(12px) saturate(.82) brightness(.72);
  opacity: .36;
}
.drawer > * { position: relative; z-index: 1; }
.drawer-head {
  padding: 22px 22px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 14px; position: relative;
  background: var(--bg-1);
}
body[data-event-bg="1"] .drawer-head {
  background: color-mix(in oklch, var(--bg-1) 90%, transparent);
  backdrop-filter: blur(2px);
}
.drawer-head::before {            /* tema rengi üst şerit */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--dr-c, var(--line));
}
.dr-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; color: var(--dr-c, var(--ink-3)); text-transform: uppercase; font-weight: 700; }
.dr-date { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); margin-top: 6px; letter-spacing: 0.01em; font-weight: 500; }
.dr-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1.16; margin: 8px 0 0; letter-spacing: 0.002em; color: var(--ink); text-wrap: pretty; }
.dr-close {
  margin-left: auto; appearance: none; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--ink-2); cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
  font-size: 15px; display: grid; place-items: center; flex: none; transition: all .15s;
}
.dr-close:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.drawer-body { overflow-y: auto; flex: 1; padding: 22px; }

.dr-section { margin-bottom: 26px; }
.dr-h {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 11px; display: flex; align-items: center; gap: 10px; font-weight: 700;
}
.dr-h::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.dr-h .h-cnt { color: var(--ink-3); font-weight: 700; }
.dr-summary { font-family: var(--font-display); font-size: 17px; line-height: 1.62; color: var(--ink); }
.dr-detail { font-family: var(--font-display); font-size: 15.5px; line-height: 1.72; color: var(--ink-2); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.005em; font-weight: 500;
  padding: 5px 13px; border-radius: 100px; border: 1px solid color-mix(in oklch, var(--tag-c, var(--line)) 35%, var(--line));
  color: var(--tag-c, var(--ink-2)); background: color-mix(in oklch, var(--tag-c, var(--bg-2)) 9%, var(--bg-1));
  display: inline-flex; align-items: center; gap: 7px;
}
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 5px 11px 5px 6px; display: inline-flex; align-items: center; gap: 8px;
  cursor: default; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.person::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); transition: background .15s; }
.person.person-has-avatar::before { display: none; }
.person-ava {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  flex: none; border: 1px solid color-mix(in oklch, var(--amber) 24%, var(--line));
  background: var(--bg-3); box-shadow: 0 1px 4px oklch(0.3 0.04 50 / 0.22);
}
.person-name { min-width: 0; }
.person.person-link { cursor: pointer; }
.person.person-link:hover { background: var(--amber-dim); border-color: color-mix(in oklch, var(--amber) 40%, var(--line)); color: var(--amber); box-shadow: var(--shadow-sm); }
.person.person-link:hover::before { background: var(--amber); }
.person.person-link:hover .person-ava { transform: scale(1.06); }

/* alt konu satır içi kişi */
.sub-person { }
.sub-person-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 2px 6px 2px 3px; border-radius: 999px;
  background: color-mix(in oklch, var(--sub-c, var(--amber)) 7%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--sub-c, var(--amber)) 18%, var(--line));
  margin: 1px 0;
}
.sub-person-ava {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  flex: none; border: 1px solid color-mix(in oklch, var(--amber) 22%, var(--line)); background: var(--bg-3);
}
.sub-person.sub-person-link { cursor: pointer; text-decoration: none; }
.sub-person.sub-person-link:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 42%, var(--line)); }

/* portresi olan kişi: chip'in noktası kitap-amberine döner + ince halka */
.person.person-bio::before {
  background: var(--amber);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--amber) 22%, transparent);
}
.sub-person.person-bio { color: color-mix(in oklch, var(--amber) 55%, var(--ink)); }
.sub-person.person-bio.sub-person-link:hover { color: var(--amber); }

/* ---- KİŞİ PROFİL PANELİ (PersonDrawer) -------------------------------- */
.pdr-head-inner {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
}
.pdr-svg-avatar { border-radius: 50%; box-shadow: 0 2px 8px oklch(0.3 0.04 50 / 0.25); flex-shrink: 0; }
.pdr-initial-avatar {
  border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 20px;
  color: #F5EFE4; background: var(--pdr-c, var(--amber));
  box-shadow: 0 2px 8px oklch(0.3 0.04 50 / 0.25);
}
/* doğrulanmış portresi olan kişiler için yüz-merkezli kare kesilmiş yerel fotoğraf */
.pdr-photo-avatar {
  border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--bg-3);
  box-shadow: 0 2px 8px oklch(0.3 0.04 50 / 0.25);
  border: 1px solid color-mix(in oklch, var(--amber) 20%, var(--line));
}
/* biyografisiz kişi profillerinde tek başına duran portre atfı */
.pdr-photo-credit-lone {
  margin: 2px 20px 10px; padding: 8px 12px; border-radius: 10px;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3);
  background: var(--bg-2); border: 1px dashed var(--line);
}
/* Kurumsal/kavramsal bağlarda: kişi baş-harfi yerine bağlı olayın küçük görseli */
.bond-event-thumb {
  border-radius: 10px; border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--line));
}
/* Portresiz ve olay-görselsiz bağ figürlerinde bağ tipinin glifi rozetle görünsün */
.bond-glyph-avatar {
  background: color-mix(in oklch, var(--amber) 22%, var(--bg-2));
  color: color-mix(in oklch, var(--amber) 70%, var(--ink-1));
  font-family: 'Georgia', serif; font-size: 22px; font-weight: 700;
  border: 1px solid color-mix(in oklch, var(--amber) 25%, var(--line));
}
.pdr-photo-credit-lone a { color: var(--amber); }
.pdr-back { padding: 10px 20px 2px; }
.pdr-back-btn {
  appearance: none; border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.pdr-back-btn:hover { color: var(--amber); }

.pdr-info-grid { display: flex; flex-direction: column; gap: 8px; }
.pdr-info-row { display: flex; align-items: center; gap: 10px; }
.pdr-info-key { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; min-width: 90px; flex: none; }

/* desen / tema çubukları */
.pdr-bars { display: flex; flex-direction: column; gap: 9px; }
.pdr-bar-row { display: flex; align-items: center; gap: 10px; }
.pdr-bar-label { display: flex; align-items: center; gap: 6px; min-width: 140px; flex: none; }
.pdr-glyph { font-size: 13px; color: var(--ink-3); flex: none; }
.pdr-pat-name { font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); font-weight: 500; line-height: 1.3; }
.pdr-bar-track {
  flex: 1; height: 6px; border-radius: 100px; background: var(--bg-3); overflow: hidden;
}
.pdr-bar-fill {
  height: 100%; border-radius: 100px;
  background: var(--bc, var(--amber));
  width: var(--bw, 0%);
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}
.pdr-pct {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; min-width: 32px; text-align: right;
}

/* ---- PORTRE · BİYOGRAFİ (PersonDrawer içi) ----------------------------- */
.pdr-role {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber);
  letter-spacing: .02em; margin-bottom: 10px;
}
.pdr-bio { display: flex; flex-direction: column; gap: 11px; }
.pdr-bio-para {
  margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.74;
  color: var(--ink-2); text-align: justify; hyphens: auto;
}
/* ilk paragrafa hafif bir "portre" vurgusu: sol kenar amber ipucu */
.pdr-bio-para:first-child {
  border-left: 2px solid color-mix(in oklch, var(--amber) 30%, var(--line));
  padding-left: 12px;
}
.pdr-bio-cite {
  display: flex; gap: 9px; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}
.pdr-bio-cite-ic { color: var(--amber); font-size: 15px; flex: none; margin-top: 1px; }
.pdr-bio-cite-tx { min-width: 0; }
.pdr-bio-cite-tx b { font-weight: 700; color: var(--amber); letter-spacing: .04em;
  text-transform: uppercase; font-size: 11px; }
.pdr-bio-cite .reading-tier { margin-right: 7px; vertical-align: 1px; }
.pdr-photo-credit { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.pdr-photo-credit a { color: var(--amber); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--amber) 30%, transparent); }
.pdr-photo-credit a:hover { border-bottom-color: var(--amber); }

/* ---- PORTRELER GALERİSİ (InfoRail) ------------------------------------ */
.rail-portraits { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.rp-head {
  appearance: none; width: 100%; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 0; display: flex; align-items: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.rp-caret {
  flex: none; color: var(--amber); font-size: 10px; line-height: 1;
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.rail-portraits.open .rp-caret { transform: rotate(90deg); }
.rp-h-txt {
  flex: 1; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
}
.rp-h-txt svg { width: 14px; height: 14px; }
.rp-head .h-cnt { color: var(--ink-3); font-weight: 700; font-family: var(--font-ui); font-size: 12px; }
.rp-head:hover .rp-h-txt { color: color-mix(in oklch, var(--amber) 80%, var(--ink)); }
.rp-body { padding-top: 10px; }
.rp-note {
  font-family: var(--font-display); font-size: 12.5px; line-height: 1.55;
  color: var(--ink-3); margin-bottom: 12px;
}
.rp-group { margin-bottom: 12px; }
.rp-group-h {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px dashed var(--line);
}
.rp-person {
  appearance: none; width: 100%; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 5px 4px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  transition: background .15s;
}
.rp-person:hover { background: var(--amber-dim); }
.rp-person .pdr-svg-avatar { box-shadow: 0 1px 4px oklch(0.3 0.04 50 / 0.22); }
.rp-person-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-person-name {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--ink);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-person:hover .rp-person-name { color: var(--amber); }
.rp-person-meta {
  font-family: var(--font-ui); font-size: 10.5px; color: var(--ink-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- ALT KONULAR (sub-topics) ----------------------------------------- */
.subs { display: flex; flex-direction: column; gap: 10px; }
.subs > .sub {
  border: 1px solid var(--line); border-left: 3px solid var(--sub-c, var(--line));
  border-radius: var(--radius); padding: 10px 12px; background: var(--bg-1);
  transition: all .15s; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: minmax(88px, 112px) 1fr; gap: 12px; align-items: stretch;
}
.subs > .sub:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sub-main { min-width: 0; }
.sub-visual {
  margin: 0; position: relative; min-height: 98px; border-radius: 12px; overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--sub-c, var(--amber)) 38%, var(--line));
  background: color-mix(in oklch, var(--sub-c, var(--amber)) 12%, var(--bg-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, #fff 8%, transparent);
}
.sub-visual img { display: block; width: 100%; height: 100%; min-height: 98px; object-fit: cover; filter: saturate(.9) contrast(.96) sepia(.08); }
.sub-visual figcaption {
  position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 9px; font-weight: 800; letter-spacing: .12em;
  color: #fff8ee; background: color-mix(in oklch, var(--sub-c, var(--amber)) 62%, #150b09 38%);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 5px 16px rgba(0,0,0,.18);
}
.sub-top { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 6px; min-width: 0; }
.sub-yr { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--sub-c, var(--ink-3)); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; flex: none; }
.sub-title {
  min-width: 0; flex: 1 1 auto;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.sub-glyphs {
  margin-left: 4px; max-width: 75px; flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 3px;
  color: var(--cyan); overflow: hidden; padding-top: 1px;
}
.sub-glyphs span {
  width: 15px; height: 15px; flex: 0 0 15px; display: grid; place-items: center;
  font-family: Georgia, 'Times New Roman', serif; font-size: 10.5px; font-weight: 700; line-height: 1;
  color: color-mix(in oklch, var(--sub-c, var(--cyan)) 54%, var(--ink-3));
  background: color-mix(in oklch, var(--sub-c, var(--cyan)) 7%, transparent);
  border: 1px solid color-mix(in oklch, var(--sub-c, var(--cyan)) 18%, transparent);
  border-radius: 4px; text-align: center; overflow: hidden;
}
.sub-sum { font-family: var(--font-display); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.sub-people { margin-top: 7px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 500; }
@media (max-width: 720px) {
  .subs > .sub { grid-template-columns: 1fr; }
  .sub-visual, .sub-visual img { min-height: 116px; }
}

/* bağlantı listesi (detayda) — örüntü motoru çıktısı */
.link-item {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px;
  margin-bottom: 10px; cursor: pointer; transition: all .15s; background: var(--bg-1);
}
.link-item:hover { background: var(--bg-1); border-color: var(--li-c, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* rezonans listesi aç/kapa — ilk 6'dan sonrasını talep üzerine göster */
.reso-more {
  appearance: none; width: 100%; margin-top: 2px; cursor: pointer;
  background: var(--bg-1); border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-2); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em; min-height: 44px; padding: 10px 14px; transition: all .15s;
}
.reso-more:hover { border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); color: var(--amber); background: var(--amber-dim); }
.li-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.li-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--li-c, var(--ink-3)); flex: none; }
.li-yr { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.li-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.li-via { margin-left: auto; font-family: var(--font-ui); font-size: 12px; color: var(--amber); letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; }
.li-note { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin-top: 9px; }
.li-arrow { margin-left: auto; color: var(--ink-3); font-size: 13px; }

/* rezonans (örüntü gücü) metre */
.li-reso { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.reso-bar { flex: 1; height: 5px; border-radius: 100px; background: var(--bg-3); overflow: hidden; }
.reso-fill { height: 100%; border-radius: 100px; background: var(--amber); width: var(--w, 0%); }
.reso-val { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; flex: none; }
.li-shared { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.li-chip {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--cyan);
  border: 1px solid color-mix(in oklch, var(--cyan) 30%, var(--line)); border-radius: 100px;
  padding: 2px 9px; background: var(--cyan-dim);
}

/* ===========================================================================
   KARŞILAŞTIRMA GÖRÜNÜMÜ
   =========================================================================== */
.compare {
  position: fixed; top: var(--panel-top, 120px); right: 0; bottom: 0; z-index: 20;
  width: min(640px, 96vw); flex: none; border-left: 1px solid var(--line); background: var(--bg-1);
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: var(--shadow-lg);
}
.cmp-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
}
.cmp-head .cmp-t { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: 0.005em; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.cmp-col { overflow-y: auto; padding: 22px; }
.cmp-col + .cmp-col { border-left: 1px solid var(--line); }
.cmp-col.empty { display: grid; place-items: center; text-align: center; color: var(--ink-3); }
.cmp-empty-ic { font-size: 30px; color: var(--line); margin-bottom: 12px; }
.cmp-pick { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.7; letter-spacing: 0.005em; }
.cmp-yr { font-family: var(--font-ui); font-size: 12.5px; color: var(--cc, var(--ink-3)); letter-spacing: 0.02em; font-weight: 600; }
.cmp-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; margin: 8px 0 15px; color: var(--ink); text-wrap: balance; }
.cmp-body { font-family: var(--font-display); font-size: 14.5px; line-height: 1.68; color: var(--ink-2); }
.cmp-x { margin-left: auto; }

/* paylaşılan desen analizi (alt şerit) */
.cmp-analysis {
  border-top: 1px solid var(--line); padding: 18px 22px; background: var(--bg-2); flex: none; max-height: 44%; overflow-y: auto;
}
.cmp-shared-h { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 12px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cmp-shared-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cmp-verdict { font-family: var(--font-display); font-size: 15px; line-height: 1.65; color: var(--ink); }
.cmp-verdict b { color: var(--amber); font-weight: 600; }
.cmp-none { font-size: 13.5px; color: var(--ink-3); font-style: italic; }

/* rezonans göstergesi (karşılaştırma) */
.cmp-reso { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.reso-dial {
  --p: 0; width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--amber) calc(var(--p) * 1%), var(--bg-3) 0);
  display: grid; place-items: center; position: relative;
}
.reso-dial::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-2); }
.reso-dial b { position: relative; z-index: 1; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.reso-meta { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.reso-meta .reso-lead { font-weight: 700; color: var(--amber); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ===========================================================================
   AÇILIŞ EKRANI — sakin
   =========================================================================== */
.boot {
  position: fixed; inset: 0; z-index: 100; background: var(--bg-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  animation: kr-bootfade .6s ease forwards; animation-delay: 1.2s;
}
@keyframes kr-bootfade { to { opacity: 0; visibility: hidden; } }
.boot-ring {
  width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--line);
  border-top-color: var(--amber); animation: kr-spin 1s cubic-bezier(.5,.1,.5,.9) infinite;
}
@keyframes kr-spin { to { transform: rotate(360deg); } }
.boot-lines { display: none; }   /* terminal log gizli */
.boot-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; font-size: 38px; color: var(--ink); }
.boot-title span { color: var(--amber); }
.boot-sub { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; margin-top: -10px; }

/* "şimdi" işaretçisi */
.present { position: absolute; top: 0; bottom: 44px; z-index: 3; pointer-events: none; }
.present-ln {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  opacity: 0.5;
}
.present-lbl {
  position: absolute; top: 16px; left: 9px; font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.1em; color: var(--cyan); white-space: nowrap; font-weight: 700;
}
.present-sub {
  position: absolute; top: 33px; left: 9px; font-family: var(--font-ui);
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.01em; white-space: nowrap; font-weight: 500;
}

/* küçük yardımcılar */
.mono { font-family: var(--font-ui); }
.empty-state {
  flex: 1; display: grid; place-items: center; text-align: center; padding: 40px;
  color: var(--ink-3);
}
.empty-state .es-ic { font-size: 32px; margin-bottom: 14px; color: var(--line); }
.empty-state .es-t { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 280px; }

/* ---- SAĞ-ALT YÜZEN ARAÇLAR --------------------------------------------- *
   Dikey istif (KURAL B): dock (asistan) EN ALTTA → ayarlar (⚙) üstünde →
   güncelleme pili EN ÜSTTE. Dock; ⚙ (44px) + gap (12px) + asistan (44px) =
   100px yüksekliğinde, alttan --dock-bottom'a çapalı. Güncelleme pili dock'un
   TAM ÜSTÜNE (dock-bottom + 100px + ≥10px) yerleşir → hiçbiri çakışmaz.
   --dock-bottom tek kaynak: makro/panel durumları bunu kaydırır, pil izler.    */
.floating-dock {
  position: fixed; right: 18px; bottom: var(--dock-bottom, calc(18px + var(--footer-h))); z-index: 1300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.floating-dock .fab,
.floating-dock .kr-asst-launch {
  position: static; right: auto; bottom: auto; pointer-events: auto;
}
.floating-dock .kr-asst-launch.hidden { display: none; }
.floating-dock .kr-asst,
.floating-dock .kr-asst-scrim { pointer-events: auto; }

/* ---- AYARLAR (tweaks) açma düğmesi — bağımsız sitede gerekli ----------- */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 1300;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; font-size: 19px;
  box-shadow: var(--shadow-md);
  transition: color .16s, border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.fab:hover { color: var(--amber); border-color: var(--amber); transform: rotate(40deg); box-shadow: var(--shadow-lg); }

/* mobil ray paneli yardımcıları (masaüstünde gizli) */
.rail-scrim { display: none; }
.rail-fab { display: none; }

/* aktif desen çipi — masaüstünde ray zaten seçili deseni gösterir → gizli;
   mobilde panel kapandıktan sonra etkin deseni + temizle düğmesini gösterir */
.active-pat-chip { display: none; }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .rail { display: none; }

  /* ---- MOBİL RAY PANELİ -------------------------------------------------- *
     Domino dışı modlarda sol ray, mobilde 'display:none' yerine soldan açılan
     bir overlay panel olur (mevcut ray içeriği aynen kullanılır → mod-mod
     yeniden yazım gerekmez). '.rail-fab' açar; scrim'e dokunmak ya da seçim
     yapmak kapatır. (Domino kendi MobileDomino'sunu kullandığı için hariç.)    */
  body:not([data-mode="domino"]) .rail {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0;
    width: min(86vw, 360px); z-index: 60; border-right: 1px solid var(--line);
    transform: translateX(-101%); transition: transform .26s cubic-bezier(.2,.7,.3,1);
    box-shadow: var(--shadow-lg); will-change: transform;
  }
  body.rail-open:not([data-mode="domino"]) .rail { transform: translateX(0); }

  body.rail-open:not([data-mode="domino"]) .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: oklch(0.2 0.02 60 / 0.42); animation: rail-scrim-in .2s ease;
  }

  body:not([data-mode="domino"]) .rail-fab {
    display: inline-flex; align-items: center; gap: 7px;
    position: fixed; left: 12px; top: calc(var(--panel-top, 110px) + 10px); z-index: 48;
    min-height: 40px; padding: 0 15px 0 12px; border-radius: 100px;
    border: 1px solid var(--line); background: var(--bg-1); color: var(--ink);
    font-family: var(--font-ui); font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-md); cursor: pointer;
  }
  body:not([data-mode="domino"]) .rail-fab:active { transform: scale(0.96); }
  body.rail-open .rail-fab { display: none; }
  .rail-fab-ic { font-size: 16px; line-height: 1; }

  /* ---- MOBİL AKTİF DESEN ÇİPİ ------------------------------------------- *
     "Panel" düğmesinin (sol-üst) SAĞINA yerleşir; FAB'la çakışmaz. Desen adı
     + ✕ temizle. Panel açıkken ya da sağ panel açıkken gizlenir (ekranı örter). */
  .active-pat-chip {
    display: inline-flex; align-items: center; gap: 7px;
    position: fixed; z-index: 47;
    left: calc(12px + 96px); top: calc(var(--panel-top, 110px) + 10px);
    max-width: calc(100vw - 12px - 96px - 12px);
    min-height: 40px; padding: 0 6px 0 12px; border-radius: 100px;
    border: 1px solid color-mix(in oklch, var(--amber) 40%, var(--line));
    background: var(--bg-1); color: var(--ink);
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
    box-shadow: var(--shadow-md);
  }
  .apc-glyph { color: var(--amber); font-size: 14px; line-height: 1; flex: none; }
  .apc-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apc-clear {
    appearance: none; flex: none; cursor: pointer; margin-left: 1px;
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: var(--bg-3); color: var(--ink-2); font-size: 13px;
    display: grid; place-items: center; transition: all .15s;
  }
  .apc-clear:hover { background: var(--amber-dim); color: var(--amber); }
  .apc-clear:active { transform: scale(0.9); }
  /* panel ya da sağ panel açıkken çipi gizle (anlık — geçiş donmasın) */
  body.rail-open .active-pat-chip,
  body[data-panel="1"] .active-pat-chip { opacity: 0; pointer-events: none; }

  /* ---- MOBİL FAB ÇAKIŞMA GİDERİMİ --------------------------------------- *
     Sağ panel (çekmece / karşılaştır / köprü) mobilde neredeyse tüm genişliği
     kaplar; sol-üst "Panel" düğmesi panel başlığını ("…ştırma", "…ROL EŞİ"),
     alt-sağ ⚙ + asistan düğmeleri de panel içeriğini örter. Herhangi bir
     overlay açıkken yüzen düğmeleri gizle (masaüstündeki sola-kaydırma yerine
     mobilde tümden gizlemek daha temiz — panel zaten ekranı dolduruyor).
     display kullanılmıyor: geçiş donmasın diye anlık opacity+pointer-events. */
  body[data-panel="1"] .rail-fab,
  body.rail-open .fab,
  body.rail-open .floating-dock,
  body[data-panel="1"] .fab,
  body[data-panel="1"] .floating-dock {
    opacity: 0; pointer-events: none;
  }
  /* mobilde panel açıkken FAB'ları ekran dışına iten masaüstü kaydırmasını iptal et
     (görünmez ama layout dışı kalsınlar; sağa-kayma jankını da önler) */
  body[data-panel="1"] .fab,
  body[data-panel="1"] .kr-asst-launch,
  body[data-panel="1"] .floating-dock { right: 18px; }
}
@keyframes rail-scrim-in { from { opacity: 0; } }

/* ===========================================================================
   DİNAMİK / HAREKET KATMANI
   body[data-motion="1"] etkin; "Hareket" anahtarı ve reduced-motion ile kapanır.
   =========================================================================== */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

/* düğümler sahneye süzülerek girer (x'e göre kademeli) */
@keyframes kr-rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
body[data-motion="1"] .node {
  animation: kr-rise .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(min(var(--enter-i, 0), 40) * 16ms);
}

/* bağlantı yayları: belirir, solid köprüler çizilir, kesik yaylar akar */
@keyframes kr-arc-in { from { opacity: 0; } }
@keyframes kr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kr-flow { to { stroke-dashoffset: -24; } }
body[data-motion="1"] .link-path.show {
  animation: kr-arc-in .55s ease backwards;
  animation-delay: calc(var(--arc-i, 0) * 55ms);
}
body[data-motion="1"] .link-path.core.show {
  stroke-dasharray: 1;
  animation: kr-arc-in .5s ease backwards, kr-draw .7s cubic-bezier(.3,.7,.3,1) backwards;
  animation-delay: calc(var(--arc-i, 0) * 55ms);
}
body[data-motion="1"] .link-path.pattern.show,
body[data-motion="1"] .link-path.user.show {
  animation: kr-arc-in .5s ease backwards, kr-flow 1.1s linear infinite;
}

/* seçili düğümde yayılan nabız halkası */
@keyframes kr-halo {
  0%   { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 6px color-mix(in oklch, var(--node-c) 42%, transparent); }
  70%  { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 18px color-mix(in oklch, var(--node-c) 0%, transparent); }
  100% { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 18px transparent; }
}
body[data-motion="1"] .node.selected .node-dot { animation: kr-halo 1.9s ease-out infinite; }

/* "şimdi" işaretçisi nabzı */
@keyframes kr-present { 0%, 100% { opacity: .28; } 50% { opacity: .62; } }
body[data-motion="1"] .present-ln { animation: kr-present 2.8s ease-in-out infinite; }
@keyframes kr-present-glow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 10px color-mix(in oklch, var(--cyan) 55%, transparent); } }
body[data-motion="1"] .present-lbl { animation: kr-present-glow 2.8s ease-in-out infinite; }

/* rezonans çubuğu 0'dan dolar; karşılaştırma kadranı 0'dan süpürür */
@keyframes kr-fill { from { width: 0; } }
body[data-motion="1"] .reso-fill { animation: kr-fill .9s cubic-bezier(.2,.7,.3,1) backwards; }
body[data-motion="1"] .pdr-bar-fill { animation: kr-fill .7s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes kr-dial { from { --p: 0; } }
body[data-motion="1"] .reso-dial { animation: kr-dial 1s cubic-bezier(.2,.7,.3,1) backwards; }

/* sağ paneller (karşılaştır, domino filmi) sağdan içeri kayar */
@keyframes kr-panel-in { from { opacity: 0; transform: translateX(26px); } }
body[data-motion="1"] .compare,
body[data-motion="1"] .drawer.domino-panel { animation: kr-panel-in .32s cubic-bezier(.2,.7,.3,1) backwards; }
/* olay/detay çekmecesi merkezden büyüyerek açılır (merkez dönüşümünü korur) */
@keyframes kr-drawer-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.975); } }
body[data-motion="1"] .drawer:not(.domino-panel) { animation: kr-drawer-pop .3s cubic-bezier(.2,.7,.3,1) backwards; }

/* alt konu kartları kademeli belirir */
@keyframes kr-sub-in { from { opacity: 0; transform: translateY(8px); } }
body[data-motion="1"] .sub { animation: kr-sub-in .4s ease backwards; animation-delay: calc(var(--sub-i, 0) * 45ms); }
body[data-motion="1"] .link-item { animation: kr-sub-in .42s ease backwards; animation-delay: calc(var(--li-i, 0) * 32ms); }

/* fareyle önizleme: bağlı düğümlere doğru yumuşak nabız */
@keyframes kr-peek { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
body[data-motion="1"] .node.related .node-card { animation: kr-peek 2.4s ease-in-out infinite; }

/* İLİŞKİ İŞARETİ — tıklanınca ilgili kartlar 1·2·3·4… sırasıyla "yanar" */
@keyframes kr-rel-card {
  0%   { box-shadow: 0 0 0 7px color-mix(in oklch, var(--rel-c) 42%, transparent), var(--shadow-md); }
  55%  { box-shadow: 0 0 0 4px color-mix(in oklch, var(--rel-c) 30%, transparent), var(--shadow-md); }
  100% { box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--rel-c) 50%, transparent), var(--shadow-md); }
}
@keyframes kr-rel-badge {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kr-rel-dot {
  0%   { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 5px color-mix(in oklch, var(--rel-c) 55%, transparent); }
  100% { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 11px color-mix(in oklch, var(--rel-c) 0%, transparent); }
}
body[data-motion="1"] .node.rel-marked .node-card {
  animation: kr-rel-card .55s cubic-bezier(.3,.7,.3,1) backwards;
  animation-delay: calc(var(--rel-i, 0) * 95ms);
}
body[data-motion="1"] .node.rel-marked .node-rel-badge {
  animation: kr-rel-badge .46s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--rel-i, 0) * 95ms);
}
body[data-motion="1"] .node.rel-marked .node-dot {
  animation: kr-rel-dot .9s ease-out backwards;
  animation-delay: calc(var(--rel-i, 0) * 95ms);
}

/* canlı saat ve sayaçlar için yumuşak değişim */
.stat b { transition: color .2s; }

/* reduced-motion: tüm dekoratif hareketi durdur */
@media (prefers-reduced-motion: reduce) {
  body[data-motion] .node, body[data-motion] .link-path.show, body[data-motion] .drawer,
  body[data-motion] .compare, body[data-motion] .present-ln, body[data-motion] .present-lbl,
  body[data-motion] .node.selected .node-dot, body[data-motion] .reso-fill,
  body[data-motion] .reso-dial, body[data-motion] .sub, body[data-motion] .link-item,
  body[data-motion] .node.related .node-card,
  body[data-motion] .node.rel-marked .node-card,
  body[data-motion] .node.rel-marked .node-rel-badge,
  body[data-motion] .node.rel-marked .node-dot {
    animation: none !important;
  }
}

/* ===========================================================================
   ÇANKAYA / KİTAP KAYNAĞI KATMANI
   Kaynak okumaları (açılır) + kanon-dışı kitap düğümleri.
   =========================================================================== */
.dr-book {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber);
  background: var(--amber-dim); border: 1px solid color-mix(in oklch, var(--amber) 30%, transparent);
  padding: 3px 11px; border-radius: 100px;
}

/* kaynak güven rozeti + güncellik/durum şeridi */
.dr-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.dr-trust, .dr-asof, .dr-durum {
  display: inline-flex; align-items: center; gap: 5px; cursor: default;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 2.5px 9px; border-radius: 100px; border: 1px solid var(--line);
}
.dr-trust.tr-birincil { color: var(--th-reform); background: color-mix(in oklch, var(--th-reform) 13%, transparent);
  border-color: color-mix(in oklch, var(--th-reform) 38%, var(--line)); }
.dr-trust.tr-kaynak { color: var(--cyan); background: var(--cyan-dim);
  border-color: color-mix(in oklch, var(--cyan) 38%, var(--line)); }
.dr-trust.tr-ai { color: var(--ink-3); background: var(--bg-2); }
.dr-asof { color: var(--ink-3); background: var(--bg-2); }
.dr-durum { color: var(--amber); background: var(--amber-dim);
  border-color: color-mix(in oklch, var(--amber) 32%, transparent); }

/* paylaş satırı (derin bağlantı → WhatsApp/Telegram/X/pano) */
.dr-share { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line); flex-wrap: wrap; }
.dr-share-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.dr-share-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.shr { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--bg-1); border-radius: 100px; padding: 4px 11px;
  transition: color .15s, border-color .15s, background .15s, transform .15s; }
.shr:hover { transform: translateY(-1px); }
.shr-wa:hover { color: #1ebe5d; border-color: color-mix(in oklch, #1ebe5d 45%, var(--line)); background: color-mix(in oklch, #1ebe5d 12%, var(--bg-1)); }
.shr-tg:hover { color: #2aabee; border-color: color-mix(in oklch, #2aabee 45%, var(--line)); background: color-mix(in oklch, #2aabee 12%, var(--bg-1)); }
.shr-x:hover  { color: var(--ink); border-color: var(--ink-3); background: var(--bg-2); }
.shr-cp:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); background: var(--bg-2); }
.shr-cite:hover { color: var(--cyan); border-color: color-mix(in oklch, var(--cyan) 45%, var(--line)); background: var(--bg-2); }
.shr-card:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); background: color-mix(in oklch, var(--amber) 10%, var(--bg-1)); }
.shr.done  { color: var(--th-reform); border-color: color-mix(in oklch, var(--th-reform) 45%, var(--line)); }

/* yöntem & künye modalı */
.kr-about-wrap { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.kr-about-scrim { position: absolute; inset: 0; background: oklch(0.2 0.02 50 / 0.45); backdrop-filter: blur(3px); }
.kr-about { position: relative; z-index: 1; width: min(680px, 100%); max-height: 86vh; overflow: auto;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 26px 28px 30px; }
body[data-motion="1"] .kr-about { animation: kr-about-in .28s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes kr-about-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.kr-about-x { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-2); font-size: 13px; transition: all .15s; }
.kr-about-x:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); background: var(--bg-2); }
.kr-about-head { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; padding-right: 32px; }
.kr-about-mark { font-size: 20px; color: var(--amber); width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--amber-dim); border: 1px solid color-mix(in oklch, var(--amber) 28%, transparent); }
.kr-about-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.kr-about-sub { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.ab-sec { margin-bottom: 18px; }
.ab-sec h3 { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--amber); font-weight: 700; margin-bottom: 7px; }
.ab-sec p { font-family: var(--font-display); font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin-bottom: 8px; }
.ab-ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 9px; }
.ab-ul li { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); padding-left: 15px; position: relative; }
.ab-ul li::before { content: "›"; position: absolute; left: 2px; color: var(--amber); font-weight: 700; }
.kr-footer-method { margin-top: 10px; align-self: flex-start; cursor: pointer; background: none;
  border: none; padding: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber); }
.kr-footer-method:hover { text-decoration: underline; }

/* ---- ÖNERİ KUTUSU ------------------------------------------------------- */
.kr-footer-actions { margin-top: 10px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kr-footer-actions .kr-footer-method { margin-top: 0; align-self: auto; }
.kr-footer-oneri { cursor: pointer; background: none; border: none; padding: 0;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber); }
.kr-footer-oneri:hover { text-decoration: underline; }
.kr-footer-odev { cursor: pointer; background: none; border: none; padding: 0;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber); }
.kr-footer-odev:hover { text-decoration: underline; }

/* ===========================================================================
   ÖDEV MODU — oluşturucu + öğrenci görünümü + yazdırılabilir çalışma kâğıdı
   =========================================================================== */
.odev-body { display: flex; flex-direction: column; gap: 12px; }
.odev-subject { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line); }
.odev-subject-k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); flex: none; }
.odev-subject-v { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.odev-title { width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-1); }
.odev-title:focus { outline: 2px solid color-mix(in oklch, var(--amber) 45%, transparent); outline-offset: 1px; }
.odev-qhead { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.odev-qrow { display: flex; align-items: flex-start; gap: 8px; }
.odev-qn { flex: none; width: 24px; height: 24px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amber-dim); color: var(--amber); font-size: 12px; font-weight: 700; font-family: var(--font-ui); }
.odev-qin { flex: 1; resize: vertical; min-height: 38px; box-sizing: border-box; font-family: var(--font-ui); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg-1); line-height: 1.4; }
.odev-qin:focus { outline: 2px solid color-mix(in oklch, var(--amber) 45%, transparent); outline-offset: 1px; }
.odev-qx { flex: none; margin-top: 6px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-3); cursor: pointer; font-size: 12px; }
.odev-qx:hover { color: var(--th-sol); border-color: color-mix(in oklch, var(--th-sol) 45%, var(--line)); }
.odev-addq { align-self: flex-start; background: none; border: 1px dashed var(--line); border-radius: 100px;
  padding: 7px 14px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.odev-addq:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
.odev-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.odev-make { background: var(--amber); color: #fff; border: none; border-radius: 100px; padding: 11px 18px;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.odev-make:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.odev-make:disabled { opacity: 0.45; cursor: default; }
.odev-explore { background: var(--bg-1); border: 1px solid var(--line); border-radius: 100px; padding: 11px 16px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.odev-explore:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 40%, var(--line)); }
.odev-link-wrap { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line); }
.odev-link { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--ink-2); word-break: break-all; line-height: 1.45; }
.odev-copy { align-self: flex-start; background: var(--bg-1); border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 14px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.odev-copy:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
.odev-copy.done { color: var(--th-reform); border-color: color-mix(in oklch, var(--th-reform) 45%, var(--line)); }
.odev-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.odev-qlist { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.odev-qlist li { font-family: var(--font-ui); font-size: 14px; color: var(--ink); line-height: 1.45; }
/* öğrenci yeniden-açma pili */
.odev-pill { position: fixed; left: 16px; bottom: calc(16px + var(--footer-h)); z-index: 47;
  display: inline-flex; align-items: center; gap: 7px; padding: 0 16px 0 13px; height: 44px; border-radius: 100px;
  border: 1px solid color-mix(in oklch, var(--amber) 35%, var(--line)); background: var(--bg-1); color: var(--amber);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md); }
.odev-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
/* yazdırılabilir çalışma kâğıdı — ekranda gizli, yalnız yazdırmada görünür */
.odev-print { display: none; }
@media print {
  /* taşma/yükseklik kilidini aç → uzun çalışma kâğıdı kırpılmaz, sayfalara bölünür */
  html, body, #root, .app, .body, .canvas-wrap { overflow: visible !important; height: auto !important; max-height: none !important; }
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .odev-print, .odev-print * { visibility: visible !important; }
  .odev-print { display: block !important; position: absolute; left: 0; top: 0; width: 100%;
    padding: 24px 28px; font-family: Georgia, "Times New Roman", serif; color: #1a1a1a; }
  .ow-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1a1a1a; padding-bottom: 8px; }
  .ow-brand { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
  .ow-name { font-size: 12px; }
  .ow-title { font-size: 22px; margin: 16px 0 4px; }
  .ow-subject-h { font-size: 16px; font-weight: 700; margin-top: 12px; }
  .ow-subject-m { font-size: 12px; color: #444; margin-bottom: 6px; }
  .ow-p { font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
  .ow-src-h, .ow-qs-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin: 14px 0 6px; }
  .ow-src ul { margin: 0; padding-left: 18px; font-size: 11.5px; }
  .ow-q { margin: 14px 0; page-break-inside: avoid; }
  .ow-q-t { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
  .ow-line { border-bottom: 1px solid #999; height: 22px; }
  .ow-foot { margin-top: 24px; font-size: 11px; color: #777; text-align: center; }
}

.oneri.kr-about { width: min(560px, 100%); }
.oneri-body { display: flex; flex-direction: column; gap: 16px; }
.oneri-form { display: flex; flex-direction: column; gap: 9px; }
.oneri-nick, .oneri-text {
  width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; outline: none; transition: border-color .18s, box-shadow .18s; }
.oneri-nick { max-width: 240px; }
.oneri-text { resize: vertical; min-height: 76px; line-height: 1.5; }
.oneri-nick:focus, .oneri-text:focus { border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber) 18%, transparent); }
.oneri-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oneri-count { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.oneri-send { cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: #fff; background: var(--amber); border: none; border-radius: 100px; padding: 8px 18px;
  transition: filter .18s, transform .12s; }
.oneri-send:hover:not(:disabled) { filter: brightness(1.06); }
.oneri-send:active:not(:disabled) { transform: translateY(1px); }
.oneri-send:disabled { opacity: .6; cursor: default; }
.oneri-err { font-family: var(--font-ui); font-size: 12.5px; color: var(--th-kriz, #b4332a); }
.oneri-done { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-2);
  background: color-mix(in oklch, var(--amber) 8%, var(--bg-1)); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; }
.oneri-done-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.oneri-list-h { font-family: var(--font-ui); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.oneri-list { display: flex; flex-direction: column; gap: 10px; }
.oneri-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; background: var(--bg-1); }
.oneri-item.is-mine { border-color: color-mix(in oklch, var(--amber) 40%, var(--line));
  background: color-mix(in oklch, var(--amber) 5%, var(--bg-1)); }
.oneri-item-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.oneri-item-nick { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink); }
.oneri-mine-badge { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--amber);
  background: color-mix(in oklch, var(--amber) 14%, transparent); border-radius: 100px; padding: 1px 7px; }
.oneri-item-time { margin-left: auto; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.oneri-item-text { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; }
.oneri-empty { font-family: var(--font-ui); font-size: 13px; color: var(--ink-3); padding: 6px 2px; }

/* ===== İLETİŞİM KARTI (öneri modalı altı · hazırlayan) ==================== */
.oneri-contact {
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid color-mix(in oklch, var(--amber) 20%, var(--line-soft));
}
.oneri-contact-row {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  appearance: none; text-align: left;
  background: var(--amber-dim);
  border: 1px solid color-mix(in oklch, var(--amber) 24%, var(--line));
  border-radius: var(--radius); padding: 11px 14px;
  transition: border-color .15s, transform .12s, background .15s;
}
.oneri-contact-row:hover { transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--amber) 48%, var(--line));
  background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); }
.oneri-contact-row:active { transform: translateY(0); }
.oneri-contact-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px; color: var(--amber);
  background: var(--bg-1); border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--line));
}
.oneri-contact-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oneri-contact-id b { font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; color: var(--ink); letter-spacing: .005em; }
.oneri-contact-role { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.oneri-contact-caret { flex: none; color: var(--amber); font-size: 13px; font-weight: 700;
  transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.oneri-contact.open .oneri-contact-caret { transform: rotate(90deg); }
body[data-motion="0"] .oneri-contact-row, body[data-motion="0"] .oneri-contact-caret { transition: none; }

.oneri-contact-card {
  margin-top: 10px; padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-1);
  animation: oneri-contact-in .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes oneri-contact-in { from { opacity: 0; transform: translateY(-5px); } }
body[data-motion="0"] .oneri-contact-card { animation: none; }
.oneri-contact-note { font-family: var(--font-display); font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2); margin: 0 0 13px; }
.oneri-contact-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oneri-mail-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; letter-spacing: .005em;
  color: #fff; background: var(--amber); padding: 9px 16px; border-radius: 100px;
  border: 1px solid color-mix(in oklch, var(--amber) 70%, #000 10%);
  box-shadow: var(--shadow-sm); transition: transform .14s, box-shadow .14s, filter .14s;
}
.oneri-mail-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.oneri-mail-btn:active { transform: translateY(0); }
.oneri-mail-btn .kic { font-size: 16px; }
.oneri-mail-addr { font-family: var(--font-ui); font-size: 12.5px; color: var(--amber);
  text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--amber) 32%, transparent); }
.oneri-mail-addr:hover { border-bottom-color: var(--amber); }
body[data-motion="0"] .oneri-mail-btn { transition: none; }

/* ===== ZİYARETÇİ NOTLARI (olay çekmecesi · nick'le not) =================== */
/* Davet çapası: Özet altında, drawer'ın ilk ekranında görünür CTA */
.evnotes-teaser {
  width: 100%; display: flex; align-items: center; gap: 11px; margin: 14px 0 24px;
  appearance: none; cursor: pointer; text-align: left;
  background: var(--amber-dim);
  border: 1px solid color-mix(in oklch, var(--amber) 22%, var(--line));
  border-left: 3px solid var(--amber);
  border-radius: var(--radius); padding: 11px 14px;
  transition: border-color .15s, transform .12s, background .15s;
}
.evnotes-teaser:hover { transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
.evnotes-teaser:active { transform: translateY(0); }
.evnotes-teaser-ic { font-size: 17px; line-height: 1; flex: none; }
.evnotes-teaser-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink); }
.evnotes-teaser-tx b { font-weight: 700; }
.evnotes-teaser-sub { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.evnotes-teaser-arrow { flex: none; color: var(--amber); font-size: 14px; font-weight: 700; }
body[data-motion="0"] .evnotes-teaser { transition: none; }

.evnotes { margin-top: 18px; padding-top: 12px;
  border-top: 1px solid color-mix(in oklch, var(--amber) 20%, var(--line-soft)); }
.evnotes-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px; cursor: pointer;
  appearance: none; background: none; border: 0; padding: 4px 2px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em; text-align: left;
}
.evnotes-ic { font-size: 15px; line-height: 1; }
.evnotes-cnt {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 100px;
  display: inline-grid; place-items: center; color: var(--amber);
  background: var(--amber-dim); border: 1px solid color-mix(in oklch, var(--amber) 26%, var(--line));
  font-variant-numeric: tabular-nums;
}
.evnotes-caret { margin-left: auto; color: var(--ink-3); transition: transform .18s; }
.evnotes.open .evnotes-caret { transform: rotate(90deg); }
.evnotes-body { display: flex; flex-direction: column; gap: 13px; margin-top: 12px; }

/* nick seçimi */
.evnotes-nick { display: flex; flex-direction: column; gap: 7px; }
.evnotes-nick-lead { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
.evnotes-nick-row { display: flex; gap: 8px; }
.evnotes-nick-in, .evnotes-text {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.evnotes-nick-in { flex: 1; min-width: 0; }
.evnotes-nick-in:focus, .evnotes-text:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim);
}
.evnotes-nick-ok, .evnotes-send {
  cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: #fff; background: var(--amber); border: 0; border-radius: 10px; padding: 9px 16px;
  white-space: nowrap; transition: filter .15s, transform .1s;
}
.evnotes-nick-ok:hover, .evnotes-send:hover:not(:disabled) { filter: brightness(1.06); }
.evnotes-send:active:not(:disabled) { transform: translateY(1px); }
.evnotes-send:disabled { opacity: .6; cursor: default; }

/* not formu */
.evnotes-form { display: flex; flex-direction: column; gap: 8px; }
.evnotes-as { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-3); }
.evnotes-as b { color: var(--ink-2); }
.evnotes-chg { margin-left: 8px; cursor: pointer; background: none; border: 0; padding: 0;
  font-family: var(--font-ui); font-size: 12px; color: var(--amber); text-decoration: underline; }
.evnotes-text { resize: vertical; min-height: 70px; line-height: 1.5; }
.evnotes-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.evnotes-count { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.evnotes-err { font-family: var(--font-ui); font-size: 12.5px; color: var(--th-kriz, #b4332a); }
.evnotes-done { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px;
  color: var(--ink-2); background: var(--cyan-dim); border: 1px solid color-mix(in oklch, var(--cyan) 24%, var(--line));
  border-radius: 10px; padding: 9px 12px; }
.evnotes-done-ic { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--cyan); color: #fff; font-size: 12px; font-weight: 700; flex: none; }

/* not listesi */
.evnotes-list { display: flex; flex-direction: column; gap: 9px; }
.evnotes-muted { font-family: var(--font-ui); font-size: 13px; color: var(--ink-3); padding: 4px 2px; }
.evnotes-item { border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; background: var(--bg-1); }
.evnotes-item.is-mine { border-color: color-mix(in oklch, var(--amber) 40%, var(--line));
  background: color-mix(in oklch, var(--amber) 5%, var(--bg-1)); }
.evnotes-item-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.evnotes-item-nick { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.evnotes-mine-badge { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--amber); background: var(--amber-dim); border-radius: 100px; padding: 1px 7px; }
.evnotes-item-time { margin-left: auto; font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3); }
.evnotes-item-text { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; }

/* künye / kredi satırı (footer + about modalı) */
.kr-footer-credit { margin-top: 12px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.kr-footer-credit b { color: var(--ink-2); font-weight: 700; }
.kr-footer-credit a { color: var(--amber); text-decoration: none; }
.kr-footer-credit a:hover { text-decoration: underline; }
.ab-credit { font-size: 14px; }
.ab-mail { color: var(--amber); text-decoration: none; font-weight: 600; }
.ab-mail:hover { text-decoration: underline; }

/* ---- REHBERLİ TURLAR ---------------------------------------------------- */

/* seçici (about modal kabuğunu paylaşır) */
.tour-picker-wrap { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.tour-picker { position: relative; z-index: 1; width: min(600px, 100%); max-height: 86vh; overflow: auto;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 24px 26px 26px; }
body[data-motion="1"] .tour-picker { animation: kr-about-in .28s cubic-bezier(.2,.7,.3,1) backwards; }
.tour-list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.tour-item { display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius);
  background: var(--bg-1); padding: 12px 14px; transition: background .18s, transform .15s, box-shadow .2s; }
.tour-item:hover { background: var(--bg-2); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.tour-item-gl { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; color: var(--amber); background: var(--amber-dim);
  border: 1px solid color-mix(in oklch, var(--amber) 28%, transparent); }
.tour-item-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tour-item-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.tour-item-blurb { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.tour-item-cnt { flex: none; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; padding: 2px 9px; }

/* ---- İLK ZİYARET KARŞILAMA (about modal kabuğunu paylaşır) ------------- */
.wel { width: min(560px, 100%); padding: 30px 30px 26px; text-align: center; }
.wel-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; }
.wel-emblem { color: var(--amber); width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 4px; }
.wel-emblem svg { width: 56px; height: 56px; }
.wel-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.05; letter-spacing: .01em; }
.wel-title span { color: var(--amber); }
.wel-sub { font-family: var(--font-display); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 44ch; margin: 4px auto 0; }
.wel-choices { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.wel-choice { display: flex; align-items: center; gap: 14px; cursor: pointer; width: 100%;
  border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius);
  background: var(--bg-1); padding: 13px 15px; transition: background .18s, transform .15s, box-shadow .2s, border-color .2s; }
.wel-choice:hover { background: var(--bg-2); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.wel-choice-gl { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; color: var(--amber); background: var(--amber-dim);
  border: 1px solid color-mix(in oklch, var(--amber) 28%, transparent); }
.wel-choice-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wel-choice-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.wel-choice-blurb { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.wel-choice-go { flex: none; color: var(--ink-3); font-size: 16px; transition: transform .15s, color .15s; }
.wel-choice:hover .wel-choice-go { color: var(--amber); transform: translateX(3px); }
.wel-method { display: block; margin: 18px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber); }
.wel-method:hover { text-decoration: underline; }
.tutorial-welcome {
  width: min(860px, 100%); text-align: left;
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.08fr);
  gap: 22px 26px; align-items: center;
}
.tutorial-welcome .kr-about-x { grid-column: 1 / -1; justify-self: end; margin: -8px -8px -22px 0; }
.wel-copy { min-width: 0; }
.wel-kicker {
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 8px;
}
.tutorial-welcome .wel-title { font-size: clamp(27px, 4vw, 42px); margin-bottom: 8px; }
.tutorial-welcome .wel-sub { margin: 0; max-width: 50ch; font-family: var(--font-display); font-size: 15px; }
.wel-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.wel-quick span {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--bg-2); border-radius: 100px; padding: 5px 9px;
}
.wel-actions {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 2px;
}
.wel-start, .wel-skip {
  appearance: none; cursor: pointer; font-family: var(--font-ui); font-size: 13.5px; font-weight: 800;
  border-radius: 100px; padding: 10px 18px; transition: transform .14s, filter .16s, border-color .16s, background .16s;
}
.wel-start { border: 1px solid var(--amber); background: var(--amber); color: #fff; box-shadow: var(--shadow-sm); }
.wel-skip { border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2); }
.wel-start:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wel-skip:hover { border-color: color-mix(in oklch, var(--amber) 36%, var(--line)); background: var(--bg-2); }
.tutorial-welcome .wel-method { grid-column: 1 / -1; margin-top: 0; justify-self: center; }

.tutorial-film {
  position: relative; min-height: 230px; border: 1px solid var(--line); border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--amber) 8%, transparent), transparent 52%),
    color-mix(in oklch, var(--bg-2) 82%, transparent);
  color: var(--amber); overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 60%, transparent), var(--shadow-sm);
}
.tutorial-film::before {
  content: ""; position: absolute; inset: 14px; border-radius: 14px;
  background-image:
    linear-gradient(to right, color-mix(in oklch, currentColor 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, currentColor 9%, transparent) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .55;
}
.tutorial-film svg { position: relative; width: min(100%, 390px); height: auto; overflow: visible; }
.tutorial-film.compact {
  min-height: 74px; border-radius: 12px; margin: 2px 0 10px;
  background: color-mix(in oklch, var(--amber) 8%, var(--bg-1));
}
.tutorial-film.compact::before { inset: 8px; background-size: 24px 24px; opacity: .35; }
.tutorial-film.compact svg { width: min(100%, 270px); }
.tf-ribbon { fill: none; stroke: url(#tf-grad); stroke-width: 12; stroke-linecap: round; opacity: .9; }
.tf-comet {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: .18 1; stroke-dashoffset: 0; opacity: .9;
}
.tf-axis { stroke: color-mix(in oklch, var(--ink-3) 45%, transparent); stroke-width: 1; }
.tf-node circle {
  fill: var(--bg-1); stroke: currentColor; stroke-width: 2.4;
  filter: drop-shadow(0 3px 5px color-mix(in oklch, currentColor 25%, transparent));
}
.tf-node line { stroke: color-mix(in oklch, currentColor 38%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.tf-node rect { fill: color-mix(in oklch, currentColor 28%, var(--bg-1)); opacity: .8; }
.tf-era rect { fill: color-mix(in oklch, currentColor 11%, var(--bg-1)); stroke: color-mix(in oklch, currentColor 18%, transparent); }
.tf-era text { font-family: var(--font-ui); font-size: 9px; font-weight: 800; letter-spacing: .11em; fill: currentColor; opacity: .7; }
.tf-hand { fill: var(--ink); opacity: .56; transform-origin: center; }
body[data-motion="1"] .tf-comet { animation: tf-comet 2.8s linear infinite; }
body[data-motion="1"] .tf-node circle { animation: tf-pulse 2.8s ease-in-out infinite; }
body[data-motion="1"] .tf-node.n1 circle { animation-delay: .3s; }
body[data-motion="1"] .tf-node.n2 circle { animation-delay: .6s; }
body[data-motion="1"] .tf-node.n3 circle { animation-delay: .9s; }
body[data-motion="1"] .tf-node.n4 circle { animation-delay: 1.2s; }
body[data-motion="1"] .tf-hand { animation: tf-hand 2.8s ease-in-out infinite; }
@keyframes tf-comet { to { stroke-dashoffset: -1; } }
@keyframes tf-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.24); } }
@keyframes tf-hand { 0%,100% { transform: translateX(-18px); opacity: .38; } 50% { transform: translateX(18px); opacity: .66; } }
@media (max-width: 640px) {
  .wel { padding: 24px 20px 22px; }
  .wel-title { font-size: 25px; }
  .wel-sub { font-size: 13.5px; }
  .tutorial-welcome { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .tutorial-welcome .wel-sub { margin: 0 auto; }
  .wel-quick { justify-content: center; }
  .tutorial-film { min-height: 168px; }
}

/* Tam ekran bir modal (karşılama / yöntem / turlar) açıkken yüzen düğmeler
   (asistan + ayar) modalın üstüne taşmasın — onlar near-max z-index'te durur. */
body:has(.kr-about-wrap) .fab,
body:has(.kr-about-wrap) .kr-asst-launch,
body:has(.kr-about-wrap) .floating-dock,
body:has(.tour-picker-wrap) .fab,
body:has(.tour-picker-wrap) .kr-asst-launch,
body:has(.tour-picker-wrap) .floating-dock { display: none; }

/* aktif tur alt çubuğu (timeline üstünde, sağ panel ile rail arasında) */
.tour-bar { position: fixed; z-index: 40; display: flex; justify-content: center;
  left: calc(var(--rail-w) + 20px);
  /* Sağ paneli olan modlarda (özellikle Karşılaştır'ın 640px paneli) sol ray + panel
     orta şeridi okunamaz hâle getirebilir. Sağ inset'i, karta en az ~380px kalacak
     biçimde kısıtla — gerekirse kart panelin üzerine taşar (sol ray inset'i korunur,
     çünkü tur işaretçileri çoğunlukla orada). Geniş ekranlarda normal inset kullanılır. */
  right: min(calc(var(--panel-w, 0px) + 20px), max(20px, calc(100vw - var(--rail-w) - 400px)));
  bottom: 50px; }
body[data-macro="1"] .tour-bar { bottom: 178px; }
body[data-tour="1"] .dom-subtitle { display: none; }   /* tur sırasında domino altyazısını gizle */
.tour-card { width: 100%; max-width: 720px; pointer-events: auto;
  background: color-mix(in oklch, var(--bg-1) 96%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 13px 17px 14px; }
body[data-motion="1"] .tour-card { animation: dom-sub-in .35s cubic-bezier(.2,.7,.3,1); }
.tour-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tour-card-tour { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--amber); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-card-cnt { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); flex: none; }
.tour-card-x { flex: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-3); font-size: 12px; transition: all .15s; }
.tour-card-x:hover { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
.tour-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 4px; }
.tour-card-body { font-family: var(--font-display); font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-bottom: 11px; }
.tour-card-ctl { display: flex; align-items: center; gap: 12px; }
.tour-nav-btn { cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2); border-radius: 100px; padding: 6px 14px;
  transition: all .15s; }
.tour-nav-btn:hover:not(:disabled) { background: var(--bg-2); border-color: var(--ink-3); }
.tour-nav-btn:disabled { opacity: .4; cursor: default; }
.tour-nav-btn.primary { color: #fff; background: var(--amber); border-color: var(--amber); }
.tour-nav-btn.primary:hover { filter: brightness(1.06); background: var(--amber); }
.tour-dots { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; cursor: pointer; background: var(--bg-3);
  border: 1px solid var(--line); transition: background .15s, transform .15s; }
.tour-dot:hover { transform: scale(1.25); }
.tour-dot.done { background: color-mix(in oklch, var(--amber) 45%, var(--bg-3)); }
.tour-dot.on { background: var(--amber); border-color: var(--amber); transform: scale(1.3); }
@media (max-width: 1000px) { .tour-bar { left: 14px; right: 14px; bottom: 16px; } }

/* tur hedef işaretleyici — oyunlardaki gibi "buraya tıkla" çerçevesi + oku.
   Kasıtlı olarak sitenin --amber aksanından (bordo, temaya göre değişir) BAĞIMSIZ,
   sabit bir altın-sarı kullanır — aksi halde seçili kartın kendi kenarlığıyla karışıp
   görünmez olur; işaretleyicinin her temada patlayan bir kontrastı olması gerekir. */
.tour-target-ring { position: fixed; z-index: 900; pointer-events: none; border-radius: 14px;
  border: 3px solid #ffb703;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 0 5px rgba(255,183,3,.3), 0 0 26px 5px rgba(255,183,3,.55); }
body[data-motion="1"] .tour-target-ring { transition: top .22s cubic-bezier(.2,.7,.3,1), left .22s cubic-bezier(.2,.7,.3,1), width .22s cubic-bezier(.2,.7,.3,1), height .22s cubic-bezier(.2,.7,.3,1);
  animation: tour-ring-pulse 1.6s ease-in-out infinite; }
@keyframes tour-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 0 4px rgba(255,183,3,.26), 0 0 18px 3px rgba(255,183,3,.45); }
  50% { box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 0 8px rgba(255,183,3,.36), 0 0 32px 9px rgba(255,183,3,.7); }
}
.tour-arrow { position: fixed; z-index: 901; pointer-events: none; color: #ffb703;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.7)) drop-shadow(0 3px 7px rgba(0,0,0,.4)); transform: translateX(-50%); }
.tour-arrow svg { display: block; width: 28px; height: 34px; }
.tour-arrow.up svg { transform: scaleY(-1); }
body[data-motion="1"] .tour-arrow.down { animation: tour-arrow-bob-down 1.1s ease-in-out infinite; }
body[data-motion="1"] .tour-arrow.up { animation: tour-arrow-bob-up 1.1s ease-in-out infinite; }
@keyframes tour-arrow-bob-down { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
@keyframes tour-arrow-bob-up { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }

.readings { display: flex; flex-direction: column; gap: 9px; }
.sub-readings { margin-top: 9px; }
.reading { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); overflow: hidden; transition: border-color .18s; }
.reading.open { border-color: color-mix(in oklch, var(--amber) 35%, var(--line)); }
.reading-head {
  width: 100%; display: flex; align-items: baseline; gap: 9px; text-align: left;
  background: var(--bg-2); border: none; cursor: pointer; padding: 11px 13px;
  font-family: var(--font-ui); color: var(--ink); transition: background .15s;
}
.reading-head:hover { background: var(--bg-3); }
.reading-caret { color: var(--amber); font-size: 11px; flex: none; transition: transform .26s cubic-bezier(.2,.7,.3,1); }
.reading.open .reading-caret { transform: rotate(90deg); }
.reading-src { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); flex: none; white-space: nowrap; }
.reading-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.reading-body {
  padding: 13px 15px 15px; font-family: var(--font-display); font-size: 14.5px;
  line-height: 1.72; color: var(--ink-2); white-space: pre-line;
  border-top: 1px solid var(--line-soft);
}
.reading-main { display: block; white-space: pre-line; }
/* akademik kaynak künyesi — gövde sonundaki "📖 …" işaretçisinin premium hâli */
.reading-cite {
  display: flex; gap: 9px; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
  white-space: normal;
}
.reading-cite-ic { color: var(--amber); font-size: 15px; flex: none; margin-top: 1px; }
.reading-cite-tx { min-width: 0; }
.reading-cite-tx b { font-weight: 700; color: var(--amber); letter-spacing: .04em;
  text-transform: uppercase; font-size: 11px; }
.reading-cite a {
  display: block; margin-top: 5px; color: var(--amber); text-decoration: none;
  font-size: 12px; word-break: break-all; width: fit-content;
  border-bottom: 1px solid color-mix(in oklch, var(--amber) 30%, transparent);
}
.reading-cite a:hover { border-bottom-color: var(--amber); }

/* ---- REAKTİF AÇILIR/KAPANIR KABUK -------------------------------------- */
.kr-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.2,.7,.3,1); }
.kr-collapse.open { grid-template-rows: 1fr; }
.kr-collapse-inner { overflow: hidden; min-height: 0; }
.kr-collapse > .kr-collapse-inner > * { transition: opacity .3s ease, transform .3s ease; }
.kr-collapse:not(.open) > .kr-collapse-inner > * { opacity: 0; transform: translateY(-5px); }
body[data-motion="0"] .kr-collapse { transition: none; }
body[data-motion="0"] .kr-collapse > .kr-collapse-inner > * { transition: none; }

/* açılır/kapanır okuma bölümü başlığı (dr-h görünümünü koruyan buton) */
.dr-h-btn {
  appearance: none; width: 100%; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 0; -webkit-tap-highlight-color: transparent;
}
.dr-h-btn .dr-h-txt { flex: none; }
.dr-caret {
  flex: none; color: var(--amber); font-size: 10px; line-height: 1;
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.dr-collapsible.open .dr-caret { transform: rotate(90deg); }
.dr-h-btn:hover .dr-h-txt { color: var(--ink-2); }
.dr-collapsible .dr-sec-body { padding-top: 2px; }

/* KAPALI BÖLÜM İPUCU — içerik altta soluklaşarak biter ("devamı var, aç" daveti) */
.dr-peek {
  display: block; width: 100%; text-align: left; appearance: none;
  border: 0; background: none; cursor: pointer; padding: 5px 0 0; margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.dr-peek-inner {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-display); font-size: 14.5px; line-height: 1.55; color: var(--ink-3);
  -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 34%, transparent 100%);
}
.dr-peek-more {
  display: inline-block; margin-top: 3px; font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--amber);
}
.dr-peek:hover .dr-peek-inner { color: var(--ink-2); }
.dr-peek:hover .dr-peek-more { text-decoration: underline; }

/* PORTRELER KAPALI ÖNİZLEME — üst üste binen yüz kümesi + davet ("burada simalar var") */
.rp-peek {
  display: flex; align-items: center; gap: 10px; width: 100%;
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 8px 2px 4px; margin: 0; -webkit-tap-highlight-color: transparent;
}
.rp-peek-avatars { display: inline-flex; flex: none; padding-left: 8px; }
.rp-peek-ava {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none;
  margin-left: -9px; background: var(--bg-2);
  box-shadow: 0 0 0 1.5px var(--bg-1), 0 1px 3px -1px oklch(0.3 0.05 330 / .4);
  transition: margin-left .18s;
}
.rp-peek-ava:first-child { margin-left: 0; }
.rp-peek-ava > * { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.rp-peek:hover .rp-peek-ava { margin-left: -5px; }
.rp-peek:hover .rp-peek-ava:first-child { margin-left: 0; }
.rp-peek-more {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--amber); white-space: nowrap;
}
.rp-peek:hover .rp-peek-more { text-decoration: underline; }

/* ---- GÖRSEL GALERİSİ (ek görseller) ----------------------------------- */
.dr-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dr-gimg {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .2s;
}
.dr-gimg img {
  display: block; width: 100%; height: 132px; object-fit: cover;
  filter: sepia(.1) saturate(.95);
  transition: filter .35s, transform .55s cubic-bezier(.2,.7,.3,1);
}
.dr-gimg:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in oklch, var(--amber) 40%, var(--line)); }
.dr-gimg:hover img { filter: none; transform: scale(1.05); }
.dr-gcap {
  display: block; padding: 6px 9px; font-family: var(--font-ui); font-size: 12px;
  color: var(--ink-2); line-height: 1.35; border-top: 1px solid var(--line-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"] .dr-gimg img { filter: brightness(.85) saturate(.92); }
html[data-theme="dark"] .dr-gimg:hover img { filter: brightness(1) saturate(1); }

/* ---- VESİKA & HABER ARŞİVİ -------------------------------------------- */
.dr-archive { display: flex; flex-direction: column; gap: 9px; }
.arc-item {
  display: flex; gap: 11px; align-items: stretch; text-decoration: none;
  border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  border-radius: var(--radius); background: var(--bg-1); padding: 10px 12px;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.arc-item:hover { background: var(--bg-2); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.arc-vesika { border-left-color: var(--amber); }
.arc-kupur  { border-left-color: var(--cyan); }
.arc-haber  { border-left-color: var(--th-dis); }
.arc-thumb {
  flex: none; width: 54px; height: 54px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
}
.arc-thumb img { width: 100%; height: 100%; object-fit: cover; }
html[data-theme="dark"] .arc-thumb img { filter: brightness(.85); }
.arc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.arc-top { display: flex; align-items: center; gap: 8px; }
.arc-kind {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 1.5px 7px; border-radius: 100px; flex: none;
}
.arc-vesika .arc-kind { color: var(--amber); background: var(--amber-dim); }
.arc-kupur  .arc-kind { color: var(--cyan); background: var(--cyan-dim); }
.arc-haber  .arc-kind { color: var(--th-dis); background: color-mix(in oklch, var(--th-dis) 15%, transparent); }
.arc-date { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.arc-title { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.arc-src { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.arc-ext { color: var(--amber); font-weight: 700; }
.arc-item:hover .arc-title { color: var(--amber); }

/* ---- DÖNEMİN GÖRÜNTÜLERİ · gömülü YouTube (tıkla-oynat) ---------------- */
.dr-videos { display: flex; flex-direction: column; gap: 14px; }
.dr-video {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-1); overflow: hidden; box-shadow: var(--shadow-sm);
}
.dv-poster, .dv-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; cursor: pointer; background-color: var(--bg-3);
  background-size: cover; background-position: center;
}
.dv-frame { aspect-ratio: 16 / 9; background: #000; }
.dv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dv-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0 0 0 / .05), oklch(0 0 0 / .35)); transition: background .2s; }
.dv-poster:hover::after { background: linear-gradient(180deg, oklch(0 0 0 / .05), oklch(0 0 0 / .2)); }
.dv-poster .dv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 100px; z-index: 2;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: color-mix(in oklch, var(--amber) 82%, black); box-shadow: 0 6px 22px oklch(0 0 0 / .4);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.dv-poster:hover .dv-play { transform: translate(-50%, -50%) scale(1.1); }
.dv-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: oklch(0 0 0 / .55); padding: 3px 9px; border-radius: 100px;
}
.dr-video figcaption { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px 12px; }
.dv-top { display: flex; align-items: center; gap: 8px; }
.dv-kind {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 1.5px 7px; border-radius: 100px; color: var(--th-dis);
  background: color-mix(in oklch, var(--th-dis) 15%, transparent);
}
.dv-date { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.dv-title { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.dv-src { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.dv-src a { color: var(--amber); text-decoration: none; font-weight: 600; }
.dv-src a:hover { text-decoration: underline; }
/* ID'siz video → YouTube aramasına çıkan satır kart */
.dr-video-link {
  display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 11px 13px;
}
.dr-video-link .dv-play {
  flex: none; width: 38px; height: 38px; border-radius: 100px; display: grid; place-items: center;
  font-size: 15px; color: #fff; background: color-mix(in oklch, var(--amber) 82%, black);
}
.dr-video-link .dv-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dr-video-link:hover .dv-title { color: var(--amber); }

/* ---- X (TWITTER) GÖMÜLÜ POST ----------------------------------------- */
.dr-tweets { display: flex; flex-direction: column; gap: 12px; }
.dr-tweet { display: flex; flex-direction: column; gap: 7px; }
.tw-load {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1);
  padding: 11px 13px; font-family: var(--font-ui); font-size: 13px; color: var(--ink);
  transition: background .2s, border-color .2s, transform .15s;
}
.tw-load:hover { background: var(--bg-2); transform: translateX(2px); border-color: var(--ink-3); }
.tw-x {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 16px; color: #fff; background: oklch(0.2 0.01 280);
}
html[data-theme="dark"] .tw-x { background: oklch(0.92 0.01 280); color: oklch(0.16 0.01 280); }
.tw-src { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.tw-host { min-height: 40px; }
.tw-host .twitter-tweet { margin: 0 auto !important; }
.tw-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-3); padding: 8px 2px; }
.tw-note.tw-fail a, .tw-open { color: var(--amber); font-weight: 600; text-decoration: none; }
.tw-note.tw-fail a:hover, .tw-open:hover { text-decoration: underline; }
.tw-open { font-family: var(--font-ui); font-size: 11.5px; align-self: flex-end; }

/* kanon-dışı kitap düğümü — kesik hatlar + sıcak aksan */
.node.book .node-dot { border-style: dashed; }
.node.book .node-card {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--amber) 42%, var(--line));
  background: color-mix(in oklch, var(--amber) 4%, var(--bg-1));
}
.node.book .node-card::before {
  background: repeating-linear-gradient(180deg, var(--amber) 0 5px, transparent 5px 11px);
}
.node-src {
  margin-top: 6px; max-width: 100%; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--amber);
  background: var(--amber-dim); padding: 2px 9px; border-radius: 100px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.node-src .kic { width: 13px; height: 13px; flex: 0 0 13px; overflow: hidden; }

.legend-row .ln.book { border-top: 2px dashed var(--amber); }

/* ===========================================================================
   İKİNCİL / MINOR OLAY BALONCUKLARI
   Küçük hap biçimli kart, ince nokta, kısa sapı: önem hiyerarşisini görsel
   olarak kodlar. Tıklanabilir, çekmece içeriği normaldir.
   =========================================================================== */
.node.minor .node-dot {
  width: 9px; height: 9px;
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--bg-0);
}
.node.minor .node-stem { opacity: 0.22; }
.node.minor .node-card {
  width: 124px;
  padding: 6px 11px 8px 11px;
  border-radius: 13px;   /* hap değil sakin köşeli çip — çok satırlı başlıkta lozenge/şişkin görünmesin */
  box-shadow: none;
  border-color: var(--line-soft);
  background: color-mix(in oklch, var(--node-c, var(--ink-3)) 4%, var(--bg-1));
}
/* eski yüzen sol renk şeridi çok satırlı minor kartta "garip renkli border" gibi duruyordu.
   Kaldır; tema rengini yıl etiketinin önündeki küçük nokta taşısın (büyük node'un yarı-görsel
   şerit tasarımı DEĞİL — bilinçli olarak daha sessiz, farklı bir dil). */
.node.minor .node-card::before { display: none; }
.node.minor .node-yr {
  font-size: 12px;
  letter-spacing: 0.02em;
  padding-right: 0;
  display: flex; align-items: center; gap: 6px;
}
.node.minor .node-yr::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--node-c, var(--ink-3));
}
.node.minor .node-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  margin: 1px 0 0;
  color: var(--ink-2);
}
.node.minor .node-pats { display: none; }

.node.minor:hover .node-dot { transform: scale(1.15); }
.node.minor:hover .node-card {
  border-color: color-mix(in oklch, var(--node-c) 55%, var(--line));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  background: var(--bg-1);
}
.node.minor.selected .node-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--bg-0), 0 0 0 5px color-mix(in oklch, var(--node-c) 30%, transparent);
}
.node.minor.selected .node-card {
  border-color: var(--node-c);
  border-radius: 13px;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--node-c) 35%, transparent);
}

/* ===========================================================================
   MAKRO BANT — nüfus · kalkınma · siyasi yapı (zaman eksenine hizalı)
   =========================================================================== */
.canvas-wrap.with-macro .canvas-scroll { bottom: 104px; }
.canvas-wrap.with-macro .canvas-hint { bottom: 120px; }
.macro-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 104px; z-index: 6;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden; box-shadow: 0 -5px 18px -18px oklch(0.4 0.03 50 / 0.25);
}
/* kolay kapatma — sağ üstte ince X */
.mb-close {
  position: absolute; top: 6px; right: 8px; z-index: 5;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-1);
  color: var(--ink-3); font-size: 12px; cursor: pointer;
  display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s;
}
.mb-close:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.mb-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mb-scroll { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mb-track { position: relative; }
.mb-svg { display: block; }
.mb-gutter {
  position: absolute; left: 0; top: 0; width: 108px; height: 100%; z-index: 3;
  background: linear-gradient(90deg, var(--bg-1) 70%, transparent); pointer-events: none;
}
.mb-glabel {
  position: absolute; left: 13px; font-family: var(--font-ui); font-size: 10.5px;
  letter-spacing: 0.07em; font-weight: 700; color: var(--ink-3); text-transform: uppercase;
}
.mb-glabel.mb-dem { color: color-mix(in oklch, var(--th-dis) 65%, var(--ink-3)); }
.mb-reg-lbl {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  fill: #F5EFE4; opacity: 0.95;
}
.mb-pop-area { fill: color-mix(in oklch, var(--amber) 13%, transparent); stroke: none; }
.mb-pop-line { fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linejoin: round; }
.mb-pop-dot { fill: var(--amber); }
.mb-pop-dot.est { fill: var(--bg-1); stroke: var(--amber); stroke-width: 1; }
.mb-dem-line { fill: none; stroke: var(--th-dis); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: 0.92; stroke-linejoin: round; }
.mb-grow.pos { fill: var(--th-reform); opacity: 0.82; }
.mb-grow.neg { fill: var(--th-kriz); opacity: 0.85; }
.mb-grow-base { stroke: var(--line); stroke-width: 1; }
.mb-guide { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.65; }

/* Makro bandı kapalıyken: yukarı açılışı belli eden nabız-ok tutamağı.
   Alt-orta; sağ-alttaki asistan başlatıcısı ve sol-altaki künyeyle çakışmaz. */
.macro-peek {
  appearance: none;
  position: fixed; left: 50%; transform: translateX(-50%);
  top: auto; right: auto; bottom: calc(var(--footer-h) + 9px); z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto; align-self: flex-start;
  width: auto; min-width: 0; max-width: min(240px, calc(100vw - 32px));
  height: 34px; min-height: 34px; max-height: 34px;
  inline-size: auto; min-inline-size: 0; max-inline-size: min(240px, calc(100vw - 32px));
  block-size: 34px; min-block-size: 34px; max-block-size: 34px;
  padding: 0 13px 0 10px; border-radius: 100px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2);
  background: var(--bg-1); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.macro-peek:hover {
  color: var(--ink); transform: translateX(-50%) translateY(-1px);
  border-color: color-mix(in oklch, var(--amber) 45%, var(--line));
  box-shadow: var(--shadow-lg);
}
.macro-peek:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.macro-peek-ar { display: grid; place-items: center; font-size: 15px; color: var(--amber); opacity: 0.72; }
.macro-peek-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.macro-peek:hover .macro-peek-ar { opacity: 1; }
/* nabız — çok parlak/göz yormayan; yalnız hareket açıkken (reduced-motion'a saygılı) */
body[data-motion="1"] .macro-peek-ar { animation: kr-peek-pulse 2.6s ease-in-out infinite; }
@keyframes kr-peek-pulse {
  0%, 100% { transform: translateY(1px); opacity: 0.45; }
  50%      { transform: translateY(-2px); opacity: 0.95; }
}
/* İKON-ONLY varyant — metin yok, küçük yuvarlak grafik düğmesi (merak eden açar) */
.macro-peek.macro-peek-icon {
  width: 38px; min-width: 38px; max-width: 38px;
  inline-size: 38px; min-inline-size: 38px; max-inline-size: 38px;
  height: 38px; min-height: 38px; max-height: 38px;
  block-size: 38px; min-block-size: 38px; max-block-size: 38px;
  padding: 0; gap: 0; border-radius: 50%;
}
.macro-peek.macro-peek-icon .macro-peek-ar { font-size: 17px; color: var(--amber); opacity: 0.82; }
.macro-peek.macro-peek-icon:hover .macro-peek-ar { opacity: 1; }
body[data-motion="1"] .macro-peek-icon .macro-peek-ar { animation: none; }
body[data-tour="1"] .macro-peek { display: none; }   /* tur sırasında merkez tutamağı gizle */
@media (max-width: 1000px) { .macro-peek { bottom: calc(var(--footer-h) + 7px); } }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .macro-peek {
    bottom: calc(var(--footer-h) + 10px);
    max-width: min(210px, calc(100vw - 28px));
    max-inline-size: min(210px, calc(100vw - 28px));
    height: 32px; min-height: 32px; max-height: 32px;
    block-size: 32px; min-block-size: 32px; max-block-size: 32px;
    font-size: 11px;
  }
}

/* ===========================================================================
   NEDENSEL YAYLAR (yönlü ok) — "Neden-Sonuç" modu
   =========================================================================== */
.link-path.causal-tetikleyici { stroke: var(--th-kriz);  stroke-dasharray: none; stroke-width: 2.2; }
.link-path.causal-zemin       { stroke: var(--th-dis);   stroke-dasharray: 6 4;  stroke-width: 1.8; }
.link-path.causal-hizlandirici{ stroke: var(--th-darbe); stroke-dasharray: 2 3;  stroke-width: 2; }
.link-path.causal-tepki       { stroke: var(--th-rejim); stroke-dasharray: 9 3 2 3; stroke-width: 1.9; }
.kr-arrow-head { fill: var(--ink-3); fill: context-stroke; }

/* ===========================================================================
   MAKRO BAĞLAM kutusu (olay çekmecesi)
   =========================================================================== */
.macro-ctx { display: flex; flex-direction: column; gap: 9px; }
.mctx-regime {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line);
}
.mctx-regime .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mctx-regime .lbl { font-family: var(--font-display); font-size: 14px; color: var(--ink); font-weight: 600; }
.mctx-regime .sub { margin-left: auto; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.mctx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mctx-cell { padding: 9px 11px; border-radius: var(--radius); background: var(--bg-1); border: 1px solid var(--line); }
.mctx-cell.full { grid-column: 1 / -1; }
.mctx-key { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.mctx-val { font-family: var(--font-display); font-size: 17px; color: var(--ink); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mctx-val .u { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.mctx-val.pos { color: var(--th-reform); }
.mctx-val.neg { color: var(--th-kriz); }
.mctx-note { font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.mctx-spark { margin-top: 6px; }

/* ===========================================================================
   NEDEN → OLAY → SONUÇ zinciri (olay çekmecesi + Neden-Sonuç modu)
   =========================================================================== */
.causal-wrap { display: flex; flex-direction: column; gap: 7px; }
.cz-band { display: flex; flex-direction: column; gap: 6px; }
.cz-head {
  display: flex; align-items: center; gap: 7px; font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
}
.cz-head .ar { font-size: 13px; }
.cz-head.up .ar { color: var(--th-dis); }
.cz-head.down .ar { color: var(--th-kriz); }
.cz-pivot {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--amber) 40%, var(--line));
  background: color-mix(in oklch, var(--amber) 7%, var(--bg-1));
}
.cz-pivot .yr { font-family: var(--font-ui); font-weight: 700; color: var(--amber); font-size: 12px; font-variant-numeric: tabular-nums; }
.cz-pivot .ttl { font-family: var(--font-display); font-size: 14px; color: var(--ink); font-weight: 600; }
.cz-item {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-radius: var(--radius);
  background: var(--bg-1); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .2s, transform .2s, background .2s; border-left-width: 3px;
}
.cz-item:hover { background: var(--bg-2); transform: translateX(2px); }
.cz-item.up { border-left-color: var(--th-dis); }
.cz-item.down { border-left-color: var(--th-kriz); }
.cz-top { display: flex; align-items: center; gap: 7px; }
.cz-top .yr { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.cz-top .ttl { font-family: var(--font-display); font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.25; }
.cz-type {
  margin-left: auto; flex: none; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px;
  border: 1px solid currentColor;
}
.cz-type.tetikleyici { color: var(--th-kriz); }
.cz-type.zemin { color: var(--th-dis); }
.cz-type.hizlandirici { color: var(--th-darbe); }
.cz-type.tepki { color: var(--th-rejim); }
.cz-mech { font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.cz-lag { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.cz-empty { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-style: italic; padding: 4px 2px; }

/* Neden-Sonuç modu — sol ray içgörü kartları */
.cv-insight {
  padding: 11px 13px; border-radius: var(--radius); background: var(--bg-1);
  border: 1px solid var(--line); margin-bottom: 9px;
}
.cv-insight .k { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.03em; }
.cv-insight .v { font-family: var(--font-display); font-size: 15px; color: var(--amber); font-weight: 600; margin: 2px 0 4px; }
.cv-insight .d { font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.cz-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.cz-legend .lg { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); }
.cz-legend .sw { width: 16px; height: 0; border-top-width: 2.4px; border-top-style: solid; }
.cz-legend .sw.tetikleyici { border-color: var(--th-kriz); }
.cz-legend .sw.zemin { border-color: var(--th-dis); border-top-style: dashed; }
.cz-legend .sw.hizlandirici { border-color: var(--th-darbe); border-top-style: dotted; }
.cz-legend .sw.tepki { border-color: var(--th-rejim); border-top-style: dashed; }

/* MAKRO bant aç/kapa düğmesi */
.era-btn.macro-toggle { gap: 6px; }
.era-btn.macro-toggle.active {
  background: color-mix(in oklch, var(--amber) 12%, var(--bg-1));
  border-color: color-mix(in oklch, var(--amber) 55%, var(--line));
  color: var(--amber); font-weight: 700;
}

/* ===========================================================================
   SVG SANAT KATMANI (KronosArt) — hatlı, hareketli amblemler
   Tüm dekoratif animasyonlar body[data-motion="1"] ile kapılıdır.
   =========================================================================== */
.ka { display: block; }

/* pusula ibresi · küre yörüngesi · radar süpürmesi — kendi merkezinde döner */
@keyframes ka-spin { to { transform: rotate(360deg); } }
body[data-motion="1"] .ka-needle { animation: ka-spin 14s cubic-bezier(.6,.05,.4,.95) infinite; transform-origin: 24px 24px; }
body[data-motion="1"] .ka-sweep { animation: ka-spin 3.6s linear infinite; transform-origin: 24px 24px; }
body[data-motion="1"] .ka-orbit { animation: ka-spin 7s linear infinite; transform-origin: 24px 24px; }

/* kesikli halkalar usulca akar */
@keyframes ka-dash { to { stroke-dashoffset: -36; } }
body[data-motion="1"] .ka-dash-rot { animation: ka-dash 6s linear infinite; }

/* yıldız nabzı + kıvılcımlar */
@keyframes ka-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
body[data-motion="1"] .ka-pulse { animation: ka-pulse 2.6s ease-in-out infinite; transform-origin: 24px 24px; }
@keyframes ka-spark { 0%,100% { opacity: .15; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-3px); } }
body[data-motion="1"] .ka-spark { animation: ka-spark 3s ease-in-out infinite; }
body[data-motion="1"] .ka-spark-2 { animation-delay: .8s; }
body[data-motion="1"] .ka-spark-3 { animation-delay: 1.7s; }

/* radar/sismograf ışıması */
@keyframes ka-blip { 0%,100% { opacity: .1; } 45% { opacity: 1; } }
body[data-motion="1"] .ka-blip { animation: ka-blip 1.8s ease-in-out infinite; }

/* terazi salınımı */
@keyframes ka-tilt { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
body[data-motion="1"] .ka-tilt { animation: ka-tilt 4.5s ease-in-out infinite; transform-origin: 24px 13px; }

/* sismograf çizgisi akar */
@keyframes ka-quake { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -1; } }
body[data-motion="1"] .ka-quake { stroke-dasharray: .65 .35; animation: ka-quake 2.8s linear infinite; }

/* domino taşları: sırayla devrilip zemine yatan, kısa bekleyip kalkan üçlü.
   72° = taş zemin çizgisine (y=41) temas edecek kadar yatar; viewBox sağa
   64'e genişletildiği için devrilen köşe artık kırpılmaz (bkz. svgart.js). */
@keyframes ka-tile-tip {
  0%      { transform: rotate(0); }
  18%     { transform: rotate(72deg); }   /* devrilip zemine yatar */
  45%     { transform: rotate(72deg); }   /* kısa süre yatık kalır (domino hissi) */
  63%     { transform: rotate(0); }        /* kalkar */
  100%    { transform: rotate(0); }        /* bir sonraki tura kadar dik bekler */
}
body[data-motion="1"] .ka-tile { transform-origin: 100% 100%; transform-box: fill-box; }
body[data-motion="1"] .ka-tile-1 { animation: ka-tile-tip 4.2s ease-in-out infinite; }
body[data-motion="1"] .ka-tile-2 { animation: ka-tile-tip 4.2s ease-in-out infinite .35s; }
body[data-motion="1"] .ka-tile-3 { animation: ka-tile-tip 4.2s ease-in-out infinite .7s; }

/* mürekkep çizgisi: bir kez çizilir */
@keyframes ka-ink-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ka-ink { stroke-dasharray: 1; stroke-dashoffset: 0; }
body[data-motion="1"] .ka-ink { animation: ka-ink-draw 1.1s cubic-bezier(.3,.7,.3,1) backwards; }
.ka-flourish { color: var(--ink-3); opacity: .6; margin: 2px 0 10px; }
.ka-gem { opacity: .8; }

/* ---- ATMOSFER: sayfanın arkasında süzülen harita hatları ---------------- */
.atmos-art {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; color: var(--ink);
  opacity: .05;
}
@keyframes ka-drift-a { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-44px); } }
@keyframes ka-drift-b { 0%,100% { transform: translateX(0); } 50% { transform: translateX(38px); } }
body[data-motion="1"] .ka-drift-1 { animation: ka-drift-a 46s ease-in-out infinite; }
body[data-motion="1"] .ka-drift-2 { animation: ka-drift-b 38s ease-in-out infinite; }
body[data-motion="1"] .ka-rose-spin { animation: ka-spin 120s linear infinite; transform-origin: 0 0; }
.ka-rose { opacity: .8; }
@keyframes ka-mote { 0%,100% { transform: translate(0,0); opacity: .35; } 50% { transform: translate(14px,-22px); opacity: .9; } }
body[data-motion="1"] .ka-mote { animation: ka-mote 17s ease-in-out infinite; }
body[data-motion="1"] .ka-mote-2 { animation-duration: 23s; animation-delay: 3s; }
body[data-motion="1"] .ka-mote-3 { animation-duration: 19s; animation-delay: 7s; }
body[data-motion="1"] .ka-mote-4 { animation-duration: 27s; animation-delay: 11s; }
body[data-motion="1"] .ka-mote-5 { animation-duration: 21s; animation-delay: 5s; }

/* takımyıldız düğümleri — yavaş yanıp sönme (yalnız hareket açıkken) */
.ka-stars { opacity: .75; }
@keyframes ka-twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
body[data-motion="1"] .ka-twinkle { animation: ka-twinkle 6s ease-in-out infinite; }
body[data-motion="1"] .ka-twk-2 { animation-duration: 7.5s; animation-delay: 1.2s; }
body[data-motion="1"] .ka-twk-3 { animation-duration: 5s; animation-delay: 2.4s; }
body[data-motion="1"] .ka-twk-4 { animation-duration: 8s; animation-delay: .6s; }
body[data-motion="1"] .ka-twk-5 { animation-duration: 6.5s; animation-delay: 3.1s; }

/* boot amblemi */
.boot-emblem { color: var(--amber); margin-bottom: 18px; }
.boot-emblem .ka-ink-1 { animation-delay: .1s; }
.boot-emblem .ka-ink-2 { animation-delay: .7s; }
.boot-emblem .ka-ink-3 { animation-delay: 1s; }

/* ===========================================================================
   ÇEKMECE GÖRSEL KATMANI — olay fotoğrafı + tema amblemi + gerekçe çipleri
   =========================================================================== */
.dr-theme-art {
  flex: none; width: 36px; height: 36px; margin-right: 0; margin-top: 3px;
  display: grid; place-items: center; opacity: .9;
}
.dr-figure {
  margin: 0 0 22px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow-sm);
}
.dr-figure img {
  display: block; width: 100%; max-height: 230px; object-fit: cover;
  filter: sepia(.14) saturate(.92);
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s;
}
.dr-figure:hover img { transform: scale(1.025); filter: sepia(0) saturate(1); }
.dr-figure figcaption {
  padding: 7px 12px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
}
.dr-figure figcaption a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.dr-figure figcaption a:hover { color: var(--amber); border-color: var(--amber); }
@keyframes kr-fig-in { from { opacity: 0; transform: translateY(10px); } }
body[data-motion="1"] .dr-figure { animation: kr-fig-in .5s cubic-bezier(.2,.7,.3,1) backwards .08s; }

/* karşılaştırma sütunu küçük görseli */
.cmp-thumb { border-radius: 9px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; }
.cmp-thumb img { display: block; width: 100%; height: 92px; object-fit: cover; filter: sepia(.14) saturate(.92); }

/* motor gerekçe çipleri: bu eşleşme neden kuruldu? */
.li-why { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.li-why-chip {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .015em;
  padding: 2.5px 9px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-2);
}
.li-why-chip.w-köprü { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 40%, var(--line)); background: var(--amber-dim); }
.li-why-chip.w-nedensel { color: var(--th-kriz); border-color: color-mix(in oklch, var(--th-kriz) 38%, var(--line)); background: color-mix(in oklch, var(--th-kriz) 8%, var(--bg-1)); }
.li-why-chip.w-desen { color: var(--cyan); border-color: color-mix(in oklch, var(--cyan) 40%, var(--line)); background: var(--cyan-dim); }
.li-why-chip.w-ritim { color: var(--th-rejim); border-color: color-mix(in oklch, var(--th-rejim) 36%, var(--line)); }
.cmp-why { margin: 10px 0 4px; }

/* ===========================================================================
   DOMİNO ETKİSİ MODU — ray, oynatıcı, taş durumları, comet yaylar
   =========================================================================== */
.dom-intro {
  display: flex; gap: 12px; align-items: center; margin: 6px 2px 14px;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.dom-intro b { color: var(--amber); }
.dom-intro-art { color: var(--amber); flex: none; }

.dom-prob .pat-glyph { font-size: 17px; }
.dom-prob.active .pat-sum { color: var(--ink-2); }

/* oynatıcı şeridi */
.dom-player {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
}
.dom-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; transition: all .15s; flex: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
}
.dom-btn:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.dom-btn.big { width: 40px; height: 40px; color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
/* Sabit dururken ▶ yanıp söner → "oynatılabilir" olduğunu davet eder; oynatılırken
   (.pulse yok) durur. Renk/gölge nabzı, düzeni bozacak boyut zıplaması olmadan. */
.dom-btn.big.pulse { animation: dom-play-pulse 1.7s ease-in-out infinite; }
@keyframes dom-play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--amber) 42%, transparent); border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklch, var(--amber) 0%, transparent); border-color: var(--amber); background: var(--amber-dim); }
}
@media (prefers-reduced-motion: reduce) { .dom-btn.big.pulse { animation: none; } }
.dom-btn.spd.on { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.dom-progress { flex: 1; min-width: 0; }
.dom-prog-track {
  height: 7px; border-radius: 100px; background: var(--bg-3);
  border: 1px solid var(--line-soft); cursor: pointer; overflow: hidden;
}
.dom-prog-fill {
  height: 100%; border-radius: 100px; background: var(--amber);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.dom-prog-lbl { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* güncel taş kartı */
.dom-now {
  border: 1px solid color-mix(in oklch, var(--dr-c, var(--amber)) 38%, var(--line));
  border-left: 3px solid var(--dr-c, var(--amber));
  border-radius: var(--radius); background: var(--bg-1); padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
@keyframes kr-dom-now-in { from { opacity: 0; transform: translateY(12px) rotate(.6deg); } }
body[data-motion="1"] .dom-now { animation: kr-dom-now-in .4s cubic-bezier(.2,.7,.3,1) backwards; }
.dom-now-yr { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--dr-c, var(--amber)); letter-spacing: .04em; }
.dom-now-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; margin: 5px 0 7px; cursor: pointer; }
.dom-now-title:hover { color: var(--amber); }
.dom-now-sum { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.dom-causes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dom-cause { border-top: 1px dashed var(--line); padding-top: 9px; }
.dom-cause-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-family: var(--font-ui); }
.dom-cause-from { font-size: 12px; font-weight: 600; color: var(--ink); }
.dom-cause-verb { font-size: 12px; color: var(--ink-3); font-style: italic; }
.dom-cause-mech { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 4px; }
.dom-root-note { margin-top: 11px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-style: italic; }

/* bitiş özeti */
.dom-final {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--amber) 35%, var(--line));
  background: color-mix(in oklch, var(--amber) 5%, var(--bg-1));
}
@keyframes kr-dom-final { from { opacity: 0; transform: scale(.97); } }
body[data-motion="1"] .dom-final { animation: kr-dom-final .45s cubic-bezier(.2,.7,.3,1) backwards .2s; }
.dom-final-txt { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 8px; }
.dom-final-roots { font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.dom-final-roots b { color: var(--amber); }

/* domino altyazı şeridi — timeline üzerinde yüzen bağlam cümlesi */
.dom-subtitle {
  position: absolute; z-index: 6; pointer-events: none;
  left: calc(var(--rail-w) + 24px); right: calc(var(--panel-w, 0px) + 24px);
  bottom: 26px; display: flex; justify-content: flex-start;  /* sol-alt; asistan başlatıcısı sağ-altta kalır */
}
body[data-macro="1"] .dom-subtitle { bottom: 188px; }       /* makro bandının hemen üstünde */
.dom-sub-card {
  /* genişlik sağ-alttaki başlatıcı/fab'ı geçmeyecek şekilde sınırlı (yatay ayrışma) */
  max-width: min(540px, calc(100% - 200px)); min-width: 0;
  background: color-mix(in oklch, var(--bg-1) 90%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px 16px;
}
.dom-sub-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.dom-sub-yr { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--amber); letter-spacing: .02em; flex: none; }
.dom-sub-ev { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dom-sub-tx { font-family: var(--font-display); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.dom-sub-tx b { color: var(--ink); font-weight: 600; }
body[data-motion="1"] .dom-subtitle { animation: dom-sub-in .4s cubic-bezier(.2,.7,.3,1); }
@keyframes dom-sub-in { from { opacity: 0; transform: translateY(9px); } }
@media (max-width: 1000px) { .dom-subtitle { left: 16px; right: 16px; bottom: 20px; } }

/* ---- MOBİL DİKEY DOMİNO ------------------------------------------------- */
.mobile-domino { display: none; }   /* masaüstü: gizli (yatay timeline kullanılır) */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  /* dar ekran + domino: yatay timeline/rail/panel yerine dikey kart yığını */
  body[data-mode="domino"] .canvas-wrap,
  body[data-mode="domino"] .rail,
  body[data-mode="domino"] .drawer.domino-panel,
  body[data-mode="domino"] .dom-subtitle { display: none !important; }
  /* Sola-dayalı tam-genişlik: flex:1 yerine OVERLAY (.tl-list paritesi). Böylece
     mobil domino, kardeş .rail/.canvas-wrap gizlensin gizlenmesin tüm gövdeyi
     kaplar. (Kök tuzak: bu iki kardeşin gizlenmesi body[data-mode="domino"]'ye
     bağlı; data-mode attribute'ü React useEffect ile geç/desync olursa canvas
     akışta kalıp içeriği sağa itiyordu → solda boşluk. Overlay bunu imkânsız
     kılar.) inset:0 → .body position:relative'e oturur; opak zemin arkayı örter. */
  .mobile-domino { display: flex; flex-direction: column;
    position: absolute; inset: 0; z-index: 2; min-width: 0; min-height: 0;
    background: var(--bg-0); }
}
.mdom-probs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px;
  border-bottom: 1px solid var(--line); flex: none; }
.mdom-probs::-webkit-scrollbar { display: none; }
.mdom-prob { flex: none; cursor: pointer; white-space: nowrap; font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: var(--ink-2); background: var(--bg-1); border: 1px solid var(--line); display: inline-flex; align-items: center; min-height: 40px; border-radius: 100px; padding: 10px 14px; }
.mdom-prob.on { color: #fff; background: var(--amber); border-color: var(--amber); }
.mdom-player { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); flex: none; }
.mdom-prog { flex: 1; display: flex; align-items: center; gap: 9px; }
.mdom-prog-track { flex: 1; height: 6px; border-radius: 100px; background: var(--bg-3); cursor: pointer; overflow: hidden; }
.mdom-prog-fill { height: 100%; background: var(--amber); border-radius: 100px; transition: width .3s; }
.mdom-prog-lbl { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.mdom-list { flex: 1; min-height: 0; overflow-y: auto; position: relative; padding: 14px 13px 28px;
  display: flex; flex-direction: column; gap: 0; }
/* taşlar arası dikey bağ çizgisi */
.mdom-card { position: relative; cursor: pointer; border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--radius); background: var(--bg-1); padding: 11px 14px; margin-bottom: 22px; transition: opacity .3s, transform .3s, box-shadow .3s; }
.mdom-card:last-child { margin-bottom: 0; }
.mdom-card::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 2px; height: 22px;
  background: linear-gradient(var(--line), transparent); }
.mdom-card:last-child::after { display: none; }
.mdom-card.is-waiting { opacity: .5; }
.mdom-card.is-current { box-shadow: var(--shadow-md); border-color: color-mix(in oklch, var(--c) 50%, var(--line));
  background: color-mix(in oklch, var(--c) 7%, var(--bg-1)); transform: scale(1.012); }
.mdom-card.is-fallen { opacity: .92; }
.mdom-from { font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--ink-3); margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.mdom-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.mdom-yr { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--c); letter-spacing: .02em; }
.mdom-now-tag { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--amber); }
.mdom-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.mdom-sum { font-family: var(--font-display); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 5px; }
.mdom-empty { flex: 1; display: grid; place-items: center; text-align: center; padding: 40px 24px;
  font-family: var(--font-display); font-size: 15px; color: var(--ink-3); }

/* devrilenler listesi */
.dom-fallen-list { display: flex; flex-direction: column; gap: 3px; }
.dom-fallen-item {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 9px;
  border-radius: 8px; cursor: pointer; transition: background .14s;
  font-family: var(--font-ui);
}
.dom-fallen-item:hover { background: var(--bg-2); }
.dom-fallen-item.cur { background: var(--amber-dim); }
.dom-fallen-item .li-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--li-c, var(--ink-3)); flex: none; align-self: center; }
.dom-fallen-item .li-yr { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.dom-fallen-item .li-title { font-size: 12.5px; color: var(--ink); line-height: 1.3; }

/* ---- timeline'da taş durumları ---- */
/* sırası gelmemiş taş: soluk, hafif geride */
/* bekleyen taşlar da filter: opacity() ile soluk — kr-rise 'opacity'yi 1'e
   sabitlediğinden (yukarıdaki .node.dim ile aynı sebep) opacity özelliği değil. */
.node.dom-waiting { filter: saturate(.65) opacity(.45); }
.node.dom-waiting .node-card { transform: translateY(2px); }
/* devrilmiş taş: yerleşmiş, tema rengi canlı */
.node.dom-fallen .node-card {
  border-color: color-mix(in oklch, var(--node-c) 55%, var(--line));
  box-shadow: var(--shadow-sm);
}
.node.dom-fallen .node-dot { transform: scale(1.12); }
/* DEVRİLEN taş: çarpma anı — sarsıl, yerleş, halka yay */
@keyframes kr-dom-strike {
  0%   { transform: translate(-50%, -14px) rotate(-2.4deg); }
  45%  { transform: translate(-50%, 2px) rotate(1.3deg); }
  70%  { transform: translate(-50%, -1px) rotate(-.5deg); }
  100% { transform: translate(-50%, 0) rotate(0); }
}
.node.dom-current { z-index: 9; }
body[data-motion="1"] .node.dom-current { animation: kr-dom-strike .55s cubic-bezier(.3,.7,.3,1) backwards; }
.node.dom-current .node-card {
  border-color: var(--node-c);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--node-c) 45%, transparent), var(--shadow-lg);
}
@keyframes kr-dom-ring {
  0%   { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 6px color-mix(in oklch, var(--node-c) 55%, transparent); }
  100% { box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 26px transparent; }
}
body[data-motion="1"] .node.dom-current .node-dot { animation: kr-dom-ring 1.1s ease-out infinite; }

/* ---- comet: yay boyunca akan ışık başı ---- */
.link-comet {
  fill: none; stroke: var(--amber); stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: .085 1; stroke-dashoffset: 1.085; opacity: 0;
}
@keyframes kr-comet { from { stroke-dashoffset: 1.085; } to { stroke-dashoffset: -.085; } }
body[data-motion="1"] .link-comet { opacity: .95; animation: kr-comet 1.25s cubic-bezier(.45,.1,.45,.9) infinite; }
body[data-motion="0"] .link-comet { display: none; }

/* domino modunda nedensel yaylar biraz daha belirgin */
.link-path.causal-tetikleyici.hot { stroke-width: 2.6; }

/* ===== TARİHSEL BAĞ — YÜZYIL KÖPRÜLERİ ================================== */
/* sol ray kartı */
.bond-card .pat-cnt { color: #C99A3A; font-variant-numeric: tabular-nums; }
.bond-card.active { border-color: #C99A3A; }
.bond-pair { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.bond-pair .pdr-svg-avatar { flex-shrink: 0; }
.bond-pair-names { display: inline-flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.bond-pair-names b { font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.bond-pair-yr { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bond-arrow { color: #C99A3A; font-weight: 700; font-size: 15px; padding: 0 2px; }
.bond-type-line { margin-top: 9px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: #C99A3A; opacity: .92; }

/* sağ panel — karşılıklı iki figür */
.bond-faces { display: flex; align-items: stretch; gap: 8px; margin: 4px 0 6px; }
.bond-face { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 5px; padding: 14px 8px 12px; border-radius: 14px;
  background: color-mix(in oklab, var(--bf-c, #6B2030) 12%, var(--bg-1, #fff));
  border: 1px solid color-mix(in oklab, var(--bf-c, #6B2030) 32%, transparent); }
.bond-face .pdr-svg-avatar { box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.bond-face-name { font-family: var(--font-display), serif; font-size: 15px; font-weight: 600;
  color: var(--ink); line-height: 1.15; }
.bond-face-role { font-size: 12px; color: var(--ink-3); line-height: 1.2; }
.bond-face-yr { font-size: 13px; font-weight: 700; color: var(--bf-c, var(--amber));
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bond-face.echo { opacity: .97; }
.bond-face-acts { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 3px; }
.bond-mini-btn { font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--bf-c, #6B2030) 40%, transparent);
  background: color-mix(in oklab, var(--bf-c, #6B2030) 16%, transparent); color: var(--ink);
  transition: background .18s, transform .12s; }
.bond-mini-btn:hover { background: color-mix(in oklab, var(--bf-c, #6B2030) 28%, transparent); transform: translateY(-1px); }
.bond-mini-btn.ghost { background: transparent; color: var(--ink-2); }
.bond-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  flex: 0 0 44px; }
.bond-vs-glyph { font-size: 20px; color: #C99A3A; }
.bond-vs-gap { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== ZİNCİR (3+ KUŞAK) · SOL RAY GENİŞLİĞİ · KÜNYE ===================== */

/* Tarihsel Bağ modunda sol raya daha çok yer ver (yüzyıl köprüleri öne çıksın) */
body[data-mode="bonds"] .rail { width: 360px; }
@media (max-width: 1180px) { body[data-mode="bonds"] .rail { width: 300px; } }

/* sol ray köprü kartı biraz daha okunur */
.bond-card .pat-name { font-size: 16.5px; }
.bond-pair { gap: 8px; margin-top: 11px; }
.bond-pair-names b { font-size: 13px; }
.bond-chain-badge {
  margin-top: 10px; font-size: 12px; letter-spacing: .02em; font-weight: 600;
  color: #B07A1E; background: color-mix(in oklab, #C99A3A 14%, transparent);
  border: 1px solid color-mix(in oklab, #C99A3A 34%, transparent);
  border-radius: 8px; padding: 5px 9px; display: block; line-height: 1.4;
}

/* sağ panel — çok-kuşaklı zincir (3+) sarmalı */
.bond-chain { flex-wrap: wrap; justify-content: center; gap: 8px 6px; }
.bond-chain.is-chain .bond-face { flex: 1 1 118px; min-width: 112px; }
.bond-chain.is-chain .bond-vs { flex: 0 0 34px; }
.li-chip.chain-chip {
  color: #B07A1E; border-color: color-mix(in oklab, #C99A3A 40%, transparent);
  background: color-mix(in oklab, #C99A3A 12%, transparent);
}

/* Kaynak & Künye */
.prov { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.prov-note { color: var(--ink-2); margin-bottom: 12px; }
.prov-links-h { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.prov-links-cap { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-bottom: 9px; }
.prov-ai { font-size: 12.5px; color: var(--ink-3); background: var(--bg-2);
  border: 1px dashed var(--line); border-radius: 10px; padding: 9px 11px; line-height: 1.55; }
.prov-links { display: flex; flex-direction: column; gap: 6px; }
.prov-link { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink); text-decoration: none;
  transition: border-color .15s, background .15s, transform .12s; }
.prov-link:hover { border-color: var(--amber); background: var(--amber-dim); transform: translateY(-1px); }
.prov-link-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.prov-ext { color: var(--amber); font-size: 12px; flex: none; }

/* ===== SİTE ALT BİLGİSİ (kaynak/künye uyarısı) ========================== */
.kr-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg-1); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(0,0,0,.05); font-family: var(--font-ui);
}
/* üst şerit: solda uyarı (esnek), sağda kalıcı aksiyonlar */
.kr-footer-bar { display: flex; align-items: center; height: var(--footer-h); }
.kr-footer-toggle {
  flex: 1; min-width: 0; height: var(--footer-h); appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px; padding: 0 16px;
  color: var(--ink-2); font-size: 12px; line-height: 1.3; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
/* sağ kol: öneri/ödev/künye — footer açılmadan HER ZAMAN görünür */
.kr-footer-quick { display: flex; align-items: center; gap: 7px; flex: none;
  padding: 0 12px 0 10px; border-left: 1px solid var(--line-soft); }
.kr-foot-link {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px; border-radius: 100px; border: 1px solid transparent;
  background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 12px;
  font-weight: 600; line-height: 1; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.kr-foot-link-ic { font-size: 12.5px; line-height: 1; }
.kr-foot-oneri { color: var(--amber); background: var(--amber-dim);
  border-color: color-mix(in oklch, var(--amber) 26%, var(--line)); }
.kr-foot-oneri:hover { background: color-mix(in oklch, var(--amber) 16%, var(--bg-1));
  border-color: color-mix(in oklch, var(--amber) 45%, var(--line)); }
.kr-foot-odev { color: var(--ink-2); border-color: var(--line); }
.kr-foot-odev:hover { color: var(--ink); border-color: var(--ink-3); }
.kr-foot-makro { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 30%, var(--line)); }
.kr-foot-makro:hover { background: color-mix(in oklch, var(--amber) 10%, var(--bg-1)); border-color: color-mix(in oklch, var(--amber) 50%, var(--line)); }
.kr-foot-makro.active { background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); color: var(--amber); }
.kr-foot-credit-btn { color: var(--ink-3); padding: 0 6px; }
.kr-foot-credit-btn:hover { color: var(--ink-2); }
.kr-foot-credit-name { font-weight: 700; color: var(--ink-2); }
.kr-foot-credit-tag { color: var(--ink-3); font-weight: 500; }
.kr-foot-sep { width: 1px; height: 14px; background: var(--line); flex: none; }
@media (max-width: 640px) {
  .kr-footer-lead { font-size: 11px; }
  .kr-footer-quick { gap: 5px; padding: 0 8px 0 6px; }
  .kr-foot-link { padding: 0 9px; }
  .kr-foot-odev .kr-foot-link-tx, .kr-foot-makro .kr-foot-link-tx { display: none; }
  .kr-foot-credit-tag { display: none; }
}
.kr-footer-toggle:hover { color: var(--ink); }
.kr-footer-ic { color: var(--amber); font-size: 13px; flex: none; }
.kr-footer-lead { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-footer-lead b { color: var(--ink); font-weight: 600; }
.kr-footer-caret { flex: none; color: var(--amber); font-size: 10px; transition: transform .25s; }
.kr-footer.open .kr-footer-caret { transform: rotate(90deg); }
.kr-footer-more {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  padding: 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.kr-footer.open .kr-footer-more { max-height: 260px; padding: 2px 16px 14px; }
.kr-footer-more p { margin: 0 0 8px; max-width: 1040px; }
.kr-footer-more b { color: var(--ink); font-weight: 600; }
.kr-footer-meta { color: var(--ink-3); font-size: 12px; }
body[data-motion="0"] .kr-footer-more, body[data-motion="0"] .kr-footer-caret { transition: none; }

/* footer için yer aç: gövde ve sabit paneller alt şeritle çakışmasın */
.body { padding-bottom: var(--footer-h); }
.drawer, .compare { bottom: var(--footer-h); }
/* dock (ve içindeki ⚙/asistan) alt çapası tek kaynak --dock-bottom'dan gelir;
   pil de aynı token'ı okuyup dock'un üstüne oturur (KURAL B). */
.floating-dock { bottom: var(--dock-bottom); }

/* makro bandı açıkken tüm sağ-alt istif (dock + pil) bandın üstüne birlikte kalkar
   (alt-sağ çakışmayı önler). Makro band 150px + 12px pay. Tek token → hepsi izler. */
body[data-macro="1"] { --dock-bottom: calc(150px + var(--footer-h) + 12px); }

/* sağ panel açıkken yüzen düğmeler panelin soluna kayar — panel içeriğiyle çakışmasın */
body[data-panel="1"] { --panel-w: min(468px, 94vw); }  /* .drawer genişliğiyle eşit — yüzen düğmeler panele binmesin */
body[data-panel="1"][data-mode="compare"] { --panel-w: min(640px, 96vw); }
body[data-panel="1"] .fab { right: calc(var(--panel-w) + 14px); }
body[data-panel="1"] .kr-asst-launch { right: calc(var(--panel-w) + 70px); }
body[data-panel="1"] .floating-dock { right: calc(var(--panel-w) + 14px); }

/* reduced-motion: sanat katmanını da durdur */
@media (prefers-reduced-motion: reduce) {
  .ka-needle, .ka-sweep, .ka-orbit, .ka-dash-rot, .ka-pulse, .ka-spark, .ka-blip,
  .ka-tilt, .ka-quake, .ka-tile, .ka-ink, .ka-drift-1, .ka-drift-2, .ka-rose-spin,
  .ka-mote, .link-comet, .node.dom-current, .node.dom-current .node-dot,
  .dom-now, .dom-final, .dr-figure {
    animation: none !important;
  }
}

/* ===========================================================================
   TARİH ASİSTANI — Vertex AI destekli sağ slide-over + launcher
   =========================================================================== */
.kr-asst-launch {
  position: fixed; right: 74px; bottom: calc(18px + var(--footer-h)); z-index: 1310;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 16px 0 14px; height: 44px; border-radius: 22px;
  border: 1px solid color-mix(in oklch, var(--amber) 32%, var(--line));
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--amber); cursor: pointer; font-family: var(--font-ui);
  font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  box-shadow: var(--shadow-md); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .18s, opacity .2s;
}
.kr-asst-launch:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--amber); }
.kr-asst-launch.hidden { opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); }
.kr-asst-spark { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--amber) 40%, transparent)); }
body[data-motion="1"] .kr-asst-launch .kr-asst-spark { animation: kr-spark 3.4s ease-in-out infinite; }
@keyframes kr-spark { 0%,100% { opacity: .85; transform: scale(1) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(18deg); } }

.kr-asst-scrim {
  position: fixed; inset: 0; z-index: 1310; background: oklch(0.3 0.02 50 / 0.18);
  opacity: 0; animation: kr-fade .2s ease forwards; backdrop-filter: blur(1.5px);
}
@keyframes kr-fade { to { opacity: 1; } }
@media (min-width: 1100px) { .kr-asst-scrim { display: none; } }

.kr-asst {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1320;
  width: min(440px, 94vw); display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(105%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.kr-asst.open { transform: translateX(0); }

.kr-asst-head {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px 13px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.kr-asst-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--amber), color-mix(in oklch, var(--amber) 40%, transparent)); }
.kr-asst-id { display: flex; align-items: center; gap: 11px; }
.kr-asst-id .kr-asst-spark {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amber-dim); color: var(--amber); font-size: 16px; flex: none;
}
.kr-asst-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.kr-asst-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kr-asst-head-btns { display: flex; align-items: center; gap: 6px; }
.kr-asst-clear {
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--font-ui);
}
.kr-asst-clear:hover { color: var(--amber); border-color: var(--amber); }
/* asistan mod sekmesi — Sor (Vertex) / Emsal Bul (yerel TF-IDF) */
.kr-asst-modes { display: flex; gap: 6px; padding: 10px 16px 0; flex: none; }
.kr-am {
  flex: 1; appearance: none; cursor: pointer; font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; padding: 8px 12px; min-height: 38px;
  border-radius: 100px; border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2); transition: all 0.15s;
}
.kr-am:hover { color: var(--ink); border-color: color-mix(in oklch, var(--amber) 35%, var(--line)); }
.kr-am.on { color: var(--amber); background: var(--amber-dim); border-color: color-mix(in oklch, var(--amber) 40%, var(--line)); }
.kr-asst-x {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-3); cursor: pointer; font-size: 14px; transition: all .15s;
}
.kr-asst-x:hover { background: var(--bg-3); color: var(--ink); }

.kr-asst-body { flex: 1; overflow-y: auto; padding: 16px; scroll-behavior: smooth; }

/* boş durum */
.kr-asst-empty { padding: 18px 6px; text-align: center; }
.kr-asst-empty-mark {
  width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: var(--amber);
  background: radial-gradient(circle at 50% 40%, var(--amber-dim), transparent 70%);
  border: 1px solid color-mix(in oklch, var(--amber) 24%, var(--line));
}
body[data-motion="1"] .kr-asst-empty-mark { animation: kr-spark 4s ease-in-out infinite; }
.kr-asst-empty-h { font-family: var(--font-display); font-size: 21px; color: var(--ink); margin-bottom: 7px; }
.kr-asst-empty-s { font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: 330px; margin: 0 auto 18px; }
.kr-asst-sugs { display: flex; flex-direction: column; gap: 8px; }
.kr-sug {
  text-align: left; border: 1px solid var(--line); background: var(--bg-1); color: var(--ink);
  border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.4; cursor: pointer;
  font-family: var(--font-ui); transition: all .16s; position: relative;
}
.kr-sug::before { content: "✦"; color: var(--amber); margin-right: 8px; font-size: 11px; opacity: .7; }
.kr-sug:hover { border-color: var(--amber); background: var(--amber-dim); transform: translateX(2px); }

/* mesajlar */
.kr-msg { margin-bottom: 16px; }
.kr-msg.user { display: flex; justify-content: flex-end; }
.kr-msg.user .kr-bubble {
  max-width: 84%; background: var(--amber); color: #fff; padding: 9px 13px;
  border-radius: 14px 14px 4px 14px; font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-sm);
}
.kr-msg.bot { display: flex; gap: 10px; align-items: flex-start; }
.kr-bot-mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--amber-dim); color: var(--amber); font-size: 12px; margin-top: 2px;
}
.kr-bot-mark.pulse { animation: kr-pulse 1.1s ease-in-out infinite; }
@keyframes kr-pulse { 0%,100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
.kr-bot-body { flex: 1; min-width: 0; }
.kr-msg.bot.err .kr-answer { color: var(--th-sol); }
.kr-answer { font-size: 13.8px; line-height: 1.62; color: var(--ink); }
.kr-asst-p { margin: 0 0 10px; }
.kr-asst-p:last-child { margin-bottom: 0; }

/* kaynak çipleri */
.kr-src-wrap { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.kr-src-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
/* yanıtın genel temellendirme rozeti */
.kr-ground { text-transform: none; letter-spacing: .01em; font-size: 12px; font-weight: 600;
  padding: 1.5px 8px; border-radius: 100px; border: 1px solid var(--line); white-space: nowrap; }
.kr-ground.g-guclu { color: var(--th-reform); background: color-mix(in oklch, var(--th-reform) 13%, transparent); border-color: color-mix(in oklch, var(--th-reform) 36%, var(--line)); }
.kr-ground.g-orta  { color: var(--amber); background: var(--amber-dim); border-color: color-mix(in oklch, var(--amber) 32%, transparent); }
.kr-ground.g-zayif { color: var(--ink-3); background: var(--bg-2); }
.kr-src-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-src {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink);
  border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 12px; cursor: pointer;
  font-family: var(--font-ui); transition: all .15s;
}
.kr-src:hover { border-color: var(--src-c, var(--amber)); background: color-mix(in oklch, var(--src-c, var(--amber)) 10%, var(--bg-1)); transform: translateY(-1px); }
.kr-src-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--src-c, var(--amber)); flex: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--src-c, var(--amber)) 16%, transparent); }
.kr-src-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.kr-src-y { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* kaynak ilgililiği 3-çubuk sinyal metresi (ham yüzde yerine görsel bant) */
.kr-src-g { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; margin-left: 1px; flex: none; }
.kr-src-g i { width: 2.5px; border-radius: 1px; background: var(--line); transition: background .15s; }
.kr-src-g i:nth-child(1) { height: 4px; }
.kr-src-g i:nth-child(2) { height: 7px; }
.kr-src-g i:nth-child(3) { height: 10px; }
.kr-src.g-guclu { --g-c: var(--th-reform); }
.kr-src.g-orta  { --g-c: var(--amber); }
.kr-src.g-zayif { --g-c: var(--ink-3); }
.kr-src.g-zayif .kr-src-g i:nth-child(1) { background: var(--g-c); }
.kr-src.g-orta  .kr-src-g i:nth-child(1),
.kr-src.g-orta  .kr-src-g i:nth-child(2) { background: var(--g-c); }
.kr-src.g-guclu .kr-src-g i { background: var(--g-c); }

/* ilgili sorular */
.kr-rel { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.kr-rel-q {
  text-align: left; border: none; background: transparent; color: var(--amber);
  font-size: 12.5px; cursor: pointer; padding: 3px 2px; font-family: var(--font-ui); line-height: 1.4;
  border-radius: 6px; transition: all .14s;
}
.kr-rel-q span { opacity: .6; }
.kr-rel-q:hover { color: var(--ink); background: var(--amber-dim); padding-left: 6px; }

/* düşünme */
.kr-thinking { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12.5px; }
.kr-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); opacity: .4; animation: kr-dot 1.1s ease-in-out infinite; }
.kr-thinking span:nth-child(2) { animation-delay: .15s; }
.kr-thinking span:nth-child(3) { animation-delay: .3s; }
.kr-thinking em { margin-left: 6px; font-style: italic; }
@keyframes kr-dot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* footer */
.kr-asst-foot {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 6px; border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.kr-asst-input {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 13px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.45;
  color: var(--ink); background: var(--bg-0); max-height: 120px; transition: border-color .15s, box-shadow .15s;
}
.kr-asst-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.kr-asst-send {
  width: 40px; height: 40px; flex: none; border-radius: 12px; border: none;
  background: var(--amber); color: #fff; cursor: pointer; font-size: 17px; transition: all .16s;
  box-shadow: var(--shadow-sm);
}
.kr-asst-send:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); box-shadow: var(--shadow-md); }
.kr-asst-send:disabled { opacity: .4; cursor: default; }
.kr-asst-disc { padding: 4px 16px 11px; font-size: 12px; color: var(--ink-3); line-height: 1.4; text-align: center; }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .kr-asst-launch { right: 70px; bottom: calc(16px + var(--footer-h)); padding: 0 14px; height: 44px; }
  .kr-asst-launch-t { display: none; }
  .kr-asst-launch { padding: 0; width: 44px; justify-content: center; }
  .kr-asst { width: 100vw; }
}

/* asistan cevabı — madde listesi */
.kr-answer-ul { margin: 4px 0 10px; padding-left: 2px; list-style: none; }
.kr-answer-ul li { position: relative; padding-left: 16px; margin-bottom: 6px; line-height: 1.55; }
.kr-answer-ul li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.kr-answer strong { font-weight: 600; color: var(--ink); }
.kr-answer-ul li strong { color: var(--ink); }

/* ---- TOPBAR RESPONSIVE — dar ekranlarda zarif sığma ---------------------- */
/* dekoratif sayım istatistiklerini orta-genişlikte gizle → 7 mod + bağlantı +
   tema düğmesi taşmadan sığsın (geniş ekranda stats geri gelir) */
@media (max-width: 1560px) {
  .topbar .stats { display: none; }   /* 8 mod + 🔗 + tema için yer aç */
}
@media (max-width: 1180px) {
  .topbar-right { gap: 14px; padding: 0 16px; }
  .topbar-right .clock { display: none; }
}
@media (max-width: 1000px) {
  .topbar-right { display: none; }
  .mode-btn { padding: 9px 12px; font-size: 13px; gap: 6px; }
  .modes { padding: 0 8px; gap: 2px; }
  .brand { padding: 0 16px; }
}
@media (max-width: 860px) {
  /* 7 mod tek satıra sığmaz → yatay kaydır; sağ kenar fade'i "devamı var" sinyali verir
     (scrollbar gizli olduğundan kaydırılabilirlik aksi halde keşfedilemiyordu) */
  .modes {
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .modes::-webkit-scrollbar { display: none; }
  .mode-btn { flex: none; scroll-snap-align: start; min-height: 40px; }
}
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  /* ---- MOBİL FİLTRE ÇUBUĞU — sıkı yerleşim (hedef: açıkken ≤ ~150px) --------
     Masaüstünde çok satıra yayılan blok mobilde ekranın ~%40'ını yiyordu.
     Çözüm: tema çipleri TEK satır yatay kaydırmalı; arama tam satır; dönem
     ön-ayarları + makro + zoom aynı alt satırda toplanır.                       */
  .toolbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; min-height: 0; }

  /* tema çipleri: sarma yerine tek satır yatay kaydırma; sağ kenarda fade ipucu */
  .toolbar .chips {
    flex: 1 1 100%; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; padding-bottom: 1px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .toolbar .chip { flex: none; scroll-snap-align: start; min-height: 34px; padding: 6px 10px 6px 8px; }

  /* alt satır: arama (tam genişlik) + dönem/makro/zoom kompakt.
     DOM sırası: search, era-grp, macro, zoom → zoom en son geldiğinden tek
     başına alt satıra düşüyordu. Çözüm: era+makro+zoom aynı satırda; dönem
     sekmeleri gerekirse yatay kaydırma alanında, zoom sağda sabit kalır.       */
  .toolbar-right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; align-items: center; }
  .search { flex: 1 1 100%; height: 32px; }
  .search input { width: 100%; min-width: 0; flex: 1 1 auto; }

  /* dönem sekmeleri: kalan genişliği alır, taşarsa kendi içinde yatay kaydırılır */
  .era-grp {
    flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .era-grp::-webkit-scrollbar { display: none; }
  .era-grp .era-btn { min-height: 34px; padding: 0 8px; font-size: 12px; flex: 0 0 auto; white-space: nowrap; }

  /* makro ve zoom: küçülmeyen sabit öğeler, dönem satırının sağında dururlar */
  .toolbar-right .macro-toggle { flex: none; min-height: 34px; padding: 0 9px; }
  .zoom-grp { flex: none; }
  .zoom-grp .zoom-btn { min-width: 32px; min-height: 34px; }

  /* katlanmış çubuk: yalnız düğme değil, yanında "Filtreler" etiketi de dursun
     (kapalıyken düğmenin ne açtığı belli olsun) */
  .toolbar.collapsed { padding: 6px 12px; }
  .toolbar.collapsed::after {
    content: "Filtreler"; display: inline-flex; align-items: center;
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--ink-2); margin-left: 9px;
  }
}
@media (max-width: 640px) {
  /* marka alt-başlığını gizle → mod gezinmesine yer aç; modlar kalan genişliği alıp kaydırılsın */
  .brand-sub { display: none; }
  .brand { padding: 0 12px; gap: 9px; }
  .brand-name { font-size: 19px; }
  .modes { flex: 1 1 0; min-width: 0; padding: 0 6px; }
}

/* MOBİL — marka adı sabit yer kaplamasın: zaman ekseni kaydırılınca (body.brand-min)
   "Tekrar Tarih" yazısı logoya (yuvarlak nişan) küçülür, boşalan yeri mod düğmeleri
   (Domino, Neden-Sonuç…) alır. brand-min sınıfı timeline.js scroll'unda basılır;
   masaüstünde bu sorgu geçmediğinden etkisiz kalır. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  body.brand-min .brand-name {
    max-width: 0; opacity: 0; margin: 0;
  }
  body.brand-min .brand { gap: 0; }
}

/* ===========================================================================
   MOBİL KARŞILAŞTIR — ALT SAYFA (bottom-sheet)
   Masaüstünde sağ panel; mobilde tam-ekran kaplayıp timeline'ı kapatınca olay
   seçilemiyordu (akış kilidi). Mobilde kompakt bir alt bar yap: iki slot yan
   yana, üstte timeline görünür/tıklanır kalsın. İki olay seçilince (analiz
   bloğu belirince) sayfa yükselip rezonans analizini gösterir. Salt CSS.
   =========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .compare {
    top: auto; left: 0; right: 0; bottom: var(--footer-h);
    width: 100%; height: 40vh; max-height: 40vh;
    border-left: none; border-top: 1px solid var(--line);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    box-shadow: 0 -10px 34px -14px oklch(0.35 0.05 330 / 0.4);
  }
  /* iki olay seçilince (analiz var) → sayfa yükselir, rezonans okunur */
  .compare:has(.cmp-analysis) { height: 82vh; max-height: 82vh; }

  /* tutamak — alt sayfa olduğunu belli et */
  .compare .cmp-head {
    padding: 11px 16px 10px; position: relative;
  }
  .compare .cmp-head::before {
    content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 4px; border-radius: 3px; background: var(--line);
  }
  .compare .cmp-head .cmp-t { font-size: 15px; }

  /* iki slot yan yana, kompakt kartlar */
  .cmp-col { padding: 12px 13px; }
  .cmp-col.empty { padding: 10px; }
  .cmp-empty-ic { font-size: 22px; margin-bottom: 6px; }
  .cmp-pick { font-size: 12px; line-height: 1.5; }
  .cmp-title { font-size: 15.5px; margin: 5px 0 9px; }
  .cmp-body { font-size: 13px; line-height: 1.55; }
  .cmp-thumb img { height: 66px; }

  /* analiz bloğu: yükselen sayfada esner, daha çok yer alsın */
  .cmp-analysis { max-height: none; padding: 15px 16px; }

  /* ---- MOBİL OLAY ÇEKMECESİ — tam-yükseklik alt sayfa ----------------------
     Masaüstünde çekmece top:var(--panel-top) ile topbar+toolbar altından açılır.
     Mobilde filtre çubuğu açıkken --panel-top ~350px'e çıkıp çekmecenin üstünde
     kocaman boşluk bırakıyordu. Mobilde çekmeceyi topbar altından tam-ekran alt
     sayfaya çevir → filtre bloğunun yüksekliğinden bağımsız, üstüne biner.      */
  /* İkinci seçici masaüstü merkez override'ıyla aynı özgüllükte → mobilde onu
     geçersiz kılar (transform/max-height/border sıfırlanır). */
  .drawer, .drawer:not(.domino-panel) {
    top: var(--topbar-h, 52px); left: 0; right: 0; bottom: var(--footer-h);
    transform: none; width: 100%; height: auto; max-height: none; z-index: 62;
    border: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 34px -14px oklch(0.35 0.05 330 / 0.4);
  }
  /* mobilde alttan yukarı kayarak açılır (masaüstü merkez-pop yerine) */
  @keyframes kr-sheet-up { from { opacity: 0; transform: translateY(16px); } }
  body[data-motion="1"] .drawer:not(.domino-panel) { animation: kr-sheet-up .3s cubic-bezier(.2,.7,.3,1) backwards; }
  /* tutamak — alt sayfa olduğunu belli et */
  .drawer-head { position: relative; }
  .drawer-head::after {
    content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 4px; border-radius: 3px; background: var(--line);
  }
}

/* ---- KLAVYE ODAĞI — tutarlı, görünür :focus-visible halkası (a11y) ------ */
:where(a, button, input, textarea, select, [tabindex], [role="button"], [role="link"]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ===========================================================================
   GLASS SKIN — sıcak/aydınlık glassmorphism (orijinal stilin ÜSTÜNE eklenir)
   Yüzen yüzeyler buzlu cam; metin koyu kalır (okunabilirlik korunur).
   Geri almak için: bu bloğu tümüyle sil.
   =========================================================================== */
:root {
  --glass-blur: 20px;          /* büyük paneller */
  --glass-blur-sm: 11px;       /* kartlar (perf: ~92 kart) */
  --glass-sat: 170%;
  --glass-1: oklch(0.99 0.009 330 / 0.55);      /* ana panel camı */
  --glass-2: oklch(0.985 0.011 330 / 0.4);      /* kontrol/çip camı */
  --glass-read: oklch(0.985 0.008 330 / 0.74);  /* okuma yüzeyi (drawer/asistan/compare) */
  --glass-card: oklch(0.99 0.012 330 / 0.5);    /* olay kartı */
  --glass-brd: oklch(0.62 0.03 320 / 0.2);      /* ince cam kenar */
  --glass-sheen: inset 0 1px 0 0 oklch(1 0 0 / 0.55), inset 0 0 0 1px oklch(1 0 0 / 0.05);
  --glass-shadow: 0 10px 34px -14px oklch(0.35 0.05 330 / 0.32), 0 2px 8px -4px oklch(0.35 0.05 330 / 0.16);
}

/* GLASS SKIN — karanlık varyant: yüzen yüzeyler gece buzlu camı, metin parşömen */
html[data-theme="dark"] {
  --glass-1: oklch(0.245 0.018 286 / 0.62);
  --glass-2: oklch(0.275 0.02 287 / 0.5);
  --glass-read: oklch(0.225 0.016 286 / 0.84);
  --glass-card: oklch(0.255 0.018 286 / 0.55);
  --glass-brd: oklch(0.72 0.02 300 / 0.14);
  --glass-sheen: inset 0 1px 0 0 oklch(1 0 0 / 0.06), inset 0 0 0 1px oklch(1 0 0 / 0.03);
  --glass-shadow: 0 12px 36px -14px oklch(0 0 0 / 0.6), 0 2px 10px -4px oklch(0 0 0 / 0.4);
}
html[data-theme="dark"] .canvas-wrap {
  background: linear-gradient(170deg, oklch(0.205 0.015 286 / 0.8), oklch(0.17 0.022 292 / 0.7));
}
html[data-theme="dark"] .axis {
  background: linear-gradient(to top, oklch(0.2 0.015 286 / 0.9) 0%, oklch(0.2 0.015 286 / 0.9) 60%, transparent);
}
html[data-theme="dark"] .node:hover .node-card,
html[data-theme="dark"] .chip:hover, html[data-theme="dark"] .pat:hover,
html[data-theme="dark"] .link-item:hover, html[data-theme="dark"] .era-btn:hover {
  background: oklch(0.33 0.022 287 / 0.82);
}

/* sade atmosfer — beyazdan hafifçe mora doğru (camın arkasında nazik derinlik) */
.atmos {
  background:
    radial-gradient(105% 90% at 50% 120%, oklch(0.9 0.055 305 / 0.5), transparent 70%),
    linear-gradient(170deg, oklch(0.995 0.003 300) 6%, oklch(0.95 0.038 305) 100%);
}
/* tuvale çok hafif mor sızsın (kart/çekmece camına zemin) — timeline okunur kalsın */
.canvas-wrap { background: linear-gradient(170deg, oklch(0.99 0.006 304 / 0.78), oklch(0.952 0.036 305 / 0.6)); }
.axis { background: linear-gradient(to top, oklch(0.985 0.008 330 / 0.86) 0%, oklch(0.985 0.008 330 / 0.86) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* büyük yüzen paneller → buzlu cam */
.topbar, .toolbar, .rail, .macro-band,
.drawer, .drawer-head, .kr-asst, .kr-asst-head,
.twk-panel, .canvas-hint, .canvas-empty-card, .compare {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  background: var(--glass-1) !important;
  border-color: var(--glass-brd);
  box-shadow: var(--glass-shadow), var(--glass-sheen);
}
/* okuma yüzeyleri biraz daha opak (uzun metin konforu) */
.drawer, .kr-asst { background: var(--glass-read) !important; }
.drawer-head, .kr-asst-head, .macro-band { background: var(--glass-2) !important; }
/* Fotoğraf aktifken makro veri bandı (nüfus·demokrasi·büyüme·rejim) okunur kalsın:
   ince cam yerine yüksek-opaklık "okuma yüzeyi" — seriler net, cam estetiği korunur. */
body[data-event-bg="1"] .macro-band { background: var(--glass-read) !important; }

/* kartlar / kontroller → hafif cam (perf için düşük blur) */
.node-card, .chip, .pat, .link-item, .reso-more, .search, .zoom-grp, .era-btn,
.kr-asst-launch, .twk-chip, .tag, .person, .kr-asst-sug, .sub, .cmp-thumb, .dr-close, .kr-asst-x {
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
}
.node-card { background: var(--glass-card); border-color: var(--glass-brd); box-shadow: var(--glass-shadow), var(--glass-sheen); }
.chip, .pat, .link-item, .reso-more, .search, .zoom-grp, .era-btn, .sub, .kr-asst-sug {
  background: var(--glass-2); border-color: var(--glass-brd); box-shadow: var(--glass-sheen);
}
.kr-asst-launch { background: var(--glass-1); border-color: var(--glass-brd); box-shadow: var(--glass-shadow), var(--glass-sheen); }

/* hover'da cam biraz "yoğunlaşsın" — okunabilirlik + geri bildirim */
.node:hover .node-card,
.chip:hover, .pat:hover, .link-item:hover, .era-btn:hover { background: oklch(0.995 0.008 330 / 0.72); }

/* küçük cam yüzeylerde köşe yumuşaklığı clip etsin */
.node-card, .chip, .pat, .link-item, .reso-more, .search, .zoom-grp,
.drawer, .kr-asst, .twk-panel, .canvas-hint, .canvas-empty-card { isolation: isolate; }

/* ═══ YÜZYIL AYNASI — senkron çift zaman şeridi ═══════════════════════════════
   Seçili yüzyıl köprüsünün iki ucunu üst üste hizalayan iki şerit. Üst = geçmiş
   (echo çerçevesi), alt = bugün (modern çerçeve, offset kadar kaydırılmış); ortada
   "ayna dikişi" iki olayı tam üst üste getirir. Tek yatay kaydırma ikisini kilitler. */
.mirror-wrap { flex: 1; position: relative; min-width: 0; overflow: hidden; background: var(--bg-0); }
.mirror-scroll {
  position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; cursor: grab;
}
.mirror-scroll.drag { cursor: grabbing; }
.mirror-track {
  position: relative; width: 100%; min-width: 100%; min-height: 100%;
  display: flex; flex-direction: column;
}
.mirror-lane { position: relative; flex: 1 1 auto; overflow: visible; }
.mirror-axis {
  position: relative; flex: none; height: 48px; z-index: 6;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--bg-2), var(--bg-1));
}

/* tam-yükseklik kılavuz çizgileri + çift yıl ekseni (üst echo / alt modern) */
.mirror-grid {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 1; pointer-events: none;
  background: var(--line-soft); opacity: 0.5;
}
.mirror-axtick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: 0.55; }
.mirror-axtick .mt-top, .mirror-axtick .mt-bot {
  position: absolute; left: 0; transform: translateX(-50%);
  font-family: var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.02em;
}
.mirror-axtick .mt-top { top: 5px; font-size: 12px; color: var(--ink-3); }
.mirror-axtick .mt-bot { bottom: 5px; font-size: 12px; font-weight: 600; color: var(--cyan); }

/* ayna dikişi — köprünün iki ucunu hizalayan dikey eksen + ortadaki rozet */
.mirror-seam-line {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 5; transform: translateX(-1px); pointer-events: none;
  background: repeating-linear-gradient(var(--amber) 0 8px, transparent 8px 14px); opacity: 0.6;
}
.mirror-seam-badge {
  position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 8; white-space: nowrap;
  background: var(--amber); color: #fff; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 100px; box-shadow: var(--shadow-sm);
}

/* ayna düğümü — üst şerit tabandan yukarı, alt şerit tepeden aşağı yaslanır */
.mnode {
  position: absolute; transform: translateX(-50%); z-index: 4; width: 150px;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.mn-card {
  width: 100%; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 11px 8px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.mn-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mn-c, var(--line)); }
.mn-yr { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--mn-c, var(--ink-3)); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.mn-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1.18; margin-top: 2px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mn-stem { width: 2px; height: 13px; background: var(--mn-c, var(--line)); opacity: 0.4; flex: none; }
.mn-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--bg-0); border: 3px solid var(--mn-c, var(--ink-3)); box-shadow: 0 0 0 3px var(--bg-0);
}
.mn-tag {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: #fff; background: var(--amber); padding: 2px 8px; border-radius: 100px; box-shadow: var(--shadow-sm);
}
.mnode.top .mn-tag { top: -13px; }
.mnode.bot .mn-tag { bottom: -13px; }

.mnode:hover { z-index: 9; }
.mnode:hover .mn-card { border-color: var(--mn-c); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mnode:hover .mn-dot { transform: scale(1.15); }
.mnode.anchor { z-index: 7; }
.mnode.anchor .mn-card { border-color: var(--amber); box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--amber) 45%, transparent), var(--shadow-md); }
.mnode.anchor .mn-dot { border-color: var(--amber); width: 15px; height: 15px; }
.mnode.anchor .mn-stem { background: var(--amber); opacity: 0.75; }
.mnode.sel { z-index: 8; }
.mnode.sel .mn-card { border-color: var(--mn-c); box-shadow: 0 0 0 2px color-mix(in oklch, var(--mn-c) 50%, transparent), var(--shadow-md); }
.mnode.sel .mn-dot { transform: scale(1.25); }

/* şerit kimliği köşe etiketleri + okuma ipucu */
.mirror-corner {
  position: absolute; left: 14px; z-index: 9; pointer-events: none; max-width: min(48%, 340px);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-2); background: color-mix(in oklch, var(--bg-1) 86%, transparent);
  border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px;
  box-shadow: var(--shadow-sm); backdrop-filter: blur(5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mirror-corner.top { top: 12px; }
.mirror-corner.bot { bottom: 12px; }
.mirror-corner .mc-name { color: var(--amber); }
.mirror-hint {
  position: absolute; bottom: 12px; right: 16px; z-index: 9; pointer-events: none; max-width: min(440px, 56%);
  font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--ink-2);
  background: color-mix(in oklch, var(--bg-1) 88%, transparent); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--shadow-sm); backdrop-filter: blur(5px);
}
.mirror-hint b { color: var(--amber); font-weight: 700; }
body[data-panel="1"] .mirror-hint { right: calc(var(--panel-w, 0px) + 16px); }

/* aynada işlevsiz tuval düğmelerini gizle (dönem çerçeveleme + makro bandı) */
body[data-mode="mirror"] .era-grp,
body[data-mode="mirror"] .macro-toggle { display: none; }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .mnode { width: 132px; }
  .mn-title { font-size: 12px; }
  .mirror-hint { display: none; }
  .mirror-corner { font-size: 12px; max-width: 60%; }
}

/* ===========================================================================
   KANIT ŞERİDİ & KAYNAK TİER ÇİPLERİ
   Drawer'da .dr-figure'ın hemen altında, Özet bölümünden önce: güven düzeyi
   etiketi + doğrulanmış/referans/birincil sayıları + tartışmalı not. ReadingItem
   içinde küçük tür etiketi + doğrulama işareti.
   =========================================================================== */

/* Şerit: figür ile özet arasında ince, muted bir kuşak */
.evidence {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: -12px 0 18px;          /* figürün alt boşluğunu dengele, özete boşluk bırak */
  padding: 8px 12px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Seviye etiketi: hafif kalın, sessiz ton */
.ev-level {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink-3);
  flex: none; margin-right: 2px;
}

/* ev-akademik: olumlu / petrol-yeşil ton (--cyan'a yakın) */
.ev-akademik .ev-level {
  color: var(--cyan);
}

/* ev-derleme: nötr / amber-dim ton */
.ev-derleme .ev-level {
  color: color-mix(in oklch, var(--amber) 72%, var(--ink-3));
}

/* ev-bekliyor: soluk uyarı tonu */
.ev-bekliyor .ev-level {
  color: var(--ink-3);
  opacity: 0.82;
}

/* Genel çip: küçük pill — reading-src / tag diliyle aynı dil */
.ev-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1;
  padding: 2px 8px; border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-3);
  white-space: nowrap; cursor: default;
}

/* Doğrulanmış çip: hafif olumlu (cyan-dim zemin) */
.ev-chip.ev-ok {
  color: var(--cyan);
  background: var(--cyan-dim);
  border-color: color-mix(in oklch, var(--cyan) 28%, var(--line));
}

/* Tartışmalı çip: amber uyarı tonu, tıklanabilir */
.ev-chip.ev-contested {
  appearance: none; border: none; cursor: pointer;
  color: color-mix(in oklch, var(--amber) 88%, var(--ink-2));
  background: var(--amber-dim);
  border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--line));
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.ev-chip.ev-contested:hover {
  color: var(--amber);
  background: color-mix(in oklch, var(--amber) 18%, var(--bg-1));
  border-color: color-mix(in oklch, var(--amber) 50%, var(--line));
}

/* Tartışmalı not: açılır küçük açıklama kutusu */
.ev-note {
  width: 100%; margin-top: 2px;
  font-family: var(--font-ui); font-size: 12px; line-height: 1.55;
  color: var(--ink-2); font-style: italic;
  padding: 6px 10px;
  border-left: 2px solid color-mix(in oklch, var(--amber) 55%, var(--line));
  background: color-mix(in oklch, var(--amber) 5%, var(--bg-1));
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---- ReadingItem tür çipi ------------------------------------------------ */
/* .reading-head içinde, .reading-src'den sonra: 10-11px, muted */
.reading-tier {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  padding: 1.5px 6px; border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-3);
  flex: none; white-space: nowrap; cursor: default;
}

/* Akademik: cyan muted */
.reading-tier.tier-akademik {
  color: var(--cyan);
  background: var(--cyan-dim);
  border-color: color-mix(in oklch, var(--cyan) 24%, var(--line));
}

/* Referans: amber-nötr */
.reading-tier.tier-referans {
  color: color-mix(in oklch, var(--amber) 78%, var(--ink-3));
  background: color-mix(in oklch, var(--amber) 10%, var(--bg-1));
  border-color: color-mix(in oklch, var(--amber) 22%, var(--line));
}

/* Birincil: muted petrol (reform rengi benzeri ama daha sessiz) */
.reading-tier.tier-birincil {
  color: color-mix(in oklch, var(--th-reform) 80%, var(--ink-3));
  background: color-mix(in oklch, var(--th-reform) 10%, var(--bg-1));
  border-color: color-mix(in oklch, var(--th-reform) 22%, var(--line));
}

/* Doğrulama işareti: küçük yeşilimsi "✓" */
.reading-ok {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: var(--cyan); flex: none; line-height: 1; cursor: default;
  opacity: 0.9;
}

/* Per-reading status rozeti */
.reading-status {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  padding: 1.5px 6px; border-radius: 100px;
  flex: none; white-space: nowrap; cursor: default;
}
.reading-status.rs-disputed {
  color: color-mix(in oklch, var(--amber) 88%, var(--ink-2));
  background: var(--amber-dim);
  border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--line));
}
.reading-status.rs-pending {
  color: var(--ink-3); opacity: 0.8;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

/* Evidence bekliyor çipi */
.ev-chip.ev-pending {
  color: var(--ink-3); opacity: 0.85;
  background: var(--bg-2);
  border-color: var(--line);
}

/* ---- KARANLIK MOD overrides ------------------------------------------------ */
html[data-theme="dark"] .evidence {
  background: var(--bg-2);
  border-top-color: var(--line-soft);
  border-bottom-color: var(--line-soft);
}

html[data-theme="dark"] .ev-chip {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--ink-3);
}

html[data-theme="dark"] .ev-chip.ev-ok {
  color: var(--cyan);
  background: var(--cyan-dim);
  border-color: color-mix(in oklch, var(--cyan) 28%, var(--line));
}

html[data-theme="dark"] .ev-chip.ev-contested {
  color: color-mix(in oklch, var(--amber) 90%, var(--ink-2));
  background: var(--amber-dim);
  border-color: color-mix(in oklch, var(--amber) 30%, var(--line));
}

html[data-theme="dark"] .ev-note {
  color: var(--ink-2);
  background: color-mix(in oklch, var(--amber) 8%, var(--bg-2));
  border-left-color: color-mix(in oklch, var(--amber) 50%, var(--line));
}

html[data-theme="dark"] .reading-tier {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--ink-3);
}

html[data-theme="dark"] .reading-status.rs-disputed {
  color: color-mix(in oklch, var(--amber) 90%, var(--ink-2));
  background: var(--amber-dim);
  border-color: color-mix(in oklch, var(--amber) 30%, var(--line));
}
html[data-theme="dark"] .reading-status.rs-pending {
  background: var(--bg-3);
}
html[data-theme="dark"] .ev-chip.ev-pending {
  background: var(--bg-3);
}

/* ---- KANIT SEVİYESİ LEJANTI (Künye/Yöntem modalı) ---- */
.ev-legend {
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-2); border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.ev-legend-title {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--ink-2); letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0 0 10px;
}
.ev-legend-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 13px; line-height: 1.55;
  color: var(--ink-2); margin-bottom: 6px;
}
.ev-legend-row:last-of-type { margin-bottom: 0; }
.ev-legend-bar {
  width: 32px; height: 4px; border-radius: 2px; flex: none;
}
.evl-akademik { background: var(--cyan); opacity: 0.8; }
.evl-derleme  { background: var(--amber); opacity: 0.65; }
.evl-bekliyor { background: var(--ink-3); opacity: 0.3; }
.evl-contested { background: var(--amber); position: relative; }
.evl-contested::after {
  content: ""; position: absolute; right: -4px; top: -1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 4px var(--amber);
}
.ev-legend-contested { color: color-mix(in oklch, var(--amber) 80%, var(--ink-2)); }
.ev-legend-note {
  font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3);
  margin: 10px 0 0; font-style: italic;
}
html[data-theme="dark"] .ev-legend {
  background: var(--bg-3); border-color: var(--line);
}

html[data-theme="dark"] .reading-tier.tier-akademik {
  color: var(--cyan);
  background: var(--cyan-dim);
  border-color: color-mix(in oklch, var(--cyan) 24%, var(--line));
}

html[data-theme="dark"] .reading-tier.tier-referans {
  color: color-mix(in oklch, var(--amber) 90%, var(--ink-2));
  background: var(--amber-dim);
  border-color: color-mix(in oklch, var(--amber) 28%, var(--line));
}

html[data-theme="dark"] .reading-tier.tier-birincil {
  color: var(--th-reform);
  background: color-mix(in oklch, var(--th-reform) 14%, var(--bg-2));
  border-color: color-mix(in oklch, var(--th-reform) 26%, var(--line));
}

html[data-theme="dark"] .reading-ok {
  color: var(--cyan);
}
/* =========================================================================== */

/* ===========================================================================
   RAY KARTLARI v2 + SÜKUNET KATMANI — 2026-07 yeniden tasarım
   Bilerek dosyanın SONUNDA: GLASS SKIN dahil önceki tüm katmanları cascade'de
   yener; cam kimliği (backdrop-filter) korunur. Geri almak için bu bloğu sil.
   =========================================================================== */

/* ---- ÜST BAR: mercek grupları ------------------------------------------- */
/* 8 mod, About'taki kanonik anlatıya göre 4 görsel gruba ayrılır; .mode-btn
   sınıfı ve davranışı aynen (tur işaretçisi + aktif-ortala bozulmaz). */
.mode-group { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 9px; flex: none; }
.mode-group + .mode-group { border-left: 1px solid var(--line-soft); }
.mode-group-lbl {
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  padding-left: 13px; white-space: nowrap; opacity: .8;
}
.mode-group-row { display: flex; gap: 2px; }
.mode-group .mode-btn { padding: 6px 12px; font-size: 13.5px; gap: 7px; }
@media (max-width: 1280px) {
  .mode-group-lbl { display: none; }
  .mode-group { padding: 0 5px; }
}

/* ---- ÜST BAR sayaçları footer'a taşındı --------------------------------- */
.kr-footer-stats {
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em;
}
@media (max-width: 900px) { .kr-footer-stats { display: none; } }

/* ---- ARAÇ ÇUBUĞU sadeleşmesi -------------------------------------------- */
.chip-cnt { opacity: .75; }
@media (max-width: 1280px) {
  .chip-cnt { display: none; }
  .macro-toggle .mt-tx { display: none; }
}

/* ---- RAY sükuneti -------------------------------------------------------- */
.rail { border-right-color: var(--line-soft); }
.rail-head { padding: 16px 20px 8px; }
.rail-flourish { padding: 0 20px; }
.rail-flourish .ka-flourish { margin: 0 0 4px; }
.rail-body { padding: 6px 14px 14px; }
.rail-note { border-top-color: var(--line-soft); }
.canvas-hint { max-width: min(520px, 74vw); }

/* InfoRail bilgi blokları — çizgili kutular yerine sakin, ayraçlı akış */
.rail-block { padding: 12px 8px 13px; }
.rail-block + .rail-block { border-top: 1px solid var(--line-soft); }
.rb-h {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 6px;
}
.rb-tx { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* ---- .pat KARTLARI v2 ---------------------------------------------------- */
.rail .pat {
  position: relative; padding: 15px 16px 14px; margin-bottom: 12px;
  border-radius: 14px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
/* sol aksan şeridi — hover'da belirir, aktifken tam boy "mühür şeridi" */
.rail .pat::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--pat-c, var(--amber));
  opacity: 0; transition: opacity .18s ease, top .18s ease, bottom .18s ease;
}
.rail .pat:hover::before { opacity: .55; }
.rail .pat.active::before { opacity: 1; top: 6px; bottom: 6px; }
.rail .pat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--pat-c, var(--amber)) 34%, var(--line));
  box-shadow: var(--shadow-md);
}
.rail .pat.active {
  border-color: color-mix(in oklch, var(--pat-c, var(--amber)) 52%, var(--line));
  background: color-mix(in oklch, var(--pat-c, var(--amber)) 6%, var(--bg-1));
  box-shadow: var(--shadow-md);
}

/* glif medalyonu — emoji dairesi yerine hat-çizim mühür */
.rail .pat .pat-glyph {
  width: 38px; height: 38px; border: none; border-radius: 0;
  background: transparent; color: color-mix(in oklch, var(--pat-c, var(--amber)) 78%, var(--ink-3));
  font-size: 0;
}
.rail .pat.active .pat-glyph,
.rail .pat:hover .pat-glyph { color: var(--pat-c, var(--amber)); }
.pm-glyph { font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
.rail .pat.active .pm circle:first-of-type { fill: var(--pat-c, var(--amber)); fill-opacity: .14; }
/* kesikli iç halka yalnız hover/aktifken akar (14 kartın aynı anda dönmesi gürültü) */
body[data-motion="1"] .rail .pat:hover .pm-dash,
body[data-motion="1"] .rail .pat.active .pm-dash { animation: ka-dash 7s linear infinite; }

/* ---- desen mini-şeridi (1826–2026 sparkline) ----------------------------- */
.pat-spark { position: relative; margin-top: 10px; padding-bottom: 13px; }
.pat-spark .ps { width: 100%; height: 16px; display: block; }
.ps-base { stroke: var(--line); }
.ps-tick { stroke: color-mix(in oklch, var(--pat-c, var(--amber)) 60%, var(--ink-3)); opacity: .85; }
.ps-tick.hot { stroke: var(--pat-c, var(--amber)); opacity: 1; }
.ps-dot { fill: var(--pat-c, var(--amber)); }
.ps-yr {
  position: absolute; bottom: 0; font-family: var(--font-ui); font-size: 10px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.ps-yr.a { left: 1px; }
.ps-yr.b { right: 1px; }
/* aktifleşince taban çizgisi mürekkeple çizilir */
body[data-motion="1"] .rail .pat.active .ps-base {
  stroke-dasharray: 1; animation: ka-ink-draw .9s cubic-bezier(.3,.7,.3,1) backwards;
}

/* ---- YÜZYIL KÖPRÜSÜ kartı: çizilen köprü yayı ---------------------------- */
.bond-bridge {
  display: grid; grid-template-columns: 1fr minmax(52px, 1.05fr) 1fr;
  align-items: start; gap: 4px; margin-top: 12px;
}
.bond-end {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px; min-width: 0;
}
.bond-end .pdr-photo-avatar, .bond-end .pdr-svg-avatar {
  border-radius: 50%; box-shadow: 0 2px 8px oklch(0.3 0.05 330 / .22);
}
.bond-end .pdr-photo-avatar { object-fit: cover; }
.be-name { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.be-yr { font-family: var(--font-ui); font-size: 11.5px; color: #C99A3A; font-weight: 700; font-variant-numeric: tabular-nums; }
.bond-arc { position: relative; margin-top: 9px; min-width: 0; }
.bond-arc .ba { width: 100%; height: 30px; display: block; color: #C99A3A; }
.ba-flow { opacity: .75; }
body[data-motion="1"] .bond-card:hover .ba-flow,
body[data-motion="1"] .bond-card.active .ba-flow { animation: ka-dash 1.6s linear infinite; opacity: 1; }
.bond-arc-badge {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; color: #B07A1E;
  white-space: nowrap; line-height: 1;
  background: color-mix(in oklab, #C99A3A 14%, transparent);
  border: 1px solid color-mix(in oklab, #C99A3A 34%, transparent);
  border-radius: 100px; padding: 3px 8px;
}
.bond-card .bond-chain-badge { margin-top: 26px; }
html[data-theme="dark"] .be-yr, html[data-theme="dark"] .bond-arc-badge { color: #D9B05C; }

/* ---- DOMİNO problem kartı: hover'da devrilen taşlar ---------------------- */
/* ikonu her kartta AYNI köşeye çapala — başlık uzunluğuna göre savrulmasın,
   karttan taşmasın (desen glifi taşma fix'iyle aynı yaklaşım: absolute + sağdan padding) */
.dom-tiles {
  position: absolute; top: 12px; right: 13px;
  width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); transition: color .18s; pointer-events: none;
}
/* başlık satırı (özellikle sağa yaslı yıl) ikonun altına girmesin diye sağdan yer aç */
.dom-prob .pat-top { padding-right: 32px; min-width: 0; }
/* uzun başlık taşarsa sarsın (orijinal davranış korunur); min-width:0 flex satırının padding'i aşmasını önler. */
.dom-prob .pat-name { min-width: 0; }
/* yıl rozeti başlık 1 veya 2 satır olsun HEP üst-sağda dursun — ikinci satıra yapışmasın,
   domino-tiles ikonuyla aynı hizada kalsın (tiles: top 12px). */
.dom-prob .pat-cnt { align-self: flex-start; margin-top: 11px; }
.pat.dom-prob:hover .dom-tiles, .pat.dom-prob.active .dom-tiles { color: var(--pat-c, var(--amber)); }
.ka-tile-h { transform-origin: 100% 100%; transform-box: fill-box; }
body[data-motion="1"] .pat.dom-prob:hover .ka-tile-h1,
body[data-motion="1"] .pat.dom-prob.active .ka-tile-h1 { animation: ka-tile-tip 2.6s ease-in-out infinite; }
body[data-motion="1"] .pat.dom-prob:hover .ka-tile-h2,
body[data-motion="1"] .pat.dom-prob.active .ka-tile-h2 { animation: ka-tile-tip 2.6s ease-in-out infinite .3s; }
body[data-motion="1"] .pat.dom-prob:hover .ka-tile-h3,
body[data-motion="1"] .pat.dom-prob.active .ka-tile-h3 { animation: ka-tile-tip 2.6s ease-in-out infinite .6s; }

/* ---- PORTRE GALERİSİ v2 --------------------------------------------------- */
.rp-person { padding: 7px 6px; gap: 12px; border-radius: 10px; }
.rp-ava { position: relative; flex: none; display: grid; place-items: center; border-radius: 50%; }
.rp-ava::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px dashed color-mix(in oklch, var(--amber) 60%, transparent);
  opacity: 0; transition: opacity .2s;
}
.rp-person:hover .rp-ava::after { opacity: 1; }
body[data-motion="1"] .rp-person:hover .rp-ava::after { animation: ka-spin 9s linear infinite; }
.rp-person .pdr-photo-avatar, .rp-person .pdr-svg-avatar { border-radius: 50%; display: block; }
.rp-person-name { font-size: 13.5px; }
.rp-person-meta { font-size: 11.5px; }

/* ---- REZONANS CETVELİ: tikli ızgara + elmas uç ---------------------------- */
.reso-bar {
  height: 7px; overflow: visible; position: relative;
  background-color: var(--bg-3);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%);
}
.reso-fill { position: relative; overflow: visible; }
.reso-fill::after {
  content: ""; position: absolute; right: -3.5px; top: 50%; width: 7px; height: 7px;
  transform: translateY(-50%) rotate(45deg); border-radius: 1.5px;
  background: var(--amber);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--amber) 22%, transparent);
}

/* ---- kademeli giriş + reaktif tilt uyumu ---------------------------------- */
body[data-motion="1"] .rail-body .pat {
  animation: kr-sub-in .42s ease backwards;
  animation-delay: calc(var(--pat-i, 0) * 38ms);
}
body[data-reactive="1"] .rail .pat { will-change: transform; }
/* tilt JS inline transform sürer — CSS kalkışı onunla yarışmasın */
body[data-reactive="1"] .rail .pat:hover { transform: none; }

/* ---- hareket kapıları (bu katmanın tamamı) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rail-body .pat, .pm-dash, .ba-flow, .ka-tile-h, .rp-ava::after, .ps-base {
    animation: none !important;
  }
}

/* ---- DOKUNMA ALANLARI — kaba işaretçide (parmak) küçük kontrolleri büyüt ---
   WCAG 2.5.8: görsel boyutu bozmadan min ~44px dokunma hedefi. Görünümü şişirmek
   yerine şeffaf ::after katmanıyla vuruş alanı genişletilir. */
@media (pointer: coarse) {
  .chip, .era-btn, .zoom-btn, .tb-toggle, .dom-btn, .mode-btn, .shr,
  .dr-close, .macro-peek, .theme-toggle {
    position: relative;
  }
  .chip::after, .era-btn::after, .zoom-btn::after, .tb-toggle::after,
  .dom-btn::after, .mode-btn::after, .shr::after, .dr-close::after,
  .macro-peek::after, .theme-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .node-dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%;
  }
}

/* ==== PWA: kurulum uyarısı bannerı + güncelleme pili ========================
   pwa.js tarafından enjekte edilir. Görünürlük anlık (is-on sınıfı) — transition
   YOK (proje tuzağı: class-toggle transition domino modunda donar). Tasarım diline
   uyum: bordo (--amber) vurgu, yumuşak köşeler, cam zemin. */
.tt-pwa-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1400; display: none;
  width: min(560px, calc(100vw - 32px));
  padding: 14px 16px;
  align-items: center; gap: 14px;
  background: var(--bg-1, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.tt-pwa-banner.is-on { display: flex; }
.tt-pwa-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tt-pwa-banner-text strong { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.tt-pwa-banner-text span { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.tt-pwa-banner-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.tt-pwa-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.tt-pwa-btn-primary { background: var(--amber); color: #fff; border-color: var(--amber); }
.tt-pwa-btn-primary:hover { filter: brightness(1.05); }
.tt-pwa-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.tt-pwa-btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); }

/* güncelleme pili: sağ altta, FAB yığınının ÜSTÜNDE (fab/kr-asst-launch alt sırayı
   kullanır — bottom: 18px + footer). Görünürlük TAMAMEN CSS'te: JS yalnız is-on ekler.
   Masaüstünde panel açıkken de görünür (domino modu paneli açılışta otomatik açar;
   panel-gizleme masaüstünde pili fiilen hiç göstermiyordu) — panel genişliği kadar
   sola kayar (.fab ile aynı kural). */
.tt-pwa-update {
  /* dock'un TAM ÜSTÜ: dock-bottom + dock-h + istif boşluğu → ≥10px açıklık (KURAL B).
     --dock-bottom makro/panel durumlarında değişince pil otomatik izler; ayrı
     bottom override'ı gerekmez. */
  position: fixed; right: 18px;
  bottom: calc(var(--dock-bottom, calc(18px + var(--footer-h))) + var(--dock-h) + var(--stack-gap));
  z-index: 1350; display: none;
  align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--amber); color: #fff; border: 1px solid var(--amber);
  box-shadow: var(--shadow-lg);
}
.tt-pwa-update.is-on { display: inline-flex; }
body[data-panel="1"] .tt-pwa-update { right: calc(var(--panel-w, 0px) + 14px); }
.tt-pwa-update:hover { filter: brightness(1.06); }
.tt-pwa-update-ic { font-size: 15px; line-height: 1; }
body[data-motion="1"] .tt-pwa-update-ic { animation: ka-spin 4.5s linear infinite; }

/* mobilde banner tam-genişliğe yakın, aksiyonlar alta sarabilir; pil YALNIZ mobilde
   panel/rail açıkken gizlenir (slide-over panel tüm ekranı kaplar, pil altında ölü kalır) */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .tt-pwa-banner {
    left: 12px; right: 12px; transform: none;
    width: auto; flex-wrap: wrap; bottom: calc(12px + var(--footer-h, 0px));
  }
  .tt-pwa-banner-actions { width: 100%; justify-content: flex-end; }
  /* mobilde de dock'un TAM üstünde kal (bottom base calc'tan gelir; yalnız sağ
     kenar boşluğunu 12px'e çek). Panel/rail açıkken slide-over ekranı kaplar → gizle. */
  .tt-pwa-update { right: 12px; }
  body[data-panel="1"] .tt-pwa-update.is-on,
  body.rail-open .tt-pwa-update.is-on { display: none; }
  /* mobilde banner görünürken (alt-orta) pil onunla çakışmasın → gizle. pwa.js
     banner gösterirken body'ye .tt-banner-on ekler, kaldırırken siler. */
  body.tt-banner-on .tt-pwa-update.is-on { display: none; }
}

/* ==== "BUGÜN TARİHTE" KARTI (bugun.js) =================================== *
   Sol-altta kompakt kart — PWA bannerı (alt-orta/sağ) ve pili (sağ-alt) ile
   konum çakışmaz. Görünürlük anlık (transition YOK — proje tuzağı). */
.tt-bugun {
  --bugun-bottom: calc(18px + var(--footer-h, 0px));
  position: fixed; left: 18px; bottom: var(--bugun-bottom);
  z-index: 1360; display: none;
  width: min(340px, calc(100vw - 36px));
  padding: 13px 14px 14px;
  background: var(--bg-1, #fff);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.tt-bugun.is-on { display: block; }
/* öğrenci pili (sol-alt, z-47, 16+44=60px) aynı anda görünürse kartı onun üstüne
   çıkar (16+44+12=72px). pil çapa/kalıcı, kart taşınır. */
body:has(.odev-pill) .tt-bugun { --bugun-bottom: calc(72px + var(--footer-h, 0px)); }
/* makro band (150px, tam-genişlik alt şerit) açıkken kartı bandın üstüne kaldır
   → masaüstünde de üst üste binmesin (KURAL B). makro (162px) pilden (72px) yüksek;
   bu kural :has(.odev-pill)'den SONRA geldiği için pil+makro birlikteyken de kazanır. */
body[data-macro="1"] .tt-bugun { --bugun-bottom: calc(150px + var(--footer-h, 0px) + 12px); }
.tt-bugun-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tt-bugun-kicker {
  flex: 1 1 auto; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--amber); text-transform: uppercase;
}
.tt-bugun-x {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--ink-3);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.tt-bugun-x:hover { color: var(--ink); background: var(--bg-2); border-color: var(--line); }
.tt-bugun-body { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; }
.tt-bugun-yr {
  font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--amber);
}
.tt-bugun-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.28;
  color: var(--ink);
}
.tt-bugun-actions { display: flex; }
.tt-bugun-open {
  font: inherit; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 10px; cursor: pointer;
  background: var(--amber); color: #fff; border: 1px solid var(--amber);
}
.tt-bugun-open:hover { filter: brightness(1.05); }

/* ==== PAYLAŞILABİLİR REZONANS KARTI DÜĞMESİ (panels.js Compare) ========== */
.cmp-share { margin-top: 12px; display: flex; }
.cmp-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  background: var(--amber-dim); color: var(--amber);
  border: 1px solid color-mix(in oklch, var(--amber) 26%, var(--line));
}
.cmp-share-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); }
.cmp-share-btn:disabled { opacity: 0.7; cursor: default; }
.cmp-share-btn.done { color: var(--amber); }
.cmp-share-btn svg { width: 15px; height: 15px; }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  /* mobilde bugün-kartı sol-altta KALIR ama genişliği ≤ ekranın %70'i (KURAL B) →
     alt-orta makro tutamağı ("Nüfus & Kalkınma") ve sağ-alt istifle çakışmaz.
     Tam-genişliğe yaymıyoruz (eski right:12px kaldırıldı). Alt-genişlik banner
     ile üst üste gelmesin diye JS zaten banner çıkınca kartı kapatır; panel/rail
     açıkken (slide-over ekranı kaplar) da güvenlik ağı olarak gizle. */
  .tt-bugun {
    left: 12px; right: auto;
    width: min(70vw, 300px);
    /* alt-orta makro tutamağının (bottom≈footer+10, ~34px) ÜSTÜNE çık → çakışma yok */
    --bugun-bottom: calc(54px + var(--footer-h, 0px));
  }
  /* öğrenci pili (sol-alt, 60px) mobilde de kartla (54px) kesişir → kartı üstüne çıkar */
  body:has(.odev-pill) .tt-bugun { --bugun-bottom: calc(72px + var(--footer-h, 0px)); }
  /* makro band açıkken (150px) kartı bandın üstüne taşı; pil kuralından SONRA → kazanır */
  body[data-macro="1"] .tt-bugun { --bugun-bottom: calc(162px + var(--footer-h, 0px)); }
  body[data-panel="1"] .tt-bugun.is-on,
  body.rail-open .tt-bugun.is-on { display: none; }
  /* güncelleme pili görünürken bugün kartı çekilir — dar ekranda pil (sağ-alt,
     geniş metinli) kartın sağ kenarıyla dikeyde kesişiyor; pil daha kritik (KURAL B) */
  body:has(.tt-pwa-update.is-on) .tt-bugun.is-on { display: none; }
  .cmp-share-btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   MOBİL ZAMAN ÇİZELGESİ · DİKEY LİSTE + Liste/Harita segment kontrolü
   Tuval (2B pan-zoom) telefonda kartları dağıtıyor; bu görünüm tek elle aşağı
   kaydırıp tüm kartları net görmeyi sağlar. Yalnız dar ekranda, timeline modunda.
   node-* iç sınıfları paylaşılır; .tl-* kökü çakışmayı önler. Görünürlük/konum
   geçişleri transition'a BAĞLANMAZ (proje tuzağı: class-toggle donması).
   =========================================================================== */
/* Güvenlik ağı: liste + segment YALNIZ dar ekran içindir; masaüstünde render
   sızıntısı olsa bile (stale isMobile) tamamen gizle. */
@media (min-width: 901px) and (pointer: fine) {
  .tl-seg, .tl-list { display: none !important; }
}
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  /* ── Liste / Harita segment kontrolü ── */
  .tl-seg {
    position: fixed; z-index: 47;
    left: calc(12px + 96px); top: calc(var(--panel-top, 110px) + 10px);
    display: inline-flex; align-items: stretch; gap: 0; height: 40px;
    padding: 3px; border-radius: 100px;
    border: 1px solid var(--line); background: var(--bg-1);
    box-shadow: var(--shadow-md);
  }
  .tl-seg-btn {
    appearance: none; border: none; cursor: pointer;
    padding: 0 15px; border-radius: 100px; min-width: 62px;
    font-family: var(--font-ui); font-size: 13px; font-weight: 600;
    color: var(--ink-2); background: transparent;
  }
  .tl-seg-btn.on { background: #982A3B; color: #fff; box-shadow: var(--shadow-sm); }
  .tl-seg-btn:active { transform: scale(0.97); }
  /* panel / sağ panel açıkken gizle (ekranı örtüyorlar) — anlık, transition yok */
  body.rail-open .tl-seg,
  body[data-panel="1"] .tl-seg { opacity: 0; pointer-events: none; }

  /* ── Dikey liste konteyneri ── */
  /* .tl-list, Timeline'ın yerini alır → .body içinde (üstte topbar+toolbar akışta,
     fixed değil). Bu yüzden top-padding yalnız fixed segment kontrolünü (~62px:
     10px boşluk + 40px yükseklik + 12px pay) temizler; --panel-top eklenmez. */
  .tl-list {
    position: absolute; inset: 0; z-index: 1;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: var(--bg-0);
    padding: 62px 13px calc(var(--footer-h, 32px) + 90px);
    display: flex; flex-direction: column; gap: 12px;
  }
  .tl-list-head {
    font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
    padding: 0 2px 2px;
  }

  /* ── Liste kartı: sol küçük thumb + sağ metin (yatay) ── */
  .tl-card {
    display: block; width: 100%; cursor: pointer; outline: none;
    border-radius: var(--radius-lg);
  }
  .tl-card:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklch, var(--node-c, var(--amber)) 55%, transparent); }
  /* node-card'ın masaüstü sabit genişliğini/negatif-marjlarını sıfırla → tam genişlik yatay kart */
  .tl-card .tl-node-card {
    width: 100%; padding: 0; overflow: hidden;
    display: flex; align-items: stretch; gap: 0;
    border: 1px solid var(--line); background: var(--bg-1);
    box-shadow: var(--shadow-sm);
  }
  .tl-card.sel .tl-node-card {
    border-color: var(--node-c, var(--amber));
    box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--node-c, var(--amber)) 45%, transparent), var(--shadow-md);
  }
  /* sol tema şeridi (node-card::before yeniden konumlanır) */
  .tl-node-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--node-c, var(--line)); z-index: 2;
  }
  /* sol thumb — kare, ~72px; masaüstü şerit ölçülerini geçersiz kıl */
  .tl-thumb {
    flex: 0 0 84px; width: 84px; height: auto; min-height: 84px;
    margin: 0; border-bottom: none;
    border-right: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
    align-self: stretch;
  }
  .tl-thumb img { width: 100%; height: 100%; opacity: .85; }
  /* metin bloğu */
  .tl-body {
    flex: 1 1 auto; min-width: 0; position: relative;
    padding: 10px 13px 11px 15px;
  }
  .tl-yr { min-height: 0; padding-right: 88px; }
  .tl-title { font-size: 15.5px; -webkit-line-clamp: 3; }
  /* desen glifleri: kartın sağ-üstünde konumlu; node-pats mutlak → tl-body'ye göre */
  .tl-pats { top: 10px; right: 12px; }
  /* kanıt çubuğu: kartın altına tam genişlik otursun (node-ev negatif marjını sıfırla) */
  .tl-ev { margin: 9px 0 0; height: 3px; border-radius: 100px; }
  .tl-card .node-src { margin-top: 7px; }
  /* kaynak/kitap (canon-dışı) kartı: tuvaldeki .node.book stiliyle parite —
     kesikli çerçeve + soluk zemin, sol şerit kesikli desen */
  .tl-card.book .tl-node-card {
    border-style: dashed;
    border-color: color-mix(in oklch, var(--amber) 42%, var(--line));
    background: color-mix(in oklch, var(--amber) 4%, var(--bg-1));
  }
  .tl-card.book .tl-node-card::before {
    background: repeating-linear-gradient(180deg, var(--amber) 0 5px, transparent 5px 11px);
  }
  /* seçili kartta thumb da parlasın (tuvaldeki .node.selected .node-thumb paritesi) */
  .tl-card.sel .tl-thumb img { opacity: .96; }
  /* boş-durum: yönlendirici kartı dikey ortala */
  .tl-list-empty { display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
}

/* ===========================================================================
   ANDROID / MOBİL SERTLEŞTİRME — dinamik viewport · güvenli alan · dokunma
   Son-kullanıcı katmanı: telefon/katlanabilir cihazda TAM SAYFA oturma.
   =========================================================================== */

/* --- 1) DİNAMİK VIEWPORT YÜKSEKLİĞİ --------------------------------------- *
   Mevcut height:100% eski tarayıcılarda kalır; destekleyen tarayıcıda dvh'ye
   yüksel: Android'de daralıp genişleyen URL çubuğu içeriği (liste/dock/çekmece)
   artık kırpmaz. Masaüstünde 100dvh = pencere yüksekliği → görsel fark yok. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

/* --- 2) GÜVENLİ ALAN (çentik / jest çubuğu) ------------------------------ *
   viewport-fit=cover açık; tarayıcı köşe/çentik altına çizer. Aşağıdaki
   env(safe-area-inset-*) TARAYICI SEKMESİNDE 0 → etkisiz (regresyon yok);
   yalnız PWA/tam-ekranda devreye girer. Alt istifin kaynağı --footer-h: buna
   alt inset'i katınca dock, makro tutamağı, bugün-kartı, banner ve künye
   şeridinin TAMAMI jest çubuğunu tek yerden temizler. */
:root { --footer-h: calc(32px + env(safe-area-inset-bottom, 0px)); }
.kr-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
.floating-dock { right: max(18px, env(safe-area-inset-right, 0px)); }
.drawer { padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  body:not([data-mode="domino"]) .rail { padding-left: env(safe-area-inset-left, 0px); }
}

/* --- 3) DOKUNMA EKSENİ (touch-action) ------------------------------------ *
   Yatay çip/mod şeritleri dikey kaydırmayı, dikey listeler yatay kaydırmayı
   KAPMASIN → Android'de kaydırma his kaybı giderilir. (Tuval 2B-pan bilerek
   serbest bırakıldı: kendi pointer-pan mantığı var.) */
.modes, .chips, .mdom-probs, .era-grp { touch-action: pan-x; }
.tl-list, .mdom-list, .rail-body { touch-action: pan-y; }