/* ============================================================ BETMALDIVES — PREMIUM MODERN THEME Primary: #FAE202 (electric yellow / gold) Secondary: #61EBD8 (mint teal / cyan) Base: #141622 (deep navy) Ara renkler: Yellow mid: #F5C800 / Yellow soft: rgba(250,226,2,α) Teal mid: #3DD8C3 / Teal soft: rgba(97,235,216,α) Navy up-1: #1C2035 / Navy up-2: #242840 Navy up-3: #2C3050 / Navy up-4: #343864 ============================================================ */ :root { /* ── LOGO & IMAGES ── */ --header-footer-logo: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/GJASJVKCKADSJadkgfjsdkgq/logos/Td8lDFQkxF9Ry1BvSyjxD2e0lGRg5IUAYS6KbmxY.png"); --homepage-entrance-bg-image: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/betyonerv2/enterence-bg.png"); /* ── BRAND CORE ── */ --brand-primary: #FAE202 !important; --accent: #FAE202 !important; --accent-rgb: 250, 226, 2; --brand-primary-rgb: 250, 226, 2; --brand-primary-contrast: #0D0F1A; --brand-secondary: #61EBD8; --brand-secondary-rgb: 97, 235, 216; --accent-soft: rgba(250, 226, 2, 0.12); --accent-soft-2: rgba(250, 226, 2, 0.07); --accent-soft-3: rgba(250, 226, 2, 0.18); --accent-soft2: var(--accent-soft-2); --accent-soft3: var(--accent-soft-3); --accent-border: rgba(250, 226, 2, 0.30); --accent-border-strong: rgba(250, 226, 2, 0.52); --accent-glow: rgba(250, 226, 2, 0.35); /* ── SURFACES — Navy depth layers ── */ --surface-bg: #0E1018; --surface-bg-rgb: 14, 16, 24; --surface-1: #141622; --surface-2: #1A1E2E; --surface-3: #202438; --surface-4: #262B44; --surface-card: var(--surface-2); --surface-modal: #181C2C; --surface-elevated: #1E2238; --surface-border: rgba(255, 255, 255, 0.08); --surface-border-soft: rgba(255, 255, 255, 0.055); --surface-border-strong: rgba(255, 255, 255, 0.14); /* ── LEGACY ALIASES ── */ --legacy-bg-1: #1A1E30; --legacy-bg-2: #20263C; --legacy-bg-3: #282E48; --legacy-text-muted: #6B78A8; /* ── TEXT ── */ --text-primary: #F0F2FF; --text-secondary: rgba(240, 242, 255, 0.86); --text-muted: rgba(240, 242, 255, 0.60); --text-soft: rgba(240, 242, 255, 0.42); --text-disabled: rgba(240, 242, 255, 0.28); --text-on-accent: #0D0F1A; /* ── STATE COLORS ── */ --success: #61EBD8; --success-rgb: 97, 235, 216; --warning: #FAE202; --warning-rgb: 250, 226, 2; --danger: #FF4757; --danger-rgb: 255, 71, 87; --info: #61EBD8; --info-rgb: 97, 235, 216; --state-success-soft: rgba(97, 235, 216, 0.14); --state-warning-soft: rgba(250, 226, 2, 0.14); --state-danger-soft: rgba(255, 71, 87, 0.13); --state-info-soft: rgba(97, 235, 216, 0.14); /* ── RADIUS ── */ --radius-2xs: 3px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-3xl: 28px; --radius-pill: 999px; /* ── BORDER ── */ --border-thin: 1px; --border-medium: 2px; /* ── SHADOWS ── */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.30); --shadow-sm: 0 4px 12px rgba(0,0,0,0.36); --shadow-md: 0 8px 24px rgba(0,0,0,0.44); --shadow-lg: 0 14px 36px rgba(0,0,0,0.52); --shadow-xl: 0 20px 50px rgba(0,0,0,0.60); --shadow-accent-sm: 0 6px 18px rgba(250, 226, 2, 0.25); --shadow-accent-md: 0 10px 28px rgba(250, 226, 2, 0.36); --shadow-accent-lg: 0 14px 36px rgba(250, 226, 2, 0.44); --shadow-teal-sm: 0 6px 18px rgba(97, 235, 216, 0.22); --shadow-teal-md: 0 10px 28px rgba(97, 235, 216, 0.32); /* ── GRADIENTS ── */ --gradient-primary: linear-gradient(135deg, #FAE202, #F5C800); --gradient-primary-horizontal: linear-gradient(90deg, #FAE202, #F5C800); --gradient-secondary: linear-gradient(135deg, #61EBD8, #3DD8C3); --gradient-overlay: linear-gradient(180deg, rgba(14,16,24,0.92), rgba(10,11,18,0.95)); --gradient-surface: linear-gradient(180deg, var(--surface-2), var(--surface-1)); --gradient-chip: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); --gradient-withdraw: linear-gradient(90deg, #FF6B81 0%, #FF4757 40%, #D63031 70%, #B71C1C 100%); --gradient-hero: linear-gradient(135deg, rgba(250,226,2,0.08) 0%, rgba(97,235,216,0.06) 50%, transparent 100%); --gradient-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); /* ── LEGACY BG ── */ --panel-top: #1A1E2E; --panel-bottom: #141622; --panel-bg: var(--surface-2); --panel-bg2: var(--surface-1); --modalbg: linear-gradient(180deg, #1A1E2E, #141622); --linearbg: radial-gradient(800px 300px at 15% 0%, rgba(250,226,2,0.05), transparent 60%), radial-gradient(600px 250px at 85% 100%, rgba(97,235,216,0.04), transparent 60%), linear-gradient(180deg, rgba(20,22,34,0.96), rgba(14,16,24,0.98)); --linearbgreversed: radial-gradient(800px 300px at 85% 0%, rgba(250,226,2,0.05), transparent 60%), radial-gradient(600px 250px at 15% 100%, rgba(97,235,216,0.04), transparent 60%), linear-gradient(180deg, rgba(20,22,34,0.96), rgba(14,16,24,0.98)); --lineartooltipbg: linear-gradient(180deg, rgba(20,22,34,0.98), rgba(14,16,24,0.99)); /* ── PROGRESS ── */ --progressbg: linear-gradient( 90deg, rgba(97,235,216,0.80) 0%, rgba(97,235,216,0.90) 30%, rgba(250,226,2,0.95) 70%, rgba(250,226,2,1) 100% ); /* ── INPUTS ── */ --input-bg: var(--linearbg); --input-bg-solid: var(--legacy-bg-3); --input-border: rgba(255,255,255,0.10); --input-border-focus: rgba(250, 226, 2, 0.60); --input-placeholder: rgba(240,242,255,0.38); /* ── BUTTONS ── */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 88%, #ffffff 12%); --btn-primary-bg-active: color-mix(in srgb, var(--accent) 90%, #000000 10%); --btn-primary-color: var(--brand-primary-contrast); --btn-primary-radius: var(--radius-sm); --btn-primary-shadow: var(--shadow-accent-sm); --btn-primary-shadow-active: var(--shadow-accent-md); --btn-primary-disabled-opacity: 0.50; --btn-secondary-bg: var(--legacy-bg-3); --btn-secondary-bg-hover: color-mix(in srgb, var(--legacy-bg-3) 88%, #ffffff 12%); --btn-secondary-color: var(--text-primary); --btn-secondary-border: var(--surface-border-soft); --btn-ghost-bg: rgba(255,255,255,0.05); --btn-ghost-bg-hover: rgba(255,255,255,0.10); --btn-ghost-color: var(--text-primary); /* ── HEADER ── */ --header-register-bg: var(--btn-primary-bg); --header-register-color: var(--btn-primary-color); --wallet-btn-bg-start: #1A1E2E; --wallet-btn-bg-end: var(--accent); --wallet-btn-gradient: linear-gradient(90deg, #1A1E2E 0%, #FAE202 100%); --wallet-btn-color: var(--brand-primary-contrast); /* ── TABS / CHIPS ── */ --tab-active-bg: var(--accent); --tab-active-color: var(--brand-primary-contrast); --tab-active-border: var(--accent); --tab-inactive-bg: transparent; --tab-inactive-color: var(--text-muted); --tab-inactive-border: var(--surface-border-soft); --chip-bg: rgba(255,255,255,0.05); --chip-border: rgba(255,255,255,0.08); --chip-color: var(--text-muted); --chip-active-bg: rgba(250, 226, 2, 0.12); --chip-active-border: rgba(250, 226, 2, 0.45); --chip-active-color: #FAE202; /* ── CARDS / MODALS ── */ --card-bg: var(--gradient-surface); --card-border: var(--surface-border-soft); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-md); --modal-bg: var(--modalbg); --modal-border: var(--surface-border-soft); --modal-radius: var(--radius-lg); --modal-shadow: var(--shadow-xl); /* ── WALLET ── */ --wallet-deposit-bg: var(--accent); --wallet-withdraw-gradient: var(--gradient-withdraw); --wallet-footer-btn-bg: var(--legacy-bg-3); --wallet-footer-btn-color: var(--text-primary); /* ── GAME OPENER ── */ --game-opener-border: var(--accent); --game-opener-overlay: linear-gradient(0deg, rgba(14,16,24,0.88) 0%, rgba(14,16,24,0.60) 100%); --game-play-btn-bg: var(--accent); --game-play-btn-color: var(--brand-primary-contrast); --game-demo-btn-bg: var(--legacy-text-muted); --game-demo-btn-color: #F0F2FF; /* ── SLIDER ── */ --slider-nav-bg: rgba(14,16,24,0.85); --slider-nav-bg-hover: rgba(250, 226, 2, 0.22); --slider-nav-border: rgba(250, 226, 2, 0.32); --slider-nav-color: #F0F2FF; --slider-pagination-dot: rgba(255,255,255,0.25); --slider-pagination-dot-active: var(--accent); /* ── TYPOGRAPHY ── */ --font-family-regular: "Rubik", sans-serif; --font-family-medium: "Rubik Medium", sans-serif; --font-family-semibold: "Rubik SemiBold", sans-serif; --font-family-bold: "Rubik Bold", sans-serif; /* ── TOP SEARCH ── */ --top-search-form-border: 1px solid rgba(255,255,255,0.08); --top-search-form-radius: 10px; --top-search-form-margin-top: 24px; --top-search-form-margin-bottom: 24px; --top-search-form-padding-x: 14px; --top-search-form-height: 48px; --top-search-form-line-height: 48px; --top-search-form-font-size: 0px; --top-search-form-bg: var(--linearbg); --top-search-form-font-family: var(--font-family-medium); --top-search-icon-color: rgba(97, 235, 216, 0.70); --top-search-input-color: var(--text-primary); --top-search-input-placeholder: rgba(240,242,255,0.38); --top-search-focus-radius: 14px; --top-search-focus-shadow: 0 24px 72px rgba(0,0,0,0.65), 0 0 0 1px rgba(250, 226, 2, 0.22), 0 0 32px rgba(250, 226, 2, 0.10); --top-search-layer-radius: 16px; --top-search-layer-border: 1px solid rgba(255,255,255,0.08); --top-search-layer-border-bottom: 8px solid rgba(255,255,255,0.06); --top-search-layer-bg: rgba(14,16,24,0.80); --top-search-layer-shadow: 0 20px 60px rgba(0,0,0,0.65); --top-search-layer-blur: 16px; --top-search-recent-wrap-radius: 10px; --top-search-recent-wrap-border: 1px solid rgba(97,235,216,0.22); --top-search-recent-wrap-bg: linear-gradient(180deg, rgba(14,16,24,0.90), rgba(10,11,18,0.92)); --top-search-recent-wrap-shadow: 0 12px 28px rgba(0,0,0,0.40); --top-search-recent-chip-radius: 999px; --top-search-recent-chip-border: 1px solid rgba(97,235,216,0.40); --top-search-recent-chip-bg: linear-gradient(135deg, rgba(97,235,216,0.16), rgba(97,235,216,0.08)); --top-search-recent-chip-color: #E0FFFE; --top-search-recent-chip-font-family: var(--font-family-semibold); --top-search-recent-chip-shadow: 0 4px 12px rgba(97,235,216,0.18), inset 0 1px 0 rgba(255,255,255,0.12); /* ── LOWBAR ── */ --lb-bg: rgba(14,16,24,0.82); --lb-stroke: rgba(255,255,255,0.07); --lb-stroke-2: rgba(255,255,255,0.04); --lb-text: rgba(240,242,255,0.88); --lb-muted: rgba(240,242,255,0.55); --lb-active: var(--accent); --lb-shadow: 0 -8px 40px rgba(0,0,0,0.60); --lb-shadow-soft: 0 -4px 20px rgba(0,0,0,0.40); --lb-search-bg: #1A1E2E; --lb-radius: 22px; --lb-radius-sm: 18px; --lb-surface-gradient: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); --lb-wallet-ring-color: rgba(250, 226, 2, 0.55); --lb-wallet-ring-size: 0.2rem; --lb-wallet-glow: radial-gradient(circle, rgba(250,226,2,0.16), transparent 65%); --lb-wallet-glow-radius: radial-gradient(circle, rgba(250,226,2,0.20), transparent 62%); --lb-chat-bg: linear-gradient(135deg, rgba(250,226,2,0.92), rgba(245,200,0,0.72)); --lb-chat-border: rgba(250, 226, 2, 0.50); --lb-chat-color: #0D0F1A; --lb-chat-shadow: 0 8px 20px rgba(250,226,2,0.22), 0 4px 16px rgba(0,0,0,0.36); --lb-chat-shadow-hover: 0 10px 26px rgba(250,226,2,0.32), 0 6px 20px rgba(0,0,0,0.42); /* ── SIDEBAR TABS ── */ --sidebar-tab-casino-bg-image: linear-gradient(180deg, rgba(250,226,2,0.90), rgba(245,200,0,0.90)); --sidebar-tab-sportsbook-bg-image: linear-gradient(180deg, rgba(97,235,216,0.90), rgba(61,216,195,0.90)); /* ── BONUS REQUEST ── */ --bonus-request-tab-bg: var(--tab-inactive-bg); --bonus-request-tab-border: var(--tab-inactive-border); --bonus-request-tab-text: var(--tab-inactive-color); --bonus-request-tab-active-bg: var(--tab-active-bg); --bonus-request-tab-active-border: var(--tab-active-border); --bonus-request-tab-active-text: var(--tab-active-color); --bonus-request-card-bg: var(--card-bg); --bonus-request-card-border: var(--card-border); --bonus-request-card-shadow: var(--card-shadow); --bonus-request-info-bg: rgba(250,226,2,0.10); --bonus-request-info-border: rgba(250,226,2,0.36); --bonus-request-info-color: var(--text-primary); --bonus-request-button-bg: var(--btn-primary-bg); --bonus-request-button-text: var(--btn-primary-color); --bonus-request-empty-bg: rgba(255,255,255,0.02); --bonus-request-empty-border: var(--surface-border-soft); --bonus-request-empty-text: var(--text-muted); /* ── VIP ── */ --vip-accent: var(--accent); --vip-accent-rgb: var(--accent-rgb); --vip-bg0: var(--surface-bg); --vip-bg1: var(--surface-2); --vip-card-bg: rgba(255,255,255,0.04); --vip-card-border: rgba(255,255,255,0.07); --vip-card-border-soft: rgba(255,255,255,0.04); --vip-card-hover-bg: rgba(255,255,255,0.06); --vip-text: var(--text-secondary); --vip-muted: var(--text-soft); --vip-chip-bg: rgba(255,255,255,0.04); --vip-chip-border: rgba(255,255,255,0.08); --vip-chip-active-bg: rgba(250,226,2,0.12); --vip-chip-active-border: rgba(250,226,2,0.28); --vip-tag-bg: rgba(0,0,0,0.20); --vip-gift-tag-bg: rgba(250,226,2,0.08); --vip-gift-tag-border: rgba(250,226,2,0.16); --vip-button-border: rgba(250,226,2,0.24); --vip-button-bg: linear-gradient(180deg, rgba(250,226,2,0.18), rgba(250,226,2,0.08)); --vip-button-border-hover: rgba(250,226,2,0.42); --vip-link: rgba(250,226,2,0.92); --vip-link-border: rgba(250,226,2,0.32); --vip-link-border-hover: rgba(250,226,2,0.62); /* ── MISC ── */ --focus-ring: 0 0 0 3px rgba(250, 226, 2, 0.24); --divider: var(--surface-border-soft); /* ── NOTIFICATIONS ── */ --notif-badge-bg: #FAE202; --notif-badge-border: rgba(13,15,26,0.50); --notif-panel-bg: var(--lineartooltipbg); --notif-panel-border: rgba(255,255,255,0.06); --notif-panel-shadow: 0 20px 48px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.05); --notif-empty-bg: rgba(250,226,2,0.06); --notif-empty-border: rgba(255,255,255,0.06); --notif-item-bg: rgba(255,255,255,0.03); --notif-item-bg-hover: rgba(255,255,255,0.055); --notif-item-border: rgba(255,255,255,0.06); --notif-item-border-hover: rgba(250,226,2,0.22); --notif-track-thumb: rgba(255,255,255,0.08); /* ── WALLET SETTINGS ── */ --wgs-text: rgba(240,242,255,0.92); --wgs-muted: rgba(240,242,255,0.50); --wgs-panel-bg: rgba(14,16,24,0.80); --wgs-panel-border: rgba(255,255,255,0.05); --wgs-block-bg: rgba(255,255,255,0.03); --wgs-block-bg-hover: rgba(255,255,255,0.045); --wgs-block-border: rgba(255,255,255,0.055); --wgs-switch-on-bg: rgba(250,226,2,0.14); --wgs-switch-on-border: rgba(250,226,2,0.28); --wgs-switch-knob: rgba(255,255,255,0.30); --wgs-switch-knob-on: #FAE202; --wgs-dot-bg: rgba(250,226,2,0.08); --wgs-dot-border: rgba(250,226,2,0.14); --wgs-dot-ring: rgba(250,226,2,0.22); --wgs-save-border: rgba(97,235,216,0.24); --wgs-save-bg: linear-gradient(90deg, rgba(14,16,24,0.95), rgba(97,235,216,0.36)); /* ── GAME PAGE ── */ --game-theater-overlay: rgba(0,0,0,0.70); --game-overlay-soft: rgba(0,0,0,0.60); --game-fs-close-bg: var(--legacy-bg-3); --game-switch-bg: var(--legacy-bg-3); --game-switch-knob: var(--legacy-bg-2); --game-switch-active-gradient: linear-gradient(90deg, #3DD8C3, #61EBD8, #FAE202); --game-bets-empty-bg: linear-gradient(145deg, rgba(20,22,34,0.95), rgba(14,16,24,0.90)); --game-bets-empty-border: rgba(250,226,2,0.24); --game-bets-empty-icon-bg: rgba(250,226,2,0.10); --game-bets-empty-icon-border: rgba(250,226,2,0.26); --game-bets-empty-icon-shadow: 0 8px 28px rgba(0,0,0,0.55); --game-bets-empty-title: #F0F2FF; --game-bets-empty-text: rgba(240,242,255,0.65); --game-bets-empty-button-bg: rgba(250,226,2,0.10); --game-bets-empty-button-border: rgba(250,226,2,0.35); --game-bets-empty-button-hover-bg: rgba(250,226,2,0.18); --game-bets-empty-button-hover-border: rgba(250,226,2,0.55); /* ── FAVORITES ── */ --favorites-empty-bg: linear-gradient(140deg, rgba(20,22,34,0.96), rgba(14,16,24,0.98)); --favorites-empty-border: rgba(250,226,2,0.24); --favorites-empty-shadow: inset 0 1px 0 rgba(250,226,2,0.10), 0 20px 48px rgba(0,0,0,0.50); --favorites-empty-icon-bg: rgba(250,226,2,0.10); --favorites-empty-icon-border: rgba(250,226,2,0.30); --favorites-empty-icon-shadow: 0 8px 28px rgba(250,226,2,0.18); --favorites-empty-title: #F0F2FF; --favorites-empty-text: rgba(240,242,255,0.60); --favorites-empty-btn-bg: linear-gradient(135deg, #FAE202, #F5C800); --favorites-empty-btn-border: rgba(250,226,2,0.55); --favorites-empty-btn-shadow: 0 8px 24px rgba(250,226,2,0.28); /* ── EVENTS / RACES ── */ --event-trophy-bg: rgba(0,0,0,0.20); --event-trophy-border: rgba(250,226,2,0.30); --event-card-border: rgba(255,255,255,0.07); --event-divider: rgba(255,255,255,0.08); --event-title: #F0F2FF; --event-label: rgba(250,226,2,0.90); --event-muted: rgba(240,242,255,0.55); --event-stat-label: rgba(97,235,216,0.80); --event-cta-bg: var(--gradient-primary); --event-cta-color: var(--brand-primary-contrast); --event-progress-track: rgba(14,16,24,0.80); /* ── WITHDRAW PROGRESS ── */ --withdraw-progress-bg: rgba(14,16,24,0.80); --withdraw-progress-border: rgba(250,226,2,0.24); --withdraw-progress-track: rgba(20,22,34,0.90); --withdraw-progress-fill: linear-gradient(90deg, #61EBD8 0%, #FAE202 100%); --withdraw-progress-stat-bg: rgba(255,255,255,0.04); --withdraw-progress-label: rgba(97,235,216,0.75); --withdraw-progress-value: #F0F2FF; --withdraw-progress-note: rgba(250,226,2,0.70); /* ── CHALLENGES ── */ --challenge-filter-bg: rgba(20,22,34,0.60); --challenge-filter-border: rgba(255,255,255,0.08); --challenge-filter-text: var(--text-muted); --challenge-filter-text-hover: var(--text-primary); --challenge-filter-active-bg: var(--linearbg); --challenge-filter-active-text: var(--text-primary); --challenge-filter-active-ring: rgba(250,226,2,0.30); --challenge-card-radius: var(--radius-md); --challenge-card-bg: radial-gradient(100% 70% at 0% 0%, rgba(250,226,2,0.10) 0%, transparent 55%), radial-gradient(80% 60% at 100% 100%, rgba(97,235,216,0.08) 0%, transparent 55%), linear-gradient(160deg, var(--surface-3) 0%, var(--surface-2) 100%); --challenge-card-shadow: 0 8px 24px rgba(0,0,0,0.36), inset 0 0 0 1px rgba(255,255,255,0.04); --challenge-card-sheen: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 40%); --challenge-card-overlay-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 -40px 56px rgba(10,11,18,0.36); --challenge-image-fallback: var(--surface-3); --challenge-title: #F0F2FF; --challenge-target: rgba(250,226,2,0.85); --challenge-label: rgba(240,242,255,0.55); --challenge-value: #F0F2FF; --challenge-author: #F0F2FF; --challenge-claimed-divider: rgba(250,226,2,0.14); --challenge-completed-ring: rgba(97,235,216,0.22); --challenge-completed-bg: linear-gradient(180deg, rgba(97,235,216,0.12), rgba(97,235,216,0.06)); --challenge-control-label: rgba(240,242,255,0.65); --challenge-control-btn-bg: rgba(14,16,24,0.92); --challenge-control-btn-border: rgba(255,255,255,0.08); --challenge-control-btn-text: #F0F2FF; --challenge-control-btn-icon: rgba(240,242,255,0.80); --challenge-control-badge-bg: rgba(250,226,2,0.14); --challenge-control-badge-border: rgba(250,226,2,0.30); --challenge-control-badge-text: #FAE202; --challenge-dropdown-bg: #F0F2FF; --challenge-dropdown-text: #0D0F1A; --challenge-dropdown-border: rgba(0,0,0,0.10); --challenge-dropdown-divider: rgba(0,0,0,0.07); --challenge-dropdown-item-hover: rgba(0,0,0,0.05); --challenge-dropdown-shadow: 0 16px 44px rgba(0,0,0,0.40); --challenge-dropdown-active: #FAE202; --challenge-provider-pill-bg: linear-gradient(90deg, #FAE202, #F5C800); --challenge-provider-pill-text: #0D0F1A; /* ── TOURNAMENT ── */ --tournament-button-bg: linear-gradient(135deg, #FAE202, #F5C800); --tournament-button-border: rgba(250,226,2,0.50); --tournament-button-color: var(--brand-primary-contrast); --tournament-button-radius: var(--radius-xs); --tournament-button-shadow: 0 8px 24px rgba(250,226,2,0.28); --tournament-button-hover-filter: brightness(1.08); /* ── GENERAL TABS ── */ --general-tabs-text: rgba(240,242,255,0.45); --general-tabs-active-text: #FAE202; --general-tabs-active-font: "Rubik Bold"; /* ── SIDEBAR ── */ --sidebar-width: 260px; --sidebar-rail-width: 78px; --sidebar-z: 2000; --sidebar-ease: cubic-bezier(.2, .9, .2, 1); --sidebar-bg-open: radial-gradient(400px 300px at 50% 0%, rgba(250,226,2,0.06), transparent 70%), linear-gradient(180deg, #191D2D 0%, #141622 100%); --sidebar-bg-open-accent: rgba(250,226,2,0.15); --sidebar-bg-open-secondary: rgba(97,235,216,0.08); --sidebar-bg-collapsed: linear-gradient(180deg, #161A28 0%, #111420 100%); --sidebar-bg-collapsed-accent: rgba(250,226,2,0.18); --sidebar-bg-active: linear-gradient(180deg, #1A1E2E 0%, #141622 100%); --sidebar-bg-active-accent: rgba(250,226,2,0.20); --sidebar-bg-active-secondary: rgba(97,235,216,0.10); --sidebar-stroke: rgba(255,255,255,0.05); --sidebar-stroke-strong: rgba(255,255,255,0.08); --sidebar-stroke-accent: rgba(250,226,2,0.20); --sidebar-text: rgba(240,242,255,0.92); --sidebar-text-muted: rgba(170,180,220,0.72); --sidebar-text-soft: rgba(140,150,190,0.55); --sidebar-chip: rgba(255,255,255,0.04); --sidebar-chip-2: rgba(255,255,255,0.025); --sidebar-chip-stroke: rgba(255,255,255,0.07); --sidebar-shadow: 4px 0 40px rgba(0,0,0,0.60); --sidebar-shadow-soft: 2px 0 20px rgba(0,0,0,0.35); --sidebar-active-glow: 0 0 0 1px rgba(250,226,2,0.14); --sidebar-overlay: rgba(0,0,0,0.70); --sidebar-search-bg: radial-gradient(360px 100px at 15% 0%, rgba(250,226,2,0.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); --sidebar-search-text: var(--sidebar-text-muted); --sidebar-promo-bg: rgba(255,255,255,0.03); --sidebar-promo-border: rgba(255,255,255,0.06); --sidebar-promo-item-bg: rgba(0,0,0,0.15); --sidebar-promo-item-bg-hover: rgba(0,0,0,0.22); --sidebar-promo-dot: #FAE202; --sidebar-promo-dot-glow: rgba(250,226,2,0.18); --sidebar-hero-glow: linear-gradient(90deg, #1A1E2E, #FAE202); --sidebar-top-btn-border: rgba(255,255,255,0.06); --sidebar-top-btn-bg: linear-gradient(95deg, rgba(20,22,34,0.70), rgba(16,18,28,0.80)); --sidebar-top-btn-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04); --sidebar-top-btn-title: rgba(240,242,255,0.92); --sidebar-top-btn-arrow: rgba(250,226,2,0.70); --sidebar-top-btn-hover-border: rgba(250,226,2,0.28); --sidebar-top-btn-hover-shadow: 0 12px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(250,226,2,0.12), inset 0 1px 0 rgba(255,255,255,0.06); --sidebar-top-btn-active-border: rgba(250,226,2,0.44); --sidebar-top-btn-active-bg: linear-gradient(95deg, rgba(250,226,2,0.16), rgba(250,226,2,0.06)); --sidebar-top-btn-active-shadow: 0 14px 32px rgba(0,0,0,0.48), 0 0 0 1px rgba(250,226,2,0.18), inset 0 1px 0 rgba(255,255,255,0.08); /* ── SETTINGS ── */ --settings-sidebar-bg: rgba(14,16,24,0.94); --settings-sidebar-border: rgba(250,226,2,0.18); --settings-sidebar-shadow: 0 20px 40px rgba(0,0,0,0.45); --settings-sidebar-radius: 12px; --settings-sidebar-select-bg: rgba(255,255,255,0.03); --settings-sidebar-item-radius: 8px; --settings-sidebar-item-color: rgba(240,242,255,0.80); --settings-sidebar-item-active-bg: linear-gradient(120deg, rgba(250,226,2,0.16), rgba(250,226,2,0.06)); --settings-sidebar-active-color: #FAE202; --settings-content-bg: rgba(10,11,18,0.90); --settings-content-border: rgba(255,255,255,0.06); --settings-content-shadow: 0 24px 52px rgba(0,0,0,0.48); --settings-content-radius: 12px; --settings-block-bg: rgba(20,22,34,0.85); --settings-block-border: rgba(255,255,255,0.06); --settings-block-divider: rgba(255,255,255,0.055); --settings-block-header-bg: transparent; --settings-block-radius: 10px; --settings-block-title-color: rgba(240,242,255,0.95); --settings-block-desc-color: rgba(170,180,220,0.70); --settings-field-title-color: rgba(240,242,255,0.88); --settings-control-bg: rgba(14,16,24,0.75); --settings-control-border: rgba(255,255,255,0.10); --settings-control-color: rgba(240,242,255,0.92); --settings-control-radius: 8px; --settings-check-title-color: rgba(240,242,255,0.92); --settings-check-desc-color: rgba(170,180,220,0.68); /* ── PAGE HEADER ── */ --page-header-radius: 4px; --page-header-bg: var(--linearbg); --page-header-shadow: 0 20px 64px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06); --page-header-top-line: linear-gradient(90deg, transparent, rgba(250,226,2,0.55), rgba(97,235,216,0.35), transparent); --page-header-title-color: #F0F2FF; --page-header-subtitle-color: rgba(240,242,255,0.60); --page-header-icon-color: #0D0F1A; /* ── BLOG ── */ --blog-detail-shell-border: rgba(255,255,255,0.07); --blog-detail-shell-radius: 14px; --blog-detail-shell-bg: linear-gradient(180deg, rgba(20,22,34,0.95), rgba(14,16,24,0.88)); --blog-detail-shell-shadow: 0 24px 52px rgba(0,0,0,0.48); --blog-detail-empty-border: rgba(255,255,255,0.12); --blog-detail-empty-color: rgba(240,242,255,0.80); --blog-detail-card-bg: rgba(255,255,255,0.02); --blog-detail-close-border: rgba(255,255,255,0.12); --blog-detail-close-bg: rgba(255,255,255,0.04); --blog-detail-close-color: rgba(240,242,255,0.88); --blog-detail-close-border-hover: rgba(255,255,255,0.24); --blog-detail-close-bg-hover: rgba(255,255,255,0.08); --blog-detail-image-border: rgba(255,255,255,0.07); --blog-detail-title-color: #F0F2FF; --blog-detail-lead-color: rgba(240,242,255,0.82); --blog-detail-time-color: rgba(240,242,255,0.50); --blog-detail-content-color: rgba(240,242,255,0.86); /* ── POLICIES ── */ --policies-content-bg: rgba(14,16,24,0.90); --policies-content-color: var(--text-secondary); --policies-link-color: #FAE202; --policies-heading-color: #F0F2FF; /* ── WHEEL ── */ --wheel-page-glow-a: rgba(250,226,2,0.12); --wheel-page-glow-b: rgba(97,235,216,0.08); --wheel-tabs-border: rgba(255,255,255,0.07); --wheel-tabs-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); --wheel-tabs-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 22px rgba(0,0,0,0.36); --wheel-tab-border: rgba(255,255,255,0.12); --wheel-tab-bg: rgba(255,255,255,0.03); --wheel-tab-color: rgba(240,242,255,0.88); --wheel-tab-border-hover: rgba(255,255,255,0.24); --wheel-tab-shadow: inset 0 1px 0 rgba(255,255,255,0.04); --wheel-tab-shadow-hover: 0 8px 20px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.07); --wheel-chip-color: #0D0F1A; --wheel-chip-bg: rgba(250,226,2,0.16); --wheel-chip-border: rgba(250,226,2,0.34); --wheel-tab-active-border: rgba(250,226,2,0.44); --wheel-tab-active-bg: linear-gradient(180deg, rgba(250,226,2,0.82), rgba(250,226,2,0.54)); --wheel-tab-active-shadow: 0 8px 20px rgba(250,226,2,0.20); --wheel-card-border: rgba(255,255,255,0.07); --wheel-card-bg: var(--modalbg); --wheel-card-shadow: 0 16px 36px rgba(0,0,0,0.40); --wheel-stage-ring: rgba(255,255,255,0.08); --wheel-stage-ring-outer: rgba(255,255,255,0.03); --wheel-stage-plate-border: rgba(255,255,255,0.12); --wheel-stage-plate-bg: radial-gradient(circle, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); --wheel-stage-center-bg: radial-gradient(circle at 50% 35%, rgba(20,22,34,0.95), rgba(14,16,24,0.99)); --wheel-stage-center-border: rgba(255,255,255,0.22); --wheel-stage-center-ring: rgba(8,9,16,0.65); --wheel-stage-center-shadow: 0 10px 28px rgba(0,0,0,0.55); --wheel-stage-center-highlight: rgba(255,255,255,0.12); --wheel-halo-outer-border: rgba(250,226,2,0.34); --wheel-halo-inner-border: rgba(250,226,2,0.18); --wheel-halo-inner-shadow: inset 0 0 40px rgba(250,226,2,0.12); --wheel-arrow-shadow: drop-shadow(0 8px 18px rgba(0,0,0,0.55)); --wheel-spin-btn-border: rgba(255,255,255,0.16); --wheel-spin-btn-bg: linear-gradient(180deg, rgba(20,22,34,0.96), rgba(14,16,24,0.99)); --wheel-spin-btn-color: rgba(240,242,255,0.95); --wheel-spin-btn-shadow: 0 12px 28px rgba(0,0,0,0.44), 0 0 0 1px rgba(250,226,2,0.18), inset 0 1px 0 rgba(255,255,255,0.09); --wheel-side-summary-border: rgba(255,255,255,0.06); --wheel-side-summary-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); --wheel-muted-text: rgba(240,242,255,0.60); --wheel-strong-text: #F0F2FF; --wheel-status-border: rgba(255,255,255,0.12); --wheel-status-bg: rgba(255,255,255,0.03); --wheel-status-ready-color: #FAE202; --wheel-status-ready-border: rgba(250,226,2,0.34); --wheel-status-ready-bg: rgba(250,226,2,0.10); --wheel-status-passive-color: rgba(240,242,255,0.72); --wheel-article-border: rgba(255,255,255,0.06); --wheel-article-bg: rgba(255,255,255,0.01); --wheel-article-color: rgba(240,242,255,0.86); --wheel-result-border: rgba(250,226,2,0.22); --wheel-result-bg: rgba(250,226,2,0.08); --wheel-register-btn-border: rgba(250,226,2,0.50); --wheel-register-btn-bg: linear-gradient(180deg, #FAE202, rgba(250,226,2,0.80)); --wheel-register-btn-color: #0D0F1A; --wheel-register-btn-shadow: 0 12px 28px rgba(250,226,2,0.22); /* ── PROMOTIONS ── */ --promotion-hover-panel-bg: linear-gradient(180deg, rgba(20,22,34,0.96), rgba(14,16,24,0.98)); --promotion-hover-panel-pattern: radial-gradient(600px 220px at 80% 20%, rgba(250,226,2,0.04), transparent 66%); --promotion-hover-title-color: #F0F2FF; --promotion-hover-desc-color: rgba(170,180,220,0.72); --promotion-bottom-icon-color: var(--text-primary); --promotion-bottom-info-color: var(--text-muted); } /* ============================================================ HERO SLIDER ============================================================ */ .hero-area-slider { --hero-accent: var(--accent); --hero-accent-rgb: var(--accent-rgb); --hero-nav-bg: var(--slider-nav-bg); --hero-nav-bg-hover: var(--slider-nav-bg-hover); --hero-nav-border: var(--slider-nav-border); --hero-pagination-dot: var(--slider-pagination-dot); --hero-pagination-dot-active: var(--slider-pagination-dot-active); } /* ============================================================ LOGO ============================================================ */ header#header div.middle-header div.middle-header-container div.logo img, header#header div.middle-header div.middle-header-container div.logo svg { margin-top: 8px; } /* ============================================================ PRIMARY ACTION BUTTONS — Electric yellow gradient ============================================================ */ .common-form-button .button, form.general-form div.form-buttons button, .auth div.auth-box form.auth-form div.form-buttons button, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button { background: linear-gradient(135deg, #FFE930 0%, #FAE202 50%, #E6CE00 100%) !important; color: #0D0F1A !important; border-radius: var(--radius-sm) !important; box-shadow: 0 4px 16px rgba(250,226,2,0.28) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; transition: box-shadow 0.3s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1) !important; position: relative; overflow: hidden; } .common-form-button .button::after, form.general-form div.form-buttons button::after, .auth div.auth-box form.auth-form div.form-buttons button::after, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, transparent 55%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .common-form-button .button:hover, form.general-form div.form-buttons button:hover, .auth div.auth-box form.auth-form div.form-buttons button:hover, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover { box-shadow: 0 8px 28px rgba(250,226,2,0.50), 0 2px 8px rgba(0,0,0,0.22) !important; transform: translateY(-2px) !important; } .common-form-button .button:hover::after, form.general-form div.form-buttons button:hover::after, .auth div.auth-box form.auth-form div.form-buttons button:hover::after, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover::after { opacity: 1; } .common-form-button .button:active, form.general-form div.form-buttons button:active, .auth div.auth-box form.auth-form div.form-buttons button:active, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 2px 10px rgba(250,226,2,0.35) !important; } /* ============================================================ INPUTS — Modern glass style ============================================================ */ .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input, form.general-form div.form-group div.form-item.form-item-text input, form.general-form div.form-group div.form-item.form-item-password input, form.general-form div.form-group div.form-item.form-item-select select, .phone-input, .phone-input input { background: rgba(20,22,34,0.80) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; transition: border-color 0.22s ease, box-shadow 0.22s ease !important; } .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input::placeholder, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input::placeholder, form.general-form div.form-group div.form-item.form-item-text input::placeholder, form.general-form div.form-group div.form-item.form-item-password input::placeholder { color: var(--input-placeholder) !important; } .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input:focus, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input:focus, form.general-form div.form-group div.form-item.form-item-text input:focus, form.general-form div.form-group div.form-item.form-item-password input:focus, .phone-input input:focus { border-color: rgba(250,226,2,0.55) !important; box-shadow: 0 0 0 3px rgba(250,226,2,0.14), 0 0 20px rgba(250,226,2,0.08) !important; outline: none !important; } /* ============================================================ WALLET BUTTONS ============================================================ */ #walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit { background: linear-gradient(135deg, #FFE930, #FAE202) !important; color: #0D0F1A !important; font-weight: 700 !important; transition: box-shadow 0.3s ease, transform 0.2s ease !important; } #walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit:hover { box-shadow: 0 8px 24px rgba(250,226,2,0.45) !important; transform: translateY(-1px) !important; } #walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.withdraw { background-image: var(--wallet-withdraw-gradient) !important; } #walletModal .modal-dialog .modal-content .modal-body div.wallet-footer a.button { background-color: var(--wallet-footer-btn-bg) !important; color: var(--wallet-footer-btn-color) !important; border-radius: var(--radius-sm) !important; transition: background-color 0.22s ease, transform 0.18s ease !important; } #walletModal .modal-dialog .modal-content .modal-body div.wallet-footer a.button:hover { transform: translateY(-1px) !important; } /* ============================================================ TABS AND CHIPS ============================================================ */ .simple-bets .nav.nav-pills .nav-link.active, .simple-bets .nav.nav-pills .nav-link[aria-selected="true"], .simple-bets ul li button.active, .simple-bets ul li button[aria-selected="true"] { color: #0D0F1A !important; background-color: #FAE202 !important; border-color: #FAE202 !important; box-shadow: 0 4px 16px rgba(250,226,2,0.28) !important; font-weight: 700 !important; } .simple-bets .nav.nav-pills .nav-link, .simple-bets ul li button { transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important; } .faq__chip, .ato-btn { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-muted); border-radius: var(--radius-pill); transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.18s ease !important; } .faq__chip:hover, .ato-btn:hover { border-color: rgba(250,226,2,0.35) !important; background: rgba(250,226,2,0.08) !important; color: #FAE202 !important; transform: translateY(-1px) !important; } .faq__chip.is-active, .ato-btn.is-active { border-color: rgba(250,226,2,0.45) !important; background: rgba(250,226,2,0.12) !important; color: #FAE202 !important; } .ato-indicator { background: linear-gradient(135deg, rgba(250,226,2,0.75), rgba(250,226,2,0.45)) !important; border: 1px solid rgba(250,226,2,0.35) !important; border-radius: var(--radius-xs) !important; transition: left 0.28s cubic-bezier(0.34,1.56,0.64,1), width 0.28s ease !important; } /* ============================================================ PROGRESS BARS — Yellow → Teal gradient ============================================================ */ div.progress-bar span, .progress-fill, .race-progress .line, .simple-progress .fill { background: linear-gradient(90deg, #61EBD8 0%, #3DD8C3 30%, #FAE202 75%, #FFE930 100%) !important; background-size: 200% 100% !important; animation: progress-shimmer 3s ease infinite !important; border-radius: var(--radius-pill) !important; } .progress-circle .progress-svg circle.circle-bg { stroke: rgba(255,255,255,0.06); } .progress-circle .progress-svg circle.circle { stroke: #FAE202; filter: drop-shadow(0 0 5px rgba(250,226,2,0.45)); transition: stroke-dashoffset 0.55s cubic-bezier(0.4,0,0.2,1) !important; } /* ============================================================ GAME OPENER BUTTONS ============================================================ */ .game-item div.game-top div.game-opener { border-color: rgba(250,226,2,0.50) !important; background: linear-gradient(0deg, rgba(14,16,24,0.92) 0%, rgba(14,16,24,0.55) 100%) !important; border-radius: var(--radius-md); transition: opacity 0.22s ease !important; } .game-item div.game-top div.game-opener div.play-buttons span.button, .game-item div.game-top div.game-opener div.play-buttons a.button { background: linear-gradient(135deg, #FFE930, #FAE202) !important; color: #0D0F1A !important; border-radius: var(--radius-sm) !important; font-weight: 700 !important; transition: box-shadow 0.25s ease, transform 0.18s ease !important; position: relative; overflow: hidden; } .game-item div.game-top div.game-opener div.play-buttons span.button::before, .game-item div.game-top div.game-opener div.play-buttons a.button::before { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent); transform: skewX(-20deg); transition: left 0.45s ease; } .game-item div.game-top div.game-opener div.play-buttons span.button:hover::before, .game-item div.game-top div.game-opener div.play-buttons a.button:hover::before { left: 120%; } .game-item div.game-top div.game-opener div.play-buttons span.button:hover, .game-item div.game-top div.game-opener div.play-buttons a.button:hover { box-shadow: 0 8px 24px rgba(250,226,2,0.48) !important; transform: translateY(-2px) scale(1.02) !important; } .game-item div.game-top div.game-opener div.play-buttons span.button.demo, .game-item div.game-top div.game-opener div.play-buttons a.button.demo { background: rgba(97,235,216,0.14) !important; color: #61EBD8 !important; border: 1px solid rgba(97,235,216,0.28) !important; font-weight: 600 !important; } .game-item div.game-top div.game-opener div.play-buttons span.button.demo:hover, .game-item div.game-top div.game-opener div.play-buttons a.button.demo:hover { background: rgba(97,235,216,0.24) !important; box-shadow: 0 6px 18px rgba(97,235,216,0.24) !important; } /* ============================================================ RACE CAROUSEL CTA ============================================================ */ div.race-carousels div.slider-item .race-item div.head div.details div.buttons a.button { background: linear-gradient(135deg, #FFE930, #FAE202) !important; color: #0D0F1A !important; border-radius: var(--radius-xs) !important; font-weight: 700 !important; transition: box-shadow 0.25s ease, transform 0.18s ease !important; } div.race-carousels div.slider-item .race-item div.head div.details div.buttons a.button:hover { box-shadow: 0 8px 24px rgba(250,226,2,0.48) !important; transform: translateY(-1px) !important; } /* ============================================================ SIDEBAR / MENU ACTIVE ITEMS ============================================================ */ .sidebar .menu a.active, .sidebar .submenu a.active, .sidebar-menu a.active, .accordion-menu a.active, .lowbar .item.active { color: #FAE202 !important; } .sidebar .menu a, .sidebar .submenu a, .sidebar-menu a, .accordion-menu a { transition: color 0.22s ease !important; } .sidebar .menu .active-indicator, .accordion-menu .active-indicator, .lowbar .indicator { background: linear-gradient(90deg, rgba(250,226,2,0.95), rgba(250,226,2,0.65)) !important; box-shadow: 0 0 16px rgba(250,226,2,0.38), 0 0 6px rgba(250,226,2,0.20); border-radius: var(--radius-pill); } /* ============================================================ FAQ GLOW ============================================================ */ .faq__bg { filter: none !important; pointer-events: none; background: radial-gradient(700px 300px at 10% 0, rgba(250,226,2,0.08), transparent 60%), radial-gradient(500px 250px at 100% 30%, rgba(97,235,216,0.06), transparent 62%), radial-gradient(550px 280px at 20% 120%, rgba(97,235,216,0.05), transparent 55%) !important; } /* ============================================================ NOTIFICATION SURFACES ============================================================ */ .notifications .notification-item, .notification-item { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md) !important; transition: border-color 0.22s ease, box-shadow 0.22s ease !important; } .notifications .notification-item:hover, .notification-item:hover { border-color: rgba(250,226,2,0.22) !important; } .notifications .notification-item.unread, .notification-item.unread { border-color: rgba(250,226,2,0.30) !important; box-shadow: inset 0 0 0 1px rgba(250,226,2,0.06); } /* ============================================================ UTILITY CLASSES ============================================================ */ .theme-bg-primary, .bg-primary, [data-theme="primary"] { background-color: #FAE202 !important; color: #0D0F1A !important; } .theme-surface, .bg-surface, [data-theme="surface"] { background-color: var(--legacy-bg-3) !important; color: var(--text-primary) !important; } .theme-muted, .text-muted, [data-theme="muted"] { color: var(--legacy-text-muted) !important; } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes progress-shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } @keyframes glow-pulse-yellow { 0%, 100% { box-shadow: 0 0 8px rgba(250,226,2,0.28); } 50% { box-shadow: 0 0 24px rgba(250,226,2,0.58), 0 0 48px rgba(250,226,2,0.18); } } @keyframes glow-pulse-teal { 0%, 100% { box-shadow: 0 0 8px rgba(97,235,216,0.24); } 50% { box-shadow: 0 0 24px rgba(97,235,216,0.50), 0 0 48px rgba(97,235,216,0.16); } } /* ============================================================ SMOOTH TRANSITIONS GLOBAL ============================================================ */ a, button, .button, input, select { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important; } /* ============================================================ HEADER — Glassmorphism dark navy ============================================================ */ header#header { position: relative; z-index: 100; backdrop-filter: blur(20px) saturate(1.8) !important; -webkit-backdrop-filter: blur(20px) saturate(1.8) !important; background: rgba(14,16,24,0.85) !important; box-shadow: 0 1px 0 rgba(250,226,2,0.08), 0 4px 32px rgba(0,0,0,0.55) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; transition: box-shadow 0.4s ease !important; } /* ============================================================ REGISTER BUTTON — pulse animation ============================================================ */ @keyframes register-pulse { 0% { box-shadow: 0 4px 16px rgba(250,226,2,0.38), 0 0 0 0 rgba(250,226,2,0.52); } 50% { box-shadow: 0 6px 24px rgba(250,226,2,0.55), 0 0 0 10px rgba(250,226,2,0); } 100% { box-shadow: 0 4px 16px rgba(250,226,2,0.38), 0 0 0 0 rgba(250,226,2,0); } } @keyframes register-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register { background: linear-gradient(135deg, #FFED40 0%, #FAE202 35%, #D4C000 65%, #FAE202 100%) !important; background-size: 300% 300% !important; color: #0D0F1A !important; font-weight: 800 !important; letter-spacing: 0.03em !important; border-radius: 8px !important; border: none !important; animation: register-pulse 2.8s ease-in-out infinite, register-shimmer 5s ease infinite !important; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s ease !important; will-change: transform, box-shadow !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:hover { animation: none !important; background: linear-gradient(135deg, #FFEE50, #FAE202) !important; background-size: 100% 100% !important; box-shadow: 0 8px 28px rgba(250,226,2,0.62), 0 0 0 2px rgba(250,226,2,0.28) !important; transform: translateY(-2px) scale(1.04) !important; filter: brightness(1.05) !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:active { animation: none !important; transform: translateY(0) scale(0.97) !important; box-shadow: 0 3px 12px rgba(250,226,2,0.40) !important; } /* ============================================================ WALLET BUTTON ============================================================ */ header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button { background: linear-gradient(90deg, #1A1E2E, #FAE202) !important; color: #0D0F1A !important; transition: filter 0.22s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button:hover { filter: brightness(1.12) saturate(1.15) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(250,226,2,0.42), 0 2px 8px rgba(0,0,0,0.30) !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button:active { transform: translateY(0) !important; filter: brightness(0.94) !important; } /* ============================================================ GAME CARDS — modern hover lift ============================================================ */ @keyframes card-border-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .game-item { transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease !important; will-change: transform !important; border-radius: 12px; overflow: hidden; } .game-item:hover { transform: translateY(-8px) scale(1.025) !important; box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(250,226,2,0.30), 0 0 36px rgba(250,226,2,0.12) !important; z-index: 2; position: relative; } .game-item::after { content: ''; position: absolute; inset: 0; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(135deg, rgba(250,226,2,0), rgba(97,235,216,0)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.28s ease !important; } .game-item:hover::after { background: linear-gradient(135deg, rgba(250,226,2,0.40), rgba(97,235,216,0.25)) border-box; opacity: 1; animation: card-border-glow 2s ease-in-out infinite; } .game-item div.game-top { transition: filter 0.28s ease !important; } .game-item:hover div.game-top { filter: brightness(1.06) saturate(1.05) !important; } /* ============================================================ NOTIFICATION BADGE ============================================================ */ @keyframes badge-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(250,226,2,0.62), 0 0 6px rgba(250,226,2,0.40); } 50% { box-shadow: 0 0 0 6px rgba(250,226,2,0), 0 0 16px rgba(250,226,2,0.62); } } @keyframes badge-ping { 0% { transform: scale(1); opacity: 1; } 75% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } .notification-badge, .notif-badge, [class*="notification-count"], [class*="notif-count"], .badge-count, header .badge, .header-icon .badge, .notifications-trigger .count { background: #FAE202 !important; color: #0D0F1A !important; font-weight: 900 !important; border: 1.5px solid rgba(13,15,26,0.55) !important; border-radius: 999px !important; animation: badge-glow 2.2s ease-in-out infinite !important; position: relative; } .notification-badge::before, .notif-badge::before, [class*="notification-count"]::before, [class*="notif-count"]::before { content: ''; position: absolute; inset: -1px; border-radius: 999px; background: rgba(250,226,2,0.52); animation: badge-ping 2.2s cubic-bezier(0,0,0.2,1) infinite; pointer-events: none; } /* ============================================================ SCROLLBAR — Yellow/Teal dual tone ============================================================ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgba(14,16,24,0.95); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(97,235,216,0.55) 0%, rgba(97,235,216,0.40) 40%, rgba(250,226,2,0.50) 70%, rgba(250,226,2,0.65) 100% ); border-radius: 999px; border: 1px solid rgba(0,0,0,0.20); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(97,235,216,0.90) 0%, rgba(97,235,216,0.70) 40%, rgba(250,226,2,0.85) 70%, rgba(250,226,2,1) 100% ); } ::-webkit-scrollbar-corner { background: transparent; } * { scrollbar-width: thin; scrollbar-color: rgba(250,226,2,0.50) rgba(14,16,24,0.95); } /* ============================================================ FOCUS RING — Yellow brand ============================================================ */ :focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(14,16,24,0.95), 0 0 0 4px rgba(250,226,2,0.80), 0 0 14px rgba(250,226,2,0.28) !important; border-radius: 6px; transition: box-shadow 0.14s ease !important; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none !important; box-shadow: 0 0 0 2px #0E1018, 0 0 0 4px #FAE202, 0 0 18px rgba(250,226,2,0.32) !important; border-radius: 7px !important; } :focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .hp-hero .hp-hero-bg { background: none !important; } /* ============================================================ PREMIUM SIDEBAR v4 — #FAE202 / #61EBD8 / #141622 ============================================================ */ :root { --sb-w: 240px; /* Ana renkler */ --g: #FAE202; --g-light: #FFEE50; --g-mid: #E6CE00; --g-10: rgba(250, 226, 2, 0.10); --g-15: rgba(250, 226, 2, 0.15); --g-20: rgba(250, 226, 2, 0.20); --g-30: rgba(250, 226, 2, 0.30); --t: #61EBD8; --t-light: #9CF4EA; --t-10: rgba(97, 235, 216, 0.10); --t-20: rgba(97, 235, 216, 0.20); /* Navy surfaces */ --s0: #0E1018; --s1: #141622; --s2: #1A1E2E; --s3: #20243A; --s4: #262C44; /* Strokes */ --br: rgba(255, 255, 255, 0.055); --br-g: rgba(250, 226, 2, 0.16); --br-t: rgba(97, 235, 216, 0.14); /* Text */ --t1: rgba(240, 242, 255, 0.96); --t2: rgba(170, 180, 220, 0.72); --t3: rgba(110, 120, 170, 0.55); --ease: cubic-bezier(0.4, 0, 0.2, 1); --z: 1000; } /* ── WRAPPER ── */ #responsive-menu.responsive-menu { position: fixed !important; inset: 0 auto 0 0 !important; width: var(--sb-w) !important; max-width: var(--sb-w) !important; height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; z-index: var(--z); background: radial-gradient(ellipse 280px 180px at -8% -3%, rgba(250,226,2,0.07) 0%, transparent 65%), radial-gradient(ellipse 200px 150px at 110% 100%, rgba(97,235,216,0.05) 0%, transparent 65%), linear-gradient(175deg, #181C2C 0%, #0E1018 60%, #111420 100%) !important; border-right: 1px solid var(--br-g) !important; box-shadow: 2px 0 0 rgba(250,226,2,0.04), 4px 0 40px rgba(0,0,0,0.70) !important; } /* ── SIDEBAR CONTENT ── */ .sidebar-content { display: flex; flex-direction: column; height: 100%; } /* ── SCROLL ── */ .sidebar-wrapper, .sb-content-animate { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(250,226,2,0.14) transparent; } .sidebar-wrapper::-webkit-scrollbar, .sb-content-animate::-webkit-scrollbar { width: 2px; } .sidebar-wrapper::-webkit-scrollbar-thumb, .sb-content-animate::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(97,235,216,0.25), rgba(250,226,2,0.22)); border-radius: 99px; } /* ── MENU HEAD ── */ .menu-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 14px; flex-shrink: 0; background: rgba(0,0,0,0.28); border-bottom: 1px solid var(--br-g); position: relative; } .menu-head::after { content: ''; position: absolute; bottom: -1px; left: 10px; right: 10px; height: 1px; background: linear-gradient(90deg, transparent, rgba(250,226,2,0.40), rgba(97,235,216,0.28), transparent); } .menu-head .title { display: flex; align-items: center; gap: 10px; cursor: pointer; } .menu-head .title .icon { color: var(--t2); display: flex; align-items: center; transition: color 0.15s; } .menu-head .title:hover .icon { color: var(--g); } .menu-head .title .text { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(135deg, var(--g-light) 0%, var(--g) 60%, var(--t-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .menu-head .buttons { display: flex; align-items: center; gap: 6px; } .call-button, .current-lang { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid var(--br); transition: background 0.14s, border-color 0.14s; overflow: hidden; } .call-button:hover, .current-lang:hover { background: var(--g-10); border-color: var(--br-g); } .call-button { font-size: 14px; } .current-lang img { width: 18px; height: 14px; object-fit: cover; border-radius: 2px; } .languages-box { position: relative; } .other-langs { position: absolute; top: calc(100% + 6px); right: 0; min-width: 152px; background: var(--s3); border: 1px solid var(--br-g); border-radius: 10px; padding: 4px; box-shadow: 0 16px 44px rgba(0,0,0,0.75); display: none; z-index: 200; } .other-langs .lang { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background 0.12s; } .other-langs .lang:hover { background: var(--g-10); } .other-langs .lang .flag img { width: 18px; height: 14px; border-radius: 2px; } .other-langs .lang .text { font-size: 12px; color: var(--t2); } /* ── SEARCH ── */ .to-search-modal { display: flex; align-items: center; gap: 9px; margin: 10px 10px 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--br); cursor: pointer; transition: border-color 0.14s, background 0.14s; } .to-search-modal:hover { border-color: var(--br-g); background: var(--g-10); } .to-search-modal .icon { display: flex; align-items: center; color: var(--t3); flex-shrink: 0; } .to-search-modal .text { font-size: 12.5px; color: var(--t3); font-style: italic; } /* ── SEGMENT TABS ── */ .p2tabs.p2tabs--sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 10px; flex-shrink: 0; } .p2tabs--sidebar .p2seg { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 10px; border: 1px solid var(--br); background: rgba(255,255,255,0.03); cursor: pointer; overflow: hidden; transition: border-color 0.14s, background 0.14s; } .p2tabs--sidebar .p2seg:hover { border-color: var(--br-g); background: var(--g-10); } .p2tabs--sidebar .p2seg.casino { background: linear-gradient(135deg, rgba(250,226,2,0.14), rgba(97,235,216,0.06)); border-color: var(--g-30); box-shadow: 0 0 14px rgba(250,226,2,0.07), inset 0 1px rgba(255,255,255,0.05); } .p2seg .p2bg, .p2seg .p2bgIcon { position: absolute; inset: 0; pointer-events: none; } .p2seg .p2content { display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; } .p2seg .p2chip { display: flex; align-items: center; } .p2seg .p2icon { display: flex; align-items: center; color: var(--t2); transition: color 0.14s; } .p2seg.casino .p2icon { color: var(--g); } .p2seg:hover .p2icon { color: var(--g); } .p2seg .p2label { font-size: 12.5px; font-weight: 700; color: var(--t2); letter-spacing: 0.02em; transition: color 0.14s; } .p2seg.casino .p2label { color: var(--t1); } .p2seg:hover .p2label { color: var(--t1); } /* ── DIVIDER ── */ .sidebar-section-title { padding: 0 10px; margin: 2px 0; flex-shrink: 0; } .sidebar-section-title__line { display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--br-g), var(--br-t), transparent); opacity: 0.65; } /* ── MENU BODY ── */ .menu-body { padding: 0; } /* ── TOP NAV BUTTONS ── */ .sb-top { display: flex; flex-direction: column; padding: 4px 8px; gap: 2px; } .sb-top-btn { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; text-decoration: none; color: var(--t2); border: 1px solid transparent; position: relative; overflow: hidden; transition: color 0.14s, background 0.14s, border-color 0.14s; } .sb-top-btn::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: linear-gradient(180deg, var(--t), var(--g)); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 0.14s, top 0.14s, bottom 0.14s; } .sb-top-btn:hover { background: var(--g-10); border-color: var(--br-g); color: var(--t1); } .sb-top-btn:hover::before { opacity: 0.65; top: 15%; bottom: 15%; } .sb-top-btn.active { background: linear-gradient(90deg, var(--g-15), rgba(250,226,2,0.04)); border-color: var(--br-g); color: var(--g); } .sb-top-btn.active::before { opacity: 1; top: 10%; bottom: 10%; } .sb-top-btn .icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; color: inherit; transition: transform 0.18s, box-shadow 0.18s, background 0.18s; } .sb-top-btn:hover .icon { transform: scale(1.08); } .sb-top-title { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-top-arrow { font-size: 14px; color: var(--t3); opacity: 0; transform: translateX(-3px); transition: opacity 0.14s, transform 0.14s, color 0.14s; } .sb-top-btn:hover .sb-top-arrow { opacity: 1; transform: translateX(0); color: var(--t2); } .sb-top-btn.active .sb-top-arrow { opacity: 1; transform: translateX(0); color: var(--g); } /* Destek butonu */ .sb-top-btn.supportbtn { margin: 6px 8px; background: linear-gradient(135deg, rgba(97,235,216,0.12), rgba(97,235,216,0.05)); border: 1px solid var(--t-20); color: var(--t); border-radius: 10px; } .sb-top-btn.supportbtn::before { display: none; } .sb-top-btn.supportbtn:hover { background: linear-gradient(135deg, rgba(97,235,216,0.20), rgba(97,235,216,0.10)); border-color: rgba(97,235,216,0.35); color: var(--t-light); } /* ── ACCORDION ── */ .sl-acc { display: flex; flex-direction: column; padding: 4px 8px; gap: 2px; } .sl-acc__section { border-radius: 10px; overflow: hidden; } .sl-acc__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; cursor: pointer; border-radius: 10px; border: 1px solid transparent; user-select: none; position: relative; overflow: hidden; transition: background 0.14s, border-color 0.14s, color 0.14s; color: var(--t2); } .sl-acc__head::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: linear-gradient(180deg, var(--t), var(--g)); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 0.14s; } .sl-acc__head:hover { background: var(--g-10); border-color: var(--br-g); color: var(--t1); } .sl-acc__head:hover::before { opacity: 0.5; } .sl-acc__section.open > .sl-acc__head { background: linear-gradient(90deg, var(--g-15), rgba(250,226,2,0.04)); border-color: var(--br-g); border-radius: 10px 10px 0 0; color: var(--g); } .sl-acc__section.open > .sl-acc__head::before { opacity: 1; top: 10%; bottom: 10%; } .sl-acc__headLeft { display: flex; align-items: center; gap: 11px; } .sl-acc__headIcon { display: flex; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; border-radius: 8px; padding: 7px; flex-shrink: 0; color: inherit; transition: transform 0.18s, box-shadow 0.18s, background 0.18s; } .sl-acc__headIcon img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; } .sl-acc__head:hover .sl-acc__headIcon, .sl-acc__section.open > .sl-acc__head .sl-acc__headIcon { transform: scale(1.08); } .sl-acc__headTitle { font-size: 13px; font-weight: 500; color: inherit; } .sl-acc__chev { display: flex; align-items: center; color: var(--t3); transition: transform 0.22s var(--ease), color 0.14s; } .sl-acc__chev img { width: 11px; height: 11px; filter: brightness(0) invert(1); opacity: 0.25; transition: opacity 0.14s; } .sl-acc__head:hover .sl-acc__chev img { opacity: 0.55; } .sl-acc__section.open > .sl-acc__head .sl-acc__chev { transform: rotate(180deg); color: var(--g); } .sl-acc__section.open > .sl-acc__head .sl-acc__chev img { opacity: 0.80; } .sl-acc__bodyWrap { overflow: hidden; transition: max-height 0.24s var(--ease); } .sl-acc__body { background: rgba(0,0,0,0.26); border: 1px solid var(--br-g); border-top: none; border-radius: 0 0 10px 10px; padding: 6px 0 8px; } .sl-acc__topBtn { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 2px 8px 6px; padding: 6px 10px; border-radius: 7px; background: var(--g-10); border: 1px solid var(--g-20); cursor: pointer; transition: background 0.13s, border-color 0.13s; } .sl-acc__topBtn:hover { background: var(--g-15); border-color: var(--g-30); } .sl-acc__topText { font-size: 11px; font-weight: 700; color: var(--g); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-acc__list { list-style: none; margin: 0; padding: 0 6px; display: flex; flex-direction: column; gap: 1px; } .sl-acc__item { display: block; text-decoration: none; } .sl-acc__itemInner { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; transition: background 0.12s; cursor: pointer; } .sl-acc__item:hover .sl-acc__itemInner { background: var(--g-10); } .sl-acc__itemInner .sl-acc__headIcon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.70; } .sl-acc__itemText { flex: 1; font-size: 12px; font-weight: 500; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.12s; } .sl-acc__item:hover .sl-acc__itemText { color: var(--t1); } .sl-acc__itemRight { display: flex; align-items: center; } .sl-acc__itemCount { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 99px; background: rgba(250,226,2,0.08); color: var(--g); border: 1px solid rgba(250,226,2,0.16); letter-spacing: 0.02em; } /* ── ORIGINALS GRID ── */ .sl-acc__list--originals { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; padding: 4px 6px !important; } .sl-acc__item--originals { border-radius: 8px; overflow: hidden; } .sl-acc__itemInner--originals { flex-direction: column !important; align-items: center !important; gap: 5px !important; padding: 8px 4px 6px !important; background: rgba(255,255,255,0.03); border: 1px solid var(--br); border-radius: 8px; transition: background 0.13s, border-color 0.13s, transform 0.12s; } .sl-acc__item--originals:hover .sl-acc__itemInner--originals { background: var(--g-10) !important; border-color: var(--br-g); transform: translateY(-1px); } .sl-acc__itemGameMedia { width: 40px; height: 40px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,0.04); flex-shrink: 0; } .sl-acc__itemGameMedia img { width: 100%; height: 100%; object-fit: cover; } .sl-acc__item--originals .sl-acc__itemText { font-size: 10px !important; text-align: center; color: var(--t3) !important; } .sl-acc__item--originals:hover .sl-acc__itemText { color: var(--g) !important; } .sl-acc__itemLink--originals { display: block; text-decoration: none; } /* ── LANG FOOTER ── */ .sidebar-lang-footer { flex-shrink: 0; padding: 8px 10px 14px; border-top: 1px solid var(--br-g); background: rgba(0,0,0,0.25); position: relative; } .sidebar-lang-trigger { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--br); cursor: pointer; transition: border-color 0.13s, background 0.13s; } .sidebar-lang-trigger:hover { border-color: var(--br-g); background: var(--g-10); } .sidebar-lang-trigger .flag img { width: 18px; height: 14px; border-radius: 2px; object-fit: cover; } .sidebar-lang-trigger .label { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--t2); text-align: left; } .sidebar-lang-trigger .caret { font-size: 10px; color: var(--t3); } .sidebar-lang-options { position: absolute; bottom: calc(100% + 4px); left: 10px; right: 10px; background: var(--s4); border: 1px solid var(--br-g); border-radius: 10px; padding: 4px; max-height: 240px; overflow-y: auto; box-shadow: 0 -16px 44px rgba(0,0,0,0.75); display: none; z-index: 10; } .sidebar-lang-options.open { display: block; } .lang-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; border: none; background: none; cursor: pointer; transition: background 0.12s; } .lang-opt:hover { background: var(--g-10); } .lang-opt.is-active { background: var(--g-15); } .lang-opt .flag img { width: 18px; height: 14px; border-radius: 2px; } .lang-opt .text { font-size: 12px; color: var(--t2); } .lang-opt.is-active .text { color: var(--g); } /* ── NAV İKON RENKLENDİRME — modern color palette ── */ /* Anasayfa → teal mint */ .sb-top-btn[aria-label="Anasayfa"] .icon { background: rgba(97,235,216,0.12); box-shadow: 0 0 10px rgba(97,235,216,0.15); color: #61EBD8; } .sb-top-btn[aria-label="Anasayfa"]:hover .icon { background: rgba(97,235,216,0.22); box-shadow: 0 0 20px rgba(97,235,216,0.35); color: #9CF4EA; } /* Turnuvalar → electric yellow */ .sb-top-btn[aria-label="Turnuvalar"] .icon { background: rgba(250,226,2,0.12); box-shadow: 0 0 10px rgba(250,226,2,0.16); color: #FAE202; } .sb-top-btn[aria-label="Turnuvalar"]:hover .icon { background: rgba(250,226,2,0.22); box-shadow: 0 0 20px rgba(250,226,2,0.36); color: #FFEE50; } /* Meydan Okumalar → orange */ .sb-top-btn[aria-label="Meydan Okumalar"] .icon { background: rgba(255,140,0,0.12); box-shadow: 0 0 10px rgba(255,140,0,0.15); color: #FFA040; } .sb-top-btn[aria-label="Meydan Okumalar"]:hover .icon { background: rgba(255,140,0,0.22); box-shadow: 0 0 20px rgba(255,140,0,0.34); color: #FFC070; } /* Çark Çevir → rose/pink */ .sb-top-btn[aria-label="Çark Çevir"] .icon { background: rgba(255,100,140,0.12); box-shadow: 0 0 10px rgba(255,100,140,0.14); color: #FF7AAA; } .sb-top-btn[aria-label="Çark Çevir"]:hover .icon { background: rgba(255,100,140,0.22); box-shadow: 0 0 20px rgba(255,100,140,0.32); color: #FFAACC; } /* SafeOnlineCasino → sky blue */ .sb-top-btn[aria-label="SafeOnlineCasino"] .icon { background: rgba(56,189,248,0.12); box-shadow: 0 0 10px rgba(56,189,248,0.15); color: #38BDF8; } .sb-top-btn[aria-label="SafeOnlineCasino"]:hover .icon { background: rgba(56,189,248,0.22); box-shadow: 0 0 20px rgba(56,189,248,0.34); color: #7DD3FC; } /* Blog → indigo/violet */ .sb-top-btn[aria-label="Blog"] .icon { background: rgba(139,92,246,0.12); box-shadow: 0 0 10px rgba(139,92,246,0.15); color: #A78BFA; } .sb-top-btn[aria-label="Blog"]:hover .icon { background: rgba(139,92,246,0.22); box-shadow: 0 0 20px rgba(139,92,246,0.34); color: #C4B5FD; } /* Promosyonlar → lime green */ .sb-top-btn[aria-label="Promosyonlar"] .icon { background: rgba(163,230,53,0.12); box-shadow: 0 0 10px rgba(163,230,53,0.14); color: #A3E635; } .sb-top-btn[aria-label="Promosyonlar"]:hover .icon { background: rgba(163,230,53,0.22); box-shadow: 0 0 20px rgba(163,230,53,0.32); color: #D9F99D; } /* VIP Kulübü → electric yellow (premium) */ .sb-top-btn[aria-label="VIP Kulübü"] .icon { background: rgba(250,226,2,0.15); box-shadow: 0 0 14px rgba(250,226,2,0.22); color: #FAE202; } .sb-top-btn[aria-label="VIP Kulübü"]:hover .icon { background: rgba(250,226,2,0.26); box-shadow: 0 0 24px rgba(250,226,2,0.44); color: #FFEE50; } /* Canlı Destek → teal (brand secondary) */ .sb-top-btn.supportbtn .icon { background: rgba(97,235,216,0.15) !important; box-shadow: 0 0 14px rgba(97,235,216,0.22) !important; color: #61EBD8 !important; border-radius: 8px; width: 32px; height: 32px; } /* ── ACCORDION İKON RENKLERİ ── */ /* Slotlar → yellow */ .sl-acc__section:nth-child(1) .sl-acc__headIcon { background: rgba(250,226,2,0.12); box-shadow: 0 0 10px rgba(250,226,2,0.16); color: #FAE202; } .sl-acc__section:nth-child(1):hover .sl-acc__headIcon, .sl-acc__section:nth-child(1).open .sl-acc__headIcon { background: rgba(250,226,2,0.22); box-shadow: 0 0 22px rgba(250,226,2,0.34); } /* Canlı → red */ .sl-acc__section:nth-child(2) .sl-acc__headIcon { background: rgba(255,71,87,0.12); box-shadow: 0 0 10px rgba(255,71,87,0.15); color: #FF6B7A; } .sl-acc__section:nth-child(2):hover .sl-acc__headIcon, .sl-acc__section:nth-child(2).open .sl-acc__headIcon { background: rgba(255,71,87,0.22); box-shadow: 0 0 22px rgba(255,71,87,0.32); } /* Orijinal Oyunlar → teal */ .sl-acc__section:nth-child(3) .sl-acc__headIcon { background: rgba(97,235,216,0.12); box-shadow: 0 0 10px rgba(97,235,216,0.16); color: #61EBD8; } .sl-acc__section:nth-child(3):hover .sl-acc__headIcon, .sl-acc__section:nth-child(3).open .sl-acc__headIcon { background: rgba(97,235,216,0.22); box-shadow: 0 0 22px rgba(97,235,216,0.34); } /* ── PROVIDER İKON RENKLENDİRME ── */ .sl-acc__itemInner .sl-acc__headIcon img, .sl-acc__topBtn .sl-acc__headIcon img { filter: grayscale(0.25) opacity(0.65); transition: filter 0.18s, transform 0.18s; } .sl-acc__item:hover .sl-acc__itemInner .sl-acc__headIcon img { filter: grayscale(0) opacity(1); transform: scale(1.08); } a[href*="original-games"] .sl-acc__headIcon, a[href*="original"] .sl-acc__headIcon { background: rgba(97,235,216,0.12); border-radius: 6px; padding: 2px; width: 22px; height: 22px; color: #61EBD8; filter: drop-shadow(0 0 4px rgba(97,235,216,0.45)); } .sl-acc__item:has(a[href*="pragmatic"]) .sl-acc__itemCount { color: #FFA040; border-color: rgba(255,140,0,0.34); background: rgba(255,140,0,0.09); } .sl-acc__item:has(a[href*="hacksaw"]) .sl-acc__itemCount { color: #60A5FA; border-color: rgba(59,130,246,0.34); background: rgba(59,130,246,0.09); } .sl-acc__item:has(a[href*="amusnet"]) .sl-acc__itemCount { color: #A78BFA; border-color: rgba(139,92,246,0.34); background: rgba(139,92,246,0.09); } .sl-acc__item:has(a[href*="egt"]) .sl-acc__itemCount { color: #FAE202; border-color: rgba(250,226,2,0.34); background: rgba(250,226,2,0.09); } .sl-acc__item:has(a[href*="evolution"]) .sl-acc__itemCount { color: #FF6B7A; border-color: rgba(255,71,87,0.34); background: rgba(255,71,87,0.09); } .sl-acc__item:hover a .sl-acc__headIcon img { transform: scale(1.10); filter: grayscale(0) opacity(1) brightness(1.25) saturate(1.5); } a[href*="pragmatic"] .sl-acc__headIcon { background: rgba(255,140,0,0.12); border-radius: 6px; padding: 1px; width: 22px; height: 22px; } a[href*="hacksaw"] .sl-acc__headIcon { background: rgba(59,130,246,0.12); border-radius: 6px; padding: 1px; width: 22px; height: 22px; } a[href*="amusnet"] .sl-acc__headIcon { background: rgba(139,92,246,0.12); border-radius: 6px; padding: 1px; width: 22px; height: 22px; } a[href*="egt"] .sl-acc__headIcon { background: rgba(250,226,2,0.12); border-radius: 6px; padding: 1px; width: 22px; height: 22px; } a[href*="evolution"] .sl-acc__headIcon { background: rgba(255,71,87,0.12); border-radius: 6px; padding: 1px; width: 22px; height: 22px; } /* ── KATEGORI İKONLARI ── */ .category.casino:first-child .icon span { color: #FAE202 !important; } .category.casino:nth-child(2) .icon span { color: #FF4757 !important; } .category.sport .icon span { color: #61EBD8 !important; } /* ── UTILITY ── */ .one-line-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-fade-slide { animation: sbIn 0.2s var(--ease) both; } @keyframes sbIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================ FAB OVERRIDE — Electric Yellow + Teal ============================================================ */ /* TRIGGER */ .lowbar-fab__trigger, button.lowbar-fab__trigger { background: linear-gradient(135deg, #FFEE50, #FAE202, #E6CE00) !important; box-shadow: 0 4px 22px rgba(250,226,2,0.55), 0 2px 8px rgba(0,0,0,0.50) !important; border: none !important; border-radius: 50% !important; width: 54px !important; height: 54px !important; cursor: pointer !important; position: relative !important; overflow: visible !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .lowbar-fab__trigger:hover, button.lowbar-fab__trigger:hover { transform: scale(1.09) !important; box-shadow: 0 8px 30px rgba(250,226,2,0.70), 0 0 0 7px rgba(250,226,2,0.09) !important; } .lowbar-fab__trigger:active, button.lowbar-fab__trigger:active { transform: scale(0.96) !important; } /* PULSE RINGS */ .lowbar-fab__trigger-rings { position: absolute !important; inset: -5px !important; border-radius: 50% !important; border: 2px solid rgba(250,226,2,0.44) !important; pointer-events: none !important; animation: fabYellowPulse 2s ease-out infinite !important; z-index: 0 !important; } @keyframes fabYellowPulse { 0% { transform: scale(1); opacity: 0.75; } 65% { transform: scale(1.38); opacity: 0; } 100% { transform: scale(1.38); opacity: 0; } } .lowbar-fab__trigger-rings::after { content: '' !important; position: absolute !important; inset: -5px !important; border-radius: 50% !important; border: 1.5px solid rgba(97,235,216,0.22) !important; animation: fabYellowPulse 2s ease-out 0.65s infinite !important; } .lowbar-fab__trigger-core { position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; color: #0D0F1A !important; } .lowbar-fab__trigger-glyph { position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #0D0F1A !important; transition: opacity 0.18s ease, transform 0.18s ease !important; } .lowbar-fab__trigger-glyph--menu { opacity: 1 !important; transform: rotate(0deg) !important; } .lowbar-fab__trigger-glyph--close { opacity: 0 !important; transform: rotate(-90deg) !important; } .lowbar-fab.is-open .lowbar-fab__trigger-glyph--menu { opacity: 0 !important; transform: rotate(90deg) !important; } .lowbar-fab.is-open .lowbar-fab__trigger-glyph--close { opacity: 1 !important; transform: rotate(0deg) !important; } .lowbar-fab__backdrop, button.lowbar-fab__backdrop { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* STACK */ .lowbar-fab__stack { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 8px !important; pointer-events: none !important; opacity: 0 !important; transform: translateY(14px) scale(0.94) !important; transition: opacity 0.22s ease, transform 0.22s ease !important; } .lowbar-fab__stack[aria-hidden="false"] { pointer-events: auto !important; opacity: 1 !important; transform: translateY(0) scale(1) !important; } /* ACTION PILLS */ .lowbar-fab__action, button.lowbar-fab__action { display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 16px 0 10px !important; height: 46px !important; border-radius: 23px !important; background: #111420 !important; border: 1px solid rgba(255,255,255,0.07) !important; cursor: pointer !important; white-space: nowrap !important; box-shadow: 0 4px 20px rgba(0,0,0,0.60) !important; opacity: 0 !important; transform: translateX(18px) !important; transition: opacity 0.18s ease, transform 0.18s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease !important; } .lowbar-fab__stack[aria-hidden="false"] .lowbar-fab__action { opacity: 1 !important; transform: translateX(0) !important; } .lowbar-fab__action[style*="--fab-index: 0"] { transition-delay: 0.04s !important; } .lowbar-fab__action[style*="--fab-index: 1"] { transition-delay: 0.09s !important; } .lowbar-fab__action[style*="--fab-index: 2"] { transition-delay: 0.14s !important; } .lowbar-fab__action[style*="--fab-index: 3"] { transition-delay: 0.19s !important; } .lowbar-fab__action .icon, .lowbar-fab__action span.icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform 0.14s ease !important; } .lowbar-fab__action:hover .icon { transform: scale(1.10) !important; } .lowbar-fab__action .label, .lowbar-fab__action span.label { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; transition: color 0.14s ease !important; } /* ANASAYFA — teal */ .lowbar-fab__action.is-home { border-color: rgba(97,235,216,0.22) !important; } .lowbar-fab__action.is-home .icon { background: rgba(97,235,216,0.14) !important; box-shadow: 0 0 10px rgba(97,235,216,0.22) !important; color: #61EBD8 !important; } .lowbar-fab__action.is-home .label { color: rgba(170,180,220,0.65) !important; } .lowbar-fab__action.is-home:hover { background: rgba(97,235,216,0.07) !important; border-color: rgba(97,235,216,0.44) !important; box-shadow: 0 6px 24px rgba(97,235,216,0.22) !important; } .lowbar-fab__action.is-home:hover .icon { background: rgba(97,235,216,0.26) !important; box-shadow: 0 0 20px rgba(97,235,216,0.44) !important; } .lowbar-fab__action.is-home:hover .label { color: #9CF4EA !important; } /* CANLI DESTEK — teal soft */ .lowbar-fab__action.is-support { border-color: rgba(97,235,216,0.20) !important; } .lowbar-fab__action.is-support .icon { background: rgba(97,235,216,0.12) !important; box-shadow: 0 0 10px rgba(97,235,216,0.18) !important; color: #61EBD8 !important; } .lowbar-fab__action.is-support .label { color: rgba(170,180,220,0.65) !important; } .lowbar-fab__action.is-support:hover { background: rgba(97,235,216,0.07) !important; border-color: rgba(97,235,216,0.42) !important; box-shadow: 0 6px 24px rgba(97,235,216,0.20) !important; } .lowbar-fab__action.is-support:hover .icon { background: rgba(97,235,216,0.24) !important; box-shadow: 0 0 20px rgba(97,235,216,0.42) !important; } .lowbar-fab__action.is-support:hover .label { color: #9CF4EA !important; } /* GİRİŞ YAP — blue */ .lowbar-fab__action.is-login { border-color: rgba(59,130,246,0.22) !important; } .lowbar-fab__action.is-login .icon { background: rgba(59,130,246,0.14) !important; box-shadow: 0 0 10px rgba(59,130,246,0.20) !important; color: #60A5FA !important; } .lowbar-fab__action.is-login .label { color: rgba(170,180,220,0.65) !important; } .lowbar-fab__action.is-login:hover { background: rgba(59,130,246,0.07) !important; border-color: rgba(59,130,246,0.44) !important; box-shadow: 0 6px 24px rgba(59,130,246,0.22) !important; } .lowbar-fab__action.is-login:hover .icon { background: rgba(59,130,246,0.26) !important; box-shadow: 0 0 20px rgba(59,130,246,0.42) !important; } .lowbar-fab__action.is-login:hover .label { color: #93C5FD !important; } /* KAYIT OL — electric yellow CTA */ .lowbar-fab__action.is-register { background: linear-gradient(135deg, rgba(250,226,2,0.16), rgba(230,206,0,0.07)) !important; border-color: rgba(250,226,2,0.38) !important; box-shadow: 0 4px 22px rgba(250,226,2,0.16), 0 0 0 1px rgba(250,226,2,0.09) !important; } .lowbar-fab__action.is-register .icon { background: rgba(250,226,2,0.18) !important; box-shadow: 0 0 14px rgba(250,226,2,0.30) !important; color: #FAE202 !important; } .lowbar-fab__action.is-register .label { color: #FAE202 !important; font-weight: 700 !important; } .lowbar-fab__action.is-register:hover { background: linear-gradient(135deg, rgba(250,226,2,0.26), rgba(230,206,0,0.13)) !important; border-color: rgba(250,226,2,0.60) !important; box-shadow: 0 8px 30px rgba(250,226,2,0.30) !important; } .lowbar-fab__action.is-register:hover .icon { background: rgba(250,226,2,0.30) !important; box-shadow: 0 0 24px rgba(250,226,2,0.52) !important; } .lowbar-fab__action.is-register:hover .label { color: #FFEE50 !important; } /* ============================================================ MOBILE SLIDER FIX ============================================================ */ .hp-mobile-slider .hero-slide-card { position: relative; width: 100%; aspect-ratio: 828 / 423; overflow: hidden; } .hp-mobile-slider .hero-slide-media { position: absolute; inset: 0; width: 100%; height: 100%; } .hp-mobile-slider .hero-slide-media img { object-fit: cover !important; object-position: center !important; } /* ============================================================ ORIGINAL GAMES VISUAL FIX ============================================================ */ .sl-acc__itemLink--originals .sl-acc__itemGameMedia { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; overflow: visible !important; flex-shrink: 0 !important; } .sl-acc__itemLink--originals .sl-acc__itemGameMedia img { width: 40px !important; height: 40px !important; object-fit: contain !important; display: block !important; @media (min-width: 992px) { body:has(.responsive-menu.active-menu) { background: #0f111e !important; } } } .p2seg .p2label { color: rgb(12 14 21); } .p2seg.casino .p2label { color: rgb(13 14 21); } .p2chip .p2icon, .p2chip .p2icon svg { color: #0d0f16 !important; } a.sb-top-btn.active { display: none !important; }