/* Slider kapsayıcısı: genişlik, yükseklik, ortalama, kaydırma gizleme ve dokunma ayarları */
.slider {
    width: 80%; /* Geniş ekranlarda genişlik %80 */
    height: 80vh; /* Yükseklik viewport yüksekliğinin %80'i */
    margin: 0 auto; /* Ortalamak için yatay margin */
    overflow: hidden; /* Taşan içerikleri gizle */
    position: relative; /* İçeriklerin mutlak pozisyonlanması için referans */
    background-color: white; /* Beyaz arka plan */
    touch-action: pan-y; /* Yatay değil, sadece dikey kaydırmaya izin ver */
    -ms-touch-action: pan-y; /* Eski IE için aynı ayar */
}

/* Slaytların bir arada ve yatayda esnek şekilde dizilmesi */
.slides {
    display: flex; /* Slaytları yan yana diz */
    transition: transform 0.5s ease-in-out; /* Kaydırma animasyonu */
    height: 100%; /* Yüksekliği slider ile aynı yap */
}

/* Her bir slaytın genişlik ve yükseklik ayarları */
.slide {
    min-width: 100%; /* Her slayt slider genişliği kadar */
    height: 100%; /* Yüksekliği slider ile aynı */
    position: relative; /* İçindeki öğelerin pozisyonu için referans */
}

    /* Slayt içindeki resimlerin boyutlandırılması */
    .slide img {
        width: 100%; /* Resim genişliği slayt kadar */
        height: 100%; /* Resim yüksekliği slayt kadar */
        object-fit: contain; /* Görsel taşmadan slayta sığar */
        object-position: center; /* Görüntüyü ortalar */
        display: block; /* Blok seviyesinde göster */
        background-color: #fff; /* Beyaz arka plan */
    }

        /* Resim üzerine gelince işaretçi değişimi (büyütme efektini yorum satırına aldın) */
        .slide img:hover {
            cursor: pointer; /* Fare üzerine gelince işaretçi değişir */
            /*transform: scale(1.8);  Küçük resimlerin üzerine gelindiğinde büyüme efekti */
        }

/* Slayt altındaki açıklama kutusu stili */
.caption {
    position: absolute; /* Slayt içinde konumlandırma */
    bottom: 60px; /* Alttan boşluk */
    width: 100%; /* Tam genişlik */
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah arka plan */
    color: white; /* Yazı rengi */
    padding: 10px 15px; /* İç boşluk */
    font-size: 1.2rem; /* Yazı boyutu */
    text-align: center; /* Yazıyı ortala */
}

/* Slayt göstergesi noktalarının kapsayıcısı */
.dots {
    position: absolute; /* Slider içinde konumlandır */
    bottom: 10px; /* Alt boşluk */
    left: 50%; /* Sol kenardan %50 */
    transform: translateX(-50%); /* Ortala */
    display: flex; /* Noktaları yatay diz */
    gap: 10px; /* Noktalar arası boşluk */
}

    /* Her bir dot için boyut ve stil */
    .dots div {
        width: 30px;
        height: 5px;
        background-color: black;
        border-radius: 5%; /* Hafif yuvarlatılmış köşe */
        cursor: pointer; /* Üzerine gelince işaretçi değişir */
        transition: background-color 0.3s; /* Renk değişimi animasyonu */
    }

        /* Aktif dot için turuncu renk */
        .dots div.active {
            background-color: orange;
        }

/* İleri ve geri okların genel stili */
.arrow {
    position: absolute;
    top: 50%; /* Yatay ortala */
    transform: translateY(-50%); /* Dikey ortalama */
    font-size: 2rem;
    color: black;
    background-color: rgba(255, 255, 255, 0.5); /* Yarı saydam beyaz arka plan */
    padding: 10px;
    cursor: pointer;
    user-select: none; /* Metin seçilmesini engelle */
}

    /* Geri ok (sol tarafta) konumu */
    .arrow.left {
        left: 10px;
    }

    /* İleri ok (sağ tarafta) konumu */
    .arrow.right {
        right: 10px;
    }

/* Mobil cihazlarda responsive ayarlar */
@media (max-width: 768px) {
    .slider {
        width: 100%; /* Mobilde tam genişlik */
    }

    .caption {
        font-size: 1rem; /* Yazı küçült */
    }

    .arrow {
        display: none; /* Mobilde okları gizle */
    }
}

/* Eski fiyatın kırmızı ve üstü çizili görünmesi */
#dynamicOldPrice {
    font-family: "Victor Mono", serif;
    font-optical-sizing: auto;
    color: white;
    font-size: 20px;
}

/* Yeni fiyatın yeşil ve vurgulu görünmesi */
#dynamicNewPrice.green-sub {
    font-family: "Victor Mono", serif;
    font-optical-sizing: auto;
    color: chartreuse;
    font-size: 18px;
    font-weight: bold;
}