/* =========================================================================
   Penetapan Tarif Dana Kegiatan Semester Santri SD
   Sistem gaya tunggal — tanpa kerangka kerja luar.
   Palet & tipografi diselaraskan dengan relimasijunjung.com
   (hijau #117b44 · navy #16337b · Instrument Sans).

   Susunan: 0 font · 1 token · 2 dasar · 3 tata letak · 4 komponen · 5 tabel
            6 isian · 7 lencana · 8 gerbang · 9 dialog · 10 responsif · 11 cetak
   ========================================================================= */

/* ------------------------------- 0. FONT ------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------ 1. TOKEN ------------------------------- */

:root {
  color-scheme: light;

  /* jenama — mengikuti relimasijunjung.com */
  --primer:        #117b44;
  --primer-terang: #129d53;
  --primer-cerah:  #1ebe68;
  --primer-tua:    #0e6338;
  --primer-muda:   #f0fdf6;
  --primer-garis:  #dbfbe8;

  --navy:          #16337b;
  --navy-tua:      #0b1f4b;
  --navy-terang:   #1c4796;
  --navy-muda:     #eef2fb;

  /* semantik */
  --hijau:         #117b44;
  --hijau-muda:    #f0fdf6;
  --merah:         #dc2626;
  --merah-muda:    #fef2f2;
  --jingga:        #ea580c;
  --jingga-muda:   #fff7ed;
  --kuning-muda:   #fefce8;
  --ungu:          #6d28d9;
  --ungu-muda:     #f5f3ff;
  --toska:         #0f766e;
  --emas:          #b45309;
  --emas-muda:     #fffbeb;

  /* permukaan */
  --latar:         #f8fafc;
  --latar-2:       #f1f5f9;
  --kertas:        #ffffff;
  --kertas-2:      #fafcfe;
  --kaca:          rgba(255, 255, 255, .90);

  /* tinta */
  --tinta:         #16337b;
  --tinta-2:       #334155;
  --tinta-3:       #64748b;
  --tinta-4:       #94a3b8;

  /* garis */
  --garis:         #e2e8f0;
  --garis-tebal:   #cbd5e1;

  /* bentuk — relima memakai rounded-lg (8px) dan rounded-xl (12px) */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-bulat: 999px;

  --bayang-1: 0 1px 2px rgba(15, 23, 42, .06);
  --bayang-2: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px -1px rgba(15, 23, 42, .10);
  --bayang-3: 0 4px 6px -1px rgba(15, 23, 42, .10), 0 2px 4px -2px rgba(15, 23, 42, .10);
  --bayang-4: 0 20px 25px -5px rgba(11, 31, 75, .18), 0 8px 10px -6px rgba(11, 31, 75, .12);
  --cincin:   0 0 0 3px rgba(17, 123, 68, .18);

  --alih: 160ms cubic-bezier(.4, 0, .2, 1);
  --alih-lambat: 260ms cubic-bezier(.4, 0, .2, 1);

  --lebar-sisi: 268px;
  --tinggi-atas: 64px;

  --font: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI",
          -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-angka: var(--font);
}

html[data-tema="gelap"] {
  color-scheme: dark;

  --primer:        #34d399;
  --primer-terang: #6ee7b7;
  --primer-cerah:  #1ebe68;
  --primer-tua:    #a7f3d0;
  --primer-muda:   #10281f;
  --primer-garis:  #17402f;

  --navy:          #93b4f8;
  --navy-tua:      #060f24;
  --navy-terang:   #b6ccfb;
  --navy-muda:     #131e3a;

  --hijau:         #34d399;
  --hijau-muda:    #10281f;
  --merah:         #f87171;
  --merah-muda:    #2c1618;
  --jingga:        #fb923c;
  --jingga-muda:   #2b1c10;
  --kuning-muda:   #262111;
  --ungu:          #a78bfa;
  --ungu-muda:     #1e1936;
  --toska:         #2dd4bf;
  --emas:          #fbbf24;
  --emas-muda:     #2a2313;

  --latar:         #070d1a;
  --latar-2:       #0d1526;
  --kertas:        #101a2e;
  --kertas-2:      #15203a;
  --kaca:          rgba(16, 26, 46, .88);

  --tinta:         #e8eefb;
  --tinta-2:       #b9c6dd;
  --tinta-3:       #8697b4;
  --tinta-4:       #64748b;

  --garis:         #1d2942;
  --garis-tebal:   #2b3b5a;

  --bayang-1: 0 1px 2px rgba(0, 0, 0, .4);
  --bayang-2: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(0, 0, 0, .5);
  --bayang-3: 0 4px 8px -2px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .5);
  --bayang-4: 0 22px 40px -12px rgba(0, 0, 0, .8);
  --cincin:   0 0 0 3px rgba(52, 211, 153, .22);
}

/* ------------------------------ 2. DASAR ------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
  background: var(--latar);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--alih), color var(--alih);
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.015em; line-height: 1.3; color: var(--navy); }
p { margin: 0 0 .6rem; }
a { color: var(--primer); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

::selection { background: var(--primer-garis); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--primer);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--garis-tebal);
  border-radius: var(--r-bulat);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-4); background-clip: content-box; }

.lewati {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primer); color: #fff; padding: .65rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.lewati:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------- 3. TATA LETAK ----------------------------- */

.atas {
  position: sticky; top: 0; z-index: 40;
  height: var(--tinggi-atas);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.1rem;
  background: var(--kaca);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--garis);
}
.atas::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--primer), var(--navy) 55%, transparent);
  opacity: .55;
}

.atas__identitas { display: flex; flex-direction: column; min-width: 0; max-width: 30ch; }
.atas__identitas strong {
  font-size: .95rem; font-weight: 660; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atas__identitas small {
  color: var(--tinta-3); font-size: .73rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.atas__skenario { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.atas__skenario select {
  max-width: 330px; font-size: .8rem; padding: .34rem 1.9rem .34rem .6rem;
  font-weight: 550; background-color: var(--kertas);
}

.atas__status { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.atas__aksi { display: flex; gap: .4rem; align-items: center; }

.rangka { display: flex; align-items: flex-start; }

.sisi {
  position: sticky; top: var(--tinggi-atas);
  width: var(--lebar-sisi); flex: 0 0 var(--lebar-sisi);
  height: calc(100vh - var(--tinggi-atas));
  overflow-y: auto; overscroll-behavior: contain;
  padding: .9rem .75rem 2rem;
  background: var(--kertas);
  border-right: 1px solid var(--garis);
}

.nav__item {
  position: relative;
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .62rem .7rem; margin-bottom: .18rem;
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--tinta-2);
  transition: background var(--alih), color var(--alih), transform var(--alih);
}
.nav__item::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--primer); transform: translateY(-50%);
  transition: height var(--alih-lambat);
}
.nav__item:hover { background: var(--latar-2); }
.nav__item:hover::before { height: 42%; }

.nav__item--aktif { background: var(--primer-muda); color: var(--primer); font-weight: 600; }
.nav__item--aktif::before { height: 62%; }
.nav__item--aktif .nav__teks small { color: var(--primer); opacity: .78; }

.nav__item svg {
  width: 17px; height: 17px; fill: currentColor; flex: 0 0 17px; margin-top: 3px;
  opacity: .85; transition: transform var(--alih);
}
.nav__item:hover svg { transform: scale(1.08); }

.nav__teks { display: flex; flex-direction: column; min-width: 0; }
.nav__teks strong { font-size: .85rem; font-weight: 620; letter-spacing: -.01em; }
.nav__teks small { font-size: .715rem; color: var(--tinta-3); line-height: 1.38; }

.tirai { display: none; }

.utama { flex: 1 1 auto; min-width: 0; padding: 1.5rem 1.6rem 2.5rem; }

.utama__kepala { margin-bottom: 1.25rem; }
.utama__kepala h1 {
  font-size: 1.5rem; font-weight: 680; letter-spacing: -.03em;
  display: flex; align-items: center; gap: .6rem;
}
.utama__kepala h1::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--garis), transparent);
}
.utama__kepala p { color: var(--tinta-3); font-size: .86rem; margin: .2rem 0 0; }

.modul { animation: masuk-halus .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes masuk-halus { from { opacity: 0; transform: translateY(6px); } }

.kaki {
  margin-top: 2.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--garis); color: var(--tinta-3); font-size: .76rem;
}

/* --------------------------- 4. KOMPONEN ------------------------------- */

.btn {
  font: inherit; font-weight: 600; font-size: .82rem;
  padding: .48rem .9rem; border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--primer), var(--primer-tua));
  color: #fff; cursor: pointer; white-space: nowrap;
  box-shadow: var(--bayang-1);
  transition: transform var(--alih), box-shadow var(--alih), background var(--alih), color var(--alih);
}
html[data-tema="gelap"] .btn { color: #06231a; }
.btn:hover { box-shadow: var(--bayang-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--bayang-1); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--samar {
  background: var(--kertas); color: var(--tinta-2);
  border-color: var(--garis-tebal); box-shadow: var(--bayang-1);
}
.btn--samar:hover { background: var(--latar-2); color: var(--tinta); }

.btn--bahaya { background: var(--kertas); color: var(--merah); border-color: color-mix(in srgb, var(--merah) 35%, transparent); }
.btn--bahaya:hover { background: var(--merah-muda); }
.btn--bahaya-isi { background: var(--merah); color: #fff; border-color: var(--merah); }

/* Warna teks tombol tak-padat tidak boleh ikut aturan gelap di atas. */
html[data-tema="gelap"] .btn--samar { color: var(--tinta-2); }
html[data-tema="gelap"] .btn--samar:hover { color: var(--tinta); }
html[data-tema="gelap"] .btn--bahaya { color: var(--merah); }
html[data-tema="gelap"] .btn--bahaya-isi { color: #2c1618; }

.btn--kecil { padding: .34rem .7rem; font-size: .765rem; }
.btn--penuh { width: 100%; padding: .68rem; margin-top: .35rem; font-size: .88rem; }

.ikon-tombol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--garis-tebal);
  background: var(--kertas); border-radius: var(--r-sm); cursor: pointer;
  color: var(--tinta-2);
  transition: background var(--alih), color var(--alih), transform var(--alih);
}
.ikon-tombol:hover { background: var(--latar-2); color: var(--primer); }
.ikon-tombol:active { transform: scale(.94); }
.ikon-tombol svg { width: 17px; height: 17px; fill: currentColor; }
.hanya-kecil { display: none; }

.status {
  font-size: .715rem; font-weight: 620; padding: .26rem .6rem;
  border-radius: var(--r-bulat); background: var(--latar-2); color: var(--tinta-2);
  white-space: nowrap; border: 1px solid transparent;
  transition: background var(--alih), color var(--alih);
}
.status--ok { background: var(--hijau-muda); color: var(--hijau); border-color: color-mix(in srgb, var(--hijau) 22%, transparent); }
.status--bahaya { background: var(--merah-muda); color: var(--merah); border-color: color-mix(in srgb, var(--merah) 25%, transparent); }
.status--samar { color: var(--tinta-3); }

/* ---- panel ---- */

.panel {
  position: relative;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  box-shadow: var(--bayang-2);
  margin-bottom: 1.2rem;
  overflow: hidden;
  transition: box-shadow var(--alih-lambat), border-color var(--alih);
}
.panel:hover { box-shadow: var(--bayang-3); }

.panel__kepala {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--garis);
  background: linear-gradient(180deg, var(--kertas-2), var(--kertas));
}
.panel__kepala h2 {
  font-size: .96rem; font-weight: 640; letter-spacing: -.015em;
  display: flex; align-items: center; gap: .5rem;
}
.panel__kepala h2::before {
  content: ''; width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primer), var(--navy));
  flex: 0 0 3px;
}
.panel__desk { color: var(--tinta-3); font-size: .78rem; margin: .22rem 0 0 .95rem; }
.panel__aksi { display: flex; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.panel__isi { padding: 1.1rem; }

.panel__lipat {
  border: none; background: none; cursor: pointer; padding: .2rem;
  color: var(--tinta-3); border-radius: var(--r-xs); line-height: 0;
  transition: color var(--alih), background var(--alih);
}
.panel__lipat:hover { color: var(--primer); background: var(--latar-2); }
.panel__lipat svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--alih-lambat); }
.panel--terlipat .panel__lipat svg { transform: rotate(-90deg); }
.panel--terlipat .panel__isi { display: none; }
.panel--terlipat .panel__kepala { border-bottom-color: transparent; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.grid-2 > .panel { margin-bottom: 0; }

/* ---- KPI: pita statistik bergaya relima ---- */

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0; margin-bottom: 1.2rem;
  background: linear-gradient(120deg, var(--navy-tua), var(--navy) 60%, var(--navy-terang));
  border-radius: var(--r-md);
  box-shadow: var(--bayang-3);
  overflow: hidden;
}
html[data-tema="gelap"] .kpi-grid {
  background: linear-gradient(120deg, #071228, #0d1c3c 60%, #12264f);
  border: 1px solid var(--garis);
}

.kpi {
  position: relative; overflow: hidden;
  background: transparent; border: none; box-shadow: none;
  padding: 1.05rem 1.15rem;
  display: flex; flex-direction: column; gap: .22rem;
  border-left: 1px solid rgba(255, 255, 255, .10);
  transition: background var(--alih);
}
.kpi:first-child { border-left: none; }
.kpi:hover { background: rgba(255, 255, 255, .05); }
.kpi::before {
  content: ''; position: absolute; left: 1.15rem; top: 0;
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--primer-cerah);
}

.kpi__label {
  font-size: .695rem; color: rgba(255, 255, 255, .62); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem;
}
.kpi__nilai {
  font-size: 1.42rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: #fff;
  transition: color var(--alih);
}
.kpi__catatan { font-size: .705rem; color: rgba(255, 255, 255, .5); line-height: 1.45; }

.kpi--biru::before   { background: #7dd3fc; }
.kpi--hijau::before  { background: var(--primer-cerah); }
.kpi--merah::before  { background: #fda4af; }
.kpi--jingga::before { background: #fdba74; }
.kpi--ungu::before   { background: #c4b5fd; }

.kpi .minus { color: #fda4af; }
.kpi .plus { color: #6ee7b7; }
.kpi .nilai-berubah { animation: kedip-terang .55s ease-out; }
@keyframes kedip-terang {
  0%   { background: rgba(255, 255, 255, .22); border-radius: 4px; }
  100% { background: transparent; border-radius: 4px; }
}

.minus { color: var(--merah); }
.plus { color: var(--hijau); }

/* ---- narasi, kanvas, catatan ---- */

.narasi p { font-size: .9rem; color: var(--tinta-2); line-height: 1.75; }
.narasi p:last-child { margin-bottom: 0; }
.narasi strong { color: var(--tinta); font-weight: 640; }

.kanvas { position: relative; width: 100%; }

.catatan {
  margin: 1rem 0 0; padding: .85rem 1rem .85rem 2.1rem;
  color: var(--tinta-3); font-size: .785rem; line-height: 1.65;
  background: var(--primer-muda); border-radius: var(--r-sm);
  border-left: 3px solid var(--primer);
  list-style: none;
}
.catatan li { position: relative; margin-bottom: .35rem; }
.catatan li:last-child { margin-bottom: 0; }
.catatan li::before {
  content: ''; position: absolute; left: -.85rem; top: .55rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--tinta-4);
}
.catatan strong, .catatan code { color: var(--tinta-2); }

.legenda {
  display: flex; flex-wrap: wrap; gap: .5rem .95rem; margin-bottom: .9rem;
  font-size: .745rem; color: var(--tinta-3);
}
.legenda span { display: inline-flex; align-items: center; gap: .35rem; }

.peringatan {
  border-radius: var(--r-sm); padding: .7rem .9rem;
  font-size: .82rem; margin-bottom: .9rem; border: 1px solid transparent;
}
.peringatan--bahaya {
  background: var(--merah-muda); color: var(--merah);
  border-color: color-mix(in srgb, var(--merah) 28%, transparent);
}
.peringatan ul { margin: 0; padding-left: 1.1rem; }

/* ---- menu akun ---- */

.menu-akun { position: relative; }
.menu-akun > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: .4rem; }
.menu-akun > summary::-webkit-details-marker { display: none; }
.menu-akun > summary::after {
  content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  opacity: .6;
}
.menu-akun__isi {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
  min-width: 250px; background: var(--kertas);
  border: 1px solid var(--garis); border-radius: var(--r-md);
  box-shadow: var(--bayang-3); padding: .45rem;
  animation: turun .16s cubic-bezier(.16, 1, .3, 1);
}
@keyframes turun { from { opacity: 0; transform: translateY(-6px); } }

.menu-akun__nama { font-weight: 640; margin: .35rem .6rem .05rem; font-size: .86rem; }
.menu-akun__peran { color: var(--tinta-3); font-size: .73rem; margin: 0 .6rem .5rem; word-break: break-all; }
.menu-akun__butir {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; text-align: left; font: inherit; font-size: .82rem;
  padding: .48rem .6rem; border: none; background: none;
  border-radius: var(--r-xs); cursor: pointer; color: var(--tinta-2);
  transition: background var(--alih), color var(--alih);
}
.menu-akun__butir:hover { background: var(--latar-2); color: var(--tinta); }
.menu-akun__butir--bahaya { color: var(--merah); }
.menu-akun__pisah { height: 1px; background: var(--garis); margin: .35rem .3rem; }

/* ---- toast ---- */

#toast {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: flex; flex-direction: column; gap: .55rem; pointer-events: none;
}
.toast {
  background: var(--tinta); color: var(--latar);
  padding: .68rem 1rem; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 500;
  box-shadow: var(--bayang-4); max-width: 340px;
  border-left: 3px solid var(--hijau);
  animation: geser-masuk .22s cubic-bezier(.16, 1, .3, 1);
  transition: opacity .5s, transform .5s;
}
html[data-tema="gelap"] .toast { background: var(--kertas-2); color: var(--tinta); border: 1px solid var(--garis); border-left: 3px solid var(--hijau); }
.toast--bahaya { border-left-color: var(--merah); }
.toast--keluar { opacity: 0; transform: translateX(14px); }
@keyframes geser-masuk { from { opacity: 0; transform: translateX(20px); } }

/* ----------------------------- 5. TABEL -------------------------------- */

.tabel-bungkus {
  overflow: auto; border: 1px solid var(--garis);
  border-radius: var(--r-sm); background: var(--kertas);

  /* Bayangan tipis di tepi kanan yang hanya muncul bila masih ada kolom
     tersembunyi — lapisan `local` menutupinya begitu tabel tergeser mentok. */
  background-image:
    linear-gradient(to left, var(--kertas) 40%, transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .13), transparent);
  background-position: right center, right center;
  background-size: 26px 100%, 11px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
html[data-tema="gelap"] .tabel-bungkus {
  background-image:
    linear-gradient(to left, var(--kertas) 40%, transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .45), transparent);
}
.tabel-bungkus--lebar { max-height: 72vh; }

.tabel {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .82rem;
}
.tabel th, .tabel td {
  padding: .52rem .68rem; border-bottom: 1px solid var(--garis);
  text-align: left; vertical-align: middle;
}

.tabel thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--kertas-2);
  font-size: .7rem; font-weight: 660; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--garis-tebal);
  white-space: nowrap;
}
.tabel thead th::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--garis-tebal);
}

.tabel tbody tr { transition: background var(--alih); }
.tabel tbody tr:hover { background: color-mix(in srgb, var(--primer) 4%, transparent); }
.tabel tbody tr:last-child td { border-bottom: none; }

.tabel tfoot td {
  background: var(--kertas-2); font-weight: 600;
  border-top: 1px solid var(--garis-tebal);
}
.tabel tfoot tr:first-child td { border-top: 2px solid var(--garis-tebal); }

.sel-angka {
  text-align: right; font-family: var(--font-angka);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sel-tengah { text-align: center; }
.sel-kode { font-weight: 640; color: var(--tinta-3); white-space: nowrap; font-size: .78rem; }
.sel-satuan { color: var(--tinta-3); font-size: .76rem; white-space: nowrap; }
.sel-catatan { color: var(--tinta-3); font-size: .765rem; }
.sel-catatan-kecil { display: block; color: var(--tinta-4); font-size: .705rem; margin-top: .12rem; line-height: 1.4; }
.sel-sub { display: block; color: var(--tinta-2); font-size: .775rem; }
.sel-nama { min-width: 220px; }
.sel-nama strong { font-weight: 600; }
.sel-total { font-weight: 650; }
.sel-label { font-weight: 500; }
.sel-nilai { min-width: 130px; }
.sel-aksi { white-space: nowrap; }

.nilai-rumus { font-weight: 650; font-variant-numeric: tabular-nums; font-family: var(--font-angka); }

/* Kedipan halus saat sebuah angka berubah nilainya. */
.nilai-berubah { animation: kedip-nilai .55s ease-out; }
@keyframes kedip-nilai {
  0%   { background: color-mix(in srgb, var(--primer) 24%, transparent); border-radius: 4px; }
  100% { background: transparent; border-radius: 4px; }
}

.tabel--jenjang thead th:nth-child(n+3),
.tabel--jenjang tbody td:nth-child(n+3) { min-width: 108px; }
.tabel--jenjang input[type="checkbox"] { width: 17px; height: 17px; transition: transform var(--alih); }
.tabel--jenjang input[type="checkbox"]:hover:not(:disabled) { transform: scale(1.15); }
.tabel--jenjang .inp-teks { min-width: 260px; }

.baris--grup th {
  position: sticky; top: 35px; z-index: 2;
  background: var(--primer-muda); color: var(--primer);
  font-size: .735rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .045em;
  border-bottom: 1px solid var(--primer-garis);
  border-top: 1px solid var(--primer-garis);
}
.baris--total td { background: var(--navy-muda); font-weight: 700; color: var(--navy); }
.baris--subtotal td { background: var(--latar-2); font-weight: 640; }
.baris--sorot td { background: var(--primer-muda); font-weight: 600; }
.baris--sorot td:first-child { box-shadow: inset 3px 0 0 var(--primer); }
.baris--rumus td { background: color-mix(in srgb, var(--tinta-4) 5%, transparent); }
.baris--mati { opacity: .45; }
.baris--mati .sel-total { text-decoration: line-through; }

/* Kolom pertama tetap terlihat saat tabel lebar digeser mendatar. */
.tabel--rincian td:first-child,
.tabel--rincian th:first-child,
.tabel--jenjang td:first-child,
.tabel--jenjang th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--kertas);
  box-shadow: 1px 0 0 var(--garis);
}
.tabel--rincian thead th:first-child,
.tabel--jenjang thead th:first-child { z-index: 4; background: var(--kertas-2); }
.tabel--rincian .baris--grup th:first-child,
.tabel--jenjang .baris--grup th:first-child { z-index: 3; background: var(--primer-muda); }
.tabel--rincian tfoot td:first-child,
.tabel--jenjang tfoot td:first-child { background: var(--kertas-2); }
.tabel--rincian .baris--total td:first-child { background: var(--navy-muda); }
.tabel--rincian .baris--sorot td:first-child,
.tabel--jenjang .baris--sorot td:first-child { background: var(--primer-muda); }
.tabel--jenjang .baris--subtotal td:first-child { background: var(--latar-2); }

.tabel--jenjang td:first-child, .tabel--jenjang th:first-child { min-width: 300px; max-width: 340px; white-space: normal; }
.tabel--jenjang th:nth-child(2), .tabel--jenjang td:nth-child(2) { min-width: 130px; }
.tabel--jenjang tbody td { vertical-align: middle; }

.seksi-param { margin-bottom: 1.4rem; }
.seksi-param:last-child { margin-bottom: 0; }
.seksi-judul {
  font-size: .745rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); margin-bottom: .5rem; font-weight: 700;
  display: flex; align-items: center; gap: .55rem;
}
.seksi-judul::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--garis), transparent);
}

/* ----------------------------- 6. ISIAN -------------------------------- */

/* Sengaja memilih `input` secara luas, bukan input[type="text"]: isian tanpa
   atribut type tidak dicocokkan oleh pemilih atribut dan akan tampil polos.
   Pengecualian dibungkus :where() agar bobot pemilih tetap nol, sehingga aturan
   berbasis kelas seperti .inp-teks tetap dapat menimpanya. */
input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="file"],
                 [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"])),
select, textarea {
  font: inherit; font-size: .82rem; color: var(--tinta);
  padding: .38rem .55rem;
  border: 1px solid var(--garis-tebal);
  border-radius: var(--r-xs);
  background: var(--kertas); width: 100%;
  transition: border-color var(--alih), box-shadow var(--alih), background var(--alih);
}
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--tinta-4); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primer); box-shadow: var(--cincin);
}
input:disabled, select:disabled {
  background: var(--latar-2); color: var(--tinta-3);
  cursor: not-allowed; border-style: dashed;
}

input[type="number"] {
  text-align: right; font-family: var(--font-angka);
  font-variant-numeric: tabular-nums; font-weight: 550;
  background: var(--primer-muda);
  border-color: var(--primer-garis);
}
input[type="number"]:disabled { background: var(--latar-2); border-color: var(--garis); }

select {
  appearance: none;
  padding-right: 1.8rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%),
                    linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"] {
  accent-color: var(--primer); width: 16px; height: 16px;
  cursor: pointer; flex: 0 0 16px;
}
input[type="range"] {
  width: 100%; accent-color: var(--primer); cursor: pointer;
  height: 5px; background: var(--garis); border-radius: var(--r-bulat);
  appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--primer); border: 2px solid var(--kertas);
  box-shadow: var(--bayang-2); cursor: grab;
  transition: transform var(--alih);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]:disabled { opacity: .5; }

.input-bungkus { position: relative; display: flex; align-items: center; }
.input-awalan, .input-akhiran {
  position: absolute; font-size: .72rem; color: var(--tinta-3);
  pointer-events: none; font-weight: 620;
}
.input-awalan { left: .55rem; }
.input-akhiran { right: .55rem; }
.input-bungkus--rp input { padding-left: 2rem; }
.input-bungkus input[data-format="persen"] { padding-right: 1.6rem; }

.inp-sel { max-width: 130px; margin-left: auto; }
.inp-teks { text-align: left; background: var(--kertas); font-weight: 500; }
.inp-teks--kecil { font-size: .745rem; margin-top: .25rem; }
.inp-pilih { margin-top: .3rem; font-size: .73rem; padding: .2rem .35rem; }

/* Sunting di tempat: di dalam tabel isian teks tampil seperti tulisan biasa,
   bingkainya baru muncul saat disentuh atau difokuskan. */
.tabel .inp-teks {
  border-color: transparent;
  background: transparent;
  padding-left: .35rem;
  font-weight: 600;
  color: var(--tinta);
}
.tabel .inp-teks:hover:not(:disabled) { border-color: var(--garis-tebal); background: var(--kertas); }
.tabel .inp-teks:focus { border-color: var(--primer); background: var(--kertas); font-weight: 500; }
.tabel .inp-teks:disabled { border-color: transparent; background: transparent; color: var(--tinta-2); }
.tabel .inp-teks--kecil { font-weight: 500; color: var(--tinta-3); }

/* Kolom keterangan yang dapat disunting: penanda asal angka + catatan bebas. */
.sel-catatan--sunting { display: flex; align-items: center; gap: .4rem; }
.sel-catatan--sunting .inp-ket { flex: 1 1 auto; min-width: 80px; font-size: .765rem; }

.inp-tag {
  flex: 0 0 auto; width: auto;
  font-size: .645rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .045em;
  padding: .14rem 1.15rem .14rem .42rem;
  border-color: transparent; cursor: pointer;
  background-color: var(--latar-2); color: var(--tinta-3);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
}
.inp-tag[data-tag="riil"] { background-color: var(--hijau-muda); color: var(--hijau); }
.inp-tag[data-tag="perkiraan"] { background-color: var(--jingga-muda); color: var(--jingga); }
.inp-tag[data-tag="kebijakan"] { background-color: var(--ungu-muda); color: var(--ungu); }
.inp-tag:hover:not(:disabled) { border-color: var(--garis-tebal); }
.inp-tag:disabled { border-style: solid; cursor: default; }

.sel-angka--rumus { color: var(--tinta); }
.rumus-ket {
  display: block; font-size: .665rem; color: var(--tinta-3);
  font-style: normal; font-family: ui-monospace, Consolas, monospace;
  background: var(--latar-2); padding: .05rem .3rem; border-radius: 3px;
  margin-top: .18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 190px; margin-left: auto;
}

.cari { max-width: 250px; }

.tbl-tombol, .tbl-hapus {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  cursor: pointer; font-size: 12px; line-height: 1; margin-right: 2px;
  border: 1px solid var(--garis-tebal); background: var(--kertas); color: var(--tinta-2);
  transition: background var(--alih), color var(--alih), border-color var(--alih), transform var(--alih);
}
.tbl-tombol:hover { background: var(--primer-muda); color: var(--primer); border-color: var(--primer-garis); }
.tbl-hapus { color: var(--merah); border-color: color-mix(in srgb, var(--merah) 28%, transparent); }
.tbl-hapus:hover { background: var(--merah-muda); }
.tbl-tombol:active, .tbl-hapus:active { transform: scale(.92); }
.tbl-tombol:disabled, .tbl-hapus:disabled { opacity: .35; cursor: not-allowed; }

.sakelar { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.baris-aksi { margin-top: .85rem; display: flex; gap: .5rem; }

.nama-param {
  display: inline-block; font-size: .665rem; color: var(--tinta-3);
  background: var(--latar-2); padding: .05rem .32rem; border-radius: 3px;
  margin-top: .2rem; font-family: ui-monospace, Consolas, monospace;
}
.kode-kecil {
  font-size: .715rem; background: var(--latar-2);
  padding: .12rem .35rem; border-radius: var(--r-xs);
  font-family: ui-monospace, Consolas, monospace;
}

/* ---- penggeser & kalibrasi ---- */

.geser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.3rem; }
.geser label { display: block; font-size: .805rem; font-weight: 600; margin-bottom: .5rem; }
.geser label strong { color: var(--primer); font-variant-numeric: tabular-nums; }
.geser__ket { display: block; font-size: .715rem; color: var(--tinta-3); margin-top: .35rem; }

.geser-hasil {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem; margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px dashed var(--garis-tebal);
}
.geser-hasil > div { display: flex; flex-direction: column; }
.geser-hasil span { font-size: .715rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.geser-hasil strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; font-family: var(--font-angka); letter-spacing: -.02em; }

.kalibrasi { display: grid; grid-template-columns: minmax(230px, 1fr) 2fr; gap: 1.6rem; align-items: start; }
.kalibrasi__isian label { display: block; font-size: .805rem; font-weight: 600; margin-bottom: .4rem; }
.kalibrasi__ket { font-size: .745rem; color: var(--tinta-3); margin-top: .45rem; }
.kalibrasi__hasil { display: flex; flex-direction: column; gap: .5rem; }
.kalibrasi__hasil > div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  border-bottom: 1px dashed var(--garis); padding-bottom: .4rem;
}
.kalibrasi__hasil span { font-size: .805rem; color: var(--tinta-2); }
.kalibrasi__hasil strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-angka); }
.kalibrasi__hasil .sorot strong { color: var(--primer); font-size: 1.1rem; }
.kalibrasi__hasil button { align-self: flex-start; margin-top: .35rem; }

/* ---- skenario ---- */

.ringkas-skenario { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.ringkas-skenario > div {
  display: flex; flex-direction: column; gap: .15rem;
  padding-left: .8rem; border-left: 2px solid var(--garis);
}
.ringkas-skenario span { font-size: .705rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 620; }
.ringkas-skenario strong { font-size: 1.02rem; font-variant-numeric: tabular-nums; font-family: var(--font-angka); }

.banding__pilih { max-width: 440px; margin-bottom: 1.1rem; }
.banding__hasil:empty { display: none; }

/* ---------------------------- 7. LENCANA ------------------------------- */

.tag {
  display: inline-block; font-size: .645rem; font-weight: 700;
  padding: .12rem .42rem; border-radius: var(--r-xs);
  text-transform: uppercase; letter-spacing: .045em; vertical-align: middle;
}
.tag--riil { background: var(--hijau-muda); color: var(--hijau); }
.tag--kira { background: var(--jingga-muda); color: var(--jingga); }
.tag--kebijakan { background: var(--ungu-muda); color: var(--ungu); }
.tag--rumus { background: var(--latar-2); color: var(--tinta-3); }

.pil {
  display: inline-block; min-width: 23px; text-align: center;
  font-size: .675rem; font-weight: 700; padding: .14rem .38rem;
  border-radius: var(--r-xs); font-family: var(--font-angka);
}
.pil--S { background: var(--primer-muda); color: var(--primer); }
.pil--Y { background: color-mix(in srgb, var(--toska) 14%, transparent); color: var(--toska); }
.pil--K { background: var(--navy-muda); color: var(--navy); }
.pil--R { background: var(--hijau-muda); color: var(--hijau); }
.pil--P { background: var(--jingga-muda); color: var(--jingga); }
.pil--mode { background: var(--latar-2); color: var(--tinta-3); font-weight: 600; font-size: .64rem; }

.lencana {
  display: inline-block; font-size: .695rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: var(--r-bulat);
  letter-spacing: .02em; min-width: 66px; text-align: center;
  border: 1px solid transparent;
}
.lencana--ok { background: var(--hijau-muda); color: var(--hijau); border-color: color-mix(in srgb, var(--hijau) 22%, transparent); }
.lencana--tinjau { background: var(--kuning-muda); color: #a16207; border-color: rgba(161, 98, 7, .28); }
.lencana--bahaya { background: var(--merah-muda); color: var(--merah); border-color: color-mix(in srgb, var(--merah) 25%, transparent); }

/* ---------------------------- 8. GERBANG ------------------------------- */

.gerbang {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem;
  background:
    radial-gradient(900px 460px at 10% -10%, rgba(30, 190, 104, .16), transparent 62%),
    radial-gradient(760px 420px at 94% 110%, rgba(22, 51, 123, .16), transparent 62%),
    var(--latar);
}
.gerbang__kotak {
  width: 100%; max-width: 430px;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--bayang-4);
  padding: 2rem 1.9rem;
  animation: masuk-halus .35s cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden;
}
.gerbang__kotak::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--primer-cerah), var(--primer), var(--navy));
}
.gerbang__tema { position: fixed; top: 1.1rem; right: 1.1rem; }
.gerbang__lambang {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: linear-gradient(145deg, var(--primer-terang), var(--primer));
  box-shadow: var(--bayang-2);
}
.gerbang__lambang svg { width: 24px; height: 24px; fill: #fff; }
.gerbang__judul { font-size: 1.42rem; margin-bottom: .35rem; letter-spacing: -.03em; color: var(--navy); }
.gerbang__desk { color: var(--tinta-3); font-size: .84rem; margin-bottom: 1.4rem; }
.gerbang__form { display: flex; flex-direction: column; gap: .85rem; }
.gerbang__form label { display: flex; flex-direction: column; gap: .32rem; font-size: .805rem; font-weight: 600; }
.gerbang__form input { background: var(--kertas); text-align: left; padding: .55rem .7rem; }
.gerbang__bantuan { font-size: .735rem; color: var(--tinta-3); margin: -.25rem 0 .2rem; line-height: 1.6; }
.gerbang__perintah {
  background: var(--latar-2); border: 1px solid var(--garis);
  border-radius: var(--r-sm); padding: .7rem .8rem; margin: .3rem 0 .9rem;
  font-size: .76rem; overflow-x: auto;
}
.gerbang__perintah code { white-space: nowrap; color: var(--primer); font-weight: 600; }
.gerbang__kaki { margin-top: 1.4rem; font-size: .735rem; color: var(--tinta-3); text-align: center; max-width: 540px; }
.gerbang__kaki code {
  background: var(--kertas); padding: .12rem .4rem; border-radius: var(--r-xs);
  border: 1px solid var(--garis); word-break: break-all;
}

/* ----------------------------- 9. DIALOG ------------------------------- */

.dialog-latar {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 13, 24, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 1rem; overflow-y: auto;
  animation: pudar .16s ease-out;
}
@keyframes pudar { from { opacity: 0; } }

.dialog {
  width: 100%; max-width: 470px; background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg); box-shadow: var(--bayang-4);
  padding: 1.5rem; animation: masuk-halus .2s cubic-bezier(.16, 1, .3, 1);
}
.dialog--lebar { max-width: 760px; }
.dialog--sempit { max-width: 410px; }
.dialog__judul { font-size: 1.08rem; margin-bottom: 1rem; letter-spacing: -.02em; }
.dialog__isi { display: flex; flex-direction: column; gap: .8rem; }
.dialog__isi p { font-size: .86rem; color: var(--tinta-2); margin: 0; line-height: 1.6; }
.dialog__aksi { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.3rem; }
.dialog__bantuan { font-size: .755rem; color: var(--tinta-3); margin-top: .6rem; line-height: 1.55; }
.dialog__bantuan code { background: var(--latar-2); padding: .06rem .32rem; border-radius: 4px; }
.dialog__galat {
  background: var(--merah-muda); color: var(--merah);
  border: 1px solid color-mix(in srgb, var(--merah) 28%, transparent);
  border-radius: var(--r-sm); padding: .6rem .8rem; font-size: .8rem; margin-bottom: .9rem;
}

.isian { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; }
.isian small { font-weight: 400; color: var(--tinta-3); }
.isian input, .isian select { background: var(--kertas); text-align: left; font-weight: 400; }
.isian input[type="number"] { text-align: right; font-weight: 550; }
.sakelar-baris { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
.sakelar-baris input { width: auto; }

.form-kisi { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.isian--lebar { grid-column: 1 / -1; }
.isian--kecil { max-width: 160px; }
.kotak-jenjang { display: flex; flex-wrap: wrap; gap: .85rem; font-weight: 400; }
.kotak-jenjang label { display: inline-flex; align-items: center; gap: .35rem; }

body.hanya-baca input:not([type=search]):not([type=range]),
body.hanya-baca select:not(#pilih-skenario) { cursor: not-allowed; }

/* --------------------------- 10. RESPONSIF ----------------------------- */

@media (max-width: 1280px) {
  .atas__identitas { max-width: 22ch; }
}

@media (max-width: 1150px) {
  .grid-2 { grid-template-columns: 1fr; }
  .kalibrasi { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hanya-kecil { display: inline-flex; }
  .atas { padding: 0 .8rem; gap: .6rem; }
  .atas__status { display: none; }
  .atas__skenario select { max-width: 150px; }
  .atas__aksi .btn:not(#tombol-akun) { display: none; }
  .atas__aksi .ikon-tombol { display: inline-flex; }
  .sisi {
    position: fixed; top: var(--tinggi-atas); left: 0; z-index: 35;
    transform: translateX(-100%); transition: transform var(--alih-lambat);
    box-shadow: var(--bayang-4);
  }
  .nav-terbuka .sisi { transform: none; }
  .nav-terbuka .tirai {
    display: block; position: fixed; inset: var(--tinggi-atas) 0 0 0;
    background: rgba(8, 13, 24, .45); z-index: 34;
    backdrop-filter: blur(2px); animation: pudar .2s ease-out;
  }
  .utama { padding: 1.1rem .85rem 2rem; }
  .utama__kepala h1 { font-size: 1.25rem; }
}

@media (max-width: 700px) {
  .panel__kepala { flex-direction: column; align-items: stretch; }
  .panel__aksi .btn { flex: 1 1 auto; }
  .cari { max-width: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .form-kisi { grid-template-columns: 1fr; }
  .isian--kecil { max-width: none; }
  .dialog { padding: 1.15rem; }
}

/* ----------------------------- 11. CETAK ------------------------------- */

@media print {
  :root { --tinggi-atas: 0px; }
  .atas, .sisi, .tirai, .panel__aksi, .panel__lipat, #toast,
  .kaki, .lewati, .dialog-latar, .baris-aksi { display: none !important; }

  body { background: #fff; color: #000; font-size: 11px; }
  .utama { padding: 0; }
  .modul { animation: none; }

  .panel {
    break-inside: avoid; box-shadow: none;
    border-color: #d4d4d8; margin-bottom: .7rem;
  }
  .panel__kepala { background: none; padding: .5rem .6rem; }
  .panel__isi { padding: .6rem; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: .7rem; }

  .tabel-bungkus--lebar { max-height: none; overflow: visible; }
  .tabel thead th, .baris--grup th { position: static; }
  .tabel--rincian td:first-child, .tabel--jenjang td:first-child { position: static; box-shadow: none; }

  .kanvas { height: 230px !important; }
  .kpi { break-inside: avoid; box-shadow: none; border-left-color: #d4d4d8; }
  .kpi-grid { background: none !important; box-shadow: none; border: 1px solid #d4d4d8; }
  .kpi__label, .kpi__catatan { color: #52525b !important; }
  .kpi__nilai { color: #000 !important; }

  input, select { border: none !important; background: transparent !important; padding: 0 !important; }
  .rumus-ket, .nama-param { background: none; }
}