/* theme_vars_css */ /* ══════════════════════════════════════════════════════════════════════════ * GEMİNİBAHİS — TEMA DEĞİŞKENLERİ (KATMAN 1) * ►► YAPIŞTIRILACAK ALAN: Özel Kod > "Tema Değişkenleri (theme-vars.css) — Ortak" * (Masaüstü ve Mobil kopyaları BOŞ kalacak — dolduran alan * Ortak'ı tamamen devre dışı bırakır, birleştirmez.) * ────────────────────────────────────────────────────────────────────────── * Bu dosya TEK BİR KURAL bile yazmaz; sadece platformun kendi token'larını * marka paletine çevirir. BetConstruct paket CSS'i ve custom.css bu * token'ları `rgba(var(--header), 1)` kalıbıyla okuduğu için, header/nav/ * footer/kartlar/butonlar TEK DOSYADAN dönüyor — selector avına gerek yok. * * ⚠️ RENK BİÇİMİ: BC token'ları HEX değil, virgüllü RGB ÜÇLÜSÜ tutar * (`--header: 15, 23, 42`). Buraya `#0F172A` yazarsan `rgba(var(--header),1)` * geçersiz olur ve renk SESSİZCE düşer. Üçlü yaz, hex yazma. * * ⚠️ `--x-sc` = "surface contrast": o rengin ÜSTÜNDEKİ yazı/ikon rengi. * Zemini koyulaştırıp `-sc`yi güncellemezsen yazı okunmaz hale gelir. * Üçlü her zaman birlikte değişir: `--x`, `--x-hover`, `--x-sc`. * * ══════════════════════════════════════════════════════════════════════════ * 🔴 NEDEN `html:root` VE NEDEN HER SATIRDA `!important` * ────────────────────────────────────────────────────────────────────────── * Altyapının yazdığı `Tema CSS Dosyası (tam)` alanı, kendi içinde tema * renklerini şöyle sabitliyor: * * :root { --header: 5, 6, 10 !important; --hero: 238, 205, 36 !important; } * * Custom property'ye `!important` verilmiş. İki taraf da `!important` olunca * karar önce ÖZGÜLLÜKTE, eşitse KAYNAK SIRASINDA verilir. * * CANLI ÖLÇÜLEN SIRA (18 Eylül 2026, document.styleSheets): * /custom.css → Tema CSS (tam) → PAKET → /theme-vars.css → BU ALAN → Header CSS * Yani bu alan Tema CSS'ten SONRA geliyor; `!important` ile yazılınca zaten * kazanır. `html:root` (0,1,1) ise ek sigorta: alanların sırası bir gün * değişse bile `:root` (0,1,0) ile yazılmış altın blok bizi ezemez. * `!important` şart: important olmayan bir bildirim, özgüllüğü ne olursa * olsun important olan bir bildirimi yenemez. * * 🔴 18.09'da yaşanan hata: bu alana yanlışlıkla custom.css'in 1719 satırlık * kopyası yapıştırılmıştı → token'lar hiç yüklenmiyordu (font Rubik, köşe 4px, * --gold altın kaldı). Bu alana YALNIZ `:root` token'ları girer, KURAL girmez. * * ⚠️ İSTİSNA: `--mobile-*` ve `--dynamic-header` satırlarına `!important` * VERİLMEDİ. Onları platform JS'i çalışma anında `` üzerine * yazıyor; stylesheet'teki `!important` inline style'ı yener ve JS'in * hesapladığı yüksekliği kilitler → mobilde içerik header'ın altına girer. * * ══════════════════════════════════════════════════════════════════════════ */ html:root { /* ── MOBİL YÜKSEKLİK ÖLÇÜLERİ — DOKUNMA ──────────────────────────────── * Bunları platform JS'i çalışma anında hesaplayıp yazar (sticky header, * scroll offset, tab çubuğu hizası bunlara bağlı). Elle sabitlersen * mobilde içerik header'ın altına girer. */ --mobile-header-main-section-height: 56px; --mobile-header-navigation-height: 0px; --mobile-horizontal-tab-navigation-height: 40px; --mobile-sub-header-full-height: 0px; --mobile-header-full-height: 56px; --dynamic-header: 0px; /* ── TİPOGRAFİ ───────────────────────────────────────────────────────── * 🔴 EN ÖNEMLİ SATIR. Paket CSS'i gövde fontunu `var(--font-family)` * üzerinden okur. Fontu BURADAN değiştirmek, `* { font-family: !important }` * yazmanın GÜVENLİ karşılığıdır: * - Yıldız (*) seçici `` gibi ikon * elemanlarını da ezer; ikonlar bir İKON FONTU'nun özel glifleri * olduğu için font değişince glif kaybolur ve ikonlar YOK OLUR. * - `--font-family` ise yalnız metin elemanlarına işler; ikon sınıfları * kendi font-family'sini açıkça verdiği için hiç etkilenmez. * Rubik ara basamakta bilinçli duruyor: platform onu zaten yüklüyor, * Inter bir sebeple gelmezse sistem sans-serif'e değil Rubik'e düşer. */ --font-family: 'Inter', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif !important; /* ── KÖŞE YUMUŞAKLIĞI ────────────────────────────────────────────────── * Marka dili: "yuvarlatılmış köşeler". 4px → 8px. Tek kolla tüm site * (kartlar, inputlar, popup'lar, oran butonları) yumuşar. * 10px+ vermedim: oran butonu gibi ufak yüzeylerde kapsül görüntüsü * verip "sistem paneli" ciddiyetini bozuyor. */ --border-radius: 8px !important; /* ══ ANA KROMA: HEADER / MENÜ / GÖVDE ══════════════════════════════════ * Eski tema MOR (#340B51) idi ve custom.css onu ALTIN kromayla eziyordu — * iki palet çarpışıyordu. İkisini de Derin Antrasit'e çekiyoruz. * %60 zemin kuralı: #0F172A. Saf siyah ASLA. */ --header: 15, 23, 42 !important; /* #0F172A — Derin Antrasit */ --header-hover: 30, 41, 59 !important; /* #1E293B — Slate yüzey */ --header-sc: 248, 250, 252 !important; /* #F8FAFC — Titanyum metin */ --menu: 15, 23, 42 !important; --menu-hover: 30, 41, 59 !important; --menu-sc: 248, 250, 252 !important; /* `--b` = base/gövde. Sitede EN ÇOK kullanılan token (kart, popup, panel * zeminleri). Antrasit'in bir tık üstü = %30 yüzey rengi. */ --b: 30, 41, 59 !important; /* #1E293B */ --b-hover: 51, 65, 85 !important; /* #334155 */ --b-sc: 248, 250, 252 !important; --tab-navigation: 15, 23, 42 !important; --tab-navigation-hover: 30, 41, 59 !important; --tab-navigation-sc: 248, 250, 252 !important; /* ══ %10 VURGU: GEMİNİ NEON ════════════════════════════════════════════ * Degradenin üç durağı üç ayrı token'a dağıtıldı; böylece paket CSS'i * düz renk beklediği yerde düz renk, bizim kurallarımız degrade kurar. * --hero → birincil aksiyon (Elektrik Mavisi) * --secondary → ara ton (Derin Mor) * --accent → uç vurgu (Neon Fuşya) * `-sc` değerleri kontrastla seçildi: mavinin üstüne antrasit yazı * (parlak zemine parlak yazı olmaz), morun/fuşyanın üstüne titanyum. */ --hero: 0, 194, 255 !important; /* #00C2FF */ --hero-hover: 0, 163, 217 !important; /* #00A3D9 */ --hero-sc: 15, 23, 42 !important; --brand: 0, 194, 255 !important; --brand-hover: 0, 163, 217 !important; --brand-sc: 15, 23, 42 !important; --secondary: 123, 44, 191 !important; /* #7B2CBF */ --secondary-hover: 98, 33, 153 !important; --secondary-sc: 248, 250, 252 !important; --accent: 255, 0, 122 !important; /* #FF007A */ --accent-hover: 214, 0, 102 !important; --accent-sc: 255, 255, 255 !important; /* ── ORAN BUTONU RENKLERİ (--oc-*) ───────────────────────────────────── * Eskisi altın sarısıydı: ekranda YÜZLERCE oran butonu var, hepsi vurgu * rengi olursa %10 kuralı çöker ve ekran pavyona döner. oc-1/oc-2 nötr * slate yüzey; yalnız oc-3 (öne çıkarılmış/artırılmış oran) neon fuşya. */ --oc-1: 30, 41, 59 !important; --oc-1-hover: 51, 65, 85 !important; --oc-1-sc: 248, 250, 252 !important; /* 🔴 --oc-2 bir YÜZEY değil, YAZI rengi: oran sayıları (`.market-odd-bc`), * cashout ve ayar metinleri bunu kullanıyor. 18.09'da yanlışlıkla slate * yapılmıştı → koyu zeminde koyu oranlar, "Öne Çıkan Bahisler"de oranlar * görünmüyordu. Açık neon mavi: koyu kartlarda okunur, marka tonunda. */ --oc-2: 125, 216, 255 !important; --oc-2-hover: 0, 194, 255 !important; --oc-2-sc: 15, 23, 42 !important; --oc-3: 255, 0, 122 !important; --oc-3-hover: 214, 0, 102 !important; --oc-3-sc: 255, 255, 255 !important; /* ── İŞLEVSEL RENKLER — MARKAYA ÇEKİLMEZ ─────────────────────────────── * ⚠️ Oran yukarı/aşağı ve hata/başarı/uyarı renkleri BİLGİ taşır, süs * değildir. Yeşil "yükseldi", kırmızı "düştü" demektir; bunları neon * maviye çevirirsen oyuncu oranın yönünü okuyamaz. Marka kimliğinin * "sarı-yeşil-kırmızı pavyon karmaşası" yasağı DEKORATİF renkler için * geçerli — işlevsel sinyaller dokunulmaz. Sadece tonları biraz * dengeledim, anlamları aynı. */ --odd-up: 22, 199, 46 !important; --odd-up-hover: 16, 153, 35 !important; --odd-up-sc: 0, 2, 5 !important; --odd-down: 255, 52, 73 !important; --odd-down-hover: 255, 102, 118 !important; --odd-down-sc: 255, 255, 255 !important; --warning: 255, 173, 41 !important; --warning-hover: 245, 151, 0 !important; --warning-sc: 15, 23, 42 !important; --error: 180, 19, 43 !important; --error-hover: 226, 23, 54 !important; --error-sc: 255, 255, 255 !important; --success: 4, 103, 68 !important; --success-hover: 5, 152, 100 !important; --success-sc: 255, 255, 255 !important; --info: 0, 194, 255 !important; --info-hover: 0, 163, 217 !important; --info-sc: 15, 23, 42 !important; /* ── MUTLAK RENKLER — DOKUNMA ────────────────────────────────────────── * "static" olmalarının sebebi tema ne olursa olsun sabit kalmaları; * sağlayıcı oyun çerçeveleri ve bazı ikon maskeleri bunlara bel bağlar. */ --neutral: 255, 255, 255 !important; --neutral-sc: 0, 2, 5 !important; --static-black: 0, 2, 5 !important; --static-black-hover: 0, 22, 56 !important; --static-black-sc: 255, 255, 255 !important; --static-white: 255, 255, 255 !important; --static-white-hover: 229, 229, 229 !important; --static-white-sc: 0, 2, 5 !important; } /* ══════════════════════════════════════════════════════════════════════════ * SİTE PALETİ — custom.css'in okuduğu eski "ALTIN" isimleri * ────────────────────────────────────────────────────────────────────────── * ⚠️ İSİMLER DEĞİŞMEDİ, DEĞERLER DEĞİŞTİ. Sebebi kritik: * Tema CSS (tam) ve altyapının statik /custom.css'i KURALLARI * `var(--gold)`, `var(--chrome-1)` diye yazıyor; statik dosyaya bizim * erişimimiz yok. Değeri değiştirmek header/navbar/footer/bölüm * şeritlerini TEK HAMLEDE markaya çeker ve hiçbir kuralı kırmaz. * ══════════════════════════════════════════════════════════════════════════ */ html:root { /* Genel zemin — %60 kuralı. Sayfa geçişlerinde içerik boşalınca ekranda * kalan renk bu; kroma ile BİREBİR aynı tutuluyor ki geçişte renk * yanıp sönmesin (eski notta lacivert flaş sorunu böyle çözülmüştü). */ --site-bg: #0F172A !important; /* Bölüm şeridi (.page-view-more) — eskiden altın degradeydi. * Artık: kenarlar antrasit, orta hafif slate, çizgi ve yazı neon mavi. * ⚠️ --site-bar-fg açık kalmalı: bu değişken bölüm BAŞLIĞININ rengi ve * daha önce miras yüzünden siyaha düşüp başlıklar görünmez olmuştu. */ --site-bar-from: #0F172A !important; /* şerit — kenarlar */ --site-bar-to: #1B2A4A !important; /* şerit — orta */ --site-bar-border: rgba(0, 194, 255, .35) !important; /* şerit üst/alt çizgi */ --site-bar-fg: #E6F6FF !important; /* şerit başlık metni */ /* Kroma (header + navbar + footer) — ALTIN ➜ GEMİNİ NEON. * --gold-deep bilinçli olarak MOR: kroma degradesinin dibi mora * indiğinde marka degradesinin (mavi→mor→fuşya) hissi, her yüzeyi * fuşyaya boyamadan ekranda kuruluyor. */ --gold-hi: #7DD8FF !important; /* parlama / ikon üstü */ --gold: #00C2FF !important; /* ana vurgu — metin, kenar */ --gold-deep: #7B2CBF !important; /* gradyan dibi */ --gold-line: rgba(0, 194, 255, .30) !important; --gold-glow: rgba(123, 44, 191, .22) !important; --chrome-1: #0F172A !important; /* kroma zemin — üst */ --chrome-2: #131C31 !important; /* kroma zemin — alt */ }