/*
 * ===================================
 * STYLING UNTUK HALAMAN AUTENTIKASI (LOGIN & REGISTER)
 * ===================================
 */

/* MODIFIKASI: Menggunakan 'vh' untuk tinggi min-height agar lebih responsif terhadap tinggi layar */
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Tambahkan ini agar horizontal centering tetap terjaga */
  min-height: 100vh; /* Gunakan 100vh untuk mengisi seluruh tinggi layar */
  padding: 2rem 0; /* Beri padding atas & bawah */
}

.auth-card {
  width: 100%;
  max-width: 900px; /* Lebar maksimum kartu */
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.07);
}

/* --- Kolom Kiri (Branding) --- */
.auth-branding-side {
  background-image: url('https://images.unsplash.com/photo-1604176354204-9268737828e4?q=80&w=1983&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.auth-branding-side h1 {
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.auth-branding-side p {
  font-size: 1.1rem;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Kolom Kanan (Form) --- */
.auth-form-side {
  padding: 2rem 3rem;
  background-color: #fff;
}

.auth-form-side .logo {
  width: 80px;
  margin-bottom: 1.5rem;
}

.auth-form-side h2 {
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.form-floating > .form-control {
  margin-bottom: 1rem;
}

.form-control:focus {
  border-color: #343a40;
  box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.25);
}

.btn-auth {
  background-color: #212529;
  border-color: #212529;
  color: #fff;
  padding: 0.75rem;
  font-weight: 500;
}
.btn-auth:hover {
  background-color: #343a40;
  border-color: #343a40;
  color: #fff;
}

.auth-links a {
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
}
.auth-links a:hover {
  color: #212529;
  text-decoration: underline;
}

/* * ===================================
 * PERBAIKAN UNTUK TAMPILAN MOBILE
 * ===================================
 */
@media (max-width: 991.98px) {
  .auth-branding-side {
    display: none; /* Sembunyikan kolom gambar di mobile */
  }

  /* MODIFIKASI DI SINI: Ubah cara container bekerja di mobile */
  .auth-container {
    display: block; /* Hapus flexbox agar tidak ada vertical centering */
    min-height: auto; /* Biarkan tinggi container sesuai konten */
    padding: 2rem 1rem; /* Beri padding agar form tidak menempel di tepi */
  }

  .auth-card {
    /* Set lebar maksimum untuk form di mobile agar tidak terlalu lebar di tablet */
    max-width: 450px;
    margin: 0 auto; /* Pusatkan kartu form secara horizontal */
  }

  .auth-form-side {
    padding: 2rem 1.5rem;
  }
}