/* ===== 3B GRAFİKLER — css/grafik3b.css (v463, SPEC §3.7) =====
   Yükleme: css/style.css'ten SONRA (css/grafik.css'ten sonra). Renkler yalnız token (sabit hex yalnız token yoksa yedek).
   İçerik: 3B katmanı (grafik3b.js kurar) · 2B/3B segmenti · Su Seviyesi HTML etiketleri/ipucu · Kredi Kadranı (CSS 3B, WebGL YOK)
           · Hero Hassas Kadran SVG yedeği.
   ⚠️ backdrop-filter / filter: blur YOK. Eğilme yalnız yaprak öğede (SVG); .panel / .gorunum'a transform YOK.
   ⚠️ Hiçbir başlangıç karesi öğeyi görünmez yapmaz (süpürme %35'ten başlar). Hareket "kapalı"da düz. */

/* ---------- 3B katmanı: kutunun içine, HTML toplamın ALTINA (DOM sırası) ---------- */
.uc-etkin { position: relative; }
.uc-etkin > canvas:not(.uc-tuval) { display: none; }          /* 3B'de 2B tuval kurulmaz; kalmışsa gizli */
.uc-kap { position: absolute; inset: 0; }
.uc-kap > .uc-tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.uc-etiketler { position: absolute; inset: 0; pointer-events: none; }
/* Işık Halkası temas gölgesi: halkanın ALTINDA düz elips (ortadaki toplamın arkasına düşmez).
   ::before → tuvalden ÖNCE boyanır (tuval üstte); z-index YOK (panelin arkasına kaçmasın). */
.uc-halka::before {
  content: ""; position: absolute; left: 50%; bottom: 3%; width: 128px; height: 18px; translate: -50% 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent);
}
:root[data-tema="aydinlik"] .uc-halka::before { background: radial-gradient(closest-side, rgba(12, 14, 18, .18), transparent); }

/* Dilim ↔ liste satırı eş zamanlı vurgu (§4 satır hover dili; diğer satırlar KARARTILMAZ) */
.uc-vurgu {
  background: color-mix(in srgb, var(--metin) 4%, transparent);
  box-shadow: inset 2px 0 0 var(--vurgu);
}

/* ---------- 2B | 3B segmenti (panel başlığı; 28×28) ---------- */
.uc-segment {
  display: inline-flex; flex: none; margin-left: auto; align-self: center;
  border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden;
}
.uc-segment > button {
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 600 10.5px/1 var(--font-mono); color: var(--soluk); letter-spacing: 0;
  transition: background-color 120ms, color 120ms;
}
.uc-segment > button + button { border-left: 1px solid var(--cizgi); }
.uc-segment > button:hover:not(:disabled) { background: color-mix(in srgb, var(--metin) 6%, transparent); }
.uc-segment > button[aria-pressed="true"] { background: color-mix(in srgb, var(--vurgu) 16%, transparent); color: var(--metin); }
.uc-segment > button:disabled { opacity: .45; cursor: not-allowed; }
.uc-segment > button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
@media (max-width: 639.98px) { .uc-segment { display: none; } }   /* < 640 px hiçbir 3B uygun değil */

/* ---------- Su Seviyesi: HTML etiketleri (konum JS'te translate; kaydırma CSS translate ile) ---------- */
.uc-etiket {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font: 500 10.5px/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--st-grafik-yazi, var(--soluk));
}
.uc-tik { translate: calc(-100% - 6px) -50%; }
.uc-not { translate: -50% calc(-100% - 10px); font-family: inherit; font-size: 11px; font-weight: 600; color: var(--metin); }
.uc-not.alt { translate: -50% 10px; }
.uc-isaret {
  width: 9px; height: 9px; border-radius: 50%; translate: -50% -50%;
  background: var(--basari); box-shadow: 0 0 0 2px var(--panel);
}
.uc-isaret.eksi { background: var(--tehlike); }
.uc-nisan { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--st-grafik-nisan, var(--cizgi)); pointer-events: none; }
/* Su Seviyesi ipucu: asıl stil css/grafik.css ▸ .grafik-ipucu[data-cam] (P3; görünür = .acik).
   Aşağıdaki yedek özgüllük 0 (:where) — grafik.css yüklüyse HİÇBİR şeyi ezmez. */
:where(.uc-ipucu) {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  min-width: 188px; max-width: 288px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--st-ipucu-zemin, var(--panel)) 94%, transparent);
  border: 1px solid var(--st-ipucu-kenar, var(--cizgi));
}
:where(.uc-ipucu:not(.acik)) { visibility: hidden; }

/* ---------- Kredi Kadranı — CSS 3B (WebGL YOK; yazılım modunda da görünür) ----------
   Kap perspective 700px; SVG (yaprak) rotateX(28°) + fareyle ±6° (--kk-x/--kk-y KUTUYA yazılır, köke değil).
   Renk kartRiski eşiklerinden: sağlıklı --basari · dikkat --uyari · kritik --tehlike. %80'de şampanya çentik. */
.kredi-kadran {
  --kk-boyut: 72px; --kk-kalinlik: 10px; --kk-renk: var(--basari);
  position: relative; flex: none; width: var(--kk-boyut);
  display: grid; justify-items: center; gap: 3px;
}
.kredi-kadran[data-risk="dikkat"] { --kk-renk: var(--uyari); }
.kredi-kadran[data-risk="kritik"] { --kk-renk: var(--tehlike); }
.kk-sahne { position: relative; width: var(--kk-boyut); height: var(--kk-boyut); perspective: 700px; }
.kk-sahne > svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  transform: rotateX(calc(28deg + var(--kk-y, 0deg))) rotateY(var(--kk-x, 0deg));
  transition: transform 450ms cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .kredi-kadran[data-hareket="tam"]:hover .kk-sahne > svg { transition: transform 80ms linear; will-change: transform; }
}
.kk-iz, .kk-dolu, .kk-sivi { fill: none; }
.kk-iz, .kk-dolu { vector-effect: non-scaling-stroke; }                /* 10 px ekran pikseli (kap boyundan bağımsız) */
.kk-iz { stroke: var(--st-grafik-notr, var(--cizgi)); stroke-width: var(--kk-kalinlik); stroke-opacity: .5; }
.kk-dolu { stroke: var(--kk-renk); stroke-width: var(--kk-kalinlik); stroke-linecap: round; }
/* "Sıvı" parlama: aynı yayın 3 px α .5 beyaz kopyası, yalnız hover + hareket "tam", 6 sn'de akar */
.kk-sivi { stroke: #FFFFFF; stroke-opacity: .5; stroke-width: 1.67; stroke-linecap: round; stroke-dasharray: 8 12; opacity: 0; }  /* ≈ 3 px @ 72 px; pathLength=100 */
.kredi-kadran[data-hareket="tam"]:hover .kk-sivi { opacity: 1; animation: kkAkis 6s linear infinite; }
@keyframes kkAkis { to { stroke-dashoffset: -100; } }
.kk-centik { stroke: var(--st-sampanya, #D2B48C); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kk-golge {
  position: absolute; left: 50%; top: calc(var(--kk-boyut) * .84); width: calc(var(--kk-boyut) * .9); height: calc(var(--kk-boyut) * .2);
  translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent);
}
:root[data-tema="aydinlik"] .kk-golge { background: radial-gradient(closest-side, rgba(12, 14, 18, .18), transparent); }
.kk-etiket {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 9.5px; font-weight: 600; line-height: 1; color: var(--metin);
}
/* ⚠️ "kk-hedef" DEĞİL: o ad style.css'te Kart Limit grafiğinin %80 hedef çizgisi (mutlak, 2 px) — çakışma testte görüldü. */
.kkd-hedef { font: 500 9.5px/1.2 var(--font-mono); color: var(--soluk); white-space: nowrap; }
/* Hareket kapalı → düz SVG (eğim yok, akış yok) */
html.hareket-kapali .kk-sahne > svg, .kredi-kadran[data-hareket="kapali"] .kk-sahne > svg { transform: none; transition: none; }
html.hareket-kapali .kk-sivi { animation: none; opacity: 0; }

/* ---------- Hero — Hassas Kadran (184×184; 3B katmanı ya da SVG yedeği aynı kapta) ---------- */
.hassas-kadran { position: relative; width: 184px; height: 184px; flex: none; }
.hassas-kadran > .egim-ic, .hassas-kadran svg { width: 100%; height: 100%; display: block; }
.hk-cam { fill: #FFFFFF; fill-opacity: .06; }
:root[data-tema="aydinlik"] .hk-cam { fill: var(--metin); fill-opacity: .04; }
.hk-cerceve { fill: none; stroke: var(--soluk); stroke-width: 5; stroke-opacity: .55; }
.hk-centikler line { stroke: var(--soluk); stroke-opacity: .7; stroke-width: 1; stroke-linecap: round; }
.hk-centikler line.uzun { stroke-width: 1.6; }
.hk-sampanya { fill: none; stroke: var(--st-sampanya, #D2B48C); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hk-iz, .hk-hale, .hk-yay { fill: none; stroke-linecap: round; }
.hk-dis { stroke: var(--vurgu); }
.hk-ic { stroke: var(--st-sampanya, #D2B48C); }
.hk-iz { stroke-width: 5; stroke-opacity: .12; stroke-linecap: butt; }
.hk-hale { stroke-width: 12; stroke-opacity: .16; }
.hk-yay { stroke-width: 5; }
.hk-ic.hk-iz, .hk-ic.hk-yay { stroke-width: 4.4; }
.hk-ic.hk-hale { stroke-width: 10.5; }
/* Giriş: yay 900 ms'de BİR KEZ süpürülür — %35'ten başlar (dashoffset .65 → 0; pathLength=1) */
.hk-giris { stroke-dasharray: 1; animation: hkSupur 900ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hkSupur { from { stroke-dashoffset: .65; } to { stroke-dashoffset: 0; } }
html.hareket-kapali .hk-giris { animation: none; stroke-dasharray: none; }
@media (prefers-reduced-motion: reduce) { .hk-giris { animation: none; stroke-dasharray: none; } }
/* Kadranın altındaki açıklama: "Ayın %95'i geçti · Ödemelerin %61'i yapıldı" (grafik3bAciklamaYaz yazar) */
.hk-aciklama { font-size: 12px; line-height: 1.4; color: var(--soluk); text-align: center; }
.hk-aciklama .sayisal { color: var(--metin); }