/* === SAGARA ASRI FUTURISTIC THEME === */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(135deg, #001f3f, #007bff, #00eaff);
    background-size: 300% 300%;
    animation: gradientMove 10s ease infinite;
    font-family: "Poppins", sans-serif;
    color: #000000;
}

/* === Efek latar bergerak === */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* === Kartu transparan dengan blur === */
.auth-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}
.auth-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 35px rgba(0, 255, 255, 0.6);
}

/* === Logo dan judul === */
.login-logo img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.6));
}
.login-logo h3 {
    color: #00eaff;
    text-shadow: 0 0 10px #00eaff, 0 0 25px #007bff;
    letter-spacing: 1px;
}

/* === Tombol === */
.auth-btn {
    background: linear-gradient(90deg, #00bfff, #007bff);
    border: none;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.6);
    transition: all 0.3s ease;
}
.auth-btn:hover {
    background: linear-gradient(90deg, #00eaff, #0099ff);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 238, 255, 0.8);
}

/* === Input === */
input.form-control {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(0, 238, 255, 0.4);
    color: #000000;
    border-radius: 10px;
    transition: all 0.3s ease;
}
input.form-control:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: #00eaff;
    box-shadow: 0 0 12px rgba(0, 238, 255, 0.6);
}

/* === Animasi muncul === */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Link === */
a.text-glow {
    color: #00c8ff !important;
    transition: all 0.3s ease;
}
a.text-glow:hover {
    color: #00eaff !important;
    text-shadow: 0 0 8px #00eaff;
}

/* === Pesan alert === */
.alert {
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
}

.swal2-container .swal2-popup {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.swal2-title,
.swal2-html-container {
    text-align: center !important;
}

.swal2-confirm {
    margin-top: 15px !important;
}