:root{
  --pine:#0F3D3A; --pine-2:#1B5650; --brass:#8A6414; --brass-l:#C69A3B;
  --mist:#F2F4F1; --paper:#FFFFFF; --line:#D3DAD2; --ink:#15201E; --mute:#5E6B67;
  --bad:#A23B2A; --bad-bg:#F7E3DE; --ok:#2E6B3E; --ok-bg:#E1F0E4; --warn:#8A5E06; --warn-bg:#F6EBCF;
  --serif:'Literata',Georgia,'Times New Roman',serif; --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);font:16px/1.55 var(--sans)}
a{color:var(--pine-2)} a:hover{color:var(--brass)}
:focus-visible{outline:3px solid var(--brass-l);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);line-height:1.25;margin:0 0 .5em;color:var(--pine)}
h1{font-size:1.7rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
.mute{color:var(--mute)} .right{text-align:right} .nowrap{white-space:nowrap}

/* kepala halaman: pola bintang rub el hizb */
.top{background:var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-opacity='.10' stroke-width='1'%3E%3Crect x='10' y='10' width='28' height='28'/%3E%3Crect x='10' y='10' width='28' height='28' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E");color:#fff}
.top .in{max-width:1240px;margin:auto;padding:14px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:1.25rem;color:#fff;text-decoration:none;font-weight:600}
.brand small{display:block;font-family:var(--sans);font-size:.78rem;font-weight:400;opacity:.8}
.chip{font-size:.85rem;color:#fff;opacity:.95}
.chip a{color:#fff}

.shell{max-width:1240px;margin:auto;display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px}
.side{align-self:start;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;position:sticky;top:12px}
.side a{display:block;padding:9px 12px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:.95rem}
.side a:hover{background:var(--mist)}
.side a.on{background:var(--pine);color:#fff}
.side hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
main{min-width:0}
@media(max-width:820px){
  .shell{grid-template-columns:1fr;padding:12px}
  .side{position:static;display:flex;overflow-x:auto;gap:4px;padding:6px}
  .side a{white-space:nowrap}.side hr{display:none}
}

.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stat{border-left:4px solid var(--brass-l);padding:2px 0 2px 12px}
.stat b{display:block;font-family:var(--serif);font-size:1.45rem;color:var(--pine)}
.stat span{font-size:.88rem;color:var(--mute)}

table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th{text-align:left;font-weight:600;color:var(--pine);border-bottom:2px solid var(--line);padding:8px 10px;background:#FAFBF9}
.tbl td{border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:top}
.tbl tr:hover td{background:#FAFBF9}
.scroll{overflow-x:auto}

label{display:block;font-size:.88rem;font-weight:600;margin:0 0 4px;color:var(--ink)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],input[type=tel],select,textarea{
  width:100%;padding:9px 10px;border:1px solid #AEB9B0;border-radius:7px;font:inherit;background:#fff;color:var(--ink)}
textarea{min-height:80px}
.fg{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
.fg .full{grid-column:1/-1}
.hint{font-size:.82rem;color:var(--mute);margin-top:3px}
.btn{display:inline-block;background:var(--pine);color:#fff;border:0;border-radius:7px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pine-2);color:#fff}
.btn.sec{background:#fff;color:var(--pine);border:1px solid var(--pine)}
.btn.sec:hover{background:var(--mist);color:var(--pine)}
.btn.bad{background:var(--bad)} .btn.sm{padding:5px 10px;font-size:.85rem}
.btn.brass{background:var(--brass)}
.inline{display:inline}

.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:600}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.mute{background:#E7EBE6;color:var(--mute)}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:#B6D8BD;color:var(--ok)}
.flash.bad{background:var(--bad-bg);border-color:#E5B8AE;color:var(--bad)}
.alertbox{background:var(--warn-bg);border:1px solid #E6D29A;border-radius:10px;padding:14px 18px;margin-bottom:18px}
.alertbox ul{margin:6px 0 0;padding-left:20px}
.bar{height:9px;background:#E3E8E2;border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brass-l)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs a{padding:8px 14px;text-decoration:none;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--pine);border-color:var(--brass-l);font-weight:600}
details>summary{cursor:pointer;font-weight:600;color:var(--pine)}

/* halaman publik */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero .in{max-width:1000px;margin:auto;padding:40px 20px}
.hero h1{font-size:2.1rem;max-width:20ch}
.wrap{max-width:1000px;margin:auto;padding:24px 20px}
.inti{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.inti div{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--brass-l);border-radius:8px;padding:12px 14px}
.inti small{display:block;color:var(--mute);font-size:.82rem}
.inti b{font-family:var(--serif);color:var(--pine)}
.bidang{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px}
.bidang h3{margin-bottom:2px}
.cols{columns:2;column-gap:28px;margin:8px 0 0;padding-left:18px}
@media(max-width:620px){.cols{columns:1}}
.tg{margin:10px 0 0;padding-left:18px}.tg li{margin:3px 0}
.tag{font-size:.74rem;font-weight:600;padding:1px 7px;border-radius:4px;background:var(--warn-bg);color:var(--warn);margin-right:6px}

/* cetak */
.print-only{display:none}
@media print{
  body{background:#fff;font-size:12px}.top,.side,.noprint,.tabs{display:none!important}
  .shell{display:block;padding:0}.card{border:0;padding:0;break-inside:avoid}.print-only{display:block}
}
.kop{text-align:center;border-bottom:3px double #000;padding-bottom:8px;margin-bottom:14px}
.kop h2{margin:0;color:#000}.ttd{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;text-align:center}
.ttd div{min-height:110px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}