/* ═══════════════════════════════════════════════════════════════════
   LERN Design System — stylesheet bersama halaman panduan Semesta
   Token sumber: app-showcase/static/style.css
                 (blok "LERN Design System tokens — migrated 2026-06-08")
   Dipakai oleh: panduan.html, panduan-*.html, tentang.html, panduan-aksi.html
   JANGAN tambah <style> inline di halaman lagi — tambahkan aturan di sini.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fonts: Satoshi (self-host, public/fonts/) ── */
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* primary brand — Zaffre (LERN $primary-*) */
  --lern-primary:#0519B0; --lern-primary-hover:#243BBD; --lern-primary-pressed:#000B8A;
  --lern-primary-100:#D8DFF0; --lern-primary-200:#98ABE3;
  /* netral / permukaan (LERN $neutral-*) */
  --bg:#F2F2F2; --surface:#FFFFFF; --border:#E0E0E0; --divider:#F2F2F2;
  --surface-2:#E8E8E8; --surface-3:#F7F7F7;
  /* teks (LERN $text-*) */
  --ink:#333333; --ink-2:#53555A; --muted:#6B6B6B;
  /* semantik */
  --ok:#008387; --ok-bg:#D5EDE9;
  --warn:#7A5200; --warn-bg:#FFF5DE;
  --bad:#EB0B54; --bad-bg:#FFE6EA;
  /* tipografi */
  --font-body:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Courier New',Courier,monospace;
  --measure:68ch;
  /* radius (LERN) */
  --r-sm:8px; --r-md:10px; --r-pill:100px;
  /* spacing (LERN, kelipatan 8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-24:96px;
  /* bayangan (LERN — cuma 3 token) */
  --shadow-sm:0 1px 4px rgba(51,51,51,.10);
  --shadow-md:0 4px 16px rgba(51,51,51,.10);
  --shadow-lg:0 8px 32px rgba(51,51,51,.10);
  /* gerak (LERN) */
  --ease-out:cubic-bezier(.16,1,.3,1); --dur:140ms;
  --topbar-h:52px;
}

/* ── dasar ── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:var(--s-6) var(--s-12) var(--s-24)}

/* ═══ navbar — SENGAJA IDENTIK dengan .topbar console (style.css) ═══ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--border);padding:var(--s-2) var(--s-12);
  min-height:var(--topbar-h);position:sticky;top:0;z-index:5}
.brand{font-size:16px;font-weight:700;display:flex;align-items:center;gap:var(--s-2)}
.brand img{width:22px;height:22px;border-radius:4px}
.brand .sub{color:var(--muted);font-weight:400;font-size:12px;margin-left:var(--s-2);display:none}
.topbar-right{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.search-wrap{flex:1 1 240px;max-width:420px;min-width:180px;margin:0}
.search-wrap input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:0 var(--s-3) 0 34px;font:400 14px var(--font-body);color:var(--ink);background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center}
.search-wrap input:focus{outline:none;border-color:var(--lern-primary);box-shadow:0 0 0 3px var(--lern-primary-100)}
.search-wrap input::placeholder{color:var(--muted)}
/* tombol navbar — nilai sama dengan .btn console */
.btn{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);
  padding:var(--s-2) 20px;font:500 14px var(--font-body);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--s-1);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent}
.btn.small{padding:var(--s-1) var(--s-3);font-size:12px}
.topbar-right .btn{white-space:nowrap}
header{border-bottom:1px solid var(--border);padding-bottom:var(--s-4);margin-bottom:var(--s-6)}
h1{font-size:clamp(24px,1.6vw + 14px,30px);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0 0 var(--s-1)}
h2{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:var(--s-8) 0 var(--s-3);padding-top:var(--s-1)}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:var(--s-6) 0 var(--s-2)}
p,li{max-width:var(--measure)}
a{color:var(--lern-primary)}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lern-primary);outline-offset:2px;border-radius:4px}
::selection{background:var(--lern-primary);color:#FFFFFF}
.meta{color:var(--muted);font-size:12px}
.sub{color:var(--muted);margin:0 0 var(--s-3);max-width:var(--measure)}
.sistem{color:var(--muted);font-style:italic}
.mut{color:var(--muted)}
.ok{color:var(--ok);font-weight:600}
.bad{color:var(--bad);font-weight:600}

/* ── kode & contoh output ── */
code,.k{font-family:var(--font-mono);font-size:14px;background:var(--divider);border:1px solid var(--border);border-radius:var(--s-1);padding:1px 5px}
pre{background:#1D2027;color:#F2F2F2;border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);overflow-x:auto;font:14px/1.5 var(--font-mono)}

/* ── tabel ── */
table{width:100%;border-collapse:collapse;margin:var(--s-3) 0;font-size:14px;background:var(--surface)}
th,td{border:1px solid var(--border);padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top}
th{background:var(--divider);font-weight:700}

/* ── kotak ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-4) 0}
.gold{border-left:4px solid var(--lern-primary);background:var(--lern-primary-100);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s-4);margin:var(--s-4) 0}
.warn{border-left:4px solid var(--warn);background:var(--warn-bg);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s-4);margin:var(--s-4) 0}
.danger{border-left:4px solid var(--bad);background:var(--bad-bg);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s-4);margin:var(--s-4) 0}
.info{border-left:4px solid var(--lern-primary);background:var(--lern-primary-100);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s-4);margin:var(--s-6) 0 0;font-size:14px}

/* ── navigasi halaman ── */
.toc{columns:2;column-gap:var(--s-8);font-size:14px}
.toc a{color:var(--lern-primary);text-decoration:none}
.crumb{margin-bottom:var(--s-2);font-size:12px}
.crumb a{color:var(--lern-primary);text-decoration:none;font-weight:700}
footer{margin-top:var(--s-12);padding-top:var(--s-4);border-top:1px solid var(--border);color:var(--muted);font-size:12px}

/* ── checklist ── */
ol.check{list-style:none;padding-left:0}
ol.check li{margin:var(--s-1) 0;padding-left:var(--s-6);position:relative}
ol.check li:before{content:"☐";position:absolute;left:var(--s-1);color:var(--lern-primary)}

/* ── daftar berbutir custom ── */
ul.ket{list-style:none;padding-left:0}
ul.ket li{padding-left:var(--s-6);position:relative}
ul.ket li:before{content:"•";position:absolute;left:var(--s-2);color:var(--lern-primary)}

/* ═══════════════ katalog panduan (panduan.html) ═══════════════ */
.list{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-4)}
/* baris ringkas katalog — ukuran/nilai SENGAJA sama dengan .arow console */
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.item:hover{border-color:var(--lern-primary);background:var(--surface-3)}
.item .row1{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.item .emoji{font-size:16px;line-height:1}
.item .judul{font-size:14px;font-weight:600;margin:0}
.item .ctag{font-size:12px;font-weight:600;border-radius:4px;padding:2px var(--s-2);background:var(--lern-primary-100);color:var(--lern-primary);white-space:nowrap}
.item .desc{color:var(--muted);margin:2px 0 0;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .kaki{margin-top:var(--s-2);font-size:12px;color:var(--muted);display:flex;gap:var(--s-4);flex-wrap:wrap}
.item .buka{font-size:12px;font-weight:700;color:var(--lern-primary-pressed);white-space:nowrap}

.layout{display:flex;gap:var(--s-8);align-items:flex-start}
/* sidebar = panel putih ber-hairline — pola LERN .dash-sidebar, SAMA dengan rail console */
.sidebar{flex:0 0 196px;align-self:flex-start;position:sticky;top:calc(var(--topbar-h) + var(--s-4));max-height:calc(100dvh - var(--topbar-h) - var(--s-8));overflow:auto;
  padding:var(--s-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.main{flex:1 1 auto;min-width:0}
.katjudul{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--border);margin:0 0 var(--s-2)}
.katwrap{display:flex;flex-direction:column;gap:2px}
.kat{display:flex;align-items:center;gap:var(--s-2);width:100%;text-align:left;background:none;border:none;border-radius:var(--r-sm);
  padding:var(--s-2) var(--s-3);font:500 14px/1.35 var(--font-body);color:var(--ink-2);cursor:pointer;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.kat:hover{background:var(--surface-2);color:var(--ink)}
.kat.aktif{background:var(--lern-primary-100);color:var(--lern-primary-pressed)}
.kat:focus-visible{outline:2px solid var(--lern-primary);outline-offset:-1px}
.kat .n{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
.kat.aktif .n{color:var(--lern-primary-pressed)}
.kat.nol{opacity:.45}
.kosong{display:none;color:var(--muted);padding:var(--s-4) 0}

/* ═══════════════ katalog aksi (panduan-aksi.html, generated) ═══════════════ */
nav.isib{margin:var(--s-4) 0 var(--s-1);font-size:14px;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4)}
nav.isib a{color:var(--lern-primary);text-decoration:none}
#hit{font-size:12px;color:var(--muted);margin:var(--s-1) 0 0}
h2[id^="g-"]{margin:var(--s-8) 0 var(--s-1);padding-top:var(--s-3);border-top:1px solid var(--border)}
.jml{font-size:12px;font-weight:700;color:var(--lern-primary);background:var(--lern-primary-100);border:1px solid var(--lern-primary-100);border-radius:var(--r-pill);padding:2px var(--s-2);vertical-align:middle}
.aksi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4)}
.aksi.hidden{display:none}
.nama{font-size:18px;font-weight:600;letter-spacing:-.01em}
.lencana{display:flex;gap:var(--s-1);flex-wrap:wrap;margin:var(--s-2) 0 0}
.b{font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:2px var(--s-2);border:1px solid var(--border);background:var(--divider);color:var(--muted)}
.b.dry{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bg)}
.b.langsung{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bg)}
.b.arg{color:var(--lern-primary);background:var(--lern-primary-100);border-color:var(--lern-primary-100)}
.desc{margin:var(--s-2) 0 0;max-width:var(--measure)}
.sheet-info{font-size:14px;margin:var(--s-2) 0 0;color:var(--muted)}
.sheet-info a,.terkait a{color:var(--lern-primary)}
.terkait{font-size:14px;margin:0 0 var(--s-3)}
.teknis{font-size:12px;color:var(--muted);margin:var(--s-1) 0 0}

/* ═══════════════ responsif (breakpoint LERN: 880 / 720 / 480) ═══════════════ */
@media (min-width:881px){ .brand .sub{display:inline} }
@media (max-width:880px){
  .wrap{padding:var(--s-6) var(--s-4) var(--s-16)}
  .item{grid-template-columns:1fr;gap:var(--s-2)}
  .layout{flex-direction:column;gap:var(--s-4)}
  .sidebar{position:static;flex:none;width:100%;max-height:none}
  .katjudul{display:none}
  .katwrap{flex-direction:row;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-2)}
  .kat{width:auto;white-space:nowrap;border:1px solid var(--border)}
  .kat.aktif{border-color:transparent}
}
@media (max-width:720px){
  .topbar{padding:var(--s-2) var(--s-4)}
  .topbar-right{order:2;flex:0 0 100%;gap:var(--s-1)}
  .search-wrap{order:3;flex-basis:100%;max-width:none}
  .toc{columns:1}
  h1{font-size:24px}
  h2{font-size:18px}
}
@media (max-width:480px){
  body{font-size:15px}
  .wrap{padding:var(--s-4) var(--s-3) var(--s-16)}
}

/* ── print ── */
@media print{
  body{background:#FFFFFF;font-size:12pt}
  .wrap{padding:0;max-width:none}
  .cari{display:none}
  h2{page-break-after:avoid}
  table,pre,.card,.gold,.warn,.danger,.item,.aksi{page-break-inside:avoid;break-inside:avoid}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}