/* Definisikan variabel warna kustom agar mudah digunakan */
:root {
  --bank-blue: #1e3a8a;
  --bank-blue-dark: #071524;
  --bank-blue-medium: #1c334e;
  --bank-text-light: #a4b3c5;
  --bank-input: rgba(255, 255, 255, 0.05); /* White/5% */
  --bank-placeholder: rgba(255, 255, 255, 0.5);
}

/* 1. Latar Belakang Gradien */
.bank-login-wrapper {
  background: linear-gradient(
    135deg,
    var(--bank-blue-dark) 0%,
    var(--bank-blue) 100%
  );
  background-attachment: fixed; /* Membuat gradien tetap saat konten bergulir */
}

/* 2. Kartu Formulir dengan Backdrop Blur */
.bank-form-card {
  background-color: rgba(255, 255, 255, 0.05); /* White with 5% opacity */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* Border tipis untuk definisi */
}

/* 3. Input Field Kustom */
.bank-input-field {
  background-color: var(--bank-input);
  color: white;
  border: none;
  padding: 1rem 1.5rem;
}
.bank-input-field::placeholder {
  color: var(--bank-placeholder);
}
.bank-input-field:focus {
  background-color: var(--bank-input);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25); /* Focus ring putih kustom */
}

/* 4. Toggle Tombol Password */
.bank-toggle-password {
  background-color: var(--bank-input);
  border-color: transparent !important;
}

/* 5. Warna Teks Biru Kustom */
.bank-blue-text {
  color: var(--bank-blue-medium);
}