:root {
    --scroll-track: transparent; /* Sayfadaki boşluk algısını yok etmek için saydam yapıldı */
    --stripe-yellow: #FEBE10; /* Temaya uymasi icin */
    --stripe-black: #171717;
    --stripe-yellow-hover: #D9A40E;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.custom-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    width: 12px;
    height: 100vh;
    background: var(--scroll-track);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 180ms ease;
    touch-action: none;
    user-select: none;
}

body.is-scrolling .custom-scrollbar,
body.is-scrollbar-dragging .custom-scrollbar,
.custom-scrollbar:hover {
    opacity: 1;
}

.custom-scrollbar__thumb {
    position: absolute;
    top: 0;
    right: 2px;
    width: 7px;
    min-height: 32px;
    background: repeating-linear-gradient(
        45deg,
        var(--stripe-yellow) 0,
        var(--stripe-yellow) 7px,
        var(--stripe-black) 7px,
        var(--stripe-black) 14px
    );
    border-radius: 999px;
    cursor: grab;
    transition: background 0.3s ease;
}

body.is-scrollbar-dragging .custom-scrollbar__thumb {
    cursor: grabbing;
    transition: none;
}

body.is-scrolled .custom-scrollbar__thumb {
    background: repeating-linear-gradient(
        45deg,
        var(--stripe-yellow-hover) 0,
        var(--stripe-yellow-hover) 7px,
        var(--stripe-black) 7px,
        var(--stripe-black) 14px
    );
}

@media (max-width: 720px) {
    .custom-scrollbar {
        width: 10px;
    }

    .custom-scrollbar__thumb {
        right: 2px;
        width: 6px;
    }

    .section {
        padding: 64px 20px;
    }
}