/* ==========================================================================
   RAPOR GRAFIKLERI -- KOD (KV-20 / grafik-svg)

   Kapsam: yalnizca `.k-viz`. Rapor govdesindeki PNG'lerin yerine gecen
   satir ici SVG cubuk grafikler + gosterge karolari + surec zinciri.

   ⛔ AYIRAC / ALTCIZGI / DEKORATIF YATAY KURAL YOK. Ritim hiza ve
      bosluktan gelir; karolar cizgiyle degil TEK ADIMLIK yuzey farkiyla
      ayrilir (raporlar.css'teki tablo zebrasi ile ayni gramer).
   ⛔ Hover'da yukselme / golge / olceklenme YOK. Grafik etkilesimli degil:
      butun sayilar zaten ekranda yazili, tooltip'e ihtiyac yok.
   ⛔ 3B, gradyan dolgu, pasta yok. Cift eksen yok.
   ⚠ prefers-color-scheme YOK -- site tek temali (acik).
   ⚠ Tum renk/olcu degerleri tokens.css'ten. Ham deger yok.
   ⚠ Ayri dosya: theme.css / v13-fixes.css / raporlar.css baska islerde acik,
     paralel yazma daha once dosya ezdi.

   DUYARLILIK KURALI
     SVG `viewBox` ile olceklenir, `max-width:100%` ile kutusunu asmaz.
     `min-width` tabani var: 640 birimlik kutu 480px'in altina inerse metin
     okunmaz hale geliyordu (390px'te 15 birim = 9px). Taban altinda SAYFA
     degil GRAFIK KUTUSU kayar (`overflow-x:auto`) -- raporlar.css'teki
     `.k-rapor__tw` ile ayni davranis.
   ========================================================================== */

.k-viz {
  margin: 0;
  font-family: var(--font-sans);
}

/* ── Kunye: baslik / altbaslik / kaynak ─────────────────────────────────── */
.k-viz__t {
  margin: 0;
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-snug);
  font-weight: 600;
  color: var(--text-heading);
}
.k-viz__s {
  margin: var(--space-2) 0 0;
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}
.k-viz__src {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  margin: var(--space-6) 0 0;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}
.k-viz__srct { flex: 1 1 320px; min-width: 0; }
.k-viz__mark {
  flex: 0 0 auto;
  font-size: var(--size-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ── Efsane (>=2 seri icin her zaman) ───────────────────────────────────── */
.k-viz__leg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) 0 0;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}
.k-viz__legi { display: inline-flex; align-items: center; gap: var(--space-3); }
.k-viz__sw {
  inline-size: 12px; block-size: 12px;
  border-radius: var(--radius-xs);
  flex: 0 0 auto;
}
.k-viz__sw--s1 { background: var(--ink); }
.k-viz__sw--s2 { background: var(--gold-600); }

/* ── Cizim alani ────────────────────────────────────────────────────────── */
.k-viz__plot {
  margin: var(--space-5) 0 0;
  /* Taban genisligin altinda SAYFA degil bu kutu kayar. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.k-viz__svg {
  display: block;
  width: 100%;
  min-width: 480px;   /* metin okunabilirlik tabani */
  max-width: 640px;   /* viewBox'in dogal olcusu -- ustunde buyumez */
  height: auto;
}

/* Kucuk katlarin panel basligi. */
.k-viz__ph {
  margin: var(--space-7) 0 0;
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-normal);
  font-weight: 600;
  color: var(--text-primary);
}
.k-viz__ph + .k-viz__plot { margin-top: var(--space-3); }

/* ── SVG ici tipografi ve isaretler ─────────────────────────────────────── */
/* Metin token'lari metin rengini giyer; kimlik rengini YANINDAKI isaret
   tasir (skill kurali: deger etiketi seri rengine boyanmaz). */
.k-viz-lab {
  font-size: 15px;
  fill: var(--text-primary);
}
.k-viz-lab2 {
  font-size: 13.5px;
  fill: var(--text-tertiary);
}
.k-viz-val {
  font-size: 15px;
  font-weight: 600;
  fill: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.k-viz-ax {
  font-size: 13px;
  fill: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Kilavuz ve taban geri planda: veri isareti onde okunur. */
.k-viz-g    { stroke: var(--border-hairline); stroke-width: 1; }
.k-viz-base { stroke: var(--border-strong);   stroke-width: 1; }

/* Veri isaretleri. Ince cubuk, 3px yuvarlatilmis uc, tabana yapisik. */
.k-viz-b--s1  { fill: var(--ink); }
.k-viz-b--s2  { fill: var(--gold-600); }
.k-viz-b--one { fill: var(--grey-800); }
/* Sirali rampa: 2024 -> 2025 (acik -> koyu, tek ton). */
.k-viz-b--o1  { fill: var(--finish-oak); }
.k-viz-b--o2  { fill: var(--grey-800); }

/* ── Gosterge karolari (grafik degil: tek tek sayilar) ──────────────────── */
.k-viz__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;                      /* ayirac degil: yuzey araligi */
  margin: var(--space-6) 0 0;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
.k-viz__tiles.is-wide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.k-viz__tile {
  background: var(--surface-page);
  padding: var(--space-5) var(--space-5) var(--space-5);
  min-width: 0;
}
.k-viz__lab {
  margin: 0;
  font-size: var(--size-micro);
  line-height: 1.35;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.k-viz__dd { margin: var(--space-3) 0 0; }
.k-viz__val {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Yon rengi ISARETLE birlikte gelir (+ / -): renk tek basina anlam tasimaz. */
.k-viz__val.is-up   { color: var(--green-600); }
.k-viz__val.is-down { color: var(--red-600); }
.k-viz__note {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}

/* ── Surec zinciri (grafik degil: sirali adimlar) ───────────────────────── */
.k-viz__steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  counter-reset: none;
}
.k-viz__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 var(--space-4);
  align-items: baseline;
}
.k-viz__stepn {
  font-size: var(--size-micro);
  letter-spacing: var(--ls-wide);
  color: var(--gold-600);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.k-viz__stepb { display: block; min-width: 0; }
.k-viz__stept {
  display: block;
  font-size: var(--size-body-sm);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  font-weight: 600;
  color: var(--text-primary);
}
.k-viz__stepd {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}

/* ── Dar ekran ──────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .k-viz__tiles,
  .k-viz__tiles.is-wide,
  .k-viz__steps { grid-template-columns: minmax(0, 1fr); }
  .k-viz__val { font-size: 23px; }
  .k-viz__src { display: block; }
  .k-viz__mark { display: block; margin-top: var(--space-2); }
}