:root{--navy:#0B1F45;--gold:#C9861A;--bg:#f4f6fa;--garis:#d9deea;--merah:#b3261e;--hijau:#1b6e3c}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#1c2333}
a{color:var(--navy)}
header.atas{background:var(--navy);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;padding:.6rem 1rem;border-bottom:3px solid var(--gold)}
header.atas strong{letter-spacing:.03em}
header.atas nav{display:flex;flex-wrap:wrap;gap:.25rem 1rem;flex:1}
header.atas a{color:#fff;text-decoration:none;padding:.2rem 0}
header.atas a:hover{color:var(--gold)}
header.atas form{margin:0}
main{max-width:1100px;margin:1.25rem auto;padding:0 1rem}
h1{color:var(--navy);font-size:1.4rem;margin:.2rem 0 1rem}
h2{color:var(--navy);font-size:1.1rem;margin:1.5rem 0 .5rem}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:6px;padding:1rem;margin-bottom:1rem}
.tabel-bungkus{overflow-x:auto;background:#fff;border:1px solid var(--garis);border-radius:6px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--garis);vertical-align:top}
th{background:#eef1f8;color:var(--navy);font-size:.85rem;white-space:nowrap}
tr:last-child td{border-bottom:0}
.terlambat{background:#fdecea;color:var(--merah);font-weight:600}
.lencana{display:inline-block;padding:.05rem .5rem;border-radius:99px;font-size:.8rem;background:#e7ecf7;color:var(--navy)}
.lencana.aktif{background:#e1f3e8;color:var(--hijau)}
.lencana.ditangguhkan{background:#fff1d6;color:#8a5a00}
.lencana.dicabut{background:#fdecea;color:var(--merah)}
label{display:block;font-weight:600;margin:.7rem 0 .2rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select{width:100%;max-width:420px;padding:.45rem .55rem;border:1px solid #aab3c7;border-radius:4px;font:inherit}
.kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
.kisi input,.kisi select{max-width:none}
.centang{font-weight:400;display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 1rem .2rem 0}
.centang input{width:auto}
button,.tombol{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:4px;padding:.5rem .95rem;font:inherit;cursor:pointer;text-decoration:none;margin-top:.8rem}
button:hover,.tombol:hover{background:#16306a}
.emas{background:var(--gold)}.emas:hover{background:#a86e10}
.bahaya{background:var(--merah)}.bahaya:hover{background:#8d1e18}
.tipis{background:#fff;color:var(--navy);border:1px solid var(--navy)}.tipis:hover{background:#eef1f8}
.pesan{padding:.6rem .9rem;border-radius:4px;margin-bottom:1rem}
.ok{background:#e1f3e8;color:var(--hijau)}
.galat,.error{background:#fdecea;color:var(--merah)}
.error{margin:.3rem 0 0;padding:.3rem .6rem;font-size:.9rem}
.kode{font:700 1.5rem/1.3 ui-monospace,Consolas,monospace;letter-spacing:.06em;background:#fff8e8;border:2px dashed var(--gold);padding:1rem;word-break:break-all;user-select:all}
.kecil{color:#5a6479;font-size:.85rem}
.masuk{max-width:380px;margin:12vh auto}
.baris{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:flex-end}
@media (max-width:600px){main{margin:.75rem auto}th,td{padding:.4rem .5rem}}