/* ==========================================================================
   TBZ Portal — Login & Splash
   Sumber desain: tbz-lms/Modules/Auth (auth.css + login.blade.php).

   Halaman login TIDAK memuat plugins.bundle.css / style.bundle.css.
   Jangan pakai class Bootstrap/Metronic di login.blade.php — CSS-nya tidak ada.
   Font Plus Jakarta Sans & Material Symbols dimuat via Google Fonts CDN di
   login.blade.php, jadi tidak ada @font-face lokal di sini.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --auth-orange: #ff8a00;
  --auth-yellow: #ffcb03;
  --auth-green: #0f8f01;
  --auth-green-dark: #0b7001;
  --auth-green-soft: #eaf6e7;

  /* Teks */
  --auth-ink: #151c27;
  --auth-ink-soft: #525a66;
  --auth-ink-mute: #8891a0;

  /* Permukaan */
  --auth-canvas: #f7f8fa;
  --auth-surface: #ffffff;
  --auth-porcelain: #f6f7f9;
  --auth-line: #e2e5ea;

  /* Status */
  --auth-danger: #d92d20;
  --auth-danger-soft: #fef3f2;

  /* Radius */
  --auth-radius-card: 22px;
  --auth-radius-field: 12px;
  --auth-radius-pill: 999px;

  /* Bayangan */
  --auth-shadow-card: 0 28px 70px -24px rgba(21, 28, 39, 0.3);

  /* Tipografi */
  --auth-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--auth-font-sans);
  color: var(--auth-ink);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   3. Halaman: canvas + dua glow radial + pola titik
   -------------------------------------------------------------------------- */

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  background-color: var(--auth-canvas);
  background-image:
    radial-gradient(circle at 14% 16%, rgba(255, 138, 0, 0.1), transparent 40%),
    radial-gradient(circle at 86% 84%, rgba(15, 143, 1, 0.12), transparent 42%);
}

.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: radial-gradient(rgba(15, 143, 1, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   4. Ikon
   -------------------------------------------------------------------------- */

.auth-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* --------------------------------------------------------------------------
   5. Kartu
   -------------------------------------------------------------------------- */

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--auth-surface);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-card);
  box-shadow: var(--auth-shadow-card);
  overflow: hidden;
}

.auth-card__accent {
  height: 8px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--auth-orange) 0%,
    var(--auth-yellow) 50%,
    var(--auth-green) 100%
  );
}

.auth-card__body {
  padding: 36px 40px;
}

/* --------------------------------------------------------------------------
   6. Brand
   -------------------------------------------------------------------------- */

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

.auth-brand__logo {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 24px;
}

.auth-brand__title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.auth-brand__subtitle {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--auth-green);
}

/* --------------------------------------------------------------------------
   7. Alert error inline
   -------------------------------------------------------------------------- */

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: var(--auth-radius-field);
  background: var(--auth-danger-soft);
  border: 1px solid rgba(217, 45, 32, 0.2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--auth-ink);
}

.auth-alert[hidden] {
  display: none;
}

.auth-alert__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--auth-danger);
}

/* --------------------------------------------------------------------------
   8. Form
   -------------------------------------------------------------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--auth-ink-soft);
}

.auth-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-field__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--auth-green);
  text-decoration: none;
}

.auth-field__link:hover {
  text-decoration: underline;
}

/* Pembungkus input + ikon kiri (+ tombol mata di kanan). */
.auth-field__control {
  position: relative;
}

.auth-field__input {
  width: 100%;
  padding: 12px 16px 12px 44px; /* ruang kiri untuk ikon */
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--auth-ink);
  background: var(--auth-porcelain);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-field);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

/* Varian password: sisakan ruang kanan untuk tombol mata. */
.auth-field__input--with-toggle {
  padding-right: 44px;
}

.auth-field__input::placeholder {
  color: var(--auth-ink-mute);
}

.auth-field__input:focus {
  outline: none;
  background: var(--auth-surface);
  border-color: var(--auth-green);
  box-shadow: 0 0 0 3px rgba(15, 143, 1, 0.2);
}

.auth-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(82, 90, 102, 0.6);
  pointer-events: none;
}

.auth-field__toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(82, 90, 102, 0.55);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.auth-field__toggle:hover {
  color: var(--auth-ink-soft);
}

.auth-field__toggle:focus-visible {
  outline: 2px solid var(--auth-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Error per-field dari validasi server-side ($errors). */
.auth-field__error {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--auth-danger);
}

/* Remember me */
.auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 2px;
}

.auth-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-check__box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--auth-line);
  border-radius: 5px;
  background: var(--auth-porcelain);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-check__box svg {
  opacity: 0;
}

.auth-check input:checked + .auth-check__box {
  background: var(--auth-green);
  border-color: var(--auth-green);
}

.auth-check input:checked + .auth-check__box svg {
  opacity: 1;
}

.auth-check__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--auth-ink-soft);
}

/* --------------------------------------------------------------------------
   9. Tombol utama
   -------------------------------------------------------------------------- */

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #fff;
  background: var(--auth-green);
  border: 0;
  border-radius: var(--auth-radius-field);
  cursor: pointer;
  transition: background-color 0.15s;
}

.auth-btn:hover {
  background: var(--auth-green-dark);
}

.auth-btn:focus-visible {
  outline: 2px solid var(--auth-green-dark);
  outline-offset: 3px;
}

.auth-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

.auth-btn .auth-icon {
  font-size: 19px;
}

.auth-btn .indicator-label,
.auth-btn .indicator-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auth-btn .indicator-progress {
  display: none;
}

.auth-btn[data-kt-indicator='on'] > .indicator-label {
  display: none;
}

.auth-btn[data-kt-indicator='on'] > .indicator-progress {
  display: inline-flex;
}

.auth-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-right-color: #fff;
  border-radius: 50%;
  animation: auth-spinner 0.75s linear infinite;
}

@keyframes auth-spinner {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   10. Tombol Google + divider (khusus portal siswa)
   -------------------------------------------------------------------------- */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--auth-ink-mute);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--auth-line);
}

.auth-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--auth-ink);
  background: var(--auth-surface);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-field);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background-color 0.15s, border-color 0.15s;
}

.auth-btn-google:hover {
  background: var(--auth-porcelain);
  border-color: var(--auth-ink-mute);
}

/* --------------------------------------------------------------------------
   11. Link, bantuan, footer
   -------------------------------------------------------------------------- */

.auth-help {
  margin-top: 24px;
  font-size: 13px;
  text-align: center;
  color: var(--auth-ink-soft);
}

.auth-footer {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--auth-ink-soft);
  white-space: nowrap;
}

.auth-footer .auth-icon {
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   12. Splash overlay
   Menutup layar sejak paint pertama, lalu memudar begitu sistem siap dan
   menampilkan form login di baliknya. Tanpa kartu, latar putih polos, pita
   gradien di tepi kiri, dan tiga titik berdenyut sebagai indikator. Sengaja
   TIDAK memakai ikon Material Symbols sama sekali, jadi tidak ada risiko
   ligatur sempat terbaca sebagai teks di paint pertama.
   -------------------------------------------------------------------------- */

.auth-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  /* Jaring pengaman tanpa JS: kalau JS gagal dimuat splash akan menutupi
     login selamanya. Animasi ini memudarkannya sendiri di detik ke-6. */
  animation: auth-splash-fallback 0.4s ease 6s forwards;
}

@keyframes auth-splash-fallback {
  to { opacity: 0; visibility: hidden; }
}

.auth-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

/* ---- Dekorasi latar ---- */

.auth-splash__side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(
    to bottom,
    var(--auth-orange),
    var(--auth-yellow) 50%,
    var(--auth-green)
  );
}

.auth-splash__glow {
  position: absolute;
  width: 60vw;
  max-width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  top: -24vw;
  right: -18vw;
  background: radial-gradient(circle, rgba(15, 143, 1, 0.1), transparent 65%);
}

.auth-splash__glow--2 {
  width: 52vw;
  max-width: 560px;
  top: auto;
  right: auto;
  bottom: -22vw;
  left: -14vw;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.09), transparent 65%);
}

/* ---- Isi ---- */

.auth-splash__logo {
  position: relative;
  z-index: 2;
  height: 92px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 34px;
  animation: auth-fade-up 0.8s ease both;
}

.auth-splash__title {
  position: relative;
  z-index: 2;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-splash__subtitle {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--auth-green);
}

@keyframes auth-fade-up {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Tiga titik berdenyut ---- */

.auth-splash__dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: 36px;
}

.auth-splash__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--auth-green);
}

.auth-splash__dots i:nth-child(1) {
  animation: auth-pulse 1.4s ease-in-out infinite;
}

.auth-splash__dots i:nth-child(2) {
  background: var(--auth-orange);
  animation: auth-pulse 1.4s ease-in-out 0.2s infinite;
}

.auth-splash__dots i:nth-child(3) {
  background: var(--auth-yellow);
  animation: auth-pulse 1.4s ease-in-out 0.4s infinite;
}

@keyframes auth-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.5); }
}

/* ---- Footer ---- */

.auth-splash__footer {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  z-index: 2;
}

.auth-splash__school {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-splash__copyright {
  margin-top: 6px;
  font-size: 11px;
  color: var(--auth-ink-mute);
}

/* --------------------------------------------------------------------------
   13. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .auth-page {
    justify-content: flex-start;
    padding: 24px 16px 16px;
  }

  .auth-card__body {
    padding: 28px 22px;
  }

  .auth-brand__title {
    font-size: 22px;
  }

  .auth-footer {
    position: static;
    transform: none;
    margin-top: 24px;
    text-align: center;
    white-space: normal;
  }

  .auth-splash__logo {
    height: 68px;
    margin-bottom: 26px;
  }
}

/* --------------------------------------------------------------------------
   14. Aksesibilitas: hormati preferensi pengguna yang mematikan animasi.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}