/* ============================================================
   grafik.css — pano grafiklerinin ORTAK hover katmani ve ekseni.
   Balonun kendisi utils/ipucu.css'te (grafik kipi); burasi yalnizca
   grafigin uzerindeki hedef katmani: imlec cizgisi + nokta isaretleri.
   Ekrana ozel tooltip kutusu YAZILMAZ — kart overflow:hidden oldugu icin
   kirpilir; balon body'ye basildigi icin bu tuzaga hic girmez.
   ============================================================ */

/* Cizimi saran kap: hover katmani ve eksen SADECE cizimi kaplasin diye.
   Ay etiketlerini de iceren bir kaba baglanirsa eksen yuzdeleri kayar. */
.p360-grafik-kap { position: relative; }

/* Trend hedef katmani: n esit hucre, grafik kabini tam kaplar.
   z-index sart: cizim svg'si cogu ekranda position:absolute — DOM sirasi ne olursa
   olsun ustte kalir ve fareyi yutar; katman sessizce olu daldir. */
.p360-trend-hedef { position: absolute; inset: 0; z-index: 2; }
/* Cizim x ekseni viewBox icinde ici bosluklu basliyorsa (padL/padR) katman da o araliga
   oturtulur; yoksa hucre merkezleri veri noktalarindan kayar ve nokta cizgiden ayrilir. */
.p360-cizgi-hedef { position: absolute; top: 0; bottom: 0; }
.p360-trend-hucre { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
.p360-trend-cizgi {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--muted); opacity: 0; transition: opacity .12s ease;
}
.p360-trend-nokta {
  position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .12s ease;
  box-shadow: 0 0 0 2px var(--surface);
}
.p360-trend-hucre:hover .p360-trend-cizgi { opacity: .35; }
.p360-trend-hucre:hover .p360-trend-nokta { opacity: 1; }

/* Dokunmatikte hover yok — noktalar sabit gorunur, deger tikla acilir. */
@media (hover: none) {
  .p360-trend-nokta { opacity: .75; }
}

/* Y ekseni: izgara cizgilerinin hizasindaki sayilar. Grafik kabinin SOLUNDA durur;
   kap kendisi kucultulmez, etiketler ustune biner ve zemini yoktur. */
.p360-eksen { position: absolute; inset: 0; pointer-events: none; }
.p360-eksen span {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: 9.5px; font-weight: 600; color: var(--muted);
  background: var(--surface); padding: 0 3px; border-radius: 3px;
}

/* SVG donut: dilim hover'i. conic-gradient tek bir div oldugu icin dilim
   hedeflenemiyordu; yaylar ayri <circle> olunca dilim kendi ipucusunu tasir. */
.p360-donut-dilim {
  cursor: default; transition: opacity .15s ease, stroke-width .15s ease;
  pointer-events: stroke; /* fill yok — hover yalniz cizgi uzerinde dogar */
}
.p360-donut:hover .p360-donut-dilim { opacity: .45; }
.p360-donut .p360-donut-dilim:hover { opacity: 1; }

/* Donut kabi + ortadaki deger. Dis olcuyu kart verir; svg kabi doldurur. */
.p360-donut { position: relative; width: 100%; aspect-ratio: 1; max-width: 150px; }
.p360-donut svg { width: 100%; height: 100%; display: block; }
.p360-donut-orta {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; pointer-events: none;
}
.p360-donut-deger { font-size: 20px; font-weight: 700; }
.p360-donut-etiket { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   Grafik hareketi — panonun cizim animasyonlari. Bes modulun panosu ayni
   yukselmeyi 9/12/14/16px gibi kazara farklilasmis mesafelerle yaziyordu;
   tek mesafede toplandi.
   ============================================================ */
@keyframes p360-grafik-yukse   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes p360-grafik-kpi-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes p360-grafik-donut   { from { opacity: 0; transform: rotate(-25deg) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes p360-grafik-supur   { from { transform: rotate(-90deg); } }
@keyframes p360-grafik-buyu-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes p360-grafik-buyu-y  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Gosterge yayi tek kayitli property uzerinden surulur. Ad modulde kalirsa iki modul
   ayni adi farkli tiple kaydeder; pencereler tek document oldugu icin ikinci kayit
   birincisini gecersiz kilar ve o gosterge sessizce bosalir. */
@property --p360-gosterge { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
/* 100% kare acik: elemanin kendi (inline) degerine kadar suprur. */
@keyframes p360-grafik-gosterge { from { --p360-gosterge: 0%; } }