/* =========================================================
   1) FULL-SCREEN HERO (viewport'un %100'u)
   ========================================================= */
html, body {
    /* overflow-x: hidden scroll container olusturup descendant'lardaki
       position: sticky davranisini bozar. `overflow-x: clip` ayni gorsel
       etkiye sahip (tasan icerik kirpilir) ama scroll context olusturmaz. */
    overflow-x: clip;
}

.home-slides {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* parent dar olsa bile viewport'a ortala */
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* margin-top kasitli olarak !important degil — tema header.css'inde
       transparent overlay icin negative margin uygulanabilsin (header
       slider'in uzerine binsin). */
    margin-top: 0;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

    /* Swiper da tam genişliği alsın */
    .home-slides .swiper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* =========================================================
   2) GÖRSEL: tam ekran (100dvh) + responsive
   ========================================================= */
.home-slides {
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --stroke: rgba(255,255,255,.14);
    --shadow: 0 18px 50px rgba(0,0,0,.45);
}

    /* Kart: full-bleed hero, yuvarlak köşe yok (tam ekranda kenar görünmemeli) */
    .home-slides .hs-card {
        display: block;
        width: 100% !important;
        height: 100%;
        border-radius: 0;
        overflow: hidden;
        text-decoration: none;
    }

    /* Tam ekran hero: dvh (dynamic viewport height) — mobilde tarayıcı
       address bar'inin gizlendigi/açıldığı geçişlerde sıçrama olmaz.
       Eski tarayıcılar için vh fallback. */
    .home-slides .hs-media {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 480px; /* çok kısa ekranlarda makul minimum */
        overflow: hidden;
        background: #000;
    }

    .home-slides .swiper-slide {
        height: 100vh;
        height: 100dvh;
        min-height: 480px;
    }

        .home-slides .hs-media img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover; /* boyut ne olursa olsun ekrani doldur, kirp */
            object-position: center; /* her zaman ortala */
        }

    /* =========================================================
   3) Overlay yazı/buton (şık ve okunaklı)
   ========================================================= */
    .home-slides .hs-content {
        position: absolute;
        left: clamp(16px, 4vw, 64px);
        right: clamp(16px, 4vw, 64px);
        bottom: clamp(40px, 8vh, 96px);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 2;
        max-width: 760px;
    }

    .home-slides .hs-subtitle {
        margin: 0;
        font-size: clamp(12px, 1.2vw, 14px);
        letter-spacing: .25px;
        color: var(--muted);
    }

    .home-slides .hs-title {
        margin: 0;
        font-size: clamp(24px, 4vw, 56px);
        line-height: 1.12;
        color: var(--text);
        text-shadow: 0 10px 30px rgba(0,0,0,.55);
        font-weight: 700;
    }

    .home-slides .hs-btn {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 18px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.22);
        background: rgba(0,0,0,.35);
        backdrop-filter: blur(6px);
        color: var(--text);
        font-weight: 650;
        font-size: 14px;
        text-decoration: none;
    }

    /* =========================================================
   4) Oklar: kenardan içeri + mobilde gizle
   ========================================================= */
    .home-slides .swiper-button-prev,
    .home-slides .swiper-button-next {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(0,0,0,.45);
        border: 1px solid rgba(255,255,255,.22);
        backdrop-filter: blur(6px);
        box-shadow: 0 14px 40px rgba(0,0,0,.35);
        color: rgba(255,255,255,.95);
    }

    .home-slides .swiper-button-prev {
        left: 24px !important;
    }

    .home-slides .swiper-button-next {
        right: 24px !important;
    }

        .home-slides .swiper-button-prev::after,
        .home-slides .swiper-button-next::after {
            font-size: 18px;
            font-weight: 800;
        }

    /* Pagination */
    .home-slides .swiper-pagination {
        bottom: 18px !important;
    }

    .home-slides .swiper-pagination-bullet {
        opacity: .5;
        background: #fff;
    }

    .home-slides .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff;
    }

/* =========================================================
   5) Mobil: yatay gorseli oranla goster (portrait crop YOK)
   ========================================================= */
/* Onceki davranis: height:100dvh + min-height:420px + object-fit:cover.
   Mobil portrait viewport'ta (360x800) yatay 16:9 gorsel object-fit cover
   ile dikey alanı doldurmak icin merkezden kirpilan dar bir serit halinde
   görunürdu. Cözum: height:auto + aspect-ratio: 16/9. Görsel kendi yatay
   oranında renderlanır, portrait crop olmaz. */
@media (max-width: 768px) {
    .home-slides .hs-media,
    .home-slides .swiper-slide {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .home-slides .hs-media img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .home-slides .swiper-button-prev,
    .home-slides .swiper-button-next {
        display: none;
    }

    /* Mobil hero kompakt — overlay metni de kompakt yerlestir. */
    .home-slides .hs-content {
        bottom: clamp(16px, 4vw, 32px);
        gap: 8px;
    }

    .home-slides .hs-title {
        font-size: clamp(18px, 5vw, 28px);
    }

    .home-slides .hs-subtitle {
        font-size: 11px;
    }

    .home-slides .hs-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .home-slides .swiper-pagination {
        bottom: 8px !important;
    }
}