:root { --white-a015: color-mix(in srgb, var(--white) 1.5%, transparent); --white-a05: color-mix(in srgb, var(--white) 5%, transparent); --white-a08: color-mix(in srgb, var(--white) 8%, transparent); --white-a10: color-mix(in srgb, var(--white) 10%, transparent); --white-a14: color-mix(in srgb, var(--white) 14%, transparent); --white-a24: color-mix(in srgb, var(--white) 24%, transparent); --white-a28: color-mix(in srgb, var(--white) 28%, transparent); --white-a35: color-mix(in srgb, var(--white) 35%, transparent); --white-a40: color-mix(in srgb, var(--white) 40%, transparent); --white-a50: color-mix(in srgb, var(--white) 50%, transparent); --white-a55: color-mix(in srgb, var(--white) 55%, transparent); --white-a72: color-mix(in srgb, var(--white) 72%, transparent); --white-a85: color-mix(in srgb, var(--white) 85%, transparent); /* Decoration, not action: every ambient accent wash (glow, hairline, backlight, inset border, section glyph) mixes this instead of --accent, so a theme can drain the colour out of its ornament while solid --accent still paints the buttons and active states. Defaults to --accent, so a theme that says nothing looks exactly as it did. */ --accent-tint: var(--accent); --accent-tint-light: color-mix(in srgb, var(--accent-tint) 70%, var(--white)); --accent-tint-dark: color-mix(in srgb, var(--accent-tint) 58%, var(--bg-deep)); --accent-a00: color-mix(in srgb, var(--accent-tint) 0%, transparent); --accent-a05: color-mix(in srgb, var(--accent-tint) 5%, transparent); --accent-a07: color-mix(in srgb, var(--accent-tint) 7%, transparent); --accent-a12: color-mix(in srgb, var(--accent-tint) 12%, transparent); --accent-a16: color-mix(in srgb, var(--accent-tint) 16%, transparent); --accent-a22: color-mix(in srgb, var(--accent-tint) 22%, transparent); --accent-a25: color-mix(in srgb, var(--accent-tint) 25%, transparent); --accent-a30: color-mix(in srgb, var(--accent-tint) 30%, transparent); --accent-a38: color-mix(in srgb, var(--accent-tint) 38%, transparent); --accent-a45: color-mix(in srgb, var(--accent-tint) 45%, transparent); --accent-a50: color-mix(in srgb, var(--accent-tint) 50%, transparent); --accent-a55: color-mix(in srgb, var(--accent-tint) 55%, transparent); --accent-a70: color-mix(in srgb, var(--accent-tint) 70%, transparent); --accent-a80: color-mix(in srgb, var(--accent-tint) 80%, transparent); --shadow-accent: 0 6px 18px var(--accent-a30); /* BİRİNCİL DÜĞMENİN YÜZEYİ — düz bir dolgu değil, MALZEME. Sahne siyah, afiş sinematik; onun üstündeki tek düz dikdörtgen düğmeydi. Yüzey üç parçaya ayrıldı: ışığı yakalayan üst yüz, gölgeye inen alt yüz ve ikisinin arasına işlenen renksiz gren (--btn-grain). 🔴 GREN RENKSİZ, BU YÜZDEN TEMA BAŞINA KOPYASI YOK. Dosya 128 grisi çevresinde salınan tek kanallı bir döşeme; rengi `background-blend-mode: overlay` ile ALTINDAKİ yüzden alıyor. Kırmızı temada oksan deri, yeşil temada yeşil deri — aynı 10 kB. 🔴 --accent-light/--accent-dark'tan TÜRETİLMEDİ, bilerek. bababet o ikisini `var(--accent)`e düzleyip düğmenin gradyanını kapatmış; malzemeyi onların üstüne kursaydım tema doku katmanını da sessizce silerdi. Merdiven doğrudan --accent'ten karışıyor, ama isimleri burada: bir tema düz bir düğme istiyorsa üçünü de `var(--accent)` yazıp geri düzleyebilir. */ --btn-face-lit: color-mix(in srgb, var(--accent) 94%, #ffd9a8); --btn-face: color-mix(in srgb, var(--accent) 74%, var(--black)); --btn-face-deep: color-mix(in srgb, var(--accent) 38%, var(--black)); /* Üst kenarın yakaladığı 1px'lik ışık — YÜZEYE YAYILAN parlama değil. İkisi ayrı: yayılan parlaklık düğmeyi cilalı plastiğe çeviriyordu, bu yalnız kenarın kalınlığını gösteriyor. Beyaz değil FİLDİŞİ: bonus kartının mürekkebi de öyle (--gf-gold, promotions.css), düğme aynı ışığı yakalıyor. */ --btn-sheen: color-mix(in srgb, #ffe6c2 34%, transparent); /* Anahtar ışık: yüzeye sol üstten düşen tek kaynak. Sıcak, çünkü kaynağı bir tavan lambası değil sahnedeki abajur. */ --btn-key: color-mix(in srgb, #ffd9a8 22%, transparent); --btn-grain: url("/assets/images/btn-grain.png"); /* YÜZEYİN KENDİSİ, tek yerde. Dört katman, üstten alta: 1 anahtar ışık: sol üstten düşen tek kaynak, sıcak ve dar 2 GREN — siyah/beyaz zerrelerden oluşan renksiz döşeme 3 kenar karartması: yüzey düz bir levha değil, ortası kalkık bir deri 4 yüzün rengi: üstte accent, dibe inerken oksan karanlığı Reçete bir ÖZELLİKTE duruyor çünkü tek bir düğmenin değil: .btn--primary, mobil başlıktaki Kayıt Ol ve profil eylemleri hepsi aynı malzemeyi giyiyor. Üç yere kopyalansaydı dördüncüsü eklendiğinde ya unutulur ya da biri diğerlerinden yarım ton kayardı. 🔴 KARIŞIM KİPİ (`background-blend-mode`) YOK ve olmamalı: gren dosyanın içinde zaten şeffaf. Önce 128 grisinde bir döşeme + `overlay` denendi ve doygun kırmızının üstünde gren KAYBOLDU (gerekçe: gorsel-uretim/buton-doku-uret.cjs). 🔴 ÜSTÜN YARISINI KAPLAYAN BEYAZ PARLAMA DA DENENDİ VE ATILDI: düğmeyi cilalı plastiğe çeviriyordu, sinematik afişin yanında oyuncak duruyordu. Işık artık yüzeye yayılmıyor — 1px kenar çizgisi ve sol üstteki tek sıcak kaynak, gerisi mat. */ --btn-material: radial-gradient(88% 190% at 24% -34%, var(--btn-key) 0%, transparent 60%), var(--btn-grain), radial-gradient(118% 168% at 50% 42%, transparent 26%, var(--black-a35) 100%), linear-gradient(180deg, var(--btn-face-lit) 0%, var(--btn-face) 46%, var(--btn-face-deep) 100%); /* Işık KUVVETLENMİYOR, yaklaşıyor: kaynak yüzeye iniyor ve kenar karartması geri çekiliyor — düğme parlamak yerine öne dönmüş oluyor. */ --btn-material-hover: radial-gradient(96% 200% at 24% -26%, var(--btn-key) 0%, transparent 66%), var(--btn-grain), radial-gradient(118% 168% at 50% 42%, transparent 34%, var(--black-a25) 100%), linear-gradient(180deg, var(--btn-face-lit) 0%, var(--btn-face) 52%, var(--btn-face-deep) 100%); /* Gren TASARIM pikselinde döşeniyor: 128'lik dosya 64'e sıkışınca damar 44px'lik düğmede deri kalıyor, 128'de duvar kâğıdına dönüyordu. Sıra üstteki listeyle birebir aynı — katman eklenirse ÖLÇÜSÜ de buraya eklenmeli. */ --btn-material-size: auto, 64px 64px, auto, auto; --black-a10: color-mix(in srgb, var(--black) 10%, transparent); --black-a20: color-mix(in srgb, var(--black) 20%, transparent); --black-a25: color-mix(in srgb, var(--black) 25%, transparent); --black-a30: color-mix(in srgb, var(--black) 30%, transparent); --black-a35: color-mix(in srgb, var(--black) 35%, transparent); --black-a45: color-mix(in srgb, var(--black) 45%, transparent); --black-a50: color-mix(in srgb, var(--black) 50%, transparent); --black-a60: color-mix(in srgb, var(--black) 60%, transparent); --black-a95: color-mix(in srgb, var(--black) 95%, transparent); --bg-deep-a00: color-mix(in srgb, var(--bg-deep) 0%, transparent); --bg-deep-a42: color-mix(in srgb, var(--bg-deep) 42%, transparent); --bg-deep-a50: color-mix(in srgb, var(--bg-deep) 50%, transparent); --bg-deep-a65: color-mix(in srgb, var(--bg-deep) 65%, transparent); --bg-deep-a78: color-mix(in srgb, var(--bg-deep) 78%, transparent); --bg-deep-a85: color-mix(in srgb, var(--bg-deep) 85%, transparent); --bg-deep-a90: color-mix(in srgb, var(--bg-deep) 90%, transparent); --bg-a35: color-mix(in srgb, var(--bg) 35%, transparent); --bg-a45: color-mix(in srgb, var(--bg) 45%, transparent); --bg-a82: color-mix(in srgb, var(--bg) 82%, transparent); --bg-a92: color-mix(in srgb, var(--bg) 92%, transparent); --blue-a14: color-mix(in srgb, var(--blue) 14%, transparent); --blue-a50: color-mix(in srgb, var(--blue) 50%, transparent); --muted-a05: color-mix(in srgb, var(--muted) 5%, transparent); --muted-a10: color-mix(in srgb, var(--muted) 10%, transparent); --muted-a18: color-mix(in srgb, var(--muted) 18%, transparent); --muted-a30: color-mix(in srgb, var(--muted) 30%, transparent); --muted-a40: color-mix(in srgb, var(--muted) 40%, transparent); --panel-a40: color-mix(in srgb, var(--panel) 40%, transparent); --panel-a65: color-mix(in srgb, var(--panel) 65%, transparent); --panel-a92: color-mix(in srgb, var(--panel) 92%, transparent); --panel-2-a42: color-mix(in srgb, var(--panel-2) 42%, transparent); --panel-2-a80: color-mix(in srgb, var(--panel-2) 80%, transparent); --panel-3-a65: color-mix(in srgb, var(--panel-3) 65%, transparent); --panel-3-a90: color-mix(in srgb, var(--panel-3) 90%, transparent); --accent-bright-a10: color-mix(in srgb, var(--accent-bright) 10%, transparent); --accent-a34: color-mix(in srgb, var(--accent-tint) 34%, transparent); --accent-light-a30: color-mix(in srgb, var(--accent-light) 30%, transparent); --accent-light-a80: color-mix(in srgb, var(--accent-light) 80%, transparent); --accent-dark-a00: color-mix(in srgb, var(--accent-dark) 0%, transparent); --accent-dark-a30: color-mix(in srgb, var(--accent-dark) 30%, transparent); --secondary-a12: color-mix(in srgb, var(--secondary) 12%, transparent); --secondary-a25: color-mix(in srgb, var(--secondary) 25%, transparent); --secondary-a30: color-mix(in srgb, var(--secondary) 30%, transparent); --secondary-a50: color-mix(in srgb, var(--secondary) 50%, transparent); --purple-a20: color-mix(in srgb, var(--purple) 20%, transparent); --teal-a16: color-mix(in srgb, var(--teal) 16%, transparent); --spring-a00: color-mix(in srgb, var(--spring) 0%, transparent); --spring-a30: color-mix(in srgb, var(--spring) 30%, transparent); --spring-a55: color-mix(in srgb, var(--spring) 55%, transparent); --red-a16: color-mix(in srgb, var(--red) 16%, transparent); --red-soft-a12: color-mix(in srgb, var(--red-soft) 12%, transparent); --scrim-a55: rgba(2, 8, 13, 0.55); --crash-flame: #ff4e0c; --crash-flame-a55: color-mix(in srgb, var(--crash-flame) 55%, transparent); --crash-flame-a82: color-mix(in srgb, var(--crash-flame) 82%, transparent); --crash-flame-hot: #ff7812; --crash-flame-hot-a92: color-mix(in srgb, var(--crash-flame-hot) 92%, transparent); --crash-card: #1e202c; --text: var(--white); --stroke: var(--panel-2-a80); --mobile-bg: var(--bg-deep); --mobile-panel: var(--panel); --mobile-panel-2: var(--panel-2); --mobile-muted: var(--muted); --mobile-text: var(--white); --mobile-accent: var(--accent); --social-disc: var(--panel); --social-glyph: var(--muted-4); --notif-wallet: var(--accent); --notif-bonus: #ffb020; --notif-vip: #a855f7; --notif-system: var(--cyan); --notif-game: var(--red); --tier-bronze: var(--bronze); --tier-silver: var(--muted-6); --tier-gold: var(--gold); --tier-platinum: var(--ice); --tier-diamond: var(--orchid); --tier-obsidian: var(--secondary); --chat-name-coral: #ff8a5c; --chat-name-amber: #ffd166; --chat-name-mint: #5cd6a8; --chat-name-sky: #5cc8ff; --chat-name-lilac: #c79bff; --chat-name-pink: #ff7eb6; --chat-name-lime: #7ee787; --chat-name-salmon: #ffb3a0; --chat-name-teal: #6ee7e7; --chat-name-chartreuse: #c2e35c; --help-account: var(--accent); --help-deposits: var(--teal); --help-withdrawals: var(--spring); --help-bonuses: var(--purple); --help-games: #ff3d81; --help-security: var(--secondary); --help-sports: var(--sky); --help-vip: var(--gold); --promo-welcome: var(--accent); --promo-welcome-from: var(--accent-black); --promo-welcome-to: var(--accent-ink); --promo-weekly-reload: #2f9bff; --promo-weekly-reload-from: #041e33; --promo-weekly-reload-to: #0a3f78; --promo-daily-cashback: #ffc531; --promo-daily-cashback-from: #2a1d04; --promo-daily-cashback-to: #6b4a0c; --promo-refer-earn: #22d3c0; --promo-refer-earn-from: #04231f; --promo-refer-earn-to: #0a5148; --promo-vip-levelup: #b56bff; --promo-vip-levelup-from: #1f0836; --promo-vip-levelup-to: #3a0f6b; --promo-web3-airdrop: #5df2b0; --promo-web3-airdrop-from: var(--accent-black); --promo-web3-airdrop-to: #0a4a4f; --promo-race-50k: var(--secondary); --promo-race-50k-from: #2a0f06; --promo-race-50k-to: #7a230c; --promo-lucky-monday: #c04dff; --promo-lucky-monday-from: #240a3a; --promo-lucky-monday-to: var(--violet-ink); --promo-free-spins-friday: var(--cyan); --promo-free-spins-friday-from: #041b2b; --promo-free-spins-friday-to: #0a4a6b; --promo-jackpot-drop: #ff4fa3; --promo-jackpot-drop-from: #2d0619; --promo-jackpot-drop-to: #7a1049; --winner-glow-purple: 166 0 255; --winner-glow-blue: 0 102 255; --winner-glow-teal: 0 255 162; --winner-glow-pink: 255 0 221; --winner-glow-green: 136 255 0; --winner-glow-cyan: 0 217 255; --winner-glow-orange: 255 51 0; --rtp-up: 46 230 166; --rtp-down: 255 92 92; --rtp-flat: 122 150 166; }