/* ════════════════════════════════════════════════════════════════════
   MatchChase — MOBILE SHARED (navbar + drawer + auth + sidebar + scrollbar + layout + calendar)
   ════════════════════════════════════════════════════════════════════
   Bu dosya tüm sayfalarda ORTAK mobil kuralları taşır. Sayfa-spesifik
   kurallar ayrı dosyalarda:
   - css/mobile-mainpage.css → anasayfa fixture table
   - css/mobile-match.css    → maç inceleme (sub-tab, form, h2h, smart-stats)

   Yapı:
   - Default desktop (mobile-only HTML gizle)
   - Animations (drawer overlay fade)
   - @media (max-width: 900px) — navbar/drawer/auth/sidebar/scrollbar/calendar
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   DEFAULT (desktop dahil) — yeni mobil-only HTML element'lerini gizle
   ════════════════════════════════════════════════════════════════════ */

.mc-mobile-hamburger {
    display: none;                       /* yeni element, desktop'ta gizli — @media içinde aç */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.mc-mobile-hamburger:hover,
.mc-mobile-hamburger:focus-visible,
.mc-mobile-hamburger[aria-expanded="true"] {
    background: rgba(80, 130, 0, 0.28);
    border-color: rgba(80, 130, 0, 0.55);
    outline: none;
}
.mc-mobile-hamburger:active {
    transform: scale(0.95);
}

.mc-drawer-header {
    display: none;                       /* yeni element, desktop'ta gizli — @media içinde aç */
}
.mc-drawer-title {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.55;
}
.mc-drawer-close {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s ease;
}
.mc-drawer-close:hover,
.mc-drawer-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* mc_mainpage.js post-process'in eklediği saat span'ı (mobil-only DOM enrichment).
   Default desktop: gizli. Mobil @media içinde block + vurgu. */
.mc-fx-time-mobile {
    display: none;
}


/* ════════════════════════════════════════════════════════════════════
   ANIMATIONS (global — drawer overlay fade)
   ════════════════════════════════════════════════════════════════════ */
@keyframes mc-overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════════════
   MOBİL VIEWPORT — navbar/drawer/auth/sidebar/scrollbar/layout/calendar
   Browser anında uygular, JS beklemez → FOUC YOK
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* ───── Üst bar: 52px sticky, ince alt çizgi ───── */
    .top-navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .top-navbar-inner {
        flex-direction: row !important;     /* style.css:838 column'unu yener */
        height: 52px !important;
        padding: 0 12px !important;
        gap: 8px;
        justify-content: flex-start;        /* hamburger sol, brand flex:1 ile orta, auth sağ */
        align-items: center;
    }

    /* ───── Hamburger: order 1 (sol) ───── */
    .mc-mobile-hamburger {
        display: inline-flex;
        order: 1;
    }

    /* ───── Brand: order 2 (orta), kompakt, subtitle gizli ───── */
    .nav-brand {
        order: 2;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-width: 0;                        /* taşma engelle */
        margin: 0;
    }
    .nav-brand h1 {
        font-size: 1rem;
        letter-spacing: 0.6px;
        text-align: center;
        white-space: nowrap;
    }
    .nav-brand .mc-brand-logo {
        height: 24px;
    }
    .nav-brand .subtitle {
        display: none;                       /* "Zaman Makinesi Arayüzü" jargon, mobil değer yok */
    }

    /* ───── Auth section: order 3 (sağ), kompakt pill ───── */
    /* NOT: auth-section JS DOM move ile mobile-mode'da top-navbar-inner direct child
       olur (drawer dışında). Bu kurallar her iki konumda da geçerli. */
    .auth-section {
        order: 3;
        margin-left: 0 !important;           /* style.css:1634 margin-left: auto'yu yener */
        padding-left: 0 !important;          /* style.css:1638 padding-left'i yener */
        gap: 6px;
        flex-shrink: 0;
    }
    /* Anonim: dar ekran için sadece "Üye ol" CTA görünür */
    #auth-anonymous .auth-link:not(.auth-cta) {
        display: none;
    }
    .auth-link {
        font-size: 0.82rem;
        padding: 8px 12px !important;
        border-radius: 8px;
        line-height: 1;
    }
    /* Üye girişliyse pill kompakt */
    .auth-user-pill {
        padding: 4px 10px 4px 4px;
        font-size: 0.82rem;
    }
    .auth-user-pill .auth-username {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* ════════════════════════════════════════════════════════════════
       DRAWER — soldan slide off-canvas menü
       ════════════════════════════════════════════════════════════════ */

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 84vw;
        max-width: 320px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        overflow-x: hidden;
        background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
        padding: 0 0 32px;
        gap: 0;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.6);
        z-index: 1100;
        -webkit-overflow-scrolling: touch;
    }
    body.drawer-open .nav-menu {
        transform: translateX(0);
    }

    /* ───── Drawer overlay — pointer-events: none ile tıklamayı drawer'a aktarır ───── */
    /* NOT: backdrop-filter KULLANMA. Sticky navbar stacking context yüzünden
       drawer overlay'in arkasında kalıyor; backdrop-filter drawer'ı bulanıklaştırır. */
    body.drawer-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1099;
        pointer-events: none;                /* tıklamalar drawer'a/body'ye geçer, document handler yakalar */
        animation: mc-overlay-fade 0.22s ease;
    }

    /* Drawer açıkken body scroll lock */
    body.drawer-open {
        overflow: hidden;
        touch-action: none;
    }

    /* ───── Drawer header: başlık + kapatma × ───── */
    .mc-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(0, 0, 0, 0.25);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* ───── Drawer içi liste: dikey, 48px touch target, lig adı görünür ───── */
    .nav-horizontal-list {
        flex-direction: column;
        width: 100%;
        gap: 0;
        flex-wrap: nowrap !important;        /* style.css:923 flex-wrap'i yener */
        padding: 6px 0;
    }
    .nav-horizontal-list li {
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 0;
        border-left: 3px solid transparent;
        font-size: 0.95rem;
        color: #d8d8d8;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        cursor: pointer;
    }
    .nav-horizontal-list li:hover,
    .nav-horizontal-list li:focus-visible {
        background: rgba(255, 255, 255, 0.04);
        color: #ffffff;
        outline: none;
    }
    .nav-horizontal-list li.active {
        background: rgba(80, 130, 0, 0.14);
        border-left-color: var(--success, #5a9b00);
        color: #ffffff;
        font-weight: 600;
    }
    .nav-horizontal-list li:last-child {
        border-bottom: none;
    }

    /* ───── Lig adı (data-name attribute'undan) ───── */
    #leagues-list li::after {
        content: attr(data-name);
        color: #d8d8d8;
        font-size: 0.95rem;
        margin-left: 12px;
        flex: 1;
        text-align: left;
    }
    #leagues-list li.active::after {
        color: #ffffff;
    }
    .menu-flag {
        font-size: 1.5rem !important;        /* style.css:36 inline 1.6rem'i yener */
        margin: 0 !important;
        flex-shrink: 0;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }

    /* ───── Bölüm ayraçları: yatay çizgi (drawer'da) ───── */
    .nav-divider {
        display: block;
        width: calc(100% - 36px);
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
        margin: 10px 18px;
    }


    /* ════════════════════════════════════════════════════════════════
       DİĞER MOBİL DÜZENLEMELER
       ════════════════════════════════════════════════════════════════ */

    /* Sağ sidebar mobilde altta görünür (style.css:813-835 1250px breakpoint zaten
       column'a geçirip full-width yapıyor). Burada sadece mobil için kompaktlama. */
    .right-sidebar {
        padding: 1rem !important;            /* style.css:198 — 2rem 1.5rem → 1rem */
        gap: 1rem !important;                /* style.css:201 — 2rem → 1rem */
    }
    /* Ortak & Sponsor 250x250 banner: mobilde max 320x100 leaderboard-style */
    .right-sidebar > div:first-child > div:last-child {
        width: 100% !important;
        max-width: 320px !important;
        height: 100px !important;
        margin: 0 auto !important;
    }
    .right-sidebar > div:first-child {
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 12px !important;
    }
    /* Insight kartlar: tek sütun (style.css 1250px grid'i 360px'te 1 sütun veriyor zaten) */
    .insights-container {
        gap: 0.75rem !important;
    }
    .insight-card {
        padding: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    /* ════════════════════════════════════════════════════════════════
       KÖK FIX — scrollbar mobilde gizli
       style.css:30 `::-webkit-scrollbar { width: 10px }` global kuralı
       mobil tarayıcıda 10px klasik scrollbar zorluyor (kalıntı kenar
       şikayetinin gerçek sebebi). Mobilde swipe ile scroll var, scrollbar
       görünmesine gerek yok.
       ════════════════════════════════════════════════════════════════ */
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    html, body {
        scrollbar-width: none;               /* Firefox */
        -ms-overflow-style: none;            /* legacy IE/Edge */
    }

    /* JS yüklenene kadar sidebar görünmesin — alt-footer flash'ı önler.
       main.js requestAnimationFrame ile mc-app-loading class'ı kaldırır,
       o noktada ana içerik render olmuş olur ve sidebar normal akışta belirir. */
    body.mc-app-loading .right-sidebar {
        visibility: hidden;
    }

    /* Workspace + main content + AGRESİF overflow zorlaması.
       html, body 100% genişlik + overflow-x: hidden — telefon tarayıcısında 4-5 px
       kalıntı varsa kesin kapatır. Kök sebebi (hangi element taşıyor) bulamadık,
       defansif yaklaşım. */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #app {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    .workspace-container {
        padding: 0;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    .main-content {
        padding: 0.75rem;                    /* style.css:895 0.5rem'i biraz arttırır */
        gap: 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Anon CTA banner: kompakt, okunaklı */
    .mc-anon-banner-text strong {
        font-size: 0.95rem;
    }
    .mc-anon-banner-desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .mc-anon-banner-btn {
        font-size: 0.85rem;
        padding: 6px 14px;
    }


    /* ════════════════════════════════════════════════════════════════
       FAZ 2 — ALAN D: ANASAYFA
       Calendar strip — taşma + yükseklik kompaktlama
       Mainpage.js inline style'larını !important ile yener
       ════════════════════════════════════════════════════════════════ */

    /* Container: padding ve margin azalt */
    .mc-calendar-strip {
        padding: 8px 6px !important;        /* mainpage.js:196 — 14px 18px → 8px 6px */
        margin-bottom: 10px !important;
    }

    /* Üst satır (ay + Bugün): margin-bottom kompakt */
    .mc-calendar-strip > div:first-child {
        margin-bottom: 6px !important;       /* mainpage.js:197 — 12px → 6px */
        gap: 6px;
    }

    /* Hafta okları: 26px (30 → 26), kompakt font */
    .mc-week-nav-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.7rem !important;
    }

    /* Ay etiketi: kompakt font */
    .mc-month-label {
        font-size: 0.9rem !important;
    }

    /* "Bugün" butonu: kompakt */
    .mc-today-btn {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        letter-spacing: 0.3px !important;
    }
    .mc-today-btn i {
        font-size: 0.6rem !important;
        margin-right: 3px !important;
    }

    /* 7 gün satırı: gap kapat, taşmayı önle */
    .mc-calendar-strip > div:last-child {
        gap: 2px !important;
    }

    /* Her gün hücresi: min-width sıfır + flex:1 → 7 hücre eşit paylaşır, taşma yok */
    .mc-cal-day {
        min-width: 0 !important;             /* mainpage.js:185 — 56px MİN-WIDTH'i sıfırla */
        flex: 1 1 0 !important;              /* eşit paylaş */
        padding: 5px 2px !important;         /* mainpage.js:185 — 8px 0 → 5px 2px */
    }

    /* Gün adı (PZT, SAL...): kompakt */
    .mc-cal-day > span:first-child {
        font-size: 0.58rem !important;       /* mainpage.js:188 — 0.7rem → 0.58rem */
        letter-spacing: 0.5px !important;
    }

    /* Gün numarası (4, 5, 6...): kompakt */
    .mc-cal-day > span:nth-child(2) {
        font-size: 1.05rem !important;       /* mainpage.js:189 — 1.35rem → 1.05rem */
        margin-top: 1px !important;
    }


    /* ════════════════════════════════════════════════════════════════
       SHARED TABLO + UI ELEMENTS (style.css'ten taşındı 2026-05-12)
       Tüm view'lar tarafından kullanılır — mainpage / lig / takım / maç.
       ════════════════════════════════════════════════════════════════ */

    /* Data table — global mobil padding/font */
    .data-table th, .data-table td {
        padding: 0.4rem 0.4rem;
        font-size: 0.75rem;
        white-space: normal;
        word-break: break-word;
    }

    /* hide-mobile sütunları — gizleme değil, kırpma + soft */
    .hide-mobile {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        font-size: 0.7rem;
        opacity: 0.8;
    }

    /* Fixtures-table — table-layout + skor simetrisi (ev sağa yaslı) */
    .fixtures-table {
        table-layout: fixed;
    }
    .fixtures-table td.home-team-cell {
        text-align: right !important;
    }

    /* Player avatar — global mobil boyut */
    .player-avatar {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.75rem;
    }

    /* ════════════════════════════════════════════════════════════════
       SEO "Hakkında" + "Önemli Tarihsel Sinyaller" kutuları (TÜM sayfa tipleri)
       Kullanıcı emri 2026-06-01: zemin full-bleed (sahadaki gibi ekran kenarına yasla),
       sağ-sol + alt-üst 12px padding, font oyuncu yazısıyla aynı (0.85rem), kutular arası 6px.
       Emoji ikonlar HTML'den kaldırıldı (app.js/LeagueDashboard/player/official view + core.js).
       Desktop dokunulmaz (bu @media 900px ile sınırlı). 100vw mobilde scrollbar gizli → taşma yok.
       ════════════════════════════════════════════════════════════════ */
    .mc-seo-about-card,
    .mc-seo-signals-block {
        width: 100vw !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 12px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
    }
    .mc-seo-about-block,
    .mc-seo-signals-block {
        margin-bottom: 6px !important;            /* kutular arası 6px */
    }
    .mc-seo-about-text,
    .mc-seo-about-title,
    .mc-seo-about-subtitle,
    .mc-seo-signals-block h2,
    .mc-seo-signals-block h3,
    .mc-seo-signals-intro,
    .mc-seo-signals-block li {
        font-size: 0.85rem !important;           /* oyuncu yazısıyla aynı */
    }
}