/* ==========================================================================
   LOGIN ABU-ABU — kartu putih bergaya kartun di atas latar abu-abu polos.
   Dimuat setelah gaya bawaan halaman login, jadi aturan di sini yang menang.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800&display=swap');

html, body { background: #e5e7eb !important; background-image: none !important; color: #1f2937 !important; font-family: 'Nunito', sans-serif !important; }
body::before, body::after { display: none !important; }
.latar-video { display: none !important; }

.login-card {
  background: #ffffff !important;
  border: 2.5px solid #1f2937 !important;
  border-radius: 24px !important;
  box-shadow: 6px 6px 0 rgba(31, 41, 55, .3) !important;
  color: #1f2937 !important;
}
.login-card::before { display: none !important; }
.login-title, .login-header { font-family: 'Fredoka', sans-serif !important; color: #1f2937 !important; text-shadow: none !important; }
.login-subtitle, .form-label, .form-label span, .card-footer, .login-footer, .footer-text { color: #4b5563 !important; text-shadow: none !important; }
.logo-container { border: 2px solid #1f2937 !important; border-radius: 18px !important; box-shadow: 3px 3px 0 rgba(31, 41, 55, .25) !important; background: #f3f4f6 !important; }
.card-divider { background: #d1d5db !important; height: 2px !important; border: 0 !important; }

.input-wrapper, .form-input {
  background: #f9fafb !important;
  border: 2px solid #1f2937 !important;
  border-radius: 14px !important; box-shadow: none !important; color: #1f2937 !important;
}
.form-input::placeholder { color: #9ca3af !important; }
.form-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(107, 114, 128, .25) !important; }
.btn-eye, .btn-eye i { color: #4b5563 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

.btn-submit {
  background: #374151 !important; color: #ffffff !important;
  border: 2px solid #1f2937 !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 rgba(31, 41, 55, .3) !important;
  font-family: 'Fredoka', sans-serif !important; font-weight: 700 !important;
}
.btn-submit:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(31, 41, 55, .3) !important; }
.btn-submit:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(31, 41, 55, .3) !important; }

.alert { background: #f3f4f6 !important; color: #1f2937 !important; border: 2px solid #1f2937 !important; border-radius: 14px !important; box-shadow: 3px 3px 0 rgba(31, 41, 55, .2) !important; }
.alert-danger { background: #fee2e2 !important; }
.alert-success { background: #dcfce7 !important; }
a { color: #1f2937 !important; }
.lottie-loader-overlay { background: rgba(17, 24, 39, .3) !important; }
.lottie-loader-card { background: #ffffff !important; border: 2px solid #1f2937 !important; border-radius: 22px !important; box-shadow: 4px 4px 0 rgba(31, 41, 55, .25) !important; color: #1f2937 !important; }