/* Panduan statik SistemGuru.My — gaya minimum, sengaja ringan.
   Halaman ini wujud untuk DIBACA dan DIINDEKS, bukan untuk meniru aplikasi. */
:root{--hijau:#059669;--hijau-gelap:#047857;--teks:#111827;--lembut:#6B7280;--garis:#E5E7EB;--bg:#F9FAFB}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--teks);line-height:1.65;background:#fff}
.bungkus{max-width:760px;margin:0 auto;padding:0 20px}
header.atas{background:linear-gradient(135deg,var(--hijau-gelap),var(--hijau));color:#fff;padding:14px 0}
header.atas a{color:#fff;text-decoration:none;font-weight:800}
header.atas .sub{opacity:.85;font-size:14px;font-weight:400}
nav.breadcrumb{font-size:14px;color:var(--lembut);padding:14px 0 0}
nav.breadcrumb a{color:var(--hijau-gelap)}
h1{font-size:30px;line-height:1.25;margin:14px 0 6px}
.ringkas{font-size:18px;color:var(--lembut);margin:0 0 14px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.meta li{font-size:13px;font-weight:700;color:var(--lembut);border:1px solid var(--garis);border-radius:999px;padding:4px 11px}
.perlu{background:var(--bg);border:1px solid var(--garis);border-radius:10px;padding:12px 14px;margin:0 0 22px;font-size:15px}
.perlu b{display:block;margin-bottom:4px}
h2{font-size:22px;margin:30px 0 4px;padding-top:18px;border-top:1px solid var(--garis)}
h2 .cara{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--hijau);border-radius:999px;padding:3px 9px;vertical-align:middle;margin-right:8px}
h2 .cara.semi{background:#3B82F6}
h2 .cara.agent{background:#6D28D9}
.lead{color:var(--lembut);margin:6px 0 12px}
ol.langkah{padding-left:22px}
ol.langkah li{margin-bottom:10px}
.nota{background:#ECFDF5;border-left:4px solid var(--hijau);border-radius:0 8px 8px 0;padding:11px 14px;margin:16px 0;font-size:15px}
.nota.amaran{background:#FFFBEB;border-left-color:#F59E0B}
.cta{display:block;text-align:center;background:var(--hijau);color:#fff;text-decoration:none;font-weight:800;border-radius:10px;padding:14px 18px;margin:28px 0}
footer.bawah{border-top:1px solid var(--garis);margin-top:34px;padding:20px 0 40px;font-size:15px;color:var(--lembut)}
footer.bawah ul{padding-left:20px;margin:8px 0 0}
footer.bawah a{color:var(--hijau-gelap)}
@media(prefers-color-scheme:dark){
  :root{--teks:#F3F4F6;--lembut:#9CA3AF;--garis:#374151;--bg:#1F2937}
  body{background:#111827}
  .nota{background:rgba(5,150,105,.14)}
  .nota.amaran{background:rgba(245,158,11,.14)}
}