/* ==========================================================================
   v198 — ZAMAN ÇİZGİSİ (ZC alanı)
   stil.css'ten SONRA yüklenir (bağlantıyı UYG alanı ekler). Yalnız zaman çizgisi
   bloğu (.zc-blok) ve tuvalin okuduğu değişkenler. stil.css'e dokunulmaz; buradaki
   kurallar onun üstüne biner.
   ========================================================================== */

/* --- v198: yeni tuval renkleri (zamancizgisi.js okur; tanımsızsa JS'teki yedek değer) --- */
:root{
  --zc-olay:#A78BFA;          /* akıllı olay (çizgi geçme, alan ihlali...) kayıt parçası */
  --zc-igne:#F0B429;          /* sürüklerken orta iğne + saat balonu */
  --zc-igne-yazi:#151A1D;
}
:root[data-tema="acik"]{
  --zc-olay:#6D28D9;
  --zc-igne:#96690A;
  --zc-igne-yazi:#FFFFFF;
  /* v198 (inceleme): stil.css'teki #157A64, kayıt rengi #12876F ile neredeyse aynıydı (ΔE2000 4,7):
     24 saat şeridinde hareketli saat ayırt edilmiyordu. Zeytin yeşili: ΔE 22 (koyu temadaki
     hareket/kayıt farkıyla aynı düzey), alarm/olay/iğneden uzak, zemine karşıtlık 6,0.
     --zc-hareket'i yalnız zamancizgisi.js ve anahtar örneği kullanır. */
  --zc-hareket:#3F6212;
}

/* v198: tuvalde uzun basış seçim / menü / büyüteç açmasın; sürüklerken el imleci */
.zc-tuval{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.zc-tuval.zc-surukle{cursor:grabbing}

/* ===================== TELEFON (yogunluk = kucuk) =====================
   Ölçüldü (Pixel 7 412x839): #zcUzak/#zcYakin GİZLİ, gün okları 40x36, çip 38 px,
   24 saat şeridi 9 px (dokunma bölgesi 12 px). */
body[data-yogunluk="kucuk"]{--zc-serit:20px}                 /* 24 saat şeridi (JS kısa tuvalde küçültür) */
body.yatay[data-yogunluk="kucuk"]{--zc-serit:12px}           /* yatayda tuval 60 px: banda yer kalsın */
body[data-yogunluk="kucuk"] .zc-tuval{--zc-yazi:11px}        /* cetvel yazısı 10 -> 11 px */

/* +/- artık telefonda da görünür (stil.css:755 gizliyordu; tek yol iki parmak jestiydi) */
[data-yogunluk="kucuk"] .zc-yakin{display:flex;padding:0 2px}
[data-yogunluk="kucuk"] .zc-yakin button{width:44px;height:44px;font-size:22px;line-height:1}
[data-yogunluk="kucuk"] #zcOlcek{display:none}               /* ölçek, değişince tuvalde kısa balonla görünür */

/* dokunma hedefleri >= 44 px (min-height: stil.css'teki her height kademesinin üstüne biner) */
[data-yogunluk="kucuk"] .tarih-gez button{min-height:44px}
[data-yogunluk="kucuk"] .tarih-gez button:first-child,
[data-yogunluk="kucuk"] .tarih-gez button:last-child{min-width:44px}
[data-yogunluk="kucuk"] .zc-ust > .cip{min-height:44px}

/* Dikey telefon, iki sıralı başlık (stil.css "min-height:640px" bloğu): ikinci sırada
   4 çip + "📅 N gün kayıt" rozeti var, +/- oraya sığmıyor (360 px'te çip 23 px'e düşerdi).
   Bu yüzden +/- tuvalin SAĞ ALTINDA, 24 saat şeridinin üstünde yüzer (harita düğmeleri gibi).
   44 px hedefler başlığı uzatmasın diye sıra arası / iç boşluk biraz daraltıldı.
   v198 (inceleme): grup .zc-blok'un altına göre konumlanır, tuvalin yüksekliğine bakmaz. Tuval
   kısa kalınca (390x844 DVR 1080N: 62 px; 375x667 / 360x640 4:3) grup başlık çiplerinin ÜSTÜNE
   biniyordu ('Gün'e basan '+'ya basıyordu). zamancizgisi.js _boyutla() tuval yüksekliğine göre
   .zc-blok'a sınıf koyar: .zc-yuzer-yok (< 100 px) -> grup gizli (yakınlaştırma iki parmak ve
   çiplerle sürer), .zc-yuzer-sira (< 150 px) -> düğmeler yan yana. Grup her durumda akışın
   dışında (absolute ya da none) -> sınıf değişimi tuval ölçüsünü değiştirmez, ölçü döngüsü olmaz. */
@media (min-height:640px){
  /* v198 (inceleme): iç boşluk 6 -> 5 px: başlık v197 ile aynı yükseklikte (109 px) kalsın; kısa ekranda
     dik oranlı kamerada tuval bloktan taşıyordu (stil.css, v197'den kalma), 2 px fazlası bunu artırıyordu. */
  body.mod-kayit[data-yogunluk="kucuk"]:not(.yatay):not(.fs-acik) .zc-ust{
    row-gap:4px;padding-top:5px;padding-bottom:5px}
  body.mod-kayit[data-yogunluk="kucuk"]:not(.yatay):not(.fs-acik) .zc-blok:not(.zc-yuzer-yok) .zc-yakin{
    position:absolute;right:8px;bottom:calc(var(--zc-serit, 20px) + 8px);z-index:3;
    background:var(--katman);border:1px solid var(--cizgi2);border-radius:12px;
    padding:2px;gap:2px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  body.mod-kayit[data-yogunluk="kucuk"]:not(.yatay):not(.fs-acik) .zc-blok.zc-yuzer-yok .zc-yakin{display:none}
}
/* tuval yeterince yüksekse (360x740'ta ~190 px, 393x852'de ~290 px) düğmeler ALT ALTA:
   bandın daha dar bir şeridini örter. Daha kısa ekranda (640-739) ya da tuval < 150 px ise yan yana. */
@media (min-height:740px){
  body.mod-kayit[data-yogunluk="kucuk"]:not(.yatay):not(.fs-acik) .zc-blok:not(.zc-yuzer-sira) .zc-yakin{flex-direction:column-reverse}
}

/* dokunmatikte :hover yapışıp kalıyordu (iOS) -> yalnız basılıyken vurgu */
@media (hover:none){
  .zc-yakin button:hover{background:none;color:var(--yazi2)}
  .zc-yakin button:active{background:var(--ust-aktif);color:var(--vurgu)}
}

/* ===================== DOKUNMATİK TABLET (masaüstü düzeni, orta/genis) =====================
   Yatay iPad gibi cihazlar masaüstü düzenini kullanır: denetimler 26-30 px idi.
   Başlık 52 px'e çıkar.
   v198 (inceleme):
   - Tuvale AÇIK yükseklik (--zc-y - 52 px başlık - 1 px kenarlık). Eskiden yükseklik yalnız esnek
     kutudan geliyordu (height:0); KAYIT'ın sözde tam ekranı (v198-kayit.css) .zc-blok'u
     display:block yapınca tuval 0 px'e iniyor, ⛶'de zaman çizgisi kayboluyordu (1180x820, 1024x768).
   - Blok 116 -> 136 px: 44 px başlık yüzünden kayıt bandı 43 -> 26 px'e düşmüştü; şimdi tuval 83,
     bant 45 px. --zc-y her bölgede aynı kullanıldığından video alanı 20 px kısalır, başka yer kaymaz.
     :where() özgüllüğü düşürür: stil.css'in büyük monitör kademeleri (128/156 px) geçerli kalır. */
@media (pointer:coarse){
  body:not([data-yogunluk="kucuk"]){--zc-serit:14px}
  body.mod-kayit:where(:not([data-yogunluk="kucuk"])){--zc-y:136px}
  body:not([data-yogunluk="kucuk"]) .zc-blok{display:flex;flex-direction:column}
  body:not([data-yogunluk="kucuk"]) .zc-ust{flex:none;height:52px;min-height:52px}
  body:not([data-yogunluk="kucuk"]) .zc-tuval{flex:1 1 auto;height:calc(var(--zc-y) - 53px);min-height:0}
  body:not([data-yogunluk="kucuk"]) .zc-blok :is(.tarih-gez button,.cip,.zc-yakin button){min-height:44px}
  body:not([data-yogunluk="kucuk"]) .zc-blok :is(.tarih-gez button:first-child,.tarih-gez button:last-child,.zc-yakin button){min-width:44px}
}