/* Seviye — oran/doluluk cubugu. Ayni is 24 ayri kap + 19 ayri dolgu sinifiyla yaziliydi;
   yukseklikler 4/5/7/8/9/10/16px, zeminler alti ayri token arasinda dagilmisti. Yerlesim ve
   olcu buradan gelir, modul yalnizca rengi secer. */

.p360-seviye {
  --p360-seviye-yuk: 8px;
  --p360-seviye-zemin: var(--gray-surface);
  display: flex;                 /* cok serili dagilim cubugu: dolgular yan yana */
  height: var(--p360-seviye-yuk);
  border-radius: 999px;
  background: var(--p360-seviye-zemin);
  overflow: hidden;
}

.p360-seviye-ince  { --p360-seviye-yuk: 4px; }
.p360-seviye-kalin { --p360-seviye-yuk: 10px; }

.p360-seviye-dolgu {
  --p360-seviye-renk: var(--mac-blue);
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--p360-seviye-renk);
  transition: width var(--hiz-kayma);
}

/* Esik renkleri — olcut sunucuda hesaplanir, burada yalniz adi tasinir. */
.p360-seviye-iyi    { --p360-seviye-renk: var(--green); }
.p360-seviye-uyari  { --p360-seviye-renk: var(--yellow); }
.p360-seviye-kritik { --p360-seviye-renk: var(--red); }
.p360-seviye-notr   { --p360-seviye-renk: var(--muted); }
/* olu-css: sakla — ustuste dolguda arkadaki (onceki durum) katman icin; -ustuste ile birlikte anlamli. */
.p360-seviye-soluk  { --p360-seviye-renk: rgba(52,199,89,0.55); }

/* Seri renkleri — cok serili dagilim cubugunda hangi dilim hangi seri. */
.p360-seviye-mavi    { --p360-seviye-renk: var(--mac-blue); }
.p360-seviye-mor     { --p360-seviye-renk: var(--purple); }
.p360-seviye-yesil   { --p360-seviye-renk: var(--green); }
/* olu-css: sakla — seri renk paletinin uyesi; palet eksik birakilirsa sonraki ekran ham renk yazar. */
.p360-seviye-turkuaz { --p360-seviye-renk: #5AC8FA; }
.p360-seviye-turuncu { --p360-seviye-renk: var(--orange); }

/* Segment — surekli cubuk yerine sayilabilir kutucuk. Tabloyu tarayan goz "%94 tehlikeli"
   bilgisini duz sayidan yakalayamiyordu; dolu kutucuk sayisi ve rengi bunu tasir.
   Renk kutucugun KENDI konumundan gelir — esigi kullanicinin ezbere bilmesi gerekmez. */
.p360-segment { display: inline-flex; align-items: center; gap: 8px; }
.p360-segment-yuva { display: inline-flex; gap: 2px; }
.p360-segment-yuva i {
  width: 8px; height: 14px; border-radius: 2px;
  background: var(--segment-bos, rgba(0,0,0,0.09));
  transition: background var(--hiz-yay);
}
.p360-segment-yuva i.dolu.iyi    { background: var(--green); }
.p360-segment-yuva i.dolu.orta   { background: var(--yellow); }
.p360-segment-yuva i.dolu.kotu   { background: var(--red); }
/* olu-css: sakla — segmentin yanindaki sayi yuvasi; bilesenin sozlesmesinin parcasi. */
.p360-segment-yazi { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Yildiz — ayni bilesen, puan isi. */
.p360-segment-yildiz i {
  width: auto; height: auto; background: none;
  font-style: normal; font-size: 13px; line-height: 1; color: rgba(0,0,0,0.18);
}
.p360-segment-yildiz i.dolu { color: var(--yellow); background: none; }

body[data-theme="dark"] .p360-segment-yuva i { --segment-bos: rgba(255,255,255,0.14); }
body[data-theme="dark"] .p360-segment-yildiz i { color: rgba(255,255,255,0.20); }

@media (prefers-reduced-motion: reduce) { .p360-segment-yuva i { transition: none; } }

/* Ust uste — iki dolgu ayni yerden baslar (onceki durum arkada, simdiki onde).
   Varsayilan flex dizilimi bunlari yan yana koyardi. */
.p360-seviye-ustuste { position: relative; display: block; }
.p360-seviye-ustuste .p360-seviye-dolgu { position: absolute; left: 0; top: 0; bottom: 0; height: auto; }
.p360-seviye-golge { --p360-seviye-renk: rgba(128,128,128,0.40); }

/* Sutun — yatay sutun grafigi (huni, dagilim). Ince cubuktan farki: icinde metin tasir,
   bu yuzden dolgu bir flex satiridir ve zemin rengi dolgunun kendisidir. */
.p360-seviye-sutun { --p360-seviye-yuk: 26px; border-radius: 7px; background: transparent; }
.p360-seviye-sutun .p360-seviye-dolgu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 10px;
  border-radius: 7px;
  color: #fff; font-size: 12px; font-weight: 600;
  min-width: 8%;                /* sifira yakin dilim de okunur kalsin */
  white-space: nowrap; overflow: hidden;
}
/* olu-css: sakla — -sutun'un buyuk kademesi; boyut kademeleri tek tek degil aile olarak yasar. */
.p360-seviye-sutun-buyuk { --p360-seviye-yuk: 42px; border-radius: 11px; }
.p360-seviye-sutun-buyuk .p360-seviye-dolgu { border-radius: 11px; padding: 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .p360-seviye-dolgu { transition: none; }
}