/* ============================================================================
   SARANA SISTEM — gaya/utama.css
   Bahasa desain: "JALUR HIJAU"

   Tiga aturan yang tidak dilanggar di berkas ini:

   1. Dokumen resmi tidak punya bayangan. Panel berbatas rata, bukan kartu
      membulat yang melayang. Kedalaman dibuat lewat garis dan latar, bukan
      blur.
   2. Mono adalah wajahnya. Label, nomor, dan data memakai monospace —
      kosakata manifes, cetakan dot-matrix, dan barcode.
   3. Satu aksen berani saja: hijau jalur. Sisanya ditahan.

   Susunan berkas:
      01 Token          06 Pelat angka        11 Bukti & jujur
      02 Dasar          07 Peraga             12 Orang & kesinambungan
      03 Kerangka       08 Alur (SVG)         13 Harga
      04 Kepala         09 Langkah & katalog  14 Tanya jawab & formulir
      05 Hero           10 Gerbang & layar    15 Kaki, periksa, gerak
   ============================================================================ */

/* ---------------------------------------------------------------- 01 TOKEN */

:root {
  /* Ground dingin — putih fotokopi dan baja gudang. Sengaja berbeda dari
     krem hangat aplikasi WMS supaya situs penjualan punya suaranya sendiri. */
  --ground:      #EEF0ED;
  --ground-deep: #E3E7E2;
  --surface:     #FBFCFA;
  --surface-alt: #FFFFFF;

  --ink:      #0E1317;
  --ink-soft: #4E5A54;
  --ink-mute: #7C8A83;

  --rule:      #D2D8D1;
  --rule-firm: #B6BFB6;

  /* Navy segel dibawa dari aplikasi agar peralihan "Masuk Aplikasi" terasa
     menyambung, bukan melompat ke tempat asing. */
  --segel:      #1E3A8A;
  --segel-soft: #DFE5F5;

  /* Hijau jalur — kosakata kepabeanan yang dikenal seketika. */
  --jalur:      #0B7D57;
  --jalur-deep: #085F42;
  --jalur-soft: #DCEFE6;
  --jalur-ink:  #FFFFFF;

  --tunda:      #8A5A06;
  --tunda-soft: #FBF0DA;
  --tolak:      #A11B1B;

  --grid-line: rgb(14 19 23 / .045);
  --stamp:     rgb(11 125 87 / .16);

  --f-sans: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --w-page: 1180px;
  --pad-x:  clamp(1.15rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0E1317;
    --ground-deep: #080C0F;
    --surface:     #161D22;
    --surface-alt: #1B242A;

    --ink:      #E9EFEA;
    --ink-soft: #A3B0A9;
    --ink-mute: #74827B;

    --rule:      #263138;
    --rule-firm: #3A4952;

    --segel:      #7C97EC;
    --segel-soft: #1B2544;

    --jalur:      #3FD69B;
    --jalur-deep: #6FE6B6;
    --jalur-soft: #0E2B22;
    --jalur-ink:  #06231A;

    --tunda:      #D9A441;
    --tunda-soft: #2A2113;
    --tolak:      #F08A8A;

    --grid-line: rgb(233 239 234 / .05);
    --stamp:     rgb(63 214 155 / .13);
  }
}

:root[data-theme="dark"] {
  --ground:      #0E1317;
  --ground-deep: #080C0F;
  --surface:     #161D22;
  --surface-alt: #1B242A;

  --ink:      #E9EFEA;
  --ink-soft: #A3B0A9;
  --ink-mute: #74827B;

  --rule:      #263138;
  --rule-firm: #3A4952;

  --segel:      #7C97EC;
  --segel-soft: #1B2544;

  --jalur:      #3FD69B;
  --jalur-deep: #6FE6B6;
  --jalur-soft: #0E2B22;
  --jalur-ink:  #06231A;

  --tunda:      #D9A441;
  --tunda-soft: #2A2113;
  --tolak:      #F08A8A;

  --grid-line: rgb(233 239 234 / .05);
  --stamp:     rgb(63 214 155 / .13);
}

/* ---------------------------------------------------------------- 02 DASAR */

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

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.35rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.3; }
h4 { font-size: .9375rem; letter-spacing: -.008em; }
p  { margin: 0; }

.mono {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

.lead  { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }
.small { font-size: .875rem; color: var(--ink-soft); }
.mute  { color: var(--ink-mute); }
.num-t { font-variant-numeric: tabular-nums; }

a { color: inherit; }
.tautan {
  color: var(--jalur);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tautan:hover { border-bottom-color: var(--jalur); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--jalur);
  outline-offset: 2px;
  border-radius: 1px;
}

::selection { background: var(--jalur-soft); color: var(--ink); }

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

/* ------------------------------------------------------------ 03 KERANGKA */

.wrap { max-width: var(--w-page); margin-inline: auto; padding-inline: var(--pad-x); }

/* Grid asimetris: rel kiri memuat label mono seperti kotak bernama pada
   formulir pabean; kolom kanan memuat isinya. */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .split { grid-template-columns: 11.5rem minmax(0, 1fr); }
  .rail  { position: sticky; top: 5.25rem; align-self: start; }
}

.rail { display: flex; flex-direction: column; gap: .5rem; }
.rail .mono { color: var(--ink-mute); }
.rail-no {
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; color: var(--jalur);
}
.rail-note { font-size: .8125rem; color: var(--ink-mute); max-width: 22ch; line-height: 1.45; }

section { border-top: 1px solid var(--rule); padding-block: clamp(3.25rem, 7vw, 5.75rem); }
section.tenang { background: var(--ground-deep); }

.stack    { display: flex; flex-direction: column; gap: 1.15rem; }
.stack-sm { display: flex; flex-direction: column; gap: .55rem; }
.stack-lg { display: flex; flex-direction: column; gap: 2.5rem; }

/* Pemisah bergaya perforasi — meniru sobekan formulir rangkap. */
.perforasi {
  height: 1px; border: 0; margin: 0;
  background: repeating-linear-gradient(
    to right, var(--rule-firm) 0 4px, transparent 4px 9px
  );
}

/* --------------------------------------------------------------- 04 KEPALA */

header.situs {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.bar { display: flex; align-items: center; gap: 1.25rem; height: 3.65rem; }

.brand {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-weight: 800; letter-spacing: -.02em; font-size: 1.0625rem;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.brand .mark {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 2px;
  background: var(--jalur); color: var(--jalur-ink);
  font-family: var(--f-mono); font-size: .8125rem; font-weight: 700;
  transform: translateY(2px);
}

nav.tautan-utama { display: none; gap: 1.4rem; margin-left: auto; }
@media (min-width: 980px) { nav.tautan-utama { display: flex; } }
nav.tautan-utama a {
  text-decoration: none; color: var(--ink-soft);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
}
nav.tautan-utama a:hover,
nav.tautan-utama a[aria-current="true"] { color: var(--ink); }

.alat-kepala { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 980px) { .alat-kepala { margin-left: 1.25rem; } }

.tombol-tema {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  border: 1px solid var(--rule-firm); border-radius: 3px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.tombol-tema:hover { border-color: var(--ink-soft); color: var(--ink); background: var(--surface); }
.tombol-tema svg { width: 1rem; height: 1rem; }
.tombol-tema .ikon-terang { display: none; }
:root[data-theme="dark"] .tombol-tema .ikon-terang { display: block; }
:root[data-theme="dark"] .tombol-tema .ikon-gelap  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tombol-tema .ikon-terang { display: block; }
  :root:not([data-theme="light"]) .tombol-tema .ikon-gelap  { display: none; }
}

/* Strip jangkar untuk layar sempit — navigasi tidak boleh hilang begitu saja. */
.strip {
  display: flex; gap: .4rem; overflow-x: auto;
  padding: .5rem var(--pad-x); border-bottom: 1px solid var(--rule);
  background: var(--ground-deep);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
@media (min-width: 980px) { .strip { display: none; } }
.strip a {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); white-space: nowrap;
  border: 1px solid var(--rule-firm); border-radius: 2px;
  padding: .3rem .6rem; background: var(--surface);
}

/* -------------------------------------------------------------- 05 TOMBOL */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: 3px;
  font-size: .875rem; font-weight: 650; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background .15s cubic-bezier(.2,.8,.2,1), border-color .15s, color .15s;
}
.btn-solid { background: var(--jalur); color: var(--jalur-ink); }
.btn-solid:hover { background: var(--jalur-deep); }
.btn-line { border-color: var(--rule-firm); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink-soft); background: var(--surface); }
.btn-lg { padding: .8rem 1.4rem; font-size: .9375rem; }
.btn-sm { padding: .4rem .7rem; font-size: .8125rem; }
.btn svg { width: 1rem; height: 1rem; flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ---------------------------------------------------------------- 05 HERO */

.hero {
  position: relative; border-top: 0; overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

/* Kertas milimeter — latar gambar teknik, bukan hiasan. Sangat samar; ia
   hanya boleh terbaca sebagai tekstur saat mata sudah tenang. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  mask-image: radial-gradient(120% 90% at 72% 8%, #000 0%, transparent 72%);
}
.hero > * { position: relative; }

.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--jalur); }
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--jalur); }

.hero h1 em { font-style: normal; color: var(--jalur); }

/* Segel karet — ditempel miring seperti cap pada berkas yang sudah diproses. */
.segel-cap {
  position: absolute; top: clamp(1rem, 4vw, 3rem); right: clamp(-1rem, 1vw, 1.5rem);
  display: none; place-items: center; text-align: center;
  width: 9.5rem; height: 9.5rem; border-radius: 50%;
  border: 2px solid var(--stamp);
  color: var(--stamp); transform: rotate(-11deg);
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.6; font-weight: 700;
  padding: 1.4rem;
}
.segel-cap::after {
  content: ""; position: absolute; inset: .42rem;
  border: 1px dashed var(--stamp); border-radius: 50%;
}
@media (min-width: 1080px) { .segel-cap { display: grid; } }

/* --------------------------------------------------------- 06 PELAT ANGKA */

/* Pelat data bergaris seperti marka pada dinding kontainer. */
.plate {
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .plate { grid-template-columns: repeat(4, 1fr); } }

.cell { padding: 1.05rem 1.15rem; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cell:nth-child(-n+2) { border-top: 0; }
.cell:nth-child(odd)  { border-left: 0; }
@media (min-width: 720px) {
  .cell:nth-child(-n+4) { border-top: 0; }
  .cell:nth-child(odd)  { border-left: 1px solid var(--rule); }
  .cell:nth-child(4n+1) { border-left: 0; }
}
.cell .num {
  font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cell .num .sat { font-size: .6em; font-weight: 600; }
.cell .cap { font-size: .78rem; color: var(--ink-soft); margin-top: .3rem; line-height: 1.4; }

/* --------------------------------------------------------------- 07 PERAGA */

.demo { border: 1px solid var(--rule-firm); background: var(--surface); }
.demo-head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .8rem 1.15rem; border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}
.demo-head .mono { color: var(--ink-soft); }

.toggle {
  display: inline-flex; border: 1px solid var(--rule-firm);
  border-radius: 3px; overflow: hidden; margin-left: auto;
}
.toggle button {
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .45rem .85rem;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--jalur); color: var(--jalur-ink); font-weight: 700; }

.demo-body { padding: 0; }

/* Meja BUP — barisnya nyata, bukan ilustrasi. */
.meja { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: .75rem; }
.meja th {
  text-align: left; font-weight: 600; font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: .6rem .7rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.meja td {
  padding: .5rem .7rem; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.meja tbody tr:last-child td { border-bottom: 0; }
.meja .kosong { color: var(--ink-mute); letter-spacing: .1em; }

.meja-bungkus { overflow-x: auto; }

/* Sel yang baru terisi menyala sekejap, lalu tenang — sinyal "ini otomatis",
   bukan animasi demi animasi. */
.meja td.isi { animation: masuk .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes masuk {
  from { background: var(--jalur-soft); color: var(--jalur); }
  to   { background: transparent; }
}

.meja-sisa {
  padding: .55rem .7rem; font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .06em; color: var(--ink-mute); border-top: 1px dashed var(--rule-firm);
  background: var(--ground-deep);
}

/* Meteran biaya kerja — inti pesannya ada di sini. */
.meter {
  display: grid; gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule-firm);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .meter { grid-template-columns: repeat(3, 1fr); } }
.meter-sel { background: var(--surface); padding: .85rem 1.15rem; }
.meter-sel .k {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.meter-sel .v {
  font-family: var(--f-mono); font-size: 1.0625rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: .15rem;
}
[data-state="manual"] .meter-sel .v { color: var(--tolak); }
[data-state="bup"]    .meter-sel .v { color: var(--jalur); }

.demo-kaki {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  padding: .75rem 1.15rem; border-top: 1px solid var(--rule);
  background: var(--surface-alt); font-size: .8125rem; color: var(--ink-soft);
}
.demo-kaki .asumsi { font-family: var(--f-mono); font-size: .6875rem; color: var(--ink-mute); }

/* ----------------------------------------------------------- 08 ALUR (SVG) */

.alur-panel {
  border: 1px solid var(--rule-firm); background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.alur-svg { width: 100%; height: auto; display: block; overflow: visible; }
.alur-svg .kotak     { fill: var(--surface-alt); stroke: var(--rule-firm); stroke-width: 1.25; }
.alur-svg .kotak-aktif { fill: var(--jalur-soft); stroke: var(--jalur); stroke-width: 1.5; }
.alur-svg .judul     { fill: var(--ink); font-family: var(--f-sans); font-size: 12px; font-weight: 700; }
.alur-svg .ket       { fill: var(--ink-mute); font-family: var(--f-mono); font-size: 8px; letter-spacing: .1em; }
.alur-svg .jalur-garis { fill: none; stroke: var(--rule-firm); stroke-width: 1.25; }
.alur-svg .jalur-hidup {
  fill: none; stroke: var(--jalur); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 26 320; animation: menjalar 5s linear infinite;
}
@keyframes menjalar { to { stroke-dashoffset: -346; } }
/* Gerbang pada rel. Diberi kelas, bukan atribut presentasi — var() tidak
   bekerja di atribut presentasi SVG. */
.alur-svg .segel-lingkar { fill: var(--surface); stroke: var(--jalur); stroke-width: 1.5; }
.alur-svg .segel-teks {
  fill: var(--jalur); font-family: var(--f-mono);
  font-size: 9px; font-weight: 700;
}

.alur-ket { display: grid; gap: .75rem; margin-top: 1.35rem; }
@media (min-width: 760px) { .alur-ket { grid-template-columns: repeat(3, 1fr); } }
.alur-ket div { font-size: .8125rem; color: var(--ink-soft); }
.alur-ket b { display: block; color: var(--ink); font-size: .875rem; }

/* ------------------------------------------------- 09 LANGKAH & KATALOG */

.steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); padding: 1.4rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; }
.step .n { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .12em; color: var(--jalur); font-weight: 700; }
.step p { font-size: .9rem; color: var(--ink-soft); }
.step .hasil {
  margin-top: .35rem; padding-top: .55rem; border-top: 1px dashed var(--rule-firm);
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--ink-mute);
}

.cat { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 780px) { .cat { grid-template-columns: repeat(2, 1fr); } }
.item { background: var(--surface); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.item.lead-item { background: var(--surface-alt); }
@media (min-width: 780px) { .item.lead-item { grid-column: span 2; } }
.item-top { display: flex; align-items: flex-start; gap: .75rem; justify-content: space-between; }
.item p { font-size: .9rem; color: var(--ink-soft); }

.tag {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 2px; white-space: nowrap; font-weight: 600;
}
.tag-ready { background: var(--jalur); color: var(--jalur-ink); }
.tag-open  { background: var(--segel-soft); color: var(--segel); }
.tag-note  { background: var(--tunda-soft); color: var(--tunda); }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.chip {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .06em;
  border: 1px solid var(--rule-firm); border-radius: 2px;
  padding: .2rem .45rem; color: var(--ink-soft);
}

/* Pintu masuk — yang benar-benar dijual untuk bidang yang belum ada produknya. */
.pintu {
  border: 1px solid var(--jalur); background: var(--jalur-soft);
  padding: 1.35rem 1.4rem; display: flex; flex-wrap: wrap;
  gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
}
.pintu p { font-size: .9rem; color: var(--ink-soft); max-width: 52ch; }
.pintu h3 { color: var(--ink); }

/* -------------------------------------------------- 10 GERBANG & LAYAR */

.gerbang { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 620px) { .gerbang { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gerbang { grid-template-columns: repeat(4, 1fr); } }
.gerbang-sel { background: var(--surface); padding: 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.gerbang-sel svg { width: 2.25rem; height: 2.25rem; color: var(--jalur); }
.gerbang-sel p { font-size: .875rem; color: var(--ink-soft); }
.gerbang-sel .tahan {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tolak);
}

/* Bingkai tangkapan layar — dibingkai seperti lampiran berkas, supaya
   tangkapan layar aplikasi (krem hangat) tidak bertabrakan dengan ground
   dingin situs ini. */
.layar { border: 1px solid var(--rule-firm); background: var(--surface); }
.layar-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-bottom: 1px solid var(--rule); background: var(--surface-alt);
}
.layar-bar .titik { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rule-firm); flex: none; }
.layar-bar .url {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .04em;
  color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.layar img, .layar svg.tangkapan { display: block; width: 100%; height: auto; background: var(--ground-deep); }
.layar-ket {
  padding: .7rem .85rem; border-top: 1px solid var(--rule);
  font-size: .8125rem; color: var(--ink-soft);
}
.layar-ket b { display: block; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--jalur); margin-bottom: .2rem; }

.layar-pasang { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .layar-pasang { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------ 11 BUKTI & JUJUR */

.proof { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.proof-row { display: grid; gap: .35rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .proof-row { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; } }
.proof-row h3 { font-size: .9375rem; }
.proof-row p  { font-size: .9rem; color: var(--ink-soft); }
.proof-row .fact {
  font-family: var(--f-mono); font-size: .8125rem; color: var(--jalur);
  font-variant-numeric: tabular-nums; display: block; margin-top: .3rem;
}

/* Blok kejujuran — satu-satunya tempat warna tunda dipakai untuk isi. */
.jujur { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 780px) { .jujur { grid-template-columns: repeat(2, 1fr); } }
.jujur-sel { background: var(--surface); padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.jujur-sel h3 { font-size: .9375rem; }
.jujur-sel p { font-size: .875rem; color: var(--ink-soft); }
.jujur-sel .jawab {
  font-size: .8125rem; color: var(--ink-soft); font-style: italic;
  border-left: 2px solid var(--tunda); padding-left: .7rem; margin-top: .15rem;
}

/* ---------------------------------------- 12 ORANG & KESINAMBUNGAN */

.orang { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 780px) { .orang { grid-template-columns: 13rem minmax(0, 1fr); } }

.potret {
  border: 1px solid var(--rule-firm); background: var(--surface-alt);
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  overflow: hidden; position: relative;
}
.potret img { width: 100%; height: 100%; object-fit: cover; }
.potret .kosong-potret {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center; padding: 1rem;
}
.potret::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--jalur);
}

.riwayat { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: .5rem; }
.riwayat-baris {
  display: grid; gap: .1rem 1.25rem; padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 600px) { .riwayat-baris { grid-template-columns: 8rem minmax(0, 1fr); align-items: baseline; } }
.riwayat-baris .thn {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--jalur); font-variant-numeric: tabular-nums;
}
.riwayat-baris .isi { font-size: .9rem; color: var(--ink-soft); }
.riwayat-baris .isi b { color: var(--ink); }

.jamin { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 700px)  { .jamin { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .jamin { grid-template-columns: repeat(3, 1fr); } }
.jamin-sel { background: var(--surface); padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.jamin-sel .no {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em;
  color: var(--jalur); font-weight: 700;
}
.jamin-sel p { font-size: .875rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 13 HARGA */

.harga { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 860px) { .harga { grid-template-columns: repeat(3, 1fr); } }
.harga-sel { background: var(--surface); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.harga-sel.tegas { background: var(--surface-alt); border-top: 3px solid var(--jalur); }
.harga-sel .peran {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.harga-sel .angka {
  font-family: var(--f-mono); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.harga-sel .angka .sat { font-size: .55em; font-weight: 600; color: var(--ink-mute); }
.harga-sel > p { font-size: .875rem; color: var(--ink-soft); }
.harga-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.harga-daftar li {
  font-size: .85rem; color: var(--ink-soft);
  display: grid; grid-template-columns: 1rem 1fr; gap: .5rem; align-items: start;
}
.harga-daftar li::before { content: "—"; font-family: var(--f-mono); color: var(--jalur); }
.harga-sel .btn { margin-top: auto; }

.catatan-harga {
  border: 1px dashed var(--rule-firm); background: var(--surface);
  padding: 1rem 1.15rem; font-size: .85rem; color: var(--ink-soft);
}

/* ------------------------------------------- 14 TANYA JAWAB & FORMULIR */

.tanya { border-top: 1px solid var(--rule); }
.tanya details { border-bottom: 1px solid var(--rule); }
.tanya summary {
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0;
  font-weight: 650; font-size: .9375rem; position: relative;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 1.15rem; color: var(--jalur); line-height: 1;
}
.tanya details[open] summary::after { content: "\2212"; }
.tanya .jawab-isi { padding: 0 0 1.15rem; font-size: .9rem; color: var(--ink-soft); max-width: 68ch; }
.tanya .jawab-isi p + p { margin-top: .6rem; }

.form-panel { border: 1px solid var(--rule-firm); background: var(--surface); padding: clamp(1.25rem, 3vw, 1.85rem); }
.form-baris { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .form-baris { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .95rem; }
.field label {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--rule-firm); border-radius: 2px;
  padding: .55rem .7rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.form-note { font-size: .8125rem; color: var(--ink-mute); margin-top: .75rem; line-height: 1.5; }

/* Panel cadangan: kalau WhatsApp gagal terbuka, pengunjung tidak boleh
   melihat layar yang diam saja. */
.cadangan { display: none; margin-top: 1rem; border: 1px solid var(--jalur); background: var(--jalur-soft); padding: 1rem 1.15rem; }
.cadangan[data-tampil="ya"] { display: block; }
.cadangan pre {
  font-family: var(--f-mono); font-size: .75rem; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--rule);
  padding: .75rem; margin: .6rem 0; white-space: pre-wrap; word-break: break-word;
  max-height: 11rem; overflow: auto;
}

/* --------------------------------------------- 15 KAKI, PERIKSA, GERAK */

footer.situs { border-top: 1px solid var(--rule-firm); background: var(--ground-deep); padding-block: 2.5rem; }
.foot { display: grid; gap: 1.75rem 2.5rem; }
@media (min-width: 760px) { .foot { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot .mono { color: var(--ink-mute); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--jalur); }
.foot-bawah {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: var(--ink-mute);
}

/* Penanda purwarupa — wajib dicabut sebelum tayang. */
.draft {
  border: 1px dashed var(--tunda); border-radius: 2px;
  padding: .7rem .9rem; font-size: .8125rem; color: var(--ink-soft);
  background: var(--tunda-soft);
}
.draft strong {
  color: var(--tunda); font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
}

/* --- Mode Periksa -------------------------------------------------------
   Tambahkan ?periksa pada URL: setiap nilai karangan tersorot, dan panel
   di pojok menghitung berapa yang masih tersisa. Tidak ada pengaruh apa pun
   pada tampilan biasa. */
body.periksa [data-karangan] {
  outline: 2px dashed var(--tunda);
  outline-offset: 2px;
  background: var(--tunda-soft) !important;
  border-radius: 2px;
}
body.periksa [data-karangan]::after {
  content: "\00a0KARANGAN";
  font-family: var(--f-mono); font-size: .5rem; letter-spacing: .1em;
  color: var(--tunda); vertical-align: super;
}
.panel-periksa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  border: 1px solid var(--tunda); background: var(--tunda-soft); color: var(--ink);
  padding: .7rem .9rem; font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .08em; line-height: 1.7; max-width: 17rem;
}
.panel-periksa b { color: var(--tunda); font-size: .8125rem; }

/* --- Gerak --------------------------------------------------------------- */
.masuk-pandang { opacity: 0; transform: translateY(10px); }
.masuk-pandang.tampak {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .masuk-pandang { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════ 16 SITUS BERHALAMAN ══
   Navbar hanya berguna kalau ia benar-benar memindahkan orang ke tempat lain.
   Blok di bawah ini yang membuat tiap halaman terasa sebagai tempat sendiri:
   pelat kepala bernomor, pintu masuk yang bisa diklik, dan satu bar "lanjut"
   di kaki halaman supaya pengunjung tidak pernah menemui jalan buntu.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Penanda halaman aktif di navbar --------------------------------- */
/* Ditandai dari <body data-halaman="..."> supaya blok kepala tetap identik
   di seluruh halaman — satu kali sunting, sembilan halaman ikut. */
nav.tautan-utama a { position: relative; padding-block: .35rem; }
nav.tautan-utama a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--jalur); transform: scaleX(0);
  transform-origin: left; transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
body[data-halaman="cara"]      nav.tautan-utama a[data-nav="cara"],
body[data-halaman="solusi"]    nav.tautan-utama a[data-nav="solusi"],
body[data-halaman="bukti"]     nav.tautan-utama a[data-nav="bukti"],
body[data-halaman="kami"]      nav.tautan-utama a[data-nav="kami"],
body[data-halaman="kerjasama"] nav.tautan-utama a[data-nav="kerjasama"] {
  color: var(--ink); font-weight: 650;
}
body[data-halaman="cara"]      nav.tautan-utama a[data-nav="cara"]::after,
body[data-halaman="solusi"]    nav.tautan-utama a[data-nav="solusi"]::after,
body[data-halaman="bukti"]     nav.tautan-utama a[data-nav="bukti"]::after,
body[data-halaman="kami"]      nav.tautan-utama a[data-nav="kami"]::after,
body[data-halaman="kerjasama"] nav.tautan-utama a[data-nav="kerjasama"]::after {
  transform: scaleX(1);
}

.strip a[data-nav] { transition: border-color .15s, color .15s; }
body[data-halaman="cara"]      .strip a[data-nav="cara"],
body[data-halaman="solusi"]    .strip a[data-nav="solusi"],
body[data-halaman="bukti"]     .strip a[data-nav="bukti"],
body[data-halaman="kami"]      .strip a[data-nav="kami"],
body[data-halaman="kerjasama"] .strip a[data-nav="kerjasama"] {
  border-color: var(--jalur); color: var(--jalur); font-weight: 700;
}

/* ---- Pelat kepala halaman -------------------------------------------- */
/* Nomor besar berongga di latar: penanda "Anda ada di halaman berapa",
   diambil dari cara berkas pabean diberi nomor urut — bukan hiasan. */
.plat-halaman {
  border-top: 0; position: relative; overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(1.75rem, 4vw, 3rem);
}
.plat-halaman::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  mask-image: radial-gradient(110% 80% at 84% 0%, #000 0%, transparent 70%);
}
.plat-halaman > * { position: relative; }

.plat-nomor {
  position: absolute; top: -.08em; right: -.04em; z-index: 0;
  font-family: var(--f-mono); font-weight: 700; line-height: .78;
  font-size: clamp(6rem, 20vw, 15rem); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--rule-firm);
  opacity: .55; pointer-events: none; user-select: none;
}
@media (max-width: 640px) { .plat-nomor { opacity: .3; } }

.plat-kepala { display: flex; flex-direction: column; gap: 1rem; max-width: 44ch; }
.plat-kepala h1 { font-size: clamp(2.05rem, 5.4vw, 3.55rem); }
.plat-kepala h1 em { font-style: normal; color: var(--jalur); }

/* Punchline: satu kalimat, ditahan pendek dengan sengaja. */
.punch {
  font-size: clamp(1.05rem, 2vw, 1.32rem); line-height: 1.45;
  color: var(--ink-soft); max-width: 40ch; font-weight: 500; text-wrap: balance;
}
.punch strong { color: var(--ink); font-weight: 700; }

/* ---- Pintu masuk ------------------------------------------------------ */
.pintu-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 760px) { .pintu-grid { grid-template-columns: repeat(2, 1fr); } }

a.pintu-kartu {
  position: relative; background: var(--surface);
  padding: 1.65rem 1.55rem; min-height: 11rem;
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
  transition: background .16s cubic-bezier(.2,.8,.2,1);
}
a.pintu-kartu:hover { background: var(--surface-alt); }
a.pintu-kartu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--jalur); transform: scaleY(0); transform-origin: top;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
a.pintu-kartu:hover::before, a.pintu-kartu:focus-visible::before { transform: scaleY(1); }

.pintu-kartu .no {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.pintu-kartu h3 { font-size: 1.2rem; letter-spacing: -.018em; }
.pintu-kartu .punchline { font-size: .95rem; color: var(--ink-soft); line-height: 1.45; }
.pintu-kartu .pergi {
  margin-top: auto; padding-top: .8rem;
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--jalur); font-weight: 600;
}
a.pintu-kartu:hover .pergi { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Bar "lanjut" di kaki halaman ------------------------------------ */
/* Tidak ada halaman yang boleh berakhir buntu. Setiap halaman menunjuk ke
   halaman berikutnya, dan urutannya mengikuti pertanyaan pembeli. */
.lanjut { border-top: 1px solid var(--rule-firm); background: var(--ground-deep); }
a.lanjut-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: clamp(1.75rem, 4.5vw, 2.85rem);
  text-decoration: none; color: inherit;
}
.lanjut-bar .k {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: .3rem;
}
.lanjut-bar h3 { font-size: clamp(1.3rem, 3.2vw, 2rem); letter-spacing: -.022em; }
.lanjut-bar .ket { font-size: .9rem; color: var(--ink-soft); margin-top: .35rem; max-width: 44ch; }
.lanjut-bar .panah {
  font-family: var(--f-mono); font-size: 1.75rem; color: var(--jalur); flex: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
a.lanjut-bar:hover .panah { transform: translateX(8px); }
a.lanjut-bar:hover h3 { color: var(--jalur); }

/* ---- Remah roti ------------------------------------------------------- */
.remah {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.15rem;
}
.remah a { text-decoration: none; color: var(--ink-mute); }
.remah a:hover { color: var(--jalur); }
.remah .pisah { color: var(--rule-firm); }

/* ══════════════════════════════════════════ 17 KOTAK SERET BUP ══════════
   Pengunjung tidak lagi membaca klaim kami — ia membuktikannya dengan
   berkasnya sendiri. Seluruh pembacaan terjadi di peramban; tidak ada
   satu bita pun yang dikirim ke mana pun, dan itu ditulis besar-besar
   karena justru itu yang menghapus keraguan terbesar.
   ════════════════════════════════════════════════════════════════════════ */

.jatuh {
  border: 2px dashed var(--rule-firm); background: var(--surface);
  padding: clamp(1.6rem, 4vw, 2.6rem) 1.25rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  cursor: pointer; width: 100%; font-family: inherit; color: inherit;
  transition: border-color .16s, background .16s;
}
.jatuh:hover { border-color: var(--jalur); background: var(--surface-alt); }
.jatuh[data-seret="ya"] {
  border-color: var(--jalur); background: var(--jalur-soft); border-style: solid;
}
.jatuh svg { width: 2.4rem; height: 2.4rem; color: var(--jalur); }
.jatuh .ajak { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.jatuh .ket  { font-size: .85rem; color: var(--ink-soft); max-width: 44ch; }
.jatuh input[type="file"] { display: none; }

.privasi {
  border-left: 2px solid var(--jalur); padding: .15rem 0 .15rem .75rem;
  font-size: .8125rem; color: var(--ink-soft); line-height: 1.5;
}
.privasi b { color: var(--ink); }

.olah, .galat { display: none; margin-top: 1rem; }
.olah[data-tampil="ya"], .galat[data-tampil="ya"] { display: block; }
.olah {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--jalur);
}
.galat {
  border: 1px solid var(--tolak); background: color-mix(in srgb, var(--tolak) 8%, transparent);
  padding: .85rem 1rem; font-size: .875rem;
}
.galat b { color: var(--tolak); }

.hasil-bup { display: none; }
.hasil-bup[data-tampil="ya"] { display: flex; flex-direction: column; gap: 1.25rem; }

.bup-kepala {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline;
  padding: .8rem 1.15rem; border: 1px solid var(--jalur); background: var(--jalur-soft);
}
.bup-kepala .aju {
  font-family: var(--f-mono); font-size: .8125rem; font-weight: 700; color: var(--ink);
  word-break: break-all;
}
.bup-kepala .lencana {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  background: var(--jalur); color: var(--jalur-ink); padding: .2rem .5rem; border-radius: 2px;
}
.bup-kepala .waktu {
  margin-left: auto; font-family: var(--f-mono); font-size: .6875rem; color: var(--ink-soft);
}

/* ══════════════════════════════════════ 18 KALKULATOR & MEMO ═══════════
   Pembeli Anda harus menjual ke atasannya, dan biasanya tidak pandai
   melakukannya. Blok ini memberinya amunisi — lengkap dengan angkanya
   sendiri, siap disalin ke surel.
   ════════════════════════════════════════════════════════════════════════ */

.hitung-panel { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-firm); }
@media (min-width: 900px) { .hitung-panel { grid-template-columns: 20rem minmax(0, 1fr); } }
.hitung-isi   { background: var(--surface-alt); padding: 1.4rem 1.35rem; }
.hitung-keluar{ background: var(--surface); padding: 1.4rem 1.35rem; display: flex; flex-direction: column; gap: 1.1rem; }

.hitung-isi .field { margin-bottom: .85rem; }
.hitung-isi .satuan {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--ink-mute); margin-top: .2rem;
}

.hasil-baris { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 560px) { .hasil-baris { grid-template-columns: repeat(3, 1fr); } }
.hasil-sel { background: var(--surface-alt); padding: .95rem 1rem; }
.hasil-sel .k {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hasil-sel .v {
  font-family: var(--f-mono); font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: .15rem; color: var(--tolak);
}
.hasil-sel .v small { font-size: .55em; font-weight: 600; color: var(--ink-mute); letter-spacing: 0; }

.memo-kotak {
  font-family: var(--f-mono); font-size: .75rem; line-height: 1.65; color: var(--ink);
  background: var(--ground-deep); border: 1px solid var(--rule-firm);
  padding: 1rem; margin: 0; white-space: pre-wrap; word-break: break-word;
  max-height: 22rem; overflow: auto;
}

/* ═════════════════════════════════════ 19 GALERI TANGKAPAN LAYAR ═══════
   Dikelompokkan mengikuti urutan kerja harian, bukan urutan menu aplikasi:
   dashboard -> pemasukan -> stok -> pengeluaran -> keuangan -> laporan.
   Itu urutan yang dikenali pembeli, karena itu urutan pekerjaannya sendiri.

   Kisi memakai rasio 16:9 dengan potongan dari kiri-atas — bagian paling
   informatif setiap layar aplikasi — supaya kartunya seragam walau tinggi
   tangkapan aslinya berbeda-beda. Gambar utuh dibuka lewat modal.
   ════════════════════════════════════════════════════════════════════════ */

.galeri { display: flex; flex-direction: column; gap: 2.5rem; }
.galeri-grup { display: flex; flex-direction: column; gap: 1rem; }

.grup-kepala {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem .8rem;
  border-bottom: 1px solid var(--rule-firm); padding-bottom: .5rem;
}
.grup-kepala .no {
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .14em;
  font-weight: 700; color: var(--jalur);
}
.grup-kepala h3 { font-size: 1.0625rem; }
.grup-kepala .catatan { font-size: .8125rem; color: var(--ink-mute); margin-left: auto; }

.kisi { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }

button.tangkap {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule-firm);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .16s, background .16s;
}
button.tangkap:hover { border-color: var(--jalur); background: var(--surface-alt); }
button.tangkap:hover .zoom, button.tangkap:focus-visible .zoom { opacity: 1; }

.tangkap .bingkai {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ground-deep); border-bottom: 1px solid var(--rule);
}
.tangkap .bingkai img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
}
.tangkap .zoom {
  position: absolute; right: .5rem; bottom: .5rem; opacity: 0;
  background: var(--jalur); color: var(--jalur-ink);
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: .28rem .5rem; border-radius: 2px; transition: opacity .16s;
}
.tangkap .isi { padding: .75rem .85rem; display: flex; flex-direction: column; gap: .25rem; }
.tangkap .isi b {
  font-size: .9rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.tangkap .isi span { font-size: .8125rem; color: var(--ink-soft); line-height: 1.45; }

/* ---- Modal pratinjau ---- */
dialog.pratinjau {
  padding: 0; border: 1px solid var(--rule-firm); border-radius: 2px;
  background: var(--surface); color: var(--ink);
  width: min(1560px, 96vw); max-width: 96vw; max-height: 94vh;
  overflow: hidden; display: flex; flex-direction: column;
}
dialog.pratinjau::backdrop { background: rgb(6 10 13 / .84); backdrop-filter: blur(3px); }
dialog.pratinjau:not([open]) { display: none; }

.pra-bar {
  display: flex; align-items: center; gap: .75rem; flex: none;
  padding: .6rem .85rem; border-bottom: 1px solid var(--rule); background: var(--surface-alt);
}
.pra-bar .grup {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--jalur); font-weight: 700;
}
.pra-bar .cacah {
  font-family: var(--f-mono); font-size: .6875rem; color: var(--ink-mute);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.pra-tombol {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--rule-firm); border-radius: 2px; background: transparent;
  color: var(--ink-soft); cursor: pointer; font-family: var(--f-mono); font-size: .9rem;
}
.pra-tombol:hover { border-color: var(--jalur); color: var(--jalur); background: var(--surface); }

.pra-badan { overflow: auto; background: var(--ground-deep); flex: 1 1 auto; }
.pra-badan img { display: block; width: 100%; height: auto; }

.pra-kaki {
  flex: none; padding: .85rem 1rem; border-top: 1px solid var(--rule);
  background: var(--surface); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline;
}
.pra-kaki h4 { font-size: 1rem; }
.pra-kaki p { font-size: .875rem; color: var(--ink-soft); max-width: 76ch; }
.pra-kaki .penuh { margin-left: auto; }

@media (max-width: 620px) {
  .pra-bar .grup { font-size: .5625rem; letter-spacing: .08em; }
  .pra-kaki { flex-direction: column; }
  .pra-kaki .penuh { margin-left: 0; }
}

/* ═══════════════════════════════════ 20 PEMERIKSA KEJANGGALAN BUP ══════
   Alat gratis yang cuma memantulkan isi berkas tidak layak disimpan orang.
   Yang membuatnya dipakai berulang adalah bagian ini: pemeriksaan yang
   biasanya baru ketahuan setelah berkasnya ditolak CEISA.

   Berkas yang bersih tetap menampilkan daftar hijau — alat yang diam saat
   semuanya benar terasa seperti alat yang rusak.
   ════════════════════════════════════════════════════════════════════════ */

.cek { border: 1px solid var(--rule-firm); background: var(--surface); }

.cek-kepala {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: baseline;
  padding: .8rem 1.15rem; border-bottom: 1px solid var(--rule); background: var(--surface-alt);
}
.cek-kepala h3 { font-size: .9375rem; }
.cek-kepala .ringkas {
  margin-left: auto; font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .08em; color: var(--ink-mute);
}
.cek-kepala .ringkas b { color: var(--tunda); }
.cek-kepala .ringkas b.bersih { color: var(--jalur); }

.cek-baris {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .2rem .7rem; padding: .7rem 1.15rem; border-bottom: 1px solid var(--rule);
}
.cek-baris:last-child { border-bottom: 0; }
.cek-baris .tanda {
  grid-row: span 2; font-family: var(--f-mono); font-weight: 700;
  font-size: .9rem; line-height: 1.3;
}
.cek-baris.aman    .tanda { color: var(--jalur); }
.cek-baris.janggal .tanda { color: var(--tunda); }
.cek-baris.janggal { background: color-mix(in srgb, var(--tunda) 7%, transparent); }
.cek-baris .judul { font-size: .875rem; font-weight: 600; }
.cek-baris .rinci {
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--ink-mute); word-break: break-word;
}

.cek-kaki {
  padding: .7rem 1.15rem; border-top: 1px solid var(--rule);
  background: var(--ground-deep); font-size: .8125rem; color: var(--ink-soft);
}

/* ═════════════════════════════════ 21 KEBERATAN ATASAN ═════════════════
   Tiga lapis per keberatan, dan lapis tengahnya yang paling berharga:
   apa yang SEBENARNYA ditanyakan. Orang jarang mengucapkan keberatannya
   yang asli — "anggarannya tahun depan saja" hampir tidak pernah berarti
   anggaran. Pembaca yang tahu bedanya menjawab pertanyaan yang benar.
   ════════════════════════════════════════════════════════════════════════ */

.keberatan { display: flex; flex-direction: column; gap: 1px; background: var(--rule);
             border: 1px solid var(--rule-firm); }
.keberatan-sel {
  background: var(--surface); padding: 1.4rem 1.35rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.keberatan-sel .no {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em;
  font-weight: 700; color: var(--jalur);
}

/* Kalimatnya ditulis dalam suara atasan — itu sebabnya diberi tanda kutip
   dan bobot tebal: pembaca harus mengenalinya sebagai kalimat yang pernah
   benar-benar dilontarkan kepadanya. */
.kalimat {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.35; color: var(--ink); text-wrap: balance;
}
.kalimat::before { content: "\201C"; }
.kalimat::after  { content: "\201D"; }

.lapis { display: grid; gap: .3rem; }
.lapis .k {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
}
.lapis.balik .k { color: var(--tunda); }
.lapis.jawab .k { color: var(--jalur); }
.lapis p { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.lapis.jawab p {
  color: var(--ink); border-left: 2px solid var(--jalur);
  padding-left: .85rem; font-size: .9375rem;
}
.lapis .tautan { font-size: .8125rem; }

.alat-salin {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  border: 1px dashed var(--rule-firm); background: var(--surface);
  padding: .9rem 1.1rem;
}
.alat-salin p { font-size: .8125rem; color: var(--ink-soft); max-width: 52ch; }

@media print {
  header.situs, .strip, .panel-periksa, .toggle, .btn, .lanjut,
  .alat-salin { display: none !important; }
  .keberatan-sel { break-inside: avoid; }
  body { background: #fff; color: #000; }
  section { break-inside: avoid; }
  .plat-nomor { display: none; }
}