/* Custom styles for register.php and login.php */
body {
    background-color: #f0f0f0; /* Light background for the page */
}
.wrapper-login {
    min-height: 100vh; /* Ensure it takes full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ------------------------------------------------ */
/* Gaya untuk KONTEN FORM SATU KOLOM (untuk register.php) */
/* ------------------------------------------------ */
.container-login {
    max-width: 500px; /* Lebar standar untuk form satu kolom */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 40px; /* Padding standar untuk form */
    width: 100%;
    /* Tidak ada properti flexbox di sini, karena ini untuk satu kolom */
}


/* ------------------------------------------------ */
/* Gaya untuk LAYOUT DUA KOLOM (khusus untuk login.php) */
/* Gunakan kelas ini bersama dengan .container-login di login.php */
/* ------------------------------------------------ */
.login-two-column-layout {
    max-width: 900px; /* Lebar yang lebih besar untuk dua kolom */
    padding: 0; /* Hapus padding di kontainer utama, padding ada di panel */
    display: flex; /* Aktifkan flexbox untuk menata panel */
    overflow: hidden; /* Sembunyikan overflow */
}

/* Gaya untuk panel kiri (gambar dan deskripsi) */
.login-left-panel {
    flex: 1; /* Ambil proporsi ruang yang sama dengan kanan */
    background-color: #f8f9fa; /* Warna latar belakang cerah */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #333;
}

.login-left-panel img {
    max-width: 80%; /* Gambar tidak terlalu besar */
    height: auto;
    margin-bottom: 20px;
}

.login-left-panel h3 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.8em;
}

.login-left-panel p {
    font-size: 1em;
    line-height: 1.6;
    color: #666;
}

/* Gaya untuk panel kanan (form login) */
.login-right-panel {
    flex: 1; /* Ambil proporsi ruang yang sama dengan kiri */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Gaya-gaya umum yang sudah ada dari register.php */
.container-login .card-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    color: #333;
}
.form-label {
    font-weight: 600;
    color: #555;
}
.form-control:focus {
    border-color: #17a2b8; /* Kaiadmin primary color example */
    box-shadow: 0 0 0 0.25rem rgba(23, 162, 184, 0.25);
}
.btn-primary {
    background-color: #17a2b8; /* Kaiadmin primary color example */
    border-color: #17a2b8;
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
}
.btn-primary:hover {
    background-color: #138496; /* Darker shade on hover */
    border-color: #138496;
}
.alert {
    margin-top: 15px;
}
.form-text {
    font-size: 0.85em;
    color: #6c757d;
}

/* Penyesuaian responsif untuk layout dua kolom (khusus .login-two-column-layout) */
@media (max-width: 767.98px) { /* Untuk ukuran tablet dan handphone */
    .login-two-column-layout { /* Terapkan pada kontainer yang bersifat flex */
        flex-direction: column; /* Ubah layout menjadi tumpukan vertikal */
        max-width: 500px; /* Kembali ke lebar yang lebih kecil untuk satu kolom */
    }
    .login-left-panel {
        padding-bottom: 20px;
        border-bottom: 1px solid #eee; /* Garis pemisah */
    }
    .login-right-panel {
        padding-top: 20px;
    }
}

@media screen and (max-width: 399px) {
  .wrapper-login {
    padding: 15px !important; }

  /* container-login akan menggunakan padding 40px, tapi jika login-two-column-layout
     aktif dan layar sangat kecil, paddingnya akan diatur ulang menjadi 0,
     dan padding ada di dalam panel.
     Untuk container-login biasa (register.php), padding tetap 40px.
     Untuk login-two-column-layout pada layar sangat kecil, panel yang punya padding.
  */
  .login-two-column-layout {
      padding: 0 !important; /* Pastikan ini menimpa padding default .container-login untuk layout 2 kolom */
  }

  .login-left-panel,
  .login-right-panel {
    padding: 30px 20px; /* Padding lebih kecil pada kolom untuk layar sangat kecil */
  }

  .container-login .card-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
}