:root{--ink:#1d2b3a;--paper:#f5f6f4;--card:#fff;--line:#d9ddd8;--brand:#1769b3;--head:#1769b3;--gold:#f2c200;--mute:#5d6a75}
@media(prefers-color-scheme:dark){:root{--ink:#e8ecef;--paper:#141b21;--card:#1c252d;--line:#2c3842;--brand:#6bb3f2;--head:#0f4c81;--mute:#9aa8b3}}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
header{background:var(--head);color:#fff;border-bottom:5px solid var(--gold)}.bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;flex-wrap:wrap;gap:8px}
header a{color:#fff;text-decoration:none}.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.15rem;line-height:1.2}.brand img{height:46px;width:auto}.brand small{display:block;font-weight:400;font-size:.78rem;opacity:.9}nav a{margin-left:16px}
.hero{padding:28px 0 8px;border-left:6px solid var(--gold);padding-left:16px;margin-top:20px}h1{font-size:1.7rem;line-height:1.25;margin:0 0 8px}h2{font-size:1.15rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;margin:16px 0}
label{display:block;margin:0 0 14px;font-weight:600;font-size:.95rem}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px;font:inherit;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:6px}
input[type=checkbox]{display:inline;width:auto;margin-right:8px}.cek{font-weight:400}
.dua{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.btn{display:inline-block;background:#1769b3;color:#fff;border:0;border-radius:6px;padding:11px 20px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}:focus-visible{outline:3px solid #e0a100;outline-offset:2px}
.alert{background:#fde8e6;color:#8a1c12;border-left:4px solid #c93a2b;padding:10px 14px;border-radius:4px}
.ok{border-color:var(--brand)}.kode{font-size:2rem;font-weight:700;letter-spacing:.08em;color:var(--brand)}
.meta{color:var(--mute);font-size:.9rem}.kecil{max-width:380px;margin:40px auto}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:600;background:#e4e7ea;color:#2c3640}
.badge.diproses{background:#fff0c2;color:#6b4a00}.badge.selesai{background:#cdeedd;color:#0b5a33}.badge.ditolak{background:#f6d5d1;color:#8a1c12}
.tabel{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:.9rem}
.cari{display:flex;gap:10px}.cari input{margin:0}.foto{max-width:100%;max-height:320px;border-radius:6px;margin:8px 0}
.tanggapan{background:var(--paper);padding:10px 14px;border-radius:6px;margin-top:12px}
.filter{display:flex;gap:8px;flex-wrap:wrap}.filter a{padding:6px 14px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:inherit;font-size:.9rem}
.filter a.on{background:#1769b3;color:#fff;border-color:#1769b3}summary{cursor:pointer}
footer{padding:30px 18px;color:var(--mute);font-size:.85rem}a{color:var(--brand)}
@media(max-width:520px){.dua{grid-template-columns:1fr}}
.tim{display:inline-block;padding:1px 9px;border-radius:4px;font-size:.78rem;font-weight:600;background:var(--gold);color:#3b2f00}.filter{margin-bottom:10px}p.meta{margin:12px 0 4px}

/* ===== Responsif HP ===== */
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
input,select,textarea,.btn{font-size:16px;min-height:44px}
input[type=checkbox]{min-height:0;width:20px;height:20px;vertical-align:middle}
textarea{min-height:120px}
@media(max-width:640px){
 body{font-size:17px}
 .wrap{padding:0 14px}
 .bar{padding:10px 14px}
 .brand{font-size:1.05rem}.brand img{height:40px}
 nav{width:100%;display:flex;gap:8px}
 nav a{margin:0;flex:1;text-align:center;padding:9px 6px;background:rgba(255,255,255,.16);border-radius:6px}
 h1{font-size:1.45rem}
 .hero{padding:14px 0 4px 12px;margin-top:14px}
 .card{padding:14px}
 .btn{width:100%;text-align:center}
 .cari{flex-direction:column}
 .kode{font-size:1.6rem}
 .filter a{padding:9px 14px}
 table,tbody,tr,td{display:block}
 tr:first-child{display:none}
 tr{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;padding:6px 12px}
 td{border:0;padding:3px 0;font-size:.95rem}
 td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--mute)}
}

.aksi{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.btn.sek{background:transparent;color:var(--brand);border:2px solid var(--brand)}
@media(max-width:640px){.aksi .btn{flex:1 1 100%}}