/* --- Reset dasar --- */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

html {
    overflow-y: auto;
}

 body {
     font-family: 'Poppins', sans-serif;
     /* Membuat background gradient sesuai gambar */
     background: linear-gradient(135deg, #785a35, #d69d4f);
     min-height: 100vh;
     /* Flexbox untuk menaruh card tepat di tengah layar */
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
 }

 /* --- Styling Card (Kotak Putih) --- */
 .login-card {
     background-color: white;
     padding: 40px 30px;
     border-radius: 25px;
     width: 100%;
     max-width: 400px;
     /* Agar tidak terlalu lebar di layar besar */
     text-align: center;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 h2 {
     font-weight: 700;
     margin-bottom: 25px;
     color: #333;
 }

 /* --- Styling Form Input --- */
 .form-group {
     margin-bottom: 20px;
     text-align: left;
     /* Label rata kiri */
 }

 label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     color: #333;
 }

 input[type="text"],
 input[type="password"] {
     width: 100%;
     padding: 15px;
     border: 1px solid #ccc;
     border-radius: 10px;
     font-family: inherit;
     /* Mewarisi font Poppins */
     font-size: 14px;
     outline: none;
 }

 /* Efek saat input diklik */
 input:focus {
     border-color: #e0a44f;
 }

/* --- Error styles --- */
.error-text {
    color: #b00020;
    font-size: 13px;
    margin-top: 8px;
    text-align: left;
}

.input-error {
    border-color: #b00020 !important;
    box-shadow: 0 0 0 3px rgba(176,0,32,0.06);
}

/* Server-side error banner */
.server-error {
    background: #b71c1c; /* strong red */
    color: #fff;
    border: 1px solid #7f0000;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: left;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(183,28,28,0.15);
}

 /* --- Styling Tombol --- */
 .btn {
     width: 100%;
     padding: 15px;
     border-radius: 10px;
     font-family: inherit;
     font-weight: 600;
     font-size: 16px;
     cursor: pointer;
     transition: 0.3s;
     border: none;
 }

 /* Tombol Masuk (Emas) */
 .btn-primary {
     background-color: #e0a44f;
     color: #222;
     margin-bottom: 15px;
 }

 .btn-primary:hover {
     background-color: #c99345;
 }

 /* Tombol Kembali (Beige) */
 .btn-secondary {
     background-color: #fbf6f0;
     color: #555;
     border: 1px solid #e3d3c3;
     display: inline-block;
     /* Agar <a> berperilaku seperti tombol */
     text-decoration: none;
     /* Menghilangkan garis bawah link */
     margin-bottom: 30px;
 }

 .btn-secondary:hover {
     background-color: #f0eadd;
 }

 /* --- Styling Kotak Warning --- */
 .warning-box {
     background-color: #dcc29d;
     padding: 15px 20px;
     border-radius: 12px;
     text-align: left;
     margin-bottom: 30px;
     border: 1px solid #cfae85;
 }

 .warning-title {
     color: red;
     font-weight: 700;
     display: block;
     margin-bottom: 5px;
 }

 .warning-text {
     color: #4a4a4a;
     font-size: 14px;
     line-height: 1.4;
 }

 /* --- Footer --- */
 .footer-text {
     font-size: 12px;
     color: #666;
 }

 /* --- Responsive --- */
 @media (max-width: 768px) {
     body { padding: 16px; }
     .login-card { padding: 28px 22px; border-radius: 18px; }
 }

 @media (max-width: 540px) {
     body { padding: 12px; }
     .login-card { padding: 24px 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
     h2 { font-size: 22px; }
     .btn { font-size: 15px; padding: 13px; }
 }