/* Sonsuz kayan marka/referans bölümü için CSS */
.infinite-scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
    background: transparent;
}

.infinite-scroll {
    display: flex;
    width: max-content;
    animation: scroll-x 18s linear infinite;
    gap: 20px;
}

.infinite-scroll.reverse {
    animation: scroll-x-reverse 18s linear infinite;
}

.infinite-scroll-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    transition: all 0.3s ease;
}

.infinite-scroll-item a {
    display: block;
    transition: all 0.3s ease;
}

.infinite-scroll-item img {
    min-height: 80px; /* Görseller biraz daha büyük yapıldı */
    width: auto;
    /* filter: grayscale(100%);
    opacity: 0.7; */
    transition: all 0.3s ease;
}

.infinite-scroll-item:hover img {
    /* filter: grayscale(0%);
    opacity: 1; */
    transform: scale(1.05);
}

/* Animasyonlar */
@keyframes scroll-x {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 20px));
    }
}

@keyframes scroll-x-reverse {
    0% {
        transform: translateX(calc(-50% - 20px));
    }
    100% {
        transform: translateX(0);
    }
}

/* Mobil için düzenlemeler */
@media (max-width: 768px) {
    .infinite-scroll {
        animation-duration: 10s;
        gap: 5px;
    }
    
    .infinite-scroll.reverse {
        animation-duration: 15s;
    }
    
    .infinite-scroll-item {
        padding: 0 5px;
    }
    
    .infinite-scroll-item img {
        height: 110px; /* Mobilde görseller biraz daha küçük yapıldı */
    }
}

/* Animasyonu durdurma (hover durumunda) */
.infinite-scroll-wrapper:hover .infinite-scroll {
    animation-play-state: paused;
}