/* Scrollbar samping bergaya modern, selaras dengan palet hijau dan aksen emas situs */

:root {
    --scrollbar-size: 10px;
    --scrollbar-thumb-from: #34d399;
    --scrollbar-thumb-to: #047857;
    --scrollbar-accent: #f59e0b;
    --scrollbar-glow: rgba(16, 185, 129, 0.5);
    --scrollbar-idle-opacity: 0.3;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.45) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Thumb melayang dengan gradasi; saat diam dibuat tipis agar tidak mengganggu konten */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scrollbar-thumb-from), var(--scrollbar-thumb-to));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    opacity: var(--scrollbar-idle-opacity);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

/* Muncul penuh dengan cahaya hijau dan kilau emas saat di-hover atau ditekan */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    opacity: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 12px var(--scrollbar-glow),
        0 0 0 1px var(--scrollbar-accent);
}

::-webkit-scrollbar-corner {
    background: transparent;
}