/* ============================================================
   auth.css : halaman masuk (email + sandi)
   ============================================================ */

body.auth-body{overflow-y:auto}
.auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
      padding:48px 20px}
.auth-card{width:100%;max-width:392px;text-align:center}

/* logo pesawat kertas */
.tg-logo{width:92px;height:92px;margin:0 auto 20px;
         filter:drop-shadow(0 8px 24px rgba(42,171,238,.26))}

.auth h1{font-size:32px;font-weight:600;letter-spacing:-.4px}
.auth .sub{color:var(--txt-2);font-size:15.5px;line-height:1.55;margin:12px auto 28px;max-width:348px}
.auth .sub .demo{display:inline-block;margin-top:8px;font-size:13.5px;color:#8fa6bb}
.auth .sub .demo b{color:var(--link);font-weight:600}

/* ---------- isian ---------- */
.inp{position:relative;margin-bottom:16px;text-align:left}
.inp input{width:100%;height:54px;border-radius:10px;background:transparent;
  border:1px solid #2f3d4d;padding:0 46px 0 14px;font-size:16px;color:#fff;
  transition:border-color .15s,box-shadow .15s}
.inp input:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.inp label{position:absolute;left:11px;top:16px;padding:0 5px;color:var(--txt-2);font-size:16px;
  pointer-events:none;transition:.14s;background:var(--bg);line-height:1.1}
.inp.filled label,.inp input:focus+label{top:-8px;font-size:12.5px}
.inp input:focus+label{color:var(--accent)}
.inp .caret{position:absolute;right:10px;top:15px;color:var(--txt-2);width:24px;height:24px;
            display:grid;place-items:center}
.inp .eye{cursor:pointer;border-radius:6px}
.inp .eye:hover{color:#fff}
.inp .eye.on{color:var(--link)}
.inp.err input{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.inp .hint{display:none;color:var(--red);font-size:13px;margin:6px 2px 0}
.inp.err .hint{display:block}

.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;
             margin:4px 2px 24px}
.link-sm{color:var(--link);font-size:14px;cursor:pointer;white-space:nowrap}
.link-sm:hover{text-decoration:underline}

.check{display:flex;align-items:center;gap:11px;cursor:pointer;color:#dbe5ee;font-size:15px}
.check i{width:20px;height:20px;border-radius:5px;border:1.8px solid #56697c;flex:none;
         display:grid;place-items:center;transition:.14s}
.check.on i{background:var(--accent);border-color:var(--accent)}
.check i svg{width:14px;height:14px;opacity:0;transition:.12s}
.check.on i svg{opacity:1}

.btn{width:100%;height:54px;border-radius:10px;background:var(--accent);color:#fff;font-size:15px;
     font-weight:600;letter-spacing:.5px;text-transform:uppercase;transition:background .15s;
     display:grid;place-items:center}
.btn:hover{background:var(--link)}
.btn:disabled{cursor:default}
.btn .dots{display:flex;gap:5px}
.btn .dots i{width:7px;height:7px;border-radius:50%;background:#fff;animation:bd .9s infinite}
.btn .dots i:nth-child(2){animation-delay:.15s}
.btn .dots i:nth-child(3){animation-delay:.3s}
@keyframes bd{0%,70%,100%{opacity:.35}35%{opacity:1}}

.foot{margin-top:22px;color:var(--txt-2);font-size:14.5px}
.foot a{cursor:pointer}
.foot a:hover{text-decoration:underline}

.shake{animation:shake .42s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)}
}

@media (max-width:420px){
  .tg-logo{width:76px;height:76px}
  .auth h1{font-size:26px}
}