/* Styling untuk tampilan progress bar scroll */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    z-index: 1001;
    background: linear-gradient(to right, var(--primary-color), #4361ee);
    width: 0%;
    transition: width 0.1s ease;
}

/* Efek kilat untuk progress bar saat scrolling */
.scroll-progress::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--primary-color), white);
    filter: blur(1px);
    box-shadow: 0 0 8px var(--primary-color), 0 0 15px white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scrolling.active-scroll .scroll-progress::after,
.scroll-progress.lightning-effect::after {
    opacity: 1;
    animation: flicker 0.3s linear;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Styling khusus untuk dark mode */
[data-theme="dark"] .scroll-progress {
    background: linear-gradient(to right, #536dfe, #6d83ff);
    box-shadow: 0 0 10px rgba(83, 109, 254, 0.3);
}

[data-theme="dark"] .scroll-progress::after {
    background: linear-gradient(to right, transparent, #536dfe, #ffffff);
    box-shadow: 0 0 8px #536dfe, 0 0 15px #ffffff;
}