:root{--red:#c8261b;--ink:#1b1f23;--steel:#5b6670;--bg:#f6f5f3;--card:#fff;--line:#e3e0db;--yel:#f2b705;--ok:#1d7a46}
@media(prefers-color-scheme:dark){:root{--ink:#f1efec;--steel:#a3adb5;--bg:#15181b;--card:#1f2428;--line:#333a40}}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 Barlow,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.brand,.stats b{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:.2px;line-height:1.1}
h1{font-size:2.4rem;margin:1.2rem 0}h2{font-size:1.7rem;margin:2rem 0 .8rem}h3{font-size:1.3rem;margin:.3rem 0}
a{color:var(--red)}main{max-width:1060px;margin:auto;padding:1rem 1.2rem 3rem}
.top{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem;background:#1b1f23;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.top a{color:#fff;text-decoration:none}.brand{font-size:1.6rem;font-weight:700}
nav{display:flex;gap:1.1rem;align-items:center}nav a.on{border-bottom:3px solid var(--yel)}
.burger,#mn{display:none}.burger{color:#fff;font-size:1.6rem;cursor:pointer}
.stripe{height:8px;background:repeating-linear-gradient(135deg,var(--yel) 0 14px,#1b1f23 14px 28px)}
.hero{background:linear-gradient(120deg,#8f1710,var(--red));color:#fff;padding:3rem 2rem;border-radius:6px;margin:1rem 0}
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);max-width:15ch;margin:0 0 .6rem}.hero p{max-width:50ch;margin:0 0 1.2rem}
.btn{display:inline-block;background:var(--yel);color:#1b1f23;border:0;padding:.7rem 1.3rem;border-radius:4px;font:600 1rem Barlow,sans-serif;cursor:pointer;text-decoration:none}
.btn.sm{padding:.3rem .8rem;font-size:.9rem}.btn.red{background:var(--red);color:#fff}.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.1rem;margin-bottom:1rem}.card img{max-width:100%;border-radius:4px}.qris{max-width:220px}
.stats .card{border-top:4px solid var(--red);margin:0}.stats b{display:block;font-size:2.2rem}.stats small{font-size:1.1rem;color:var(--steel)}
.tag,.pill{font-size:.8rem;padding:.1rem .6rem;border-radius:20px;background:var(--line)}.pill.aktif,.pill.terkonfirmasi{background:#d6f0e0;color:var(--ok)}.pill.pending,.pill.nonaktif{background:#fde9c4;color:#8a5a00}
.bar{display:grid;grid-template-columns:130px 1fr 60px;gap:.6rem;align-items:center;margin:.4rem 0}.bar i{height:12px;background:var(--line);border-radius:6px;position:relative}.bar i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--red);border-radius:6px}.bar em{font-style:normal;color:var(--steel);text-align:right}
.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem}.tabs a{padding:.3rem .9rem;border:1px solid var(--line);border-radius:20px;text-decoration:none;color:var(--ink)}.tabs a.on{background:var(--red);color:#fff;border-color:var(--red)}
label{display:block;margin:.6rem 0;font-weight:500}input,select,textarea{display:block;width:100%;padding:.55rem;margin-top:.2rem;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);font:inherit}textarea{min-height:80px}
.chk{display:inline-block;margin-right:1rem}.chk input{display:inline;width:auto}fieldset{border:1px solid var(--line);margin:.8rem 0}
.inline{display:inline-block;margin-right:.3rem}.narrow{max-width:380px;margin:2rem auto}.ok,.err{padding:.8rem 1rem;border-radius:4px;margin:1rem 0}.ok{background:#d6f0e0;color:#14532d}.err{background:#fde2e0;color:#8f1710}
.timeline{border-left:4px solid var(--yel);padding-left:1rem}pre{font:inherit;white-space:pre-wrap}
footer{text-align:center;color:var(--steel);font-size:.9rem}footer p{padding:1rem}
@media(max-width:720px){.burger{display:block}nav{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:.6rem 0}#mn:checked~nav{display:flex}.bar{grid-template-columns:90px 1fr 50px}}
@media print{.top,.stripe,footer,.noprint{display:none}body{background:#fff;color:#000}}
.ok ul{margin:.4rem 0 0;padding-left:1.2rem}
.brand{display:flex;align-items:center;gap:.6rem}.logo{height:38px;width:auto;border-radius:4px}
.top a.login{border:1px solid #fff7;padding:.25rem .9rem;border-radius:4px}
.btn.ghost{background:transparent;color:#fff;border:2px solid #fff;padding:.6rem 1.2rem}
.slider{position:relative;aspect-ratio:16/6;overflow:hidden;border-radius:6px;background:#1b1f23;margin:1rem 0}
.sl{position:absolute;inset:0;opacity:0;transition:opacity .7s}.sl.on{opacity:1}.sl img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.sl p{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.5rem 1.2rem 1rem;color:#fff;font:700 1.6rem 'Barlow Condensed',sans-serif;background:linear-gradient(transparent,#000a)}
.slider button{position:absolute;top:50%;translate:0 -50%;border:0;background:#0007;color:#fff;font-size:1.6rem;width:42px;height:42px;border-radius:50%;cursor:pointer}.prev{left:.6rem}.next{right:.6rem}
.dots{position:absolute;bottom:.7rem;right:1rem;display:flex;gap:.4rem}.dots button{position:static;translate:none;width:12px;height:12px;padding:0;background:#fff8}.dots button[aria-current=true]{background:var(--yel)}
.wa{position:fixed;right:1rem;bottom:1rem;z-index:20}.wa summary{list-style:none;cursor:pointer;background:#1fa855;color:#fff;font-weight:600;padding:.7rem 1.1rem;border-radius:30px;box-shadow:0 4px 14px #0004}.wa summary::-webkit-details-marker{display:none}
.wa div{position:absolute;right:0;bottom:3.6rem;width:min(300px,86vw);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1rem;box-shadow:0 8px 24px #0004}.wa div p{margin:0 0 .6rem;font-size:.95rem}.wa div a{display:flex;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;margin-top:.4rem;background:#1fa855;color:#fff;text-decoration:none;border-radius:6px}
.hp{position:absolute;left:-9999px}.thumb{width:90px;height:50px;object-fit:cover;border-radius:4px}
.pill.diterima{background:#d6f0e0;color:var(--ok)}.pill.baru{background:#fde9c4;color:#8a5a00}.pill.ditolak{background:#fde2e0;color:#8f1710}
@media(max-width:720px){.slider{aspect-ratio:4/3}.sl p{font-size:1.25rem}}
.errp{text-align:center;padding:3rem 0}.errp b{display:block;font:700 7rem/1 'Barlow Condensed',Impact,sans-serif;color:var(--red)}.errp .btn{margin-right:1rem}