/* =========================================
   slider.css - HAKKIMIZDA BANNER STİLİ (BİREBİR KOPYA)
   ========================================= */

/* 1. DIŞ KAPLAYICIYI SIFIRLIYORUZ */
/* Hakkımızda sayfasında dış kaplayıcı padding yapmıyor, margin-auto kullanıyor. 
   O yüzden burayı etkisiz hale getiriyoruz. */
.slider-container-wrapper {
    display: block;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
}

/* 2. ANA SLIDER KUTUSU (About Banner Kodlarının Aynısı) */
#mainImageSlider {
    /* --- ABOUT.CSS'TEN ALINAN DEĞERLER --- */
    width: 95% !important;  /* Genişlik %95 */
    margin: 100px auto 0 auto !important; /* Üstten 100px boşluk ve ORTALA */
    
    aspect-ratio: 21 / 7 !important; /* Masaüstü Oranı */
    border-radius: 20px !important;  /* Köşe Yuvarlaklığı */
    
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important; /* Gölge */
    overflow: hidden !important;
    position: relative !important;
    background-color: #f0f0f0;
}

/* 3. RESİM AYARLARI */
.carousel-item {
    width: 100%;
    height: 100%;
    position: relative;
    /* Slider yapısı gereği buraya da oran veriyoruz ki resim taşmasın */
    aspect-ratio: 21 / 7 !important; 
}

.carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Resmi kutuya tam doldur */
    object-position: center center !important;
}

/* 4. NAVİGASYON (Oklar ve Noktalar) */
.carousel-control-prev, .carousel-control-next {
    width: 5%; opacity: 0.8; z-index: 20;
}
.carousel-indicators { margin-bottom: 1rem; z-index: 20; }
.carousel-indicators button {
    width: 10px !important; height: 10px !important; border-radius: 50%;
    background-color: #fff !important; opacity: 0.6; margin: 0 5px !important;
}
.carousel-indicators button.active {
    opacity: 1; background-color: #d31212 !important; transform: scale(1.3);
}

/* =========================================
   MOBİL UYUMLULUK (About Sayfası Mantığıyla)
   ========================================= */

/* Tablet (991px altı) */
@media (max-width: 991px) {
    #mainImageSlider, .carousel-item {
        /* Hakkımızda sayfasında tablette oran neyse o (Genelde 21/9) */
        aspect-ratio: 21 / 9 !important;
    }
}

/* Telefon (768px altı) */
@media (max-width: 768px) {
    #mainImageSlider {
        /* Mobilde de Hakkımızda banner'ı gibi kenarlardan boşluklu (%95) kalsın */
        width: 95% !important; 
        margin-top: 100px !important;
        border-radius: 15px !important;
        
        /* Mobilde resim içindeki yazıların okunması için oranı biraz yükseltiyoruz */
        /* Hakkımızda sayfasında da bu oran kullanılıyor */
        aspect-ratio: 16 / 9 !important; 
    }
    
    .carousel-item {
        aspect-ratio: 16 / 9 !important;
    }
}