@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    scroll-behavior: smooth;
}

/* Custom Scrollbar untuk Dropdown */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animasi Karakter Lucu */
.walking-character {
    position: absolute;
    bottom: 100%;
    left: -100px;
    z-index: 50;
    animation: walkAnimation 25s linear infinite;
    pointer-events: none;
}

.walking-character img {
    height: 40px;
    width: auto;
}

@keyframes walkAnimation {
    0% {
        left: -100px;
        transform: scaleX(1);
    }

    45% {
        left: 105%;
        transform: scaleX(1);
    }

    50% {
        left: 105%;
        transform: scaleX(-1);
    }

    95% {
        left: -100px;
        transform: scaleX(-1);
    }

    100% {
        left: -100px;
        transform: scaleX(1);
    }
}

/* Transisi Seksio */
.section-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.section-content.active {
    display: grid;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Video Carousel Track */
#video-carousel-track {
    /* Pastikan track selebar total semua slides */
    min-width: 100%;
}

#video-carousel-track>div {
    /* Setiap slide menempati 100% lebar track container */
    min-width: 100%;
}

/* Rotation Animation for Music Vinyl Disk */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

/* Wave Animation for Music Bars */
@keyframes wave {

    0%,
    100% {
        transform: scaleY(0.3);
    }

    50% {
        transform: scaleY(1);
    }
}