/* ============================================
   RESPONSIVE YOUTUBE VIDEO CONTAINER
   ============================================ */

.responsive-video-container {
    /* Kapsayıcı pozisyonunu ayarla (çocuk öğeler için referans noktası) */
    position: relative;
    /* Tam genişlik */
    width: 100%;
    /* 16:9 en boy oranı (56.25% = 9/16) */
    padding-bottom: 56.25%; 
    height: 0;
    /* Taşmaları gizle */
    overflow: hidden;
}

.responsive-video-container iframe {
    /* Kapsayıcının (16:9 alanının) içine tam olarak yerleş */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Çerçeve kenarlığını kaldır */
    border: 0;
}

/* Hero section içinde video container için özel stiller - DESKTOP VE MOBİL */
.hero {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Home page: body padding-top'u iptal et (hero için negative margin gereksiz) */
body.home-page {
    padding-top: 0 !important;
}

/* Home page: hero asla yukarı kaçmasın */
body.home-page .hero {
    margin-top: 0 !important;
}

/* style.css içindeki `#home.hero` gibi ID'li kuralları da ez */
body.home-page #home.hero,
body.home-page section#home.hero {
    margin-top: 0 !important;
}

/* Home page: anchor'lar header altında kalmasın */
body.home-page section[id] {
    scroll-margin-top: calc(var(--top-bar-height) + var(--navbar-offset));
}

/* Hero section içindeki video container - TAM EKRAN */
.hero .responsive-video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-width: 100% !important;
    min-height: 100vh !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
}


.hero .responsive-video-container iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* NOT: iframe scale() bulanıklık yapabiliyor (özellikle masaüstünde).
       Cover etkisini width/min-* ile sağlıyoruz. */
    /* Biraz aşağı kaydır: daha fazla alt taraf görünsün */
    transform: translate(-50%, -40%) !important;
    width: 177.78vh !important; /* 16:9 aspect ratio için genişlik */
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 56.25vw !important; /* 16:9 aspect ratio için yükseklik */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 1 !important;
}

/* Video overlay - Hero section içinde */
.hero .responsive-video-container .video-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 10% !important;
    background-color: black !important;
    z-index: 2 !important;
}

/* Hero text overlay - video'nun üstünde görünmeli - TAM ORTA */
.hero .hero-text-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 2rem !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.hero .hero-text-overlay * {
    pointer-events: auto !important;
}

/* Hero title - tam ortada */
.hero .hero-text-overlay .hero-welcome-title {
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hero subtitle - tam ortada */
.hero .hero-text-overlay .hero-welcome-subtitle {
    margin: 1rem auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hero buttons - tam ortada */
.hero .hero-text-overlay .hero-buttons {
    margin: 1.5rem auto 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
}

/* MOBİL İÇİN ÖZEL AYARLAR - ÜST SİYAH BOŞLUK YOK */
@media (max-width: 768px) {
    .hero {
        position: relative !important;
        width: 100% !important;
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-top: calc(-1 * var(--top-bar-height)) !important; /* Top bar yüksekliğini iptal et */
        padding-top: 0 !important;
        top: 0 !important;
        left: 0 !important;
        background: transparent !important;
    }
    
    .hero .responsive-video-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-width: 100% !important;
        min-height: 100vh !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
        background: transparent !important; /* Şeffaf arka plan */
        /* Net görüntü için */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .hero .responsive-video-container iframe {
        position: absolute !important;
        top: 50% !important; /* Ortadan başla */
        left: 50% !important; /* Ortadan başla */
        /* Mobile'da da videoyu biraz aşağı kaydır */
        transform: translate(-50%, -40%) !important;
        width: 177.78vh !important; /* 16:9 aspect ratio için genişlik (100vh * 16/9) */
        height: 100vh !important; /* Tam yükseklik */
        min-width: 100vw !important; /* Minimum genişlik - ekranı kapla */
        min-height: 100vh !important; /* Minimum yükseklik */
        max-width: none !important; /* Maksimum genişlik yok */
        max-height: none !important; /* Maksimum yükseklik yok */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        z-index: 1 !important;
        /* Net görüntü için */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        /* Filter yok - bulanıklık yok */
        filter: none !important;
        -webkit-filter: none !important;
        /* Backdrop filter yok */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Portrait mode için ek optimizasyon - TAM EKRAN */
    @media (orientation: portrait) {
        .hero .responsive-video-container iframe {
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -40%) !important;
            width: 177.78vh !important; /* 16:9 aspect ratio */
            height: 100vh !important;
            min-width: 100vw !important; /* Ekranı tam kapla */
            min-height: 100vh !important;
        }
    }
    
    /* Landscape mode için optimizasyon - TAM EKRAN */
    @media (orientation: landscape) {
        .hero .responsive-video-container iframe {
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -40%) !important;
            width: 177.78vw !important; /* Landscape'te genişlik öncelikli */
            height: 56.25vw !important; /* 16:9 aspect ratio için yükseklik (100vw * 9/16) */
            min-width: 100vw !important;
            min-height: 100vh !important; /* Minimum yükseklik ekranı kapla */
        }
    }
    
    .hero .hero-text-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        z-index: 10 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.5rem !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
    
    .hero .hero-text-overlay .hero-welcome-title {
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero .hero-text-overlay .hero-welcome-subtitle {
        margin: 1rem auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero .hero-text-overlay .hero-buttons {
        margin: 1.5rem auto 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
}

/* DESKTOP İÇİN ÖZEL AYARLAR */
@media (min-width: 769px) {
    .hero {
        position: relative !important;
        width: 100% !important;
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-top: calc(-1 * (var(--top-bar-height) + var(--navbar-offset))) !important; /* Body padding'i iptal et */
        padding-top: 0 !important;
        top: 0 !important;
    }
    
    .hero .responsive-video-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-width: 100% !important;
        min-height: 100vh !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }
    
    .hero .responsive-video-container iframe {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        /* NOT: iframe scale() bulanıklık yapabiliyor (özellikle masaüstünde). */
        transform: translate(-50%, -50%) !important;
        width: 177.78vh !important; /* 16:9 aspect ratio için genişlik */
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 56.25vw !important; /* 16:9 aspect ratio için yükseklik */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        z-index: 1 !important;
    }
    
    .hero .hero-text-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        z-index: 10 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2rem !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
    
    .hero .hero-text-overlay .hero-welcome-title {
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero .hero-text-overlay .hero-welcome-subtitle {
        margin: 1rem auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .hero .hero-text-overlay .hero-buttons {
        margin: 1.5rem auto 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
    }
}