/* --- Mobil Slider Stilleri --- */
.mobil-slider-container {
    display: none; /* Varsayılan olarak gizli, sadece 1023px altında görünecek */
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #e5e7eb;
    
    /* SLIDER EN-BOY ORANI AYARI:
        Aşağıdaki 'aspect-ratio' değeri slider'ın oranını belirler. 
        Örneğin:
        - Kare (1080x1080) için: 1 / 1
        - 4:3 oranı için: 4 / 3
        - 16:9 oranı için: 16 / 9
        Değeri 'genişlik / yükseklik' olarak yazmanız yeterlidir.
    */
    aspect-ratio: 4 / 2,5;
}

/* Slider altına neon parıltı efekti */
.mobil-slider-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #f97316;
    box-shadow: 0 0 8px #f97316, 0 0 16px #f97316, 0 0 24px #ea580c;
    z-index: 5;
}

.mobil-slide {
    display: none;
}

.mobil-slide img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: contain; /* Resmin orantısını koru, kırpma */
}

/* Geçiş Animasyonu */
.fade-mobil {
  animation-name: fade-mobil;
  animation-duration: 1.0s;
}

@keyframes fade-mobil {
  from {opacity: .6}
  to {opacity: 1}
}

/* --- MASAÜSTÜ CİHAZLAR İÇİN AYARLAMALAR --- */
@media screen and (min-width: 1024px) {
    /* Mobil slider'ı masaüstünde her ihtimale karşı gizle */
    .mobil-slider-container {
        display: none !important;
    }
}

/* --- MOBİL CİHAZLAR İÇİN GÖSTERİM --- */
@media screen and (max-width: 1023px) {
    /* Mobil slider'ı mobilde göster */
    .mobil-slider-container {
        display: block;
        /* MOBİL HEADER İÇİN BOŞLUK: Sabit header'ın altına girmemesi için eklendi. */
        margin-top: 124px; /* Header yüksekliğine göre ayarlandı ve biraz daha boşluk bırakıldı */
    }
}