/* ==========================================================================
   CSS RESET & VARIABLES — Light sports-editorial / neo-brutalist theme
   (Stitch mockup: design_mockup_stitch.html)
   ========================================================================== */
:root {
    /* Native form kontrollerinin (select açılır listesi, scrollbar, date picker)
       hangi şemayla çizileceğini tarayıcıya bildirir. Bu satır olmadan koyu temada
       <select> zemini koyu + metni açık olurken açılan native <option> popup'ı
       UA'nın BEYAZ zeminiyle çiziliyor ve açık metin okunamaz hale geliyordu
       (Takımlar sayfasındaki "Lig" filtresi: lig adları görünmüyordu). */
    color-scheme: light;

    --bg-primary: #f8f9ff;
    /* Paper / off-white background */
    --bg-primary-rgb: 248, 249, 255;
    /* rgb triplet of --bg-primary, for translucent (glass) surfaces */
    --bg-secondary: #eef4ff;
    /* Light container surface */
    --bg-glass: #ffffff;
    /* Solid card surface (no glassmorphism) */
    --logo-chip-bg: #ffffff;
    /* Fixed light backing for league badges — many are dark/transparent PNGs that vanish on dark surfaces; not theme-dependent */
    --bg-glass-hover: #e5eeff;
    /* Card hover surface */
    --border-glass: rgba(20, 26, 50, 0.18);
    /* Subtle ink dividers */
    --border-ink: #141a32;
    /* Hard 2px card borders */
    --on-ink: #ffffff;
    /* Text on --border-ink surfaces (buttons, table headers) */
    --border-glow: rgba(0, 108, 75, 0.35);

    --text-primary: #0e1c2c;
    --text-muted: #46464d;
    --text-dark: #0e1c2c;

    --color-primary: #006c4b;
    /* Deep grass green accent */
    --color-primary-hover: #005138;
    --color-secondary: #007350;
    --color-primary-glow: rgba(0, 108, 75, 0.15);

    --color-success: #006c4b;
    --color-success-glow: rgba(0, 108, 75, 0.25);

    --color-warning: #b45309;
    --color-warning-glow: rgba(180, 83, 9, 0.25);

    --color-danger: #ba1a1a;
    --color-danger-glow: rgba(186, 26, 26, 0.25);

    --color-info: #0e7490;
    --color-purple: #6d28d9;
    --color-pink: #be185d;
    --color-orange: #c2410c;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
    /* Flat by default; a soft blurred lift appears only on hover */
    --shadow-brutal: none;
    --shadow-brutal-hover: 0 16px 32px -18px rgba(20, 26, 50, 0.15);

    --font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    /* Hap/daire. TANIMSIZDI (2026-08-07): `.online-users-badge` bunu kullanıyor
       ama değişken hiç yazılmadığı için `border-radius` geçersiz sayılıp 0'a
       düşüyordu — rozet aylardır kare çiziliyordu. */
    --radius-full: 999px;

    /* ----------------------------------------------------------------------
       SAYFA ÖLÇÜLERİ — tek ölçek, tüm ekranlar.
       Önceden her ekran kendi genişliğini seçiyordu (500/520/640/650/680/700/
       720/940/%100 = dokuz farklı değer) ve menüden oyuna, oyundan profile
       geçerken içerik sürekli büyüyüp küçülüyordu. Artık üç basamak var; yeni
       bir ekran bunlardan birini seçer, kendi sayısını UYDURMAZ.
         --page-max: sayfa kabuğu (navbar/footer/main ile aynı hizada)
         --content-wide: geniş içerik (tablolar, kart ızgaraları, profiller)
         --content-md: standart oyun/panel genişliği — VARSAYILAN
         --content-narrow: tek sütun formlar, seçim listeleri, sonuç panelleri
       ---------------------------------------------------------------------- */
    --page-max: 1280px;
    --page-gutter: 2rem;
    --content-wide: 960px;
    --content-md: 720px;
    --content-narrow: 520px;

    /* "Sayfaya gömülü" yüzey: kart değil, sayfanın kendi zeminine oturan bir
       bölüm. Kutu/gölge yerine ince ayraç çizgisi ve boşluk kullanır — ana
       sayfa (home.css) bu dili zaten kullanıyordu, artık her yerde geçerli. */
    --surface-sunken: var(--bg-secondary);
    --surface-divider: var(--border-glass);
    --section-gap: 1.75rem;

    /* 'all' yerine gerçekten animlanan özellikler: 'all', hover'da yanlışlıkla
       layout özelliklerini (width/padding vb.) de animleyip her karede reflow
       tetikleyebiliyordu — donma/takılmaların kaynaklarından biri. */
    --transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* ==========================================================================
   DARK THEME — html[data-theme="dark"] token overrides.
   Aynı neo-brutalist dil: "mürekkep" koyu zeminde açık renge döner,
   sert ofset gölgeler siyahlaşır. localStorage 'fk_theme' + toggleTheme().
   ========================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary: #10141c;
    --bg-primary-rgb: 16, 20, 28;
    --bg-secondary: #161c27;
    --bg-glass: #1b2230;
    --bg-glass-hover: #242e40;
    --border-glass: rgba(226, 232, 240, 0.16);
    --border-ink: #dbe4f0;
    --on-ink: #10141c;
    --border-glow: rgba(47, 189, 143, 0.4);

    --text-primary: #e8edf5;
    --text-muted: #9aa8b8;
    --text-dark: #10141c;

    --color-primary: #2fbd8f;
    --color-primary-hover: #47d1a4;
    --color-secondary: #47d1a4;
    --color-primary-glow: rgba(47, 189, 143, 0.2);

    --color-success: #2fbd8f;
    --color-success-glow: rgba(47, 189, 143, 0.3);

    --color-warning: #e6a23c;
    --color-warning-glow: rgba(230, 162, 60, 0.3);

    --color-danger: #ef6a6a;
    --color-danger-glow: rgba(239, 106, 106, 0.3);

    --color-info: #38bdf8;
    --color-purple: #a78bfa;
    --color-pink: #f472b6;
    --color-orange: #fb923c;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
    --shadow-brutal: none;
    --shadow-brutal-hover: 0 16px 32px -16px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] body::before {
    background-image: radial-gradient(circle, rgba(226, 232, 240, 0.06) 1px, transparent 1px);
}

/* Açık pastel zemin + değişken metin kullanan bileşenlerin koyu düzeltmeleri */
html[data-theme="dark"] .game-menu-card.featured {
    background: #14382b;
}

html[data-theme="dark"] .navbar-header {
    box-shadow: 0 2px 16px -6px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .hero-section::after {
    color: rgba(47, 189, 143, 0.09);
}

/* League badges: many source PNGs are dark/black art on a transparent background,
   so they vanish on the dark surfaces used everywhere in dark theme. Force a fixed
   light chip behind every league logo regardless of its container.
   NOT 50%: border-radius clips the img content, so a circular radius turns every
   non-square logo into a cropped oval — a small rounded rect never distorts. */
img[src^="/api/logos/league/"] {
    background: var(--logo-chip-bg);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 2px;
}

/* color-scheme popup'ı doğru şemayla çizdiriyor; bu kural ise <option>'ın
   rengini select'ten miras almak yerine açıkça temanın token'larına bağlar
   (bazı tarayıcı/platform kombinasyonlarında popup hâlâ miras alınan color'ı
   kullanıyor). Projedeki tüm select'ler için geçerli — .premium-select,
   #admin-users-filter, ayarlar formları. */
select option,
select optgroup {
    background-color: var(--bg-glass);
    color: var(--text-primary);
}

/* Arama dropdown'ları (öneri listeleri) sayfayı viewport'tan uzun yapıp dikey
   scrollbar belirdiğinde, scrollbar genişliği tüm sayfayı sola kaydırıyordu
   (bkz. games.css'teki aynı sorunun oyun-arenası-özel çözümü). Gutter'ı kalıcı
   olarak ayır: scrollbar çıksın ya da çıkmasın, içerik genişliği hep sabit kalır. */
html {
    scrollbar-gutter: stable;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    /* overflow-x:hidden yukarıda overflow-y'yi zımnen 'auto' yapıyor (CSS Overflow:
       ikisinden biri visible değilse diğeri auto sayılır), yani asıl kayan kutu
       html değil body oluyor — gutter'ı burada da sabitle, html'deki tek başına
       yetmiyor. */
    scrollbar-gutter: stable;
}

/* Retro kağıt dokusu: ince nokta ızgarası (içeriğin altında) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(14, 28, 44, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: -1;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}