/* ============================================================
   pesat-visual.css — Lapisan VISUAL POLISH (handoff #3), ADITIF.
   Ditumpuk DI ATAS bootstrap + style.css + sekolahpesat-brand.css.
   SENGAJA TANPA reset global / base element (cegah bentrok base app
   yang berbasis Bootstrap). Hanya: token VISUAL SYSTEM v2 + class
   utility/komponen polish + varian gelap. Diekstrak & diadaptasi dari
   handoff-3-visual/css/pesat.css (blok VISUAL SYSTEM v2) agar mandiri.
   Nama token & class sudah diverifikasi TIDAK bentrok dgn CSS app.
   ============================================================ */
:root{
  /* brand (samakan dgn design system) */
  --navy-600:#1A3A6E; --navy-100:#D6E2F2; --navy-50:#EEF3FA;
  --orange-600:#E66600; --orange-500:#FF7A1A; --orange-50:#FFF3E8;
  --ink:#0e1f3d; --muted:#7a8699; --line:#e7ebf2; --bg-soft:#f7f9fc;
  --r-card:18px; --r-chip:14px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(16,36,71,.04),0 10px 30px rgba(16,36,71,.06);
  --sh-hover:0 16px 44px rgba(16,36,71,.13);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* VISUAL SYSTEM v2 — easing brand + palet kategorikal data-viz */
  --ease-brand:cubic-bezier(.2,.8,.2,1);
  --cat-1:#1A3A6E; --cat-2:#FF7A1A; --cat-3:#2E9E8F; --cat-4:#7C5CE0; --cat-5:#E4569A; --cat-6:#F2B33D;
}

/* MOTIF BRAND — watermark bintang sangat tipis (benang merah) */
.brand-motif{position:relative}
.brand-motif>*{position:relative;z-index:1}
.brand-motif::after{content:"";position:absolute;top:-40px;right:-30px;width:260px;height:260px;z-index:0;pointer-events:none;opacity:.05;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1 L19.9 11.8 L31.2 12 L22.2 18.9 L25.5 29.7 L16 23.2 L6.5 29.7 L9.8 18.9 L0.8 12 L12.1 11.8 Z' fill='%231A3A6E'/%3E%3C/svg%3E")}
.brand-motif.on-dark::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1 L19.9 11.8 L31.2 12 L22.2 18.9 L25.5 29.7 L16 23.2 L6.5 29.7 L9.8 18.9 L0.8 12 L12.1 11.8 Z' fill='%23ffffff'/%3E%3C/svg%3E");opacity:.06}

/* IMAGERY — overlay duotone navy→orange + sudut membulat */
.img-duotone{position:relative;border-radius:var(--r-card);overflow:hidden;display:block}
.img-duotone>img,.img-duotone>video{display:block;width:100%;height:100%;object-fit:cover}
.img-duotone::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(26,58,110,.42),rgba(255,122,26,.10) 70%);mix-blend-mode:multiply;pointer-events:none}
.ar-4-3{aspect-ratio:4/3}
.ar-16-9{aspect-ratio:16/9}
.ar-1-1{aspect-ratio:1/1}

/* PLACEHOLDER tinted (opsional, utk slot gambar kosong) */
.ph{background:repeating-linear-gradient(135deg,#eaeef5 0 16px,#eef2f8 16px 32px);border:1px solid var(--line);position:relative;overflow:hidden;border-radius:var(--r-card)}
.ph .lab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#9fb0c6;font-family:var(--mono);font-size:13px;text-align:center;padding:16px;z-index:2}
.ph.tinted::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(26,58,110,.30),transparent 70%);z-index:1}

/* SECTION TAG — hairline oranye otomatis */
.sec-tag{display:inline-block;font-size:13px;font-weight:800;color:var(--orange-600);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.sec-tag::before{content:"";display:inline-block;width:22px;height:2px;background:var(--orange-500);vertical-align:middle;margin-right:9px;border-radius:2px}
.sec-head.center .sec-tag::before{display:none}

/* HIRARKI KARTU — MODIFIER (aman ditumpuk di atas .card Bootstrap) */
.card--primary,.kpi--primary{border-color:var(--navy-100)!important;box-shadow:var(--sh-hover)!important;position:relative;overflow:hidden}
.card--primary::after,.kpi--primary::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--navy-600),var(--orange-500));z-index:2}
.card--muted{box-shadow:none!important;background:var(--bg-soft)!important}

/* SPARKLINE KPI (standalone — host ApexCharts sparkline) */
.spark{height:34px;margin-top:12px;margin-bottom:-4px}

/* MOTION — easing brand (opt-in via class .ease-brand) */
.ease-brand{transition-timing-function:var(--ease-brand)!important}

/* WORDMARK SVG helper */
.brand-wordmark{height:30px;width:auto;display:block}
.brand-wordmark--sm{height:26px}

/* DARK MODE — HANYA utk class baru (tak menyentuh .card/.kpi Bootstrap) */
[data-theme="dark"] .card--primary,[data-theme="dark"] .kpi--primary{border-color:#26324c!important}
[data-theme="dark"] .card--muted{background:#0f1828!important}
[data-theme="dark"] .ph{background:repeating-linear-gradient(135deg,#16203a 0 16px,#1b2640 16px 32px);border-color:#26324c}
[data-theme="dark"] .ph .lab{color:#5f6e8c}