/* ================================================================
   1. SLIDER ANA YAPI
   ================================================================ */
.slider {
    position: relative;
    width: 100%;
    height: 700px !important;
    margin-top: 40px !important; 
    overflow: hidden;
    background-color: #fff;
}

/* ================================================================
   2. SLAYT KATMANLARI (GÖRSEL TAM SIĞDIRMA)
   ================================================================ */
.slide {
    position: absolute;
    inset: 0;
    background-size: contain !important; 
    background-repeat: no-repeat !important;
    background-position: center bottom !important; 
    opacity: 0;
    transition: opacity .8s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}



/* ================================================================
   4. NAVİGASYON NOKTALARI (DOTS)
   ================================================================ */
.slider-dots {
    position: absolute;
    bottom: 20px; 
    left: 25%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 16px;           /* Noktalar büyüdüğü için boşluk 12px -> 16px yapıldı */
    z-index: 1000; 
}

/* Standart Nokta Tasarımı */
.dot {
    width: 18px;         /* 12px -> 18px yapıldı */
    height: 18px;        /* 12px -> 18px yapıldı */
    background-color: rgba(255, 255, 255, 0.3); 
    border: 3px solid #08b1cf; /* Çerçeve 2px -> 3px yapıldı */
    border-radius: 50%; 
    cursor: pointer; 
    transition: all 0.4s ease; 
}

/* Aktif/Seçili Nokta Tasarımı (Kristal Efekt) */
.dot.active {
    background: linear-gradient(90deg, #08b1cf, #061772); 
    width: 55px;         /* 40px -> 55px yapıldı (Orantılı uzatıldı) */
    height: 18px;        /* Standart nokta yüksekliğiyle eşitlendi */
    border-radius: 25px; 
    box-shadow: 0 0 20px rgba(8, 177, 207, 0.7); /* Parlama alanı genişletildi */
    border-color: #fff; 
}

.dot:hover:not(.active) {
    background-color: rgba(8, 177, 207, 0.5); 
    transform: scale(1.2); 
}



/* ================================================================
   MOBİL BOŞLUK VE ÇAKIŞMA KESİN ÇÖZÜMÜ
   ================================================================ */
/* ================================================================
   MOBİL VE SABİT GENİŞLİK (1140px) ÇÖZÜMÜ
   ================================================================ */

/* Cihaz kendini 1140px sandığı için sorguyu bu genişliğe çekiyoruz */
@media screen and (max-width: 1140px) {
    
    /* 1. Header'ı havadan indiriyoruz (Slider'ın altına girmesini engeller) */
    .site-header {
        position: relative !important; 
        width: 1140px !important;
        margin: 0 auto !important;
        float: none !important;
    }

    /* 2. Slider'ı en tepeye mıknatısla */
    .slider {
        margin-top: 0 !important; 
        height: 500px !important; /* Bu değeri görsellerin mobildeki boyutuna göre ayarlayabilirsin */
        width: 1140px !important;
        background-color: transparent !important;
        clear: both !important;
    }

    /* 3. Görsellerin kutuya tam oturması */
    .slide {
        background-size: contain !important; 
        background-position: center center !important;
        height: 100% !important;
        inset: 0 !important;
    }

    /* 4. Menüdeki dikey kalabalığı azalt */
    .header-inner {
        padding: 5px 15px !important;
        gap: 5px !important;
        min-height: auto !important;
    }

    /* 5. Noktaların (Dots) yerini ayarla */
    .slider-dots {
        bottom: 20px !important;
        left: 30% !important;
        transform: translateX(-50%) !important;
    }
}