/* ==========================================================================
   Khronos — v2 (dark) giysisi.
   css/khronos.css'in ÜSTÜNE biner: konumlar/işleyiş oradan, burada yalnız görünüm.
   Bileşen: <x-khronos skin="v2">  ·  JS: public/js/khronos.js (aynı dosya)

   RENKLERİ DENEMEK İÇİN: aşağıdaki "AYAR" bloğu. Kaydet → sayfayı yenile.
   Tarayıcıda canlı denemek için: Geliştirici araçları → .kh--v2 öğesi → değişkeni değiştir.
   ========================================================================== */

.kh.kh--v2 {
  /* ===== AYAR: cetvel renkleri ===== */
  --kh-p0: #bfccc2;   /* Geometrik   — dönem şeridi (soluk) */
  --kh-p1: #e2c2b3;   /* Arkaik */
  --kh-p2: #c6d3de;   /* Klasik */
  --kh-p3: #d8cfae;   /* Hellenistik */
  --kh-p4: #c9bccb;   /* Roma */
  --kh-p5: #c2bdb4;   /* Geç Antik */
  --kh-p6: #9c978e;   /* sonrası */
  --kh-band-op: .9;            /* etkin olmayan dönem şeritlerinin koyuluğu (0–1) */
  --kh-accent: #4a80a3;        /* etkin dönem şeridi + alt dönem şeritleri (çizimdeki mavi) */
  --kh-accent-text: #ffffff;   /* mavi şerit üstündeki yazı */
  --kh-band-text: #1b1b1b;     /* soluk şerit üstündeki yazı */
  --kh-box: color-mix(in srgb, var(--kh-accent) 42%, transparent);  /* ana cetvelde etkin dönemin alanı */
  --kh-rail-bg: var(--rail-bg);       /* cetvel zemini (düz) */
  --kh-tick: #d9d6cf;          /* çizgi ve yıl yazıları */
  --kh-now-c: #f2efe8;         /* ibre: şu an bakılan yıl */

  /* ===== AYAR: ölçüler ===== */
  /* cetvel sütunu genişliği: base.css → --rail-w (her sayfada aynı) */
  --kh-gutter: clamp(0px, 6.4vw, 0px);    /* ilk hali: --kh-gutter: clamp(24px, 6.4vw, 140px); /  görsellerle kenar çubukları arasındaki noise şerit */
  --kh-row-h: .5;     /* görselli satırın boyu = ekran yüksekliği × bu (0.5 → ekranda 2 satır) */
  --kh-text-h: 1;     /* yazar kartının boyu, görselli kartın katı (1 = aynı boy, .5 = yarısı) */
  --kh-gap-h: .06;    /* dönem değişirken sütunlarda küçük boşluk (0 = boşluksuz, tek parça) */

  /* ===== AYAR: hareket ===== */
  --kh-spring: .010;        /* kayma: büyük = çevik, küçük = ağır, uzun süzülerek durur */
  --kh-speeds: 1 .8 .7;     /* sütun hızları soldan sağa. Kartlar sütunlara bu oranda dağılır: oran
                               farkı büyüdükçe hız farkı büyür (1 1 1 → hepsi aynı hızda). */

  /* eski khronos.css değişkenleri → dark */
  --kh-top: 0px;
  --kh-ink: var(--fg);
  --kh-mut: var(--fg-3);
  --kh-line: var(--line);
  --kh-bg: var(--kh-rail-bg);
  --kh-rail: var(--rail-w);
  --font-optima: var(--font-ui);
  --font-mono: var(--font-ui);

  background: var(--main-paint);
  color: var(--fg);
  min-height: 100vh;
}

/* ===== AYAR: açık tema (Cengiz'in açık noise'ları: içerik ~#ddd, kenar/cetvel ~#b8b8b8) ===== */
[data-theme="light"] .kh.kh--v2 {
  --kh-band-op: .75;
  --kh-band-text: #1b1b1b;
  --kh-tick: #2b2925;          /* çizgi ve yıl yazıları: koyu */
  --kh-now-c: #1b1b1b;         /* ibre */
  --kh-box: color-mix(in srgb, var(--kh-accent) 30%, transparent);
}

/* ── Gövde ─────────────────────────────────────────── */
.kh--v2 .kh-body { padding: 0 var(--kh-gutter); }
.kh--v2 .kh-msg { color: var(--fg-3); }

.kh--v2 .kh-title .kh-in { padding: 0 0 18px; }
.kh--v2 .kh-title h2 { color: var(--fg); font-weight: 400; }
.kh--v2 .kh-title p { font-size: 12px; letter-spacing: .14em; color: var(--pc, var(--kh-c)); }

/* sahne: boyu içeriğe göre (satır × ekran payı), JS ölçer */
.kh--v2 .kh-sec.kh-scene { height: auto; overflow: visible; }
.kh--v2 .kh-scene .kh-in { height: auto; }
.kh--v2 .kh-shead { padding: 22px 0 10px; padding-right: 230px; }
.kh--v2 .kh-shead h3 { font-size: 12.5px; letter-spacing: .1em; color: var(--pc, var(--kh-c)); }
.kh--v2 .kh-shead p { color: var(--fg-3); }

/* üç sütun, kenardan kenara */
.kh--v2 .kh-grid {
  display: grid; gap: 0; padding: 0;
  flex: none; overflow: visible;
}
.kh--v2 .kh-th {
  position: relative; overflow: hidden;
  background: var(--card-bg);
  outline: 0;
  transition: opacity .35s ease;
}
.kh--v2 .kh-th img {
  width: 100%; height: 100% !important;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
/* fare hangi görseldeyse: o hafif büyür, ötekiler hafif söner */
.kh--v2 .kh-cols:has(.kh-th:hover) .kh-th:not(:hover) { opacity: .55; }
.kh--v2 .kh-th:hover img { transform: scale(1.04); }
.kh--v2 .kh-th.is-dim { opacity: .14; }

/* ad: görselin altında, yalnız üzerine gelince */
.kh--v2 .kh-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 26px 14px 11px;
  font-size: 13px; text-align: left; color: #f2efe8;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
  opacity: 0; transition: opacity .3s;
}
.kh--v2 .kh-th:hover .kh-cap { opacity: 1; }

/* yazar (görselsiz) kartı — vazo kartıyla aynı boyda, kendi başına bir kart:
   üstte "YAZAR" + çizgi, arkada adın baş harfi (çok soluk), altta büyük ad · yıllar · kısa not.
   Zemin dönemin rengine hafif çalar; vazo kartlarından böyle ayrılır. */
.kh--v2 .kh-th.is-text {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 6px; padding: clamp(18px, 2vw, 34px);
  text-align: left;
  background: color-mix(in srgb, var(--pc, var(--kh-c)) 9%, var(--text-card));
  border: 0; box-shadow: inset 0 0 0 1px rgba(var(--tint), .05);
  transition: background .35s ease, opacity .35s ease;
}
.kh--v2 .kh-th.is-text small {
  position: absolute; top: clamp(18px, 2vw, 34px); left: clamp(18px, 2vw, 34px);
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
}
.kh--v2 .kh-th.is-text small::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.kh--v2 .kh-th.is-text .kh-ini {
  position: absolute; right: -.04em; top: -.12em;
  font-weight: 400; line-height: 1; pointer-events: none;
  font-size: clamp(160px, 17vw, 340px);
  color: var(--fg); opacity: .045;
  transition: opacity .5s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.kh--v2 .kh-th.is-text span {
  position: relative;
  font-size: clamp(26px, 2.3vw, 44px); line-height: 1.05; letter-spacing: -.005em;
  color: var(--fg); -webkit-line-clamp: 3;
}
.kh--v2 .kh-th.is-text em {
  position: relative; font-style: normal;
  font-size: 11.5px; letter-spacing: .12em; color: var(--pc, var(--kh-c));
}
.kh--v2 .kh-th.is-text p {
  position: relative; margin: 8px 0 0; max-width: 34em;
  font-size: 13px; line-height: 1.45; color: var(--fg-3);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.kh--v2 .kh-th.is-text:hover { background: color-mix(in srgb, var(--pc, var(--kh-c)) 14%, var(--text-card)); }
.kh--v2 .kh-th.is-text:hover .kh-ini { opacity: .08; transform: scale(1.04); }

.kh--v2 .kh-more { padding: 10px 0 18px; }
.kh--v2 .kh-more button { color: var(--fg-3); }
.kh--v2 .kh-more button:hover { color: var(--fg); }

/* ── Sütun şeritleri: sahne ekran boyunda sabit, şeritler içinde farklı hızda kayar ── */
.kh--v2 .kh-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.kh--v2 .kh-cols { display: grid; height: 100%; }
.kh--v2 .kh-col { position: relative; min-width: 0; }
.kh--v2 .kh-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.kh--v2 .kh-track > .kh-th { position: absolute; left: 0; right: 0; }

/* ── Düğmeler ve liste ─────────────────────────────── */
.kh--v2 .kh-tools { top: 16px; right: calc(var(--rail-w) + var(--kh-gutter)); }
.kh--v2 .kh-chip {
  background: color-mix(in srgb, var(--main-c) 85%, transparent); border-color: var(--line-2); color: var(--fg-2);
}
.kh--v2 .kh-chip:hover { color: var(--fg); }
.kh--v2 .kh-chip.is-on { background: var(--fg); border-color: var(--fg); color: var(--on-fg); }

.kh--v2 .kh-list { top: 0; right: var(--rail-w); background: var(--surface-2); border-left-color: var(--line); box-shadow: -14px 0 36px var(--shadow); }
.kh--v2 .kh-list-h { border-bottom-color: var(--line); }
.kh--v2 .kh-list-h input { background: var(--field); border-color: var(--line-2); color: var(--fg); }
.kh--v2 .kh-list-h input:focus { border-color: var(--fg-2); }
.kh--v2 .kh-list-b a { border-bottom-color: rgba(var(--tint), .06); color: var(--fg); }
.kh--v2 .kh-list-b a:hover { color: var(--pc, var(--kh-c)); }

/* ── Popup ─────────────────────────────────────────── */
.kh--v2 .kh-pop { background: var(--surface); border-color: var(--line); box-shadow: 0 14px 40px var(--shadow); color: var(--fg); }
.kh--v2 .kh-pop { width: min(270px, 90vw); }
.kh--v2 .kh-pop img { display: none; }   /* görsel zaten altında: pencere kendi kutusunun üstünde açılır */
.kh--v2 .kh-pop p { color: var(--fg-2); }
.kh--v2 .kh-pop a { background: var(--fg); color: var(--on-fg); }
.kh--v2 .kh-pop a:hover { background: var(--kh-accent); color: #fff; }
.kh--v2 .kh-pop-x { background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--fg); }

/* ── Cetvel ────────────────────────────────────────── */
.kh--v2 .kh-rail {
  top: 0; height: 100dvh;
  background: var(--rail-paint);
  border-left: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* sütun payları: olaylar · dar cetvel · (boşluk) · ana cetvel */
.kh--v2 .kh-events { flex: 0 0 21%; min-width: 0; }
.kh--v2 .kh-sub { flex: 0 0 25%; min-width: 0; }
.kh--v2 .kh-funnel { flex: 0 0 10%; width: 10%; min-width: 0; }
.kh--v2 .kh-main { flex: 1 1 0; min-width: 0; }

/* huni kaldırıldı (dark'ta göze batıyordu); boşluk kalır */
.kh--v2 .kh-funnel polygon,
.kh--v2 .kh-funnel line { display: none; }

/* çizgiler ve yıllar: yıllar dikey (aşağıdan yukarı) */
.kh--v2 .kh-t { background: var(--kh-tick); opacity: .28; }
.kh--v2 .kh-t.is-major { opacity: .6; }
.kh--v2 .kh-l {
  right: 21px;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 9px; letter-spacing: .06em;
  color: var(--kh-tick); opacity: .5;
}
.kh--v2 .kh-l i { opacity: .8; }

/* dönem şeritleri */
.kh--v2 .kh-band { width: 16px; border-bottom: 3px solid var(--kh-rail-bg); }
.kh--v2 .kh-band::before { opacity: var(--kh-band-op); }
.kh--v2 .kh-band span { color: var(--kh-band-text); font-size: 8.5px; }
.kh--v2 .kh-band.is-on::before { background: var(--kh-accent); opacity: 1; }
.kh--v2 .kh-band.is-on span { color: var(--kh-accent-text); }
/* dar cetveldeki alt dönemler: hep mavi */
.kh--v2 .kh-sub .kh-band::before { background: var(--kh-accent); opacity: .85; }
.kh--v2 .kh-sub .kh-band span { color: var(--kh-accent-text); }

/* ana cetvelde etkin dönemin alanı: şeridin ve yılların altında */
.kh--v2 .kh-main .kh-marks { z-index: 1; }
.kh--v2 .kh-box { z-index: 0; background: var(--kh-box); border: 0; }

/* ibre ve okuyucu */
.kh--v2 .kh-now { z-index: 2; background: var(--kh-now-c); box-shadow: none; }
.kh--v2 .kh-now b { color: var(--kh-now-c); background: color-mix(in srgb, var(--kh-rail-bg) 92%, transparent); }
.kh--v2 .kh-read { z-index: 3; background: var(--fg); }
.kh--v2 .kh-tag { background: var(--fg); color: var(--on-fg); }

/* olay şeridi */
.kh--v2 .kh-ev { background: rgba(var(--tint), .09); }
.kh--v2 .kh-ev:hover { background: rgba(var(--tint), .24); }
.kh--v2 .kh-ev span { color: var(--fg-2); }
.kh--v2 .kh-life { background: var(--kh-accent); }

/* ── Yalnız cetvel (öteki sayfalar): sağda sabit; soluk durur, üzerine gelince canlanır ── */
.kh.kh--v2.kh--rail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 25;
  width: var(--rail-w); min-height: 0;
  background: var(--rail-paint);
}
.kh--rail .kh-body, .kh--rail .kh-tools, .kh--rail .kh-list, .kh--rail .kh-pop { display: none !important; }
.kh--rail .kh-rail > :not(.kh-tag) { opacity: .5; transition: opacity .35s ease; }
.kh--rail .kh-rail:hover > :not(.kh-tag) { opacity: 1; }
[data-theme="light"] .kh--rail .kh-rail > :not(.kh-tag) { opacity: .8; }   /* açık zeminde %50 fazla soluk */
[data-theme="light"] .kh--rail .kh-rail:hover > :not(.kh-tag) { opacity: 1; }
.kh--rail .kh-ruler { cursor: pointer; }

/* ── Telefon (≤768px): sağda ince dikey şerit (--rail-w 32px, üst çubuğun altından) ──
   Kapalıyken GENEL bakış: dönem renkleri + ibre (yazı yok) — "zamanın neresindeyim".
   Dokununca açılır (khronos.js'in kendi telefon davranışı: is-open): iki cetvel + yıllar; parmakla
   sürüklerken baloncukta yıl, bırakınca o yıla gider (öteki sayfalarda Khronos o yılda açılır). */
@media (max-width: 768px) {
  .kh.kh--v2 { --kh-gutter: 0px; --kh-row-h: .3; }
  .kh--v2 .kh-body { padding-right: var(--rail-w); }
  .kh--v2 .kh-rail {
    top: var(--top-h); height: calc(100dvh - var(--top-h)); width: var(--rail-w);
    background: var(--rail-paint);
    transition: width .25s ease, box-shadow .25s ease;
  }
  .kh--v2 .kh-rail.is-open { width: min(300px, 86vw); box-shadow: -10px 0 28px var(--shadow); }
  /* kapalı: alt cetvel yerine genel cetvel, yazısız */
  .kh--v2 .kh-rail:not(.is-open) .kh-sub { display: none; }
  .kh--v2 .kh-rail:not(.is-open) .kh-main { display: block; flex: 1 1 0; }
  .kh--v2 .kh-rail:not(.is-open) .kh-l,
  .kh--v2 .kh-rail:not(.is-open) .kh-band span,
  .kh--v2 .kh-rail:not(.is-open) .kh-now b { display: none; }
  .kh--v2 .kh-rail:not(.is-open) .kh-band { display: flex; width: 12px; }
  .kh--v2 .kh-rail:not(.is-open) .kh-t { width: 5px; }
  .kh--v2 .kh-rail:not(.is-open) .kh-t.is-major { width: 9px; }
  /* sürüklerken yıl baloncuğu: açık cetvelin üstünde sabit (khronos.css telefon kuralı), biraz büyük */
  .kh--v2 .kh-tag { font-size: 13px; padding: 6px 10px; }
  .kh--v2 .kh-tools { right: calc(var(--rail-w) + 8px); top: calc(var(--top-h) + 10px); }
  .kh--v2 .kh-list { right: 0; top: var(--top-h); }
  .kh--v2 .kh-shead { padding-right: 0; padding-top: 44px; }

  /* öteki sayfalar: yalnız cetvel */
  .kh.kh--v2.kh--rail { top: var(--top-h); width: var(--rail-w); z-index: 26; }
  .kh--rail .kh-rail > :not(.kh-tag),
  [data-theme="light"] .kh--rail .kh-rail > :not(.kh-tag) { opacity: .9; }
}