/* 
 * Kargo34 Anasayfa Eklentisi Slider CSS
 * Modern, responsive 16:9 (PC) ve 9:16 (Mobil) oranlarına sahip slider
 */

/* Temel animasyonlar */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Slider Yükleme Animasyonu */
.slider-loaded {
    animation: fadeIn 0.8s ease-in-out;
}

/* Ekstra Slider Özellikleri */
.responsive-slider {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Bootstrap 5 ile uyumlu container stil desteği */
.slider-container {
    padding: 0;
    margin-bottom: 30px;
}

/* Ek görsel efektler */
.responsive-slider .swiper-slide-active .slide-content {
    animation: slideUp 0.5s ease-in-out forwards;
}

/* PC ekranlarda 16:9 format için görsel zenginlikler */
@media (min-width: 769px) {
    .responsive-slider .slide-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 100%);
        z-index: 1;
        pointer-events: none;
    }
    
    /* İçerik hover efektleri */
    .responsive-slider .swiper-slide:hover .slide-content {
        background: rgba(0,0,0,0.7);
        transform: translateY(-5px);
    }
    
    /* Resim hover efektleri */
    .responsive-slider .swiper-slide:hover img {
        transform: scale(1.05);
        transition: transform 0.8s ease;
    }
}

/* Mobil ekranlar için 9:16 format optimizasyonu */
@media (max-width: 768px) {
    .responsive-slider {
        border-radius: 6px;
    }
    
    /* Dikey formatta görsel zenginlikler */
    .responsive-slider .slide-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
        z-index: 1;
        pointer-events: none;
    }
    
    .responsive-slider .slide-content {
        background: rgba(0,0,0,0.7);
        padding: 15px 10px;
    }
    
    .responsive-slider .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
}

/* Yüksek çözünürlüklü ekranlar için optimizasyon */
@media (min-width: 1440px) {
    .responsive-slider {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .responsive-slider .slide-content h3 {
        font-size: 1.5rem;
    }
}

/* Düşük çözünürlüklü ekranlar için optimizasyon */
@media (max-width: 480px) {
    .responsive-slider .slide-content h3 {
        font-size: 1rem;
    }
}

/* Dokunmatik cihazlar için iyileştirmeler */
@media (pointer: coarse) {
    .responsive-slider .swiper-button-next,
    .responsive-slider .swiper-button-prev {
        padding: 20px;
    }
}