/* --- HERO SECTION (Kapsayıcı) --- */
.video-hero-section {
    position: relative; /* Çocuklar buna göre hizalanacak */
    width: 100%;
    height: 100vh; /* Tüm ekran yüksekliği */
    min-height: 600px;
    overflow: hidden; /* Taşanı gizle */
    background-color: #000; /* Video gelmezse siyah zemin */
    display: flex;
    align-items: center; /* İçeriği dikey ortala */
    justify-content: center; /* İçeriği yatay ortala */
}

/* --- VİDEO (Arka Plan) --- */
.bg-video {
    position: absolute; /* Akıştan çık, arkaya geç */
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* Videoyu tam merkeze oturt */
    transform: translateX(-50%) translateY(-50%);
    z-index: 0; /* En altta */
    object-fit: cover; /* Ekranı doldur, boşluk bırakma */
    opacity: 0.6; /* Hafif şeffaf olsun */
}

/* --- KARARTMA PERDESİ (Overlay) --- */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Siyah tül perde */
    z-index: 1; /* Videonun üstünde */
}

/* --- İÇERİK (Yazılar ve Butonlar) --- */
.container {
    position: relative;
    z-index: 2; /* En üstte! Perdenin de üstünde */
}

/* ============================================================
   FOOTER (ALT BİLGİ) AYARLARI - NET VE SABİT ⚫️
   ============================================================ */
footer {
    background-color: #000 !important; /* Arka plan tam SİYAH */
    color: #fff !important;            /* Yazı tam BEYAZ */
    padding: 20px 0 !important;        /* Biraz daha dolgun şerit */
    opacity: 1 !important;             /* Şeffaflık YOK, tam net */
    width: 100%;                       /* Ekranı tam kapla */
    margin-top: auto;                  /* İçerik azsa bile en alta yapış */
    position: relative;                
    z-index: 100;                      /* Diğer öğelerin altında kalmasın */
}

/* Hover efektini sildim, artık sabit duracak */

/* ============================================================
   MOBİL CİHAZ DÜZENLEMELERİ (Telefonlar) 
   ============================================================ */
@media (max-width: 768px) {

    /* 1. BAŞLIK VE YAZI AYARLARI */
    .video-hero-section h1.display-3 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }
    
    .video-hero-section p.lead {
        font-size: 1.1rem !important;
        width: 95% !important;
    }

    /* 2. BUTONLARI DÜZELTME */
    .video-hero-section .d-flex {
        flex-direction: column !important;
        align-items: center;
        gap: 15px !important;
        width: 100%;
    }

    .video-hero-section .btn {
        width: 85% !important;
        display: block;
        padding: 12px 0 !important;
        font-size: 1rem !important;
        margin: 0 auto;
    }

    /* 3. GİZLEMELER */
    .video-hero-section .fa-chevron-right,
    .video-hero-section .fa-chevron-left,
    .carousel-control-prev, 
    .carousel-control-next,
    .carousel-indicators,
    .scroll-down-indicator {
        display: none !important;
    }

    /* 4. MOBİL FOOTER */
    footer {
        font-size: 0.75rem !important; /* Mobilde okunabilir olsun */
        padding: 15px 0 !important;
    }
}