*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
 display:flex;align-items:center;justify-content:center;padding:28px 18px;position:relative;
 overflow-x:hidden;color:#344054}
.latar{position:fixed;inset:0;z-index:0;overflow:hidden;background:#062415}
.latar .lap{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.latar .lap.tampil{opacity:1}
.latar .lap video,.latar .lap img{width:100%;height:100%;object-fit:cover}
.latar .lap .wrn{width:100%;height:100%;
 background:linear-gradient(125deg,#062415,var(--ut) 38%,var(--u) 68%,var(--k));
 background-size:230% 230%;animation:geser 20s ease infinite}
@keyframes geser{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tirai{position:fixed;inset:0;z-index:1;
 background:linear-gradient(135deg,rgba(6,36,21,.9),rgba(6,36,21,.72) 55%,rgba(13,71,161,.5))}
.kisi{position:fixed;inset:0;z-index:1;opacity:.4;
 background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px}

.kotak{position:relative;z-index:2;width:100%;max-width:412px}
.merek{text-align:center;margin-bottom:22px}
.merek a{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.merek img{height:46px}
.merek .lmb{width:46px;height:46px;border-radius:13px;
 background:linear-gradient(135deg,var(--u),var(--x));color:#fff;font-weight:800;font-size:1.3rem;
 display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.merek .nm{color:#fff;font-weight:800;font-size:1.5rem;letter-spacing:2px}
.merek .nm b{color:var(--x)}
.merek .sub{display:block;color:rgba(255,255,255,.6);font-size:.7rem;letter-spacing:2px;
 margin-top:4px;font-weight:600}

.kartu{background:rgba(255,255,255,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.kartu .garis{height:4px;background:linear-gradient(90deg,var(--u),var(--k),var(--x))}
.kartu .isi{padding:32px 30px}
.kartu h1{margin:0 0 5px;font-size:1.32rem;font-weight:800;color:#0d1b14;letter-spacing:-.4px}
.kartu .ket{margin:0 0 24px;font-size:.86rem;color:#667085}

.grup{margin-bottom:15px}
.grup label{display:block;font-size:.78rem;font-weight:700;color:#344054;margin-bottom:6px}
.isian{position:relative}
.isian input{width:100%;padding:13px 44px 13px 42px;border:1px solid #d0d5dd;border-radius:11px;
 font-family:inherit;font-size:.93rem;color:#101828;background:#fff;transition:.16s}
.isian input:focus{outline:0;border-color:var(--u);box-shadow:0 0 0 4px rgba(23,133,74,.11)}
.isian .ik{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#98a2b3;font-size:.9rem}
.isian input:focus ~ .ik{color:var(--u)}
.mata{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
 border:0;background:transparent;color:#98a2b3;cursor:pointer;border-radius:8px;
 display:flex;align-items:center;justify-content:center;transition:.14s}
.mata:hover{background:#f4f6f9;color:var(--u)}

.tbl{width:100%;padding:13px;border:0;border-radius:11px;background:var(--u);color:#fff;
 font-family:inherit;font-weight:700;font-size:.93rem;cursor:pointer;transition:.18s;
 display:flex;align-items:center;justify-content:center;gap:9px;
 box-shadow:0 4px 14px rgba(23,133,74,.3)}
.tbl:hover{background:var(--ut);transform:translateY(-1px)}
.tbl:active{transform:none}

.lapor{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-size:.85rem;
 display:flex;align-items:flex-start;gap:9px}
.lapor.no{background:#fef3f2;color:#b42318;border:1px solid #fecdc9}
.lapor.ok{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}
.lapor i{margin-top:2px}

.bawah{margin-top:20px;padding-top:17px;border-top:1px solid #f2f4f7;text-align:center}
.bawah a{color:#667085;font-size:.83rem;text-decoration:none;font-weight:500}
.bawah a:hover{color:var(--u)}
.bawah .pisah{margin:0 9px;color:#d0d5dd}
.kaki-kecil{text-align:center;margin-top:18px;color:rgba(255,255,255,.55);font-size:.76rem}

@media(max-width:480px){
 .kartu .isi{padding:26px 22px}
 .merek .nm{font-size:1.3rem}
 .merek img,.merek .lmb{height:40px;width:40px}
}