/* Wibowo App — Halaman Login "harapan"
   Gelap penuh, satu kolom terpusat, tiga elemen saja: sapaan + password + tombol.
   File terpisah dari custom.css supaya override tingkat dokumen di sini
   (html/body/background) tidak bocor ke halaman lain — lihat SPRINT
   LOGIN_GATEWAY / LOGIN_WISH di SPRINT.md.

   Palet 4 periode waktu (semuanya GELAP, tidak pernah jadi tema terang):
   gate-pagi / gate-siang / gate-sore / gate-malam — kelas dipilih oleh
   Date::period() di AuthController::renderLogin(). Kontras teks & tombol
   sudah dihitung WCAG (lihat SPRINT.md untuk rasio per preset x periode). */

*, *::before, *::after { box-sizing: border-box; }

html.gate, .gate {
  color-scheme: dark;
}

.gate {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-family: var(--tblr-font-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* --- Palet per waktu — bidang latar milik waktu, elemen interaktif milik accent --- */
.gate-pagi {
  --gate-glow-rgb: 58, 160, 216;   /* #3aa0d8 */
  background-image:
    radial-gradient(60% 55% at 50% 18%, rgba(var(--gate-glow-rgb), .22), transparent 65%),
    radial-gradient(70% 55% at 88% 96%, rgba(var(--gate-accent-rgb), .14), transparent 62%),
    linear-gradient(180deg, #0e3350 0%, #071a2b 60%, #04101c 100%);
}
.gate-siang {
  --gate-glow-rgb: 107, 143, 176;  /* #6b8fb0 */
  background-image:
    radial-gradient(60% 55% at 50% 18%, rgba(var(--gate-glow-rgb), .20), transparent 65%),
    radial-gradient(70% 55% at 88% 96%, rgba(var(--gate-accent-rgb), .14), transparent 62%),
    linear-gradient(180deg, #1e2a36 0%, #0d1117 60%, #0a0d12 100%);
}
.gate-sore {
  --gate-glow-rgb: 224, 122, 60;   /* #e07a3c */
  background-image:
    radial-gradient(60% 55% at 50% 18%, rgba(var(--gate-glow-rgb), .24), transparent 65%),
    radial-gradient(70% 55% at 88% 96%, rgba(var(--gate-accent-rgb), .14), transparent 62%),
    linear-gradient(180deg, #4a2214 0%, #1c0f0a 60%, #100802 100%);
}
.gate-malam {
  --gate-glow-rgb: 90, 85, 200;    /* #5a55c8 */
  background-image:
    radial-gradient(60% 55% at 50% 18%, rgba(var(--gate-glow-rgb), .24), transparent 65%),
    radial-gradient(70% 55% at 88% 96%, rgba(var(--gate-accent-rgb), .14), transparent 62%),
    linear-gradient(180deg, #161436 0%, #070a18 60%, #05030f 100%);
}

.gate-panel {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateZ(0);
}

/* --- Sapaan: satu-satunya elemen di atas form, jadi berperan sebagai hero --- */
.gate-greet {
  margin: 0 0 2rem;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #f8f9fa;
}

.gate-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.gate-label {
  /* Terlihat — label ini membawa arti "harapan", bukan sekadar "Password".
     Margin negatif mengimbangi gap .85rem milik .gate-form, pola yang sama
     dipakai .gate-hint di bawah. */
  margin: 0 0 -.35rem;
  font-size: .9rem;
  color: rgba(233, 236, 239, .75);
  text-align: center;
}

.gate-input {
  width: 100%;
  padding: .7rem 1rem;
  font-size: .95rem;
  color: #f8f9fa;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .5rem;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.gate-input::placeholder { color: rgba(255, 255, 255, .45); }
.gate-input::-ms-reveal { display: none; } /* Edge: tombol mata bawaan, tidak dipakai di desain ini */

.gate-input-invalid {
  border-color: rgba(255, 120, 120, .7);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .16);
}

/* Autofill: color-scheme:dark biasanya cukup, tapi Chrome kadang tetap
   mengecat latar sendiri — jaring pengaman eksplisit. Inset 1000px menutupi
   penuh, jadi satu warna netral gelap cukup untuk keempat palet waktu. */
.gate-input:-webkit-autofill,
.gate-input:-webkit-autofill:hover,
.gate-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8f9fa;
  -webkit-box-shadow: 0 0 0 1000px #14161c inset;
  transition: background-color 9999s ease-in-out 0s;
}

.gate-hint {
  margin: -.35rem 0 0;
  font-size: .75rem;
  color: #ffd28a;
  text-align: left;
}

.gate-btn {
  width: 100%;
  padding: .7rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: var(--gate-btn-fill);
  border: 0;
  border-radius: .5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
              0 10px 26px -10px rgba(var(--gate-glow-rgb, 0, 0, 0), .55);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.gate-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.gate-btn:active { transform: translateY(0); filter: brightness(.96); }

.gate-input:focus-visible,
.gate-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(var(--gate-accent-rgb), .28);
}

.gate-alert {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .6rem .75rem;
  font-size: .85rem;
  line-height: 1.35;
  text-align: left;
  color: #ffd7d7;
  background: rgba(220, 53, 69, .14);
  border: 1px solid rgba(255, 120, 120, .34);
  border-left: 3px solid #ff6b6b;
  border-radius: .4rem;
}
.gate-alert .ti { font-size: 1rem; line-height: 1.35; flex: 0 0 auto; }

/* --- Animasi: hanya jika pengguna tidak minta gerak dikurangi --- */
@media (prefers-reduced-motion: no-preference) {
  .gate-panel {
    animation: gate-in .5s cubic-bezier(.22, .9, .24, 1) both;
  }
  @keyframes gate-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }

  .gate-panel { transition: opacity .35s ease, transform .35s ease; }

  /* Ditambahkan lewat JS saat submit — form tetap POST normal, animasi
     hanya menemani perjalanan menuju respons server (lihat script di
     views/auth/login.php). Kalau server merender ulang halaman (error),
     dokumen baru lahir tanpa kelas ini, jadi tidak pernah "tersangkut". */
  .gate-leaving .gate-panel {
    opacity: 0;
    transform: scale(.96) translateY(-10px);
    pointer-events: none;
  }
}

@media (max-width: 420px) {
  .gate-greet { font-size: 1.3rem; }
}