/* ============================================================================
   Nusantika AI: halaman depan (web/situs.html) dan studi kasus (web/use-case.html)

   Dua tema yang sama-sama dirancang. Tanpa pilihan tersimpan, halaman mengikuti
   tema perangkat; tombol di navigasi menyimpan pilihan di localStorage("tema")
   dan memasang data-theme di <html>, sama seperti token nusantika.css. Aksen
   hijau duit, judul Manrope, label Chivo Mono.

   Gerak (Fase 11): hanya opacity dan transform, 300 sampai 700 ms, easing
   keluar halus. Satu gerak masuk per bagian. Gerak berulang hanya di jaringan
   produk (hero) dan peta studi kasus. situs.css tetap dimuat untuk pratinjau
   konsol modul dan menu ponsel.
   ========================================================================== */

/* ---------------------------------------------------------------- token -- */
.d-halaman {
  --d-dasar: #FFFFFF;
  --d-dasar-2: #F6F6F6;
  --d-kartu: #FFFFFF;
  --d-tinta: #131313;
  --d-tinta-2: #4E4E4E;      /* 7,9:1 di atas putih */
  --d-redup: #656565;        /* 5,6:1 di atas putih, 5,2:1 di atas dasar-2 */
  --d-hijau: #127A42;        /* teks hijau di atas putih, 5,4:1 */
  --d-aksen: #127A42;        /* bidang tombol utama */
  --d-aksen-hover: #0F6A38;
  --d-di-aksen: #FFFFFF;
  --d-kuning: #8A5F0E;       /* teks "ditahan", 5,5:1 */
  --d-garis: rgba(10, 10, 10, .12);
  --d-garis-kuat: rgba(10, 10, 10, .28);
  --d-sorot: rgba(18, 122, 66, .07);
  --d-bayang: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --d-r: 14px;               /* satu lengkung untuk semua kartu */
  --d-judul-font: 'Manrope', 'Outfit', system-ui, sans-serif;
  --d-mono-font: 'Chivo Mono', 'JetBrains Mono', ui-monospace, monospace;
  --d-keluar: cubic-bezier(.22, 1, .36, 1);
  /* jaringan produk */
  --j-garis: rgba(10, 10, 10, .13);
  --j-lingkar: rgba(10, 10, 10, .09);
  --j-sinar: rgba(18, 122, 66, .08);
  /* peta: laut dingin pucat, darat kertas hangat */
  --p-laut: #E2EBEE;
  --p-darat: #FAFAF7;
  --p-pantai: rgba(15, 20, 17, .32);
  --p-kisi: rgba(40, 70, 80, .08);
  --p-sungai: #7FA9B9;
  --p-danau: #D2E1E6;
  --p-batas: rgba(15, 20, 17, .4);
  --p-sorot: rgba(18, 122, 66, .10);
  --p-jalur: rgba(18, 122, 66, .42);
  --p-label: #46514B;
  --p-label-air: #3F6573;
}
:root[data-theme="dark"] .d-halaman {
  --d-dasar: #090909;
  --d-dasar-2: #0F0F0F;
  --d-kartu: #131313;
  --d-tinta: #EAEAEA;
  --d-tinta-2: #ADADAD;
  --d-redup: #939393;
  --d-hijau: #4ADE80;
  --d-aksen: #4ADE80;
  --d-aksen-hover: #6BE89A;
  --d-di-aksen: #07090B;
  --d-kuning: #F5B544;
  --d-garis: rgba(255, 255, 255, .11);
  --d-garis-kuat: rgba(255, 255, 255, .3);
  --d-sorot: rgba(74, 222, 128, .07);
  --d-bayang: none;
  --j-garis: rgba(255, 255, 255, .13);
  --j-lingkar: rgba(255, 255, 255, .08);
  --j-sinar: rgba(74, 222, 128, .10);
  --p-laut: #070B0F;
  --p-darat: #12181D;
  --p-pantai: rgba(230, 234, 240, .26);
  --p-kisi: rgba(160, 200, 215, .06);
  --p-sungai: #3E6B7B;
  --p-danau: #0B1418;
  --p-batas: rgba(230, 234, 240, .32);
  --p-sorot: rgba(74, 222, 128, .07);
  --p-jalur: rgba(74, 222, 128, .38);
  --p-label: #A6AEBB;
  --p-label-air: #7FA2AF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-halaman {
    --d-dasar: #090909;
    --d-dasar-2: #0F0F0F;
    --d-kartu: #131313;
    --d-tinta: #EAEAEA;
    --d-tinta-2: #ADADAD;
    --d-redup: #939393;
    --d-hijau: #4ADE80;
    --d-aksen: #4ADE80;
    --d-aksen-hover: #6BE89A;
    --d-di-aksen: #07090B;
    --d-kuning: #F5B544;
    --d-garis: rgba(255, 255, 255, .11);
    --d-garis-kuat: rgba(255, 255, 255, .3);
    --d-sorot: rgba(74, 222, 128, .07);
    --d-bayang: none;
    --j-garis: rgba(255, 255, 255, .13);
    --j-lingkar: rgba(255, 255, 255, .08);
    --j-sinar: rgba(74, 222, 128, .10);
    --p-laut: #070B0F;
    --p-darat: #12181D;
    --p-pantai: rgba(230, 234, 240, .26);
    --p-kisi: rgba(160, 200, 215, .06);
    --p-sungai: #3E6B7B;
    --p-danau: #0B1418;
    --p-batas: rgba(230, 234, 240, .32);
    --p-sorot: rgba(74, 222, 128, .07);
    --p-jalur: rgba(74, 222, 128, .38);
    --p-label: #A6AEBB;
    --p-label-air: #7FA2AF;
  }
}

/* ---------------------------------------------------------------- dasar -- */
body.d-halaman { margin: 0; background: var(--d-dasar); color: var(--d-tinta);
  font: 400 16px/1.6 'Outfit', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.d-halaman *, .d-halaman *::before, .d-halaman *::after { box-sizing: border-box; }
.d-halaman a { color: inherit; text-decoration: none; }
.d-halaman img { display: block; max-width: 100%; }
.d-halaman h1, .d-halaman h2, .d-halaman h3 { font-family: var(--d-judul-font); color: var(--d-tinta); margin: 0;
  font-weight: 700; letter-spacing: -.03em; }
.d-halaman h1 em, .d-halaman h2 em { font-style: normal; color: var(--d-hijau); }
.d-halaman p { margin: 0; }
.d-halaman :focus-visible { outline: 2px solid var(--d-hijau); outline-offset: 3px; }
html { scroll-padding-top: 76px; }
.d-wadah { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.d-mono { font-family: var(--d-mono-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* satu ritme: semua bagian berjarak sama, satu skala judul (h1 hero, h2 bagian, h3 kartu) */
.d-bagian { padding: clamp(72px, 8.5vw, 112px) 0; }
.d-dasar-2 { background: var(--d-dasar-2); }
.d-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.d-kunci { color: var(--d-hijau); }

/* Satu gerak masuk per bagian. Tanpa skrip (kelas d-gerak tidak ada) atau di
   prefers-reduced-motion, semua isi langsung tampil. */
.d-halaman .muncul { opacity: 1; transform: none; }
.d-gerak .d-halaman .muncul { transition: opacity .6s var(--d-keluar), transform .6s var(--d-keluar); }
.d-gerak .d-halaman .muncul:not(.ada) { opacity: 0; transform: translateY(16px); }
/* bagian bergaris waktu: gerak masuknya garis yang tumbuh, isinya diam */
.d-gerak .d-halaman .muncul[data-gerak="garis"]:not(.ada) { opacity: 1; transform: none; }
@media print { .d-gerak .d-halaman .muncul:not(.ada) { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- tombol -- */
.d-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px;
  border-radius: 10px; font: 600 15px/1 var(--d-judul-font); cursor: pointer; border: 0; white-space: nowrap;
  transition: background .3s, box-shadow .3s, color .3s; }
.d-tombol.utama { background: var(--d-aksen); color: var(--d-di-aksen); }
.d-tombol.utama:hover { background: var(--d-aksen-hover); }
.d-tombol.garis { background: transparent; color: var(--d-tinta); box-shadow: inset 0 0 0 1px var(--d-garis-kuat); }
.d-tombol.garis:hover { box-shadow: inset 0 0 0 1px var(--d-tinta); }
.d-tombol.kecil { height: 38px; padding: 0 16px; font-size: 14px; }

/* ------------------------------------------------------------------ nav -- */
.d-nav { position: sticky; top: 0; z-index: 50; height: 64px; border-bottom: 1px solid var(--d-garis);
  background: color-mix(in srgb, var(--d-dasar) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.d-nav-isi { height: 100%; display: flex; align-items: center; gap: 36px; }
.d-merek img { height: 22px; width: auto; }
.d-logo-untuk-gelap { display: none !important; }
:root[data-theme="dark"] .d-logo-untuk-terang { display: none !important; }
:root[data-theme="dark"] .d-logo-untuk-gelap { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-logo-untuk-terang { display: none !important; }
  :root:not([data-theme="light"]) .d-logo-untuk-gelap { display: block !important; }
}
.d-nav-tautan { display: flex; gap: 28px; }
.d-nav-tautan a, .d-nav-masuk { font-size: 15px; font-weight: 500; color: var(--d-tinta-2); transition: color .3s; }
.d-nav-tautan a:hover, .d-nav-masuk:hover, .d-nav-tautan a[aria-current] { color: var(--d-tinta); }
.d-nav-kanan { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.d-ganti-tema, .d-hamburger { width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--d-tinta);
  display: inline-grid; place-items: center; cursor: pointer; }
.d-ganti-tema:hover, .d-hamburger:hover { background: var(--d-sorot); }
.d-ganti-tema svg { width: 20px; height: 20px; }
.d-ganti-tema .ikon-matahari { display: none; }
:root[data-theme="dark"] .d-ganti-tema .ikon-bulan { display: none; }
:root[data-theme="dark"] .d-ganti-tema .ikon-matahari { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-ganti-tema .ikon-bulan { display: none; }
  :root:not([data-theme="light"]) .d-ganti-tema .ikon-matahari { display: block; }
}
.d-hamburger { display: none; }
@media (max-width: 900px) {
  .d-nav-tautan, .d-nav-masuk, .d-nav-kanan .d-tombol { display: none; }
  .d-hamburger { display: inline-grid; }
  .d-nav-kanan { gap: 4px; }
}

/* ------------------------------------------------------------ logo mark -- */
/* Terang: varian tinta (tanpa media query, jadi tidak ikut tema perangkat
   saat pengunjung memilih tema sendiri). Gelap: varian terang. */
.d-halaman .logo-std, .d-halaman .logo-trg { display: none !important; }
.d-halaman .logo-tnt { display: block !important; }
:root[data-theme="dark"] .d-halaman .logo-tnt { display: none !important; }
:root[data-theme="dark"] .d-halaman .logo-trg { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-halaman .logo-tnt { display: none !important; }
  :root:not([data-theme="light"]) .d-halaman .logo-trg { display: block !important; }
}

/* ----------------------------------------------------------------- hero -- */
.d-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 4.5vw, 56px) 0 clamp(48px, 5vw, 64px); }
.d-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 32px 48px; align-items: center; }
.d-hero-isi { display: grid; gap: 22px; justify-items: start; }
.d-hero-atas { color: var(--d-hijau); }
.d-hero h1 { font-size: clamp(38px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -.04em; max-width: 14ch; text-wrap: balance; }
.d-hero h1 em { font-style: normal; color: var(--d-hijau); }
.d-hero-sub { max-width: 46ch; font-size: clamp(17px, 1.35vw, 19px); color: var(--d-tinta-2); line-height: 1.6; text-wrap: pretty; }
.d-hero .d-aksi { margin-top: 4px; }

/* jaringan produk: inti di tengah, sepuluh modul di satu lingkar */
.d-jaringan { margin: 0; display: grid; justify-items: center; gap: 12px; }
.j-panggung { position: relative; width: min(100%, 500px); aspect-ratio: 1; }
@supports (height: 100svh) { .j-panggung { width: min(100%, 500px, max(320px, calc(100svh - 290px))); } }
/* tanpa pendar (Fase 12: datar, tanpa gradasi) */
.j-garis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.j-lingkar { fill: none; stroke: var(--j-lingkar); stroke-width: 1; }
.j-jari { stroke: var(--j-garis); stroke-width: 1; transition: opacity .4s; }
.j-jari.aktif { stroke: var(--d-hijau); stroke-width: 1.6; }
.diam .j-jari.rantai { stroke: var(--d-hijau); opacity: .55; }
.j-data { fill: var(--d-hijau); opacity: 0; transition: opacity .3s; }
.j-data.tampil { opacity: 1; }
.j-inti { position: absolute; left: 50%; top: 50%; z-index: 1; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 4px; background: var(--d-kartu);
  box-shadow: inset 0 0 0 1.5px var(--d-hijau), 0 0 0 10px var(--d-sorot); transition: box-shadow .4s; }
.j-inti .j-logo-inti { width: 34px; height: auto; margin-bottom: 2px; }
.j-inti b { font: 800 15px/1.1 var(--d-judul-font); letter-spacing: -.02em; color: var(--d-tinta); }
.j-inti .d-mono { color: var(--d-hijau); }
.j-inti.aktif, .j-inti:hover { box-shadow: inset 0 0 0 2px var(--d-hijau), 0 0 0 14px var(--d-sorot); }
.j-inti:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--d-hijau), 0 0 0 4px var(--d-dasar), 0 0 0 6px var(--d-hijau); }
.j-simpul { position: absolute; width: 12.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.j-bulat { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--d-kartu);
  box-shadow: inset 0 0 0 1px var(--d-garis); transition: transform .4s var(--d-keluar), box-shadow .4s; }
.j-logo { width: 46%; height: auto; opacity: .45; transition: opacity .4s; }
.j-simpul.hidup .j-bulat { box-shadow: inset 0 0 0 2px var(--d-hijau), 0 0 0 7px var(--d-sorot); }
.j-simpul.hidup .j-logo, .j-simpul.aktif .j-logo, .j-simpul:hover .j-logo, .j-simpul:focus-visible .j-logo { opacity: 1; }
.j-simpul.aktif .j-bulat, .j-simpul:hover .j-bulat, .j-simpul:focus-visible .j-bulat { transform: scale(1.08);
  box-shadow: inset 0 0 0 1.5px var(--d-hijau), 0 0 0 7px var(--d-sorot); }
.j-simpul:focus-visible { outline: none; }
.j-simpul:focus-visible .j-bulat { box-shadow: inset 0 0 0 2px var(--d-hijau), 0 0 0 4px var(--d-dasar), 0 0 0 6px var(--d-hijau); }
.j-nama { position: absolute; white-space: nowrap; font: 700 13px/1.2 var(--d-judul-font); letter-spacing: -.01em; color: var(--d-tinta);
  padding: 3px 7px; border-radius: 6px; background: var(--d-dasar); opacity: 0; transition: opacity .4s; pointer-events: none; }
.label-atas .j-nama { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.label-bawah .j-nama { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.label-kanan .j-nama { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.label-kiri .j-nama { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.j-simpul.hidup .j-nama, .j-simpul.aktif .j-nama, .j-simpul:hover .j-nama, .j-simpul:focus-visible .j-nama { opacity: 1; }
.j-teks { display: grid; gap: 4px; justify-items: center; text-align: center; max-width: 44ch; min-height: 4.6em; align-content: start;
  font-size: 15px; line-height: 1.5; color: var(--d-tinta-2); transition: opacity .3s var(--d-keluar); }
.j-teks.ganti { opacity: 0; }
.j-teks b { color: var(--d-tinta); font-weight: 600; }
.j-teks-atas { color: var(--d-hijau); }
.j-teks-tautan { color: var(--d-hijau); font-weight: 600; white-space: nowrap; }

@media (max-width: 1000px) and (min-width: 901px) { .j-nama { font-size: 12px; } }
@media (max-width: 900px) {
  .d-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .j-panggung { width: min(100%, 420px); }
}
@media (max-width: 560px) {
  .j-panggung { width: min(86vw, 330px); }
  .j-nama { display: none; }
  .j-simpul { width: 14%; }
  .j-inti { width: 30%; gap: 2px; }
  .j-inti .j-logo-inti { width: 24px; }
  .j-inti b { font-size: 12px; }
  .j-inti .d-mono { display: none; }
  .j-simpul.hidup .j-bulat { box-shadow: inset 0 0 0 2px var(--d-hijau), 0 0 0 4px var(--d-sorot); }
  .j-teks { font-size: 14px; }
}

/* ---------------------------------------------------------- kepala bagian -- */
.d-kepala { display: grid; gap: 14px; max-width: 720px; margin-bottom: 44px; }
.d-indeks { color: var(--d-hijau); }
.d-kepala h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; text-wrap: balance; }
.d-kepala p { font-size: 17px; line-height: 1.65; color: var(--d-tinta-2); text-wrap: pretty; }

/* ------------------------------------------------------------ grid modul -- */
.d-modul-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.d-modul-grid a { height: 100%; display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--d-r);
  background: var(--d-kartu); box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis); transition: box-shadow .3s; }
.d-modul-grid a:hover { box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis-kuat); }
.d-modul-grid li.hidup a { box-shadow: var(--d-bayang), inset 0 0 0 2px var(--d-hijau); }
.d-modul-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.d-logo { width: 30px; height: 30px; }
.d-modul-grid b { font: 700 17px/1.2 var(--d-judul-font); letter-spacing: -.02em; }
.d-modul-ringkas { font-size: 14px; line-height: 1.5; color: var(--d-tinta-2); }
@media (max-width: 1100px) { .d-modul-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .d-modul-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-modul-ringkas { display: none; } }

.d-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--d-redup); }
.d-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.d-status.baik { color: var(--d-hijau); }
.d-status.tahan { color: var(--d-kuning); }

/* ------------------------------------------- baris bergaris (tanpa kotak) -- */
/* Dipakai empat agen (02) dan tiga alasan di /use-case: kolom dipisah garis
   rambut, bukan kartu, supaya tidak ada kotak di dalam kotak. */
.d-agen-baris { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--d-garis-kuat); }
.d-agen-baris.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-agen-baris li { display: grid; gap: 10px; align-content: start; padding: 24px 24px 6px 0; }
.d-agen-baris li + li { padding-left: 24px; border-left: 1px solid var(--d-garis); }
.d-agen-baris h3 { font-size: 20px; letter-spacing: -.02em; }
.d-agen-baris p { font-size: 15px; line-height: 1.6; color: var(--d-tinta-2); }
@media (max-width: 1000px) {
  .d-agen-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-agen-baris li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .d-agen-baris li:nth-child(n + 3) { border-top: 1px solid var(--d-garis); margin-top: 18px; }
  .d-agen-baris.tiga { grid-template-columns: 1fr; }
  .d-agen-baris.tiga li { padding-left: 0; border-left: 0; }
  .d-agen-baris.tiga li + li { border-top: 1px solid var(--d-garis); margin-top: 0; }
}
@media (max-width: 560px) {
  .d-agen-baris { grid-template-columns: 1fr; }
  .d-agen-baris li:nth-child(n) { padding: 20px 0 16px; border-left: 0; margin-top: 0; }
  .d-agen-baris li:nth-child(n + 2) { border-top: 1px solid var(--d-garis); }
}

/* ------------------------------------------------------- tab modul -------- */
.d-tab { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.d-tab button { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; border-radius: 10px; border: 0;
  background: var(--d-kartu); box-shadow: inset 0 0 0 1px var(--d-garis); color: var(--d-tinta-2);
  font: 600 14px var(--d-judul-font); cursor: pointer; transition: box-shadow .3s, color .3s, background .3s; }
.d-tab button:hover { color: var(--d-tinta); box-shadow: inset 0 0 0 1px var(--d-garis-kuat); }
.d-tab button.on { background: var(--d-aksen); color: var(--d-di-aksen); box-shadow: none; }
.d-tab button img { width: 22px; height: 22px; }
/* Tombol aktif berlatar aksen: tema terang pakai logo terang, tema gelap pakai logo tinta. */
.d-tab button.on .logo-tnt { display: none !important; }
.d-tab button.on .logo-trg { display: block !important; }
:root[data-theme="dark"] .d-tab button.on .logo-trg { display: none !important; }
:root[data-theme="dark"] .d-tab button.on .logo-tnt { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-tab button.on .logo-trg { display: none !important; }
  :root:not([data-theme="light"]) .d-tab button.on .logo-tnt { display: block !important; }
}

.d-modul-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px 48px; align-items: start; margin-bottom: 32px; }
.d-modul-info-teks { display: grid; gap: 12px; }
.d-modul-info h3 { font-size: clamp(26px, 2.6vw, 32px); }
.d-modul-info h3 span { display: block; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--d-tinta-2); margin-top: 4px; }
.d-modul-info-teks > p { color: var(--d-tinta-2); line-height: 1.6; }
.d-modul-info .d-aksi { margin-top: 8px; }
.d-agen-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px;
  border-top: 1px solid var(--d-garis); }
.d-agen-daftar li { display: grid; gap: 6px; align-content: start; padding: 16px 0; border-bottom: 1px solid var(--d-garis); }
.d-agen-daftar b { font: 600 15px/1.35 var(--d-judul-font); }
.d-agen-daftar p { font-size: 14px; line-height: 1.55; color: var(--d-tinta-2); }
/* Pratinjau konsol dalam bingkai perangkat: lebar dibatasi, tinggi dipotong
   halus di bawah supaya tidak memanjangkan halaman. */
.d-modul-konsol { min-width: 0; max-width: 1060px; margin: 0 auto; position: relative; }
.d-modul-konsol .bingkai { border-radius: var(--d-r); }
@media (max-width: 1000px) { .d-modul-info { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .d-agen-daftar { grid-template-columns: 1fr; }
  .d-agen-daftar p { display: none; }
  .d-modul-konsol { display: none; }
}

/* ------------------------------------------------------------ linimasa -- */
.d-linimasa { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.d-linimasa::before, .d-linimasa::after { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; }
.d-linimasa::before { background: var(--d-garis); }
.d-linimasa::after { background: var(--d-hijau); transform-origin: left center; }
.d-gerak .d-halaman .muncul .d-linimasa::after { transition: transform .7s var(--d-keluar) .1s; }
.d-gerak .d-halaman .muncul:not(.ada) .d-linimasa::after { transform: scaleX(0); }
.d-linimasa li { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 36px; }
.d-linimasa li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--d-dasar-2); box-shadow: inset 0 0 0 2px var(--d-hijau); z-index: 1; }
.d-linimasa li:last-child::before { background: var(--d-hijau); }
.d-linimasa h3 { font-size: 22px; letter-spacing: -.02em; }
.d-linimasa p { font-size: 15px; line-height: 1.6; color: var(--d-tinta-2); }
@media (max-width: 900px) {
  .d-linimasa { grid-template-columns: 1fr; gap: 26px; }
  .d-linimasa::before, .d-linimasa::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .d-linimasa::after { transform-origin: center top; }
  .d-gerak .d-halaman .muncul:not(.ada) .d-linimasa::after { transform: scaleY(0); }
  .d-linimasa li { padding: 0 0 0 36px; }
}

/* ---------------------------------------------------------- studi kasus -- */
.d-kasus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.d-kasus-kartu { display: grid; grid-template-rows: auto 1fr; border-radius: var(--d-r); overflow: hidden; background: var(--d-kartu);
  box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis); transition: box-shadow .3s; isolation: isolate; }
.d-kasus-kartu:hover { box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis-kuat); }
.d-kasus-peta { aspect-ratio: 2 / 1; border-bottom: 1px solid var(--d-garis); z-index: -1; }
.d-kasus-isi { display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; }
.d-kasus-kartu h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.d-kasus-kartu p { color: var(--d-tinta-2); font-size: 15px; line-height: 1.55; }
.d-tautan-panah { color: var(--d-hijau); font-weight: 600; font-size: 15px; }
@media (max-width: 800px) { .d-kasus { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ peta -- */
/* Peta dasar (SVG dari /assets/peta/) hanya berisi bentuk; semua warna di sini.
   --u = satuan peta per piksel layar, diisi peta.js, supaya garis dan huruf
   tetap berukuran sama di layar selebar apa pun. */
.p-wadah { position: relative; overflow: hidden; background: var(--p-laut); }
.p-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; --u: 1; }
.p-laut { fill: var(--p-laut); }
.p-kisi { fill: none; stroke: var(--p-kisi); stroke-width: calc(var(--u) * 1px); }
.p-darat { fill: var(--p-darat); stroke: var(--p-pantai); stroke-width: calc(var(--u) * 1px); stroke-linejoin: round; }
.p-sorot { fill: var(--p-sorot); }
.p-danau { fill: var(--p-danau); stroke: var(--p-sungai); stroke-width: calc(var(--u) * .8px); }
.p-sungai { fill: none; stroke: var(--p-sungai); stroke-width: calc(var(--u) * 1.6px); stroke-linecap: round; stroke-linejoin: round; }
.p-batas { fill: none; stroke: var(--p-batas); stroke-width: calc(var(--u) * 1px); stroke-dasharray: calc(var(--u) * 5px) calc(var(--u) * 4px); }
.p-batas-kab { fill: none; stroke: var(--d-hijau); stroke-width: calc(var(--u) * 1.4px); stroke-dasharray: calc(var(--u) * 6px) calc(var(--u) * 4px); opacity: .8; }
.p-kota { fill: var(--p-label); }
.p-tempat-lapis text { font-family: var(--d-mono-font); font-size: calc(var(--u) * 12px); letter-spacing: .04em;
  paint-order: stroke; stroke: var(--p-darat); stroke-width: calc(var(--u) * 3px); stroke-linejoin: round; }
.p-nama-kota { fill: var(--p-label); }
.p-nama-air, .p-nama-laut { fill: var(--p-label-air); stroke: var(--p-laut) !important; font-style: italic; }
.p-nama-laut { letter-spacing: .22em !important; text-transform: uppercase; }
.p-nama-air { stroke: var(--p-darat) !important; }
.p-nama-wilayah { fill: var(--p-label); letter-spacing: .2em !important; text-transform: uppercase; opacity: .85; }
.p-jalur { fill: none; stroke: var(--p-jalur); stroke-width: calc(var(--u) * 1.3px); stroke-linecap: round;
  stroke-dasharray: calc(var(--u) * 2px) calc(var(--u) * 5px); transition: opacity .3s; }
.p-jalur.lapor, .p-jalur.aktif { stroke: var(--d-hijau); stroke-dasharray: none; }
.p-lapis.ada-pilihan .p-jalur:not(.aktif) { opacity: .3; }
.p-lapis.ada-pilihan .p-titik:not(.aktif) { opacity: .55; }
.p-titik { cursor: pointer; transition: opacity .3s; }
.p-titik:focus { outline: none; }
.p-tanda { transition: transform .3s var(--d-keluar); }
.p-titik.aktif .p-tanda, .p-titik:hover .p-tanda { transform: scale(1.18); }
.p-tanda-latar { fill: var(--d-kartu); stroke: var(--d-hijau); stroke-width: 2; }
.p-titik:focus-visible .p-tanda-latar { stroke-width: 3.5; }
.p-titik.luar .p-tanda-latar { stroke-dasharray: 3 3; }
.p-tanda-isi { fill: var(--d-hijau); }
.p-panah { fill: none; stroke: var(--d-hijau); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-denyut { fill: none; stroke: var(--d-hijau); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.p-data { fill: var(--d-hijau); opacity: 0; transition: opacity .3s; }
.p-data.jalan { opacity: 1; }
.p-nama-titik { font-family: var(--d-judul-font); font-weight: 700; font-size: calc(var(--u) * 13px); letter-spacing: -.01em; fill: var(--d-tinta);
  paint-order: stroke; stroke: var(--p-darat); stroke-width: calc(var(--u) * 4px); stroke-linejoin: round; }
.p-kantor-kotak { fill: var(--d-tinta); }
.p-kantor-ikon { fill: none; stroke: var(--d-dasar); stroke-width: 1.6; stroke-linejoin: round; }
.p-kantor-nama { font-family: var(--d-judul-font); font-weight: 700; font-size: 13px; fill: var(--d-tinta);
  paint-order: stroke; stroke: var(--p-laut); stroke-width: 4px; stroke-linejoin: round; }
.p-tip { position: absolute; left: 0; top: 0; z-index: 2; width: max-content; max-width: min(270px, calc(100% - 16px)); padding: 10px 13px;
  border-radius: 10px; background: var(--d-kartu); box-shadow: 0 10px 28px rgba(0, 0, 0, .14), inset 0 0 0 1px var(--d-garis);
  display: grid; gap: 3px; font-size: 13px; line-height: 1.4; color: var(--d-tinta-2); pointer-events: none; }
.p-tip[hidden] { display: none; }
.p-tip b { font: 700 14px/1.3 var(--d-judul-font); color: var(--d-tinta); }
.p-tip-saldo { font-family: var(--d-mono-font); font-size: 12px; color: var(--d-hijau); }
.p-gagal { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--d-tinta-2); font-size: 15px; }
.p-legenda-tanda { flex: none; overflow: visible; }

/* ------------------------------------------------------- daftar bergaris -- */
.d-daftar-garis { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--d-garis); }
.d-daftar-garis li { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 2fr) minmax(130px, auto); gap: 8px 28px;
  align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--d-garis); }
.d-label { color: var(--d-tinta); }
.d-daftar-garis p { color: var(--d-tinta-2); line-height: 1.6; }
.d-daftar-garis p b { color: var(--d-tinta); font-weight: 600; }
.d-daftar-garis .d-status { justify-self: end; }
.d-catatan-kaki { margin-top: 20px; color: var(--d-redup); line-height: 1.8; }
@media (max-width: 760px) {
  .d-daftar-garis li { grid-template-columns: 1fr auto; }
  .d-daftar-garis li p { grid-column: 1 / -1; grid-row: 2; }
}

/* ----------------------------------------------------------------- harga -- */
.d-paket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.d-kartu-paket { padding: 28px 26px; display: grid; gap: 14px; align-content: start; border-radius: var(--d-r); background: var(--d-kartu);
  box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis); }
.d-kartu-paket.unggul { box-shadow: var(--d-bayang), inset 0 0 0 2px var(--d-hijau); }
.d-paket-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-paket-kepala h3 { font-size: 24px; }
.d-pil { font: 500 12px/1 var(--d-mono-font); letter-spacing: .06em; text-transform: uppercase; color: var(--d-hijau);
  padding: 6px 9px; border-radius: 6px; background: var(--d-sorot); }
.d-paket-ringkas { color: var(--d-tinta-2); font-size: 15px; line-height: 1.55; min-height: 3.1em; }
.d-kartu-paket .d-tombol { width: 100%; }
.d-kartu-paket ul { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--d-garis); display: grid; gap: 10px; }
.d-kartu-paket li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--d-tinta-2); }
.d-kartu-paket li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--d-hijau); margin-top: 8px; flex: none; }
.d-paket-pisah { color: var(--d-redup); margin-top: 4px; }
.d-tambahan { margin-top: 14px; }
.d-tambahan .kartu-tambahan { border-radius: var(--d-r); padding: 22px 26px; display: grid; gap: 8px; background: var(--d-kartu);
  box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis); }
.d-tambahan .atas { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.d-tambahan .label { font: 500 12px/1 var(--d-mono-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d-hijau);
  border: 0; height: auto; padding: 0; }
.d-tambahan .harga { font: 600 14px/1.3 'Outfit', sans-serif; color: var(--d-tinta); }
.d-tambahan h3 { font-size: 20px; }
.d-tambahan p { color: var(--d-tinta-2); font-size: 15px; }
.d-tambahan .kecil { font-size: 13.5px; color: var(--d-redup); }
@media (max-width: 960px) { .d-paket { grid-template-columns: 1fr; max-width: 560px; } }

/* ----------------------------------------------------------------- tanya -- */
.d-tanya { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px 60px; align-items: start; }
.d-tanya-daftar details { border-top: 1px solid var(--d-garis); }
.d-tanya-daftar details:last-child { border-bottom: 1px solid var(--d-garis); }
.d-tanya-daftar summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px;
  font: 600 17px/1.4 var(--d-judul-font); letter-spacing: -.01em; }
.d-tanya-daftar summary::-webkit-details-marker { display: none; }
.d-tanya-daftar summary::after { content: "+"; font: 400 22px/1 'Outfit', sans-serif; color: var(--d-hijau); transition: transform .3s var(--d-keluar); }
.d-tanya-daftar details[open] summary::after { transform: rotate(45deg); }
.d-tanya-daftar details p { padding: 0 36px 22px 0; color: var(--d-tinta-2); line-height: 1.65; }
@media (max-width: 900px) { .d-tanya { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- penutup & kaki -- */
.d-penutup { padding: clamp(72px, 8.5vw, 112px) 0; }
.d-penutup-isi { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
  width: calc(100% - 56px); max-width: 1124px; padding: 36px 40px; border-radius: 20px; background: var(--d-sorot); box-shadow: inset 0 0 0 1px var(--d-garis); }
.d-penutup h2 { font-size: clamp(26px, 3vw, 38px); max-width: 20ch; }
.d-penutup .d-mono { color: var(--d-redup); margin-top: 12px; }
.d-penutup .d-aksi { margin-top: 0; }
.d-kaki { border-top: 1px solid var(--d-garis); }
.d-kaki-isi { display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; padding-block: 28px; }
.d-kaki-tautan { display: flex; gap: 22px; flex-wrap: wrap; }
.d-kaki-tautan a { font-size: 14.5px; color: var(--d-tinta-2); }
.d-kaki-tautan a:hover { color: var(--d-tinta); }
.d-kaki .d-mono { color: var(--d-redup); }
#modul-daftar a:hover { color: var(--d-hijau); }

/* ----------------------------------------------------------- dialog demo -- */
.d-dialog { border: 0; border-radius: 16px; padding: 30px; width: min(520px, calc(100vw - 32px)); background: var(--d-kartu);
  color: var(--d-tinta); box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--d-garis); }
.d-dialog::backdrop { background: rgba(7, 9, 11, .55); backdrop-filter: blur(3px); }
.d-dialog h3 { font-size: 24px; margin: 10px 0 8px; }
.d-dialog > p { color: var(--d-tinta-2); font-size: 15px; }
.d-dialog-tutup { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--d-tinta-2); font-size: 24px; cursor: pointer; }
.d-dialog-tutup:hover { background: var(--d-sorot); color: var(--d-tinta); }
.d-form-demo { display: grid; gap: 10px; margin-top: 18px; }
.d-form-demo input { height: 48px; border: 0; border-radius: 10px; padding: 0 14px; font: 15px 'Outfit', sans-serif;
  color: var(--d-tinta); background: var(--d-dasar-2); box-shadow: inset 0 0 0 1px var(--d-garis); }
.d-form-demo input::placeholder { color: var(--d-redup); }
.d-form-demo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--d-hijau); }
.d-pesan { font-size: 14px; min-height: 20px; color: var(--d-tinta-2); }
.d-pesan.ok { color: var(--d-hijau); }
.d-pesan.galat { color: var(--n-kritis-teks); }

/* ------------------------------------------------------------ /use-case -- */
.uc-kepala { padding: clamp(48px, 6vw, 80px) 0 clamp(28px, 3vw, 40px); }
.uc-kepala .d-kepala { margin-bottom: 28px; max-width: 760px; }
.uc-kepala h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.uc-pilih { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--d-dasar-2); box-shadow: inset 0 0 0 1px var(--d-garis); }
.uc-pilih button { height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--d-tinta-2);
  font: 600 14px var(--d-judul-font); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.uc-pilih button:hover { color: var(--d-tinta); }
.uc-pilih button[aria-selected="true"] { background: var(--d-kartu); color: var(--d-tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--d-garis); }
.uc-kasus { padding: 0 0 clamp(72px, 8.5vw, 112px); }
.uc-tata { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.uc-peta-kartu { display: grid; border-radius: var(--d-r); overflow: hidden; background: var(--d-kartu); box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis); }
.uc-peta { aspect-ratio: 4 / 3.2; }
.uc-peta.tinggi { aspect-ratio: 4 / 3.6; }
.uc-bawah-peta { display: grid; gap: 10px; padding: 14px 18px 16px; border-top: 1px solid var(--d-garis); }
.uc-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--d-tinta-2); }
.uc-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.uc-kantor-ikon { width: 16px; height: 16px; border-radius: 4px; background: var(--d-tinta); flex: none; }
.uc-catatan { font-size: 13px; line-height: 1.55; color: var(--d-redup); }
.uc-atribusi { color: var(--d-redup); letter-spacing: .03em; text-transform: none; line-height: 1.5; }
.uc-sisi { display: grid; gap: 14px; align-content: start; }
.uc-sisi h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; text-wrap: balance; }
.uc-sisi > p { color: var(--d-tinta-2); line-height: 1.65; }
.uc-daftar { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--d-garis); }
.uc-daftar button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; text-align: left;
  padding: 14px 8px 14px 4px; border: 0; border-bottom: 1px solid var(--d-garis); background: transparent; color: inherit; font: inherit;
  cursor: pointer; transition: background .3s; }
.uc-daftar button:hover, .uc-daftar button.aktif { background: var(--d-sorot); }
.uc-daftar .p-legenda-tanda { margin-top: 2px; }
.uc-daftar b { font: 700 15px/1.35 var(--d-judul-font); color: var(--d-tinta); }
.uc-daftar .uc-ket { grid-column: 2; font-size: 14px; color: var(--d-tinta-2); line-height: 1.45; }
.uc-daftar .uc-um { grid-column: 2; font-size: 14px; color: var(--d-tinta-2); line-height: 1.45; }
.uc-daftar .uc-saldo { grid-column: 3; grid-row: 1; font-family: var(--d-mono-font); font-size: 12px; color: var(--d-hijau); white-space: nowrap; padding-top: 2px; }
@media (min-width: 1001px) { .uc-peta-kartu { position: sticky; top: 88px; } }
@media (max-width: 1000px) { .uc-tata { grid-template-columns: 1fr; } .uc-peta, .uc-peta.tinggi { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) {
  .uc-peta, .uc-peta.tinggi { aspect-ratio: 1 / 1.05; }
  .uc-pilih { display: flex; }
  .uc-pilih button { flex: 1; padding: 0 10px; }
}

@media (max-width: 560px) {
  .d-wadah { padding: 0 20px; }
  .d-bagian { padding: 64px 0; }
  .d-kepala { margin-bottom: 32px; }
  .d-aksi .d-tombol { flex: 1 1 100%; }
  .d-penutup-isi { width: calc(100% - 40px); padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .d-halaman *, .d-halaman *::before, .d-halaman *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ------------------------------------------------------ gerak premium (Fase 12) -- */
/* Hanya aktif bila depan-gerak.js memasang .sm-on (tidak di prefers-reduced-motion).
   Wadah .muncul tidak lagi memudar utuh; isinya yang bergerak: judul per kata,
   pengantar naik, grid bergiliran. */
.sm-on .d-halaman .muncul:not(.ada) { opacity: 1; transform: none; }
.sm-on :is(.d-hero h1, .d-kepala h2, .d-penutup h2, .uc-kepala h1, .uc-sisi h2):not(.sm-belah) { opacity: 0; }
.sm-on .sm-belah sm-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.sm-on .sm-belah sm-wi { display: inline-block; transform: translate3d(0, 110%, 0); opacity: 0;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; transition-delay: calc(var(--i, 0) * 45ms); }
.sm-on .sm-belah.sm-go sm-wi { transform: none; opacity: 1; }
.sm-on :is(.d-hero-atas, .d-hero-sub, .d-hero .d-aksi, .d-kepala > p, .d-kepala > .d-indeks, .d-penutup .d-mono, .d-penutup .d-aksi, .uc-pilih, .d-tab, .uc-sisi > p, .uc-sisi > .d-kunci) { opacity: 0; translate: 0 18px; transition: opacity .8s ease .15s, translate 1s cubic-bezier(.16, 1, .3, 1) .15s; }
.sm-on :is(.d-hero-atas, .d-hero-sub, .d-hero .d-aksi, .d-kepala > p, .d-kepala > .d-indeks, .d-penutup .d-mono, .d-penutup .d-aksi, .uc-pilih, .d-tab, .uc-sisi > p, .uc-sisi > .d-kunci).sm-go { opacity: 1; translate: 0 0; }
.sm-on .d-hero-sub { transition-delay: .45s; }
.sm-on .d-hero .d-aksi { transition-delay: .6s; }
.sm-on .d-hero .d-hero-atas { transition-delay: 0s; }
.sm-on :is(.v-bab, .d-modul-grid, .d-agen-baris, .d-kasus, .d-paket, .d-daftar-garis, .d-tanya-daftar, .d-linimasa, .uc-daftar, .uc-legenda) > * { opacity: 0; translate: 0 26px; scale: .985;
  transition: opacity .7s ease, translate .9s cubic-bezier(.16, 1, .3, 1), scale .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms + .1s); }
.sm-on :is(.v-bab, .d-modul-grid, .d-agen-baris, .d-kasus, .d-paket, .d-daftar-garis, .d-tanya-daftar, .d-linimasa, .uc-daftar, .uc-legenda).sm-go > * { opacity: 1; translate: 0 0; scale: 1; }
/* simpul jaringan produk muncul bergiliran sekali saat halaman dibuka */
@keyframes sm-muncul { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes sm-pudar { from { opacity: 0; } to { opacity: 1; } }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul { animation: sm-muncul .75s cubic-bezier(.16, 1, .3, 1) backwards; }
.sm-on .j-panggung:not(.sm-selesai) .j-inti { animation: sm-pudar .6s ease backwards; }
.sm-on .j-panggung:not(.sm-selesai) .j-garis { animation: sm-pudar 1s ease .2s backwards; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(1) { animation-delay: .25s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(2) { animation-delay: .31s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(3) { animation-delay: .37s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(4) { animation-delay: .43s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(5) { animation-delay: .49s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(6) { animation-delay: .55s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(7) { animation-delay: .61s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(8) { animation-delay: .67s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(9) { animation-delay: .73s; }
.sm-on .j-panggung:not(.sm-selesai) .j-simpul:nth-child(10) { animation-delay: .79s; }
/* garis kemajuan gulir dan navigasi yang menepi */
.sm-kemajuan { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; background: var(--d-hijau);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.sm-on .d-nav { transition: translate .45s cubic-bezier(.16, 1, .3, 1); }
.sm-on .d-nav.sm-sembunyi { translate: 0 -100%; }
/* tombol magnetik dan kartu miring */
.sm-on .sm-magnet { translate: var(--mx, 0) var(--my, 0); transition: translate .5s cubic-bezier(.16, 1, .3, 1), background .3s, box-shadow .3s, color .3s; }
.sm-on .sm-magnet.sm-ikut { transition: translate .12s linear, background .3s, box-shadow .3s, color .3s; }
.sm-on .d-modul-grid a, .sm-on .d-kasus-kartu, .sm-on .d-kartu-paket { transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.sm-on .sm-miring { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-3px);
  transition: transform .18s ease-out, box-shadow .3s; }
/* ganti tema: lingkaran membuka (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* ------------------------------------------------ pemutar alur ala Remotion (Fase 13) -- */
/* depan-video.js menggambar setiap frame; di sini hanya tata letak dan warna.
   Kanvas berukuran tetap (1280x720, .tegak 720x720) diskalakan lewat --s. */
.v-pemutar { border-radius: var(--d-r); overflow: hidden; background: var(--d-kartu); box-shadow: var(--d-bayang), inset 0 0 0 1px var(--d-garis); }
.v-layar { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--d-dasar-2); cursor: pointer; user-select: none; }
.v-layar.tegak { aspect-ratio: 1; }
.v-kanvas { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.v-kanvas.tegak { width: 720px; height: 720px; }
.v-adegan { position: absolute; inset: 0; display: none; }
.v-adegan.aktif { display: block; }
.v-adegan [data-k] { will-change: transform, opacity; }
.v-teks { position: absolute; left: 90px; top: 0; bottom: 0; width: 500px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.v-label { font-size: 15px; }
.d-halaman .v-judul { font: 800 66px/1.06 var(--d-judul-font); letter-spacing: -.045em; text-wrap: balance; }
.v-kata { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.v-kata > span { display: inline-block; }
.v-visual { position: absolute; right: 90px; top: 80px; width: 560px; height: 560px; }
.v-visual > * { position: absolute; }
.tegak .v-teks { top: 40px; bottom: auto; left: 56px; width: 608px; gap: 10px; justify-content: flex-start; }
.d-halaman .tegak .v-judul { font-size: 46px; }
.tegak .v-visual { right: auto; left: 80px; top: 168px; transform: scale(.93); transform-origin: 50% 0; }

.v-kotak { background: var(--d-kartu); border-radius: 18px; box-shadow: var(--d-bayang), inset 0 0 0 1.5px var(--d-garis); }
.v-redup { color: var(--d-redup); }
.v-hijau { color: var(--d-hijau); }
.v-kanvas svg { width: 18px; height: 18px; flex: none; }

/* 1 · HP */
.v-hp { left: 120px; top: 0; width: 300px; height: 560px; border-radius: 36px; padding: 30px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.v-hp-judul { font: 700 20px/1.25 var(--d-judul-font); letter-spacing: -.02em; margin-bottom: 10px; }
.v-baris { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--d-garis); font-size: 16px; color: var(--d-tinta-2); }
.v-baris span:last-child { color: var(--d-tinta); font-variant-numeric: tabular-nums; }
.v-total { display: grid; gap: 4px; margin-top: 14px; }
.v-total b { font: 800 34px/1.1 var(--d-judul-font); letter-spacing: -.03em; color: var(--d-hijau); font-variant-numeric: tabular-nums; }
.v-tombol { margin-top: auto; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--d-aksen); color: var(--d-di-aksen); font: 700 18px var(--d-judul-font); }
.v-tombol span { display: inline-flex; align-items: center; gap: 8px; }
.v-tombol.selesai { background: var(--d-sorot); color: var(--d-hijau); box-shadow: inset 0 0 0 1.5px var(--d-hijau); }
.v-cip { left: 340px; top: 250px; width: 210px; padding: 14px 16px; border-radius: 12px; background: var(--d-tinta); color: var(--d-dasar);
  font: 600 16px/1.35 var(--d-judul-font); }

/* 2 · chat */
.v-chat { left: 20px; top: 10px; width: 520px; height: 540px; overflow: hidden; }
.v-chat > * { position: absolute; }
.v-chat-kepala { left: 0; right: 0; top: 0; height: 72px; padding: 0 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--d-garis); }
.v-chat-kepala div { display: grid; }
.v-chat-kepala b { font: 700 17px var(--d-judul-font); }
.v-chat-kepala .d-mono { font-size: 11px; }
.v-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--d-aksen); color: var(--d-di-aksen); font: 800 18px var(--d-judul-font); }
.v-gelembung { border-radius: 16px; font-size: 17px; line-height: 1.4; }
.v-gelembung.kiri { left: 20px; background: var(--d-dasar-2); color: var(--d-tinta); }
.v-gelembung.kanan { right: 20px; background: var(--d-aksen); color: var(--d-di-aksen); }
.v-gelembung[data-k="g1"] { top: 92px; width: 380px; padding: 16px 18px; display: grid; gap: 6px; }
.v-gelembung[data-k="g1"] b { font: 800 30px/1.1 var(--d-judul-font); letter-spacing: -.03em; }
.v-gelembung[data-k="g1"] .d-mono { font-size: 12px; }
.v-pilihan { display: flex; gap: 10px; margin-top: 8px; }
.v-pilihan span { height: 42px; padding: 0 22px; border-radius: 10px; display: inline-flex; align-items: center; font: 700 16px var(--d-judul-font); }
.v-btn-hijau { background: var(--d-aksen); color: var(--d-di-aksen); }
.v-btn-hijau.ditekan { box-shadow: 0 0 0 4px var(--d-sorot), 0 0 0 6px var(--d-hijau); }
.v-btn-garis { box-shadow: inset 0 0 0 1.5px var(--d-garis-kuat); color: var(--d-tinta-2); }
.v-gelembung[data-k="g2"] { top: 300px; padding: 12px 18px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.v-gelembung[data-k="g3"] { top: 368px; width: 400px; padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.v-titik { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--d-hijau); }
.v-kanvas .v-kursor { left: 0; top: 0; width: 30px; height: 30px; color: var(--d-tinta); z-index: 2; }

/* 3 · slip */
.v-slip { left: 30px; top: 30px; width: 420px; height: 270px; padding: 26px; display: grid; gap: 14px; align-content: start; overflow: hidden; }
.v-slip-baris { display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: var(--d-tinta-2); padding-top: 10px; border-top: 1px solid var(--d-garis); }
.v-slip-baris b { font: 700 19px var(--d-judul-font); color: var(--d-tinta); padding: 3px 8px; margin-right: -8px; border-radius: 7px;
  transition: background .25s, color .25s; font-variant-numeric: tabular-nums; }
.v-slip-baris b.sorot { background: var(--d-sorot); color: var(--d-hijau); }
.v-pindai { position: absolute; left: 0; right: 0; top: 40px; height: 3px; background: var(--d-hijau); }
.v-cek { left: 150px; top: 330px; width: 400px; margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.v-cek li { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 12px; background: var(--d-kartu);
  box-shadow: inset 0 0 0 1px var(--d-garis); font: 600 17px var(--d-judul-font); }
.v-cek i, .v-medan.aman i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--d-aksen); color: var(--d-di-aksen); }
.v-kanvas .v-cek i svg, .v-kanvas .v-medan.aman i svg { width: 15px; height: 15px; }
.v-pil { left: 380px; top: 0; padding: 11px 20px; border-radius: 999px; background: var(--d-aksen); color: var(--d-di-aksen);
  font: 600 15px var(--d-mono-font); letter-spacing: .08em; text-transform: uppercase; }

/* 4 · nota */
.v-nota { left: 20px; top: 40px; width: 250px; height: 470px; padding: 26px 22px; border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px; font: 14px/1.4 var(--d-mono-font); color: var(--d-tinta-2); }
.v-nota > div:not(.v-garis-pindai) { display: flex; justify-content: space-between; }
.v-nota-toko { font: 700 17px var(--d-mono-font); color: var(--d-tinta); }
.v-nota hr { width: 100%; border: 0; border-top: 1.5px dashed var(--d-garis-kuat); margin: 10px 0; }
.v-nota-total { font-weight: 700; color: var(--d-tinta); font-size: 17px; }
.v-nota-kaki { margin-top: auto; font-size: 12px; color: var(--d-redup); }
.v-garis-pindai { position: absolute; left: 0; right: 0; top: 30px; height: 3px; background: var(--d-hijau); box-shadow: 0 0 0 7px var(--d-sorot); }
.v-ekstrak { left: 300px; top: 70px; width: 260px; display: grid; gap: 14px; }
.v-medan { padding: 14px 18px; border-radius: 12px; background: var(--d-kartu); box-shadow: inset 0 0 0 1px var(--d-garis); display: grid; gap: 4px; }
.v-medan .d-mono { font-size: 11px; }
.v-medan b { font: 700 19px var(--d-judul-font); letter-spacing: -.01em; }
.v-medan.aman { display: flex; align-items: center; gap: 12px; box-shadow: inset 0 0 0 1.5px var(--d-hijau); background: var(--d-sorot); }
.v-medan.aman b { font-size: 17px; color: var(--d-hijau); }

/* 5 · jurnal */
.v-jurnal { left: 0; top: 40px; width: 560px; padding: 8px 24px; }
.v-jr { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--d-garis); font-size: 17px; }
.v-jr span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; color: var(--d-tinta); font-weight: 600; }
.v-jr.kepala { font-size: 11px; }
.v-jr.kepala span, .v-jr.kepala span:not(:first-child) { color: var(--d-redup); font-weight: 400; }
.v-jr.jumlah { border-bottom: 0; }
.v-jr.jumlah span, .v-jr.jumlah span:not(:first-child) { color: var(--d-hijau); }
.v-jr.jumlah .d-mono { font-size: 12px; align-self: center; }
.v-cap { left: 290px; top: 370px; padding: 6px 26px; border: 5px solid var(--d-hijau); border-radius: 12px; color: var(--d-hijau);
  font: 800 56px/1.1 var(--d-judul-font); letter-spacing: .08em; }
.v-catat { left: 0; top: 386px; width: 260px; font-size: 13px; line-height: 1.7; color: var(--d-redup); }

/* kendali pemutar */
.v-kendali { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--d-garis); }
.v-main { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  background: var(--d-aksen); color: var(--d-di-aksen); }
.v-main:hover { background: var(--d-aksen-hover); }
.v-main svg { width: 18px; height: 18px; }
.v-main .ikon-jeda, .v-pemutar.main .v-main .ikon-putar { display: none; }
.v-pemutar.main .v-main .ikon-jeda { display: block; }
.v-trek { position: relative; flex: 1; height: 32px; cursor: pointer; touch-action: none; border-radius: 6px; }
.v-trek::before, .v-isi, .v-segmen { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.v-trek::before { background: var(--d-garis); }
.v-isi { background: var(--d-hijau); transform-origin: 0 50%; transform: scaleX(0); }
.v-segmen { display: grid; grid-template-columns: repeat(5, 1fr); }
.v-segmen span + span { border-left: 3px solid var(--d-kartu); }
.v-kepala-trek { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--d-kartu); box-shadow: inset 0 0 0 2.5px var(--d-hijau), 0 1px 4px rgba(0, 0, 0, .2); transition: scale .2s; }
.v-pemutar.menggeser .v-kepala-trek, .v-trek:hover .v-kepala-trek { scale: 1.2; }
.v-waktu, .v-durasi, .v-frame { flex: none; color: var(--d-redup); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-durasi { margin-left: -10px; }
.v-frame { min-width: 15ch; text-align: right; }

/* bab: lima adegan sebagai daftar isi yang bisa diklik */
.v-bab { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
.v-bab button { position: relative; width: 100%; height: 100%; display: grid; gap: 6px; align-content: start; padding: 18px 0 4px; text-align: left;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.v-bab button::before, .v-bab button::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.v-bab button::before { background: var(--d-garis); }
.v-bab button::after { background: var(--d-hijau); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.v-bab .d-mono { color: var(--d-redup); transition: color .3s; }
.v-bab b { font: 700 18px/1.25 var(--d-judul-font); letter-spacing: -.02em; color: var(--d-tinta-2); transition: color .3s; }
.v-bab p { font-size: 14.5px; line-height: 1.55; color: var(--d-redup); }
.v-bab button.aktif .d-mono { color: var(--d-hijau); }
.v-bab button.aktif b, .v-bab button:hover b { color: var(--d-tinta); }
.v-bab button.aktif p { color: var(--d-tinta-2); }
@media (max-width: 760px) {
  .v-frame, .v-durasi { display: none; }
  .v-kendali { gap: 12px; padding: 10px 12px; }
  .v-bab { gap: 0 8px; margin-top: 14px; }
  .v-bab .d-mono, .v-bab p { display: none; }
  .v-bab button { padding-top: 12px; }
  .v-bab b { font-size: 14px; }
}

/* --------------------------------------------- gerak di semua bagian (Fase 14) -- */
/* Pasangan depan-hidup.js. Semua di bawah .sm-on, jadi mati di prefers-reduced-motion. */
@keyframes sm-pantul { 0% { opacity: 0; scale: .3; rotate: -25deg; } 60% { opacity: 1; scale: 1.12; rotate: 4deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes sm-cap { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes sm-masuk { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes sm-geser { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes sm-denyut { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes sm-pita { to { transform: translateX(-50%); } }

/* navigasi: garis penanda bagian yang sedang dibaca */
.sm-nav-garis { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--d-hijau); opacity: 0; transform-origin: 0 50%;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s; pointer-events: none; }
@media (max-width: 900px) { .sm-nav-garis { display: none; } }

/* garis bawah tergambar di bawah kata beraksen judul */
.sm-on :is(.d-hero h1, .d-kepala h2) em { position: relative; }
.sm-on :is(.d-hero h1, .d-kepala h2) em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em; min-height: 2px;
  background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.16, 1, .3, 1) .55s; }
.sm-on :is(.d-hero h1, .d-kepala h2).sm-go em::after { transform: scaleX(1); }

/* tombol dan tautan berpanah: panah maju saat disorot */
.d-tombol span[aria-hidden], .d-tautan-panah { display: inline-block; transition: translate .35s cubic-bezier(.16, 1, .3, 1); }
.d-tombol:hover span[aria-hidden], .d-kasus-kartu:hover .d-tautan-panah { translate: 4px 0; }

/* platform: logo memantul masuk, titik "berjalan" berdenyut */
.sm-on .d-modul-grid .d-logo { opacity: 0; }
.sm-on .d-modul-grid.sm-go .d-logo { animation: sm-pantul .8s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--i, 0) * 70ms + .3s); }
.sm-on .d-modul-grid a:hover .d-logo { rotate: -6deg; scale: 1.08; transition: rotate .4s, scale .4s; }
.sm-on .d-modul-grid li.hidup .d-status::before, .sm-on #tab-isi .d-status.baik::before { animation: sm-denyut 1.8s ease-out infinite; }

/* cara kerja: ilustrasi mini per agen */
.sm-ilus { position: relative; height: 108px; margin-bottom: 6px; padding: 16px; border-radius: 12px; background: var(--d-kartu);
  box-shadow: inset 0 0 0 1px var(--d-garis); display: grid; align-content: center; gap: 10px; overflow: hidden; }
.sm-ilus svg { width: 14px; height: 14px; }
.si-cip { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px;
  font-size: 10.5px; background: var(--d-sorot); color: var(--d-hijau); opacity: 0; }
.si-cip svg { width: 11px; height: 11px; }
.si-awas { color: var(--d-kuning); background: color-mix(in srgb, var(--d-kuning) 13%, transparent); }
.si-sop { display: flex; align-items: center; margin: 14px 0 18px; }
.si-sop + .si-cip { top: 10px; bottom: auto; }
.si-sop-titik { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--d-kartu); box-shadow: inset 0 0 0 1.5px var(--d-garis-kuat); color: transparent; transition: background .25s, color .25s, box-shadow .25s; }
.si-sop-titik.on { background: var(--d-aksen); color: var(--d-di-aksen); box-shadow: 0 0 0 5px var(--d-sorot); }
.si-sop-titik em { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; font: 500 10px var(--d-mono-font); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: var(--d-redup); white-space: nowrap; }
.si-sop-titik.on em { color: var(--d-tinta-2); }
.si-sop-garis { flex: 1; height: 2px; background: var(--d-garis); }
.si-sop-garis b { display: block; height: 100%; background: var(--d-hijau); transform: scaleX(0); transform-origin: 0 50%; }
.si-batang { display: grid; grid-template-columns: 58px minmax(0, 1fr) 54px; align-items: center; gap: 8px; }
.si-batang .d-mono { font-size: 10px; color: var(--d-redup); }
.si-batang i { height: 8px; border-radius: 4px; background: var(--d-garis); overflow: hidden; }
.si-batang b { display: block; height: 100%; background: var(--d-garis-kuat); transform: scaleX(0); transform-origin: 0 50%; }
.si-batang b.nota { background: var(--d-hijau); }
.si-angka { font: 500 11px var(--d-mono-font); text-align: right; color: var(--d-tinta-2); font-variant-numeric: tabular-nums; }
.si-grafik { display: flex; align-items: flex-end; gap: 7px; height: 64px; padding-right: 96px; }
.si-grafik b { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: var(--d-hijau); opacity: .4; transform: scaleY(0); transform-origin: 50% 100%; }
.si-grafik b:last-child { opacity: 1; }
.si-nota-wadah { position: relative; height: 72px; }
.si-nota { position: absolute; left: 0; top: 0; width: 96px; height: 70px; padding: 8px 9px; border-radius: 6px; display: grid; gap: 5px; align-content: start;
  background: var(--d-kartu); box-shadow: 0 2px 8px rgba(0, 0, 0, .06), inset 0 0 0 1px var(--d-garis-kuat); font: 600 8.5px var(--d-mono-font); color: var(--d-tinta-2);
  transition: box-shadow .25s; }
.si-nota i { height: 3px; border-radius: 2px; background: var(--d-garis); }
.si-nota i + i { width: 70%; }
.si-nota span { justify-self: end; color: var(--d-tinta); }
.si-nota.awas { box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-kuning) 18%, transparent), inset 0 0 0 1.5px var(--d-kuning); }

/* lihat modul: isi tab masuk bertahap setiap kali tab diganti */
.sm-on #tab-isi.sm-go .d-modul-info-teks > * { animation: sm-masuk .6s cubic-bezier(.16, 1, .3, 1) both; }
.sm-on #tab-isi.sm-go .d-modul-info-teks > :nth-child(2) { animation-delay: .06s; }
.sm-on #tab-isi.sm-go .d-modul-info-teks > :nth-child(3) { animation-delay: .12s; }
.sm-on #tab-isi.sm-go .d-modul-info-teks > :nth-child(4) { animation-delay: .18s; }
.sm-on #tab-isi.sm-go .d-agen-daftar li { animation: sm-masuk .6s cubic-bezier(.16, 1, .3, 1) both; }
.sm-on #tab-isi.sm-go .d-agen-daftar li:nth-child(2) { animation-delay: .1s; }
.sm-on #tab-isi.sm-go .d-agen-daftar li:nth-child(3) { animation-delay: .16s; }
.sm-on #tab-isi.sm-go .d-agen-daftar li:nth-child(4) { animation-delay: .22s; }
.sm-on #tab-isi.sm-go .d-modul-konsol { animation: sm-masuk .9s cubic-bezier(.16, 1, .3, 1) .25s both; }
.sm-on #tab-isi:not(.sm-go) > * { opacity: 0; }
.d-tab button { transition: box-shadow .3s, color .3s, background .3s, scale .2s; }
.d-tab button:active { scale: .96; }

/* studi kasus: peta membesar pelan saat kartu disorot */
.d-kasus-peta { transition: scale .8s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 60%; }
.d-kasus-kartu:hover .d-kasus-peta { scale: 1.05; }

/* aman dan teruji: status muncul seperti dicap */
.sm-on .d-daftar-garis .d-status { opacity: 0; }
.sm-on .d-daftar-garis.sm-go .d-status { animation: sm-cap .55s cubic-bezier(.34, 1.3, .64, 1) both; animation-delay: calc(var(--i, 0) * 70ms + .45s); }
[data-hitung] { font-variant-numeric: tabular-nums; color: var(--d-tinta-2); }

/* harga: daftar fitur muncul satu per satu */
.sm-on .d-paket .d-kartu-paket li { opacity: 0; }
.sm-on .d-paket.sm-go .d-kartu-paket li { animation: sm-geser .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms + .45s); }
.sm-on .d-paket.sm-go .d-kartu-paket li:nth-child(2) { animation-delay: calc(var(--i, 0) * 70ms + .5s); }
.sm-on .d-paket.sm-go .d-kartu-paket li:nth-child(3) { animation-delay: calc(var(--i, 0) * 70ms + .55s); }
.sm-on .d-paket.sm-go .d-kartu-paket li:nth-child(4) { animation-delay: calc(var(--i, 0) * 70ms + .6s); }
.sm-on .d-paket.sm-go .d-kartu-paket li:nth-child(5) { animation-delay: calc(var(--i, 0) * 70ms + .65s); }
.sm-on .d-paket.sm-go .d-kartu-paket li:nth-child(n + 6) { animation-delay: calc(var(--i, 0) * 70ms + .7s); }

/* tanya jawab: jawaban membuka dengan mulus (browser yang mendukung ::details-content) */
.sm-on .d-tanya-daftar { interpolate-size: allow-keywords; }
.sm-on .d-tanya-daftar details::details-content { block-size: 0; overflow: hidden;
  transition: block-size .5s cubic-bezier(.16, 1, .3, 1), content-visibility .5s allow-discrete; }
.sm-on .d-tanya-daftar details[open]::details-content { block-size: auto; }
.sm-on .d-tanya-daftar details[open] p { animation: sm-masuk .5s cubic-bezier(.16, 1, .3, 1) .05s both; }
.d-tanya-daftar summary { transition: color .3s; }
.d-tanya-daftar summary:hover { color: var(--d-hijau); }

/* penutup: kotak terbuka dari tengah, lalu pita logo modul berjalan */
.sm-on .d-penutup-isi { clip-path: inset(12% 8% round 20px); opacity: .001;
  transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1), opacity .5s ease; }
.sm-on .d-penutup-isi.sm-buka { clip-path: inset(0 round 20px); opacity: 1; }
.sm-pita { margin-top: 40px; overflow: hidden; border-block: 1px solid var(--d-garis); padding: 16px 0; opacity: 0; transition: opacity .8s ease; }
.sm-pita.sm-go { opacity: 1; }
.sm-pita-jalur { display: flex; width: max-content; animation: sm-pita 45s linear infinite; }
.sm-pita:hover .sm-pita-jalur { animation-play-state: paused; }
.sm-pita-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; white-space: nowrap; color: var(--d-tinta-2);
  font: 700 15px var(--d-judul-font); letter-spacing: -.01em; }
.sm-pita-item + .sm-pita-item { border-left: 1px solid var(--d-garis); }
.sm-pita-logo { width: 22px; height: 22px; }

/* jaringan produk: orbit, satelit, aliran di jari, denyut inti, ekor data */
@keyframes sm-putar { from { rotate: var(--mulai, 0deg); } to { rotate: calc(var(--mulai, 0deg) + 360deg); } }
@keyframes sm-putar-balik { from { rotate: var(--mulai, 0deg); } to { rotate: calc(var(--mulai, 0deg) - 360deg); } }
@keyframes sm-alir { to { stroke-dashoffset: 24; } }
@keyframes sm-riak { 0% { opacity: .75; scale: 1; } 100% { opacity: 0; scale: 2.15; } }
@keyframes sm-letup { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.9; } }
@keyframes sm-apung { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.sm-orbit :is(.sm-cincin, .sm-satelit) { transform-box: view-box; transform-origin: 300px 300px; }
.sm-cincin { fill: none; stroke: var(--j-garis); stroke-width: 1; stroke-dasharray: 2 9; }
.sm-cincin.luar { animation: sm-putar 90s linear infinite; }
.sm-cincin.dalam { stroke-dasharray: 1 6; animation: sm-putar-balik 60s linear infinite; }
.sm-satelit circle { fill: var(--d-hijau); }
.sm-satelit.luar { animation: sm-putar 32s linear infinite; }
.sm-satelit.dalam { animation: sm-putar-balik 16s linear infinite; }
.sm-satelit.dalam circle { opacity: .7; }
.sm-alir { stroke: var(--d-hijau); stroke-width: 1.2; stroke-dasharray: 2 10; opacity: .25; animation: sm-alir 2.2s linear infinite; transition: opacity .4s; }
.j-jari.aktif + .sm-alir { opacity: 1; stroke-width: 2.2; stroke-dasharray: 4 8; animation-duration: .6s; }
.sm-ekor { fill: var(--d-hijau); opacity: 0; pointer-events: none; }
.sm-on .j-data { stroke: color-mix(in srgb, var(--d-hijau) 28%, transparent); stroke-width: 8px; paint-order: stroke; }
.sm-on .j-inti::before, .sm-on .j-inti::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--d-hijau); animation: sm-riak 3.4s cubic-bezier(.2, .6, .35, 1) infinite; pointer-events: none; }
.sm-on .j-inti::after { animation-delay: 1.7s; }
.sm-on .j-simpul.aktif .j-bulat::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--d-hijau);
  animation: sm-letup .9s ease-out forwards; pointer-events: none; }
.sm-on .j-panggung.sm-selesai .j-bulat { animation: sm-apung 6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -.7s); }
.sm-on .j-simpul .j-bulat { transition: transform .4s var(--d-keluar), box-shadow .4s, opacity .4s; }
.sm-on .j-simpul-lapis:has(.aktif) .j-simpul:not(.aktif) .j-bulat { opacity: .55; }
.sm-on .j-panggung { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.sm-on .j-panggung.sm-miring-j { transition: transform .15s ease-out; }