/* =========================================
   CUSTOM SCROLLBAR (Premium Look)
   ========================================= */
/* Untuk browser berbasis Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc; /* Warna slate-50 */
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #c7d2fe; /* Warna indigo-200 */
    border-radius: 8px;
    border: 2px solid #f8fafc; /* Efek padding dalam scrollbar */
}

::-webkit-scrollbar-thumb:hover {
    background: #818cf8; /* Warna indigo-400 saat di-hover */
}

/* =========================================
   CUSTOM TEXT SELECTION
   ========================================= */
/* Warna saat teks diblok/highlight oleh user */
::selection {
    background-color: #6366f1; /* Warna indigo-500 */
    color: #ffffff;
}

::-moz-selection {
    background-color: #6366f1;
    color: #ffffff;
}

/* =========================================
   CUSTOM ANIMATIONS
   ========================================= */
/* Animasi muncul halus dari bawah ke atas untuk kotak hasil */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mencegah highlight biru bawaan HP saat tombol ditekan (Mobile Optimization) */
button, 
input, 
textarea, 
#upload-area {
    -webkit-tap-highlight-color: transparent;
}