:root{--ac:#059669;--ac2:#047857;--ink:#14231F;--mut:#5B6B66;--rule:#CFE8DD;--tint:#E6F8F0;--bg:#F2FBF7;--card:#fff;--orange:#F97316;--orange-d:#C2410C;--blue:#2563EB;--purple:#7C3AED;--err:#DC2626;--ok:#059669;--side1:#065F46;--side2:#0F9D75}
@media (prefers-color-scheme:dark){:root{--ink:#E8F5EF;--mut:#9FBBB0;--rule:#245046;--tint:#10332B;--bg:#0A1C17;--card:#102720;--ac:#34D399;--ac2:#10B981;--orange:#FB923C;--orange-d:#FDBA74;--blue:#60A5FA;--purple:#A78BFA;--err:#F87171;--ok:#34D399;--side1:#052E25;--side2:#0B6B52}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Calibri,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg),var(--bg)) fixed}
a{color:var(--ac2)}h1,h2,h3{font-family:Georgia,Cambria,"Times New Roman",serif;letter-spacing:.01em;margin:0}
.brand{font:700 21px Georgia,serif;color:var(--ink);text-decoration:none;letter-spacing:.02em}.brand b{color:var(--orange)}.brand small{display:block;font:11px system-ui;color:var(--mut);letter-spacing:.08em;margin-top:2px}.brand.big{font-size:30px;margin-bottom:8px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;border:1px solid var(--ac2);padding:8px 15px;border-radius:8px;font:600 14px system-ui;text-decoration:none;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.08)}.btn:hover{filter:brightness(1.07)}.btn.ghost{background:transparent;color:var(--ac2);box-shadow:none}.btn.danger{background:transparent;color:var(--err);border-color:var(--err);box-shadow:none}.btn.sm{padding:4px 10px;font-size:12.5px}
.inl{display:inline-block;margin:0}input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--rule);border-radius:8px;padding:8px 10px;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:1px}input[type=checkbox]{width:auto}select{width:auto;max-width:100%}.form select,.form input,.form textarea{width:100%}
.admin .side{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(170deg,var(--side1),var(--side2));padding:18px 14px;overflow:auto;display:flex;flex-direction:column;gap:14px;z-index:20;color:#fff}
.side .brand{color:#fff}.side .brand small{color:#B7F0DC}
.side nav{display:flex;flex-direction:column;gap:2px}.side nav a{padding:8px 11px;border-radius:8px;color:#E8FFF6;text-decoration:none;font-size:14px}.side nav a:hover{background:rgba(255,255,255,.12)}.side nav a.on{background:var(--orange);color:#fff;font-weight:700}.side nav a.sub{padding-left:26px;font-size:13px;color:#C8F5E4}.side nav a.sub.on{background:rgba(255,255,255,.2);color:#fff}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:4px;font-size:13px}.sidefoot a{color:#C8F5E4;text-decoration:none}
.main{margin-left:250px;padding:26px 30px 60px;max-width:1280px}.ph h1{font-size:30px;padding-bottom:8px;border-bottom:3px solid var(--orange);display:inline-block;padding-right:30px;color:var(--ac2)}.ph p{color:var(--mut);margin:10px 0 0}
.burger{display:none;position:fixed;top:10px;left:10px;z-index:30;background:var(--orange);color:#fff;border:0;border-radius:8px;padding:6px 11px;font-size:18px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.tabs a{padding:6px 13px;border:1.5px solid var(--rule);background:var(--card);border-radius:99px;text-decoration:none;color:var(--ink);font-size:13.5px}.tabs a:hover{border-color:var(--ac)}.tabs a.on{background:var(--ac2);border-color:var(--ac2);color:#fff;font-weight:600}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}.bar .search{margin-right:auto}.bar .search input{width:220px}.bar label{font-size:13.5px;font-weight:600;color:var(--ac2)}
.card{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--ac);border-radius:12px;padding:16px 18px;margin:14px 0;box-shadow:0 2px 10px rgba(5,150,105,.07)}.card h3{font-size:17px;color:var(--ac2);margin-bottom:10px}.card.narrow,.narrow{max-width:520px}.card h4{margin:16px 0 6px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid2 .card{margin:0}.grid2:nth-of-type(odd) .card{border-top-color:var(--blue)}
.cardfoot{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule);display:flex;gap:8px;flex-wrap:wrap}
.upd{display:inline-block;background:#FFF1E3;color:var(--orange-d);border:1.5px solid var(--orange);border-radius:99px;padding:3px 13px;font:700 12.5px system-ui;text-decoration:none}.upd:hover{background:var(--orange);color:#fff}
@media (prefers-color-scheme:dark){.upd{background:rgba(251,146,60,.14)}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}.kpi{border-radius:12px;padding:13px 15px;color:#fff}.kpi.k1{background:linear-gradient(135deg,#059669,#10B981)}.kpi.k2{background:linear-gradient(135deg,#2563EB,#3B82F6)}.kpi.k3{background:linear-gradient(135deg,#EA580C,#F97316)}.kpi.k4{background:linear-gradient(135deg,#7C3AED,#8B5CF6)}
.kl{font-size:12px;opacity:.95;text-transform:uppercase;letter-spacing:.07em;font-weight:600}.kv{font:700 26px Georgia,serif;margin-top:2px;overflow-wrap:anywhere}.ks{font-size:12.5px;opacity:.95}
.chartbox{position:relative;height:300px}.tw{overflow-x:auto}.t{border-collapse:collapse;width:100%;font-size:13.5px}
.t th{background:linear-gradient(180deg,#CFF5E4,#A8EBCF);color:#064E3B;text-align:left;padding:9px 10px;border-bottom:3px solid var(--ac);white-space:nowrap;font-weight:700}
@media (prefers-color-scheme:dark){.t th{background:#0F4A3B;color:#B7F7DD}}
.t td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}.t tbody tr:nth-child(even){background:var(--tint)}.t tbody tr:hover{background:rgba(249,115,22,.10)}.t th.r,.t td.r,.t td.ra{text-align:right}.t td.ra{white-space:nowrap}.num{font-variant-numeric:tabular-nums}.mut{color:var(--mut)}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:#DBEAFE;color:#1D4ED8}.pill.g{background:#D1FAE5;color:#047857}.pill.a{background:#FFEDD5;color:#C2410C}.pill.done{background:#E2E8F0;color:#334155}.pill.prio{background:#F97316;color:#fff}
@media (prefers-color-scheme:dark){.pill{background:#1E3A8A;color:#BFDBFE}.pill.g{background:#064E3B;color:#A7F3D0}.pill.a{background:#7C2D12;color:#FED7AA}.pill.done{background:#334155;color:#E2E8F0}}
.up{color:#059669;font-weight:700;white-space:nowrap}.down{color:#DC2626;font-weight:700;white-space:nowrap}
.hint{color:var(--mut);font-size:13px}.hint.warn{color:var(--orange-d);font-weight:600}.empty{color:var(--mut);padding:10px 0}.pager{margin:10px 0;font-size:13px}.sect{font-size:22px;color:var(--ac2);margin:26px 0 4px;border-left:6px solid var(--orange);padding-left:12px}
.flash{padding:10px 14px;border-radius:10px;margin:14px 0;border:1.5px solid}.flash.ok{background:#D1FAE5;border-color:var(--ac);color:#065F46}.flash.err{background:#FEE2E2;border-color:var(--err);color:#991B1B}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ac2);font-weight:600}.form label i{color:var(--err);font-style:normal}.form .wide,.form .acts,.form hr,.form .tw,.form h4,.form p{grid-column:1/-1}.form label.chk{flex-direction:row;align-items:center;gap:8px}
.narrow .form{grid-template-columns:1fr}.guide ol{padding-left:20px;line-height:1.7}.code{background:var(--tint);padding:10px;overflow:auto;border-radius:6px;font-size:12.5px}
.report .rh{text-align:center;margin-bottom:12px;line-height:1.5}.t.lr td,.t.lr th{font-size:14px}.lrh td{background:#D9F7EA;font-weight:700;color:#065F46}.lrh2 td{background:#065F46;color:#fff;font-weight:700;letter-spacing:.05em}.lrl td:first-child{padding-left:26px}.lrs td{font-weight:700;border-top:1.5px solid var(--ac)}.lrt td{font-weight:800;background:#FFF1E3;border-top:2px solid var(--orange);color:#7C2D12}.lrt2 td{background:#FFD9B3;font-size:15px}
@media (prefers-color-scheme:dark){.lrh td{background:#0F4A3B;color:#B7F7DD}.lrt td{background:#3B2210;color:#FED7AA}.lrt2 td{background:#4A2A12}}
.t.lr tbody tr:nth-child(even){background:transparent}
body.login{display:grid;place-items:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#D1FAE5,#FFEDD5)}body.login .card{width:100%}
.pub .top{display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:linear-gradient(90deg,var(--side1),var(--side2))}.pub .top .brand{color:#fff}.pub .top nav a{margin-left:18px;text-decoration:none;color:#E8FFF6;font-size:14px;font-weight:600}
.hero{padding:70px 5vw 50px;background:linear-gradient(135deg,#D1FAE5 0%,#FFEDD5 100%)}.hero>*{max-width:980px}.kick{font-size:12px;letter-spacing:.14em;color:var(--orange-d);font-weight:800}.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.15;margin:10px 0 16px;color:#064E3B}.hero p{color:#334B44;max-width:640px}.stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}.stats b{display:block;font:800 30px Georgia,serif;color:var(--ac2)}.stats div:nth-child(2) b{color:var(--orange-d)}.stats div:nth-child(3) b{color:var(--blue)}.stats span{font-size:13px;color:#334B44}
@media (prefers-color-scheme:dark){.hero{background:linear-gradient(135deg,#0B3B2F,#3B2210)}.hero h1{color:#D1FAE5}.hero p,.stats span{color:#B7D6CB}}
.sec{padding:36px 5vw}.sec.alt{background:var(--tint)}.sec h2{font-size:25px;margin-bottom:16px;color:var(--ac2)}.cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.cc{background:var(--card);border:1px solid var(--rule);border-left:5px solid var(--orange);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.cc b{color:var(--ac2)}.cc em{font-style:normal;color:var(--mut);font-size:13px}.cc .no{color:var(--orange-d);font-weight:800;font-size:12px}blockquote{margin:0;background:var(--card);border-left:5px solid var(--orange);padding:12px 16px;border-radius:0 10px 10px 0}blockquote footer{color:var(--mut);font-size:13px;margin-top:6px}.foot{padding:24px 5vw;color:var(--mut);font-size:13px;border-top:1px solid var(--rule)}
@media(max-width:860px){.admin .side{transform:translateX(-100%);transition:transform .2s}body.nav-open .side{transform:none}.burger{display:block}.main{margin-left:0;padding:56px 16px 50px}.grid2,.form{grid-template-columns:1fr}.chartbox{height:260px}}
@media print{.side,.burger,.noprint,.tabs,.cardfoot,.bar{display:none!important}.main{margin:0;padding:0;max-width:none}body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #999;break-inside:avoid}.ph p{display:none}}
/* v2.1 gambar */
.banner{position:relative;border-radius:16px;overflow:hidden;margin-bottom:16px;height:150px;background:linear-gradient(135deg,#10B981,#F97316)}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner .bt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 22px;background:linear-gradient(90deg,rgba(4,60,45,.88),rgba(4,60,45,.2) 70%);color:#fff}
.banner .bt b{font:700 24px Georgia,serif}.banner .bt span{font-size:13px;opacity:.92}
.heroimg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin:26px 0 8px;max-width:980px}
.heroimg img{width:100%;height:220px;object-fit:cover;border-radius:14px;box-shadow:0 8px 24px rgba(5,150,105,.25);background:#D1FAE5}
.wbimg img{width:100%;max-width:980px;height:200px;object-fit:cover;border-radius:14px;margin-bottom:14px}
@media(max-width:700px){.heroimg{grid-template-columns:1fr}.heroimg img{height:160px}.heroimg img:nth-child(n+2){display:none}}
.fin .big{font:700 22px Georgia,serif;color:#047857;margin:6px 0}.sech{margin:18px 0 8px;color:#047857}
@media print{.banner,.noprint{display:none}}