/* --- 1. CORE (TEMEL AYARLAR) --- */
:root {
    /* === BRAND === */
    --goji-neon: #00ff87;
    --goji-neon-hover: #ffffff;
    --goji-dark: #050608;

    /* === SURFACES === */
    --bg-base: #050608;            /* page bg (goji-bg) */
    --bg-surface: #111316;         /* cards (goji-card) */
    --bg-header: rgba(5, 6, 8, 0.92);
    --border-soft: rgba(255, 255, 255, 0.07);
    --border-soft-2: rgba(255, 255, 255, 0.12);

    /* === TEXT === */
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;     /* gray-400 */
    --text-muted: #6b7280;         /* gray-500 */
    --text-on-neon: #04140c;

    /* === TYPE === */
    --font-title: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Oxanium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 19px;

    /* === SPACING SCALE === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* === HEADER / NAV === */
    --header-h: 70px;
    --header-h-lg: 90px;
    --logo-w: 116px;               /* mobil (eski 85 — çok küçüktü) */
    --logo-w-lg: 130px;            /* desktop (değişmedi) */
    --tap-min: 44px;
    --header-icon: 48px;           /* header ikon-buton touch target (hamburger + register) */
    --nav-icon: #757A83;           /* header ikon rengi (hamburger + register-icon) */

    /* === SECTION SPACING — homepage dikey ritmi (tüm section'larda kullanılacak) === */
    --section-gap-mobile: 24px;
    --section-gap-desktop: 32px;

    /* Radius scale (Faz 2 shape-lock) */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-pill: 9999px;
    /* Z-index scale (Faz 2 stacking-lock) */
    --z-fab:    200;   /* floating action buttons */
    --z-modal: 1000;   /* modals, popup panels */
    --z-toast: 2000;   /* toasts, live alerts */
    --z-exit:  2100;   /* exit intent (above toast) */
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--goji-dark);
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
}

/* --- CLS REZERVASYONU --- JS ile dolan boş placeholder'lar paint öncesi alanını tutar
   ki populate olunca içeriği itip layout-shift YAPMASIN. Kritik (blocking) style.css'te
   olmalı: jackpot.css kritik ama features.css DEFERRED → ikisi de buraya. Ölçülen
   populate-sonrası yükseklikler (mobil / ≥1024 desktop): jackpot 133/155, features 1030/410. */
#jackpot-container { min-height: 133px; }
#features-placeholder { min-height: 860px; }   /* mobil: 8 kart 2 sütun = 4 satır — CLS rezervasyonu */
/* TABLET (≥640): feat-grid 4 sütuna geçer (features.css) → 8 kart 2 satır ≈ 545px.
   860px mobil rezervasyonu burada ~315px phantom boşluk (features↓ → EXCLUSIVE OFFERS)
   yaratıyordu; 4-sütun gerçek yüksekliğine indir. */
@media (min-width: 640px) {
    #features-placeholder { min-height: 552px; }
}
@media (min-width: 1024px) {
    #jackpot-container { min-height: 155px; }
    #features-placeholder { min-height: 452px; }
}

/* Base font comes from the Tailwind font-body utility; emoji glyphs are handled by iconify-icon. */

::-webkit-scrollbar { display: none; }

.font-title { letter-spacing: -0.5px; }
.whitespace-nowrap { white-space: nowrap !important; }
img { display: block; max-width: 100%; height: auto; }
::placeholder { color: #6b7280; opacity: 1; }

/* --- 2. UTILITY CLASSES --- */
.mask-gradient {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.fade-text {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 1;
    transform: translateY(0);
    display: inline-block;
}

.hidden-fade {
    opacity: 0;
    transform: translateY(10px);
}

/* --- 3. ANIMASYONLAR --- */
@keyframes neon-pulse {
    0%, 100% { text-shadow: 0 0 5px rgba(0,255,135,0.6); color: #fff; }
    50% { text-shadow: 0 0 10px rgba(0,255,135,0.4); color: #00ff87; }
}
.neon-text { animation: neon-pulse 2s infinite alternate ease-in-out; }

@keyframes float-gentle {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.animate-bounce-gentle { animation: float-gentle 2s cubic-bezier(0.16,1,0.3,1) infinite; }

@media (prefers-reduced-motion: reduce) {
    .neon-text { animation: none; color: #00ff87; }
    .animate-bounce-gentle { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- 4. FORM & UI ELEMENTS --- */
.contact-option { border: 1px solid rgba(255, 255, 255, 0.15); color: #9ca3af; transition: all 0.2s ease; }
.contact-option:hover { background-color: rgba(255, 255, 255, 0.05); }
.contact-option.active { border-color: #00ff87 !important; color: white !important; background-color: rgba(0, 255, 135, 0.05) !important; box-shadow: 0 0 15px rgba(0, 255, 135, 0.1); }
.contact-option.active svg { color: #00ff87 !important; }

.app-glass { background: linear-gradient(145deg, rgba(20, 30, 25, 0.5) 0%, rgba(10, 12, 14, 0.8) 100%); backdrop-filter: blur(12px); border: 1px solid rgba(0, 255, 135, 0.12); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9); }
.app-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 60%; background: radial-gradient(circle, rgba(0, 255, 135, 0.1) 0%, transparent 70%); filter: blur(80px); z-index: -1; }

/* --- 5. LIVECHAT Z-INDEX AYARI (GİZLEME KALDIRILDI) --- */
/* Chat görünür olsun ama Modal'ın (z-max) altında kalsın */
#chat-widget-container, #chat-widget-minimized, [data-testid="widget-is-minimized"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1500 !important; /* livechat: above modal (1000), below exit (2100) */
}

/* Modal açıldığında JS ile gizliyoruz zaten ama CSS ile de garantiye alalım */
body.modal-open #chat-widget-container {
    display: none !important;
}

/* ============================================================
   SITE HEADER + NAV + BUTTONS — token-driven shared system
   (homepage'leşme Adım 1: header/menü tek tutarlı sistemden gelir,
   one-off Tailwind utility-soup yerine semantic component class'lar)
   ============================================================ */

/* --- Shared buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 var(--space-3);
    font-family: var(--font-title); font-weight: 800; font-size: var(--fs-sm);
    text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    text-decoration: none; cursor: pointer; user-select: none;
    transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: 2px; }
.btn--register { background: var(--goji-neon); color: var(--text-on-neon); }
.btn--register:hover { background: var(--goji-neon-hover); }
.btn--login { background: transparent; color: var(--text-primary); border-color: var(--border-soft-2); }
.btn--login:hover { background: rgba(255, 255, 255, .06); }

/* --- Header shell --- */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    height: var(--header-h);
    background: var(--bg-header);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
    height: 100%; max-width: 1400px; margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.site-header__left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.site-header__right { display: flex; align-items: center; gap: var(--space-2); }

/* logo */
.site-logo { display: block; line-height: 0; flex-shrink: 0; transition: transform .1s; }
.site-logo:active { transform: scale(.96); }
.site-logo img { width: var(--logo-w); height: auto; display: block; user-select: none; pointer-events: none; }

/* hamburger (mobil/tablet) */
.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--header-icon); height: var(--header-icon); margin-left: -12px;  /* 48px touch; -12 = logo'yu kaydırmadan büyüt */
    color: var(--nav-icon); background: none; border: 0; cursor: pointer;
    border-radius: var(--radius-sm); transition: color .15s, background .15s;
}
.hamburger:hover { color: var(--goji-neon); }
.hamburger:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: 2px; }

/* ── Hamburger ⇄ X — TEK buton, state aria-expanded ile deterministik ─────────
   KÖK SEBEP (iOS/Safari'de X görünmüyordu): viewBox'lı ama width/height ATTR'ı
   ve CSS boyutu OLMAYAN inline <svg>, inline-flex butonun flex item'ıydı.
   Blink auto'yu doldurup 44x44 çiziyor; WebKit intrinsic boyutu olmayan flex
   item'ın auto width/height'ını 0'a çözüyor → 0x0, ikon kayboluyor.
   (z-index / stacking / safe-area / opacity DEĞİLDİ — hepsi doğruydu.)
   Çözüm: her iki ikona da explicit width/height (hem attr hem CSS) + flex:0 0 auto. */
.hamburger svg { width: 30px; height: 30px; flex: 0 0 auto; fill: currentColor; display: block; }
.hamburger .hamburger__close { display: none; stroke: currentColor; fill: none; }
.hamburger[aria-expanded="true"] .hamburger__open  { display: none; }
.hamburger[aria-expanded="true"] .hamburger__close { display: block; }

/* Menü açıkken toggle (ve header) drawer'ın ÜSTÜNDE kalmalı → X her zaman tıklanabilir */
.site-header { z-index: 200; }

/* desktop nav (xl+) */
.site-nav { display: none; align-items: center; gap: var(--space-4); }
.site-nav__link {
    font-family: var(--font-title); font-weight: 700; font-size: 13px;
    text-transform: uppercase; color: var(--text-secondary); text-decoration: none;
    white-space: nowrap; transition: color .15s;
}
.site-nav__link:hover { color: var(--text-primary); }
.site-nav__link--accent { color: var(--goji-neon); }
.site-nav__link:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: 3px; border-radius: 2px; }
.site-nav__divider { width: 1px; height: 16px; background: var(--border-soft-2); flex-shrink: 0; }
.site-nav__pill {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3);
    font-family: var(--font-title); font-weight: 900; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
    border-radius: var(--radius-sm); border: 1px solid var(--goji-neon);
    background: rgba(0, 255, 135, .08); color: var(--goji-neon);
    cursor: pointer; transition: background .15s;
}
.site-nav__pill:hover { background: rgba(0, 255, 135, .2); }
.site-nav__pill:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: 2px; }
.site-nav__pill img { height: 13px; width: auto; display: block; transform: translateY(-3px); }

/* APP: badge değil — diğer nav item'larla aynı sistemde, ikon+metin, neon (dikkat çeker ama kopuk değil) */
.site-nav__app {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-title); font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0;
    color: var(--goji-neon); background: none; border: 0; padding: 0; cursor: pointer;
    white-space: nowrap; transition: color .15s;
}
.site-nav__app:hover { color: var(--text-primary); }
.site-nav__app:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: 3px; border-radius: 2px; }
.site-nav__app svg { width: 16px; height: 16px; }

/* login: küçük telefonda gizli. Telefonda register + profil = dairesel ikon-kontrol; ≥640 text-buton. */
.site-login-only { display: none; }

/* ── Header dairesel ikon-kontrolü — register + profil ORTAK ──────────────────
   Küçük, sakin dark yüzey: subtle border (--border-soft-2, LOGIN butonuyla aynı token),
   ağır neon glow YOK (box-shadow/scale yok), floating-button görünümü YOK.
   Görsel daire 40px; ::before ile hit-area 44px'e büyütülür (tap-target kuralı korunur).
   GLYPH OPTİK EŞİTLİĞİ: iki svg de 24u kutuda 20u içerik taşır
   (register viewBox="0 0 24 24" bbox 20x20 / profil viewBox="-2 -2 24 24" bbox 20x20)
   → 22px CSS boyunda İKİSİ DE 18.33px render olur. Aynı wrapper tek başına yetmezdi. */
.site-icon-circle {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-soft-2);
    color: var(--nav-icon);
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.site-icon-circle::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }  /* 44px tap */
.site-icon-circle:hover { background: rgba(0, 255, 135, .10); border-color: rgba(0, 255, 135, .40); color: var(--goji-neon); }
.site-icon-circle:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: 2px; }
.site-icon-circle svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* profil — MOBİL: register circle'ın hemen sağında, header'ın EN SAĞ item'ı (aynı .site-icon-circle).
   ≥640 DESKTOP: ikon YOK; "PROFILE" text-buton (.btn.btn--login reuse, yeni stil YOK) ve DOM'da
   LOGIN'in SOLUNDA → görünür sıra PROFILE | LOGIN | REGISTER. Header 70/90px > 40px → layout shift YOK.
   Kaynak asset: images/icons/profile-round.svg (svgrepo #1342) — inline, external hotlink YOK. */
.site-register-text { display: none; }   /* .btn'i ezer — telefonda gizli */
.site-profile-text  { display: none; }   /* .btn'i ezer — telefonda gizli */
@media (min-width: 640px) {
    .site-login-only    { display: inline-flex; }
    .site-register-icon { display: none; }
    .site-register-text { display: inline-flex; }
    .site-profile-icon  { display: none; }
    .site-profile-text  { display: inline-flex; }
}

/* ── Login-state switch (HAZIR AMA PASİF) ────────────────────────────────────
   Teknik ekipten güvenilir login boolean'ı gelince SADECE şu set edilir:
       document.documentElement.dataset.auth = 'guest'   // veya 'user'
   Auth detection / fake cookie YAZILMADI; attribute yokken mevcut davranış aynen sürer.
   Ancestor attribute selector'ı (0,2,0) medya sorgusundaki (0,1,0) kuralları ezer.
   Üç profil yüzeyi de AYNI state'e bağlı: mobil header ikonu (.site-profile-icon),
   desktop text (.site-profile-text), mobil drawer item (.mobile-nav__item--profile). */
[data-auth="guest"] .site-profile-icon,
[data-auth="guest"] .site-profile-text,
[data-auth="guest"] .mobile-nav__item--profile { display: none; }
[data-auth="user"] .site-login-only,
[data-auth="user"] .site-register-icon,
[data-auth="user"] .site-register-text,
[data-auth="user"] .mobile-nav__actions { display: none; }

/* ── iOS Safari input auto-zoom ───────────────────────────────────────────────
   Safari, font-size < 16px olan bir input/select/textarea focus'unda sayfayı
   otomatik büyütür. Sadece MOBİLDE 16px tabanı koy — desktop tipografisi bozulmaz.
   JS hack (gesturestart / touchmove preventDefault) YOK. */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px; }
}

@media (min-width: 1024px) {
    .site-header { height: var(--header-h-lg); }
    .site-header__inner { padding: 0 var(--space-8); }
    .site-logo img { width: var(--logo-w-lg); }
    .btn { height: 40px; padding: 0 var(--space-4); font-size: var(--fs-base); }
}
@media (min-width: 1280px) {
    .hamburger { display: none; }
    .site-nav { display: flex; }
    .site-header__right { gap: var(--space-4); }
}

/* ============================================================
   MOBILE NAV PANEL — semantic <nav>/<ul>, touch-friendly, a11y
   (kayma Tailwind .translate-x-full ile; toggleMenu() yönetir)
   ============================================================ */
.mobile-nav {
    position: fixed; inset: 0; z-index: 150;   /* header (200) ALTINDA → hamburger/X hep erişilebilir */
    padding-top: var(--header-h);              /* drawer içeriği header'ın altından başlar */
    background: var(--bg-base);
    transform: translateX(100%);               /* kapalı varsayılan; .translate-x-full ile uyumlu */
    transition: transform .28s ease;
    display: flex; flex-direction: column;
    overscroll-behavior: contain;
}
.mobile-nav:not(.translate-x-full) { transform: translateX(0); }   /* açık */
/* Drawer'ın kendi logo+close başlığı KALDIRILDI — kapatma artık header'daki tek toggle (X). */
.mobile-nav__head { display: none; }
/* Eski kopyalarda kalan close butonu için savunma: svg'yi asla 0x0 bırakma (WebKit) */
.mobile-nav__close { display: none; }
.mobile-nav__close svg { width: 24px; height: 24px; flex: 0 0 auto; }
.mobile-nav__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* iPhone safe-area: alttaki son item home-indicator altında kalmasın */
.mobile-nav__list {
    list-style: none; margin: 0; display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.mobile-nav__link {
    display: flex; align-items: center;
    min-height: 52px; padding: 0 var(--space-3);
    font-family: var(--font-title); font-weight: 700; font-size: var(--fs-md);
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-secondary); text-decoration: none;
    border-radius: var(--radius-sm); transition: background .15s, color .15s;
}
.mobile-nav__link:hover, .mobile-nav__link:focus-visible { background: rgba(255, 255, 255, .05); color: var(--text-primary); }
.mobile-nav__link:focus-visible { outline: 2px solid var(--goji-neon); outline-offset: -2px; }
.mobile-nav__link--accent { color: var(--goji-neon); }
/* login/register: NORMAL akışta, son nav item'ın hemen altında (fixed-bottom DEĞİL —
   böylece floating FAB'lar/chat üstlerini kapatmaz, menü scroll'unda çakışma olmaz) */
.mobile-nav__actions {
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-6);
    border-top: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.mobile-nav__actions .btn { width: 100%; height: 48px; font-size: var(--fs-base); }

/* ============================================================
   SECTION TOP SPACING — header altı ilk section'ın başlangıcı.
   = header yüksekliği + section-gap (token-driven, random değil).
   Sonraki section'lar inter-section boşluk için margin-top: var(--section-gap-*) kullanır.
   ============================================================ */
.section-top { padding-top: calc(var(--header-h) + var(--section-gap-mobile)); }
@media (min-width: 1024px) {
    .section-top { padding-top: calc(var(--header-h-lg) + var(--section-gap-desktop)); }
}

/* ============================================================
   HOMEPAGE SECTION RHYTHM — ana section'lar arası dikey boşluk.
   Top-owned: her section ÜST dış boşluğunu token'dan alır; ALT dış boşluk 0
   (çift-boşluk olmaz, gap'i hep bir sonraki section'ın üstü sahiplenir).
   Section İÇİ content padding'i ayrıdır (component'te korunur).
   Hero hariç (hero kendi pb'siyle ilk gap'i sahiplenir).
   ============================================================ */
.home-section { padding-top: var(--section-gap-mobile); }
@media (min-width: 1024px) {
    .home-section { padding-top: var(--section-gap-desktop); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYLAŞILAN UI PRIMITIVE'LERİ (tek kaynak — component başına kopya YOK)
   Buraya taşındı çünkü index.html dışında worldcup.html de kullanıyor
   (worldcup promotions.css YÜKLEMİYOR; style.css'i yüklüyor).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Segmented control (sliding thumb) ────────────────────────────────────────
   Exclusive Offers / Browse Games / Popular Matches AYNI sistemi kullanır.
   İki isim, TEK kural bloğu: .gapi-* (games, mevcut markup) + .goji-segmented (yeni tüketiciler).
   Aktif chip'in offsetLeft/offsetWidth'i JS'te ölçülür → --filter-thumb-x/w;
   kayma tek ::before thumb'ında olur (per-chip fake opacity/scale animasyon YOK).
   JS: window.GojiSegmented.update() — games/games.js */
.gapi-tabs, .goji-segmented {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    gap: 2px;
    padding: 4px;
    margin-bottom: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md, 16px);
    flex-wrap: nowrap;
    overflow-x: auto;                 /* mobil: yatay scroll, page overflow yaratmaz */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gapi-tabs::-webkit-scrollbar, .goji-segmented::-webkit-scrollbar { display: none; }
.gapi-tabs::before, .goji-segmented::before {
    content: '';
    position: absolute;
    top: 4px; bottom: 4px;
    width: var(--filter-thumb-w, 0px);
    transform: translateX(var(--filter-thumb-x, 0px));
    border-radius: var(--radius-sm, 8px);
    background: rgba(0,255,135,0.08);
    border: 1px solid rgba(0,255,135,0.22);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.2,0.7,0.3,1), width 0.22s cubic-bezier(0.2,0.7,0.3,1);
}
.gapi-tabs.has-thumb::before, .goji-segmented.has-thumb::before { opacity: 1; }
.gapi-tabs:not(.has-thumb)::before, .goji-segmented:not(.has-thumb)::before { transition: none; }
.gapi-tab, .goji-segmented__chip {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
    font-family: 'Montserrat', sans-serif;
}
.gapi-tab:hover, .goji-segmented__chip:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); }
.gapi-tab--active, .goji-segmented__chip.is-active { color: #00ff87; background: transparent; }
.gapi-tab--active:hover, .goji-segmented__chip.is-active:hover { background: transparent; }
/* sport/kategori ikonları: optik olarak hafif (metinden bir tık silik) */
.gapi-tab iconify-icon, .goji-segmented__chip iconify-icon { font-size: 13px; opacity: .75; }
.gapi-tab--active iconify-icon, .goji-segmented__chip.is-active iconify-icon { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .gapi-tab, .goji-segmented__chip { transition: none; }
    .gapi-tabs::before, .goji-segmented::before { transition: none; }
}

/* ── Carousel kenar navigasyonu (dark-glass ghost) ────────────────────────────
   promotions.css'ten BURAYA taşındı (tek kaynak; worldcup.html promotions.css yüklemiyor).
   Kart sırasının sol/sağ kenarında, dikey ortalı overlay. Kutuda dikey padding OLMAMALI,
   yoksa ok merkezi kartın merkezinden kayar. Edge-state: window.GojiCarousel (games/games.js). */
.game-carousel { position: relative; }
.promo-nav-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: rgba(8, 12, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.promo-nav-side--right { right: 4px; }
.promo-nav-side--left  { left: 4px; }
.promo-nav-side iconify-icon { color: rgba(255,255,255,0.7); transition: color 0.2s ease; }
.promo-nav-side:hover,
.promo-nav-side:focus-visible {
    background: rgba(0,255,135,0.14);
    border-color: rgba(0,255,135,0.45);
    transform: translateY(-50%) scale(1.06);
}
.promo-nav-side:hover iconify-icon,
.promo-nav-side:focus-visible iconify-icon { color: #00ff87; }
/* Edge-state: gerçek hide/show (opacity-only DEĞİL → tık hedefi kalmaz); absolute → layout shift yok */
.game-carousel .promo-nav-side { transition: background .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease, visibility .2s ease; }
.game-carousel .promo-nav-side.nav-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 768px) {
    /* Mobil: ok yok — swipe + next-card peek */
    .promo-nav-side { display: none; }
}