/* ====== Auth (Login/Register) – Dark + Glassmorphism ====== */
:root{
  --bg:#0b1020; --card:#0f152a; --soft:#121a36; --muted:#97a3c0; --text:#eaf1ff;
  --brand:#3b82f6; --brand-2:#8b5cf6; --ring:#3654ff;
}

.auth-wrap{
  min-height:calc(100vh - 120px);
  display:grid; place-items:center;
  padding:40px 16px;
  background:
    radial-gradient(80rem 40rem at -20% -20%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(70rem 40rem at 120% 10%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, #0b1020, #0a1022);
  color:var(--text);
}

.auth-card{
  width:min(980px, 100%);
  display:grid; grid-template-columns: 1.05fr .95fr;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(16,23,51,.88), rgba(14,21,48,.82));
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  animation: fadeUp .55s ease both;
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:920px){ .auth-card{ grid-template-columns:1fr } .auth-side{ display:none } }

.auth-side{
  padding:32px 32px 24px;
  border-right:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(50rem 30rem at 10% 0%, rgba(59,130,246,.16), transparent 70%),
    radial-gradient(60rem 36rem at 90% 20%, rgba(139,92,246,.16), transparent 60%);
}
.brand{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.brand .logo{ width:44px; height:44px; display:grid; place-items:center; font-size:22px;
  border-radius:12px; background:#0d1430; border:1px solid #202b57; color:#cfe3ff }
.brand h1{margin:0; font-size:20px}
.brand p{margin:0; color:var(--muted); font-size:13px}
.highlights{margin:16px 0 0; padding:0 0 0 18px; color:#cfe3ff}
.highlights li{margin:10px 0}

.auth-form{ padding:32px; }
.auth-form h2{ margin:0 0 6px; font-size:22px; color:#fff }
.auth-form .muted{ margin:0 0 18px; color:var(--muted); font-size:14px }

/* ===== NAMESPACE: auth-ig ===== */
.auth-ig{ margin-bottom:14px }
.auth-ig label{ display:block; font-size:13px; color:#c8d2ff; margin:0 0 6px }

.auth-ig__box{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.06);            /* gelap */
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px; padding:12px 14px;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.auth-ig__box:focus-within{
  border-color: rgba(54,84,255,.8);
  box-shadow: 0 0 0 4px rgba(54,84,255,.18);
  background: rgba(255,255,255,.08);
}
.auth-ig__icon{ opacity:.9 }
.auth-ig__box input{
  flex:1; background:transparent; border:0; outline:0;
  color:#fff; font-size:15px;      /* TEKS PUTIH */
  caret-color:#fff;
}
.auth-ig__box input::placeholder{ color:rgba(255,255,255,.55) }

.auth-ig__eye{
  background:transparent; border:0; color:#bcd2ff; cursor:pointer; font-size:16px;
  padding:2px 4px; border-radius:8px;
}
.auth-ig__eye:hover{ filter:brightness(1.15) }

.btn-primary{
  width:100%; margin-top:8px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border:0; color:white; padding:12px 14px; border-radius:12px; font-weight:700; cursor:pointer;
  box-shadow:0 12px 28px rgba(59,130,246,.28);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary:hover{ transform: translateY(-2px); filter:brightness(1.02) }
.btn-primary:active{ transform: translateY(0) }

.switch{ margin-top:14px; color:#a9b6e1; font-size:14px; text-align:center }
.switch a{ color:#bcd2ff; text-decoration:none; border-bottom:1px dotted #bcd2ff }
.switch a:hover{ color:white; border-bottom-color:white }

/* meter di register */
.meter{height:6px; background:#12204a; border-radius:999px; margin-top:8px; overflow:hidden; border:1px solid #203064}
.meter span{display:block; height:100%; width:0%; background:linear-gradient(90deg, #ef4444, #f59e0b, #10b981); transition:width .25s}