/* Kalkulator Pesangon UI · Brand C "Suara Pasal" — dibuat tools/site-ui.mjs, jangan diedit manual */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,700..900&display=swap');
:root{--pp-ink:#111;--pp-text:#2a2a28;--pp-muted:#5b5950;--pp-line:#dcd8cb;--pp-soft:#f1eee4;--pp-bg:#faf8f2;--pp-card:#fff;--pp-yellow:#ffe14d;--pp-yellow50:#fff7cc;
--pp-blue:#111;--pp-blue7:#111;--pp-indigo:#111;--pp-blue50:#fff7cc;--pp-blue100:#ffe14d;--pp-green:#047857;--pp-amber50:#fff7cc;--pp-amber2:#111;--pp-amber8:#111;
--pp-r:14px;--pp-shadow:4px 4px 0 #111;--pp-cond:'Archivo','Arial Narrow',system-ui,sans-serif}
.pp-cond{font-family:var(--pp-cond);font-stretch:75%;font-weight:900;letter-spacing:-.01em}
.pp-hl{background:var(--pp-yellow);color:var(--pp-ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* header */
.pp-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:2px solid var(--pp-ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.pp-header__in{max-width:72rem;margin:0 auto;padding:0 16px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pp-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none!important}
.pp-mark{flex:none;display:block}
.pp-word{font-family:var(--pp-cond);font-stretch:75%;font-weight:900;font-size:17px;line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:var(--pp-ink)}
.pp-nav{display:flex;gap:4px}
.pp-header .pp-nav a,.pp-header .pp-mnav a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:700;color:var(--pp-ink);text-decoration:none;padding:0 12px;border-radius:8px;border:2px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s}
.pp-header .pp-nav a:hover{border-color:var(--pp-ink)}
.pp-header .pp-nav a[aria-current],.pp-header .pp-mnav a[aria-current]{background:var(--pp-yellow);border-color:var(--pp-ink)}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:13.5px;font-weight:800;background:var(--pp-ink);color:#fff!important;text-decoration:none;padding:0 16px;border-radius:10px;border:2px solid var(--pp-ink);cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s,background .12s;font-family:inherit}
.pp-btn:hover{background:var(--pp-yellow);color:var(--pp-ink)!important;box-shadow:3px 3px 0 var(--pp-ink);transform:translate(-2px,-2px)}
.pp-mnav{display:none;gap:6px;overflow-x:auto;padding:8px 12px;border-top:2px solid var(--pp-ink);background:#fff;scrollbar-width:none}.pp-mnav::-webkit-scrollbar{display:none}
@media (max-width:900px){.pp-nav{display:none}.pp-mnav{display:flex}.pp-header__in{height:60px}}
@media (max-width:420px){.pp-btn{padding:8px 12px;font-size:12.5px}.pp-word{font-size:15px}.pp-mark{width:34px;height:34px}}
/* footer */
.pp-footer{background:var(--pp-ink);color:#cfccc1;margin-top:72px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13.5px;border-top:6px solid var(--pp-yellow)}
.pp-footer .pp-word{color:#fff}
.pp-footer__in{max-width:72rem;margin:0 auto;padding:48px 16px 28px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.pp-footer__brand p{margin:14px 0 0;line-height:1.7;max-width:28rem}
.pp-footer h4{margin:4px 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pp-yellow)}
.pp-footer ul{list-style:none;margin:0;padding:0}.pp-footer li{margin:0}
.pp-footer a{color:#e9e6dc!important;text-decoration:none}.pp-footer a:hover{color:var(--pp-yellow)!important;text-decoration:underline}
.pp-footer li a{display:inline-flex;align-items:center;min-height:44px}
.pp-footer__base{max-width:72rem;margin:0 auto;padding:18px 16px 28px;border-top:1px solid #2e2e2c;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font-size:12px;color:#a9a69b}
@media (max-width:720px){.pp-footer__in{grid-template-columns:1fr 1fr}.pp-footer__brand{grid-column:1/-1}}
/* halaman konten */
.pp-body{margin:0;background:var(--pp-bg);color:var(--pp-text);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.pp-body *{box-sizing:border-box}
.pp-hero{background:#fff;border-bottom:2px solid var(--pp-ink);padding:32px 16px 22px}
.pp-wrap{max-width:46rem;margin:0 auto}.pp-wide{max-width:72rem;margin:0 auto}
.pp-main{padding:0 16px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--pp-muted);margin:0 0 18px}
.pp-body .crumb a{color:var(--pp-muted);text-decoration:underline;text-underline-offset:3px}.crumb a:hover{color:var(--pp-ink)}.crumb span{color:var(--pp-ink)}
.pp-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--pp-ink);color:var(--pp-ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin:0 0 16px}
.pp-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pp-yellow);box-shadow:0 0 0 2px var(--pp-ink)}
.pp-body h1{overflow-wrap:anywhere;font-family:var(--pp-cond);font-stretch:75%;font-size:clamp(36px,6vw,60px);line-height:.98;letter-spacing:-.005em;font-weight:900;color:var(--pp-ink);margin:0 0 14px}
.pp-lead{font-size:17.5px;color:#3d3b35;margin:0 0 6px;line-height:1.65}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--pp-muted);margin:14px 0 0}.meta a{color:var(--pp-muted)}
.pp-body h2{font-family:var(--pp-cond);font-stretch:75%;font-size:clamp(25px,3.2vw,32px);line-height:1.05;font-weight:900;color:var(--pp-ink);margin:52px 0 14px;scroll-margin-top:84px}
.pp-body h3{font-size:17px;font-weight:800;color:var(--pp-ink);margin:28px 0 8px}
.pp-body p{margin:0 0 16px}.pp-body article a,.pp-body .pp-lead a,.pp-body .note a{color:var(--pp-ink);text-decoration:underline;text-decoration-color:var(--pp-yellow);text-decoration-thickness:3px;text-underline-offset:3px;font-weight:600}
.pp-body article a:hover,.pp-body .pp-lead a:hover{background:var(--pp-yellow)}
.pp-body strong{color:var(--pp-ink)}
.pp-body ol,.pp-body ul{padding-left:22px;margin:0 0 18px}.pp-body li{margin:0 0 8px}
.pp-body article>ol{counter-reset:s;list-style:none;padding:0}
.pp-body article>ol>li{counter-increment:s;position:relative;padding:14px 16px 14px 60px;background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:12px;margin:0 0 12px}
.pp-body article>ol>li::before{content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:8px;background:var(--pp-yellow);border:2px solid var(--pp-ink);color:var(--pp-ink);font-family:var(--pp-cond);font-stretch:75%;font-weight:900;font-size:17px;display:grid;place-items:center}
/* jawaban singkat */
.answer{position:relative;background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:var(--pp-r);padding:20px 22px 20px 30px;margin:26px 0 24px;box-shadow:var(--pp-shadow);overflow:hidden}
.answer::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:var(--pp-yellow);border-right:2px solid var(--pp-ink)}
.pp-body .answer h2{font-family:'Plus Jakarta Sans',sans-serif;font-stretch:100%;margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pp-ink)}
.pp-body .answer p{margin:0;color:var(--pp-ink);font-weight:600;font-size:16.5px;line-height:1.65}
/* tombol */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:var(--pp-ink);color:#fff!important;text-decoration:none!important;font-weight:800;font-size:15px;padding:0 22px;border-radius:12px;border:2px solid var(--pp-ink);margin:4px 0 8px;transition:transform .12s,box-shadow .12s,background .12s}
.cta:hover{background:var(--pp-yellow);color:var(--pp-ink)!important;box-shadow:4px 4px 0 var(--pp-ink);transform:translate(-2px,-2px)}
.pp-ctacard{margin:52px 0 8px;border-radius:18px;padding:30px 28px;background:var(--pp-yellow);color:var(--pp-ink);border:2px solid var(--pp-ink);box-shadow:6px 6px 0 var(--pp-ink)}
.pp-body .pp-ctacard h2{color:var(--pp-ink);margin:0 0 8px;font-size:clamp(26px,3.4vw,34px)}.pp-ctacard p{margin:0 0 18px;color:#2a2a28}
.pp-ctacard .cta:hover{background:#fff}
.pp-ctacard .pp-ghost{display:inline-flex;margin-left:14px;color:var(--pp-ink);font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px}
/* tabel */
.pp-body table{width:100%;border-collapse:separate;border-spacing:0;background:var(--pp-card);font-size:14.5px;margin:10px 0 18px;border:2px solid var(--pp-ink);border-radius:12px;overflow:hidden}
.pp-body th,.pp-body td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--pp-line)}
.pp-body tr:last-child td{border-bottom:0}
.pp-body th{background:var(--pp-ink);font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;border-bottom:2px solid var(--pp-ink)}
.pp-body th small{text-transform:none;letter-spacing:0;font-weight:600;color:#d8d5ca}
.pp-body td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--pp-ink)}
.pp-body tbody tr:hover td{background:#fffbe6}
.pp-body table.facts tr:has(td:first-child strong) td{background:var(--pp-yellow);font-weight:800}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 18px;border-radius:12px}.scroll table{min-width:620px;margin:0}
.formula{display:inline-block;font-size:17px;font-weight:800;color:var(--pp-ink);background:var(--pp-yellow);border:2px solid var(--pp-ink);border-radius:10px;padding:10px 16px;box-shadow:3px 3px 0 var(--pp-ink);font-variant-numeric:tabular-nums}
/* catatan, kutipan, FAQ */
.note{display:block;background:var(--pp-yellow50);border:2px solid var(--pp-ink);color:var(--pp-ink);border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.6}
.pp-body blockquote{margin:10px 0 18px;background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:12px;padding:16px 18px 16px 20px;position:relative}
.pp-body blockquote .q{font-weight:800;color:var(--pp-ink);margin:0 0 6px}.pp-body blockquote p:last-child{margin:0}
.pp-body details{background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:12px;margin:0 0 10px;transition:box-shadow .15s}
.pp-body details[open]{box-shadow:var(--pp-shadow)}
.pp-body summary{list-style:none;cursor:pointer;font-weight:800;color:var(--pp-ink);padding:15px 48px 15px 18px;position:relative;min-height:44px}
.pp-body summary::-webkit-details-marker{display:none}
.pp-body summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:3px solid var(--pp-ink);border-bottom:3px solid var(--pp-ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.pp-body details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pp-body details p{margin:0;padding:0 18px 16px;color:var(--pp-text)}
/* daftar tautan sebagai kartu */
.rel{list-style:none!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.rel li{margin:0}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:100%;background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:12px;padding:14px 16px;color:var(--pp-ink);font-weight:700;font-size:14.5px;text-decoration:none;transition:box-shadow .12s,transform .12s,background .12s}
.rel a::after{content:"→";font-weight:900}
.rel a:hover{background:var(--pp-yellow);box-shadow:var(--pp-shadow);transform:translate(-2px,-2px)}
.src{font-size:14px;color:var(--pp-muted)}
/* hub & kartu */
.pp-group{margin:44px 0 0}.pp-group>p{color:var(--pp-muted);margin:-6px 0 14px;font-size:14.5px}
.pp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.pp-card{display:flex;flex-direction:column;gap:10px;background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:var(--pp-r);padding:18px 18px 16px;text-decoration:none!important;color:var(--pp-text)!important;transition:box-shadow .12s,transform .12s}
.pp-card:hover{box-shadow:6px 6px 0 var(--pp-ink);transform:translate(-3px,-3px)}
.pp-card h3{overflow-wrap:anywhere;hyphens:auto;margin:0!important;font-size:16.5px!important;line-height:1.35;color:var(--pp-ink)}
.pp-card p{margin:0!important;font-size:13.5px;line-height:1.55;color:var(--pp-muted)}
.pp-card__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:4px}
.pp-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--pp-yellow);color:var(--pp-ink);border:1.5px solid var(--pp-ink);white-space:nowrap}
.pp-badge--muted{background:#fff;color:var(--pp-muted);border-color:var(--pp-line);font-weight:600}
.pp-badge--up{background:#d9f5e6;color:#065f46;border-color:#065f46}.pp-badge--down{background:#ffe1e1;color:#9f1239;border-color:#9f1239}
.pp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0 4px}
.pp-stat{background:var(--pp-card);border:2px solid var(--pp-ink);border-radius:12px;padding:14px 16px}.pp-stat b{display:block;font-family:var(--pp-cond);font-stretch:75%;font-weight:900;font-size:28px;color:var(--pp-ink);line-height:1.1}.pp-stat span{font-size:12.5px;color:var(--pp-muted)}
@media (max-width:640px){.pp-body{font-size:15.5px}.answer{padding:16px 16px 16px 26px}.pp-ctacard{padding:24px 18px}.pp-ctacard .pp-ghost{margin:12px 0 0;display:flex}.pp-body h2{margin-top:40px}}
/* ===== Jembatan Tailwind: halaman lama (beranda, dasar hukum, panduan, syarat) ikut palet Brand C ===== */
html body.bg-slate-50{background:var(--pp-bg)}
html body .bg-blue-600,html body .bg-blue-700,html body .bg-blue-800,html body .bg-blue-900,html body .bg-indigo-900{background-color:var(--pp-ink)}
html body .hover\:bg-blue-500:hover,html body .hover\:bg-blue-600:hover,html body .hover\:bg-blue-800:hover{background-color:#000}
html body button.bg-blue-700,html body a.bg-blue-700,html body .mcta .bg-blue-700{border:2px solid var(--pp-ink);transition:transform .12s,box-shadow .12s}
html body button.bg-blue-700:hover,html body a.bg-blue-700:hover{background:var(--pp-yellow);color:var(--pp-ink);box-shadow:4px 4px 0 var(--pp-ink);transform:translate(-2px,-2px)}
html body button.bg-blue-700 .bg-blue-900{background:var(--pp-yellow);color:var(--pp-ink)}
html body .from-blue-900{--tw-gradient-from:#111 var(--tw-gradient-from-position);--tw-gradient-stops:#111,#111}
html body .to-indigo-900{--tw-gradient-to:#111 var(--tw-gradient-to-position)}
html body .bg-blue-50,html body .bg-blue-100,html body .bg-blue-50\/70{background-color:var(--pp-yellow50)}
html body .text-blue-600,html body .text-blue-700,html body .text-blue-900{color:var(--pp-ink)}
html body a.text-blue-700,html body a.text-blue-600{text-decoration:underline;text-decoration-color:var(--pp-yellow);text-decoration-thickness:3px;text-underline-offset:3px}
html body .text-blue-200,html body .text-blue-300{color:var(--pp-yellow)}
html body .border-blue-600,html body .border-blue-900{border-color:var(--pp-ink)}
html body .border-blue-200{border-color:var(--pp-ink)}
html body .ring-blue-500\/20{--tw-ring-color:rgba(255,225,77,.7)}
html body .focus\:ring-blue-500:focus{--tw-ring-color:var(--pp-yellow)}
html body .bg-slate-900{background-color:var(--pp-ink)}
html body .text-slate-900{color:var(--pp-ink)}
html body .border-slate-200{border-color:#d6d2c4}
html body .bg-slate-50{background-color:#f6f4ec}
html body .bg-amber-50{background-color:var(--pp-yellow50)}html body .border-amber-300{border-color:var(--pp-ink)}
body:not(.pp-body) h1,body:not(.pp-body) main h2.text-2xl,body:not(.pp-body) main h2.text-3xl{font-family:var(--pp-cond);font-stretch:75%;font-weight:900;letter-spacing:-.005em}