/* ==========================================================================
   Asist Saha — arayuz.css (P6). Yalnız temel.css'te OLMAYAN davranış durumları:
   yükleme çıkışı, üst çubuk nabız/bölüm geçişi, dock liste-açık hâli, halka imleç.
   Temel görünüm (.ust, .dock, .yukleme) temel.css'tedir (P1b); burada tekrar edilmez.
   Kurallar: yalnız transform/opacity animasyonu; gölge ve blur animasyonu yok.
   ========================================================================== */

/* ---------- Yükleme: çıkış ----------
   JS örtüyü translateY(-100%) ile kaldırırken alt kenarda ince bir kırmızı iz kalır:
   "monitör açıldı" hissi. Statik; yalnız örtüyle birlikte kayar. */
.yukleme--cikis::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 6%, rgba(255,23,68,.75) 50%, transparent 94%);
  box-shadow: 0 0 18px 1px rgba(255,23,68,.35);
}
.yukleme--cikis .yukleme__iz,
.yukleme--cikis .yukleme__yazi {
  transition: opacity 260ms var(--e-standart);
  opacity: 0;
}

/* ---------- Üst çubuk ---------- */
/* Bölüm etiketi değişirken 200ms söner (transition temel.css'te: opacity --s-kisa). */
.ust__bolum--degisiyor { opacity: 0; }

/* Düzensiz ritim: rakam "~110"; kalp düzensiz ritimde de atar ama biraz sönük. */
.ust__nabiz--duzensiz b { color: var(--yazi-2); }
/* Hız sayılamıyor (nabızsız ritim): rakam "—", kalp atmaz ve söner. */
.ust__nabiz--yok .ikon { animation: none; opacity: .45; }
.ust__nabiz--yok b { color: var(--yazi-3); }

/* ---------- Dock ---------- */
/* Liste açıkken harita etkin görünür; iz segmentleri biraz belirginleşir. */
.dock--liste-acik .dock__iz path { opacity: .75; }
.dock--liste-acik .dock__iz .dock__seg--etkin { opacity: 1; }
.dock__imlec { transition: none; }
/* Etkin segmentin üstünde yumuşak kırmızı hale (statik, animasyonsuz). */
.dock__iz .dock__seg--etkin { filter: drop-shadow(0 0 3px rgba(255,23,68,.55)); }

/* ---------- Halka imleç (yalnız A kademesi + pointer:fine; JS ekler) ----------
   Dış kutu konumu taşır (JS: transform translate3d), iç halka ölçeği (CSS geçişi).
   Sistem imleci gizlenmez. */
.imlec {
  position: fixed; top: 0; left: 0; z-index: var(--z-imlec);
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--s-kisa) var(--e-standart);
  will-change: transform;
}
.imlec--gorunur { opacity: 1; }
.imlec__halka {
  position: absolute; left: -17px; top: -17px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(243,245,249,.38);
  background: rgba(255,23,68,0);
  transform: scale(.72);
  transition:
    transform var(--s-orta) var(--e-cikis),
    border-color var(--s-kisa) var(--e-standart),
    background-color var(--s-kisa) var(--e-standart),
    opacity var(--s-kisa) var(--e-standart);
}
.imlec--gorunur .imlec__halka { transform: scale(1); }
.imlec--uzerinde .imlec__halka {
  transform: scale(1.55);
  border-color: rgba(255,23,68,.7);
  background: rgba(255,23,68,.07);
}
.imlec--basili .imlec__halka { transform: scale(.82); transition-duration: var(--s-bas); }
.imlec--uzerinde.imlec--basili .imlec__halka { transform: scale(1.3); }
.imlec--yazi .imlec__halka { opacity: 0; }

/* Güvenlik: azalt modu ya da dokunmatik tarayıcıda asla görünmez. */
html.hareket-azalt .imlec { display: none; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .imlec { display: none; } }