/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */
/* Tablet / small desktop: compress the header so it never overflows horizontally */
@media (max-width: 1280px) {
    .navbar-container {
        gap: 0.8rem;
        padding: 0.8rem 1rem;
    }
    .nav-links a {
        padding: 0.5rem 0.6rem;
        font-size: 0.88rem;
    }
    .global-search-container {
        width: 200px;
    }
}

/* 1180px: bildirim zili eklendikten sonra sekmeler + arama + zil + hesap
   butonu tek satıra sığmıyor; sekmeler alt satıra iner (eskiden 1100px'ti). */
@media (max-width: 1180px) and (min-width: 769px) {
    .navbar-container {
        flex-wrap: wrap;
    }
    .nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Ligler header'ı iki sütun (başlık | açıklama); dar ekranda alt alta
       geçer, aksi hâlde iki sütun da okunmayacak kadar daralıyor. */
    .leagues-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        padding: 1.5rem 1.4rem;
    }
    .leagues-header-container .leagues-header-desc {
        flex: none;
        max-width: 100%;
    }
    .leagues-header-title {
        white-space: normal;
    }

    /* Açılır menü. Satırlar 0.7rem/1rem dolgu + 0.25rem aralıkla ~53px tutuyor
       ve dört sekme ekranın üçte birini kaplıyordu; 0.5rem/0.7rem ile ~42px'e
       (dokunma hedefi hâlâ satır genişliğinde) iner. */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        backdrop-filter: blur(16px);
        flex-direction: column;
        padding: 0.4rem 0.7rem 0.55rem;
        border-bottom: 1px solid var(--border-glass);
        gap: 0.1rem;
        z-index: 999;
        /* Sekme sayısı artarsa menü ekrandan taşmasın (100dvh: mobil tarayıcı
           çubuğu açıkken 100vh sayfanın altını erişilemez yapıyor). */
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
    }
    .nav-links.mobile-open {
        display: flex;
    }
    .nav-links a {
        width: 100%;
        padding: 0.5rem 0.7rem;
        border-radius: var(--radius-sm);
        border-bottom: none;   /* alttaki .active kuralı için */
    }
    /* Aktif sekme: masaüstündeki 2px'lik alt çizgi burada satır TAM GENİŞLİK
       olduğu için menüyü ikiye bölen uzun bir çizgiye dönüşüyordu. Dikey
       listede doğru sinyal sol kenar vurgusu + hafif zemin. */
    .nav-links a.active {
        border-bottom: none;
        border-left: 3px solid var(--color-primary);
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        padding-left: calc(0.7rem - 3px);
    }

    /* Mobil header: TEK SATIR (kullanıcı geri bildirimi 2026-08-07).
       Önce 2 satırdı (~94px) — [logo ..... ☰] / [arama][tema][zil][kullanıcı] —
       ve header sticky olduğu için o yükseklik her sayfada duruyordu.
       Yeni düzen: [logo ....... arama tema zil kullanıcı ☰] → ~52px. */
    .navbar-container {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.8rem;
        position: relative;
    }
    .brand-logo {
        order: 1;
        margin-right: auto;
        font-size: 1rem;
        gap: 0.4rem;
        min-width: 0;
        flex: 0 1 auto;
    }
    .brand-logo .logo-icon { font-size: 1.2rem; }
    /* Aktif kullanıcı rozeti mobilde gizli: tek satırda ~60px yer tutuyor ve
       taşıdığı bilgi kritik değil (masaüstünde yerinde duruyor). */
    .online-users-badge { display: none; }

    .mobile-menu-btn {
        display: block;
        order: 3;
        flex-shrink: 0;
        padding: 0.3rem 0.55rem;
        font-size: 1.15rem;
    }
    .nav-links { order: 4; } /* açılır menü — zaten position:absolute */

    .nav-right {
        order: 2;
        width: auto;
        flex: 0 0 auto;
        flex-wrap: nowrap;   /* arama + tema + zil + kullanıcı TEK satır */
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem;
    }
    /* 38px → 34px: dört kontrol + kullanıcı hapı + hamburger 360px genişlikte
       de tek satıra sığmalı. */
    .nav-right .theme-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .login-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.72rem;
        letter-spacing: 0.02em;
    }

    /* Arama KAPALI (varsayılan). Kutu; tema, zil ve hesap butonlarıyla aynı
       satırı paylaşınca ~140px'e sıkışıyor, öneri listesi de o daracık
       genişlikte çiziliyordu. Artık kutu yerine tek bir ikon buton duruyor. */
    .global-search-container {
        display: none;
    }
    .nav-right .theme-toggle-btn { order: 2; flex-shrink: 0; }
    .nav-right .notif-container { order: 3; flex-shrink: 0; }
    .nav-right .user-dropdown-container { order: 4; flex-shrink: 0; }
    /* .theme-toggle-btn sınıfını paylaştığı için bu kural ondan SONRA ve en az
       onun kadar özgül olmalı, yoksa arama butonu da order:2 alır. */
    .nav-right .mobile-search-btn {
        display: inline-flex;
        order: 0;
        margin-right: auto;  /* satırın soluna yasla, diğerleri sağda kalsın */
        flex-shrink: 0;
    }

    /* Arama AÇIK: kutu navbar satırının tamamını kaplar, diğer kontroller
       satırdan çıkar; kapatınca (X / ESC / bir sonuca gidince) geri gelirler.
       Tek satırlı header'da marka ve hamburger de çekilmeli — yoksa input
       ~140px'e sıkışır (iki satırlı düzende bu sorun yoktu, kutunun kendi
       satırı vardı). */
    body.mobile-search-open .brand-logo,
    body.mobile-search-open .mobile-menu-btn,
    body.mobile-search-open .nav-right .theme-toggle-btn,
    body.mobile-search-open .nav-right .notif-container,
    body.mobile-search-open .nav-right .user-dropdown-container {
        display: none;
    }
    body.mobile-search-open .nav-right {
        flex: 1 1 auto;
        width: 100%;
    }
    body.mobile-search-open .global-search-container {
        display: block;
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
    body.mobile-search-open .global-search-container input {
        padding-right: 2.6rem;  /* metin X butonunun altına kaçmasın */
    }
    body.mobile-search-open .mobile-search-close {
        display: flex;
    }

    /* Öneri kutusu arama input'unun tam altına, container genişliğinde. */
    .search-dropdown-menu {
        left: 0;
        right: auto;
        width: 100%;
    }

    /* iOS Safari, <16px font'lu bir input'a odaklanınca sayfayı otomatik
       zoom'lar (arama + tüm auth formları 14px idi). 16px bunu engeller. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Footer nav linkleri ~21px'ti (dokunma hedefi küçük). Dikey dolgu ile
       ~38px'e çıkar; satır boşluğunu kısarak yükseklik dengelenir. */
    .footer-nav-list {
        gap: 0.15rem !important;
    }
    .footer-nav-list a {
        padding: 0.35rem 0;
    }

    .games-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 1rem;
    }
    /* Mobil LİSTE görünümü (mobilde varsayılan): eski kural her kartı dikey ortalı
       ~274px'e şişiriyordu (11 kart ~4700px sayfa) ve artık olmayan sınıfları
       (.game-icon-wrapper / .play-btn) hedefliyordu. Kompakt yatay grid: ikon solda,
       başlık + 2 satıra kırpılmış açıklama ortada, "Oyna" sağda → kart ~80px'e iner.
       Kullanıcı kart görünümüne geçerse aşağıdaki .view-card bloğu devreye girer. */
    #games-menu.view-list .game-menu-card {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 0.8rem;
        padding: 0.7rem 0.85rem !important;
        min-height: 0 !important;
        text-align: left !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    /* Kategori/mod rozet satırı mobilde gizli — dikey yer kazandırır. */
    #games-menu.view-list .game-menu-card .game-card-header {
        display: none !important;
    }
    #games-menu.view-list .game-menu-card .game-card-icon-container {
        grid-column: 1;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        font-size: 1.2rem !important;
    }
    #games-menu.view-list .game-menu-card .game-card-content {
        grid-column: 2;
        min-width: 0;              /* metnin kırpılabilmesi için */
        flex-grow: 0;
    }
    #games-menu.view-list .game-menu-card h3,
    #games-menu.view-list .game-menu-card .game-card-title {
        font-size: 1.02rem !important;
        margin: 0 0 0.15rem 0 !important;
        text-align: left !important;
    }
    #games-menu.view-list .game-menu-card p,
    #games-menu.view-list .game-menu-card .game-card-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-align: left !important;
    }
    #games-menu.view-list .game-menu-card .game-card-footer {
        grid-column: 3;
        margin: 0 !important;
        flex-shrink: 0;
    }
    #games-menu.view-list .game-menu-card .play-action-btn {
        font-size: 0.66rem !important;
        letter-spacing: 0.5px;
    }

    /* Mobil KART görünümü: masaüstündeki 290px'lik ızgara telefonda tek sütuna
       düşüp sayfayı uzatıyordu → iki sütunlu kompakt kart. Rozet satırı burada da
       gizli (dar kartta alt satıra kayıyordu), tıklama alanı kartın tamamı. */
    #games-menu.view-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    #games-menu.view-card .game-menu-card {
        min-height: 0;
        padding: 0.9rem 0.8rem;
    }
    #games-menu.view-card .game-card-header {
        display: none;
    }
    #games-menu.view-card .game-card-icon-container {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
        margin-bottom: 0.6rem;
    }
    #games-menu.view-card .game-card-title {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
    }
    #games-menu.view-card .game-card-description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.74rem;
        line-height: 1.35;
        margin-bottom: 0.6rem;
    }
    #games-menu.view-card .play-action-btn {
        font-size: 0.64rem;
        letter-spacing: 0.5px;
    }

    /* Görünüm seçici: mobilde etiket solda, hap butonlar sağda; dokunma hedefi
       ~36px'in altına inmesin diye dikey dolgu korunur (font küçültülmez). */
    .games-view-toolbar {
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }
    .games-view-btn {
        padding: 0.45rem 0.85rem;
    }

    /* Oyun arenası hero'su mobilde ~350px'ti: dolgu/başlık/stat kartlarını
       küçült, ~230px'e indir. */
    .games-header-container {
        gap: 1rem !important;
        padding: 1.25rem 1.3rem !important;
        margin-bottom: 1.25rem !important;
    }
    .games-header-title {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    .games-header-tagline {
        margin-bottom: 0.5rem !important;
    }
    .games-header-container .games-header-desc {
        font-size: 0.86rem;
        line-height: 1.4;
    }
    .games-header-stats {
        gap: 0.8rem !important;
    }
    .dashboard-stat-card {
        padding: 0.7rem 0.9rem !important;
        gap: 0.7rem !important;
    }
    .dashboard-stat-card .stat-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.05rem !important;
    }
    .dashboard-stat-card .stat-card-value {
        font-size: 1.35rem !important;
    }

    /* Footer mobilde çok büyüktü. Nav bölümlerini, dolguları ve dikey boşlukları sıkıştır. */
    .footer-layout {
        padding: 0.9rem 1rem !important;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem 1rem !important;
        padding-bottom: 0.6rem !important;
    }
    .footer-col-brand {
        grid-column: 1 / -1 !important;
        gap: 0.3rem !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .footer-brand-desc {
        display: none !important;
    }
    /* Marka sütununun alt satırını taşıyan sarmalayıcı mobilde ARADAN ÇEKİLİR:
       burada marka sütunu zaten row/wrap ve öğeleri kendisi yerleştiriyor —
       sarmalayıcı kalsa araya fazladan bir satır sokuyordu. */
    .footer-brand-meta {
        display: contents !important;
    }
    .footer-col-title {
        margin-bottom: 0.3rem !important;
        font-size: 0.72rem !important;
    }
    /* Masaüstünde liste çok sütunlu bir ızgara (views.css); mobilde .footer-grid
       zaten iki sütun olduğu için bölümü BİR KEZ DAHA bölmek etiketleri
       kırpardı — tek sütuna geri dön. */
    .footer-nav-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }
    .footer-nav-list a {
        font-size: 0.78rem !important;
        padding: 0.1rem 0 !important;
    }

    /* Ana sayfa: hero dolgusunu, bölüm başlıklarını ve özellik kartlarını
       küçült — boşluk israfını azalt. */
    .hero-section {
        padding: 1.5rem 1.25rem !important;
    }
    .stats-grid {
        padding: 1.25rem 1rem 1.5rem !important;
    }
    .home-sub-header {
        margin-bottom: 1.25rem !important;
    }
    .home-sub-header h2 {
        font-size: 1.6rem !important;
    }
    .home-sub-header p {
        font-size: 0.9rem !important;
    }
    /* Özellik (intro) kartları: oyun kartlarıyla aynı kompakt yatay düzen —
       ikon solda, başlık + 2 satır açıklama + CTA sağda. */
    .intro-grid {
        gap: 0.8rem !important;
    }
    .intro-card {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.9rem;
        row-gap: 0.15rem;
        align-items: center;
        padding: 0.9rem 1rem !important;
        text-align: left !important;
    }
    .intro-card-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
        margin: 0 !important;
    }
    .intro-card h3 {
        grid-column: 2;
        margin: 0 !important;
        font-size: 1.05rem !important;
        text-align: left !important;
    }
    .intro-card p {
        grid-column: 2;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }
    .intro-card .intro-cta {
        grid-column: 2;
        margin-top: 0.15rem !important;
    }

    /* Oyun içindeyken (mobil) ana navbar'ı tamamen gizle: oyun ekrana daha iyi
       sığsın. Çıkış/geri ve oyun butonları zaten oyun arena başlığında
       (.game-arena-header-bar) durduyor; skor/seri de orada tekrarlanıyor,
       navbar'a ihtiyaç yok. Reclaim edilen ~65px'i oyuna ver. */
    body.game-active .navbar-header {
        display: none !important;
    }
    body.game-active .main-content {
        height: 100vh !important;
        height: 100dvh !important;
    }
    /* Footle serbest-kaydırma modunda yükseklik zaten auto; navbar gizli kalır. */
    body.game-active.footle-page-scroll .main-content {
        height: auto !important;
    }
}

/* DIFFICULTY: MEDIUM */
.difficulty-card.medium:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.05), 0 0 15px rgba(245, 158, 11, 0.05);
}
.difficulty-card.medium::before {
    background: radial-gradient(circle at 10% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
}
.difficulty-card.medium:hover::before {
    opacity: 1;
}
.medium:hover .difficulty-card-name {
    color: var(--color-warning);
}
.medium:hover .arrow-indicator {
    color: var(--color-warning);
}

/* COMPARE LANDING/STARTUP SCREEN
   8 kategori kartı mobilde ekrana sığmıyordu (kartlar 1.2rem dolgulu + 40px
   ikon + iri başlık = ~4 satır × 78px). Başlık bloğu ve kartlar sıkıştırıldı;
   kart yüksekliği artık ikonun kendisiyle sınırlı. */
.compare-landing {
    max-width: var(--content-narrow);
    margin: 0.8rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* Compare Landing Top Bar & Mode Switcher */
.compare-landing-top-bar {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.2rem;
}

.compare-back-btn {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
}

.compare-mode-selector {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 0.3rem;
    margin-bottom: 0.4rem;
}

.compare-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.compare-mode-tab:hover {
    color: var(--text-primary);
    background: var(--bg-glass-hover);
}

.compare-mode-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-sm);
}

.compare-mode-tab i {
    font-size: 0.85rem;
    color: var(--color-primary);
}
.compare-landing-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 42px;
}
.compare-landing-head i {
    font-size: 1.4rem;
    color: var(--color-primary);
}
.compare-landing-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
.compare-landing-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 0.4rem;
}
.league-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
}
.league-select-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.league-select-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 10px var(--color-primary-glow);
}
.league-select-card .league-icon-circle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.league-select-card .league-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.league-select-card .league-select-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    color: var(--text-primary);
    text-align: left;
    min-width: 0;
}

/* FOOTLE MODAL OVERLAY RESULTS */
.footle-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}
.footle-modal-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 90%;
    padding: 2rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    position: relative;
    text-align: center;
    animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footle-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    transition: var(--transition);
}

.footle-modal-close:hover {
    color: var(--text-primary);
}

.footle-modal-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: inline-block;
}
.footle-modal-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
}
.footle-modal-title.win {
    color: var(--color-success);
}
.footle-modal-title.loss {
    color: var(--color-danger);
}
.footle-modal-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.footle-modal-player-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}
.footle-modal-player-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    object-fit: cover;
}
.footle-modal-player-info {
    text-align: left;
}
.footle-modal-player-info h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
}
.footle-modal-player-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   MOBİL VERİ TABLOLARI — "kart" düzeni
   Geniş çok-sütunlu tablolar (transfer geçmişi, sezon istatistikleri, kadro,
   maçlar, lig kulüpleri) telefonda yatay kaydırma gerektiriyordu. Burada her
   satırı bir karta, her hücreyi "ETİKET  değer" satırına indiriyoruz; etiketler
   gizli <thead> yerine hücrelerdeki data-label'dan gelir. Böylece hiçbir tablo
   ekran dışına taşmaz.
   ========================================================================== */
@media (max-width: 640px) {
    .data-table-wrapper {
        overflow-x: visible;
    }

    .data-table {
        font-size: 0.9rem;
    }

    /* Başlık satırını erişilebilir biçimde gizle (ekran okuyucu görür) */
    .data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .data-table tbody,
    .data-table tfoot,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    /* Kayıtlar kutu/kart değil, sayfaya gömülü düz bloklar: aralarında tek
       tam-genişlik ayraç; satır içi etiket:değer satırlarında iç çizgi yok. */
    .data-table tr {
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        padding: 0.7rem 0;
        background: none;
        border-bottom: 1px solid var(--border-glass);
    }

    .data-table tbody tr:last-child {
        border-bottom: none;
    }

    .data-table tr:hover {
        background: none;
    }

    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        border: none;
        padding: 0.32rem 0;
    }

    /* Etiket (data-label) — hücrenin solunda */
    .data-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        text-align: left;
    }

    /* İçindeki logo+isim bloğu taşmadan sağa yaslansın */
    .data-table td > span {
        min-width: 0;
        text-align: right;
        justify-content: flex-end;
    }

    /* Boş / ok / etiketsiz hücreleri kartta gösterme */
    .data-table td:empty,
    .data-table td.transfer-arrow {
        display: none;
    }

    /* Kayıt başlığı hücresi (oyuncu/kulüp adı, "Toplam"): tam genişlik,
       etiketsiz, altında ince ayraçla istatistik satırlarından ayrılır. */
    .data-table td.dt-primary {
        justify-content: flex-start;
        text-align: left;
        font-size: 1rem;
        padding-top: 0;
        padding-bottom: 0.5rem;
        margin-bottom: 0.2rem;
        border-bottom: 1px solid var(--border-glass);
    }

    .data-table td.dt-primary::before {
        display: none;
    }

    .data-table td.dt-primary > span {
        text-align: left;
        justify-content: flex-start;
    }

    /* ----------------------------------------------------------------------
       Takımlar rehberi — LİSTE görünümü
       Jenerik "ETİKET  değer" kartı ızgara görünümündeki kartla neredeyse aynı
       görünüyordu, yani liste/ızgara geçişi mobilde hiçbir şey değiştirmiyordu.
       Artık masaüstü tablo satırının iki satıra katlanmış hâli:
         1. satır: [logo + kulüp adı] .......................... [lig]
         2. satır: [STADYUM]      [YAŞ ORT.]      [KADRO DEĞERİ]
       "Sıra" ve "Kadro Boyutu" mobil listede gösterilmez (masaüstünde durur).
       ---------------------------------------------------------------------- */
    .premium-dir-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.45rem 0.7rem;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border-glass);
        border-radius: 0;
        margin-bottom: 0;
        padding: 0.75rem 0;
    }

    .premium-dir-table td {
        display: flex;
        font-size: 0.82rem;
        padding: 0;
        min-width: 0;
    }

    .premium-dir-table td[data-label="Sıra"],
    .premium-dir-table td[data-label="Kadro"] {
        display: none;
    }

    /* 1. satır */
    .premium-dir-table td.dt-primary {
        grid-area: 1 / 1 / 2 / 3;
        font-size: 0.95rem;
        border-bottom: none;
        margin-bottom: 0;
        padding: 0;
    }

    /* Uzun kulüp adı 1. satırı taşırmasın */
    .premium-dir-table td.dt-primary > span {
        min-width: 0;
    }

    .premium-dir-table td.dt-primary > span > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Lig ikincil bilgi: küçük ve soluk, sağa yaslı */
    .premium-dir-table td[data-label="Lig"] {
        grid-area: 1 / 3 / 2 / 4;
        justify-content: flex-end;
        color: var(--text-muted);
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .premium-dir-table td[data-label="Lig"]::before {
        display: none;
    }

    .premium-dir-table td[data-label="Lig"] > span {
        justify-content: flex-end;
    }

    /* 2. satır: küçük etiket üstte, değer altta — üç mikro istatistik */
    .premium-dir-table td[data-label="Stadyum"] { grid-area: 2 / 1 / 3 / 2; }
    .premium-dir-table td[data-label="Yaş Ort."] { grid-area: 2 / 2 / 3 / 3; }
    .premium-dir-table td[data-label="Kadro Değeri"] { grid-area: 2 / 3 / 3 / 4; }

    .premium-dir-table td[data-label="Stadyum"],
    .premium-dir-table td[data-label="Yaş Ort."],
    .premium-dir-table td[data-label="Kadro Değeri"] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.1rem;
        text-align: left;
        line-height: 1.25;
    }

    .premium-dir-table td[data-label="Kadro Değeri"] {
        align-items: flex-end;
        text-align: right;
    }

    .premium-dir-table td[data-label="Stadyum"]::before,
    .premium-dir-table td[data-label="Yaş Ort."]::before,
    .premium-dir-table td[data-label="Kadro Değeri"]::before {
        font-size: 0.58rem;
    }

    /* Stadyum 1fr sütunda: uzun ad taşmak yerine ikinci satıra sarar
       (yaş ort. ve kadro değeri auto genişlikte, hep tek satır). */
    .premium-dir-table td[data-label="Stadyum"] {
        word-break: break-word;
    }

    /* ----------------------------------------------------------------------
       Ülkeler rehberi — LİSTE görünümü
       Yukarıdaki ızgara Takımlar dizininin SÜTUNLARINA göre yazılmış (Lig /
       Stadyum / Kadro Değeri). Ülke tablosunun sütunları başka (Futbolcu /
       Kulüp / En Değerli / Toplam Değer), o yüzden yalnız "Yaş Ort." yerini
       biliyordu; kalan dört hücre ızgaraya OTOMATİK yerleşip aynı gözü
       paylaşıyor ve üst üste biniyordu ("KULÜP 232" ile "YAŞ ORT. 27.2"
       çakışması). Burada aynı iki satırlık düzenin ülke karşılığı yazılı:
         1. satır: [bayrak + ülke adı] ..................... [futbolcu sayısı]
         2. satır: [EN DEĞERLİ]        [YAŞ ORT.]        [TOPLAM DEĞER]
       "Sıra" ve "Kulüp" (kulüp sayısı) mobil listede gösterilmez — ikisi de
       kart görünümünde duruyor, Takımlar listesindeki "Kadro" ile aynı karar.
       Seçiciler .country-dir-table ile daraltılmalı: Takımlar tablosunun ANA
       hücresi de data-label="Kulüp" taşıyor, daraltılmazsa kulüp adı gizlenir.
       ---------------------------------------------------------------------- */
    .premium-dir-table.country-dir-table td[data-label="Kulüp"] {
        display: none;
    }

    /* Futbolcu sayısı ikincil bilgi: küçük ve soluk, 1. satırın sağında */
    .premium-dir-table.country-dir-table td[data-label="Futbolcu"] {
        grid-area: 1 / 3 / 2 / 4;
        justify-content: flex-end;
        color: var(--text-muted);
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .premium-dir-table.country-dir-table td[data-label="Futbolcu"]::before {
        display: none;
    }

    /* 2. satır: küçük etiket üstte, değer altta */
    .premium-dir-table.country-dir-table td[data-label="En Değerli"] { grid-area: 2 / 1 / 3 / 2; }
    .premium-dir-table.country-dir-table td[data-label="Toplam Değer"] { grid-area: 2 / 3 / 3 / 4; }

    .premium-dir-table.country-dir-table td[data-label="En Değerli"],
    .premium-dir-table.country-dir-table td[data-label="Toplam Değer"] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.1rem;
        text-align: left;
        line-height: 1.25;
    }

    .premium-dir-table.country-dir-table td[data-label="Toplam Değer"] {
        align-items: flex-end;
        text-align: right;
    }

    .premium-dir-table.country-dir-table td[data-label="En Değerli"]::before,
    .premium-dir-table.country-dir-table td[data-label="Toplam Değer"]::before {
        font-size: 0.58rem;
    }

    /* En değerli futbolcunun adı 1fr sütunda: taşmak yerine sarar. */
    .premium-dir-table.country-dir-table td[data-label="En Değerli"] {
        word-break: break-word;
    }

    /* Kart düzeninde hücre zaten tam genişlik: masaüstündeki kısaltma
       (dt-ellipsis) ve tek-satır kilidi burada değeri kırpardı. */
    .data-table td.dt-ellipsis {
        max-width: none;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Aksiyonlar kartın altında, sağa yaslı. Yalnız-ikon butonlar mobilde de
       kare kalır (germek dev bir dokunma hedefi üretiyordu). */
    .admin-row-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: 0.4rem;
    }

    .admin-row-actions .secondary-btn.is-icon-only {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Sezon istatistik "Toplam" satırı kartı vurgulansın */
    .stats-total-row td {
        background-color: transparent;
    }

    .data-table tfoot .stats-total-row {
        background-color: var(--bg-secondary);
    }
}

/* ==========================================================================
   TRANSFER & SEZON İSTATİSTİK — özel mobil kart görünümü
   Bu iki tablo generic "etiket:değer" kartı yerine kendi düzenini kullanır:
   masaüstünde tablo (.dt-desktop-only), mobilde özel kartlar (.mobile-cards).
   ========================================================================== */
.mobile-cards {
    display: none;
}

.mobile-cards-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .dt-desktop-only {
        display: none;
    }

    .mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* --- Transfer: kart değil, sayfaya gömülü. satır1 = sezon·tarih + bedel,
       satır2 = eski → yeni; kayıtlar arası tam-genişlik ayraç. --- */
    .tcard {
        border: none;
        border-radius: 0;
        background: none;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border-glass);
    }

    .transfer-cards-mobile .tcard:last-child {
        border-bottom: none;
    }

    /* Bedel üst satıra taşındı; alt satır tamamen takımlara kalıyor */
    .tcard-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 0.55rem;
    }

    .tcard-date {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tcard-fee {
        flex-shrink: 0;
        font-size: 0.82rem;
        white-space: nowrap;
        text-align: right;
    }

    .tcard-flow {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

    .tcard-club {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
        flex: 1 1 0;
        font-weight: 600;
    }

    .tcard-club img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .tcard-club-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9rem;
    }

    .tcard-arrow {
        color: var(--color-primary);
        flex-shrink: 0;
        font-size: 0.8rem;
    }

    /* --- Sezon istatistikleri: kart değil, sayfaya gömülü düz satırlar.
       Her sezon head (logo+takım / sezon) + 3 kolon istatistik; sezonlar
       arasında tam-genişlik ince ayraç. --- */
    .stats-cards-mobile {
        gap: 0;
    }

    .scard {
        border: none;
        border-radius: 0;
        background: none;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border-glass);
    }

    .scard-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 0.7rem;
    }

    .scard-club {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
        font-weight: 700;
    }

    .scard-club img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .scard-club-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .scard-season {
        flex-shrink: 0;
        font-size: 0.85rem;
        font-weight: 800;
        color: var(--text-muted);
    }

    .scard-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .scell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
    }

    .scell + .scell {
        border-left: 1px solid var(--border-glass);
    }

    .sval {
        font-family: var(--font-heading);
        font-size: 1.15rem;
        font-weight: 900;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .slbl {
        font-size: 0.64rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    /* Toplam'dan hemen önceki sezonun ayracını kaldır ki çift çizgi olmasın */
    .stats-cards-mobile .scard:nth-last-child(2) {
        border-bottom: none;
    }

    .scard-total {
        border-bottom: none;
        border-top: 2px solid var(--border-ink);
    }

    .scard-total .scard-club-name {
        color: var(--color-primary);
    }
}

/* ==========================================================================
   DAR MOBİL (≤430px) — tek satırlık header'ın son güvenliği
   ========================================================================== */
@media (max-width: 430px) {
    /* Marka ADI gizlenir, ikon kalır. Tek satırda logo + 3 ikon + kullanıcı
       hapı + hamburger ~370px istiyor; 360-412px'lik telefonlarda ad taşmaya
       ya da hamburgerin kırpılmasına yol açıyordu. İkon hâlâ #/home bağlantısı. */
    .brand-logo .logo-text {
        display: none;
    }
    .brand-logo .logo-icon {
        font-size: 1.35rem;
    }

    /* Kart görünümü dar telefonda iki sütun kalır (tek sütun sayfayı yeniden
       uzatırdı); açıklama 3 yerine 2 satıra kırpılır ve dolgu kısılır. */
    #games-menu.view-card {
        gap: 0.6rem;
    }
    #games-menu.view-card .game-menu-card {
        padding: 0.8rem 0.7rem;
    }
    #games-menu.view-card .game-card-description {
        -webkit-line-clamp: 2;
    }
    /* Etiket + iki hap butonu 360px'te tek satıra sığmayabiliyor. */
    .games-view-label {
        font-size: 0.68rem;
    }
    .games-view-btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.74rem;
    }
}