/* Carousel Stili */
.carousel-eks {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-container-eks {
    display: flex;
    gap: var(--item-gap, 0px); /* Öğeler arası boşluk */
    transition: transform 0.5s ease;
}

.carousel-item-eks {
    flex: 0 0 auto;
    width: calc((100% - (var(--item-gap, 0px) * (var(--visible-items, 1) - 1))) / var(--visible-items)); /* Dinamik geniÅŸlik */
}


.carousel-eks button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Başlangıçta şeffaf siyah arka plan */
    color: white;
    border: none;
    padding: 10px;
    z-index: 1;
    opacity: 0; /* Butonlar başlangıçta gizli */
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease; /* Geçiş için animasyonlar */
}

.carousel-eks:hover button {
    opacity: 1; /* Carousel üzerine gelindiğinde butonlar görünür */
}

.carousel-eks button:hover {
    background-color: rgba(255, 99, 71, 0.8); /* Tatlı kırmızı arka plan */
   
}

.carousel-eks #prev {
    left: 0;
}

.carousel-eks #next {
    right: 0;
}

/* Pagination container'ı */
.pagination-eks {
    display: flex; /* Flexbox ile öğeleri yatayda hizalarız */
    justify-content: center; /* Sayfalama öğelerini yatayda ortalarız */
    padding: 0; /* İç boşlukları sıfırlıyoruz */
    margin: 0; /* Dış boşlukları sıfırlıyoruz */
}

/* Thumbnail sayfalama (Resim olarak pagination) */
.pagination-eks.thumbnails span {
    display: inline-block;
    width: 50px; /* Resim genişliği */
    height: 50px; /* Resim yüksekliği */
    margin: 0; /* Öğeler arasındaki boşluğu sıfırlıyoruz */
    padding: 0; /* İç boşlukları sıfırlıyoruz */
    background-size: cover; /* Arka plan resmi tam kaplasın */
    background-position: center;
    cursor: pointer;
    border: 0px solid #ccc; /* Çerçeve */
    transition: border-color 0.3s ease;
    border-radius: 0%; /* Yuvarlak şekil için */
}

/* Dot sayfalama (Nokta olarak pagination) */
.pagination-eks.dots span {
    display: inline-block;
    width: 10px; /* Nokta genişliği */
    height: 10px; /* Nokta yüksekliği */
    margin: 5px 5px; /* Öğeler arasındaki boşluk */
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Aktif olan span */
.pagination-eks.thumbnails span.active {
    background-color: rgba(0, 123, 255, 0.5); /* Mavi bir arka plan rengi (yarı saydam) */
    opacity: 0.6; /* Resmi biraz transparan yap */
    border-color: #007bff; /* Çerçeve rengini vurgula */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.6); /* Işıma efekti */
    transition: background-color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}
.pagination-eks.dots span.active {
    background-color: #333; /* Aktif nokta rengi */
}




.hidden {
    display: none;
}

/* Responsive Tasarım */
@media (max-width: 1200px) {
    .carousel-item-eks {
        width: 50%; /* Orta boyutlu ekranlarda 2 öğe göster */
    }
}

@media (max-width: 768px) {
    .carousel-item-eks {
        width: 100%; /* Küçük ekranlarda 1 öğe göster */
    }
}