:root{--biru:#133a87;--biru-2:#1c56ad;--biru-tua:#0b2557;--kuning:#f7c531;--kuning-tua:#d9a400;--tinta:#14233d;--abu:#57647a;--garis:#e4e9f2;--bg:#f2f6fc;--radius:14px;--shadow:0 1px 3px rgba(16,24,40,0.06),0 1px 2px rgba(16,24,40,0.04);--maxw:1080px}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--tinta);background:var(--bg);line-height:1.55;-webkit-text-size-adjust:100%}a{color:var(--biru);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{line-height:1.25}.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}.section{padding:22px 0}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:linear-gradient(105deg,#0b2557,#133a87 48%,#1c56ad);box-shadow:0 2px 16px rgba(11,37,87,.3)}.site-header:after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--kuning-tua),var(--kuning) 35%,#ffe07a 55%,var(--kuning))}.hbar{max-width:var(--maxw);margin:0 auto;padding:11px 16px;gap:12px}.hbar,.hbar .brand{display:flex;align-items:center}.hbar .brand{gap:10px;color:#fff;font-weight:800;letter-spacing:.3px}.hbar .brand .logo{width:34px;height:34px;border-radius:9px;background:var(--kuning);color:#12234a;display:grid;place-items:center;font-weight:900}.hbar .spacer{flex:1 1}.hbar a,.hbar button{color:#eaf1fc}.hbar .logout{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:6px 12px;border-radius:9px;font-weight:700;cursor:pointer;font-size:14px}.hbar .logout:hover{background:rgba(255,255,255,.2)}.page-head{background:linear-gradient(120deg,#0b2557,#133a87 60%,#1c56ad);color:#fff;border-radius:18px;padding:22px;margin:18px 0 6px;box-shadow:0 10px 30px rgba(19,58,135,.18)}.page-head .breadcrumb{font-size:13px;color:#cfe0fb;margin-bottom:6px}.page-head .breadcrumb a{color:#ffe07a}.page-head h1{margin:0 0 4px;font-size:clamp(22px,4vw,30px)}.page-head .muted{color:#d7e4fb;margin:0}.grid{display:grid;grid-gap:14px;gap:14px}.grid-2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.card{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:16px 18px}.card-link{transition:transform .15s,box-shadow .15s}.card-link:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(19,58,135,.14);text-decoration:none}.card h3{margin:8px 0 4px;color:var(--biru-tua)}.muted,.note{color:var(--abu)}.note{background:#fff;border:1px dashed var(--garis);border-radius:var(--radius);padding:16px}.ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#eaf1fc,#f5f9ff);color:var(--biru);border:1px solid rgba(31,99,196,.12)}.tint-0{background:linear-gradient(135deg,#3b82f6,#4f46e5);color:#fff}.tint-0,.tint-1{border-color:transparent}.tint-1{background:linear-gradient(135deg,#f7c531,#f59e0b);color:#133a87}.tint-2{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.tint-2,.tint-4{color:#fff;border-color:transparent}.tint-4{background:linear-gradient(135deg,#2563eb,#38bdf8)}.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--garis);background:#fff;color:var(--tinta);font-weight:700;font-size:14px;cursor:pointer}.btn,.btn:hover{text-decoration:none}.btn:hover{background:#f5f9ff}.btn-primary{background:var(--kuning);color:#3a2c00;border-color:transparent}.btn-primary:hover{background:#ffd452}.btn-ghost{background:transparent}.wrap{min-height:80vh;display:grid;place-items:center;padding:20px}.login{background:#fff;border:1px solid var(--garis);border-radius:18px;box-shadow:var(--shadow);padding:30px 26px;text-align:center;max-width:380px}.login .logo{width:56px;height:56px;margin:0 auto 12px;border-radius:14px;background:linear-gradient(135deg,#133a87,#1c56ad);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:900}.login h1{font-size:20px;margin:0 0 6px}.login p{color:var(--abu);margin:0 0 16px}