.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.marquee-content-right {
    display: flex;
    width: max-content;
    /* Gunakan linear agar gerakannya konstan dan halus */
    animation: slideRightContinuous 8s linear infinite;
}

.marquee-group {
    display: flex;
    align-items: center;
    /* Gunakan gap yang konsisten */
    gap: 5rem;
    padding-right: 5rem;
}

@keyframes slideRightContinuous {
    0% {
        /* Mulai dengan posisi konten tergeser satu grup ke kiri */
        transform: translateX(calc(-100% / 3));
    }

    100% {
        /* Berakhir di posisi awal (0%) */
        transform: translateX(0);
    }
}

/* Agar lebih smooth di desktop, tambahkan efek pudar yang lebih luas */
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 20%;
    /* Pakai persentase agar adaptif di layar lebar */
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* Supaya tidak menghalangi kursor */
}

.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #0a0b14 10%, transparent);
}

.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #0a0b14 10%, transparent);
}

/* Tips: Jika ingin ke kiri, gunakan ini: */
/* @keyframes slideLeft {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }
    */
.marquee-content-left {
    display: flex;
    animation: slideLeft 1s5 linear infinite;
    min-width: 200%;
}

@keyframes slideLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes loop-vertical {

    /* Item 1 */
    0%,
    15% {
        transform: translateY(0);
    }

    /* Transisi ke Item 2 */
    25%,
    35% {
        transform: translateY(-3rem);
    }

    /* Transisi ke Item 3 */
    45%,
    55% {
        transform: translateY(-6rem);
    }

    /* Transisi ke Item 4 */
    65%,
    75% {
        transform: translateY(-9rem);
    }

    /* Transisi ke Item 5 */
    85%,
    95% {
        transform: translateY(-12rem);
    }

    /* Kembali ke awal (item duplikat) */
    100% {
        transform: translateY(-15rem);
    }
}

.animate-loop-vertical {
    animation: loop-vertical 10s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

/* Hover pause untuk marquee */
.animate-loop-vertical:hover,
.marquee-content-right:hover,
.marquee-content-left:hover {
    animation-play-state: paused;
}

/* Custom Container agar lebar konsisten di layar lebar */
.max-w-\[1200px\] {
    max-width: 1200px;
}

/* Mengatur tampilan gambar agar menonjol keluar box sedikit (pop-out effect) */
section img {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Blur Background saat Pop-up Aktif */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Menghilangkan scrollbar pada menu navbar mobile tapi tetap bisa di-scroll */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mengunci foto agar tetap proporsional saat mengecil */
section .flex-1 {
    min-width: 0; 
}