/* Khronos — dikey, iki cetvelli zaman gezgini.
   Bileşen: <x-khronos>. JS: khronos.js. Zemin nötr, tek renk kaynağı dönem rengi (--kh-c). */

.kh{
  --kh-top:60px;
  --kh-ink:#1d1c1a;
  --kh-mut:#77736b;
  --kh-line:#d8d6d0;
  --kh-bg:#f6f6f4;
  --kh-c:#2c6e91;
  --kh-events:34px;
  --kh-sub:68px;
  --kh-gap:24px;
  --kh-main:92px;
  --kh-rail:calc(var(--kh-events) + var(--kh-sub) + var(--kh-gap) + var(--kh-main));
  display:flex; align-items:flex-start;
  background:var(--kh-bg); color:var(--kh-ink);
  font-family:var(--font-optima);
}

/* FAB cetvelin üstüne binmesin: bu sayfada gövdeye alınır */
body:has(.kh) .fp-fab{ right:calc(186px + 34px); }
body:has(.kh) .fp-wrap{ right:calc(186px + 34px) !important; }

/* ── Gövde ─────────────────────────────────────────── */
.kh-body{ flex:1 1 auto; min-width:0; }
.kh-msg{ padding:30vh 24px; text-align:center; color:var(--kh-mut); font-size:15px; }

.kh-sec{ height:calc(100dvh - var(--kh-top)); box-sizing:border-box; overflow:hidden; }
.kh-sec.is-title{ height:calc(50dvh - var(--kh-top) * .5); }
.kh-in{ height:100%; display:flex; flex-direction:column; will-change:transform,opacity; transform-origin:50% 50%; }

/* Başlık altına yaslı: ait olduğu içeriğe yakın, dönemler arası boşluk üstte kalır */
.kh-title .kh-in{ justify-content:flex-end; padding:0 clamp(16px,4vw,56px) 16px; }
.kh-title h2{
  margin:0; font-family:var(--font-optima); font-weight:400; line-height:1.05;
  font-size:clamp(36px,6.4vw,84px); color:var(--kh-ink); letter-spacing:-.01em;
}
.kh-title h2 span{ display:inline-block; }
.kh-title p{
  margin:12px 0 0; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:var(--pc,var(--kh-c));
}

.kh-shead{
  flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px;
  padding:14px clamp(14px,2.4vw,28px) 10px; padding-right:240px;
}
.kh-shead h3{ margin:0; font-family:var(--font-mono); font-weight:400; font-size:12.5px; letter-spacing:.08em; color:var(--pc,var(--kh-c)); white-space:nowrap; }
.kh-shead p{ margin:0; font-size:13px; color:var(--kh-mut); line-height:1.35; }

/* Satırlar JS'te hesaplanır: oran korunur, satır genişliği dolar, kırpma yok */
.kh-grid{
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
  padding:0 clamp(14px,2.4vw,28px);
}
.kh-row{ display:flex; gap:8px; flex:0 0 auto; }
.kh-th{
  position:relative; flex:0 0 auto; display:block; text-decoration:none; color:inherit;
  transition:opacity .18s, outline-color .12s; outline:1px solid transparent; outline-offset:2px;
}
.kh-th img{ display:block; width:100%; object-fit:contain; }
.kh-cap{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin-top:4px; font-size:11.5px; line-height:1.2; color:var(--kh-mut); text-align:center; overflow-wrap:anywhere;
}
.kh-th:hover,.kh-th:focus-visible{ outline-color:var(--pc,var(--kh-c)); z-index:2; }
.kh-th:hover .kh-cap{ color:var(--kh-ink); }
.kh-th.is-text{
  background:#fff; border:1px solid var(--kh-line); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; padding:6px 10px; text-align:center;
  outline-offset:0;
}
.kh-th.is-text span{
  font-size:16px; line-height:1.2; color:var(--kh-ink);
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow-wrap:anywhere;
}
.kh-th.is-dim{ opacity:.14; }
.kh-more{ flex:0 0 auto; padding:8px clamp(14px,2.4vw,28px) 12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; }
.kh-more button{ all:unset; cursor:pointer; color:var(--kh-mut); }
.kh-more button:hover,.kh-more button:focus-visible{ color:var(--kh-ink); text-decoration:underline; }

/* Dönemin tüm adları: düz, tıklanabilir liste */
.kh-list{
  position:fixed; z-index:35; top:var(--kh-top); bottom:0; right:var(--kh-rail);
  width:min(430px, calc(100vw - 240px)); display:flex; flex-direction:column;
  background:#fff; border-left:1px solid var(--kh-line); box-shadow:-12px 0 32px rgba(20,18,14,.12);
}
.kh-list[hidden]{ display:none; }
.kh-list-h{ position:relative; flex:0 0 auto; padding:16px 18px 12px; border-bottom:1px solid var(--kh-line); }
.kh-list-h h4{ margin:0 34px 10px 0; font-family:var(--font-optima); font-size:20px; font-weight:400; line-height:1.2; color:var(--kh-ink); }
.kh-list-h h4 small{ display:block; margin-top:2px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--kh-mut); }
.kh-list-h input{
  width:100%; box-sizing:border-box; padding:8px 10px; font-size:15px; font-family:var(--font-optima);
  border:1px solid var(--kh-line); background:var(--kh-bg); color:var(--kh-ink); border-radius:2px; outline:0;
}
.kh-list-h input:focus{ border-color:var(--kh-ink); }
.kh-list-x{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; background:none; font-size:20px; line-height:1; color:var(--kh-mut); cursor:pointer; }
.kh-list-x:hover{ color:var(--kh-ink); }
.kh-list-b{ flex:1 1 auto; overflow-y:auto; padding:6px 18px 22px; overscroll-behavior:contain; }
.kh-list-b h5{
  margin:16px 0 5px; font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--kh-c);
}
.kh-list-b a{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0;
  border-bottom:1px solid #efeeeb; color:var(--kh-ink); text-decoration:none; font-size:15px; line-height:1.25;
}
.kh-list-b a:hover{ color:var(--kh-c); }
.kh-list-b a small{ flex:0 0 auto; font-family:var(--font-mono); font-size:10px; color:var(--kh-mut); white-space:nowrap; }
.kh-list-e{ margin:18px 0; color:var(--kh-mut); font-size:14px; }

/* Kültür düğmeleri: sahne başlığı hizasında, gövdenin sağında */
.kh-tools{
  position:fixed; z-index:30; top:calc(var(--kh-top) + 9px); right:calc(186px + 14px);
  display:flex; gap:4px;
}
.kh-chip{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; padding:4px 9px; cursor:pointer;
  background:rgba(246,246,244,.9); border:1px solid var(--kh-line); color:var(--kh-mut); border-radius:2px;
}
.kh-chip.is-on{ background:var(--kh-ink); border-color:var(--kh-ink); color:#fff; }

/* ── Cetvel sütunu ─────────────────────────────────── */
.kh-rail{
  flex:0 0 auto; width:var(--kh-rail); box-sizing:border-box; position:sticky; top:var(--kh-top);
  height:calc(100dvh - var(--kh-top)); z-index:20;
  display:flex; background:rgba(246,246,244,.94); border-left:1px solid var(--kh-line);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  font-family:var(--font-mono); user-select:none; -webkit-user-select:none;
}
.kh-events{ position:relative; flex:0 0 var(--kh-events); }
.kh-sub{ flex:0 0 var(--kh-sub); }
.kh-main{ flex:0 0 var(--kh-main); }
.kh-funnel{ flex:0 0 var(--kh-gap); width:var(--kh-gap); height:100%; display:block; overflow:visible; }
.kh-funnel polygon{ fill:var(--kh-c); opacity:.13; transition:fill .35s; }
.kh-funnel line{ stroke:var(--kh-c); stroke-width:1; opacity:.55; transition:stroke .35s; }

.kh-ruler{ position:relative; height:100%; cursor:crosshair; touch-action:none; overflow:hidden; }
.kh-marks{ position:absolute; inset:0; pointer-events:none; }
.kh-t{ position:absolute; right:0; height:1px; background:var(--kh-ink); opacity:.32; width:7px; }
.kh-t.is-major{ width:15px; opacity:.72; }
.kh-l{
  position:absolute; right:19px; transform:translateY(-50%); font-size:9px; letter-spacing:.03em;
  color:var(--kh-ink); opacity:.62; white-space:nowrap; line-height:1;
}
.kh-l i{ font-style:normal; opacity:.65; }

/* Dönem şeridi (ana) ve alt dönem şeridi (yan): sol kenarda, kitap sırtı gibi */
.kh-band{
  position:absolute; left:0; width:15px; overflow:hidden; box-sizing:border-box;
  border-bottom:1px solid var(--kh-bg);
  display:flex; align-items:center; justify-content:center;
}
.kh-band::before{ content:""; position:absolute; inset:0; background:var(--pc); opacity:.34; }
.kh-band span{
  position:relative; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9px; letter-spacing:.05em; white-space:nowrap; color:var(--kh-ink);
}
.kh-band.is-on::before{ opacity:.82; }
.kh-band.is-on span{ color:#fff; }

/* Aktif dönem kutusu: yüksekliği dönemin süresiyle orantılı */
.kh-box{
  position:absolute; left:0; right:0; pointer-events:none; box-sizing:border-box;
  background:color-mix(in srgb, var(--kh-c) 20%, transparent);
  border-top:1px solid var(--kh-c); border-bottom:1px solid var(--kh-c);
  transition:background-color .35s, border-color .35s;
}

/* İbre: gövdenin bulunduğu yıl */
.kh-now{ position:absolute; left:0; right:0; height:1px; background:var(--kh-c); pointer-events:none; box-shadow:0 0 5px var(--kh-c); transition:background-color .35s; }
.kh-now b{
  position:absolute; left:2px; top:3px; font-weight:400; font-size:9px; letter-spacing:.03em;
  color:var(--kh-c); background:rgba(246,246,244,.92); padding:0 2px; white-space:nowrap; line-height:1.3;
}

/* Okuyucu: fareyle gezen çubuk */
.kh-read{ position:absolute; left:0; right:0; height:3px; margin-top:-1px; background:var(--kh-ink); pointer-events:none; opacity:0; transition:opacity .1s; }
.kh-read b{ display:none; }
.kh-ruler.is-hover .kh-read{ opacity:1; }
.kh-tag{
  position:absolute; z-index:5; right:100%; margin-right:6px; transform:translateY(-50%);
  background:var(--kh-ink); color:#fff; font-size:10.5px; letter-spacing:.04em; padding:4px 7px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .1s; border-radius:1px;
}
.kh-tag.is-on{ opacity:1; }

/* Olay şeridi: yan cetvelle aynı ölçek, sönük, tek renk */
.kh-ev{
  position:absolute; width:13px; min-height:6px; background:rgba(29,28,26,.13); cursor:default;
  overflow:hidden; display:flex; justify-content:center; transition:background .12s;
}
.kh-ev:hover{ background:rgba(29,28,26,.34); }
.kh-ev span{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:8.5px; white-space:nowrap; padding:3px 0; color:var(--kh-ink); }
.kh-life{ position:absolute; right:1px; width:3px; background:var(--kh-c); pointer-events:none; }

/* ── Popup ─────────────────────────────────────────── */
.kh-pop{
  position:fixed; z-index:60; width:270px; background:#fff; border:1px solid var(--kh-line);
  box-shadow:0 10px 34px rgba(20,18,14,.2); font-family:var(--font-optima); color:var(--kh-ink);
}
.kh-pop[hidden]{ display:none; }
.kh-pop img{ display:block; width:100%; max-height:250px; object-fit:contain; background:#efeeeb; }
.kh-pop-b{ padding:11px 13px 13px; }
.kh-pop h4{ margin:0; font-size:18px; font-weight:400; line-height:1.2; font-family:var(--font-optima); }
.kh-pop small{ display:block; margin-top:3px; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--kh-mut); }
.kh-pop p{ margin:9px 0 0; font-size:13px; line-height:1.42; color:#45433e; }
.kh-pop a{
  display:inline-block; margin-top:11px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color:#fff; background:var(--kh-ink); padding:6px 10px; text-decoration:none;
}
.kh-pop a:hover{ background:var(--pc,var(--kh-c)); }
.kh-pop-x{ position:absolute; top:6px; right:6px; display:none; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.9); font-size:18px; cursor:pointer; }

/* ── Dar ekran: yalnız ince yan cetvel, dokununca hepsi açılır ── */
@media (max-width:768px){
  .kh{ --kh-top:54px; --kh-sub:40px; }
  body:has(.kh) .fp-fab{ right:54px; }
  body:has(.kh) .fp-wrap{ right:54px !important; }
  .kh-tools{ right:50px; }
  .kh-chip{ padding:4px 7px; }
  .kh-th.is-text{ padding:4px 6px; }
  .kh-th.is-text span{ font-size:14px; overflow-wrap:normal; }
  .kh-shead{ padding-right:14px; padding-top:42px; }
  .kh-list{ right:0; left:0; width:auto; z-index:50; border-left:0; }
  .kh-body{ padding-right:40px; }
  .kh-rail{ position:fixed; right:0; width:40px; }
  .kh-rail.is-past{ visibility:hidden; }
  .kh-rail .kh-events,.kh-rail .kh-funnel,.kh-rail .kh-main{ display:none; }
  .kh-rail:not(.is-open) .kh-sub .kh-l i{ display:none; }
  .kh-rail:not(.is-open) .kh-sub .kh-l{ right:11px; font-size:8px; }
  .kh-rail:not(.is-open) .kh-t{ width:4px; }
  .kh-rail:not(.is-open) .kh-t.is-major{ width:9px; }
  .kh-rail:not(.is-open) .kh-band,.kh-rail:not(.is-open) .kh-now b{ display:none; }
  .kh-rail.is-open{
    --kh-sub:68px; width:calc(var(--kh-events) + 68px + var(--kh-gap) + var(--kh-main)); z-index:40;
    box-shadow:-10px 0 28px rgba(20,18,14,.18); background:rgba(246,246,244,.98);
  }
  .kh-rail.is-open .kh-events,.kh-rail.is-open .kh-main{ display:block; }
  .kh-rail.is-open .kh-funnel{ display:block; }
  .kh-tag{ right:auto; left:6px; margin:0; top:0 !important; transform:none; }
  .kh-pop{ left:0 !important; right:0; bottom:0; top:auto !important; width:auto; max-height:80dvh; overflow:auto; border-width:1px 0 0; }
  .kh-pop img{ max-height:38dvh; }
  .kh-pop-x{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  .kh-in{ transform:none !important; opacity:1 !important; }
}