/* ✨ CSS KHUSUS SCROLLBAR PREMIUM - VERSI SKY BLUE ✨ */
.custom-scroll-premium {
    /* Mengaktifkan scroll momentum buat perangkat mobile/iOS biar licin */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Trik rahasia: Paksa render pake GPU biar jalannya scroll gak patah-patah */
    will-change: transform;
}

/* Kustomisasi Batang Scrollbar untuk Chrome, Safari, dan Edge */
.custom-scroll-premium::-webkit-scrollbar {
    width: 8px; /* Dibuat sedikit lebih jelas/tebal */
    height: 8px;
}

/* Jalur lintasan scrollbar (Track) */
.custom-scroll-premium::-webkit-scrollbar-track {
    background: #f8fafc !important; /* Diberi warna abu-abu sangat terang agar jalurnya terlihat jelas (tidak transparan) */
    border-radius: 50px !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Batang penggulung yang digeser (Thumb) - Diubah menjadi SKY BLUE */
.custom-scroll-premium::-webkit-scrollbar-thumb {
    background: #0ea5e9 !important; /* Sky Blue yang menyala dan kontras */
    border-radius: 50px !important; /* Membulat penuh */
    border: 2px solid #f8fafc; /* Memberi ruang/napas antara thumb dan track */
    transition: all 0.3s ease-in-out;
}

/* Efek pas mouse nge-hover di area scrollbar */
.custom-scroll-premium:hover::-webkit-scrollbar-thumb {
    background: #0284c7 !important; /* Sky Blue versi lebih gelap/tegas saat disentuh */
    transform: scale(1.1);
}

/* Khusus Firefox biar gak kalah seksi */
@supports (-moz-appearance: none) {
    .custom-scroll-premium {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 #f8fafc;
    }
}