:root{--navy:#0B2A66;--biru:#1F6FE5;--oranye:#F7801D;--ink:#14213d;--muted:#64748b;--garis:#dbe4f3;--merah:#E5484D;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(160deg,#071d4a,#0B2A66 55%,#12409a);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
.latar{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.latar i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:melayang 16s ease-in-out infinite alternate}
.latar i:nth-child(1){width:360px;height:360px;background:#1F6FE5;top:-80px;left:-80px}
.latar i:nth-child(2){width:300px;height:300px;background:#F7801D;bottom:-100px;right:-60px;opacity:.35;animation-delay:-5s}
.latar i:nth-child(3){width:240px;height:240px;background:#3b8bff;top:45%;left:58%;opacity:.28;animation-delay:-9s}
@keyframes melayang{to{transform:translate(40px,30px) scale(1.12)}}
.tengah{position:relative;display:grid;place-items:center;min-height:100%;padding:24px 16px}
.kartu{width:100%;max-width:410px;padding:34px 30px 26px;border-radius:24px;background:#fffffff2;box-shadow:0 40px 80px -30px #000a,0 0 0 1px #ffffff40;backdrop-filter:blur(10px);text-align:center;animation:naik .6s var(--ease) both}
@keyframes naik{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.logo{display:block;margin:0 auto 12px;border-radius:16px;box-shadow:0 14px 26px -16px #0b2a66}
h1{margin:0;font-size:1.55rem;letter-spacing:-.4px;color:var(--navy)}
.sub{margin:6px 0 22px;color:var(--muted)}
form{display:grid;gap:14px;text-align:left}
.fld{display:grid;gap:6px;font-weight:800;color:var(--navy);font-size:.9rem}
.fld input{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--garis);border-radius:14px;background:#fff;font:inherit;font-weight:600;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fld input:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 4px #1f6fe522}
.sandi{position:relative;display:block}
.sandi input{padding-right:52px}
.sandi .mata{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;color:#7a89a5;cursor:pointer;transition:background .2s,color .2s}
.sandi .mata svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sandi .mata:hover{background:#EEF4FF;color:#1F6FE5}.sandi .mata.on{color:#1F6FE5;background:#EAF2FF}
.ingat{display:flex;gap:10px;align-items:center;font-weight:500;color:var(--muted);font-size:.88rem;cursor:pointer}
.ingat input{width:18px;height:18px;accent-color:var(--biru)}
.galat{margin:0;padding:10px 14px;border-radius:12px;background:#FDECEA;border:1px solid #f3c7c9;color:#B3262B;font-weight:700;font-size:.9rem}
.galat:not([hidden]){animation:goyang .4s}
@keyframes goyang{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.masuk{min-height:50px;border:0;border-radius:14px;background:linear-gradient(135deg,#FFAE3A,#F7801D);color:#fff;font:inherit;font-size:1rem;font-weight:900;cursor:pointer;box-shadow:0 16px 26px -16px #f7801dd0;transition:transform .2s var(--ease),box-shadow .2s,opacity .2s}
.masuk:hover{transform:translateY(-1px)}
.masuk:disabled{opacity:.65;cursor:wait;transform:none}
.masuk.proses span:after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;border:2.5px solid #fff8;border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.kaki{margin:20px 0 0;color:var(--muted);font-size:.84rem}
.kaki a{color:var(--biru);font-weight:800}
@media(max-width:420px){.kartu{padding:28px 20px 22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}