/* ============================================================
   Elegant Theme — Slide Video Hero (autoplay background video)
   Anasayfa hero alaninda YouTube videosu autoplay + muted +
   loop ile background olarak oynar. Tum YT chrome (kontroller,
   ust bar, progress bar) gizlenir.
   ============================================================ */

.home-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@supports (height: 100svh) { .home-hero { min-height: 100svh; } }
@supports (height: 100dvh) { .home-hero { min-height: 100dvh; } }

@media (max-width: 768px) {
    /* Mobil: video 16:9 oraninda dogal haliyle gosterilsin.
       Container yuksekligini videoya esitle — siyah bant olmaz, video
       crop edilmez, kullaniciya tam yatay video verilir. */
    .home-hero {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .home-hero__mouse { display: none; }
    .home-hero__content { padding: 44px 14px 28px; }
}

.home-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* YouTube iframe — "cover" davranisi: iframe daima 16:9 oranindadir.
   Container hem dikey (mobil) hem yatay (masaustu) olabilecegi icin
   iframe'i container'dan buyuk olacak sekilde olceklendiriyoruz; tasan
   kisimlar `.home-hero` overflow:hidden ile crop edilir. Boylece ust/alt
   veya yan siyah letterbox kalmaz. */
.home-hero__yt-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* MASAUSTU (yatay viewport) — cover davranisi: iframe daima 16:9
   oranindadir; container'dan buyuk olacak sekilde olceklendirilir.
   width=100vw + height=56.25vw default; min-height/min-width ile dikey
   konteyner ihtimaline karsi 16:9 zorlanir. Tasanlar overflow:hidden
   ile kirpilir. Ortalanma icin translate(-50%,-50%). */
.home-hero__yt-frame > div,
.home-hero__yt-frame iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* MOBIL — container zaten aspect-ratio: 16/9 ile videoya dimensionlanmis.
   iframe'i container'a fit ettir, cover/scale yapma; videonun dogal
   yatay halini koru. */
@media (max-width: 768px) {
    .home-hero__yt-frame > div,
    .home-hero__yt-frame iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        transform: none;
    }
}

/* Saydam click-shield — kullanicinin iframe'e tiklamasini ve
   YT chrome'unun acilmasini engeller. */
.home-hero__shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    pointer-events: auto;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}

.home-hero__content {
    position: relative;
    z-index: 4;
    width: min(1100px, 92vw);
    text-align: center;
    padding: 72px 16px 40px;
    color: #fff;
}

.home-hero__title {
    margin: 0;
    font-size: clamp(24px, 7vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.home-hero__subtitle {
    margin: 14px auto 0;
    max-width: 70ch;
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.6;
    opacity: .95;
}

.home-hero__mouse {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.85);
    opacity: .9;
    animation: heroMouse 1.4s ease-in-out infinite;
}

@keyframes heroMouse {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: .85; }
    50%      { transform: translateX(-50%) translateY(8px); opacity: 1;   }
}