/* ============================================================
   GRAFİK — css/grafik.css (v463, SPEC §3.2–3.4; KURALLAR v463 ▸ Grafik dili)
   Yükleme: css/style.css'ten SONRA (index.html <head>). Davranış: js/grafiktema.js.
   İçerik: cam ipucu · ekran okuyucu bölgesi · HTML gösterge · durum örtüsü · tablo ·
           çapraz geçiş örtüsü · SVG/CSS girişleri (K3).
   ⚠️ backdrop-filter / filter: blur YOK (yazılım boyamasında pahalı; KURALLAR yasak).
   ⚠️ Metin seri renginde YAZILMAZ: seri rengi yalnız anahtar karede/çizgide (--anahtar).
   ⚠️ Durum opaklıkla ANLATILMAZ: gizli seri = üstü çizili ad + içi boş anahtar.
   ⚠️ .grafik-ipucu adı style.css'te Raporlar'daki "Bir dilime tıklayarak…" paragrafında da
      kullanılıyor (style.css ▸ .grafik-ipucu, index.html #raporIcerik). Cam ipucu bu yüzden
      [data-cam] ile kapsanır — o paragraf bu dosyadan ETKİLENMEZ.
   Renkler yalnız token: --st-ipucu-zemin/-kenar, --st-grafik-*, --metin, --soluk, --cizgi, --vurgu.
   ============================================================ */

/* ---------- 1) Kap ---------- */
/* .grafik-kutu { position: relative; height } style.css'te. Tuval klavyeyle odaklanır (grafikKlavye). */
.grafik-kutu canvas:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 2) Cam ipucu (§3.4) ---------- */
/* Konum JS'ten yalnız transform ile; left/top 0 = kapsayan bloğun iç köşesi. */
.grafik-ipucu[data-cam] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  box-sizing: border-box;
  min-width: 188px;
  max-width: 288px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--st-ipucu-zemin, var(--panel-ust)) 94%, transparent);
  border: 1px solid var(--st-ipucu-kenar, var(--cizgi));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4), 0 16px 32px -12px rgba(0, 0, 0, .7);
  color: var(--metin);
  font: 400 12px/1.4 var(--font, system-ui, sans-serif);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s cubic-bezier(.2, 0, 0, 1), transform .12s cubic-bezier(.2, 0, 0, 1), visibility 0s linear .12s;
}
:root[data-tema="aydinlik"] .grafik-ipucu[data-cam] {
  box-shadow: 0 0 0 1px rgba(12, 14, 18, .04), 0 2px 4px rgba(12, 14, 18, .06), 0 16px 32px -12px rgba(12, 14, 18, .20);
}
.grafik-ipucu[data-cam].acik {
  opacity: 1;
  visibility: visible;
  transition: opacity .12s cubic-bezier(.2, 0, 0, 1), transform .12s cubic-bezier(.2, 0, 0, 1), visibility 0s;
}
.grafik-ipucu-baslik {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--soluk);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--cizgi);
}
.grafik-ipucu-satir {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  min-height: 20px;
}
.grafik-ipucu-satir.tek { grid-template-columns: 12px minmax(0, 1fr); }
.grafik-ipucu-satir > span {
  font-size: 12px;
  color: var(--soluk);
  overflow-wrap: anywhere;
}
.grafik-ipucu-satir.tek > span { color: var(--metin); }
.grafik-ipucu-satir > b,
.grafik-ipucu-toplam > b {
  font: 500 12.5px/1.3 var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--metin);
  white-space: nowrap;
  text-align: right;
}
.grafik-ipucu-toplam {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--cizgi);
  font-weight: 600;
}
.grafik-ipucu-toplam > b { font-weight: 600; }
.grafik-ipucu-alt,
.grafik-ipucu-fazla {
  padding-left: 20px;
  font-size: 11.5px;
  color: var(--soluk);
  overflow-wrap: anywhere;
}
.grafik-ipucu-dip {
  font-size: 11.5px;
  color: var(--soluk);
  overflow-wrap: anywhere;
}
.grafik-ipucu-dip.ilk {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--cizgi);
}

/* Anahtar: çizgi serisinde 12×2 çizgi, çubuk/halkada 8×8 r2 kare (ipucu + gösterge ortak) */
.grafik-ipucu[data-cam] .anahtar,
.grafik-gosterge .anahtar {
  display: inline-block;
  flex: none;
  background: var(--anahtar, var(--soluk));
}
.grafik-ipucu[data-cam] .anahtar.kare,
.grafik-gosterge .anahtar.kare { width: 8px; height: 8px; border-radius: 2px; }
.grafik-ipucu[data-cam] .anahtar.cizgi,
.grafik-gosterge .anahtar.cizgi { width: 12px; height: 2px; border-radius: 1px; }

/* ---------- 3) Ekran okuyucu bölgesi (yalnız klavyeyle gezilirken dolar) ---------- */
.grafik-canli {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 4) HTML gösterge (≥ 2 seride her zaman; kutunun hemen önünde) ---------- */
.grafik-gosterge {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 4px 0 2px;
}
.grafik-gosterge button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: transparent;
  color: var(--metin);
  font: 500 12px/1.2 var(--font, system-ui, sans-serif);
  cursor: pointer;
  transition: background-color .12s cubic-bezier(.2, 0, 0, 1);
}
.grafik-gosterge button:hover { background: color-mix(in srgb, var(--metin) 6%, transparent); }
.grafik-gosterge button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.grafik-gosterge button b {
  font: 500 12px/1.2 var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--soluk);
}
.grafik-gosterge button[aria-pressed="false"] span {
  color: var(--soluk);
  text-decoration: line-through;
}
.grafik-gosterge button[aria-pressed="false"] .anahtar {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--anahtar, var(--soluk));
}
.grafik-gosterge button[aria-pressed="false"] .anahtar.cizgi { height: 4px; }
@media (pointer: coarse) {
  .grafik-gosterge button { min-height: 44px; }         /* dokunma hedefi ≥ 44 px */
}

/* ---------- 5) Durum örtüsü: yukleniyor | yenileniyor | bos | hata (kap yüksekliği sabit) ---------- */
[data-grafik-durum="yukleniyor"] > canvas,
[data-grafik-durum="bos"] > canvas,
[data-grafik-durum="hata"] > canvas,
[data-grafik-durum="yukleniyor"] > .halka-orta,
[data-grafik-durum="bos"] > .halka-orta,
[data-grafik-durum="hata"] > .halka-orta { visibility: hidden; }
[data-grafik-durum="yenileniyor"] > canvas { opacity: .5; }   /* eski çizim yerinde; iskelet yok */
.grafik-durum {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--soluk);
  pointer-events: none;
}
.grafik-durum strong { font-size: 13px; font-weight: 600; color: var(--metin); }
/* İlk yükleme: 4 yatay 1 px ızgara + "Yükleniyor…" (parıltı YOK) */
[data-grafik-durum="yukleniyor"] > .grafik-durum {
  background:
    linear-gradient(var(--st-grafik-izgara, var(--cizgi)), var(--st-grafik-izgara, var(--cizgi))) 0 20% / 100% 1px no-repeat,
    linear-gradient(var(--st-grafik-izgara, var(--cizgi)), var(--st-grafik-izgara, var(--cizgi))) 0 40% / 100% 1px no-repeat,
    linear-gradient(var(--st-grafik-izgara, var(--cizgi)), var(--st-grafik-izgara, var(--cizgi))) 0 60% / 100% 1px no-repeat,
    linear-gradient(var(--st-grafik-izgara, var(--cizgi)), var(--st-grafik-izgara, var(--cizgi))) 0 80% / 100% 1px no-repeat;
}
[data-grafik-durum="yukleniyor"] > .grafik-durum strong { font-weight: 500; color: var(--soluk); }
[data-grafik-durum="hata"] > .grafik-durum { pointer-events: auto; }
.grafik-durum .ikon { width: 20px; height: 20px; color: var(--uyari); }
.grafik-durum button {
  margin-top: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: transparent;
  color: var(--metin);
  font: 600 12px/1.2 var(--font, system-ui, sans-serif);
  cursor: pointer;
}
.grafik-durum button:hover { background: color-mix(in srgb, var(--metin) 6%, transparent); }
.grafik-durum button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
@media (pointer: coarse) {
  .grafik-durum button { min-height: 44px; }
}

/* ---------- 6) Tablo: <details class="grafik-tablo"> (KURALLAR 23) ---------- */
details.grafik-tablo { margin-top: 8px; font-size: 13px; }
details.grafik-tablo > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: var(--soluk);
  cursor: pointer;
  list-style: none;
}
details.grafik-tablo > summary::-webkit-details-marker { display: none; }
details.grafik-tablo > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .16s cubic-bezier(.2, 0, 0, 1);
}
details.grafik-tablo[open] > summary::before { transform: rotate(45deg); }
details.grafik-tablo > summary:hover { color: var(--metin); }
details.grafik-tablo > summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; border-radius: 4px; }
.grafik-tablo-kap { margin-top: 6px; overflow-x: auto; }
.grafik-tablo table { width: 100%; border-collapse: collapse; }
.grafik-tablo caption { caption-side: top; padding: 0 0 6px; text-align: left; font-size: 12px; color: var(--soluk); }
.grafik-tablo th,
.grafik-tablo td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--cizgi);
  text-align: left;
  white-space: nowrap;
}
.grafik-tablo th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--soluk);
}
.grafik-tablo .sayi {
  text-align: right;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.grafik-tablo th.sayi { font-family: inherit; }
@media (pointer: coarse) {
  details.grafik-tablo > summary { min-height: 44px; }
}

/* ---------- 7) Tema/palet çapraz geçiş örtüsü (yalnız hareket "tam"; JS 240 ms'de söndürür) ---------- */
.grafik-ortu {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity .24s cubic-bezier(.2, 0, 0, 1);
  pointer-events: none;
}

/* ---------- 8) SVG / CSS girişleri (§3.3, K3) — `.canlan` KESİŞMEDE eklenir (grafikCanlanGozle) ---------- */
/* Dinlenme hâli TAM görünür; başlangıç karesi de görünür (.35) — donmuş zaman çizelgesinde veri kaybolmaz. */
.grafik-giris-cizgi.canlan {                                /* <path pathLength="1">: %35 görünürden tama */
  stroke-dasharray: 1;
  animation: grafikCizgiGir .6s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes grafikCizgiGir { from { stroke-dashoffset: .65; } to { stroke-dashoffset: 0; } }
.grafik-giris-cubuk { transform-origin: left center; }
.grafik-giris-cubuk.canlan {
  animation: grafikCubukGir .52s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: var(--gecikme, 0ms);
}
@keyframes grafikCubukGir { from { transform: scaleX(.35); } to { transform: none; } }
/* Sonsuz akış (Sankey) ekran dışında durur (grafikEkranDisiDuraklat) */
.akis-durgun,
.akis-durgun * { animation-play-state: paused !important; }

/* ---------- 9) Hareket kapısı ---------- */
html.hareket-kapali .grafik-ipucu[data-cam],
html.hareket-kapali .grafik-ortu,
html.hareket-kapali details.grafik-tablo > summary::before { transition: none; }
html.hareket-kapali .grafik-giris-cizgi.canlan,
html.hareket-kapali .grafik-giris-cubuk.canlan { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .grafik-ipucu[data-cam] { transition: opacity .12s linear, visibility 0s linear .12s; }   /* yer değiştirme animasyonsuz */
  .grafik-ipucu[data-cam].acik { transition: opacity .12s linear, visibility 0s; }
  .grafik-giris-cizgi.canlan,
  .grafik-giris-cubuk.canlan { animation: none; }
}