/* assets/css/style.css */

/* 1. Animasi Background Gradient Bergerak */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-animated {
    /* Perpaduan warna biru, ungu, dan pink modern */
    background: linear-gradient(-45deg, #2563eb, #7c3aed, #db2777, #4f46e5);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

/* 2. Efek Glassmorphism (Kaca Buram) pada Kotak Login */
.glass-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Untuk browser Safari */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 3. Animasi interaktif saat mengetik di form */
.input-modern {
    transition: all 0.3s ease;
}
.input-modern:focus {
    transform: translateY(-2px); /* Kotak input sedikit naik saat diklik */
}

/* Custom Scrollbar untuk Web Modern */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Transisi halus untuk sidebar mobile */
.sidebar-transition {
    transition: transform 0.3s ease-in-out;
}