/* Arkhaion — Zaman Şeridi (timeline)
   Bağımsız, tek dosya. Bileşen: <x-timeline>. JS: timeline.js.
   Tasarım dili: editoryal/sade, açık zemin (arkhaion.css ile uyumlu). */

.ar-timeline{
  --tl-col: 132px;          /* bir "step" sütununun genişliği (JS okur) */
  --tl-height: 460px;
  --tl-ink:#2b2b28;
  --tl-mut:#8a8578;
  --tl-line:#d9d4c7;
  --tl-band:#efe9dc;
  --tl-band2:#e7e0cf;
  --tl-accent:#b08544;
  position:relative;
  font-family:inherit;
  color:var(--tl-ink);
  user-select:none;
  -webkit-user-select:none;
}

/* tüm ekran genişliği (kapsayıcı dar olsa da taşırır) */
.ar-timeline.is-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.ar-timeline.is-full .ar-tl-viewport{ border-radius:0; border-left:0; border-right:0; }
.ar-timeline.is-full .ar-tl-toolbar,
.ar-timeline.is-full .ar-tl-scroll{ padding-left:14px; padding-right:14px; }
.ar-timeline.is-full .ar-tl-scroll{ box-sizing:border-box; }

/* araç çubuğu */
.ar-tl-toolbar{
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px; min-height:28px;
}
.ar-tl-btn{
  border:1px solid var(--tl-line); background:#fff; color:var(--tl-ink);
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s,border-color .15s;
}
.ar-tl-btn:hover{ background:var(--tl-band); border-color:var(--tl-accent); }
.ar-tl-btn[disabled]{ opacity:.35; cursor:default; }
.ar-tl-crumb{ font-size:12.5px; color:var(--tl-mut); letter-spacing:.02em; }

/* kaydırma alanı — NATIVE yatay kaydırma (her tarayıcıda çalışır) */
.ar-tl-viewport{
  position:relative;
  overflow-x:hidden; overflow-y:hidden;         /* overview: sığar, kaydırma yok */
  height:var(--tl-height);
  background:#f5f2ea;
  border:1px solid var(--tl-line);
  border-radius:8px;
  scrollbar-width:thin;                         /* Firefox */
  scrollbar-color:#c9642e rgba(120,90,50,.12);
}
.ar-tl-viewport.is-scrollable{ overflow-x:auto; cursor:grab; }   /* zoom: native kaydırma */
.ar-tl-viewport.is-scrollable.is-drag{ cursor:grabbing; }
/* görünür yatay scrollbar (WebKit/Chrome/Comet) */
.ar-tl-viewport::-webkit-scrollbar{ height:12px; }
.ar-tl-viewport::-webkit-scrollbar-track{ background:rgba(120,90,50,.10); border-radius:6px; }
.ar-tl-viewport::-webkit-scrollbar-thumb{ background:#c9642e; border-radius:6px; border:2px solid #f5f2ea; }
.ar-tl-viewport::-webkit-scrollbar-thumb:hover{ background:#b0561f; }

.ar-tl-track{
  position:relative; height:100%;
}
/* custom kulp kaldırıldı — native scrollbar kullanılıyor */
.ar-tl-scroll{ display:none !important; }

/* eksen çizgisi + tikler */
.ar-tl-axis{
  position:absolute; left:0; right:0;
  bottom:96px; height:0; border-top:1px solid var(--tl-line);
}
.ar-tl-tick{
  position:absolute; bottom:96px; transform:translateX(-50%);
  text-align:center;
}
.ar-tl-tick .tk-mark{ width:1px; height:8px; margin:0 auto; background:var(--tl-line); }
.ar-tl-tick.is-major .tk-mark{ height:13px; background:var(--tl-mut); }
.ar-tl-tick .tk-lab{
  margin-top:5px; font-size:11px; color:var(--tl-mut); white-space:nowrap;
  cursor:zoom-in;
}
.ar-tl-tick.is-major .tk-lab{ color:var(--tl-ink); font-weight:600; font-size:12px; }
.ar-tl-tick .tk-lab:hover{ color:var(--tl-accent); }

/* olay işaretleri (eksenin hemen üstünde) */
.ar-tl-ev{
  position:absolute; transform:translateX(-50%);
  bottom:104px; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.ar-tl-ev .ev-dot{ width:9px; height:9px; border-radius:50%; background:var(--tl-accent); }
.ar-tl-ev .ev-span{ position:absolute; bottom:4px; height:2px; background:var(--tl-accent); opacity:.4; }
.ar-tl-ev .ev-lab{
  font-size:10.5px; color:var(--tl-ink); background:#fff; border:1px solid var(--tl-line);
  padding:1px 6px; border-radius:10px; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.ar-tl-ev a.ev-lab:hover{ border-color:var(--tl-accent); color:var(--tl-accent); }

/* kişi/görsel düğümleri — her biri KENDİ yılına, dikeyde saçılmış (grid değil) */
.ar-tl-node{
  position:absolute; transform:translateX(-50%);
  width:80px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ar-tl-disc{
  width:52px; height:52px; border-radius:50%;
  background:#e7e0cf center/cover no-repeat;
  border:1px solid var(--tl-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--tl-mut); font-size:18px; overflow:hidden;
}
.ar-tl-disc img{ width:100%; height:100%; object-fit:cover; display:block; }
.ar-tl-node .nd-lab{
  font-size:10.5px; line-height:1.15; color:var(--tl-ink);
  max-width:88px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ar-tl-node a{ color:inherit; text-decoration:none; }
.ar-tl-node a:hover .nd-lab{ color:var(--tl-accent); }
.ar-tl-node a:hover .ar-tl-disc{ border-color:var(--tl-accent); }

/* yaratıcı şeritleri (vazocu / yazar) — doğum→ölüm bandı; isim İÇERİDE */
.ar-tl-cband{
  position:absolute; border-radius:8px; opacity:.92;
  display:flex; align-items:center; overflow:hidden;
  padding:0 8px; box-sizing:border-box;
  box-shadow:0 1px 3px rgba(60,40,20,.18);
  transition:opacity .15s, box-shadow .15s;
}
.ar-tl-cband:hover{ opacity:1; box-shadow:0 2px 8px rgba(60,40,20,.34); z-index:5; overflow:visible; }
.ar-tl-cband.is-clickable{ cursor:pointer; }
.ar-tl-cband.has-thumb{ padding-left:16px; }   /* soldaki daireye yer */
/* minik görsel dairesi — şeridin sol ucunda (vazocu) */
.ar-tl-cband .cb-thumb{
  position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  width:23px; height:23px; border-radius:50%; overflow:hidden; z-index:2;
  background:#e7e0cf center/cover no-repeat; border:1.5px solid #fff;
  box-shadow:0 1px 3px rgba(60,40,20,.30);
  display:flex; align-items:center; justify-content:center; color:#b0682f; font-size:12px;
}
.ar-tl-cband .cb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* isim — şeridin İÇİNDE, beyaz, sığmazsa kırpılır (hover'da title/pop-up tam ad) */
.ar-tl-cband .cb-lab{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:10.5px; line-height:1; color:#fff; pointer-events:none;
  text-shadow:0 1px 1.5px rgba(0,0,0,.28);
}
/* hover'da (overflow görünür) taşan ismi tam göster, arkasına şeritin rengini koy */
.ar-tl-cband:hover .cb-lab{ text-overflow:clip; }

/* dönem bantları (altta) */
.ar-tl-period{
  position:absolute; bottom:0; height:26px;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; letter-spacing:.03em; color:var(--tl-ink);
  background:var(--tl-band); border-left:1px solid #fff; cursor:zoom-in; overflow:hidden;
}
.ar-tl-period:nth-child(even){ background:var(--tl-band2); }
.ar-tl-period:hover{ background:var(--tl-accent); color:#fff; }
.ar-tl-period span{ padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* alt kaydırma çubuğu (sürüklenebilir kulp) */
.ar-tl-scroll{
  position:relative; height:14px; margin-top:10px;
  background:#efe9dc; border-radius:7px;
}
.ar-tl-thumb{
  position:absolute; top:0; height:100%; min-width:40px; left:0; width:30%;
  background:#cdbf9f; border-radius:7px; cursor:grab;
  display:flex; align-items:center; justify-content:center;
}
.ar-tl-thumb::before{ content:"⋮⋮"; font-size:10px; color:#7c6f52; letter-spacing:-1px; transform:rotate(90deg); }
.ar-tl-thumb.is-drag{ cursor:grabbing; background:var(--tl-accent); }

/* Sürüklenebilir olduğunda (zoom'da) "el" imleci — sürüklenebildiği belli olsun */
.ar-tl-viewport.is-scrollable{ cursor:grab; }
.ar-tl-viewport.is-scrollable.is-drag{ cursor:grabbing; }
/* cat: kaydırma çubuğunu belirginleştir ve ekran kenarından yukarı al */
.ar-timeline.is-cat .ar-tl-scroll{
  height:12px; margin:8px 24px 14px 210px; background:rgba(120,90,50,.16);
}
.ar-timeline.is-cat .ar-tl-thumb{ background:#c9642e; box-shadow:0 1px 4px rgba(60,40,20,.3); }
.ar-timeline.is-cat .ar-tl-thumb::before{ color:#fff; }

/* yükleniyor / boş */
.ar-tl-loading{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(245,242,234,.7); color:var(--tl-mut); font-size:13px; border-radius:8px;
}
.ar-timeline.is-loading .ar-tl-loading{ display:flex; }
.ar-tl-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--tl-mut); font-size:13px; text-align:center; padding:0 20px;
}

/* olay şeritleri (kategori renkli, lane'li) */
.ar-tl-evband{
  position:absolute; border-radius:3px; opacity:.92; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; box-shadow:0 1px 2px rgba(40,34,24,.12);
}
.ar-tl-evband:hover{ opacity:1; }
.ar-tl-evband .evb-lab{
  font-size:9.5px; line-height:1; color:#fff; padding:0 5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; letter-spacing:.02em;
}

/* olay renk açıklaması (araç çubuğunda) */
.ar-tl-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; align-items:center; }
.ar-tl-legend .leg-item{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tl-mut); }
.ar-tl-legend .leg-item i{ width:11px; height:11px; border-radius:3px; display:inline-block; }

/* tıklanabilir düğüm */
.ar-tl-node.is-clickable{ cursor:pointer; }
.ar-tl-node.is-clickable:hover .ar-tl-disc{ border-color:var(--tl-accent); }
.ar-tl-node.is-clickable:hover .nd-lab{ color:var(--tl-accent); }

/* düğüm pop-up (ressam kartı) */
.ar-tl-pop{
  position:absolute; z-index:40; display:none; width:240px; max-width:82vw;
  background:#fffdf8; border:1px solid var(--tl-line); border-radius:10px;
  box-shadow:0 8px 28px rgba(40,34,24,.18); padding:12px 13px 13px;
  opacity:0; transform:translateY(4px); transition:opacity .16s ease, transform .16s ease;
}
.ar-tl-pop.is-open{ opacity:1; transform:none; }
.ar-tl-pop-x{
  position:absolute; top:6px; right:8px; border:0; background:transparent; cursor:pointer;
  font-size:18px; line-height:1; color:var(--tl-mut);
}
.ar-tl-pop-x:hover{ color:var(--tl-ink); }
.ar-tl-pop .pop-name{ font-size:14px; font-weight:600; color:var(--tl-ink); padding-right:16px; }
.ar-tl-pop .pop-dates{ font-size:11.5px; color:var(--tl-accent); margin-top:2px; letter-spacing:.02em; }
.ar-tl-pop .pop-note{ font-size:12px; line-height:1.45; color:#57534a; margin-top:8px; }
.ar-tl-pop .pop-go{
  display:inline-block; margin-top:11px; font-size:12px; color:#fff; text-decoration:none;
  background:var(--tl-accent); border-radius:999px; padding:5px 12px;
}
.ar-tl-pop .pop-go:hover{ background:#98702f; }

/* ============ CAT varyantı: tam ekran + canlı tema ============ */
.ar-timeline.is-cat{
  --tl-ink:#3a2f26;
  --tl-mut:#a58e70;
  --tl-line:#e4d6bf;
  --tl-band:#f0e1c6;
  --tl-band2:#e8d5b3;
  --tl-accent:#c9642e;               /* canlı terracotta */
  display:flex; flex-direction:column; height:100%;
}
.ar-timeline.is-cat .ar-tl-viewport{
  flex:1 1 auto; height:auto;
  background:
    radial-gradient(130% 80% at 50% -10%, #fdf6e8 0%, rgba(253,246,232,0) 55%),
    linear-gradient(180deg,#f8efdd 0%, #efe1c8 100%);
}
.ar-timeline.is-cat .ar-tl-period{ background:var(--tl-band); }
.ar-timeline.is-cat .ar-tl-period:nth-child(even){ background:var(--tl-band2); }

/* creator türü halkası (disk kenarı renkli) */
.ar-timeline.is-cat .ar-tl-disc{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--ct, var(--tl-line)), 0 2px 7px rgba(50,35,20,.14);
}
.ar-timeline.is-cat .ar-tl-node.is-clickable:hover .ar-tl-disc{
  box-shadow:0 0 0 2px var(--ct, var(--tl-accent)), 0 4px 13px rgba(50,35,20,.24);
}
/* olaylar → sabit bağlam katmanı (sönük, arka planda) */
.ar-timeline.is-cat .ar-tl-evband{ opacity:.5; box-shadow:none; }
.ar-timeline.is-cat .ar-tl-evband:hover{ opacity:.9; }

@media (max-width:640px){
  .ar-timeline{ --tl-col:104px; --tl-height:420px; }
  .ar-tl-disc{ width:44px; height:44px; }
  .ar-tl-node{ width:76px; }
  .ar-tl-legend{ gap:7px; }
}