:root{
  --biru-tua:#2D3892; --biru:#2470B6; --biru-muda:#27A5DE; --biru-tint:#E8F3FB;
  --emas:#DDA026; --emas-teks:#8A6516; --emas-tint:#FCF3E1;
  --merah:#DC202B; --merah-teks:#C21620; --merah-tint:#FCEDEE;
  --hijau:#0B8143; --hijau-teks:#0A6E39; --hijau-tint:#E7F3EC;
  --ink:#12203F; --ink-2:#274073; --muted:#5B6C88;
  --rule:#CFD9E6; --rule-soft:#E5EBF3; --bg:#EAEEF4; --field:#F5F8FC;
  --shadow:0 1px 2px rgba(18,32,63,.05),0 10px 30px rgba(18,32,63,.07);
  --r-card:12px; --r-ctl:8px;
  --disp:"Barlow Condensed",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
a{color:var(--biru);text-decoration:none}
a:hover{text-decoration:underline}

/* bar atas */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
.tb-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.tb-merek{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--biru-tua),var(--biru-muda));-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-sep{width:1px;height:20px;background:var(--rule)}
.tb-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tb-spacer{flex:1 1 auto}
.tb-link{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 12px;border:1px solid var(--rule);border-radius:99px;background:#fff}
.tb-link:hover{border-color:var(--biru);background:var(--biru-tint);color:var(--biru-tua);text-decoration:none}

.sheet{max-width:1180px;margin:0 auto;padding:22px 16px 60px}
.judul{margin-bottom:18px}
.judul h1{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--ink)}
.judul p{margin:5px 0 0;color:var(--muted);font-size:13px}

/* kartu & panel */
.kartu{background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;transition:box-shadow .2s ease}
.kartu-hd{padding:12px 16px;border-bottom:1px solid var(--rule-soft);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:linear-gradient(180deg,#fff,#F7FAFD)}
.kartu-bd{padding:16px}

/* statistik */
.stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat a{background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 16px;display:block;border-top:3px solid var(--rule)}
.stat a{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.stat a:hover{text-decoration:none;border-color:var(--biru);transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,32,63,.10)}
.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;color:var(--ink)}
.stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px}
.stat .baru{border-top-color:var(--biru)} .stat .verifikasi{border-top-color:var(--emas)}
.stat .disetujui{border-top-color:var(--hijau)} .stat .ditolak{border-top-color:var(--merah)}

/* saring */
.saring{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.saring .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.saring label{font-size:11.5px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=search],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  font-family:var(--body);font-size:14px;color:var(--ink);background:var(--field);
  border:1px solid var(--rule);border-radius:var(--r-ctl);padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;border-color:var(--biru);box-shadow:0 0 0 3px rgba(36,112,182,.16)}
textarea{min-height:70px;resize:vertical}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:13.5px;font-weight:600;line-height:1.2;text-decoration:none;
  border-radius:var(--r-ctl);padding:11px 16px;cursor:pointer;border:1px solid var(--ink-2);
  background:#fff;color:var(--ink-2);
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.btn:hover{background:var(--ink-2);color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(18,32,63,.16)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.primary{background:linear-gradient(180deg,var(--biru-tua),var(--biru));border-color:var(--biru-tua);color:#fff}
.btn.primary:hover{filter:brightness(1.1);box-shadow:0 6px 18px rgba(45,56,146,.28)}
.btn.mini{padding:9px 14px;font-size:12px}

/* tabel */
table{width:100%;border-collapse:collapse}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule-soft);font-size:13.2px;vertical-align:top}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:#FAFCFE}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--biru-tint)}
td .no{font-family:var(--mono);font-size:12px;color:var(--biru-tua)}
td small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.kosong{padding:40px 16px;text-align:center;color:var(--muted)}

/* label status */
.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;font-weight:600;white-space:nowrap}
.tag.biru{background:var(--biru-tint);color:var(--biru-tua)}
.tag.emas{background:var(--emas-tint);color:#8A6516}
.tag.hijau{background:var(--hijau-tint);color:var(--hijau-teks)}
.tag.merah{background:var(--merah-tint);color:var(--merah-teks)}
.tag.abu{background:var(--field);color:var(--muted);border:1px solid var(--rule)}

/* rincian */
.rinci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.rinci div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.rinci dt{color:var(--muted);font-size:12.5px;margin:0}
.rinci dd{margin:0;font-size:13.2px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}

/* daftar berkas */
.berkas{display:grid;gap:8px}
.berkas a{display:flex;align-items:center;gap:11px;border:1px solid var(--rule);border-radius:var(--r-ctl);padding:11px 13px;background:var(--field);color:var(--ink-2)}
.berkas a:hover{border-color:var(--hijau);background:var(--hijau-tint);text-decoration:none}
.berkas .nm{flex:1 1 auto;font-size:13px;font-weight:600}
.berkas .mt{font-family:var(--mono);font-size:11px;color:var(--muted)}
td form{margin:0}
.berkas .pdf{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--hijau);border:1px solid var(--hijau);border-radius:3px;padding:3px 5px}
.hilang{border-style:dashed;opacity:.6}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.hint{font-size:11.5px;color:var(--muted);margin:5px 0 0}
.pesan{padding:11px 14px;border-radius:var(--r-ctl);font-size:13px;margin-bottom:16px}
.pesan.ok{background:var(--hijau-tint);color:var(--hijau-teks);border:1px solid #B8DEC7}
.pesan.bad{background:var(--merah-tint);color:var(--merah-teks);border:1px solid #F3CFD2}

/* masuk */
.masuk{max-width:380px;margin:8vh auto 0;background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.masuk .brandbar{height:5px;background:linear-gradient(90deg,var(--biru-tua) 0 25%,var(--hijau) 25% 50%,var(--emas) 50% 75%,var(--merah) 75% 100%)}
.masuk-bd{padding:24px}
.masuk h1{font-family:var(--disp);font-size:26px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px}
.masuk p{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.masuk .fld{margin-bottom:12px}

@media (max-width:820px){
  .stat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rinci,.grid2,.grid3{grid-template-columns:1fr}
  .rinci div{grid-template-columns:130px minmax(0,1fr)}
  table{display:block;overflow-x:auto}
}

/* ---------- daftar kelengkapan dokumen mitra ---------- */
.dok{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--rule-soft)}
.dok:last-child{border-bottom:0}
.dok.ada{background:var(--hijau-tint)}
.dok .tanda{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);background:var(--field);font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.dok.ada .tanda{background:var(--hijau);border-color:var(--hijau);color:#fff;font-size:0}
.dok.ada .tanda::after{content:"";width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.dok .nm{font-size:13.5px;font-weight:600;color:var(--ink-2);display:block}
.dok em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.dok .unggah{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dok input[type=file]{font-size:12px;max-width:210px}
.ringkas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ringkas div{background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow);padding:15px 17px;border-top:3px solid var(--biru)}
.ringkas b{display:block;font-family:var(--disp);font-weight:700;font-size:27px;line-height:1;color:var(--ink)}
.ringkas span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px}
.sorot{background:var(--emas-tint);border:1px solid #EFDCAB;border-radius:var(--r-ctl);padding:13px 15px;font-size:13px;color:#6E5111;line-height:1.6;margin-bottom:16px}
.sorot b{font-weight:700}
@media (max-width:820px){
  .ringkas{grid-template-columns:1fr}
  .dok{grid-template-columns:30px minmax(0,1fr);gap:9px 12px}
  .dok .unggah{grid-column:1/-1;justify-content:flex-start}
}

/* ---------- kaki halaman ---------- */
.kaki{max-width:1180px;margin:8px auto 0;padding:18px 16px 26px;display:flex;flex-wrap:wrap;gap:6px 18px;
  justify-content:space-between;border-top:1px solid var(--rule-soft);font-size:11.5px;color:var(--muted)}