:root{--washi:#f7f3ea;--washi2:#efe8d8;--tinta:#1a1a2e;--ai:#1e3a8a;--ai2:#162c6b;--shu:#d9381e;--garis:#d8d0bf;--redup:#4a4a5e;
--judul:"Zen Kaku Gothic New","Noto Sans",system-ui,sans-serif;--teks:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--washi);color:var(--tinta);font-family:var(--teks);font-size:17px;line-height:1.7;
background-image:linear-gradient(0deg,rgba(216,208,191,.18) 1px,transparent 1px);background-size:100% 34px}
img{max-width:100%;height:auto;display:block}
a{color:var(--ai);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--shu)}
p,li,td,th{overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--judul);line-height:1.3;color:var(--tinta)}
.kerangka{display:block}
/* rel navigasi */
.rel{background:var(--ai);color:var(--washi);position:sticky;top:0;z-index:20;border-bottom:3px solid var(--shu)}
.rel-atas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px}
.merek{display:flex;align-items:center;gap:10px;color:var(--washi);text-decoration:none;min-height:44px}
.merek img{border:1px solid var(--washi)}
.merek-teks{display:flex;flex-direction:column;font-family:var(--judul);font-weight:700;font-size:20px;line-height:1.1}
.merek-sub{font-family:var(--teks);font-weight:400;font-size:12px;letter-spacing:.08em;opacity:.85}
.rel-tombol{min-height:44px;min-width:76px;background:transparent;color:var(--washi);border:2px solid var(--washi);border-radius:0;
font:600 15px var(--teks);cursor:pointer;padding:0 14px}
.rel-tombol[aria-expanded="true"]{background:var(--washi);color:var(--ai)}
.rel-isi{display:none;padding:4px 16px 18px;max-height:calc(100vh - 64px);overflow-y:auto}
.rel.buka .rel-isi{display:block}
.rel-grup{margin:14px 0 4px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#c9d3f0;border-bottom:1px solid rgba(247,243,234,.3);padding-bottom:4px}
.rel-list{list-style:none;margin:0;padding:0}
.rel-list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px;color:var(--washi);text-decoration:none;font-size:15px;border-left:3px solid transparent}
.rel-list a:hover{background:var(--ai2);color:#fff}
.rel-list a[aria-current]{border-left-color:var(--shu);background:var(--ai2);font-weight:600}
.rel-no{font-family:var(--judul);font-size:13px;color:#f5b3a6;min-width:22px}
.rel-kecil a{font-size:14px;min-height:40px}
.kolom{min-width:0}
.jejak{padding:14px 16px 0;font-size:14px}
.jejak ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}
.jejak li+li::before{content:"›";margin:0 6px;color:var(--redup)}
main{display:block;padding:8px 16px 32px;max-width:860px}
/* kepala artikel */
.kepala-hal{border-bottom:4px solid var(--tinta);padding-bottom:12px;margin:10px 0 18px}
.kicker{display:inline-block;margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--shu);text-transform:uppercase}
.kepala-hal h1{font-size:28px;margin:0 0 10px}
.cap-tgl{margin:0;font-size:14px;color:var(--redup);display:flex;align-items:center;gap:8px}
.stempel{display:inline-grid;place-items:center;width:26px;height:26px;border:2px solid var(--shu);color:var(--shu);font-family:var(--judul);font-size:14px;transform:rotate(-6deg)}
.foto{margin:0 0 22px;border:1px solid var(--garis);background:#fff;padding:6px}
.foto figcaption{font-size:14px;color:var(--redup);padding:8px 4px 2px}
.pembuka{font-size:18px}
/* bab */
.bab{margin:30px 0}
.bab h2{font-size:23px;margin:0 0 12px;padding-bottom:6px;border-bottom:4px solid var(--ai);display:flex;flex-direction:column;gap:2px}
.bab-no{font-family:var(--teks);font-size:13px;font-weight:700;color:var(--shu);letter-spacing:.08em}
.rumus{background:#fff;border:1px dashed var(--ai);padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px}
.tempel{border-left:6px solid var(--shu);background:var(--washi2);padding:10px 14px;margin:16px 0}
.tempel-label{margin:0;font-weight:700;color:var(--shu);font-size:14px}
/* tabel */
.gulir{overflow-x:auto;margin:14px 0;border:1px solid var(--garis);background:#fff;-webkit-overflow-scrolling:touch}
.tb{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
.tb caption{caption-side:top;text-align:left;font-size:14px;color:var(--redup);padding:8px 10px;background:var(--washi2);border-bottom:1px solid var(--garis)}
.tb thead th{background:var(--ai);color:#fff;text-align:left;padding:9px 10px;font-weight:600;font-size:14px}
.tb th,.tb td{padding:9px 10px;border-bottom:1px solid var(--garis);vertical-align:top}
.tb tbody th{font-weight:600;text-align:left}
.tb tbody tr:nth-child(even){background:#faf8f2}
.tb td:last-child{white-space:nowrap}
/* faq & lanjut */
.tanya{margin:36px 0;border:2px solid var(--tinta);background:#fff;padding:4px 16px 12px}
.tanya h2{font-size:22px;border-bottom:4px solid var(--shu);padding-bottom:6px}
.tj h3{font-size:18px;margin:16px 0 4px}
.tj p{margin:0 0 8px}
.lanjut h2{font-size:20px;border-bottom:4px solid var(--ai);padding-bottom:6px}
.lanjut-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--garis)}
.lanjut-list a{display:block;min-height:44px;padding:10px 4px;border-bottom:1px solid var(--garis);text-decoration:none;font-weight:600}
.lanjut-list a::before{content:"→ ";color:var(--shu)}
/* kartu konverter */
.kartu-konv{border:2px solid var(--ai);background:#fff;padding:14px 16px;margin:18px 0;box-shadow:6px 6px 0 var(--garis)}
.kk-judul{margin:0 0 10px;font-family:var(--judul);font-weight:700;font-size:18px;border-bottom:3px solid var(--shu);display:inline-block}
.kk-baris{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.kk-baris label{font-size:14px;font-weight:600}
.kk-baris input{font:600 20px var(--teks);padding:10px 12px;min-height:48px;border:2px solid var(--tinta);border-radius:0;background:var(--washi);color:var(--tinta);width:100%}
.kk-baris input:focus{outline:3px solid var(--shu);outline-offset:1px}
.kk-dasar{font-size:14px;color:var(--redup);margin:4px 0 10px}
.kk-reset{min-height:44px;padding:0 16px;background:#fff;border:2px solid var(--ai);color:var(--ai);border-radius:0;font:600 15px var(--teks);cursor:pointer}
.kk-reset:hover{background:var(--ai);color:#fff}
/* beranda */
.papan-kepala{display:grid;gap:16px;margin:14px 0 20px;border-top:6px solid var(--tinta);padding-top:14px}
.papan-kepala h1{font-size:28px;margin:4px 0 10px}
.stempel-kurs{border:3px double var(--shu);background:#fff;padding:12px 16px;align-self:start}
.sk-label{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--shu);letter-spacing:.06em}
.sk-angka{display:flex;justify-content:space-between;gap:10px;margin:0;padding:6px 0;border-bottom:1px dotted var(--garis);font-family:var(--judul);font-size:20px}
.sk-kiri{color:var(--redup)}
.sk-kanan{font-weight:700;color:var(--ai)}
.sk-catatan{margin:8px 0 0;font-size:13px;color:var(--redup)}
.papan-indeks h2,.blok-contoh h2,.blok-kalender h2,.blok-konv h2,.blok-cara h2{font-size:23px;border-bottom:4px solid var(--ai);padding-bottom:6px;margin:34px 0 10px}
.papan-grup h3{font-size:17px;margin:20px 0 6px;display:inline-block;background:var(--tinta);color:var(--washi);padding:3px 10px}
.papan-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.papan-item{display:flex;gap:14px;align-items:flex-start;padding:12px 6px;min-height:56px;border-bottom:1px solid var(--garis);text-decoration:none;color:var(--tinta);background:#fff}
.papan-item:hover{background:var(--washi2);color:var(--tinta)}
.papan-no{font-family:var(--judul);font-weight:700;font-size:22px;color:var(--shu);min-width:36px;line-height:1.2}
.papan-teks{display:flex;flex-direction:column}
.papan-judul{font-weight:700;color:var(--ai)}
.papan-ket{font-size:14px;color:var(--redup)}
.tiga{display:grid;gap:10px}
.tiga-sel{border:2px solid var(--tinta);background:#fff;padding:12px 14px}
.tiga-sel p{margin:0}
.tiga-label{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--shu);text-transform:uppercase}
.tiga-angka{font-family:var(--judul);font-size:26px;font-weight:700;color:var(--ai);margin:4px 0!important}
.kal{list-style:none;margin:0;padding:0;border-left:4px solid var(--ai)}
.kal li{display:grid;gap:2px;padding:10px 0 10px 16px;position:relative;border-bottom:1px dashed var(--garis)}
.kal li::before{content:"";position:absolute;left:-10px;top:16px;width:16px;height:16px;background:var(--shu);border:3px solid var(--washi)}
.kal-tgl{font-family:var(--judul);font-weight:700;color:var(--ai)}
a.sebaris{display:inline}
ol.batas li{margin-bottom:10px}
/* kaki */
.kaki{border-top:6px solid var(--ai);background:var(--washi2);padding:20px 16px 26px;margin-top:20px}
.kaki-cap{display:flex;gap:12px;align-items:flex-start;max-width:820px}
.kaki-cap p{margin:0;font-size:15px}
.hanko{flex:none;display:grid;place-items:center;width:44px;height:44px;background:var(--shu);color:#fff;font-family:var(--judul);font-size:22px;font-weight:700}
.kaki-tautan{display:flex;flex-wrap:wrap;gap:6px 10px;margin:14px 0}
.kaki-tautan a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--ai);color:var(--ai);text-decoration:none;font-size:14px;background:#fff}
.kaki-kecil{font-size:13px;color:var(--redup);margin:0}
@media (min-width:720px){
 .papan-kepala{grid-template-columns:1.5fr 1fr;align-items:start}
 .tiga{grid-template-columns:repeat(3,1fr)}
 .kal li{grid-template-columns:170px 1fr;gap:12px}
 .kepala-hal h1,.papan-kepala h1{font-size:34px}
}
@media (min-width:1000px){
 .kerangka{display:grid;grid-template-columns:270px minmax(0,1fr)}
 .rel{position:sticky;top:0;height:100vh;overflow-y:auto;border-bottom:0;border-right:4px solid var(--shu)}
 .rel-atas{padding:18px 16px 8px}
 .rel-tombol{display:none}
 .rel-isi{display:block;max-height:none;overflow:visible}
 main,.jejak{padding-left:40px;padding-right:40px}
 .kaki{padding-left:40px}
}