/* ===================== Fonts ===================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@600;700&display=swap');

/* ===================== Theme Variables ===================== */
/* Palet diselaraskan dengan style.css (biru #4f7cff ↔ ungu #8b5cf6, latar #0f0f1e) */
:root{
  /* Base & Surfaces */
  --bg-1:#0f0f1e;
  --bg-2:#0c0f1d;            /* gradasi halus ke lebih gelap */
  --card:#141731;
  --card-2:#0f1330;

  /* Lines / Rings */
  --ring:rgba(255,255,255,.08);
  --stroke:var(--ring);

  /* Text */
  --txt:#e0e4ff;
  --muted:#a6b0d8;

  /* Accents */
  --primary:#4f7cff;         /* biru neon */
  --primary-2:#8b5cf6;       /* ungu neon */
  --success:#22c55e;
  --success-2:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;

  /* Glow util */
  --glow:#8ab4ff;
}

/* ===================== Base ===================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--txt);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1000px 600px at 50% 0%, rgba(99,102,241,.20), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* ===========================
   Navbar Icon — Light Violet
=========================== */
:root{
  --icon:       #c4b5fd;        /* ungu muda cerah */
  --icon-hover: #e9ddff;        /* lebih terang saat hover/focus */
  --icon-glow:  rgba(196,181,253,.35);
}

/* Ikon di dalam tombol navbar (mendukung <svg> & <i>) */
.pp-nav-btn i,
.pp-nav-btn svg{
  color: var(--icon);
  transition: color .2s ease, filter .2s ease;
}

/* Paksa warna pada elemen SVG yang memiliki fill/stroke */
.pp-nav-btn svg [fill]:not([fill="none"]){   fill:   var(--icon) !important; }
.pp-nav-btn svg [stroke]:not([stroke="none"]){ stroke: var(--icon) !important; }

/* Hover/Focus: lebih terang + sedikit glow */
.pp-nav-btn:hover i,
.pp-nav-btn:focus-visible i,
.pp-nav-btn:hover svg,
.pp-nav-btn:focus-visible svg{
  color: var(--icon-hover);
  filter: drop-shadow(0 0 6px var(--icon-glow));
}
.pp-nav-btn:hover svg [fill]:not([fill="none"]){   fill:   var(--icon-hover) !important; }
.pp-nav-btn:hover svg [stroke]:not([stroke="none"]){ stroke: var(--icon-hover) !important; }


/* ===============================
   Top Right Mini Navbar Container
=============================== */
.pp-navbar{
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 10;
  padding: 8px;
  border-radius: 14px;
  background: rgba(20,23,49,.55);
  border: 1px solid var(--ring);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* Tombol navbar */
.pp-nav-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  color: #cfe0ff;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ring);
  transition:
    transform .12s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.pp-nav-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(79,124,255,.45);
  box-shadow: 0 0 0 3px rgba(79,124,255,.18);
  color: #fff;
  transform: translateY(-1px);
}

/* ===================== Auth Card ===================== */
.form-box{
  width:min(92vw, 460px);
  margin: clamp(96px, 20vh, 180px) auto 56px;

  /* Border gradient ala neon + isi gelap transparan */
  background:
    linear-gradient(0deg, rgba(20,23,49,.86), rgba(20,23,49,.86)) padding-box,
    linear-gradient(135deg, var(--primary), var(--primary-2)) border-box;
  border:1px solid transparent;

  border-radius:18px;
  padding:22px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(79,124,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position:relative; overflow:hidden;
}
.form-box::before{
  content:"";
  position:absolute; inset:-2px; pointer-events:none; z-index:0;
  background:
    radial-gradient(260px 120px at 20% -10%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(260px 120px at 120% 110%, rgba(79,124,255,.18), transparent 60%);
}
.form-box>*{ position:relative; z-index:1; }

.form-box h4{
  margin:0 0 6px;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.3px;
  font-family:"Orbitron",sans-serif;
  color:#eaf2ff;
  text-shadow:0 0 18px rgba(139,92,246,.18);
  text-align:center; /* ← rata tengah */
}

.form-box p{ color:var(--muted); }

/* ===================== Alerts ===================== */
.alert{
  border-radius:12px;
  border:1px solid var(--ring);
  background:#121433;
  color:#e8ecff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.alert-danger{ border-left:4px solid var(--danger); color:#fecaca; }
.alert-success{ border-left:4px solid var(--success); color:#dcfce7; }

/* ===================== Form Controls ===================== */
label.form-label, .form-box label{
  display:block;
  margin:10px 0 6px;
  color:#cbd5ff;
  font-weight:700;
  letter-spacing:.2px;
}
.form-control{
  width:100%; display:block;
  background:#0d1130;
  border:1px solid var(--ring);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  line-height:1.25;
  transition:border-color .2s ease, box-shadow .2s ease, background .25s ease, color .2s ease;
}
.form-control::placeholder{ color:#7e88b3; }
.form-control:focus{
  background:#B5BAFF;
  border-color: rgba(79,124,255,.6);
  outline:0;
  box-shadow:0 0 0 4px rgba(79,124,255,.18), 0 10px 28px rgba(0,0,0,.35);
}
.form-control.is-invalid{
  border-color:rgba(239,68,68,.65);
  box-shadow:0 0 0 3px rgba(239,68,68,.18);
}
.invalid-feedback{ color:#fecaca; }

/* One-time code input look */
input[name="code"]{
  letter-spacing:2px;
  text-transform:uppercase;
}

/* ==== Rounded password input group ==== */
.input-group{
  position: relative;
  border-radius: 12px;           /* sudut membulat untuk keseluruhan grup */
}

.input-group .form-control{
  border-radius: 12px 0 0 12px !important;  /* kiri membulat */
  border-right: none;                        /* sambungan mulus dengan tombol */
}

/* Tombol eye mengikuti radius kanan */
.input-group .password-toggle{
  border-radius: 0 12px 12px 0 !important;   /* kanan membulat */
  border-left: none;
  background: #0d1130;                       /* selaras dengan input */
  color: #cfe0ff;
  border: 1px solid var(--ring);
  border-left: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  min-width: 46px;
}

/* Hover & focus ring untuk seluruh grup */
.input-group .password-toggle:hover{
  background: #12163a;
  color: #ffffff;
  border-color: rgba(79,124,255,.5);
}

.form-control .password-toggle:focus-within{
  box-shadow: 0 0 0 4px rgba(79,124,255,.18), 0 10px 28px rgba(0,0,0,.35);
  border-radius: 12px;
}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:10px 14px;
  border-radius:12px;
  font-weight:800; letter-spacing:.2px;
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  color:#eaf2ff;
  background:
    linear-gradient(#0b102b,#0b102b) padding-box,
    linear-gradient(135deg, var(--primary), var(--primary-2)) border-box;
  border:1px solid transparent;
}
.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 16px rgba(139,92,246,.25);
}

.btn-success{
  color:#eafff6;
  background:
    linear-gradient(#0b102b,#0b102b) padding-box,
    linear-gradient(135deg, var(--success), var(--success-2)) border-box;
  border:1px solid transparent;
}
.btn-success:hover{
  filter: brightness(1.06);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 16px rgba(34,197,94,.25);
}

.btn-warning{
  color:#63ff83;
  background:
    linear-gradient(#0b102b,#0b102b) padding-box,
    linear-gradient(135deg, #fbbf24, var(--warning)) border-box;
  border:1px solid transparent;
}
.btn-warning:hover{
  color:#63ff83;
  filter: brightness(1.03);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 16px rgba(245,158,11,.25);
}

.btn-outline-secondary{
  color:#cbd5e1;
  border-color:#334155;
  background: transparent;
}
.btn-outline-secondary:hover{
  background:#0b1224;
  border-color:#4b5f87;
  color:#e2e8f0;
}

.btn-link{
  color:#8ab4ff;
  text-decoration:none;
}
.btn-link:hover{ color:#cfe0ff; text-decoration:underline; }

/* “Resend Code” link area */
.small{text-decoration:none;}
.small:hover{text-decoration:underline;}

/* ===================== Utilities ===================== */
.w-100{ width:100%; }

/* ===================== Responsive ===================== */
@media (max-width: 600px){
  .pp-navbar{ right:12px; left:12px; justify-content:center; }
  .form-box{ width: calc(100% - 24px); margin: 100px auto 40px; padding: 20px 16px; }
  .pp-nav-btn{ flex:1 1 auto; justify-content:center; }
}

/* ===================== Subtle Animations ===================== */
@keyframes floatGlow{
  0%{ box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(79,124,255,.20); }
  50%{ box-shadow: 0 22px 56px rgba(0,0,0,.48), 0 0 28px rgba(139,92,246,.22); }
  100%{ box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(79,124,255,.20); }
}
.form-box{ animation: floatGlow 5s ease-in-out infinite; }

/* ===================== Accessibility Focus ===================== */
:focus-visible{
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}
.input-group .form-control { border-right: 0; }
.input-group .password-toggle{
  border-left: 0;
  border-radius: 0 .75rem .75rem 0;
  background: #0f1a2b;
  color: #e8f0ff;
}
.input-group .password-toggle:hover { filter: brightness(1.1); }