:root{--dark:#07111f;--blue:#007aff;--cyan:#00c7ff;--green:#34c759;--red:#ff3b30;--muted:#64748b;--glass:rgba(255,255,255,.72);--line:rgba(255,255,255,.38)}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Arial,sans-serif;color:#0f172a;min-height:100vh;background:radial-gradient(circle at 10% 0,#bfdbfe,transparent 32%),radial-gradient(circle at 95% 5%,#a5f3fc,transparent 35%),linear-gradient(135deg,#f8fbff,#eef6ff 55%,#fff)}
a{text-decoration:none;color:inherit}.wrap{width:min(1180px,92%);margin:auto}.nav{width:min(1180px,92%);margin:20px auto;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:28px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px);box-shadow:0 20px 60px #0f172a14}.brand{display:flex;align-items:center;gap:12px}.brand img{width:48px;height:48px;border-radius:16px;object-fit:cover}.brand b{font-weight:900}.brand span{font-size:12px;color:var(--muted);font-weight:700}.btn{border:0;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;font-weight:900;cursor:pointer;box-shadow:0 15px 35px #007aff33;display:inline-block;text-align:center}.btn-dark{background:#111827}.btn-red{background:linear-gradient(135deg,#ff3b30,#ff9500)}.btn-green{background:linear-gradient(135deg,#16a34a,#34c759)}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:30px 0 50px}.chip{display:inline-block;background:white;border:1px solid #e2e8f0;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:900;color:#007aff}.hero h1{font-size:clamp(38px,6vw,72px);line-height:1;letter-spacing:-2.5px;margin:18px 0}.grad{background:linear-gradient(135deg,#007aff,#00c7ff,#34c759);-webkit-background-clip:text;color:transparent}.lead{font-size:18px;line-height:1.8;color:#475569}.glass{background:var(--glass);border:1px solid var(--line);border-radius:34px;backdrop-filter:blur(24px);box-shadow:0 30px 90px #0f172a1c}.card{padding:26px}.input,select,textarea{width:100%;border:1px solid #dbe3ef;background:#ffffffe8;padding:14px 16px;border-radius:17px;outline:none;font-size:15px;margin-top:10px}.input:focus,select:focus,textarea:focus{border-color:#007aff;box-shadow:0 0 0 5px #007aff1a}.title{font-size:26px;font-weight:900}.muted{color:var(--muted);line-height:1.6}.alert{border-radius:18px;padding:14px 16px;margin:14px 0;font-weight:800}.ok{background:#dcfce7;color:#166534}.err{background:#fee2e2;color:#991b1b}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.mini{background:#ffffffcc;border:1px solid #e2e8f0;border-radius:24px;padding:18px}.status{font-size:48px;font-weight:900;margin:5px 0}.lulus{color:#16a34a}.tidak{color:#dc2626}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.info{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:13px}.info b{display:block;font-size:11px;color:#64748b;text-transform:uppercase;margin-bottom:4px}.admin-grid{display:grid;grid-template-columns:330px 1fr;gap:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.stat{padding:18px;border-radius:24px;background:#ffffffba;border:1px solid #e2e8f0}.stat b{font-size:30px}.table-wrap{overflow:auto;border-radius:24px;background:white;border:1px solid #e2e8f0}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}th{background:#f8fafc;color:#64748b;font-size:12px;text-transform:uppercase}.pill{display:inline-block;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900}.pill-ok{background:#dcfce7;color:#166534}.pill-no{background:#fee2e2;color:#991b1b}.action{display:inline-block;padding:7px 10px;border-radius:11px;font-weight:900;font-size:12px;margin:2px}.edit{background:#dbeafe;color:#1d4ed8}.del{background:#fee2e2;color:#b91c1c}.print{background:#fef3c7;color:#92400e}.footer{text-align:center;color:#64748b;padding:30px}.reveal{position:fixed;inset:0;background:#07111ee6;backdrop-filter:blur(20px);z-index:99;display:none;align-items:center;justify-content:center;padding:20px}.reveal-box{max-width:520px;background:white;border-radius:34px;padding:30px;text-align:center;box-shadow:0 30px 100px #0006}.emoji{font-size:58px;animation:bounce 1s infinite alternate}.loader{height:12px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:18px 0}.bar{height:100%;width:0;background:linear-gradient(90deg,#007aff,#00c7ff,#34c759);animation:load 4s forwards}@keyframes load{to{width:100%}}@keyframes bounce{to{transform:translateY(-8px) rotate(5deg)}}.confetti{position:fixed;top:-20px;width:10px;height:16px;z-index:120;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(700deg)}}@media(max-width:900px){.hero,.admin-grid{grid-template-columns:1fr}.grid3,.stats{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr}}@media(max-width:560px){.grid3,.stats{grid-template-columns:1fr}.brand span{display:none}.nav{border-radius:22px}.hero h1{letter-spacing:-1.4px}}