@font-face{font-family:Lora;src:url(/fonts/lora.woff) format('woff');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url(/fonts/lora-italic.woff) format('woff');font-weight:400 700;font-style:italic;font-display:swap}
:root{--paper:#f4f1e8;--ink:#193f35;--muted:#53655c;--line:#ced4c7;--accent:#d6ed87;--soft:#eef2e9;--card:#fbfaf5;--wa:#1d8f54;--serif:Lora,Georgia,'Times New Roman',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}a:focus-visible,button:focus-visible{outline:3px solid #807300;outline-offset:3px}
img{max-width:100%}
.wrap{max-width:1180px;margin:auto;padding:0 40px}
.narrow{max-width:760px;margin:auto;padding:0 20px}
/* header */
.top{position:sticky;top:0;z-index:30;background:#f4f1e8ee;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ced4c780}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 26px var(--serif);letter-spacing:-1.2px}
.logo svg{width:34px;height:34px;flex:none}
.logo span i{font-style:normal;color:#7fae3c}
.top nav{display:flex;gap:24px;align-items:center;font-size:15px}
.top nav a{text-decoration:none}.top nav a[aria-current=page]{font-weight:700}
.cta{background:var(--wa);color:#fff!important;padding:9px 18px;border-radius:999px;font-weight:600}
/* umum */
.eyebrow{text-transform:uppercase;font:12px/1.5 system-ui,sans-serif;letter-spacing:2px;margin:0 0 14px;color:var(--muted)}
h1{font:400 clamp(38px,5.4vw,64px)/1.08 var(--serif);letter-spacing:-.035em;margin:0 0 18px}
h2{font:400 clamp(26px,3.2vw,36px)/1.2 var(--serif);letter-spacing:-.02em;margin:46px 0 14px}
h3{font:400 22px/1.3 var(--serif);margin:28px 0 8px}
p{margin:0 0 18px}
.lead{font-size:19px;color:var(--muted);max-width:640px}
.muted{color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:15px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 22px #193f3526}
.button.wa{background:var(--wa);color:#fff}.button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.button.light{background:var(--accent);color:var(--ink)}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.crumbs{font-size:13px;color:var(--muted);margin:26px 0 18px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.page-head{padding-top:10px;padding-bottom:36px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.grid{display:grid;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:600 14px system-ui,sans-serif;color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* artikel */
.article{padding-bottom:60px}
.article h2{margin-top:44px}
.article ul,.article ol{padding-left:22px;margin:0 0 18px}.article li{margin-bottom:8px}
.article blockquote{margin:18px 0;padding:16px 20px;border-left:3px solid var(--ink);background:var(--card);border-radius:0 12px 12px 0;font-style:italic}
.article blockquote cite{display:block;font:normal 13px system-ui,sans-serif;color:var(--muted);margin-top:6px}
.article table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}.article th,.article td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.meta{font-size:14px;color:var(--muted);margin-bottom:26px}
.toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:0 0 26px;font-size:15px}.toc ol{margin:6px 0 0}
.promo{background:var(--ink);color:var(--paper);border-radius:22px;padding:30px;margin:40px 0}.promo p{color:#d7e0d5}.promo h3{margin-top:0;font-size:26px}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:20px}
.related a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;font:400 18px/1.35 var(--serif)}
.related a small{display:block;font:13px system-ui,sans-serif;color:var(--muted);margin-top:6px}
/* footer */
.foot{border-top:1px solid var(--line);margin-top:60px;padding:40px 0 100px;font-size:14px;color:var(--muted)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot b{display:block;color:var(--ink);margin-bottom:8px}.foot a{display:block;text-decoration:none;margin-bottom:6px}.foot a:hover{color:var(--ink)}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:30;width:56px;height:56px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px #0003}
.wa-float svg{width:30px;height:30px;fill:#fff}
@media(max-width:860px){.wrap{padding:0 20px}.top nav a:not(.cta):not(.keep){display:none}.foot .wrap{grid-template-columns:1fr 1fr}.logo{font-size:23px}.logo svg{width:30px;height:30px}}
@media(max-width:440px){.top nav a[href="/harga"]{display:none}.top nav{gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}