/**
 * Responsive Slider CSS - Mobil ve desktop için farklı özelleştirmeler
 */

/* Genel slider stilleri */
.custom-carousel .carousel-item {
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease-in-out;
}

/* Mobil cihazlar için */
@media (max-width: 767.98px) {
    .custom-carousel .carousel-item {
        height: 400px; /* Mobil için daha kısa bir yükseklik */
        /* Arka planın telefonda düzgün görünmesi için ayarlar */
        background-size: cover;
        background-position: center center;
    }
    
    .custom-carousel .carousel-caption {
        padding: 10px;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); /* Metinlerin daha okunabilir olması için */
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .custom-carousel .carousel-caption h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .custom-carousel .carousel-caption p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .custom-carousel .carousel-caption .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 0.5rem;
    }
}

/* Tablet cihazlar için */
@media (min-width: 768px) and (max-width: 991.98px) {
    .custom-carousel .carousel-item {
        height: 500px;
    }
}

/* Geniş ekranlar için */
@media (min-width: 1200px) {
    .custom-carousel .carousel-item {
        height: 700px;
    }
}

/* Slider yumuşak geçişlerle görüntülensin */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

/* Tek Görsel Durumu İçin Stiller */
.single-hero-image {
    position: relative;
    overflow: hidden;
}

.single-hero-image .hero-item {
    position: relative;
}

.single-hero-image .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
    text-align: center;
    z-index: 10;
}

/* Mobil cihazlar için tek görsel */
@media (max-width: 767.98px) {
    .single-hero-image .hero-item {
        height: 400px !important; /* Mobil için daha kısa bir yükseklik */
    }
    
    .single-hero-image .carousel-caption {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5); /* Metinlerin daha okunabilir olması için */
    }
    
    .single-hero-image .carousel-caption h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .single-hero-image .carousel-caption p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
}