/* =============================================================
   Trendmetrik · KPI Kart Sistemi
   Ortak şasi — Genel Bakış (yükleme animasyonu) +
   Canlı Performans (sürekli güncellenen grafik)
   ============================================================= */

:root {
  --kpi-line: #e7ebf1;
  --kpi-line-strong: #dbe5ef;
  --kpi-ink: #0f172a;
  --kpi-ink-2: #475569;
  --kpi-mute: #94a3b8;
  --kpi-primary: #0175e4;
  --kpi-primary-deep: #0163c2;
  --kpi-success: #16a34a;
  --kpi-danger: #dc2626;
  --kpi-accent: #0175e4;   /* PR-D2b: brand accent orange→blue */
}

/* ===== Page scaffold (kept light so cards are the focus) ===== */
.kpi-stage {
  min-height: 100vh;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f6fa 240px),
    #f4f6fa;
  background-attachment: fixed;
}
.kpi-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 28px 64px;
}

/* ===== Page header + tab switch ===== */
.kpi-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.kpi-topbar .brand {
  display: flex; align-items: center; gap: 11px;
}
.kpi-topbar .brand img { width: 30px; height: 30px; }
.kpi-topbar .brand-name {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--kpi-ink);
}
.kpi-kicker {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--kpi-ink-2);
  margin-bottom: 1px;
}
.kpi-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--kpi-ink);
  line-height: 1.1;
}

.kpi-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: #eef1f6;
  border: 1px solid var(--kpi-line);
  border-radius: 12px;
}
.kpi-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 0; background: transparent;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--kpi-ink-2);
  letter-spacing: -0.01em;
  transition: color 150ms ease;
}
.kpi-tab i { width: 15px; height: 15px; }
.kpi-tab:hover { color: var(--kpi-ink); }
.kpi-tab.active {
  background: #fff;
  color: var(--kpi-ink);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.kpi-tab.active.live { color: var(--kpi-primary-deep); }
.kpi-tab .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kpi-danger);
}
.kpi-tab.active.live .live-dot { animation: kpiPulseDot 1.4s ease-in-out infinite; }

/* ===== Grid ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(4, 1fr);
  gap: var(--tm-dashboard-card-gap, var(--tm-card-gap, 12px));
}

/* ===== Card ===== */
.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kpi-line);
  border-radius: var(--tm-radius-card, 12px);
  padding: 15px 16px 0;
  box-shadow: var(--tm-card-shadow, 0 1px 2px rgba(15,23,42,0.04));
  overflow: hidden;
  min-height: 178px;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.kpi-card:hover {
  box-shadow: var(--tm-card-shadow-hover, var(--tm-card-shadow));
  border-color: var(--kpi-line-strong);
}

/* entrance is driven from JS (visibility-guarded) so a hidden/paused
   iframe, print, or PDF export always shows the final visible state */
.kpi-card.enter { /* marker only; no hiding here */ }

/* FIX 2026-09-10 (KPI kartları kayboldu vakası): tm-kpi.js render()/update()
   artık kart-başına izole (buildCardSafe) — biri patlarsa DİĞERLERİ basılır,
   patlayan kartın yerine bu görünür işaret gelir (sessiz yutma yerine). */
.kpi-card--error {
  align-items: center;
  justify-content: center;
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(220, 38, 38, 0.04);
}
.kpi-card--error .kpi-ic { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.kpi-card--error .kpi-error-msg { color: #b91c1c; font-size: 13px; margin-top: 8px; }
html.dark-mode .kpi-card--error,
body.dark-mode .kpi-card--error {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.07);
}
html.dark-mode .kpi-card--error .kpi-error-msg,
body.dark-mode .kpi-card--error .kpi-error-msg { color: #fca5a5; }

/* ===== Header row ===== */
.kpi-head {
  display: flex; align-items: center; gap: 9px;
  position: relative;
  z-index: 3;
}
.kpi-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9;
  color: var(--kpi-ink-2);
  flex-shrink: 0;
}
.kpi-ic i { width: 17px; height: 17px; }

/* ── CİLA 2026-07-29 (onaylı yön): per-metrik CANLI ikon-çipi + accent-bar ──
   Düz-nötr gri çipler yerine her KPI'a semantik renk (sıraya göre). Featured
   (.accent) kart kendi gradient'ini korur. Tüm KPI grid'lerinde geçerli. */
.kpi-cards-wrapper .kpi-card:not(.accent):not(.kpi-card--ph) {
  --kc-tone: var(--color-primary, #0175e4); --kc-soft: var(--primary-50, #e8f4ff);
}
.kpi-cards-wrapper .kpi-card:nth-child(2):not(.accent):not(.kpi-card--ph) { --kc-tone:#16a34a; --kc-soft:#f0fdf4; }
.kpi-cards-wrapper .kpi-card:nth-child(3):not(.accent):not(.kpi-card--ph) { --kc-tone:#7c3aed; --kc-soft:#f5f3ff; }
.kpi-cards-wrapper .kpi-card:nth-child(4):not(.accent):not(.kpi-card--ph) { --kc-tone:#ea580c; --kc-soft:#fff7ed; }
.kpi-cards-wrapper .kpi-card:nth-child(5):not(.accent):not(.kpi-card--ph) { --kc-tone:#dc2626; --kc-soft:#fef2f2; }
.kpi-cards-wrapper .kpi-card:not(.accent):not(.kpi-card--ph) .kpi-ic {
  background: var(--kc-soft); color: var(--kc-tone);
}
.kpi-cards-wrapper .kpi-card:not(.accent):not(.kpi-card--ph)::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: var(--kc-tone); opacity:.92; z-index:2;
}
html.dark-mode .kpi-cards-wrapper .kpi-card:nth-child(2):not(.accent) { --kc-soft:rgba(22,163,74,.16); }
html.dark-mode .kpi-cards-wrapper .kpi-card:nth-child(3):not(.accent) { --kc-soft:rgba(124,58,237,.18); }
html.dark-mode .kpi-cards-wrapper .kpi-card:nth-child(4):not(.accent) { --kc-soft:rgba(234,88,12,.16); }
html.dark-mode .kpi-cards-wrapper .kpi-card:nth-child(5):not(.accent) { --kc-soft:rgba(220,38,38,.16); }
html.dark-mode .kpi-cards-wrapper .kpi-card:not(.accent):not(.kpi-card--ph) { --kc-soft:rgba(1,117,228,.16); }
.kpi-label {
  font-size: 13px; font-weight: 600;
  color: #1e293b; letter-spacing: -0.01em;
}
.kpi-info {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0; background: transparent;
  color: var(--kpi-mute);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
}
.kpi-info i { width: 14px; height: 14px; }
.kpi-info:hover { background: #f1f5f9; color: var(--kpi-ink-2); }
.kpi-info.open { background: var(--kpi-primary); color: #fff; }

/* live badge replaces info-area accent */
.kpi-livebadge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-family: var(--tm-font-sans, "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
}
.kpi-livebadge .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--kpi-danger);
  animation: kpiPulseDot 1.4s ease-in-out infinite;
}
.kpi-head-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kpi-head-tools .kpi-info { margin-left: 0; }

/* ===== Value + delta ===== */
.kpi-body { position: relative; z-index: 3; margin-top: 13px; }
.kpi-value {
  font-family: var(--tm-font-sans, "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05;
  color: var(--kpi-ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.kpi-value .unit { font-size: 14px; font-weight: 500; color: var(--kpi-ink-2); }
.kpi-value.flash { animation: kpiFlash 600ms ease; }

.kpi-deltarow { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-family: var(--tm-font-sans, "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 200ms ease;
}
.kpi-delta i { width: 12px; height: 12px; stroke-width: 2.4; }
.kpi-delta.up   { background: #dcfce7; color: #15803d; }
.kpi-delta.down { background: #fee2e2; color: #b91c1c; }
/* nötr/veri-yok ("yeni", karşılaştırma yapılamayan) → gri pill, yön oku yok.
   2026-07-10: deltaDir default'u 'flat' olduğundan görünür stil şart. */
.kpi-delta.flat { background: #f1f5f9; color: #64748b; }
.kpi-card.accent .kpi-delta.flat { background: rgba(255,255,255,0.18); color: #eef2f7; }
.kpi-delta.flash { animation: kpiDeltaFlash 700ms ease; }
.kpi-vs { font-size: 11px; color: var(--kpi-mute); font-weight: 500; }

/* ===== Chart ===== */
.kpi-chart {
  position: relative;
  height: 62px;
  margin: 0 -16px 0;
  margin-top: auto;
}
.kpi-chart svg { width: 100%; height: 100%; display: block; }
.kpi-spark-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* end-of-line dot (HTML overlay, crisp) — inset so it isn't clipped */
.kpi-dot {
  position: absolute;
  left: calc(100% - 5px);
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(1,117,228,0.12);
  z-index: 4;
}
.kpi-card.accent .kpi-dot { border-color: rgba(255,255,255,0.9); box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.kpi-dot.live { box-shadow: 0 0 0 0 rgba(1,117,228,0.4); animation: kpiDotRing 1.7s ease-out infinite; }
@keyframes kpiDotRing {
  0%   { box-shadow: 0 0 0 0 rgba(1,117,228,0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(1,117,228,0); }
  100% { box-shadow: 0 0 0 0 rgba(1,117,228,0); }
}
/* line draw-in is driven from JS (visibility-guarded) */
/* line draw-in is driven from JS (visibility-guarded) */
.kpi-spark-area { opacity: 1; }

.kpi-dot-end {
  transition: cx 900ms cubic-bezier(0.45,0,0.2,1), cy 900ms cubic-bezier(0.45,0,0.2,1);
}
.kpi-dot-pulse { transform-origin: center; }

/* hover crosshair (HTML overlay) */
.kpi-cross-line {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--kpi-mute);
  transform: translateX(-50%);
  opacity: 0; transition: opacity 120ms ease;
  pointer-events: none; z-index: 4;
}
.kpi-card.accent .kpi-cross-line { border-left-color: rgba(255,255,255,0.6); }
.kpi-cross-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #fff; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 120ms ease;
  pointer-events: none; z-index: 5;
  box-shadow: 0 1px 4px rgba(15,23,42,0.25);
}
.kpi-chart.hovering .kpi-cross-line,
.kpi-chart.hovering .kpi-cross-dot { opacity: 1; }
.kpi-tip {
  position: absolute;
  top: -2px;
  transform: translate(-50%, -100%);
  background: #0f172a;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--tm-font-sans, "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  box-shadow: 0 4px 12px rgba(15,23,42,0.18);
  z-index: 6;
}
.kpi-chart.hovering .kpi-tip { opacity: 1; }
/* Metni olmayan tooltip hiçbir durumda görünmez (yeniden kurulan sparkline'da boş kutu kalıyordu — 2026-09-24). */
.kpi-chart.hovering .kpi-tip:empty { opacity: 0; }
.kpi-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #0f172a; border-bottom: 0;
}

/* ===== Info popover (fixed so card overflow can't clip it) ===== */
.kpi-pop {
  position: fixed;
  width: 224px;
  background: #fff;
  border: 1px solid var(--kpi-line-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.16);
  padding: 12px 13px;
  z-index: 20;
}
.kpi-pop-title {
  font-size: 12px; font-weight: 700; color: var(--kpi-ink);
  margin-bottom: 4px; letter-spacing: -0.01em;
}
.kpi-pop-text {
  font-size: 12px; line-height: 1.5; color: var(--kpi-ink-2);
}
.kpi-pop-formula {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--kpi-primary-deep);
  background: #f1f7ff;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  padding: 5px 7px;
  line-height: 1.45;
}

/* ===== Accent / hero card ===== */
.kpi-card.accent {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(115,183,254,0.45) 0%, transparent 50%),
    linear-gradient(145deg, #0163c2 0%, #0175e4 58%, #0b5cb0 100%);
  border: 0;
  box-shadow: var(--tm-card-shadow);
}
.kpi-card.accent:hover { box-shadow: var(--tm-card-shadow-hover); }
.kpi-card.accent .kpi-ic { background: rgba(255,255,255,0.18); color: #fff; }
.kpi-card.accent .kpi-label { color: #fff; }
.kpi-card.accent .kpi-value { color: #fff; }
.kpi-card.accent .kpi-value .unit { color: rgba(255,255,255,0.85); }
.kpi-card.accent .kpi-info { color: rgba(255,255,255,0.7); }
.kpi-card.accent .kpi-info:hover { background: rgba(255,255,255,0.18); color: #fff; }
.kpi-card.accent .kpi-info.open { background: rgba(255,255,255,0.92); color: var(--kpi-primary-deep); }
.kpi-card.accent .kpi-delta.up { background: rgba(255,255,255,0.22); color: #fff; }
.kpi-card.accent .kpi-delta.down { background: rgba(255,255,255,0.22); color: #ffe2d6; }
.kpi-card.accent .kpi-vs { color: rgba(255,255,255,0.72); }
.kpi-card.accent .kpi-livebadge { background: rgba(255,255,255,0.2); color: #fff; }
.kpi-card.accent .kpi-glow {
  position: absolute; right: -50px; bottom: -70px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 65%);
  pointer-events: none;
}

/* ===== animations shared ===== */
@keyframes kpiPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
@keyframes kpiFlash {
  0% { color: var(--kpi-primary); }
  100% { }
}
.kpi-card.accent .kpi-value.flash { animation: kpiFlashWhite 600ms ease; }
@keyframes kpiFlashWhite { 0% { text-shadow: 0 0 16px rgba(255,255,255,0.7); } 100% {} }
@keyframes kpiDeltaFlash {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes kpiLivePulse {
  0%, 100% { r: 4; opacity: 1; }
  50% { r: 7; opacity: 0.55; }
}
.kpi-live-end { animation: kpiLivePulse 1.6s ease-in-out infinite; }

/* tweak: hide area fill */
.kpi-grid.no-area .kpi-spark-area { display: none; }

/* tweak: orange accent hero */
.kpi-card.accent.orange {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(255,196,150,0.5) 0%, transparent 50%),
    linear-gradient(145deg, #e76412 0%, #fd751f 58%, #d4560a 100%);
  box-shadow: var(--tm-card-shadow);
}
.kpi-card.accent.orange:hover { box-shadow: var(--tm-card-shadow-hover); }

/* ===== Footnote ===== */
.kpi-foot {
  margin-top: 22px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--kpi-mute);
}
.kpi-foot i { width: 14px; height: 14px; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card.accent { grid-column: span 2; }
}
@media (max-width: 640px) {
  .kpi-shell { padding: 22px 16px 48px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card.accent { grid-column: span 1; }
  .kpi-topbar { align-items: flex-start; }
}

/* ============================================================================
   PR-A 2026-06-11 — Layout stability (perf program)

   1) .kpi-card--ph: SSR placeholder kartları. #tmOverviewKpiGrid, tm-kpi.js
      yüklenip TMKpi.render koşana kadar (cold load ~3.8-4.6sn) boştu; deck
      0→213px geç girince chart grid'i 214px aşağı itiyordu (CLS). Sunucu
      artık payload'daki kart sayısı kadar placeholder basar; TMKpi.render
      container.innerHTML="" ile temizler (tm-kpi.js:321) → render anında
      yükseklik birebir devralınır, shift olmaz. Min-height değerleri TEST
      demo ölçümü (@1600: 213, @1366: 211, @390: 182).
   2) Sparkline/delta satırı geç dolunca kartlar 188→213 büyüyordu (canlı
      sayfada 4.4sn'de ikinci shift). Geniş ekranda nihai kart yüksekliği
      rezerve edilir; ≤1100px'te kart içerikleri zaten min-height 168/178
      içinde kaldığından dokunulmaz (görsel birebir). */
.kpi-card--ph {
  min-height: 213px;
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.05));
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: none;
  pointer-events: none;
}
.kpi-card--ph:hover { transform: none; box-shadow: none; }
html.dark-mode .kpi-card--ph,
body.dark-mode .kpi-card--ph {
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.03));
  border-color: rgba(148, 163, 184, 0.12);
}
@media (max-width: 1499px) {
  .kpi-card--ph { min-height: 211px; }
}
@media (max-width: 1100px) {
  .kpi-card--ph { min-height: 188px; }
  .kpi-card--ph:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .kpi-card--ph { min-height: 182px; }
  .kpi-card--ph:first-child { grid-column: span 1; }
}

@media (min-width: 1101px) {
  #tmOverviewKpiGrid .kpi-card,
  .tm-live-kpi-grid .kpi-card { min-height: 213px; }
}
/* === /PR-A === */

/* FIX 2026-09-10 (KPI kartları kayboldu vakası): SSR placeholder'ı (--ph)
   GERÇEK bir hata durumunda (JSON bozuk / TMKpi hiç yüklenmedi / render
   patladı) sessizce SİLMEK yerine "Yüklenemedi" durumuna çevirir — yükseklik
   (--ph'nin min-height'ı) korunur, kutunun kalması bilinçli (CLS yok + "en
   azından bir şey ters gitti" görünür kalır; boş bırakmak en kötü seçenek). */
.kpi-card--load-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 213px;
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  pointer-events: none;
}
html.dark-mode .kpi-card--load-failed,
body.dark-mode .kpi-card--load-failed {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.22);
  color: #fca5a5;
}
@media (max-width: 1499px) { .kpi-card--load-failed { min-height: 211px; } }
@media (max-width: 1100px) { .kpi-card--load-failed { min-height: 188px; } }
@media (max-width: 640px) { .kpi-card--load-failed { min-height: 182px; } }

@media (prefers-reduced-motion: reduce) {
  .kpi-card.enter,
  .kpi-card.enter .kpi-spark-line,
  .kpi-card.enter .kpi-spark-area { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}

/* ==== 2026-06-11 UI audit r1 #7: kpi-head 1440px taşması (başlık + CANLI rozeti sıkışması) ==== */
.kpi-head { min-width: 0; }
@media (max-width: 1500px) {
  .kpi-head { gap: 6px; }
  .kpi-head .kpi-ic { width: 24px; height: 24px; flex-shrink: 0; }
}

/* WCAG AA (2026-08-19, agent-ölçümlü): nötr delta pill 4.34 FAIL → 6.74 PASS */
.kpi-delta.flat { color: #475569; background: #eef2f7; }

/* ---------- seri yok / seri geçersiz ----------------------------------------
   2026-09-08: "Hesaplanamayan göstergeyi çizme." Sparkline kutusu yüksekliği
   korur (hizalama + CLS yok) ama içi çizilmez. Neden boş olduğu kartın
   .kpi-vs (deltaText) satırında sunucudan gelen metinle açıklanır.
   Tetikleyen: TMKpi kart şemasında `points` YOK/BOŞ (bkz. tm-kpi.js hasSpark). */
.kpi-card--nospark .kpi-chart { visibility: hidden; }

/* ---------- yükleniyor (dönem/filtre değişimi) -------------------------------
   2026-09-09 (B6): görünür hero KPI grid'i veri gelene kadar "meşgul" işaretlenir.
   Skeleton mekanizması GİZLİ legacy grid'e bağlı olduğu için görünür kartlar
   yükleme boyunca eski dönemin değerini TAZE gibi gösteriyordu.
   Değer gizlenmez (yanıp sönme/CLS yok), yalnız soluklaşır + etkileşim kapanır. */
.kpi-grid--busy { opacity: .55; transition: opacity .15s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kpi-grid--busy { transition: none; } }