﻿.product-container {
    display: flex;
    gap: 10px; /* Thumbnail ve ana resim arasındaki boşluk */
    position: relative;
    z-index: 1; /* Varsayılan */
    overflow: visible;
}

.thumbnail-slider {
    width: 100px; /* Thumbnail'lerin genişliği */
    overflow: hidden;
}

    .thumbnail-slider .swiper-wrapper {
        flex-direction: column; /* Thumbnail'leri dikey sıralar */
    }

    .thumbnail-slider .swiper-slide {
        width: 100%;
        height: auto;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border 0.3s ease;
    }

        .thumbnail-slider .swiper-slide img {
            width: 100%;
            height: auto;
        }

    .thumbnail-slider .swiper-slide-thumb-active img {
        border: 1px solid #ffffff; /* Aktif olan thumbnail için çerçeve */
    }

.main-slider {
    flex: 1; /* Ana resim alanının genişlemesini sağlar */
    overflow: hidden;
    z-index: 1000;
}

    .main-slider .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: contain; /* Görselin bozulmasını engeller */
        z-index: 1000;
        cursor: zoom-in; /* Yakınlaştırılabilir olduğunu belirtir */
        position: relative;
        z-index: 2; /* Zoom işlemine engel olmamak için */
    }

/* ElevateZoom lens ve zoom penceresi */
.zoomLens {
    z-index: 9999 !important; /* Lensin üst katmanda görünmesi */
    border: 1px solid #ffffff !important; /* Lens çerçevesi */
}

.zoomWindow {
    z-index: 9999 !important; /* Zoom penceresinin üst katmanda görünmesi */
    border: 1px solid #ddd !important; /* Zoom penceresi kenarlığı */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
    background-color: white; /* Pencere arka planı */
}
.zoomWindowContainer {
    display: none !important;
}
.zoomContainer {
    z-index: 9999 !important; /* Zoom container'ı en üstte göster */
    position: absolute !important; /* Container pozisyonu */
}

/* Responsive Görünüm */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column; /* Thumbnail slider'ı ana slider'ın altına yerleştirir */
        align-items: center; /* Ortalar */
        gap: 10px; /* Ana resim ve thumbnail slider arasında boşluk */
        position: relative;
        z-index: 1; /* Varsayılan */
    }

    .thumbnail-slider {
        order: 2; /* Thumbnail slider'ı ikinci sıraya taşır */
        width: 100%; /* Tam genişliği kaplar */
        margin-top: 10px; /* Ana resim ile arasına boşluk ekler */
        display: flex;
        justify-content: center;
        gap: 10px; /* Thumbnail'ler arasındaki boşluk */
        overflow-x: auto; /* Yatay kaydırma */
        overflow-y: hidden; /* Dikey kaydırmayı kaldır */
    }

        .thumbnail-slider .swiper-wrapper {
            flex-direction: row; /* Thumbnail'leri yatay sıraya dizer */
            justify-content: flex-start;
        }

        .thumbnail-slider .swiper-slide {
            flex-shrink: 0; /* Thumbnail'lerin sabit boyutta kalmasını sağlar */
            width: 60px; /* Thumbnail genişliğini küçültür */
            height: auto;
        }

        .thumbnail-slider img {
            width: 60px; /* Thumbnail'lerin boyutunu küçültür */
            height: auto;
            border: 1px solid transparent;
            transition: border 0.3s ease;
            object-fit: cover; /* Görüntüyü düzgün sığdırır */
        }

        .thumbnail-slider .swiper-slide-thumb-active img {
            border: 1px solid #ffffff; /* Aktif olan thumbnail için çerçeve */
        }

    .main-slider {
        order: 1; /* Ana slider'ı ilk sıraya alır */
        width: 100%; /* Ana slider genişliği */
        margin-bottom: 10px; /* Thumbnail slider ile araya boşluk ekler */
    }

        .main-slider .swiper-slide img {
            width: 100%; /* Ana resmin genişliği */
            height: auto;
            object-fit: contain; /* Görüntüyü bozmadan sığdırır */
            position: relative;
            z-index: 2; /* Zoom işlemine engel olmamak için */
        }
}


/*.product-container {
    display: flex;
    gap: 10px;*/ /* Thumbnail ve ana resim arasındaki boşluk */
/*}

.thumbnail-slider {
    width: 100px;*/ /* Thumbnail'lerin genişliği */
    /*overflow: hidden;
}

.thumbnail-slider .swiper-wrapper {
    flex-direction: column;*/ /* Thumbnail'leri dikey sıralar */
/*}

.thumbnail-slider .swiper-slide {
    width: 100%;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.thumbnail-slider .swiper-slide img {
    width: 100%;
    height: auto;
}

.thumbnail-slider .swiper-slide-thumb-active img {
    border: 2px solid #007bff;*/ /* Aktif olan thumbnail için çerçeve */
/*}

.main-slider {
    flex: 1;*/ /* Ana resim alanının genişlemesini sağlar */
    /*overflow: hidden;
    z-index: 1000;
}

    .main-slider .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: contain;*/ /* Görselin bozulmasını engeller */
        /*cursor: zoom-in;*/
        /*z-index: 1000;
    }


@media (max-width: 768px) {
    .product-container {
        flex-direction: column;*/ /* Thumbnail slider'ı ana slider'ın altına yerleştirir */
        /*align-items: center;*/ /* Ortalar */
        /*gap: 10px;*/ /* Ana resim ve thumbnail slider arasında boşluk */
    /*}

    .thumbnail-slider {
        order: 2;*/ /* Thumbnail slider'ı ikinci sıraya taşır */
        /*width: 100%;*/ /* Tam genişliği kaplar */
        /*overflow-x: auto;*/ /* Yatay kaydırmayı etkinleştirir */
        /*margin-top: 10px;*/ /* Ana resim ile arasına boşluk ekler */
        /*display: flex;
        justify-content: center;
        gap: 10px;*/ /* Thumbnail'ler arasındaki boşluk */
    /*}

        .thumbnail-slider .swiper-wrapper {
            flex-direction: row;*/ /* Thumbnail'leri yatay sıraya dizer */
        /*}

        .thumbnail-slider .swiper-slide {
            flex-shrink: 0;*/ /* Thumbnail'lerin sabit boyutta kalmasını sağlar */
            /*width: 60px;*/ /* Thumbnail genişliğini küçültür */
            /*height: auto;
        }

        .thumbnail-slider img {
            width: 60px;*/ /* Thumbnail'lerin boyutunu küçültür */
            /*height: auto;
            border: 2px solid transparent;
            transition: border 0.3s ease;
            object-fit: cover;*/ /* Görüntüyü düzgün sığdırır */
        /*}

        .thumbnail-slider .swiper-slide-thumb-active img {
            border: 2px solid #007bff;*/ /* Aktif olan thumbnail için çerçeve */
        /*}

    .main-slider {
        order: 1;*/ /* Ana slider'ı ilk sıraya alır */
        /*width: 100%;*/ /* Ana slider genişliği */
        /*margin-bottom: 10px;*/ /* Thumbnail slider ile araya boşluk ekler */
    /*}

        .main-slider img {
            width: 100%;*/ /* Ana resmin genişliği */
            /*height: auto;
            object-fit: contain;*/ /* Görüntüyü bozmadan sığdırır */
        /*}
}*/
