/* |-------------------------------------------------------------------------- | LUTHERBET — MASTER THEME TOKENS |-------------------------------------------------------------------------- | Bu dosya tüm site renklerini merkezi olarak tanımlar. | Admin panelinden değiştirilebilir. | Tüm diğer CSS dosyaları bu değişkenleri referans alır. | | ÖNEMLİ: Bu dosya EN İLK olarak yüklenmelidir (diğer tüm CSS'lerden önce). | Injection script bu :root değerlerini override eder. |-------------------------------------------------------------------------- */ :root { /* ============================================================ PRIMARY / BRAND (Ana marka rengi — default: sarı/altın) ============================================================ */ --primary: #f3c600; --primary-light: #fbbf24; --primary-dark: #e6a800; --primary-darker: #b8862b; --primary-soft: rgba(243, 198, 0, 0.10); --primary-glow: rgba(243, 198, 0, 0.35); --primary-card: rgba(243, 198, 0, 0.06); --primary-hover: #ffd84a; --primary-text: #0e0e12; --primary-rgb: 243, 198, 0; /* ============================================================ SECONDARY (İkincil vurgu rengi — default: mavi) ============================================================ */ --secondary: #2563eb; --secondary-light: #3b82f6; --secondary-dark: #1d4ed8; --secondary-soft: rgba(37, 99, 235, 0.12); /* ============================================================ SUCCESS (Başarı/Onay — default: yeşil) ============================================================ */ --success: #22c55e; --success-light: #4ade80; --success-dark: #16a34a; --success-soft: rgba(34, 197, 94, 0.12); /* ============================================================ DANGER / ERROR (Hata/Tehlike — default: kırmızı) ============================================================ */ --danger: #ef4444; --danger-light: #f87171; --danger-dark: #dc2626; --danger-soft: rgba(239, 68, 68, 0.12); /* ============================================================ WARNING (Uyarı — default: turuncu/amber) ============================================================ */ --warning: #f59e0b; --warning-light: #fbbf24; --warning-dark: #d97706; --warning-soft: rgba(245, 158, 11, 0.12); /* ============================================================ INFO (Bilgi — default: açık mavi) ============================================================ */ --info: #3b82f6; --info-light: #60a5fa; --info-dark: #2563eb; --info-soft: rgba(59, 130, 246, 0.12); /* ============================================================ PURPLE (Bonus/Promosyon — default: mor) ============================================================ */ --purple: #a855f7; --purple-light: #c084fc; --purple-dark: #7c3aed; --purple-soft: rgba(168, 85, 247, 0.12); /* ============================================================ CYAN (Canlı/Progress — default: camgöbeği) ============================================================ */ --cyan: #06b6d4; --cyan-light: #22d3ee; --cyan-dark: #0891b2; /* ============================================================ BACKGROUND (Arka plan renkleri — en koyudan en açığa) ============================================================ */ --bg-base: #050511; --bg-deep: #05080c; --bg-page: #070b10; --bg-panel: #0b1017; --bg-panel-2: #0e141d; --bg-panel-3: #121923; --bg-card: #16161d; --bg-card-hover: #1e1e27; --bg-input: #0a0b0f; --bg-elevated: #111118; --bg-modal: #11111a; --bg-tooltip: #1a1a28; /* ============================================================ SURFACE (Yüzeysel arka planlar — semi-transparent) ============================================================ */ --surface-card: rgba(255, 255, 255, 0.035); --surface-card-hover:rgba(255, 255, 255, 0.065); --surface-overlay: rgba(0, 0, 0, 0.60); --surface-glass: rgba(14, 14, 24, 0.70); /* ============================================================ TEXT (Metin renkleri) ============================================================ */ --text-primary: #ffffff; --text-secondary: #e8e8ef; --text-muted: #8b92a5; --text-dim: #5b6272; --text-inverse: #0e0e12; --text-on-primary: #0e0e12; /* ============================================================ BORDER (Kenar çizgileri) ============================================================ */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.20); --border-subtle: rgba(255, 255, 255, 0.045); --border-focus: var(--primary); --border-accent: rgba(243, 198, 0, 0.08); --border-accent-strong: rgba(243, 198, 0, 0.18); /* ============================================================ GRADIENTS (Gradyan renkleri — ana site gradyanları) ============================================================ */ --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-dark)); --grad-secondary: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); --grad-success: linear-gradient(135deg, var(--success), var(--success-dark)); --grad-danger: linear-gradient(135deg, var(--danger), var(--danger-dark)); --grad-gold: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); --grad-shell: linear-gradient(180deg, var(--primary-darker), var(--primary-dark)); --grad-amber: linear-gradient(90deg, var(--warning), var(--primary-light), var(--primary)); /* ============================================================ SHADOW / GLOW (Gölgeler) ============================================================ */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.34); --shadow-xl: 0 26px 70px rgba(0, 0, 0, 0.40); --glow-primary: 0 0 20px var(--primary-glow); --glow-secondary: 0 0 20px var(--secondary-soft); --glow-success: 0 0 20px var(--success-soft); --glow-danger: 0 0 20px var(--danger-soft); /* ============================================================ TYPOGRAPHY (Yazı tipleri) ============================================================ */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ============================================================ SPACING / RADIUS (Boşluklar ve yuvarlaklık) ============================================================ */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ============================================================ SIDEBAR ============================================================ */ --sidebar-width: 218px; --sidebar-bg: var(--bg-page); --sidebar-text: var(--text-secondary); --sidebar-muted: var(--text-muted); --sidebar-active: var(--primary); --sidebar-hover-bg: var(--surface-card); /* ============================================================ HEADER ============================================================ */ --header-height: 72px; --header-bg: var(--bg-panel); --header-border: var(--primary); --header-text: var(--text-secondary); /* ============================================================ BUTTONS (Buton renkleri) ============================================================ */ --btn-primary-bg: var(--primary); --btn-primary-text: var(--text-on-primary); --btn-primary-hover: var(--primary-hover); --btn-secondary-bg: var(--secondary); --btn-secondary-text:#ffffff; --btn-success-bg: var(--success); --btn-danger-bg: var(--danger); --btn-warning-bg: var(--warning); --btn-ghost-bg: transparent; --btn-ghost-border: var(--border-strong); --btn-ghost-text: var(--text-secondary); /* ============================================================ INPUTS (Form elemanları) ============================================================ */ --input-bg: var(--bg-input); --input-border: var(--border); --input-border-focus:var(--primary); --input-text: var(--text-primary); --input-placeholder: var(--text-dim); /* ============================================================ SCROLLBAR ============================================================ */ --scrollbar-track: var(--bg-panel); --scrollbar-thumb: var(--primary-dark); --scrollbar-hover: var(--primary); /* ============================================================ PROGRESS / LOADING ============================================================ */ --progress-bg: var(--bg-panel); --progress-fill: var(--primary); --progress-glow: var(--primary); /* ============================================================ BADGE / PILL ============================================================ */ --badge-gold-bg: var(--primary); --badge-gold-text: var(--text-on-primary); --badge-success-bg: var(--success-soft); --badge-success-text:var(--success); --badge-danger-bg: var(--danger-soft); --badge-danger-text: var(--danger); /* ============================================================ NAVIGATION (Sekme/Link renkleri) ============================================================ */ --nav-active: var(--primary); --nav-hover: var(--primary-light); --nav-text: var(--text-muted); --nav-text-active: var(--primary); /* ============================================================ DEPOSIT / WITHDRAW (Para sayfası renkleri) ============================================================ */ --deposit-gold: var(--primary); --deposit-gold-light:var(--primary-light); --deposit-gold-dark: var(--primary-dark); --wd-gold: var(--primary); --wd-gold-light: var(--primary-light); --wd-gold-dark: var(--primary-dark); /* ============================================================ ACCOUNT (Hesap sayfası renkleri) ============================================================ */ --account-menu-gold: var(--primary); --account-menu-gold-light: var(--primary-light); --account-menu-gold-dark: var(--primary-dark); /* ============================================================ BONUS (Bonus sayfası renkleri) ============================================================ */ --bonus-yellow: var(--primary); --bonus-blue: var(--secondary); --bonus-green: var(--success); /* ============================================================ VIP / AWARDS ============================================================ */ --vip-accent: var(--primary); --vip-accent-light: var(--primary-light); --aw-gold: var(--primary-light); --aw-gold-soft: var(--primary-soft); /* ============================================================ GAME CARD ============================================================ */ --game-card-bg: var(--surface-card); --game-card-hover: var(--surface-card-hover); --game-card-border: var(--border); --game-card-text: var(--text-secondary); /* ============================================================ ANNOUNCEMENT / TOAST ============================================================ */ --announcement-bg: var(--bg-panel); --announcement-border: var(--border); --toast-bg: var(--bg-elevated); --toast-border: var(--border-strong); /* ============================================================ FOOTER ============================================================ */ --footer-bg: var(--bg-deep); --footer-text: var(--text-muted); --footer-link: var(--text-muted); --footer-link-hover: var(--primary); /* ============================================================ GLASS / SURFACE EFFECTS ============================================================ */ --glass-bg-subtle: rgba(255,255,255,.025); --glass-bg-medium: rgba(255,255,255,.055); --glass-bg-strong: rgba(255,255,255,.08); --glass-border: rgba(255,255,255,.07); --glass-border-strong: rgba(255,255,255,.12); --surface-overlay: rgba(0,0,0,.55); --surface-overlay-light: rgba(0,0,0,.35); --surface-overlay-heavy: rgba(0,0,0,.75); /* ============================================================ SHADOW TOKENS ============================================================ */ --shadow-sm: 0 2px 8px rgba(0,0,0,.15); --shadow-md: 0 4px 16px rgba(0,0,0,.25); --shadow-lg: 0 8px 32px rgba(0,0,0,.35); --shadow-xl: 0 12px 48px rgba(0,0,0,.45); /* ============================================================ SIDEBAR PROMO CARD ============================================================ */ --promo-gold-glow: rgba(var(--primary-rgb),.28); --promo-gold-inset: rgba(var(--primary-rgb),.07); --promo-gold-before: rgba(var(--primary-rgb),.34); /* ============================================================ HEADER BUTTONS ============================================================ */ --header-btn-border: rgba(255,255,255,.09); --header-btn-bg: rgba(255,255,255,.025); --header-btn-hover: rgba(255,255,255,.05); --register-btn-border: rgba(var(--primary-rgb),.58); --register-btn-shadow: rgba(var(--primary-rgb),.22); /* ============================================================ FOOTER TOKENS ============================================================ */ --footer-item-border: rgba(255,255,255,.055); --footer-item-bg: rgba(255,255,255,.025); --footer-social-border: rgba(255,255,255,.07); /* ============================================================ RGB TOKENS (for rgba() usage in JS injection) ============================================================ */ --primary-rgb: 243, 198, 0; --secondary-rgb: 37, 99, 235; --success-rgb: 34, 197, 94; --danger-rgb: 239, 68, 68; --warning-rgb: 245, 158, 11; --purple-rgb: 168, 85, 247; --cyan-rgb: 6, 182, 212; --info-rgb: 59, 130, 246; --text-muted-rgb: 139, 146, 165; --text-dim-rgb: 91, 98, 114; --danger-dark-rgb: 185, 28, 28; --secondary-dark-rgb: 29, 78, 216; --purple-dark-rgb: 124, 58, 237; }