/* ============================================================
   TUSWORLD - MOBİL TASARIM (sadece telefon/küçük ekran)
   ------------------------------------------------------------
   Bu dosya _Layout.cshtml içinde <head>'in EN SONUNA, yani
   sayfaların kendi <style> bloklarından (HeadStyles) SONRA
   yüklenir. Böylece mobil kuralları onları ezebilir.
   Masaüstü (>768px) HİÇ etkilenmez.
   ============================================================ */

/* ============================================================
   MOBİL-ÖZEL ÜRÜN GAMI BÖLÜMÜ
   Masaüstünde gizli (base display:none); sadece ≤768px'de görünür.
   Bu kural medya sorgusunun DIŞINDA olmalı ki her genişlikte gizlensin,
   media bloğu da ≤768'de tekrar göstersin.
   ============================================================ */

.mbUrunGami {
    display: none;
}

@media (max-width: 768px) {
    /* ---------- 0. ÜRÜN GAMI KARTLARI (Video Dersleri / Kitaplar) ---------- */
    .mbUrunGami {
        display: block;
        margin-top: 8px;
        margin-bottom: 4px;
    }

    .urunGamiGrid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .urunKart-grup {
        display: flex;
        flex-direction: column;
    }

    .urunKart {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 16px 18px;
        border: none;
        border-radius: 20px;
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        color: #fff;
        box-shadow: 0 10px 24px rgba(20, 160, 220, 0.22);
        position: relative;
        transition: border-radius .2s ease;
    }

        /* Liste açıkken kartın alt köşeleri düzleşip listeye birleşsin */
        .urunKart.acik {
            border-radius: 20px 20px 0 0;
        }

        /* Video Dersleri — marka mavisi gradient */
        .urunKart-video {
            background: linear-gradient(135deg, #1FB6E8 0%, #0E86C0 100%);
        }

        /* Kitaplar — sıcak turuncu gradient (mavinin yanında dikkat çeker) */
        .urunKart-kitap {
            background: linear-gradient(135deg, #FF9A45 0%, #FB6A2E 100%);
            box-shadow: 0 10px 24px rgba(251, 106, 46, 0.25);
        }

    /* Beyaz dairesel ikon rozeti (mavi çizgi ikon içinde belirgin durur) */
    .urunKart-ikon {
        flex: 0 0 auto;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

        .urunKart-ikon img {
            width: 28px;
            height: auto;
        }

    .urunKart-yazi {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .urunKart-yazi strong {
            font-size: 19px;
            line-height: 22px;
            font-weight: 700;
        }

        .urunKart-yazi small {
            font-size: 12.5px;
            line-height: 16px;
            opacity: 0.92;
        }

    .urunKart-ok {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        opacity: 0.95;
    }

        .urunKart-ok svg {
            fill: #fff;
            transition: transform .25s ease;
        }

    /* Liste açıkken oku ters çevir (yukarı bak) */
    .urunKart.acik .urunKart-ok svg {
        transform: rotate(180deg);
    }

    /* ---- Açılır kategori listesi paneli ---- */
    .urunKart-liste {
        max-height: 0;
        overflow: hidden;
        background: #fff;
        border-radius: 0 0 18px 18px;
        transition: max-height .3s ease;
        box-shadow: 0 10px 24px rgba(20, 160, 220, 0.12);
    }

        .urunKart-liste.acik {
            max-height: 1600px;   /* tüm kategoriler sığacak kadar */
        }

        /* Kategori bağlantıları */
        .urunKart-liste a {
            display: block;
            padding: 13px 20px;
            color: #2c6f8c;
            font-size: 15px;
            line-height: 20px;
            text-decoration: none;
            border-bottom: 1px solid #EEF6FB;
        }

            .urunKart-liste a:last-child {
                border-bottom: none;
            }

        /* Kitaplar listesinde turuncu tonlu metin */
        .urunKart-liste-kitap a {
            color: #9a5a2b;
        }

        /* Seçili (aktif) kategori — renkli vurgu (Videolar = mavi) */
        .urunKart-liste a.secili {
            background: #E5F4FB;
            color: #0E86C0;
            font-weight: 700;
            border-left: 4px solid #14A0DC;
            padding-left: 16px;
        }

        /* Seçili kategori — Kitaplar = turuncu */
        .urunKart-liste-kitap a.secili {
            background: #FFF1E8;
            color: #FB6A2E;
            border-left-color: #FB6A2E;
        }

    /* Videolar/Kitaplar liste sayfasında akordeon üst/alt boşluğu */
    .mbKatSayfa {
        margin-top: 16px !important;
        margin-bottom: 18px !important;
    }

    /* ---------- 1. TEMEL / GENEL ---------- */

    /* Yatay kaymayı kesin kapat. clip = scroll oluşturmadan keser. */
    html, body {
        overflow-x: clip !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }

    /* Bootstrap satır negatif margin'i mobilde taşma yapar → sıfırla */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* KRİTİK: mainDv'yi BELGE değil VIEWPORT genişliğine (100vw) sabitle.
       Böylece bazı sayfalarda alt alta dizilmeyen geniş içerik belgeyi
       genişletse bile header/mainDv viewport'u aşmaz (hamburger taşmaz).
       Taşan iç içerik clip ile kesilir. */
    .mainDv {
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: clip;
    }

    /* Bootstrap satırlarının taşmasını önle */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* ---------- 2. ÜST DURYU (slider şerit) ---------- */
    .TopMenu {
        margin-bottom: 1rem !important;
    }

    /* ---------- 3. HEADER / LOGO / İKONLAR ---------- */

    /* Masaüstü öğelerini mobilde kesin gizle.
       (.mbPc site.css'te gizleniyor ama _Layout gövdesindeki <style> bloğu
        .vid-dropdown{display:inline-flex} ile eziyor → !important şart) */
    .mbPc {
        display: none !important;
    }

    header {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 0;
    }

        /* Logo gerekirse küçülsün, alanı taşırmasın */
        header > a {
            flex: 0 1 auto;
            min-width: 0;
        }

        header > a img {
            max-height: 57px;        /* logo boyutu */
            width: auto;
        }

        /* Sepet + hamburger sağda; asla küçülüp taşmasın */
        header nav {
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
            flex-wrap: nowrap;
        }

    /* Sepet ve hamburger butonu telefonda biraz küçülsün */
    .btnSepet {
        width: 46px !important;
        height: 46px !important;
    }

        .btnSepet img {
            margin-top: 8px;
        }

        .btnSepet i {
            margin-left: 26px !important;
        }

    .MnContain {
        margin-left: 4px !important;
    }

    /* ---------- 4. MOBİL MENÜ (açılır panel) ---------- */
    .Menu nav a,
    .mobil-vid-baslik {
        font-size: 16px !important;
        padding: 14px 10px !important;
    }

    /* ---------- 5. ANA SAYFA BANNER ---------- */
    /* Negatif margin ve taşan arka planı sıfırla, dik diz.
       Görsel büyütüldü (135%) ve yukarı kaydırıldı; "Kampanyalar" butonu ve
       "Burası kazananların dünyası" (h2) yazısı mobilde gizlendi. */
    .Banner {
        flex-direction: column !important;
        min-height: auto !important;
        background-size: 120% auto !important;
        background-position: center bottom !important;
        padding: 0.5rem 0 6rem 0 !important;
        gap: 0.5rem;
    }
 

        .Banner h1 {
            width: 100% !important;
            margin: 0 !important;       /* -29vh negatif margini sil */
            text-align: left !important;
            font-size: 30px !important;
            line-height: 34px !important;
        }

            .Banner h1 strong {
                font-size: 30px !important;
                line-height: 34px !important;
                text-align: left !important;
            }

        /* Mobilde gizlenen banner öğeleri */
        .Banner .KampTt,
        .Banner h2 {
            display: none !important;
        }

    /* ---------- 6. İSTATİSTİK / KART BLOKLARI ---------- */
    /* AnaMain (açık mavi kutu) masaüstünde min-height:60vh + padding-bottom:20vh
       + pt-5; swiper'da mt-5 pt-5 + padding-bottom:50px; slide min-height:395px.
       Mobilde devasa dikey boşluk → hepsini kıs. */
    .AnaMain {
        min-height: auto !important;
        padding-top: 1.25rem !important;
        padding-bottom: 1.5rem !important;
        border-radius: 28px !important;
    }

    .swiper-container {
        margin-top: 0.5rem !important;     /* mt-5 (3rem) yerine */
        padding-top: 0 !important;         /* pt-5 (3rem) yerine */
        padding-left: 16px !important;     /* 10vw indent yerine */
        padding-bottom: 16px !important;   /* 50px yerine */
    }

    .swiper-slide {
        min-height: 230px !important;      /* 395px yerine */
        padding: 1.5rem 1.25rem !important;
    }

    /* MnTp masaüstünde -15vh ile AnaMain'in üstüne biniyor; mobilde normal akış */
    .MnTp {
        margin-top: 12px !important;
    }

    .swiper-main h1 {
        font-size: 38px !important;
        line-height: 40px !important;
    }

    .MnTp .col-md-4 {
        width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    .bgAnTitle {
        width: 100%;
    }

    .MnTp-Title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .MnTp-Title h1 {
            font-size: 24px !important;
            line-height: 32px !important;
        }

    /* Ana sayfa eğitim slider'ı: resim üstte, yazı altta */
    .AnSlider .row {
        flex-direction: column;
    }

    .AnSlider-title {
        padding: 1rem 0 !important;
    }

    .MnSlg .col-md-4 {
        text-align: center;
        margin-bottom: 16px;
    }

    /* ---------- 7. SEKME BUTONLARI (Giriş/Sepet adımları üstü) ---------- */
    .subtitle-button {
        gap: 8px;
    }

        .subtitle-button a,
        .subtitle-button p {
            width: 100% !important;
            margin-left: 0 !important;
            min-height: 48px !important;
            line-height: 44px !important;
            font-size: 15px !important;
        }

    /* ---------- 8. GİRİŞ / KAYIT FORMU ---------- */
    .sub-uyemain {
        flex-direction: column;
    }

        .sub-uyemain .col-md-6 {
            padding: 1.5rem 0 !important;
            width: 100%;
        }

    .uye-form input,
    .form-control {
        font-size: 16px !important;     /* iOS otomatik zoom'u engeller */
        height: 50px;
    }

    .sub-uyemain-btn {
        width: 100% !important;
        min-height: 50px;
        font-size: 16px !important;
    }

    /* Giriş sayfasındaki büyük görseli mobilde gizle (sadeleştir) */
    .sub-uyemain .text-center img {
        max-width: 70%;
    }

    /* ---------- 9. SEPET ADIM GÖSTERGESİ ---------- */
    .sepet-steps {
        gap: 6px !important;
        overflow-x: auto;               /* tek satır, gerekirse kaydır */
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

        .sepet-step {
            padding: 8px 14px !important;
            font-size: 12px !important;
            white-space: nowrap;
            flex: 0 0 auto;
        }

    /* ---------- 10. SEPET ÜRÜN KARTI ---------- */
    .sepet-urun-kart {
        padding: 14px !important;
        gap: 12px !important;
        flex-wrap: wrap;
    }

        .sepet-urun-img {
            width: 64px !important;
            height: 86px !important;
        }

        .sepet-urun-no {
            min-width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
        }

        .sepet-urun-adi {
            font-size: 14px !important;
        }

        .sepet-urun-sil {
            width: 40px !important;
            height: 40px !important;
        }

    /* ---------- 11. SİPARİŞ ÖZETİ KARTI ---------- */
    /* Masaüstünde sağda; mobilde tam genişlik ve içeriğin altında */
    #siparisOzeti,
    .col-md-4 {
        width: 100%;
    }

    .ozet-kart {
        padding: 18px !important;
        margin-top: 16px;
    }

    .ozet-devam-btn {
        min-height: 50px;
        font-size: 16px !important;
    }

    /* ---------- 12. GİRİŞ / TESLİMAT PANELLERİ ---------- */
    .giris-panel,
    .teslimat-panel {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

        /* "Alışverişinize devam etmeden önce" sol sütun ayracını mobilde kaldır */
        .giris-oncesi,
        .teslimat-sol {
            border-right: none !important;
            padding-right: 0 !important;
            text-align: left !important;
            margin-bottom: 16px;
            font-size: 17px !important;
        }

            .giris-oncesi .arrow,
            .teslimat-sol .arrow {
                display: none !important;   /* dik dizilimde sağ ok anlamsız */
            }

    .giris-panel .col-md-4,
    .giris-panel .col-md-8,
    .teslimat-panel .col-md-12 {
        width: 100%;
    }

    /* Giriş/teslimat input'ları */
    .giris-input,
    .ts-input,
    .adres-field {
        margin-bottom: 12px;
    }

        .giris-input input,
        .ts-input input,
        .ts-input textarea {
            font-size: 16px !important;
        }

    .d-flex.gap-3 .btn-giris-yap,
    .d-flex.gap-3 .btn-misafir {
        width: 100%;
        min-height: 50px;
    }

    /* ---------- 13. TESLİMAT: ADRES KARTI ---------- */
    /* Yatay 3 sütunu (adres | il/ilçe | butonlar) alt alta diz */
    .tes-adres-kart {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
        padding: 16px !important;
    }

        .tes-adres-col {
            padding: 0 !important;
            border-right: none !important;
            border-bottom: 1px solid #D6EEF9;
            padding-bottom: 10px !important;
        }

            .tes-adres-col:last-child {
                border-bottom: none;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-end;
                gap: 12px;
            }

    .kisisel-chip {
        width: 100%;
        justify-content: flex-start;
    }

    /* Teslimat formundaki ikili sütunlar tek sütun olsun */
    .teslimat-panel .col-md-6 {
        width: 100%;
    }

    /* ---------- 14. MODALLAR ---------- */
    .modal-dialog {
        margin: 12px !important;
    }

    .adres-modal-box {
        max-width: 94vw !important;
        padding: 22px 16px !important;
    }

    .sepetModal .modal-body {
        flex-direction: column;
    }

    /* ---------- 15. FOOTER ---------- */
    footer .col-md-2,
    footer .col-md-6,
    footer .col-md-4 {
        width: 100%;
        text-align: center;
    }

    .MenuFthr {
        justify-content: center;
        text-align: center;
    }

        .MenuFthr .col-12 {
            margin-bottom: 14px;
        }

    .Destek, .StoreIcons {
        justify-content: center;
        gap: 16px;
    }
    .copright {
        text-align: center;
        font-size: 12px;
    }
    /* ---------- 16. BİLDİRİM POPUP (ana sayfa) ---------- */
    #tpopup {
        width: 92vw !important;
        max-width: 92vw !important;
        left: 4vw !important;
    }
    /* ---------- 17. ŞUBELER (kart ızgarası) ---------- */
    /* Masaüstünde col-md-3 (4 sütun); .col-6 yüzünden mobilde 2 sütun olup
       uzun şube isimleri (örn. "TUSWORLD İSTANBUL AVRUPA") yan yana bitişiyor.
       Mobilde tek sütuna indir → her kart tam genişlik, başlık tek satır. */
    .row > div:has(> .sub-referans) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .sub-referans {
        max-width: 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 14px !important;
        padding-bottom: 8px !important;
    }
        /* Başlık tek satıra sığıyor → 80px sabit yükseklik gereksiz, kartı uzatıyor */
        .sub-referans h1 {
            white-space: normal;
            word-break: break-word;
            height: auto !important;
            min-height: 0 !important;
            margin-top: 14px !important;
        }
        /* İkonu küçült ve alt boşluğunu (2rem) kıs → kart kısalsın */
        .sub-referans img {
            margin-bottom: 0.75rem !important;
            max-width: 90px;
            width: auto;
        }
}
