/* ===================== */
/*  Finbook — Login Dark */
/* ===================== */

:root {
  /* Palet gelap */
  --bg-1:#0b0f1a; --bg-2:#0d1222; --bg-3:#0a0f1f;
  --card: rgba(12, 18, 34, 0.92);
  --card-border: rgba(148, 163, 184, 0.18);
  --text:#e5e7eb; --muted:#a1a1aa;

  /* Aksen */
  --accent:#8b5cf6;    /* ungu */
  --accent-2:#60a5fa;  /* biru */
  --danger:#f87171; --success:#22c55e; --warning:#facc15;

  /* Radius & efek */
  --radius-lg: 26px; --radius-md: 16px; --radius-sm: 10px;
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.35);

  /* Noise */
  --noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/></filter><rect width="128" height="128" filter="url(%23n)" opacity=".035"/></svg>');
}

* { box-sizing: border-box }
[hidden]{ display:none !important; }
html, body { height: 100% }

body{
  margin: 0;
  font: 400 16px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(900px 480px at 90% 12%, rgba(96,165,250,.16), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3) 100%);
  background-attachment: fixed;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image: var(--noise);
  opacity:.8; mix-blend-mode: soft-light;
  pointer-events:none; z-index:-1;
}

/* Aurora dekoratif */
.aurora{
  position:fixed; inset:-18% -10% -14% -10%;
  background:
    radial-gradient(60% 40% at 70% 10%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(50% 35% at 20% 80%, rgba(96,165,250,.14), transparent 60%),
    conic-gradient(from 120deg, transparent 0 30%, rgba(139,92,246,.07) 40%, transparent 70%);
  filter: blur(40px) saturate(115%);
  animation: float 18s ease-in-out infinite alternate;
  pointer-events:none; z-index:-2;
}
@keyframes float{ 0%{transform:translateY(-2%) scale(1)} 100%{transform:translateY(2%) scale(1.03)} }
@media (prefers-reduced-motion:reduce){ .aurora{ animation:none } }

/* Center */
main{
  min-height: 100dvh;
  display:grid; place-items:center;
  padding: clamp(24px, 6vw, 52px) clamp(16px, 5vw, 32px);
}

/* Card */
.login-card{
  width: min(420px, 92vw);
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 6vw, 40px) clamp(24px, 6vw, 36px);
  display:grid; gap: 22px;
  backdrop-filter: blur(16px) saturate(135%);
  animation: fade-up 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes fade-up{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }

/* Header */
.login-header{ display:grid; gap:10px }
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.02em;
  font-size: clamp(18px, 5vw, 22px); color:#fff;
}
.brand-icon{
  width:38px; height:38px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center; font-weight:800; font-size:18px;
  box-shadow: var(--shadow-sm);
}
h1{ margin:0; font-size: clamp(24px, 6vw, 30px); font-weight: 900; color:#f9fbff }
.login-header p{ margin:0; color: var(--muted); font-size:.97rem }

/* Form */
form{ display:grid; gap:18px }
form[data-mode="unlock"] #credentialsGroup,
form[data-mode="unlock"] #emailField,
form[data-mode="unlock"] #passwordField { display:none !important; }
form[data-mode="full"] #pinGroup,
form[data-mode="full"] #unlockActions { display:none !important; }
.field-group{ display:grid; gap:18px }
.field{ display:grid; gap:6px }
label{ font-weight:700; font-size:.93rem; color:#f1f5ff }

input[type="email"],
input[type="password"],
input[type="text"]{
  width:100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(12,18,34,.75);
  color:#fff; font-size:1rem; padding: 14px 16px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
input::placeholder{ color: rgba(231,235,245,.45) }
input:focus{
  outline: none;
  border-color: rgba(139,92,246,.75);
  box-shadow: 0 0 0 3px rgba(139,92,246,.22);
  background: rgba(10,18,32,.9);
}

/* Toggle button (password/PIN) */
.input-with-toggle{ position:relative; display:flex; align-items:center }
.input-with-toggle input{ width:100% }

.pin-toggle{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  border:0; border-radius: var(--radius-sm);
  background: rgba(139,92,246,.16); color:#dbe4ff;
  font-weight:700; font-size:.8rem; padding:6px 10px; cursor:pointer;
  transition: background .16s ease, color .16s ease;
}
.pin-toggle:hover, .pin-toggle:focus-visible{
  background: rgba(139,92,246,.28); color:#fff; outline: none;
}

/* PIN style (6 digit) */
.pin-input input{
  letter-spacing: 6px; text-align:center; font-weight:800;
}

/* Unlock actions (email aktif + switch akun) */
.actions{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:.9rem; color: var(--muted);
}
.actions a{ color:#dbe4ff; text-decoration:none; font-weight:700 }
.actions a:hover{ text-decoration:underline }

/* Submit */
button[type="submit"]{
  margin-top:4px; border:0; border-radius: var(--radius-md);
  padding: 14px 18px; font-weight:800; font-size:1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; cursor:pointer; transition: transform .12s ease, box-shadow .16s ease;
  box-shadow: 0 14px 28px rgba(139,92,246,.28);
}
button[type="submit"]:active{ transform: translateY(1px) }
button[type="submit"]:disabled{ opacity:.6; cursor: progress; box-shadow:none }

/* Status bar */
.status{
  min-height:1.2rem; font-size:.92rem; border-radius: var(--radius-sm);
  padding:10px 12px; display:none;
}
.status.show{ display:block }
.status.info{
  background: rgba(59,130,246,.18); color:#bfdbfe; border:1px solid rgba(59,130,246,.35);
}
.status.error{
  background: rgba(248,113,113,.18); color:#fecaca; border:1px solid rgba(248,113,113,.38);
}
.status.success{
  background: rgba(34,197,94,.20); color:#bbf7d0; border:1px solid rgba(34,197,94,.35);
}

/* Hint & footnote */
.field-hint{ margin:0; font-size:.82rem; color:rgba(223,230,255,.55) }
.footnote{ margin:0; font-size:.85rem; color:rgba(203,212,238,.68); text-align:center }

/* Aksesibilitas fokus */
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent) 60%, #fff 10%);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Responsif */
@media (max-width: 480px){
  body{ overflow-y:auto }
  .login-card{ gap:18px; border-radius: 20px }
  .pin-input input{ letter-spacing:5px }
}

/* (Opsional) skema terang jika OS pakai light */
@media (prefers-color-scheme: light){
  :root{
    --bg-1:#f5f7ff; --bg-2:#e8ecff; --bg-3:#e3e7ff;
    --card: rgba(255,255,255,.9); --card-border: rgba(99,102,241,.18);
    --text:#1f2937; --muted:#4b5563;
  }
  body{ color:var(--text) }
  .login-card{ box-shadow: 0 18px 36px rgba(79,70,229,.18) }
  label{ color:#1f2937 }
  .field-hint{ color: rgba(55,65,81,.6) }
  .status.info{ color:#1d4ed8 }
  .status.error{ color:#b91c1c }
  .status.success{ color:#15803d }
}