:root{--g:#0f6b4a;--g2:#0a4d35;--gl:#e7f4ee;--ink:#1c2a24;--mut:#5b6b64;--bd:#d5e0da;--bg:#f5f8f6;--red:#b3261e;--amb:#a15c00}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--g)}
h1{font-size:1.4rem;margin:.2rem 0 1rem;color:var(--g2)}
h2{font-size:1.1rem;margin:1.4rem 0 .6rem;color:var(--g2)}
.top{display:flex;align-items:center;gap:12px;background:var(--g2);color:#fff;padding:10px 18px;position:sticky;top:0;z-index:20}
.top .brand{display:flex;flex-direction:column;line-height:1.2}.top .brand span{font-size:.78rem;opacity:.8}
.top .who{margin-left:auto;font-size:.88rem}.top .who a{color:#fff;margin-left:10px}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.4rem}
.badge{font-style:normal;font-size:.72rem;padding:2px 8px;border-radius:99px;background:#fff;color:var(--g2);margin-left:4px}
.layout{display:flex;min-height:calc(100vh - 100px)}
.side{width:230px;background:#fff;border-right:1px solid var(--bd);padding:10px 0;flex-shrink:0}
.side ul{list-style:none;margin:0;padding:0}
.side a{display:block;padding:9px 18px;text-decoration:none;color:var(--ink);border-left:3px solid transparent;font-size:.92rem}
.side a:hover{background:var(--gl)}.side a.on{background:var(--gl);border-left-color:var(--g);font-weight:600;color:var(--g2)}
main{flex:1;padding:22px;min-width:0;max-width:1100px}
.foot{text-align:center;color:var(--mut);font-size:.8rem;padding:14px}
.card{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.stat{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:14px}
.stat b{display:block;font-size:1.6rem;color:var(--g2)}.stat span{color:var(--mut);font-size:.85rem}
.bar{height:8px;background:var(--gl);border-radius:99px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--g)}
label{display:block;font-weight:600;font-size:.86rem;margin:10px 0 3px}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--bd);border-radius:7px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #9ad2b8;border-color:var(--g)}
input:disabled,select:disabled,textarea:disabled{background:#f1f4f2;color:#333}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}
.btn{display:inline-block;background:var(--g);color:#fff;border:0;border-radius:8px;padding:9px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--g2)}.btn.sec{background:#fff;color:var(--g2);border:1px solid var(--g)}
.btn.red{background:var(--red)}.btn.sm{padding:4px 10px;font-size:.82rem}
.alert{padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}
.alert.ok{background:#e6f5ec;border-color:#9ad2b8}.alert.err{background:#fdecea;border-color:#f1b1ac;color:var(--red)}.alert.info{background:#eef4fb;border-color:#b9d0ea}
.tbl-wrap{overflow-x:auto;background:#fff;border:1px solid var(--bd);border-radius:10px}
table{border-collapse:collapse;width:100%}
th,td{padding:7px 9px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:middle}
th{background:var(--gl);font-size:.82rem;color:var(--g2);white-space:nowrap}
tr.jd td{background:#f3f7f5;font-weight:700}
td input[type=number]{width:72px}td input[type=text]{min-width:140px}
.c{text-align:center}.mut{color:var(--mut)}
.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
/* Halaman depan & login */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 16px;background:linear-gradient(160deg,var(--g2),var(--g));color:#fff;text-align:center}
.hero h1{color:#fff;font-size:1.9rem;margin:6px 0}.hero p{max-width:620px;opacity:.92}
.logins{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:26px;width:100%;max-width:720px}
.logins a{background:#fff;color:var(--g2);text-decoration:none;border-radius:12px;padding:20px 12px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.logins a small{display:block;font-weight:400;color:var(--mut);margin-top:4px}
.logins a:hover{transform:translateY(-2px)}
.loginbox{max-width:400px;margin:8vh auto;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:26px}
.loginbox h1{text-align:center}
@media(max-width:820px){
 .burger{display:block}.side{position:fixed;left:-250px;top:54px;bottom:0;z-index:15;transition:left .2s}
 body.nav-open .side{left:0;box-shadow:4px 0 16px rgba(0,0,0,.15)}main{padding:14px}.top .who{font-size:.76rem}
}
/* Cetak */
.doc{background:#fff;color:#000;font:12pt/1.4 "Times New Roman",serif;padding:0}
.doc .kop{text-align:center;border-bottom:3px double #000;padding-bottom:6px;margin-bottom:12px}
.doc .kop b{display:block}.doc h2.t{text-align:center;color:#000;font-size:13pt;margin:10px 0}
.doc table{font-size:11pt}.doc th,.doc td{border:1px solid #000;padding:3px 6px;background:#fff;color:#000}
.doc table.nb th,.doc table.nb td{border:0;padding:2px 4px}
.doc .pb{page-break-after:always}
.ttd{display:flex;justify-content:space-between;margin-top:30px;text-align:center}.ttd div{width:45%}
@media print{.top,.side,.foot,.noprint,.alert{display:none!important}main{padding:0;max-width:none}.layout{display:block}body{background:#fff}.doc .pb{page-break-after:always}}