/* Halaman auth (login, aktivasi, lupa password) - tema Komitel
   Catatan: style form/button/alert generik (dipakai juga di halaman
   anggota & admin) ada di style.css. File ini khusus tampilan kartu
   auth yang center di tengah layar. */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--komitel-white);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-top: 4px solid var(--komitel-red);
  padding: 32px 30px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 18px;
}

.auth-logo img { height: 44px; }

.auth-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.auth-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.auth-links {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}

.auth-links a {
  color: var(--komitel-red);
  text-decoration: none;
  font-weight: 600;
}

.auth-links a:hover { text-decoration: underline; }

.auth-links .sep { color: var(--komitel-gray-border); margin: 0 8px; }

/* ---- Halaman Login: frame split modern (Tahap 20) - panel visual foto
   karyawan di kiri, form di kanan. Hanya dipakai di auth/login.php; warna
   tetap tema Komitel (merah/putih/abu), tidak ikut biru/kuning referensi. ---- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--komitel-gray-light);
}

.login-card {
  width: 100%;
  max-width: 760px;
  min-height: 520px;
  background: var(--komitel-white);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(20, 20, 25, 0.10);
  display: flex;
  overflow: hidden; /* Tahap 24: card sendiri yg membulatkan sudut foto,
                       jadi foto bisa nempel pas ke tepi tanpa margin */
}

/* Panel visual (Tahap 22, disempurnakan Tahap 24): foto MEMENUHI seluruh
   panel PERSIS SAMPAI TEPI FRAME (tanpa jarak/margin sama sekali - sudut
   ikut membulat mengikuti .login-card karena overflow:hidden di atas),
   judul jadi overlay di atas foto (scrim gradasi gelap di bagian atas
   supaya teks putih tetap terbaca di atas foto apapun). */
.login-visual {
  flex: 1 1 44%;
  position: relative;
  background: var(--komitel-gray-light);
}

.login-visual-media { position: absolute; inset: 0; }
.login-visual-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-visual-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.45;
}

.login-visual-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(15, 16, 20, 0) 28%, rgba(15, 16, 20, 0) 60%, rgba(15, 16, 20, 0.65) 100%);
  pointer-events: none;
}

.login-visual-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 24px 26px 0;
}
.login-visual-logo img { height: 60px; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }

.login-visual-heading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 26px 24px;
}
.login-visual-heading .t1 {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--komitel-white);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.login-visual-heading .t2 {
  display: block;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.login-form-panel {
  flex: 1 1 56%;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  position: relative;
}

.login-form-inner { max-width: 340px; width: 100%; margin: auto; padding-top: 40px; }
.login-form-inner .auth-title { text-align: left; font-size: 25px; margin-bottom: 6px; }
.login-form-inner .auth-subtitle { text-align: left; margin-bottom: 26px; }
.login-form-inner .auth-links { text-align: left; margin-top: 20px; }

/* ---- Mode mobile (Tahap 25): foto jadi FULL BACKGROUND layar (position:fixed,
   menutupi seluruh viewport), logo + judul jadi overlay langsung di atas foto
   (bukan lagi disembunyikan seperti versi sebelumnya), form login jadi "bottom
   sheet" putih yang nempel di bawah supaya kolom input tetap mudah dibaca.
   Scrim dipertegas (gelap di atas utk logo & di bawah utk sambungan ke form)
   + text-shadow/drop-shadow diperkuat khusus mobile supaya logo & tulisan
   overlay tetap terbaca di atas foto apapun. ---- */
@media (max-width: 860px) {
  .login-shell { padding: 0; background: #000; align-items: stretch; }

  .login-card {
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    overflow: visible;
  }

  .login-visual {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    flex: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }

  .login-visual-scrim {
    background: linear-gradient(180deg,
      rgba(10, 11, 14, 0.78) 0%,
      rgba(10, 11, 14, 0.30) 24%,
      rgba(10, 11, 14, 0.18) 46%,
      rgba(10, 11, 14, 0.55) 74%,
      rgba(10, 11, 14, 0.92) 100%);
  }

  .login-visual-logo { padding: 26px 24px 0; }
  .login-visual-logo img {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(0, 0, 0, 0.4));
  }

  .login-visual-heading {
    top: 96px;
    bottom: auto;
    left: 0;
    right: 0;
    padding: 0 24px;
    text-align: center;
  }
  .login-visual-heading .t1 { font-size: 19px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
  .login-visual-heading .t2 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }

  .login-form-panel {
    flex: none;
    position: relative;
    z-index: 1;
    background: var(--komitel-white);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
    padding: 28px 22px 26px;
  }

  .login-form-inner { padding-top: 0; max-width: 100%; }
  .login-form-inner .auth-title,
  .login-form-inner .auth-subtitle,
  .login-form-inner .auth-links { text-align: center; }
}