/* ════════════════════════════════════════════════════════════════════
   MatchChase — MOBILE MATCH (maç inceleme sayfası — H2H + ortak)
   ════════════════════════════════════════════════════════════════════
   2026-05-14 modülerleşme: Maç Günü kuralları mobile-match-day.css'e ayrıldı.
   Bu dosya: H2H sayfası + ortak sub-tab + carousel + nav (h2h, form, oranlar,
   karşılaştırma sekmeleri için).

   SCOPE:
     - Sub-tab bar 4+4 grid (.stats-tabs.h2h-inner-tabs)
     - Form/H2H fikstür satır rengi (.mc-form-row-in/out)
     - İstatistik & Analiz carousel (.mc-form-analytics-carousel)
     - Smart Stats Birleşik carousel (.mc-ss-merged-carousel)
     - Maç künyesi header (mc-mh-header-card)
     - H2H sub-tab grid (12-col, filtre + motor)
     - Maç global nav (önceki/sonraki butonları)
     - Tab dengeleri (margin-bottom 6px standardı)

   İLGİLİ VIEW DOSYALARI:
     - mc_match_h2h.js (sub-tab + 3 wrapper + nav menü)
     - mc_match_form.js (Ev/Dep Form fikstür + carousel)
     - mc_match_compare.js (Karşılaştırma carousel)
     - mc_match_smart_stats.js (Smart Stats merged carousel)
     - mc_match_header.js (maç künyesi)
     - mc_stats_renderer.js (.mc-form-analytics-carousel class hook)

   Pattern memory'leri:
     - project_oturum_2026_05_12_mac_mobil_3_konu (sub-tab 4+4 + form pattern + carousel)
     - project_oturum_2026_05_12_h2h_4motor_carousel (4 motor carousel + nth-child order)
     - project_oturum_2026_05_13_h2h_mobil_komple (11 tur kapsamlı revize)
     - project_oturum_2026_05_13_14_mac_sayfasi_mobil_komple (chevron + nav + tab dengeleri)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* 1) Sub-tab bar (8 buton): 4 üst + 4 alt grid */
    body.mc-mobile .stats-tabs.h2h-inner-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0 !important;
        width: 100vw !important;               /* full-bleed: nav ekran kenarına yaslı (kullanıcı 2026-06-01) */
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
        margin-bottom: 6px !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }
    body.mc-mobile .stats-tabs.h2h-inner-tabs .tab-btn {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.7rem 0.15rem !important;
        font-size: 0.75rem !important;         /* 0.65→0.75: okunur (full-bleed ile buton genişledi) */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 0 !important;
    }

    /* 2) Form / H2H fikstür satırı: analiz dahil = soft yeşil, analiz dışı = soft kırmızı */
    body.mc-mobile table.mc-league-fixtures-table tbody tr.mc-form-row-in {
        background-color: rgba(34, 197, 94, 0.10) !important;
        box-shadow: inset 3px 0 0 #22c55e;
    }
    body.mc-mobile table.mc-league-fixtures-table tbody tr.mc-form-row-out {
        background-color: rgba(239, 68, 68, 0.08) !important;
        box-shadow: inset 3px 0 0 #ef4444;
    }

    /* Form / H2H fikstür tablosu — full-bleed (kullanıcı 2026-06-01: önceki bölümler gibi sağa-sola yasla,
       toparlanması için sütunlara ~22px yer açar). Maç sayfası scope (#h2h-view-container) → lig fikstürü
       (LeagueDashboard) ETKİLENMEZ. */
    body.mc-mobile #h2h-view-container .data-table-container {
        width: 100vw !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
    }
    /* Oranlar tab — bookmaker kartları (odds-multi-grid) full-bleed + sağ-sol 12px
       (kullanıcı 2026-06-01: beyaz zeminleri kenara yasla). Estetik baştan-tasarım sonraki tur. */
    body.mc-mobile #h2h-view-container .odds-multi-grid {
        width: 100vw !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
    /* İç kenar boşluğu — Tarih (ilk sütun) soldan 12px, ikon sütunları (chevron+bar, son) sağdan 12px
       (kullanıcı 2026-06-01: tablo zemini kenara yaslı kalsın, içerik 12px içeride). */
    body.mc-mobile #h2h-view-container .mc-league-fixtures-table th:first-child,
    body.mc-mobile #h2h-view-container .mc-league-fixtures-table td:first-child {
        padding-left: 12px !important;
        text-align: left !important;     /* hücre center idi → padding-left görünmüyordu; sola hizala (kullanıcı "soldan 12") */
        width: 76px !important;          /* 62px sabitti → geniş telefonda büyüyen font + 12px padding sığmıyordu, "Paz, 18:00" kayıyordu. Ev/Dep otomatik daralır (table-layout:fixed). Kullanıcı 2026-06-01 */
    }
    body.mc-mobile #h2h-view-container .mc-league-fixtures-table th:last-child,
    body.mc-mobile #h2h-view-container .mc-league-fixtures-table td:last-child {
        padding-right: 12px !important;
        width: 34px !important;          /* dar 18px sütunda ikon padding'i taşıyordu — genişlet */
        text-align: right !important;    /* istatistik ikonu sağa hizalı, padding ile 12px boşluk */
    }

    /* 3) İstatistik & Analiz (Form + Karşılaştırma + DC/SDC/Intersection) — yatay swipe carousel
       Sıra: 1X2 → Gol Marketleri → Beklentiler → Dakikalar/Çarpışma grup veya Skor Beklentisi */
    body.mc-mobile .mc-form-analytics-carousel {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        /* Full-bleed: kenara yasla (kullanıcı 2026-06-01) */
        width: 100vw !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.mc-mobile .mc-form-analytics-carousel::-webkit-scrollbar {
        display: none;
    }
    body.mc-mobile .mc-form-analytics-carousel > div {
        display: contents !important;
    }
    body.mc-mobile .mc-form-analytics-carousel > div > div {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        margin: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
    body.mc-mobile .mc-form-analytics-carousel > div:nth-child(1) > div:nth-child(1) { order: 1 !important; }
    body.mc-mobile .mc-form-analytics-carousel > div:nth-child(2) > div:nth-child(1) { order: 2 !important; }
    body.mc-mobile .mc-form-analytics-carousel > div:nth-child(1) > div:nth-child(2) { order: 3 !important; }
    body.mc-mobile .mc-form-analytics-carousel > div:nth-child(2) > div:nth-child(2) { order: 4 !important; }
    body.mc-mobile .mc-form-analytics-carousel .mc-fa-dakikalar-group > div:first-child {
        margin-top: 0 !important;
    }

    /* 4) Smart Stats — Birleşik Sonuç carousel
       3 ss-section: Maç Sonu Birleşik / Gol Birleşik / İY Gol Birleşik. HTML sırası = swipe sırası,
       nth-child order kuralına gerek yok. */
    body.mc-mobile .mc-ss-merged-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.mc-mobile .mc-ss-merged-carousel::-webkit-scrollbar {
        display: none;
    }
    body.mc-mobile .mc-ss-merged-carousel > .ss-section {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 5) Maç künyesi (header card) — yan blokları 108 px, orta blok flex:1 (sezon+tarih kompakt)
       Hedef: 108+orta+108 + 10 gap + 12 padding = ~375 viewport (orta ~137 px)
       align-items: center → orta blok yan logolarla dikey simetrik
       Inline style'ları ezmek için !important ZORUNLU */
    body.mc-mobile .mc-mh-header-card {
        padding: 10px 12px !important;        /* sol-sağ 6→12: TD kutusu (= team bloğu) kenara 12px (kullanıcı 2026-06-01) */
        gap: 5px !important;
        margin-bottom: 12px !important;
        align-items: stretch !important;
        width: 100vw !important;              /* full-bleed: beyaz zemin sağa-sola yaslı (sahadaki gibi) */
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 0 !important;          /* yumuşatılmış köşeler düzleştirildi */
        box-sizing: border-box !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team {
        width: 108px !important;
        min-width: 0 !important;
        flex: 0 0 108px !important;
    }
    body.mc-mobile .mc-mh-team-logo {
        height: 88px !important;
        width: 88px !important;
        padding: 4px !important;
        order: 0 !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(1) {
        /* Takım adı satırı (DOM'da logo'dan sonra ilk div) — order:2 logo+form altına */
        font-size: 0.95rem !important;
        margin: 6px 0 6px 0 !important;
        order: 2 !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(2) {
        /* Menajer kartı — order:3 en altta, içerik ortalı, shrink etmesin (içerik uzar) */
        padding: 6px !important;
        order: 3 !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        height: auto !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(2) > div {
        font-size: 0.7rem !important;
        text-align: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Menajer ismi satırı (1. div) — TEK SATIR, uzun isim "…" ile kesilir (kullanıcı 2026-06-01:
       "14 karakterden sonra ..."; wrap olup aşağı düşmesi header'ı bozuyordu).
       Tam isim <a> linkinde korunur (SEO + tıklama bozulmaz). */
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(2) > div:nth-of-type(1) {
        white-space: nowrap !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(2) > div:nth-of-type(1) > a,
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(2) > div:nth-of-type(1) > span {
        display: inline-block !important;
        max-width: 72px !important;          /* ~14 karakter; üstü text-overflow ellipsis ile … */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: bottom !important;
    }
    /* TD record span'leri (desktop/mobile toggle) — span block ve içerik tdHome'a tam yansısın */
    body.mc-mobile .td-rec-desktop, body.mc-mobile .td-rec-mobile {
        width: 100% !important;
    }
    /* TD record (#td-record-home/away) — mobile'da 4 satır, desktop'ta 2 satır eski format */
    body.mc-mobile .td-rec-desktop { display: none !important; }
    body.mc-mobile .td-rec-mobile { display: block !important; }
    body.mc-mobile .td-rec-mobile > div {
        line-height: 1.35 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(3) {
        /* Form ikon satırı (opsiyonel) — order:1 logo'nun hemen altında */
        gap: 3px !important;
        margin-top: 6px !important;
        order: 1 !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-team > div:nth-of-type(3) > div {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.6rem !important;
    }
    body.mc-mobile .mc-mh-header-card > .mc-mh-center {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        justify-content: center !important;
    }
    /* Sezon + tarih font küçült, mobile kısa versiyonları aç, desktop uzunları gizle */
    body.mc-mobile .mc-mh-center > .mc-mh-season {
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
    }
    body.mc-mobile .mc-mh-center .mc-mh-week-full { display: none !important; }
    body.mc-mobile .mc-mh-center .mc-mh-week-short { display: inline !important; }
    body.mc-mobile .mc-mh-center > .mc-mh-date-desktop { display: none !important; }
    body.mc-mobile .mc-mh-center > .mc-mh-date-mobile {
        display: block !important;
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
    }

    /* 6) Skor tabelası (3:3 siyah kutu) + İY tabelası — 0.6× boyut (yarı × 1.2) mobile */
    body.mc-mobile .mc-mh-center > .mc-mh-score {
        gap: 10px !important;
        margin-bottom: 5px !important;
    }
    body.mc-mobile .mc-mh-center > .mc-mh-score > div {
        gap: 6px !important;
    }
    body.mc-mobile .mc-mh-center > .mc-mh-score > div > div:nth-of-type(1),
    body.mc-mobile .mc-mh-center > .mc-mh-score > div > div:nth-of-type(3) {
        min-width: 34px !important;
        height: 34px !important;
        padding: 6px !important;
        border-width: 1px !important;
        border-radius: 4px !important;
    }
    body.mc-mobile .mc-mh-center > .mc-mh-score > div > div:nth-of-type(1) > span,
    body.mc-mobile .mc-mh-center > .mc-mh-score > div > div:nth-of-type(3) > span {
        font-size: 1.56rem !important;
    }
    body.mc-mobile .mc-mh-center > .mc-mh-score > div > div:nth-of-type(2) {
        font-size: 1.32rem !important;
        padding-bottom: 4px !important;
    }
    body.mc-mobile .mc-mh-center > .mc-mh-ht {
        font-size: 0.76rem !important;
        padding: 3px 10px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    /* 7) Üst karttaki Stadyum/Hakem kartı — mobile'da KUTUSUZ stil
       Tarih/saatin altına satır olarak gelir, gri zemin/border/padding/radius YOK */
    body.mc-mobile .mc-mh-center > .mc-mh-venue-card {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 2px !important;
        gap: 2px !important;
    }
    body.mc-mobile .mc-mh-center > .mc-mh-venue-card > div {
        font-size: 0.7rem !important;
        font-weight: 500 !important;
    }

    /* 8) H2H sub-tab bar (.hover-underline-menu) — 7 tab tek satırda taşıyordu (95 px taşma)
       B alternatifi: 2 satır mantıksal gruplama.
       Satır 1: Filtre (Ev / Tüm / Dep) — 4'er sütun × 3 tab = 12
       Satır 2: Motor (SDC / DC / SS / Intersection) — 3'er sütun × 4 tab = 12
       Active state opacity runtime değişiyor (active=1, passive=0.6) — DOKUNMA
       :has() ile yalnızca H2H sub-bar'ı hedeflenir (smart stats vb. kendi hover-underline-menu'sü etkilenmez) */
    body.mc-mobile .hover-underline-menu:has(#btn-h2h-ev) {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        row-gap: 6px !important;
        column-gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        overflow: visible !important;
    }
    /* Satır 1: Filtre */
    body.mc-mobile #btn-h2h-ev    { grid-column: 1 / span 4 !important; grid-row: 1 !important; }
    body.mc-mobile #btn-h2h-all   { grid-column: 5 / span 4 !important; grid-row: 1 !important; margin-left: 0 !important; }
    body.mc-mobile #btn-h2h-dep   { grid-column: 9 / span 4 !important; grid-row: 1 !important; }
    /* Satır 2: Motor */
    body.mc-mobile #btn-h2h-sdc           { grid-column: 1 / span 3 !important;  grid-row: 2 !important; }
    body.mc-mobile #btn-h2h-dixoncoles    { grid-column: 4 / span 3 !important;  grid-row: 2 !important; }
    body.mc-mobile #btn-h2h-smartstats    { grid-column: 7 / span 3 !important;  grid-row: 2 !important; }
    body.mc-mobile #btn-h2h-intersection  { grid-column: 10 / span 3 !important; grid-row: 2 !important; }
    /* Tab itemleri kompakt — Dixon-Coles Stats / Intersection Stats sığsın (sadece H2H sub-bar'a) */
    body.mc-mobile .hover-underline-menu:has(#btn-h2h-ev) > a,
    body.mc-mobile .hover-underline-menu:has(#team-form-analyze-btn) > a {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 6px 4px !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    /* 9) Maç global nav (önceki/sonraki) — mobilde takım ismi yerine sade etiket
       + breadcrumb (Ana Sayfa › LaLiga › ...) GİZLE — bilgi zaten künyede var, 2. satıra
       wrap'liyor + header'a yakın boşluk için margin 16 → 6. Desktop dokunulmaz. */
    body.mc-mobile #match-global-nav {
        margin-bottom: 6px !important;
        flex-wrap: nowrap !important;
    }
    body.mc-mobile #match-global-nav > nav {
        display: none !important;
    }
    body.mc-mobile .match-global-nav-btn {
        max-width: none !important;
        flex: 1 1 0 !important;
        justify-content: center !important;
        white-space: nowrap !important;
        padding: 7px 8px !important;
    }
    body.mc-mobile .match-global-nav-btn .mc-nav-team-label {
        display: none !important;
    }
    body.mc-mobile .match-global-nav-btn .mc-nav-short-label {
        display: inline !important;
        white-space: nowrap !important;
    }
    /* Nav'ın hemen altındaki boş placeholder div'in margin-bottom:20px'i mobilde 26px
       gereksiz boşluk yaratıyor. Direct sibling — margin:0 + height:0 + sıfır padding.
       Eğer ileride bu div içerik alırsa zaten height yeniden büyür (height auto override). */
    body.mc-mobile #match-global-nav + div {
        margin: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Tab dengeleri — kafasına göre farklı margin'ler yerine standart 6px (nav-header ile aynı):
       - Smart Stats sub-bar (Ev Sahibi Maçları/İstatistik ve Analiz): mb 25 → 6 */
    body.mc-mobile .hover-underline-menu {
        margin-bottom: 6px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ÇOK DAR CİHAZLAR (≤359px — eski iPhone SE / küçük Android)
   Kök font clamp 320px civarında MIN tabanına oturuyor (okunabilirlik için).
   Buton genişliği ekran÷4 ile küçülmeye devam ettiğinden en uzun nav yazısı
   ("Deplasman Kadro") butona tam sığmayıp ucundan kırpılıyordu. Sadece bu dar
   bantta nav fontu hafif küçült. 360px ve üstü ETKİLENMEZ. (multi-viewport test 2026-06-01)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
    body.mc-mobile .stats-tabs.h2h-inner-tabs .tab-btn {
        font-size: 0.68rem !important;
    }
}
</content>