:root{--bg:#f7f8fa;--card:#fff;--ink:#1d2433;--muted:#5b6475;--line:#e3e6ec;--brand:#0f6b5c;--brand-2:#0b5247;--ok:#1a7f37;--warn:#9a6700;--bad:#c62828;--radius:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
header.site{background:#fff;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.logo{font-weight:700;color:var(--ink);text-decoration:none}
.logo span{color:var(--brand)}
nav.top a{margin-left:14px;font-size:15px;text-decoration:none}
h1{font-size:clamp(1.55rem,4.8vw,2.2rem);line-height:1.25;margin:24px 0 8px}
h2{font-size:1.35rem;margin:28px 0 10px}
h3{font-size:1.1rem;margin:22px 0 8px}
.lead{font-size:1.05rem;color:var(--muted);margin-top:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:16px 0}
.privacy{border-left:4px solid var(--brand);background:#eef7f5}
.privacy p{margin:.2em 0}
label{font-weight:600;display:block;margin:12px 0 6px}
select,textarea,input[type=file]{width:100%;font:inherit;padding:10px;border:1px solid #c9ced8;border-radius:8px;background:#fff}
textarea{min-height:180px;resize:vertical}
.tabs{display:flex;gap:6px;margin-top:14px}
.tabs button{flex:1;padding:10px;border:1px solid #c9ced8;background:#fff;border-radius:8px;font:inherit;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--brand);color:#fff;border-color:var(--brand)}
.drop{border:2px dashed #c9ced8;border-radius:10px;padding:16px;text-align:center;margin-top:10px}
.drop p{margin:.3em 0}
.btn,button.primary{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px 18px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover,button.primary:hover{background:var(--brand-2)}
button.primary{width:100%;margin-top:16px;font-size:1.05rem}
button:disabled{opacity:.6;cursor:wait}
.btn-ghost{background:#fff;border:1px solid #c9ced8;border-radius:8px;padding:10px 14px;font:inherit;cursor:pointer}
details{margin-top:12px}
summary{cursor:pointer;font-weight:600}
.err{color:var(--bad);font-weight:600;min-height:1em}
.small{font-size:.92rem}
.muted{color:var(--muted)}
.score{display:flex;gap:16px;align-items:center;padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.score-num{flex:0 0 auto;width:92px;height:92px;border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:22px;border:8px solid var(--ok);font-weight:800}
.score-num span{font-size:2rem;line-height:1}
.score-num small{font-size:.8rem;color:var(--muted)}
.score-cukup .score-num{border-color:#2f8f6b}.score-perlu .score-num{border-color:var(--warn)}.score-buruk .score-num{border-color:var(--bad)}
.score-label{font-weight:700;margin:0 0 4px}
.score p{margin:.2em 0}
.warnline{color:var(--warn)}
.checks{display:grid;gap:8px}
.check{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.check p{margin:.1em 0}
.ic{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--ok);margin-top:2px}
.check-warn .ic{background:var(--warn)}.check-bad .ic{background:var(--bad)}.check-na .ic{background:#8a93a5}
.pill{display:inline-block;font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:0 8px;color:var(--muted);font-weight:500}
.kw{display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:700px){.kw{grid-template-columns:1fr 1fr}}
.kw-h{font-weight:700;margin:.3em 0}.kw-h.ok{color:var(--ok)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #c9ced8;border-radius:999px;padding:2px 10px;font-size:.9rem;background:#fff}
.chip-ok{border-color:#9ccfb0;background:#eaf6ee}
.cta{margin-top:22px;border:1px solid #bfe0d7;background:#f1faf7;border-radius:var(--radius);padding:16px}
.cta-h{font-weight:700;margin-top:0}
.cta .btn{white-space:normal}
.disclaimer{margin-top:18px}
table.rules{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff}
table.rules th,table.rules td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.faq h3{margin-bottom:4px}
.faq p{margin-top:0}
footer.site{margin-top:40px;border-top:1px solid var(--line);background:#fff;padding:20px 0;font-size:.92rem;color:var(--muted)}
footer.site a{margin-right:12px}
article .meta{color:var(--muted);font-size:.92rem}
article .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:14px 0}
article pre{white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.92rem;overflow-x:auto}
.draft{background:#fff4d6;border:1px solid #e6c56b;border-radius:10px;padding:10px 14px;font-weight:600}
.related a{display:block;margin:4px 0}
.mt0{margin-top:0}
textarea.jd{min-height:120px}
.tpl-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
@media(min-width:640px){.tpl-grid{grid-template-columns:1fr 1fr}}
.tpl{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;gap:10px;align-items:flex-start}
.tpl img{width:110px;height:110px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:0 0 auto}
.tpl p{margin:0}
article ol li,article ul li{margin:.2em 0}
.related h3{margin-top:14px}