/* ===== BACKGROUND & FONT ===== */
body.login-page {
    /* Background gradient yang lebih halus */
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    min-height: 100vh;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== MODERN LOGIN CARD ===== */
.login-card {
    width: 90%; 
    max-width: 420px; /* Diperlebar sedikit agar form tidak terlalu sesak */
    border: none; /* Menghilangkan garis tepi bawaan Bootstrap */
    border-radius: 24px; /* Sudut melengkung modern (kekinian) */
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Bayangan lebih dalam dan halus 3D */
    padding: 40px 30px !important; /* Ruang dalam (padding) lebih lega */
    animation: fadeIn 0.8s ease-out; /* Animasi muncul lebih mulus */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== TAB MENU (Pills) MODERN ===== */
.nav-pills {
    background-color: #f1f5f9; /* Latar belakang abu-abu terang untuk menu tab */
    border-radius: 16px;
    padding: 6px;
    margin-bottom: 30px;
}
.nav-pills .nav-link {
    border-radius: 12px;
    color: #64748b;
    font-weight: 600;
    transition: all 0.3s ease;
}
.nav-pills .nav-link:hover {
    color: #334155;
}
.nav-pills .nav-link.active {
    background-color: #ffffff !important;
    color: #0f2027 !important; /* Menyesuaikan warna dengan background web */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Efek tombol tab timbul */
}

/* ===== FORM INPUTS MODERN ===== */
.input-group-text {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-right: none;
}
.form-control {
    border: 1px solid #e2e8f0;
    border-left: none;
    padding: 12px 15px; /* Input lebih tebal dan nyaman diketik */
    color: #334155;
    box-shadow: none !important;
}
.btn-outline-secondary {
    border: 1px solid #e2e8f0;
    border-left: none;
    color: #64748b;
}
.btn-outline-secondary:hover {
    background-color: #f8f9fa;
    color: #334155;
}
/* Efek saat form sedang diketik */
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .btn-outline-secondary {
    border-color: #2c5364;
}
.input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(44, 83, 100, 0.15);
    border-radius: 8px; /* Mengunci bayangan agar tidak bocor */
}

/* ===== BUTTONS MODERN ===== */
.btn-dark {
    background: linear-gradient(135deg, #203a43, #0f2027);
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.btn-dark:hover {
    transform: translateY(-2px); /* Tombol sedikit melayang saat disorot */
    box-shadow: 0 8px 15px rgba(15, 32, 39, 0.3);
}

.btn-primary {
    background: linear-gradient(135deg, #2c5364, #203a43); /* Disesuaikan dengan warna tema */
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(44, 83, 100, 0.3);
}