:root{--bg:#f4f6fb;--card:#fff;--tx:#1b2333;--mut:#6b7488;--pri:#2563eb;--bd:#dde2ee}
@media(prefers-color-scheme:dark){:root{--bg:#0f1420;--card:#171e2e;--tx:#e8ecf5;--mut:#939bb0;--bd:#2a3347;--pri:#5b8cff}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif}
.wrap{max-width:720px;margin:0 auto;padding:16px}
header.hero{padding:28px 16px 8px;text-align:center}header.hero h1{margin:0;font-size:1.5rem}header.hero p{margin:6px 0 0;color:var(--mut)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px;margin:14px 0}
.card h2{margin:0 0 12px;font-size:1.05rem}
label{display:block;font-weight:600;font-size:.85rem;margin:12px 0 4px}label small{font-weight:400;color:var(--mut)}
input,select,textarea{width:100%;height:40px;padding:8px 10px;border:1px solid var(--bd);border-radius:9px;background:var(--bg);color:var(--tx);font:inherit}
textarea{height:auto;min-height:84px}input[type=file]{height:auto;padding:7px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}@media(max-width:420px){.row{grid-template-columns:1fr}}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:10px;height:42px;padding:0 20px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;line-height:42px}
.btn.sm{height:34px;line-height:34px;padding:0 12px;font-size:.85rem}.btn.gh{background:transparent;color:var(--pri);border:1px solid var(--bd)}
.err{background:#fee2e2;color:#991b1b;border-radius:10px;padding:10px 14px;margin:12px 0}.ok{background:#dcfce7;color:#166534;border-radius:10px;padding:10px 14px;margin:12px 0}
.hint{color:var(--mut);font-size:.8rem;margin-top:3px}
.tbl{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--bd);font-size:.88rem;vertical-align:top}
.badge{padding:2px 9px;border-radius:99px;font-size:.75rem;background:var(--bd)}
.hp{position:absolute;left:-9999px}
.profile{display:flex;gap:16px;align-items:center;margin-bottom:14px}.profile h2{margin:0 0 6px;font-size:1.25rem}.profile p{margin:2px 0;color:var(--mut)}
.photo{width:120px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid var(--bd);background:var(--bg);flex:none;display:block}
@media(max-width:420px){.photo{width:92px}}
dl{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;margin:0}dt{color:var(--mut)}dd{margin:0;white-space:pre-wrap}
@media(max-width:560px){dl{grid-template-columns:1fr}dt{margin-top:6px}}

.logo{display:block;margin:0 auto 10px;height:96px;width:auto}
.brand{height:34px;width:auto;display:block}
.brandbar{display:flex;align-items:center;gap:10px}
.hero .logo+h1{margin-top:4px}
header.hero{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;text-align:left;padding:20px 4px 4px}
header.hero .logo{grid-row:1/3;height:72px;margin:0}
header.hero h1{align-self:end;font-size:1.3rem}header.hero p{align-self:start;margin:2px 0 0}
.card>.brandbar .logo{height:52px;margin:0}

/* watermark hrd-replay: di BELAKANG konten (hanya tampak di latar halaman), tidak mengganggu form */
body::after{content:"";position:fixed;inset:-60%;background:url(assets/watermark.png) 0 0/360px auto repeat;transform:rotate(-20deg);opacity:.09;pointer-events:none;z-index:0}

.wrap{position:relative;z-index:1}
header.hero{background:var(--bg);border-radius:14px;padding:16px 14px;margin-top:8px}
.wrap>p{background:var(--bg);border-radius:12px;padding:8px 10px}

/* ===== Panel admin (rapi) ===== */
.wrap>p{background:none;padding:0;border-radius:0}
body.adm::after{opacity:.06}
.topbar{background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
.topbar .in{max-width:1120px;margin:0 auto;padding:9px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar .brandbar{text-decoration:none;color:var(--tx);font-weight:700}
.topbar nav{display:flex;gap:2px}.topbar nav a{padding:7px 12px;border-radius:9px;color:var(--tx);text-decoration:none;font-size:.88rem;font-weight:600}
.topbar nav a:hover{background:var(--bg)}.topbar nav a.out{color:#dc2626}
@media(max-width:560px){.topbar .brandbar span{display:none}.topbar nav a{padding:7px 9px}}
.adm-wrap{max-width:1120px;margin:0 auto;padding:18px 16px 40px;position:relative;z-index:1}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
@media(max-width:720px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{display:block;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--tx)}
.kpi b{display:block;font-size:1.45rem;line-height:1.1}.kpi span{font-size:.75rem;color:var(--mut);text-transform:capitalize}
.kpi:hover{border-color:var(--pri)}.kpi.on{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri) inset}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.toolbar input{flex:1;min-width:200px;height:38px}.toolbar select{width:auto;height:38px}
.toolbar .btn.sm{height:38px;line-height:38px}
.card.tbl{padding:0;margin:0;overflow-x:auto}
table.list th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:11px 14px;background:rgba(127,127,127,.06)}
table.list td{padding:10px 14px;vertical-align:middle}table.list tr:last-child td{border-bottom:0}
table.list tr.lrow{cursor:pointer}table.list tr.lrow:hover td{background:rgba(37,99,235,.06)}
.nw{white-space:nowrap}
.pel{display:flex;gap:10px;align-items:center}.pel a{font-weight:600;color:var(--tx);text-decoration:none}.pel small{display:block;color:var(--mut);font-size:.78rem}
.thumb{width:34px;height:44px;border-radius:7px;object-fit:cover;background:var(--bd);flex:none;display:block}
.badge{font-weight:600;text-transform:capitalize}
.badge.s-baru{background:rgba(37,99,235,.14);color:#2563eb}.badge.s-diproses{background:rgba(217,119,6,.16);color:#b45309}
.badge.s-wawancara{background:rgba(124,58,237,.15);color:#7c3aed}.badge.s-diterima{background:rgba(22,163,74,.16);color:#15803d}.badge.s-ditolak{background:rgba(220,38,38,.14);color:#dc2626}
.empty{text-align:center;padding:42px 16px;color:var(--mut)}.empty b{color:var(--tx)}
.back{display:inline-block;margin-bottom:12px;color:var(--pri);text-decoration:none;font-weight:600;font-size:.9rem}
.detail{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:860px){.detail{grid-template-columns:1fr}}
.detail .card{margin:0 0 14px}.detail aside .card:last-child{margin-bottom:0}
.profile p{margin:4px 0}.sec{margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--bd);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.docs{list-style:none;margin:0;padding:0}.docs li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}.docs li:last-child{border-bottom:0}