/* Reset Body untuk Flex Center */
/* 1. Paksa Body menjadi area Grid yang menutup seluruh layar */
html, body {
    height: 100%; /* Wajib agar body tahu tinggi layar penuh */
    margin: 0;
}

body {
    background: #283144;
    display: grid; 
    place-items: center; /* Ajaib: Menengahkan horizontal & vertikal sekaligus */
    font-family: 'Outfit', sans-serif;
}

/* 2. Atur Lebar Card secara spesifik */
.login-card {
    border: none;
    border-radius: 15px;
    background-color: #ffffff !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    
    /* Lebar untuk HP */
    width: 90vw; 
    max-width: 380px;
}

/* 3. KHUSUS IPAD / TABLET (Layar Menengah) */
@media (min-width: 768px) {
    .login-card {
        width: 600px !important; /* Ukuran lebar yang Anda inginkan */
        max-width: 600px !important;
    }
}

/* 4. LAPTOP (Balik ke ukuran standar) */
@media (min-width: 1200px) {
    .login-card {
        width: 400px !important;
    }
}

/* Perbaikan Input untuk iOS Safari (Cegah Auto-Zoom) */
.form-control {
    font-size: 16px !important;
    padding: 12px 15px;
}

/* --- Penyesuaian Header --- */
.login-header {
    background: #495057;
    color: white;
    padding: 25px 20px;
    text-align: center;
}

.card-body {
  background-color: #ffffff;
  padding: 15px 30px !important;
}

.form-control {
  border-radius: 8px;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
}

.btn-login {
  background: #495057;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-login:hover {
  background: #3a4047;
  transform: translateY(-2px);
}

/* Menghapus border dan glow biru secara total saat fokus */
.form-control:focus,
.form-check-input:focus,
.input-group:focus {
  border-color: #ddd !important; /* Hilangkan garis tepi */
  box-shadow: none !important; /* Hilangkan glow biru */
  outline: none !important; /* Hilangkan outline default browser */
}

/* Khusus untuk Checkbox agar tetap terlihat 'checked' dengan warna tema */
.form-check-input:checked {
  background-color: #495057 !important; /* Warna hijau success */
  border-color: #495057 !important;
}

#togglePassword,
.form-check-input {
  cursor: pointer;
  user-select: none; /* Mencegah teks ter-highlight saat diklik cepat */
}