/* ============================================================
   HALAMAN LOGIN — INTERACTIVE PARTICLE NETWORK BACKGROUND

   Susunan lapisan (dari belakang ke depan):
     1. .login-container  -> warna & gradient dasar biru tua
     2. .bg-mesh          -> gradient mesh, bergeser halus ikut kursor
     3. #bgCanvas         -> particle network (lihat js/login-bg.js)
     4. .login-stage      -> semua teks & form

   Tata letak .login-stage dibagi 3 baris:
     [ zona atas   ] teks motivasi
     [ zona tengah ] kiri - FORM LOGIN - kanan
     [ zona bawah  ] ruang lapang

   Partikel otomatis meredup di area form, area atas, dan area
   kiri/kanan (diatur di js/login-bg.js -> zoneFactor) supaya
   teks dan form tetap bersih terbaca.
============================================================ */

/* ------------------------- Lapisan 1: dasar ------------------------- */
.login-container {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-color: #050b1a;
  background-image:
    radial-gradient(1100px 720px at 12% 10%, rgba(29, 78, 216, 0.30), transparent 62%),
    radial-gradient(950px 640px at 88% 88%, rgba(6, 148, 162, 0.26), transparent 62%),
    linear-gradient(155deg, #071229 0%, #050b1a 52%, #04121f 100%);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ------------------- Lapisan 2: dynamic gradient mesh ------------------ */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Wrapper luar -> animasi hanyut (CSS). Elemen <i> di dalamnya ->
   digeser oleh JS mengikuti kursor, supaya keduanya tidak bentrok. */
.mesh-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.mesh-blob > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: inherit;
  will-change: transform;
}

.blob-biru {
  width: 46vw;
  height: 46vw;
  top: -12vw;
  left: -8vw;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.55), transparent 68%);
  animation: meshDrift1 26s ease-in-out infinite alternate;
}

.blob-cyan {
  width: 42vw;
  height: 42vw;
  right: -10vw;
  bottom: -12vw;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.48), transparent 68%);
  animation: meshDrift2 32s ease-in-out infinite alternate;
}

.blob-emerald {
  width: 26vw;
  height: 26vw;
  right: 12vw;
  top: 4vw;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.26), transparent 70%);
  animation: meshDrift3 38s ease-in-out infinite alternate;
}

.blob-emas {
  width: 20vw;
  height: 20vw;
  left: 14vw;
  bottom: 6vw;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.20), transparent 70%);
  animation: meshDrift2 30s ease-in-out infinite alternate-reverse;
}

@keyframes meshDrift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5vw, 6vh, 0) scale(1.12); }
}
@keyframes meshDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-6vw, -5vh, 0) scale(1); }
}
@keyframes meshDrift3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4vw, 7vh, 0) scale(1.18); }
}

/* --------------------- Lapisan 3: canvas partikel --------------------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

/* ------------------------ Lapisan 4: konten --------------------------- */
.login-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vh, 34px);
  padding: clamp(26px, 5vh, 58px) 20px clamp(18px, 4vh, 40px);
  box-sizing: border-box;
}

/* ---- ZONA ATAS : teks motivasi ---- */
.zona-atas {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #7dd3fc;
  opacity: 0.85;
}

.motivasi-judul {
  margin: 0;
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  background: linear-gradient(100deg, #ffffff 12%, #a5f3fc 55%, #fcd34d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 24px rgba(2, 6, 23, 0.5);
}

.motivasi-kutipan {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.6;
  color: #cbd5e1;
  opacity: 0.92;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.motivasi-kutipan.is-fading {
  opacity: 0;
  transform: translateY(6px);
}

/* ---- ZONA TENGAH : kiri | form | kanan ---- */
.zona-tengah {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 70px);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.zona-samping {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 240px;
}

.zona-kiri  { justify-self: end;   text-align: left; }
.zona-kanan { justify-self: start; text-align: left; }

.pilar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 197, 255, 0.16);
  background: rgba(12, 26, 51, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.pilar:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(14, 33, 64, 0.6);
  transform: translateY(-2px);
}

.pilar svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: #38bdf8;
}

.zona-kanan .pilar svg { fill: #34d399; }

.pilar b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 2px;
}

.pilar span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: #94a3b8;
}

/* ---- ZONA BAWAH ---- */
.zona-bawah {
  min-height: 8px;
}

/* ============================================================
   FORM LOGIN
============================================================ */
.login-box {
  position: relative;
  z-index: 3;
  justify-self: center;
  background: #ffffff;
  padding: 35px 40px;
  width: 360px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 28px 70px rgba(2, 6, 23, 0.6),
    0 4px 16px rgba(2, 6, 23, 0.4);
  animation: fadeUp 0.45s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-logo {
  display: block;
  margin: 0 auto 15px auto;
  width: 85px;
  height: auto;
}

.login-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #1e293b;
}

.login-subtitle {
  text-align: center;
  color: #64748b;
  margin-bottom: 25px;
  font-size: 14px;
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #d2d7df;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  margin-bottom: 15px;
  transition: 0.25s;
}

.login-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.btn-login {
  width: 100%;
  background: #2563eb;
  color: white;
  border: none;
  padding: 12px 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: 0.25s;
}

.btn-login:hover {
  background: #1e40af;
}

.login-error {
  background: #fee2e2;
  color: #b91c1c;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 15px;
  display: none;
}

.login-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: grey;
}

.login-footer b {
  color: green;
}

/* ============================================================
   RESPONSIVE
============================================================ */

/* Layar sedang: teks kiri/kanan disembunyikan, form tetap di tengah */
@media (max-width: 1199px) {
  .zona-samping { display: none; }
  .zona-tengah { grid-template-columns: 1fr; }
  .login-box { justify-self: center; }
}

/* Layar pendek (mis. laptop 1366x600): rapatkan agar muat tanpa scroll */
@media (max-height: 720px) {
  .login-stage {
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 16px;
  }
  .motivasi-judul { font-size: clamp(22px, 3.1vw, 33px); }
  .motivasi-kutipan { margin-top: 8px; font-size: 13px; }
  .eyebrow { margin-bottom: 6px; }

  .login-box { padding: 26px 34px; }
  .login-logo { width: 64px; margin-bottom: 10px; }
  .login-title { font-size: 21px; }
  .login-subtitle { margin-bottom: 18px; }
  .login-input { padding: 10px 13px; margin-bottom: 12px; }
  .login-footer { margin-top: 14px; font-size: 12px; }
  .pilar { padding: 11px 14px; }
}

/* HP */
@media (max-width: 480px) {
  .login-box {
    width: 90%;
    max-width: 360px;
    padding: 28px 22px;
    border-radius: 15px;
  }

  .login-container input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #btnLogin {
    width: 100% !important;
  }

  .eyebrow { letter-spacing: 2.5px; }
  .mesh-blob { filter: blur(52px); }
}

/* Hormati preferensi "kurangi animasi" */
@media (prefers-reduced-motion: reduce) {
  .mesh-blob,
  .login-box {
    animation: none;
  }
  .motivasi-kutipan { transition: none; }
  .pilar { transition: none; }
}