/**
 * Rawcut Marquee Styles
 */

.rawcut-marquee-wrapper {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

/* Swiper Container */
.rawcut-marquee-wrapper .swiper {
    width: 100%;
    height: auto;
}

/* ÖNEMLİ: Kesintisiz akış için bu ayarlar şarttır */
.rawcut-marquee-wrapper .swiper-wrapper {
    transition-timing-function: linear !important;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.rawcut-marquee-wrapper .swiper {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    overflow: hidden;
}

/* Slayt Ayarları */
.rawcut-marquee-wrapper .swiper-slide {
    width: auto !important; /* JS'den kontrol edilecek */
    height: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    flex-shrink: 0;
}

/* Link wrapper */
.rawcut-marquee-wrapper .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Resim Ayarları */
.rawcut-marquee-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    height: 75px !important;
    width: auto !important;
}

/* Grayscale Efekti */
.rawcut-marquee-wrapper.has-grayscale .swiper-slide img {
    filter: grayscale(100%);
}

/* Hover Efekti */
.rawcut-marquee-wrapper.has-hover-effect .swiper-slide:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* Link hover efekti */
.rawcut-marquee-wrapper.has-hover-effect .swiper-slide a:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* Responsive Ayarlar */
@media (max-width: 768px) {
    .rawcut-marquee-wrapper {
        padding: 15px 0;
    }
}

@media (max-width: 480px) {
    .rawcut-marquee-wrapper {
        padding: 10px 0;
    }
}