#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Karartma efekti */
    z-index: 1040; /* Carousel'den bir alt z-index */
}

.carousel-inner img {
    width: 460px;
    height: 441px;
}

.carousel-control-prev {
    color: white;
}

@media (max-width: 1599px) {
    .carousel-inner img {
        width: 507px;
        height: 441px;
    }
}

@media (min-width: 1601px) {
    .carousel-inner img {
        width: 460px;
        height: 441px;
    }
}

/* Laptop ekran boyutları için */
@media (min-width: 768px) and (max-width: 1600px) {
    #carouselExampleIndicators {
        max-width: 570px;
        max-height: 428px;
    }
}

/* Büyük ekranlar için */
@media (min-width: 1601px) {
    #carouselExampleIndicators {
        max-width: 700px;
        max-height: 525px;
    }
}

/* Telefon ekranları için */
@media (max-width: 767px) {
    #carouselExampleIndicators {
        max-width: 320px;
        max-height: 240px;
    }
}

/* Okların varsayılan olarak görünmez olmasını sağla */
.carousel-control-prev,
.carousel-control-next {
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.3s ease; /* Geçiş efekti */
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 50px;
    background: none;
    z-index: 1060;
    background-color: rgba(0, 0, 0, 0.8);
    color:#F1F1F1;
    padding:5px;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

/* Özel ok simgeleri */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 60px; /* Daha büyük ok */
    height: 60px; /* Daha büyük ok */
    background-color: transparent; /* Arka planı kaldır */
    border: none; /* Kenarlık yok */
    /* SVG ile ok çizimi */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="60px" height="60px"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.carousel-control-next-icon {
    transform: rotate(180deg); /* Sağ ok için ters çevir */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="60px" height="60px"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
}

/* Mobil cihazlar için ayar */
@media (max-width: 767px) {
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        display: none;
    }
    

        .close-icon {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060; /* Overlay ve carousel’in üstünde */
    cursor: pointer;
    display: none; /* Varsayılan olarak gizli */
        }

    .close-icon span {
        font-size: 40px;
        color: white;
        font-weight: bold;
        line-height: 1;
        }
        /* Telefon ekranları için responsive resimler */

    }
@media (max-width: 767px) {
/* Carousel resimleri */
.carousel-inner img {
width: 100%; /* Resim genişliği %100 olacak */
height: 400px; /* Yükseklik orantılı olacak */
object-fit: cover; /* Resim tam olarak kapsar ve oranı bozmadan görüntülenir */
}

/* YouTube Video */
.carousel-item iframe {
max-width: 100%; /* Video genişliği %100 olacak */
height: 400px; /* Yükseklik küçük ekranlarda uyumlu olacak */
object-fit: contain; /* Video tam olarak içine sığacak */
}

/* Okların boyutlarını küçültüyoruz */
.carousel-control-prev,
.carousel-control-next {
width: 30px; /* Küçültülmüş oklar */
height: 40px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 30px; /* Küçük ok simgeleri */
height: 30px;
}

/* Okların konumu */
.carousel-control-prev {
left: 5px;
}

.carousel-control-next {
right: 5px;
}

/* Video için göstergeleri gizle */
.carousel-item-video ~ #carouselIndicators {
display: none;
}
}