/* SMK Mart POS Docs — gaya mengikuti mockup (hijau, 3 kolom). Tanpa framework. */
:root {
  --primer: #006948;
  --primer-wadah: #00855d;
  --primer-tetap: #85f8c4;
  --primer-redup: #68dba9;
  --pada-primer: #ffffff;
  --pada-primer-tetap: #002114;
  --sekunder-wadah: #86f2e4;
  --pada-sekunder-wadah: #006f66;
  --permukaan: #faf8ff;
  --wadah-terendah: #ffffff;
  --wadah-rendah: #f2f3ff;
  --wadah: #eaedff;
  --wadah-tinggi: #e2e7ff;
  --teks: #131b2e;
  --teks-varian: #3d4a42;
  --garis-luar: #6d7a72;
  --garis: #bccac0;
  --galat: #ba1a1a;
  --galat-wadah: #ffdad6;
  --pada-galat-wadah: #93000a;
  --amber-bg: #fffbeb;
  --amber-garis: #fcd34d;
  --amber-aksen: #f59e0b;
  --amber-teks: #451a03;
  --amber-ikon: #d97706;
  --tips-bg: #ecfdf5;
  --tips-garis: #6ee7b7;
  --tips-aksen: #10b981;
  --tips-teks: #064e3b;

  --f-judul: "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;
  --f-teks: Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Cascadia Mono", ui-monospace, monospace;
  --radius: 6px;
  --tinggi-atas: 56px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primer: #68dba9; --primer-wadah: #00855d; --primer-tetap: #0f3b2c; --primer-redup: #2f8f68;
    --pada-primer: #00281b; --pada-primer-tetap: #a6f5cf; --sekunder-wadah: #0f3d38; --pada-sekunder-wadah: #86f2e4;
    --permukaan: #0e1512; --wadah-terendah: #121a17; --wadah-rendah: #151e1b; --wadah: #1b2622; --wadah-tinggi: #22302b;
    --teks: #e2ebe6; --teks-varian: #aebdb5; --garis-luar: #869790; --garis: #2f3d37;
    --galat: #ffb4ab; --galat-wadah: #3a1714; --pada-galat-wadah: #ffdad6;
    --amber-bg: #241c0c; --amber-garis: #6b5216; --amber-aksen: #f59e0b; --amber-teks: #f6e3bd; --amber-ikon: #fbbf24;
    --tips-bg: #0c2219; --tips-garis: #1d5c43; --tips-aksen: #34d399; --tips-teks: #c9f2df;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primer: #68dba9; --primer-wadah: #00855d; --primer-tetap: #0f3b2c; --primer-redup: #2f8f68;
  --pada-primer: #00281b; --pada-primer-tetap: #a6f5cf; --sekunder-wadah: #0f3d38; --pada-sekunder-wadah: #86f2e4;
  --permukaan: #0e1512; --wadah-terendah: #121a17; --wadah-rendah: #151e1b; --wadah: #1b2622; --wadah-tinggi: #22302b;
  --teks: #e2ebe6; --teks-varian: #aebdb5; --garis-luar: #869790; --garis: #2f3d37;
  --galat: #ffb4ab; --galat-wadah: #3a1714; --pada-galat-wadah: #ffdad6;
  --amber-bg: #241c0c; --amber-garis: #6b5216; --amber-aksen: #f59e0b; --amber-teks: #f6e3bd; --amber-ikon: #fbbf24;
  --tips-bg: #0c2219; --tips-garis: #1d5c43; --tips-aksen: #34d399; --tips-teks: #c9f2df;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--tinggi-atas) + 16px); }
body {
  margin: 0; background: var(--permukaan); color: var(--teks);
  font: 15px/1.7 var(--f-teks); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
::selection { background: var(--sekunder-wadah); color: var(--pada-sekunder-wadah); }
/* Tanpa ligatur: JetBrains Mono mengubah -> => != >= jadi simbol panah, membingungkan saat diketik ulang */
/* !important: shorthand `font:` di aturan lain ikut mengatur ulang ligatur ke normal */
*, code, pre, kbd { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }
a { color: var(--primer); }
.ikon { flex: none; display: inline-block; vertical-align: middle; }
.lompat { position: absolute; left: -999px; }
.lompat:focus { left: 16px; top: 8px; z-index: 99; background: var(--wadah-terendah); padding: 6px 12px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--garis); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--garis-luar); }

/* ---------- Tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid var(--garis); background: var(--wadah-terendah); color: var(--teks);
  font: 600 14px/1.2 var(--f-teks); text-decoration: none; cursor: pointer; transition: background .15s, transform .1s;
}
.tombol:hover { background: var(--wadah); }
.tombol:active { transform: scale(.97); }
.tombol.primer { background: var(--primer); border-color: var(--primer); color: var(--pada-primer); }
.tombol.primer:hover { background: var(--primer-wadah); }
.tombol.kecil { padding: 6px 12px; font-size: 13.5px; font-weight: 500; }
.ikon-tombol {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--teks-varian); cursor: pointer;
}
.ikon-tombol:hover { background: var(--wadah); color: var(--teks); }
.tombol-kecil {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 7px 8px;
  border-radius: 4px; border: 1px solid var(--garis); background: var(--wadah); color: var(--primer);
  font: 600 11.5px/1.2 var(--f-mono); text-decoration: none; cursor: pointer;
}
.tombol-kecil:hover { background: var(--wadah-tinggi); }
.tombol-kecil.redup { background: var(--wadah-terendah); color: var(--teks-varian); }
kbd {
  font: 600 10px/1 var(--f-mono); padding: 3px 5px; border: 1px solid var(--garis); border-radius: 3px;
  background: var(--wadah-terendah); color: var(--teks);
}

/* ---------- Kepala ---------- */
.atas {
  position: sticky; top: 0; z-index: 40; height: var(--tinggi-atas); display: flex; align-items: center; gap: 16px;
  padding: 0 24px; background: var(--wadah-terendah); border-bottom: 1px solid var(--garis);
}
.merek { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.merek-logo {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: 4px; background: var(--primer); color: var(--pada-primer);
}
.merek-teks { display: flex; flex-direction: column; line-height: 1.1; }
.merek-teks b { font: 700 18px/1.1 var(--f-judul); color: var(--primer); letter-spacing: -.01em; white-space: nowrap; }
.merek-teks small { font: 600 10.5px/1.3 var(--f-mono); color: var(--teks-varian); letter-spacing: .02em; margin-top: 2px; }
.cari-pemicu {
  flex: 1; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--garis); border-radius: var(--radius); background: var(--wadah-rendah);
  color: var(--garis-luar); font: 13px var(--f-teks); cursor: pointer; text-align: left;
}
.cari-pemicu span { flex: 1; }
.cari-pemicu:hover { background: var(--wadah); }
.atas-kanan { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tombol-tema { border-left: 1px solid var(--garis); border-radius: 0 var(--radius) var(--radius) 0; margin-left: 4px; }
.ikon-terang { display: none; }
:root[data-theme="dark"] .ikon-gelap { display: none; }
:root[data-theme="dark"] .ikon-terang { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ikon-gelap { display: none; }
  :root:not([data-theme="light"]) .ikon-terang { display: inline-flex; }
}
.tombol-menu, .tampil-hp { display: none; }

/* ---------- Tata letak ---------- */
.tata { display: flex; min-height: calc(100vh - var(--tinggi-atas)); }
.samping {
  position: sticky; top: var(--tinggi-atas); align-self: flex-start; flex: none; width: 288px;
  height: calc(100vh - var(--tinggi-atas)); display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto; background: var(--wadah-rendah); border-right: 1px solid var(--garis);
}
.samping-atas { padding: 16px 12px; }
.kurikulum { padding: 0 12px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--garis); }
.kurikulum-judul { display: flex; align-items: center; gap: 8px; color: var(--primer); }
.kurikulum-judul span { font: 700 17px/1.4 var(--f-judul); color: var(--teks); }
.kurikulum p { margin: 2px 0 0; font: 600 11px/1.4 var(--f-mono); color: var(--teks-varian); letter-spacing: .03em; }
.modul-beranda {
  display: block; padding: 5px 10px; margin-bottom: 12px; border-radius: 4px; font-size: 13.5px;
  color: var(--teks-varian); text-decoration: none;
}
.modul-beranda:hover { background: var(--wadah); color: var(--teks); }
.modul { margin-bottom: 16px; }
.modul-judul {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--teks-varian);
  font: 600 11px/1.35 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
}
.modul.aktif .modul-judul { color: var(--primer); font-weight: 700; }
.modul ul { list-style: none; margin: 4px 0 0 8px; padding: 0 0 0 8px; border-left: 1px solid var(--garis); }
.modul.aktif ul { border-left: 2px solid var(--primer); }
.modul a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 10px;
  border-radius: 4px; color: var(--teks-varian); text-decoration: none; font-size: 13px; line-height: 1.45;
}
.modul a:hover { background: var(--wadah); color: var(--teks); }
.modul a.aktif {
  background: var(--wadah-tinggi); color: var(--primer); font-weight: 600; border-left: 2px solid var(--primer);
  padding-left: 12px;
}
.modul a.selesai span::after { content: " ✓"; color: var(--primer); font-weight: 700; }
.progres { padding: 12px; border-top: 1px solid var(--garis); background: var(--wadah); }
.progres-kartu { padding: 12px; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--wadah-terendah); }
.progres-baris { display: flex; justify-content: space-between; font: 500 11px/1.4 var(--f-mono); color: var(--teks-varian); }
.progres-baris b { color: var(--primer); }
.progres-batang { height: 8px; margin-top: 6px; border-radius: 8px; background: var(--wadah-tinggi); overflow: hidden; }
.progres-batang i { display: block; height: 100%; width: 0; background: var(--primer); transition: width .3s; }
.progres-kartu p { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--teks-varian); }

.isi { flex: 1; min-width: 0; padding: 32px 32px 0; }
.artikel { max-width: 880px; margin: 0 auto; }

.kanan {
  position: sticky; top: var(--tinggi-atas); align-self: flex-start; flex: none; width: 256px;
  height: calc(100vh - var(--tinggi-atas)); overflow-y: auto; display: flex; flex-direction: column;
  justify-content: space-between; gap: 24px; padding: 24px 16px; background: var(--wadah-terendah);
  border-left: 1px solid var(--garis);
}
.kanan-judul {
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--primer);
  font: 600 11px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.kanan-judul span { color: var(--teks); }
.toc { border-left: 1px solid var(--garis); padding-left: 12px; }
.toc a {
  display: block; padding: 4px 0 4px 10px; margin-left: -13px; border-left: 2px solid transparent;
  color: var(--teks-varian); text-decoration: none; font-size: 13px; line-height: 1.45;
}
.toc a b { font: 600 11.5px var(--f-mono); color: inherit; margin-right: 2px; }
.toc a:hover { color: var(--teks); }
.toc a.aktif { color: var(--primer); font-weight: 500; border-left-color: var(--primer); }
.bantuan { padding: 12px; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--wadah-rendah); }
.bantuan-judul { display: flex; align-items: center; gap: 8px; color: var(--primer); }
.bantuan-judul span { font: 600 13px var(--f-judul); color: var(--teks); }
.bantuan p { margin: 8px 0 10px; font-size: 11.5px; line-height: 1.55; color: var(--teks-varian); }
.bantuan .tombol-kecil + .tombol-kecil { margin-top: 6px; }

/* ---------- Kepala bab ---------- */
.remah { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--teks-varian); margin-bottom: 24px; }
.remah a { color: var(--teks-varian); text-decoration: none; }
.remah a:hover { color: var(--primer); }
.remah .pisah { color: var(--garis); }
.remah .kini { color: var(--teks); font-weight: 500; }
.kepala-bab { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--garis); }
.lencana-baris { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lencana {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px;
  font: 600 11px/1.4 var(--f-mono); letter-spacing: .03em;
}
.lencana.modul-l { background: var(--wadah-tinggi); color: var(--primer); border: 1px solid var(--garis); text-transform: uppercase; }
.lencana.waktu { background: var(--primer-tetap); color: var(--pada-primer-tetap); }
.lencana.cek-l { background: var(--sekunder-wadah); color: var(--pada-sekunder-wadah); }
.artikel h1 { font: 700 30px/38px var(--f-judul); letter-spacing: -.025em; margin: 0; }

.tujuan {
  position: relative; overflow: hidden; display: flex; gap: 14px; padding: 20px 20px 20px 24px; margin: 0 0 8px;
  border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--primer) 30%, transparent);
  background: color-mix(in srgb, var(--primer-tetap) 22%, var(--wadah-terendah));
}
.tujuan::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--primer); }
.tujuan-judul { font: 600 18px/26px var(--f-judul) !important; color: var(--primer); margin: 0 0 4px !important; border: 0 !important; padding: 0 !important; }
.tujuan p { margin: 0; color: var(--teks-varian); }
.ikon-kotak {
  flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 4px; background: var(--primer); color: var(--pada-primer);
}

/* ---------- Isi ---------- */
.bagian { padding-top: 8px; margin-bottom: 8px; }
.artikel h2 { font: 600 22px/30px var(--f-judul); letter-spacing: -.015em; margin: 36px 0 16px; }
.artikel h2.sek {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--garis);
}
.sek-no { font: 700 13px var(--f-mono); color: var(--primer); flex: none; }
.artikel h3 { font: 600 18px/26px var(--f-judul); letter-spacing: -.01em; margin: 28px 0 10px; }
.artikel p, .artikel li { color: var(--teks); }
.artikel hr { border: 0; border-top: 1px solid var(--garis); margin: 28px 0; }
.artikel code {
  font: 500 .87em/1.5 var(--f-mono); background: var(--wadah); border-radius: 4px; padding: 1px 5px;
  overflow-wrap: anywhere;
}
.artikel strong { font-weight: 600; }
.artikel img { max-width: 100%; }

.tabel { overflow-x: auto; margin: 18px 0; border: 1px solid var(--garis); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.55; background: var(--wadah-terendah); }
th {
  text-align: left; padding: 10px 12px; background: var(--wadah); border-bottom: 1px solid var(--garis);
  font: 600 11px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--teks);
}
td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--garis); color: var(--teks-varian); }
td:first-child { color: var(--teks); }
tr:last-child td { border-bottom: 0; }
td code { overflow-wrap: normal; word-break: normal; white-space: nowrap; }

/* Callout */
.callout {
  position: relative; overflow: hidden; display: flex; gap: 12px; margin: 18px 0; padding: 14px 16px 14px 20px;
  border-radius: var(--radius); border: 1px solid var(--garis); background: var(--wadah-rendah);
}
.callout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--garis-luar); }
.callout-ikon { flex: none; margin-top: 3px; }
.callout-isi { min-width: 0; flex: 1; }
.callout-isi > :first-child { margin-top: 0; }
.callout-isi > :last-child { margin-bottom: 0; }
.callout.awas { background: var(--amber-bg); border-color: var(--amber-garis); }
.callout.awas::before { background: var(--amber-aksen); }
.callout.awas .callout-ikon { color: var(--amber-ikon); }
.callout.awas p, .callout.awas li { color: var(--amber-teks); }
.callout.tips { background: var(--tips-bg); border-color: var(--tips-garis); }
.callout.tips::before { background: var(--tips-aksen); }
.callout.tips .callout-ikon { color: var(--tips-aksen); }
.callout.tips p, .callout.tips li { color: var(--tips-teks); }

/* Kartu bagian akhir bab */
.kartu-bagian {
  margin: 32px 0; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--garis);
  background: var(--wadah-terendah);
}
.kartu-bagian.cekpoin { border: 2px solid color-mix(in srgb, var(--primer) 40%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.bagian-kepala { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.bagian-judul { flex: 1; }
.bagian-judul h2 { font: 600 18px/26px var(--f-judul) !important; margin: 2px 0 0 !important; }
.bagian-sub { margin: 0; font-size: 13px; color: var(--teks-varian) !important; }
.cek-lencana {
  flex: none; padding: 4px 10px; border-radius: 4px; background: var(--wadah); color: var(--primer);
  font: 600 12px var(--f-mono); white-space: nowrap;
}
.cek-lencana.penuh { background: var(--primer); color: var(--pada-primer); }
.kartu-bagian.tanya .ikon-kotak { background: var(--sekunder-wadah); color: var(--pada-sekunder-wadah); }
.kartu-bagian.tantangan .ikon-kotak { background: #6063ee; color: #fff; }
.kartu-bagian.masalah .ikon-kotak { background: var(--galat-wadah); color: var(--pada-galat-wadah); }
.kartu-bagian > ul, .kartu-bagian > ol { margin-bottom: 0; }
.kartu-bagian .tabel { margin-bottom: 0; }

/* Checklist */
.artikel ul:has(> li.cek) { list-style: none; padding: 0; display: grid; gap: 10px; }
li.cek {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 4px;
  border: 1px solid var(--garis); cursor: pointer; font-size: 14px; line-height: 1.6; transition: background .15s;
}
li.cek:hover { background: var(--wadah-rendah); }
li.cek input { flex: none; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--primer); cursor: pointer; }
li.cek.selesai { background: color-mix(in srgb, var(--primer-tetap) 18%, transparent); }
li.cek.selesai { color: var(--teks-varian); }
.cek-teks { flex: 1; min-width: 0; }

/* ---------- Blok kode (teks, bisa disalin) ---------- */
figure.kode {
  --kode-latar: #0b1120; --kode-kepala: #0f172a; --kode-garis: #1e293b; --kode-label: #cbd5e1;
  --kode-teks: #cbd5e1; --kode-k: #c084fc; --kode-s: #fcd34d; --kode-c: #64748b; --kode-n: #fb923c;
  --kode-f: #60a5fa; --kode-b: #67e8f9; --kode-d: #f472b6; --kode-nomor: #475569;
  --kode-ins: #6ee7b7; --kode-del: #fca5a5; --kode-hunk: #94a3b8;
  --kode-ins-bg: rgba(16, 185, 129, .16); --kode-del-bg: rgba(244, 63, 94, .16);
  margin: 18px 0; border: 1px solid var(--kode-garis); border-radius: var(--radius); overflow: hidden;
  background: var(--kode-latar); box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
figure.kode.polos {
  --kode-latar: var(--wadah-terendah); --kode-kepala: var(--wadah-rendah); --kode-garis: var(--garis);
  --kode-label: var(--teks-varian); --kode-teks: var(--teks); --kode-nomor: var(--garis-luar);
}
figure.kode figcaption {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--kode-kepala);
  border-bottom: 1px solid var(--kode-garis); color: var(--kode-label); font: 500 12px/1.3 var(--f-mono);
}
.titik { display: flex; gap: 6px; flex: none; }
.titik i { width: 11px; height: 11px; border-radius: 50%; background: rgba(244, 63, 94, .8); }
.titik i:nth-child(2) { background: rgba(245, 158, 11, .8); }
.titik i:nth-child(3) { background: rgba(16, 185, 129, .8); }
figure.kode.polos .titik { display: none; }
.kode-nama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kode-bahasa {
  flex: none; padding: 1px 6px; border-radius: 3px; background: var(--kode-garis); color: #94a3b8;
  font: 600 10px/1.6 var(--f-mono); letter-spacing: .03em;
}
.tombol-salin {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid var(--kode-garis); border-radius: 4px; background: var(--kode-garis); color: var(--kode-label);
  font: 600 11.5px/1.2 var(--f-mono); cursor: pointer; transition: background .15s, color .15s;
}
.tombol-salin:hover { background: var(--primer); border-color: var(--primer); color: var(--pada-primer); }
.tombol-salin.berhasil { background: var(--primer); border-color: var(--primer); color: var(--pada-primer); }
figure.kode.polos .tombol-salin { background: var(--wadah); border-color: var(--garis); }
figure.kode.polos .tombol-salin:hover { background: var(--primer); color: var(--pada-primer); }
.kode-gulir {
  margin: 0; padding: 14px 0; overflow-x: auto; overscroll-behavior-x: contain;
  font: 13.5px/22px var(--f-mono); color: var(--kode-teks); tab-size: 4;
}
.kode-gulir:focus-visible { outline: 2px solid var(--primer); outline-offset: -2px; }
.kode-gulir code { display: block; min-width: max-content; font: inherit; background: none; padding: 0; }
.kode-gulir .baris { display: block; padding: 0 16px; min-height: 22px; white-space: pre; }
/* Nomor baris lewat CSS counter: tampil tapi tidak ikut terseleksi/tersalin */
.kode-gulir.bernomor code { counter-reset: baris; }
.kode-gulir.bernomor .baris::before {
  counter-increment: baris; content: counter(baris); display: inline-block; width: 2.2em; margin-right: 16px;
  text-align: right; color: var(--kode-nomor); user-select: none; -webkit-user-select: none;
}
/* Prompt tinker: terlihat redup, tidak bisa diseleksi/tersalin */
.kode-gulir .prompt { color: var(--kode-nomor); user-select: none; -webkit-user-select: none; }
.kode-gulir .baris.ins { background: var(--kode-ins-bg); color: var(--kode-ins); }
.kode-gulir .baris.del { background: var(--kode-del-bg); color: var(--kode-del); }
.kode-gulir .baris.hunk { color: var(--kode-hunk); }
.t-k { color: var(--kode-k); } .t-s { color: var(--kode-s); } .t-c { color: var(--kode-c); font-style: italic; }
.t-n { color: var(--kode-n); } .t-f { color: var(--kode-f); } .t-b { color: var(--kode-b); } .t-d { color: var(--kode-d); }
.baris.ins .t-ins, .baris.del .t-del { color: inherit; }
figure.kode.polos .t-k, figure.kode.polos .t-s, figure.kode.polos .t-f { color: inherit; }

/* ---------- Screenshot aplikasi ---------- */
.tangkapan { margin: 20px 0; }
.tangkapan a {
  display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--garis);
  background: var(--wadah-terendah); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); cursor: zoom-in;
}
.tangkapan img { display: block; width: 100%; height: auto; }
.tangkapan.tegak a { max-width: 340px; margin: 0 auto; }
.tangkapan figcaption {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 8px;
  font-size: 13px; line-height: 1.5; color: var(--teks-varian); text-align: center;
}
.tangkapan figcaption .ikon { margin-top: 3px; color: var(--primer); }

/* ---------- Diagram (Mermaid → SVG) ---------- */
.diagram { margin: 20px 0; }
.diagram-isi {
  overflow-x: auto; padding: 20px; border-radius: var(--radius); border: 1px solid var(--garis);
  background: var(--wadah-terendah); text-align: center;
}
.diagram-isi img { display: inline-block; height: auto; vertical-align: top; }
.diagram-gelap { display: none !important; }
:root[data-theme="dark"] .diagram-terang { display: none !important; }
:root[data-theme="dark"] .diagram-gelap { display: inline-block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diagram-terang { display: none !important; }
  :root:not([data-theme="light"]) .diagram-gelap { display: inline-block !important; }
}
.diagram figcaption {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 8px;
  font-size: 13px; line-height: 1.5; color: var(--teks-varian); text-align: center;
}
.diagram figcaption .ikon { margin-top: 3px; color: var(--primer); }

/* ---------- Navigasi bawah & kaki ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--garis); }
.pager a {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--garis); background: var(--wadah-terendah); text-decoration: none; color: var(--teks);
  transition: background .15s;
}
.pager a:hover { background: var(--wadah); }
.pager a .ikon { color: var(--primer); }
.pager small {
  display: block; font: 600 11px/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--teks-varian);
}
.pager a span { font: 600 14px/1.4 var(--f-judul); }
.pager .next { justify-content: space-between; text-align: right; }
.pager .prev { justify-content: flex-start; }
.kaki { margin-top: 32px; padding: 28px 0 44px; border-top: 1px solid var(--garis); text-align: center; font-size: 12px; color: var(--teks-varian); }
.kaki p { margin: 2px 0; color: var(--teks-varian) !important; }
.kaki p + p { font-family: var(--f-mono); font-size: 11px; }

/* ---------- Beranda ---------- */
.hero { padding: 16px 0 32px; border-bottom: 1px solid var(--garis); margin-bottom: 8px; }
.hero h1 { font: 800 40px/48px var(--f-judul) !important; letter-spacing: -.03em; margin: 14px 0 12px !important; }
.hero p { font-size: 16px; line-height: 28px; color: var(--teks-varian) !important; max-width: 720px; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.statistik { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.statistik div {
  padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--wadah-terendah);
}
.statistik dt { font: 700 20px/1.2 var(--f-judul); color: var(--primer); }
.statistik dd { margin: 0; font: 600 11px/1.4 var(--f-mono); color: var(--teks-varian); text-transform: uppercase; letter-spacing: .04em; }
.beranda-modul h2 { display: flex; align-items: center; gap: 10px; font-size: 18px !important; margin: 32px 0 12px !important; }
.beranda-modul h2 .ikon { color: var(--primer); }
.kartu { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kartu a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--garis); background: var(--wadah-terendah); text-decoration: none; color: var(--teks);
  transition: border-color .15s, background .15s;
}
.kartu a:hover { border-color: var(--primer); background: var(--wadah-rendah); }
.kartu-label { font: 700 11px var(--f-mono); color: var(--primer); text-transform: uppercase; letter-spacing: .04em; }
.kartu-judul { font: 600 14.5px/1.4 var(--f-judul); }
.kartu-waktu { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; font: 500 11.5px var(--f-mono); color: var(--teks-varian); }
.kartu a.selesai .kartu-label::after { content: " · selesai ✓"; }

/* ---------- Pencarian ---------- */
.cari {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 16px; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px);
}
.cari[hidden] { display: none; }
.cari-kotak {
  width: 100%; max-width: 580px; border-radius: 10px; border: 1px solid var(--garis); background: var(--wadah-terendah);
  box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden;
}
.cari-masuk { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--garis); color: var(--garis-luar); }
.cari-masuk input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--teks); font: 15px var(--f-teks); }
.cari-masuk kbd { cursor: pointer; }
.cari-hasil { list-style: none; margin: 0; padding: 8px; max-height: min(60vh, 420px); overflow-y: auto; }
.cari-hasil a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--radius);
  color: var(--teks); text-decoration: none; font-size: 13.5px;
}
.cari-hasil a.pilih, .cari-hasil a:hover { background: var(--wadah); color: var(--primer); }
.cari-hasil a small { flex: none; font: 600 11px var(--f-mono); color: var(--garis-luar); }
.cari-hasil a.bab span { font-weight: 600; }
.cari-hasil .kosong { padding: 14px 12px; color: var(--teks-varian); font-size: 13.5px; }
.cari-kaki {
  display: flex; justify-content: space-between; padding: 9px 16px; border-top: 1px solid var(--garis);
  background: var(--wadah-rendah); font: 500 11px var(--f-mono); color: var(--garis-luar);
}

/* ---------- Responsif ---------- */
.tirai { display: none; }
@media (max-width: 1279px) { .kanan { display: none; } }
@media (max-width: 1023px) {
  .cari-pemicu { display: none; }
  .tampil-hp { display: inline-flex; }
}
@media (max-width: 900px) {
  .atas { padding: 0 12px; gap: 8px; }
  .tombol-menu { display: inline-flex; }
  .samping {
    position: fixed; top: var(--tinggi-atas); left: 0; bottom: 0; height: auto; z-index: 50; width: min(320px, 86vw);
    transform: translateX(-100%); transition: transform .2s;
  }
  .samping.buka { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .samping.buka + .tirai { display: block; position: fixed; inset: var(--tinggi-atas) 0 0 0; z-index: 45; background: rgba(15,23,42,.35); }
  .isi { padding: 20px 16px 0; }
  .artikel h1 { font-size: 24px; line-height: 32px; }
  .hero h1 { font-size: 30px !important; line-height: 38px !important; }
  .kartu-bagian { padding: 18px 16px; }
}
@media (max-width: 640px) {
  .sembunyi-hp, .merek-teks small { display: none; }
  .merek-teks b { font-size: 16px; }
  .pager { grid-template-columns: 1fr; }
  .bagian-kepala { flex-wrap: wrap; }
  .tombol-salin span { display: none; }
}

@media print {
  .atas, .samping, .kanan, .pager, .tirai { display: none !important; }
  .isi { padding: 0; }
}