/* =========================================================================
   ⚙️  SLOTVADI CONFIG PANEL — DEĞİŞTİREBİLECEĞİN HER ŞEY BURADA
   Sadece aşağıdaki değerleri güncelle, CSS'i yükle, hazır.

   📦 BUILD: v-2026-04-28-022
   ========================================================================= */
:root {
    /* ── HEADER LOGO (Masaüstü) ────────────────────────── */
    --sv-header-logo-height: 80px;
    --sv-header-logo-max-width: 200px;
    --sv-header-logo-y-offset: 4px;
    --sv-header-logo-x-offset: 0px;

    /* ── HEADER LOGO (Mobil) ──────────────────────────── */
    --sv-header-logo-mobile-height: 54px;
    --sv-header-logo-mobile-max-width: 210px;

    /* ── FOOTER LOGO (Masaüstü) ───────────────────────── */
    --sv-footer-logo-height: 100px;
    --sv-footer-logo-max-width: 260px;
    --sv-footer-logo-top-margin: 24px;
    --sv-footer-logo-bottom-margin: 58px;
    --sv-footer-logo-x-offset: -6px;

    /* ── FOOTER LOGO (Mobil) ──────────────────────────── */
    --sv-footer-logo-mobile-height: 100px;
    --sv-footer-logo-mobile-max-width: 210px;
    --sv-footer-logo-mobile-x-offset: -6px;

    /* ── MOBİL LOWBAR — MERKEZ WALLET (Anasayfa favicon) ── */
    --sv-lowbar-wallet-circle-size: 54px;
    --sv-lowbar-wallet-ring-width: 5px;
    --sv-lowbar-wallet-favicon-size: 44px;

/* ── SİTE GENEL BÜYÜTME (Zoom) ────────────────────── */
    --sv-site-zoom: 1.0;

    /* ── MOBİL HEADER WORDMARK LOGO (Tombet gibi sol ortalı) ──
       Logo mobilde sola yerleşir, balance/cüzdan sağda kalır */
    --sv-mobile-logo-show: 1;              /* 1 = göster, 0 = gizle */
    --sv-mobile-logo-height: 50px;         /* logo yüksekliği */
    --sv-mobile-logo-max-width: 150px;     /* logo max genişlik (full wordmark sığsın) */
    --sv-mobile-logo-left: 4px;            /* soldan boşluk */
    --sv-mobile-logo-top: 50%;             /* dikey hiza (50% = ortalı) */

    /* ── MOBİL CÜZDAN/BAKİYE — kompakt görünüm ──
       Platform yapısı: .balance > .icon + .money(rakam) + .down(ok)
       Bakiye kaç karakter görünsün (örn 0.00 = 4ch, 0.000 = 5ch)
       Logo'ya yer açmak için container küçük tutulmalı */
    --sv-mobile-balance-width: ch;        /* bakiye max genişlik (içeriği kırpar) */
    --sv-mobile-balance-currency-show: none; /* USD/TRY etiketi göster (none/inline) */
    --sv-mobile-wallet-max-width: 110px;   /* tüm balance container max eni */
    --sv-mobile-wallet-padding: 10px 7px;  /* cüzdan butonu padding */
    --sv-mobile-wallet-font-size: 12px;    /* cüzdan/bakiye font */
    --sv-mobile-wallet-gap: 6px;           /* balance içi: icon ↔ money ↔ down arası gap */
    --sv-mobile-wallet-icon-size: 20px;    /* balance içi icon boyutu */
    --sv-mobile-wallet-arrow-size: 10px;   /* balance içi down arrow boyutu */
    --sv-mobile-wallet-money-padding-x: 15px; /* money rakamının yan padding'i */

    /* ── SIDEBAR — SADE GÖRÜNÜM (kırmızı çerçeveler kaldırıldı) ──
       Hem mobil drawer hem masaüstü sidebar için ortak ayarlar.
       Boyut/genişlik/yükseklik değişmez — sadece renk/border davranışı. */
    --sv-sidebar-bg-open: linear-gradient(180deg, rgba(18, 18, 22, 0.97) 0%, rgba(10, 10, 12, 0.98) 100%);
    --sv-sidebar-bg-collapsed: linear-gradient(180deg, rgba(14, 14, 18, 0.98) 0%, rgba(8, 8, 10, 0.98) 100%);
    --sv-sidebar-bg-active: linear-gradient(180deg, rgba(20, 20, 24, 0.97) 0%, rgba(10, 10, 12, 0.98) 100%);
    --sv-sidebar-top-btn-bg: linear-gradient(95deg, rgba(28, 28, 32, 0.70) 0%, rgba(20, 20, 24, 0.80) 50%, rgba(14, 14, 16, 0.85) 100%);
    --sv-sidebar-top-btn-active-bg: linear-gradient(95deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);

    --sv-sidebar-item-border: 1px solid transparent;          /* item çerçevesi (kırmızı yerine transparan) */
    --sv-sidebar-item-hover-bg: rgba(255, 255, 255, 0.04);    /* hover background */
    --sv-sidebar-item-active-bg: rgba(255, 255, 255, 0.05);   /* active background */
    --sv-sidebar-secondary: rgba(255, 255, 255, 0.05);        /* secondary tint (border yerine) */
    --sv-sidebar-stroke-soft: rgba(255, 255, 255, 0.06);
    --sv-sidebar-stroke: rgba(255, 255, 255, 0.08);
    --sv-sidebar-stroke-strong: rgba(255, 255, 255, 0.10);

    /* ── ACTIVE INDICATOR — seçili item'ın sol kırmızı çizgisi ── */
    --sv-sidebar-active-indicator-show: 1;                    /* 1 = göster, 0 = gizle */
    --sv-sidebar-active-indicator-color: var(--accent, #ed2a39);
    --sv-sidebar-active-indicator-width: 3px;                 /* çizgi kalınlığı */
    --sv-sidebar-active-indicator-inset: 8px;                 /* üst/alt boşluk (top/bottom) */
    --sv-sidebar-active-indicator-radius: 0 3px 3px 0;        /* çizgi köşe yuvarlama */

    /* ── MOBİL UX FIX'LERİ ──
       Browser inspect ile tespit edilen mobil sorunlar için config'lenebilir değerler */
    --sv-mobile-backdrop-bg: rgba(0, 0, 0, 0.62);          /* Sidebar açıkken arka plan karartma */
    --sv-mobile-backdrop-z: 1990;                          /* Sidebar(2000)'in altında, lowbar(999999) altında */
    --sv-mobile-backdrop-blur: 2px;                        /* Arka plan bulanıklığı */
    --sv-mobile-body-padding-bottom: 80px;                 /* Lowbar(78px) için yer ayır */
    --sv-mobile-tap-highlight: rgba(237, 42, 57, 0.2);     /* Tap feedback rengi */

    /* ── HOVER — sidebar item icon'u kırmızıya dönsün ──
       Sade kuralda renk + transition + filter kullanılır
       glow + scale config'te tutulur ama mevcut sade kuralda kullanılmaz */
    --sv-sidebar-icon-hover-color: var(--accent, #ed2a39);
    --sv-sidebar-icon-hover-transition: 0.08s linear;
    --sv-sidebar-icon-hover-filter: hue-rotate(330deg) saturate(2.2) brightness(1.05);
    --sv-sidebar-icon-hover-glow: drop-shadow(0 0 8px rgba(237, 42, 57, 0.55));
    --sv-sidebar-icon-hover-scale: 1.12;

    /* ── SIDEBAR ITEM BACKGROUND — sade siyah (mavi-gri gradient kaldırıldı) */
    --sv-sidebar-item-bg-image: none;

    /* ── ANA SAYFA — TABLO/CAROUSEL GİZLEME TOGGLE'LARI ──
       none = gizle, revert / block = göster */
    --sv-hide-live-wins: none;     /* Canlı Kazançlar carousel */
    --sv-hide-bets-table: none;    /* Casino Bahisleri / Spor Bahisleri tablosu */
    --sv-hide-empty-state: none;   /* "Veri bulunamadı" boş state component'leri */

    /* ── MOBİL-ONLY CAROUSEL'LERİ DESKTOP'TA DA GÖSTER ──
       Site'in kendi tasarımında Pragmatic Play / Popüler Slot Oyunları carousel'leri
       `.cat-carousel.d-lg-none` ile sadece mobil için yapılmış (Bootstrap d-lg-none class'ı).
       1 = desktop'ta da göster, 0 = orijinal (sadece mobil) */
    --sv-show-mobile-categories-on-desktop: 1;

    /* ── HERO ALTI CASINO/SPOR BAŞLIKLARI YANINDAKİ KÜÇÜK İKONLAR ──
       .simple-category > .item-title > .icon (20x20 SVG kupa/kart/top)
       none = gizle, revert = göster */
    --sv-hide-simple-category-icon: none;

    /* ── SIDEBAR TAB ARKA PLAN BÜYÜK SİLUETİ ──
       .p2bgIcon — Casino tab'ında kart silueti, Spor tab'ında basketbol topu (opacity 0.14)
       none = gizle, revert = göster */
    --sv-hide-sidebar-bgicon: none;

    /* ── HERO ↔ BODY ARASI KIRMIZI NEON ÇİZGİ ──
       Hero altındaki neon divider (kalınlık + glow yoğunluğu config'lenebilir) */
    --sv-hero-divider-show: 1;                       /* 1 = göster, 0 = gizle */
    --sv-hero-divider-height: 1px;                   /* çizgi kalınlığı (3px → 1px inceltildi) */
    --sv-hero-divider-inset-x: 6%;                   /* sol/sağ inset (genişlik) */
    --sv-hero-divider-color: var(--accent, #ed2a39); /* çizgi ana rengi */
    --sv-hero-divider-radius: 3px;                   /* köşe yuvarlama */
    --sv-hero-divider-glow-1: 4px;                   /* iç glow (en yakın katman) */
    --sv-hero-divider-glow-2: 10px;                  /* orta glow */
    --sv-hero-divider-glow-3: 20px;                  /* dış glow */
    --sv-hero-divider-glow-4: 36px;                  /* en uzak glow */
    --sv-hero-divider-glow-1-opacity: 0.85;          /* iç glow opaklığı */
    --sv-hero-divider-glow-2-opacity: 0.55;
    --sv-hero-divider-glow-3-opacity: 0.30;
    --sv-hero-divider-glow-4-opacity: 0.15;
    --sv-hero-divider-inset-shadow: 0 -1px 0 rgba(var(--accent-rgb), 0.45); /* hero alt kenarı içi */
    --sv-hero-divider-pad-bottom: 28px;              /* hero altı padding (çizgi için boşluk) */
    --sv-hero-divider-margin-bottom: 20px;           /* hero altı margin */

    /* =========================================================================
       ⚠️  AŞAĞIDAKİLERE DOKUNMA — tema motoru tarafından kullanılıyor
       ========================================================================= */
    --header-footer-logo: url("https://slotvadigiris.com/wp-content/uploads/2026/04/Beyaz-Logo-scaled.png");
    --homepage-entrance-bg-image: url("https://slotvadigiris.com/wp-content/uploads/2026/03/logo-v-divider.png");

    --brand-primary: #ed2a39 !important;
    --accent: #ed2a39 !important;
    --brand-primary-rgb: 237, 42, 57;
    --brand-secondary-rgb: 255, 88, 101;
    --brand-primary-contrast: #ffffff;
    --brand-secondary: #ff5865;
    --accent-rgb: var(--brand-primary-rgb);
    --active: var(--accent);

    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --accent-soft-2: rgba(var(--accent-rgb), 0.08);
    --accent-soft-3: rgba(var(--accent-rgb), 0.2);
    --accent-soft2: var(--accent-soft-2);
    --accent-soft3: var(--accent-soft-3);
    --accent-border: rgba(var(--accent-rgb), 0.34);
    --accent-border-strong: rgba(var(--accent-rgb), 0.56);
    --accent-glow: rgba(var(--accent-rgb), 0.38);

    --surface-bg: #0d0d0f;
    --surface-bg-rgb: 13, 13, 15;
    --surface-1: #17171a;
    --surface-2: #1f1f23;
    --surface-3: #27272d;
    --surface-4: #33333a;
    --surface-card: var(--surface-2);
    --surface-modal: #141417;
    --surface-elevated: #212126;
    --surface-border: rgba(255, 255, 255, 0.12);
    --surface-border-soft: rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.18);

    --legacy-bg-1: #1a1a1e;
    --legacy-bg-2: #23232a;
    --legacy-bg-3: #2c2c33;
    --legacy-text-muted: #ffffff;

    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #ffffff;
    --text-soft: #ffffff;
    --text-disabled: rgba(255, 255, 255, 0.85);
    --text-on-accent: var(--brand-primary-contrast);

    --success: #e63946;
    --success-rgb: 230, 57, 70;
    --warning: #f87171;
    --warning-rgb: 248, 113, 113;
    --danger: #dc2626;
    --danger-rgb: 220, 38, 38;
    --info: #ff6b7a;
    --info-rgb: 255, 107, 122;
    --state-success-soft: rgba(var(--success-rgb), 0.16);
    --state-warning-soft: rgba(var(--warning-rgb), 0.18);
    --state-danger-soft: rgba(var(--danger-rgb), 0.15);
    --state-info-soft: rgba(var(--info-rgb), 0.16);

    --radius-2xs: 4px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-pill: 999px;
    --border-thin: 1px;
    --border-medium: 2px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.34);
    --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.42);
    --shadow-accent-sm: 0 8px 18px rgba(var(--accent-rgb), 0.24);
    --shadow-accent-md: 0 12px 28px rgba(var(--accent-rgb), 0.36);
    --shadow-accent-lg: 0 16px 36px rgba(var(--accent-rgb), 0.42);

    --gradient-primary: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.72));
    --gradient-primary-horizontal: linear-gradient(90deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.74));
    --gradient-overlay: linear-gradient(180deg, rgba(18, 18, 22, 0.9), rgba(12, 12, 14, 0.92));
    --gradient-surface: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    --gradient-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    --gradient-withdraw: linear-gradient(90deg, #ff5a6f 0%, #f03b57 30%, #d91f3f 68%, #b5122e 100%);

    --panel-top: #1a1a1f;
    --panel-bottom: #141418;
    --panel-bg: var(--surface-2);
    --panel-bg2: var(--surface-1);
    --modalbg: linear-gradient(180deg, var(--panel-bg), var(--panel-bg2));
    --linearbg: radial-gradient(900px 220px at 15% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(20, 20, 24, 0.92), rgba(14, 14, 18, 0.92));
    --linearbgreversed: radial-gradient(900px 220px at 85% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(20, 20, 24, 0.92), rgba(14, 14, 18, 0.92));
    --lineartooltipbg: linear-gradient(180deg, rgba(22, 22, 26, 0.96), rgba(14, 14, 18, 0.98));

    --progressbg: linear-gradient( to right,
    rgba(var(--accent-rgb), 0.72) 0%,
    rgba(var(--accent-rgb), 0.82) 35%,
    rgba(var(--accent-rgb), 0.98) 70%,
    rgba(var(--accent-rgb), 1) 100%);

    --input-bg: var(--linearbg);
    --input-bg-solid: var(--legacy-bg-3);
    --input-border: rgba(255, 255, 255, 0.14);
    --input-border-focus: rgba(var(--accent-rgb), 0.65);
    --input-placeholder: rgba(255, 255, 255, 0.45);

    --btn-primary-bg: var(--accent);
    --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 84%, #ffffff 16%);
    --btn-primary-bg-active: color-mix(in srgb, var(--accent) 88%, #000000 12%);
    --btn-primary-color: var(--brand-primary-contrast);
    --btn-primary-radius: var(--radius-xs);
    --btn-primary-shadow: var(--shadow-accent-sm);
    --btn-primary-shadow-active: var(--shadow-accent-md);
    --btn-primary-disabled-opacity: 0.55;

    --btn-secondary-bg: var(--legacy-bg-3);
    --btn-secondary-bg-hover: color-mix(in srgb, var(--legacy-bg-3) 86%, #ffffff 14%);
    --btn-secondary-color: var(--text-primary);
    --btn-secondary-border: var(--surface-border-soft);

    --btn-ghost-bg: rgba(255, 255, 255, 0.06);
    --btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
    --btn-ghost-color: var(--text-primary);

    --header-register-bg: var(--btn-primary-bg);
    --header-register-color: var(--btn-primary-color);
    --wallet-btn-bg-start: #1a1a1f;
    --wallet-btn-bg-end: var(--accent);
    --wallet-btn-gradient: linear-gradient(90deg, var(--wallet-btn-bg-start) 0%, var(--wallet-btn-bg-end) 100%);
    --wallet-btn-color: var(--brand-primary-contrast);

    --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.06);
    --chip-border: rgba(255, 255, 255, 0.12);
    --chip-color: var(--text-muted);
    --chip-active-bg: rgba(var(--accent-rgb), 0.14);
    --chip-active-border: rgba(var(--accent-rgb), 0.55);
    --chip-active-color: var(--text-primary);

    --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-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-border: var(--accent);
    --game-opener-overlay: linear-gradient(0deg, rgba(22, 22, 26, 0.84) 0%, rgba(22, 22, 26, 0.84) 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: #ffffff;

    --slider-nav-bg: rgba(22, 22, 26, 0.8);
    --slider-nav-bg-hover: rgba(var(--accent-rgb), 0.28);
    --slider-nav-border: rgba(var(--accent-rgb), 0.35);
    --slider-nav-color: #ffffff;
    --slider-pagination-dot: rgba(255, 255, 255, 0.35);
    --slider-pagination-dot-active: var(--accent);

    --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-form-border: 1px solid #2c2c33;
    --top-search-form-radius: 4px;
    --top-search-form-margin-top: 24px;
    --top-search-form-margin-bottom: 24px;
    --top-search-form-padding-x: 12px;
    --top-search-form-height: 48px;
    --top-search-form-line-height: 62px;
    --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: #ffffff;
    --top-search-input-color: var(--text-primary);
    --top-search-input-placeholder: rgba(255, 255, 255, 0.55);
    --top-search-focus-radius: 16px;
    --top-search-focus-shadow: 0 22px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--accent-rgb), 0.22),
    0 0 30px rgba(var(--accent-rgb), 0.1);

    --top-search-layer-radius: 18px;
    --top-search-layer-border: 1px solid rgba(255, 255, 255, 0.1);
    --top-search-layer-border-bottom: 10px solid rgba(255, 255, 255, 0.1);
    --top-search-layer-bg: rgba(18, 18, 22, 0.72);
    --top-search-layer-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
    --top-search-layer-blur: 14px;

    --top-search-recent-wrap-radius: 10px;
    --top-search-recent-wrap-border: 1px solid rgba(var(--brand-secondary-rgb), 0.26);
    --top-search-recent-wrap-bg: linear-gradient(180deg, rgba(18, 18, 22, 0.82), rgba(12, 12, 14, 0.84));
    --top-search-recent-wrap-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
    --top-search-recent-chip-radius: 999px;
    --top-search-recent-chip-border: 1px solid rgba(var(--brand-secondary-rgb), 0.5);
    --top-search-recent-chip-bg: linear-gradient( 135deg,
    rgba(var(--brand-secondary-rgb), 0.26),
    rgba(var(--brand-secondary-rgb), 0.14));
    --top-search-recent-chip-color: #ffffff;
    --top-search-recent-chip-font-family: var(--font-family-semibold);
    --top-search-recent-chip-shadow: 0 6px 14px rgba(var(--brand-secondary-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

    --lb-bg: rgba(18, 18, 22, 0.72);
    --lb-stroke: rgba(255, 255, 255, 0.1);
    --lb-stroke-2: rgba(255, 255, 255, 0.06);
    --lb-text: #ffffff;
    --lb-muted: #ffffff;
    --lb-active: var(--accent);
    --lb-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --lb-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.35);
    --lb-search-bg: #141418;
    --lb-radius: 22px;
    --lb-radius-sm: 20px;
    --lb-surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --lb-wallet-ring-color: rgba(var(--accent-rgb), 0.6);
    --lb-wallet-ring-size: 0.2rem;
    --lb-wallet-glow: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0) 65%);
    --lb-wallet-glow-radius: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0) 62%);

    --sidebar-tab-casino-bg-image: url("https://slotvadigiris.com/wp-content/uploads/2026/04/photo_2026-04-23_19-55-05.jpg");
    --sidebar-tab-sportsbook-bg-image: url("https://slotvadigiris.com/wp-content/uploads/2026/04/photo_2026-04-23_19-55-07.jpg");

    --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(var(--accent-rgb), 0.16);
    --bonus-request-info-border: rgba(var(--accent-rgb), 0.45);
    --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-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.05);
    --vip-card-border: rgba(255, 255, 255, 0.10);
    --vip-card-border-soft: rgba(255, 255, 255, 0.06);
    --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.06);
    --vip-chip-border: rgba(255, 255, 255, 0.10);
    --vip-chip-active-bg: rgba(var(--vip-accent-rgb), 0.16);
    --vip-chip-active-border: rgba(var(--vip-accent-rgb), 0.30);
    --vip-tag-bg: rgba(0, 0, 0, 0.18);
    --vip-gift-tag-bg: rgba(var(--vip-accent-rgb), 0.10);
    --vip-gift-tag-border: rgba(var(--vip-accent-rgb), 0.18);
    --vip-button-border: rgba(var(--vip-accent-rgb), 0.28);
    --vip-button-bg: linear-gradient(180deg, rgba(var(--vip-accent-rgb), 0.22), rgba(var(--vip-accent-rgb), 0.10));
    --vip-button-border-hover: rgba(var(--vip-accent-rgb), 0.42);
    --vip-link: rgba(var(--vip-accent-rgb), 0.95);
    --vip-link-border: rgba(var(--vip-accent-rgb), 0.35);
    --vip-link-border-hover: rgba(var(--vip-accent-rgb), 0.65);

    --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
    --divider: var(--surface-border-soft);

    --notif-badge-bg: var(--accent);
    --notif-badge-border: rgba(255, 255, 255, 0.55);
    --notif-panel-bg: var(--lineartooltipbg);
    --notif-panel-border: rgba(255, 255, 255, 0.08);
    --notif-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --notif-empty-bg: rgba(100, 116, 139, 0.16);
    --notif-empty-border: rgba(255, 255, 255, 0.08);
    --notif-item-bg: rgba(100, 116, 139, 0.14);
    --notif-item-bg-hover: rgba(100, 116, 139, 0.18);
    --notif-item-border: rgba(255, 255, 255, 0.08);
    --notif-item-border-hover: rgba(255, 255, 255, 0.14);
    --notif-track-thumb: rgba(255, 255, 255, 0.1);

    --wgs-text: #ffffff;
    --wgs-muted: #ffffff;
    --wgs-panel-bg: rgba(22, 22, 26, 0.75);
    --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.04);
    --wgs-block-border: rgba(255, 255, 255, 0.06);
    --wgs-switch-on-bg: rgba(var(--accent-rgb), 0.14);
    --wgs-switch-on-border: rgba(var(--accent-rgb), 0.28);
    --wgs-switch-knob: rgba(255, 255, 255, 0.35);
    --wgs-switch-knob-on: rgba(var(--accent-rgb), 0.9);
    --wgs-dot-bg: rgba(var(--accent-rgb), 0.1);
    --wgs-dot-border: rgba(var(--accent-rgb), 0.15);
    --wgs-dot-ring: rgba(var(--accent-rgb), 0.25);
    --wgs-save-border: rgba(var(--success-rgb), 0.22);
    --wgs-save-bg: linear-gradient(90deg, rgba(15, 15, 18, 0.92), rgba(var(--accent-rgb), 0.45));

    --game-theater-overlay: rgba(0, 0, 0, 0.65);
    --game-overlay-soft: rgba(0, 0, 0, 0.55);
    --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(to right, #7a1019, #c4232e, #ed2a39, #ff5865, #ff8a93);
    --game-bets-empty-bg: linear-gradient(145deg, rgba(24, 24, 28, 0.92), rgba(16, 16, 20, 0.86));
    --game-bets-empty-border: rgba(255, 88, 101, 0.34);
    --game-bets-empty-icon-bg: rgba(237, 42, 57, 0.24);
    --game-bets-empty-icon-border: rgba(237, 42, 57, 0.34);
    --game-bets-empty-icon-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --game-bets-empty-title: #ffffff;
    --game-bets-empty-text: #ffffff;
    --game-bets-empty-button-bg: rgba(255, 255, 255, 0.06);
    --game-bets-empty-button-border: rgba(255, 255, 255, 0.2);
    --game-bets-empty-button-hover-bg: rgba(255, 255, 255, 0.12);
    --game-bets-empty-button-hover-border: rgba(255, 255, 255, 0.28);

    --favorites-empty-bg: linear-gradient(140deg, rgba(22, 22, 26, 0.94), rgba(14, 14, 18, 0.96));
    --favorites-empty-border: rgba(255, 255, 255, 0.18);
    --favorites-empty-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.42);
    --favorites-empty-icon-bg: rgba(237, 42, 57, 0.22);
    --favorites-empty-icon-border: rgba(255, 88, 101, 0.32);
    --favorites-empty-icon-shadow: 0 8px 26px rgba(237, 42, 57, 0.28);
    --favorites-empty-title: #ffffff;
    --favorites-empty-text: #ffffff;
    --favorites-empty-btn-bg: linear-gradient(180deg, #ff5865 0%, #c4232e 100%);
    --favorites-empty-btn-border: rgba(255, 88, 101, 0.4);
    --favorites-empty-btn-shadow: 0 8px 20px rgba(237, 42, 57, 0.3);

    --event-trophy-bg: rgba(0, 0, 0, 0.18);
    --event-trophy-border: rgba(255, 255, 255, 0.2);
    --event-card-border: rgba(255, 255, 255, 0.08);
    --event-divider: rgba(255, 255, 255, 0.12);
    --event-title: #ffffff;
    --event-label: #ffffff;
    --event-muted: #ffffff;
    --event-stat-label: #ffffff;
    --event-cta-bg: var(--gradient-primary);
    --event-cta-color: var(--brand-primary-contrast);
    --event-progress-track: rgba(22, 22, 26, 0.75);

    --withdraw-progress-bg: rgba(22, 22, 26, 0.72);
    --withdraw-progress-border: rgba(255, 255, 255, 0.18);
    --withdraw-progress-track: rgba(30, 30, 36, 0.85);
    --withdraw-progress-fill: linear-gradient(90deg, #ed2a39 0%, #ff5865 100%);
    --withdraw-progress-stat-bg: rgba(255, 255, 255, 0.04);
    --withdraw-progress-label: #ffffff;
    --withdraw-progress-value: #ffffff;
    --withdraw-progress-note: #ffffff;

    --challenge-filter-bg: rgba(22, 22, 26, 0.55);
    --challenge-filter-border: rgba(255, 255, 255, 0.15);
    --challenge-filter-text: #ffffff;
    --challenge-filter-text-hover: #ffffff;
    --challenge-filter-active-bg: var(--linearbg);
    --challenge-filter-active-text: var(--text-primary);
    --challenge-filter-active-ring: rgba(var(--accent-rgb), 0.36);

    --challenge-card-radius: var(--radius-sm);
    --challenge-card-bg: radial-gradient(120% 80% at 8% -10%, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0) 64%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface-3) 82%, #3a1f24 18%) 0%, var(--surface-3) 42%, var(--surface-2) 100%);
    --challenge-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --challenge-card-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(255, 255, 255, 0) 2px 14px);
    --challenge-card-overlay-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -42px 60px rgba(0, 0, 0, 0.32);
    --challenge-image-fallback: color-mix(in srgb, var(--surface-3) 75%, #2a1418 25%);

    --challenge-title: #ffffff;
    --challenge-target: #ffffff;
    --challenge-label: #ffffff;
    --challenge-value: #ffffff;
    --challenge-author: #ffffff;
    --challenge-claimed-divider: rgba(255, 255, 255, 0.12);

    --challenge-completed-ring: rgba(var(--success-rgb), 0.24);
    --challenge-completed-bg: linear-gradient(180deg, rgba(var(--success-rgb), 0.16) 0%, rgba(var(--success-rgb), 0.1) 100%);
    --challenge-control-label: #ffffff;
    --challenge-control-btn-bg: rgba(14, 14, 18, 0.9);
    --challenge-control-btn-border: rgba(255, 255, 255, 0.1);
    --challenge-control-btn-text: #ffffff;
    --challenge-control-btn-icon: rgba(255, 255, 255, 0.85);
    --challenge-control-badge-bg: rgba(var(--accent-rgb), 0.18);
    --challenge-control-badge-border: rgba(var(--accent-rgb), 0.35);
    --challenge-control-badge-text: color-mix(in srgb, var(--accent) 70%, #ffffff 30%);
    --challenge-dropdown-bg: #ffffff;
    --challenge-dropdown-text: #111827;
    --challenge-dropdown-border: rgba(0, 0, 0, 0.1);
    --challenge-dropdown-divider: rgba(0, 0, 0, 0.08);
    --challenge-dropdown-item-hover: rgba(0, 0, 0, 0.06);
    --challenge-dropdown-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    --challenge-dropdown-active: var(--accent);
    --challenge-provider-pill-bg: linear-gradient( to right,
    color-mix(in srgb, var(--accent) 82%, #7a1019 18%) 0%,
    color-mix(in srgb, var(--accent) 84%, #ff5865 16%) 100%);
    --challenge-provider-pill-text: #ffffff;

    --tournament-button-bg: linear-gradient( 180deg,
    color-mix(in srgb, var(--accent) 86%, #ffffff 14%) 0%,
    color-mix(in srgb, var(--accent) 84%, #000000 16%) 100%);
    --tournament-button-border: rgba(var(--accent-rgb), 0.54);
    --tournament-button-color: var(--brand-primary-contrast);
    --tournament-button-radius: var(--radius-2xs);
    --tournament-button-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.34);
    --tournament-button-hover-filter: brightness(1.05);

    --general-tabs-text: #ffffff;
    --general-tabs-active-text: var(--accent);
    --general-tabs-active-font: "Rubik Bold";

    --sidebar-width: 260px;
    --sidebar-rail-width: 78px;
    --sidebar-z: 2000;
    --sidebar-ease: cubic-bezier(.2, .9, .2, 1);

    --sidebar-bg-open: linear-gradient(180deg, rgba(18, 18, 22, .96) 0%, rgba(10, 10, 12, .96) 100%);
    --sidebar-bg-open-accent: rgba(var(--accent-rgb), .18);
    --sidebar-bg-open-secondary: rgba(var(--warning-rgb), .10);
    --sidebar-bg-collapsed: linear-gradient(180deg, rgba(14, 14, 18, 0.98) 0%, rgba(8, 8, 10, 0.98) 100%);
    --sidebar-bg-collapsed-accent: rgba(var(--accent-rgb), 0.20);
    --sidebar-bg-active: linear-gradient(180deg, rgba(16, 16, 20, 0.97) 0%, rgba(8, 8, 10, 0.98) 100%);
    --sidebar-bg-active-accent: rgba(var(--accent-rgb), 0.22);
    --sidebar-bg-active-secondary: rgba(var(--success-rgb), 0.12);

    --sidebar-stroke: rgba(255, 255, 255, .06);
    --sidebar-stroke-strong: rgba(255, 255, 255, .10);
    --sidebar-stroke-accent: rgba(var(--accent-rgb), .24);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: #ffffff;
    --sidebar-text-soft: #ffffff;

    --sidebar-chip: rgba(255, 255, 255, .05);
    --sidebar-chip-2: rgba(255, 255, 255, .03);
    --sidebar-chip-stroke: rgba(255, 255, 255, .08);

    --sidebar-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    --sidebar-shadow-soft: 0 14px 30px rgba(0, 0, 0, .28);
    --sidebar-active-glow: 0 0 0 1px rgba(var(--accent-rgb), .16);

    --sidebar-overlay: rgba(0, 0, 0, .60);

    --sidebar-search-bg: radial-gradient(420px 120px at 15% 0%, rgba(var(--accent-rgb), .10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    --sidebar-search-text: var(--sidebar-text-muted);

    --sidebar-promo-bg: rgba(255, 255, 255, .03);
    --sidebar-promo-border: rgba(255, 255, 255, .07);
    --sidebar-promo-item-bg: rgba(0, 0, 0, .14);
    --sidebar-promo-item-bg-hover: rgba(0, 0, 0, .20);
    --sidebar-promo-dot: var(--accent);
    --sidebar-promo-dot-glow: rgba(var(--accent-rgb), .15);
    --sidebar-hero-glow: linear-gradient(90deg, #1a1a1f 0%, color-mix(in srgb, var(--accent) 84%, #ff5865 16%) 100%);

    --sidebar-top-btn-border: rgba(255, 255, 255, 0.07);
    --sidebar-top-btn-bg: linear-gradient(95deg, rgba(30, 30, 36, 0.65) 0%, rgba(22, 22, 26, 0.75) 50%, rgba(14, 14, 18, 0.8) 100%);
    --sidebar-top-btn-shadow: 0 14px 26px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --sidebar-top-btn-title: #ffffff;
    --sidebar-top-btn-arrow: #ffffff;

    --sidebar-top-btn-hover-border: rgba(var(--accent-rgb), 0.34);
    --sidebar-top-btn-hover-shadow: 0 18px 30px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --sidebar-top-btn-active-border: rgba(var(--accent-rgb), 0.48);
    --sidebar-top-btn-active-bg: linear-gradient(95deg, rgba(var(--accent-rgb), 0.34) 0%, rgba(var(--accent-rgb), 0.22) 100%);
    --sidebar-top-btn-active-shadow: 0 18px 34px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.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);
}

/* Header register button */
header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register {
    background: linear-gradient(180deg, #ed2a39e6, #ed2a39e6);
    color: var(--header-register-color) !important;
    border-radius: var(--btn-primary-radius);
    box-shadow: var(--btn-primary-shadow);
}

/* ========================================================================
   HEADER NAV BUTONLARI (Casino / Canlı Casino / Spor Bahisleri)
   Hover/Active — siyahımsı kırmızı bg + beyaz yazı
   ======================================================================== */
html body header#header div.middle-header div.middle-header-container div.categories a.category:hover,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active,
html body header#header div.middle-header div.middle-header-container div.categories a.category:focus,
html body header#header div.middle-header div.middle-header-container div.categories a.category[aria-current] {
    background: linear-gradient(180deg, rgba(50, 14, 18, 0.95), rgba(34, 10, 14, 0.95)) !important;
    background-color: rgba(40, 12, 16, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--accent-rgb), 0.30) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--accent-rgb), 0.12) !important;
}

html body header#header div.middle-header div.middle-header-container div.categories a.category:hover span.text,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active span.text,
html body header#header div.middle-header div.middle-header-container div.categories a.category:focus span.text,
html body header#header div.middle-header div.middle-header-container div.categories a.category:hover .text,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active .text {
    color: #ffffff !important;
}

html body header#header div.middle-header div.middle-header-container div.categories a.category:hover svg,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active svg,
html body header#header div.middle-header div.middle-header-container div.categories a.category:hover svg path,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active svg path,
html body header#header div.middle-header div.middle-header-container div.categories a.category:hover .icon,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active .icon {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    filter: unset !important;
}

html body header#header div.middle-header div.middle-header-container div.categories a.category:hover .icon img,
html body header#header div.middle-header div.middle-header-container div.categories a.category.active .icon img {
    filter: brightness(0) invert(1) !important;
}

/* Tooltip (data-header-tooltip ::after) — siyahımsı kırmızı bg + beyaz yazı */
html body header#header .categories .category[data-header-tooltip]::after,
header#header .categories .category[data-header-tooltip]::after {
    background: linear-gradient(180deg, rgba(50, 14, 18, 0.96), rgba(28, 10, 14, 0.96)) !important;
    background-image: linear-gradient(180deg, rgba(50, 14, 18, 0.96), rgba(28, 10, 14, 0.96)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--accent-rgb), 0.36) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.20) !important;
    font-weight: 600 !important;
}

/* Tooltip arrow (::before) — siyahımsı kırmızı */
html body header#header .categories .category[data-header-tooltip]::before,
header#header .categories .category[data-header-tooltip]::before {
    border-bottom-color: rgba(50, 14, 18, 0.96) !important;
}

header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button {
    color: var(--wallet-btn-color) !important;
    background: var(--wallet-btn-gradient) !important;
    border-radius: var(--radius-xs);
}

.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-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
    border-radius: var(--btn-primary-radius) !important;
    box-shadow: var(--btn-primary-shadow);
}

.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 {
    background-color: var(--btn-primary-bg-hover) !important;
}

.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 {
    background-color: var(--btn-primary-bg-active) !important;
    box-shadow: var(--btn-primary-shadow-active) !important;
}

.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: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--text-primary) !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: var(--input-border-focus) !important;
    box-shadow: var(--focus-ring) !important;
}

#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit {
    background-color: var(--wallet-deposit-bg) !important;
    color: var(--brand-primary-contrast) !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;
    color: var(--brand-primary-contrast) !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-xs) !important;
}

.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: var(--tab-active-color) !important;
    background-color: var(--tab-active-bg) !important;
    border-color: var(--tab-active-border) !important;
}

.faq__chip,
.ato-btn {
    border-color: var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-color);
    border-radius: var(--radius-pill);
}

.faq__chip.is-active,
.ato-btn.is-active {
    border-color: var(--chip-active-border) !important;
    background: var(--chip-active-bg) !important;
    color: var(--chip-active-color) !important;
}

.ato-indicator {
    background: linear-gradient( to bottom,
    rgba(var(--accent-rgb), 0.72),
    rgba(var(--accent-rgb), 0.42)) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.35) !important;
    border-radius: var(--radius-xs) !important;
}

div.progress-bar span,
.progress-fill,
.race-progress .line,
.simple-progress .fill {
    background: var(--progressbg) !important;
}

.progress-circle .progress-svg circle.circle-bg {
    stroke: rgba(255, 255, 255, 0.15);
}

.progress-circle .progress-svg circle.circle {
    stroke: var(--accent);
}

.game-item div.game-top div.game-opener {
    border-color: var(--game-opener-border) !important;
    background: var(--game-opener-overlay) !important;
    border-radius: var(--radius-md);
}

.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-color: var(--game-play-btn-bg) !important;
    color: var(--game-play-btn-color) !important;
    border-radius: var(--radius-sm) !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-color: var(--game-demo-btn-bg) !important;
    color: var(--game-demo-btn-color) !important;
}

div.race-carousels div.slider-item .race-item div.head div.details div.buttons a.button {
    background-color: var(--accent) !important;
    color: var(--brand-primary-contrast) !important;
    border-color: var(--accent) !important;
    border-radius: var(--radius-xs) !important;
}

.sidebar .menu a.active,
.sidebar .submenu a.active,
.sidebar-menu a.active,
.accordion-menu a.active,
.lowbar .item.active {
    color: var(--accent) !important;
}

.sidebar .menu .active-indicator,
.accordion-menu .active-indicator,
.lowbar .indicator {
    background: var(--gradient-primary-horizontal) !important;
    box-shadow: var(--shadow-accent-sm);
    border-radius: var(--radius-pill);
}

.faq__bg {
    filter: none !important;
    pointer-events: none;
    background: radial-gradient(700px 320px at 10% 0, rgba(var(--accent-rgb), 0.16), transparent 60%),
    radial-gradient(520px 260px at 100% 30%, rgba(255, 255, 255, 0.08), transparent 62%),
    radial-gradient(560px 300px at 20% 120%, rgba(var(--accent-rgb), 0.1), transparent 55%) !important;
}

.notifications .notification-item,
.notification-item {
    background: var(--gradient-surface) !important;
    border: var(--border-thin) solid var(--surface-border-soft);
    border-radius: var(--radius-sm) !important;
}

.notifications .notification-item.unread,
.notification-item.unread {
    border-color: var(--accent-border) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.theme-bg-primary,
.bg-primary,
[data-theme="primary"] {
    background-color: var(--accent) !important;
    color: var(--brand-primary-contrast) !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;
}

:root {
    --settings-sidebar-bg: rgba(18, 18, 22, 0.9);
    --settings-sidebar-border: rgba(255, 255, 255, 0.12);
    --settings-sidebar-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
    --settings-sidebar-radius: 12px;
    --settings-sidebar-select-bg: rgba(255, 255, 255, 0.03);
    --settings-sidebar-item-radius: 8px;
    --settings-sidebar-item-color: #ffffff;
    --settings-sidebar-item-active-bg: linear-gradient(120deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.08));
    --settings-sidebar-active-color: #ffffff;
    --settings-content-bg: rgba(18, 18, 22, 0.86);
    --settings-content-border: rgba(255, 255, 255, 0.12);
    --settings-content-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
    --settings-content-radius: 12px;
    --settings-block-bg: rgba(22, 22, 26, 0.82);
    --settings-block-border: rgba(255, 255, 255, 0.12);
    --settings-block-divider: rgba(255, 255, 255, 0.1);
    --settings-block-header-bg: transparent;
    --settings-block-radius: 10px;
    --settings-block-title-color: #ffffff;
    --settings-block-desc-color: #ffffff;
    --settings-field-title-color: #ffffff;
    --settings-control-bg: rgba(14, 14, 18, 0.72);
    --settings-control-border: rgba(255, 255, 255, 0.16);
    --settings-control-color: #ffffff;
    --settings-control-radius: 8px;
    --settings-check-title-color: #ffffff;
    --settings-check-desc-color: #ffffff;
    --page-header-radius: 4px;
    --page-header-bg: var(--linearbg);
    --page-header-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --page-header-top-line: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0));
    --page-header-title-color: #ffffff;
    --page-header-subtitle-color: #ffffff;
    --page-header-icon-color: #0e1017;
    --blog-detail-shell-border: rgba(255, 255, 255, 0.08);
    --blog-detail-shell-radius: 12px;
    --blog-detail-shell-bg: linear-gradient(180deg, rgba(18, 18, 22, 0.94), rgba(18, 18, 22, 0.84));
    --blog-detail-shell-shadow: 0 24px 50px rgba(0, 0, 0, 0.36);
    --blog-detail-empty-border: rgba(255, 255, 255, 0.15);
    --blog-detail-empty-color: #ffffff;
    --blog-detail-card-bg: rgba(255, 255, 255, 0.02);
    --blog-detail-close-border: rgba(255, 255, 255, 0.14);
    --blog-detail-close-bg: rgba(255, 255, 255, 0.04);
    --blog-detail-close-color: #ffffff;
    --blog-detail-close-border-hover: rgba(255, 255, 255, 0.28);
    --blog-detail-close-bg-hover: rgba(255, 255, 255, 0.08);
    --blog-detail-image-border: rgba(255, 255, 255, 0.08);
    --blog-detail-title-color: #fff;
    --blog-detail-lead-color: #ffffff;
    --blog-detail-time-color: #ffffff;
    --blog-detail-content-color: #ffffff;
    --policies-content-bg: rgba(18, 18, 22, 0.86);
    --policies-content-color: var(--text-secondary);
    --policies-link-color: var(--accent);
    --policies-heading-color: #fff;
    --wheel-page-glow-a: rgba(var(--accent-rgb), 0.16);
    --wheel-page-glow-b: rgba(255, 255, 255, 0.07);
    --wheel-tabs-border: rgba(255, 255, 255, 0.08);
    --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.05), 0 14px 24px rgba(0, 0, 0, 0.28);
    --wheel-tab-border: rgba(255, 255, 255, 0.16);
    --wheel-tab-bg: rgba(255, 255, 255, 0.03);
    --wheel-tab-color: #ffffff;
    --wheel-tab-border-hover: rgba(255, 255, 255, 0.28);
    --wheel-tab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --wheel-tab-shadow-hover: 0 10px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --wheel-chip-color: #fff;
    --wheel-chip-bg: rgba(var(--accent-rgb), 0.2);
    --wheel-chip-border: rgba(var(--accent-rgb), 0.36);
    --wheel-tab-active-border: rgba(var(--accent-rgb), 0.48);
    --wheel-tab-active-bg: linear-gradient(180deg, rgba(var(--accent-rgb), 0.86), rgba(var(--accent-rgb), 0.56));
    --wheel-tab-active-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.24);
    --wheel-card-border: rgba(255, 255, 255, 0.08);
    --wheel-card-bg: var(--modalbg);
    --wheel-card-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    --wheel-stage-ring: rgba(255, 255, 255, 0.1);
    --wheel-stage-ring-outer: rgba(255, 255, 255, 0.03);
    --wheel-stage-plate-border: rgba(255, 255, 255, 0.14);
    --wheel-stage-plate-bg: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    --wheel-stage-center-bg: radial-gradient(circle at 50% 35%, rgba(30, 30, 36, 0.92), rgba(18, 18, 22, 0.98));
    --wheel-stage-center-border: rgba(255, 255, 255, 0.26);
    --wheel-stage-center-ring: rgba(0, 0, 0, 0.62);
    --wheel-stage-center-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    --wheel-stage-center-highlight: rgba(255, 255, 255, 0.14);
    --wheel-halo-outer-border: rgba(var(--accent-rgb), 0.36);
    --wheel-halo-inner-border: rgba(var(--accent-rgb), 0.22);
    --wheel-halo-inner-shadow: inset 0 0 45px rgba(var(--accent-rgb), 0.16);
    --wheel-arrow-shadow: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    --wheel-spin-btn-border: rgba(255, 255, 255, 0.2);
    --wheel-spin-btn-bg: linear-gradient(180deg, rgba(26, 26, 30, 0.94), rgba(16, 16, 20, 0.97));
    --wheel-spin-btn-color: #ffffff;
    --wheel-spin-btn-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --wheel-side-summary-border: rgba(255, 255, 255, 0.08);
    --wheel-side-summary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    --wheel-muted-text: #ffffff;
    --wheel-strong-text: #fff;
    --wheel-status-border: rgba(255, 255, 255, 0.15);
    --wheel-status-bg: rgba(255, 255, 255, 0.04);
    --wheel-status-ready-color: #ffffff;
    --wheel-status-ready-border: rgba(255, 255, 255, 0.3);
    --wheel-status-ready-bg: rgba(255, 255, 255, 0.08);
    --wheel-status-passive-color: #ffffff;
    --wheel-article-border: rgba(255, 255, 255, 0.08);
    --wheel-article-bg: rgba(255, 255, 255, 0.01);
    --wheel-article-color: #ffffff;
    --wheel-result-border: rgba(var(--accent-rgb), 0.22);
    --wheel-result-bg: rgba(var(--accent-rgb), 0.1);
    --wheel-register-btn-border: rgba(var(--accent-rgb), 0.5);
    --wheel-register-btn-bg: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.8));
    --wheel-register-btn-color: #fff;
    --wheel-register-btn-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.2);
    --promotion-hover-panel-bg: linear-gradient(180deg, rgba(22, 22, 26, 0.94), rgba(18, 18, 22, 0.96));
    --promotion-hover-panel-pattern: radial-gradient(620px 240px at 80% 20%, rgba(255, 255, 255, 0.04), transparent 66%);
    --promotion-hover-title-color: #ffffff;
    --promotion-hover-desc-color: #ffffff;
    --promotion-bottom-icon-color: var(--text-primary);
    --promotion-bottom-info-color: var(--text-muted);
}

/* =========================================================================
   CASINO / SPOR BUTONLARI (TEMİZ BEYAZ TASARIM VE TIKLAMA EFEKTİ)
   ========================================================================= */
/* 1. Butonların zeminini temiz gri yap, eski kırmızı/mavi virüsleri engelle */
html body #responsive-menu .p2tabs--sidebar .p2seg.casino,
html body #responsive-menu .p2tabs--sidebar .p2seg.sportsbook,
html body .p2tabs--sidebar .p2seg.casino,
html body .p2tabs--sidebar .p2seg.sportsbook {
    background: #1a1a1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease !important;
    position: relative !important;
    box-shadow: none !important;
    filter: none !important;
}

/* 2. Kökünden sildiğimiz o "gizli renkli katmanların" bir daha hortlamasını kesin yasakla */
html body #responsive-menu .p2tabs--sidebar .p2seg.casino::before,
html body #responsive-menu .p2tabs--sidebar .p2seg.sportsbook::before,
html body #responsive-menu .p2tabs--sidebar .p2seg .p2bg,
html body #responsive-menu .p2tabs--sidebar .p2seg .p2bgIcon {
    display: none !important;
    content: none !important;
}

/* 3. Yazılar ve İkonlar her daim BEYAZ */
html body #responsive-menu .p2tabs--sidebar .p2seg .p2label,
html body #responsive-menu .p2tabs--sidebar .p2seg .p2icon svg,
html body #responsive-menu .p2tabs--sidebar .p2seg .p2icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: transparent !important;
    position: relative;
    z-index: 2;
}

/* 4. YAKLAŞMA (Hover): Fareyle gelince büyü, arka planı bir tık aç, YAZI BEYAZ KALSIN */
html body #responsive-menu .p2tabs--sidebar .p2seg:hover {
    transform: scale(1.04) !important;
    background: #2c2c33 !important; /* Açık gri parlama efekti */
}

html body #responsive-menu .p2tabs--sidebar .p2seg:hover .p2label,
html body #responsive-menu .p2tabs--sidebar .p2seg:hover .p2icon svg,
html body #responsive-menu .p2tabs--sidebar .p2seg:hover .p2icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 5. TIKLAMA (Active): Basılı tutarken soluklaşsın ve çöksün */
html body #responsive-menu .p2tabs--sidebar .p2seg:active {
    transform: scale(0.96) !important;
    opacity: 0.75 !important;
}

/* =========================================================================
   DİĞER MENÜ İKONLARI "SİS BOMBASI" (GLOW) İPTALİ
   ========================================================================= */
/* Diğer tüm menü ikonlarındaki (Ana sayfa vb.) o iğrenç parlamayı yok et, sadece ikon kırmızı olsun */
html body #responsive-menu .sb-top-btn:hover .icon,
html body #responsive-menu .sl-acc__item:hover .icon,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
}

html body #responsive-menu .sb-top-btn:hover .icon svg path,
html body #responsive-menu .sl-acc__item:hover .icon svg path {
    fill: var(--accent, #ed2a39) !important;
    color: var(--accent, #ed2a39) !important;
}
.enterence-box .box-register .other-buttons,
.enterence-box .box-register .or {
    display: none !important;
}

section.faq {
    display: none !important;
}

.enterence-box .hp-hero-bg {
    opacity: 0.35 !important;
    background-size: auto 85% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 991px) {
    .enterence-box .hp-hero-bg {
        background-position: center center !important;
        background-size: auto 65% !important;
        opacity: 0.28 !important;
    }
}

footer.row,
footer.row *,
footer.row .content-block .content,
footer.row .footer-bottom .about,
footer.row .footer-bottom .copyright,
footer.row .footer-menu,
footer.row .footer-menu .title,
footer.row .footer-menu ul,
footer.row .footer-menu li,
footer.row .footer-menu a,
footer.row .footer-menu a:hover,
footer.row .footer-menu a:visited {
    color: #ffffff !important;
}

:root {
    --sidebar-width: 260px !important;
    --sidebar-rail-width: 78px !important;
}

.responsive-menu,
.sidebar-wrapper {
    width: var(--sidebar-width) !important;
}

.responsive-menu.collapsed,
.sidebar-wrapper.collapsed {
    width: var(--sidebar-rail-width) !important;
}

.responsive-menu .sb-top-btn,
.responsive-menu .sl-acc__topBtn,
.responsive-menu .sl-acc__item,
.sidebar-wrapper .sb-top-btn,
.sidebar-wrapper .sl-acc__topBtn,
.sidebar-wrapper .sl-acc__item {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    color: #ffffff !important;
}

.responsive-menu .sb-top-btn,
.sidebar-wrapper .sb-top-btn {
    min-height: 46px;
    padding: 10px 14px !important;
}

/* SIDEBAR — sade dark tone (kırmızı tint kaldırıldı, config'ten beslenir) */
:root {
    --sidebar-bg-open: var(--sv-sidebar-bg-open) !important;
    --sidebar-bg-collapsed: var(--sv-sidebar-bg-collapsed) !important;
    --sidebar-bg-active: var(--sv-sidebar-bg-active) !important;
    --sidebar-bg-open-accent: var(--sv-sidebar-secondary) !important;
    --sidebar-bg-collapsed-accent: var(--sv-sidebar-secondary) !important;
    --sidebar-bg-active-accent: var(--sv-sidebar-item-active-bg) !important;
    --sidebar-stroke-accent: var(--sv-sidebar-stroke) !important;
    --sidebar-top-btn-bg: var(--sv-sidebar-top-btn-bg) !important;
    --sidebar-top-btn-hover-border: var(--sv-sidebar-stroke-strong) !important;
    --sidebar-top-btn-active-border: var(--sv-sidebar-stroke-strong) !important;
    --sidebar-top-btn-active-bg: var(--sv-sidebar-top-btn-active-bg) !important;
}

/* =========================================================================
   HEADER LOGO — ultra high priority (platform `margin-top: 8px` bypass)
   ========================================================================= */
html body header#header,
html body header#header .middle-header {
    min-height: 72px !important;
}

html body header#header .middle-header-container {
    min-height: 72px !important;
    position: relative !important;
}

html body header#header .middle-header-container .logo,
html body header#header .middle-header .middle-header-container .logo {
    position: absolute !important;
    left: calc(50% + var(--sv-header-logo-x-offset, 0px)) !important;
    top: 50% !important;
    transform: translate(-50%, calc(-50% + var(--sv-header-logo-y-offset, 10px))) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: var(--sv-header-logo-max-width, 200px) !important;
    height: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Platform'un `margin-top: 8px` kuralını kesin olarak ez */
html body header#header .middle-header-container .logo a,
html body header#header .middle-header-container .logo img,
html body header#header .middle-header-container .logo a img,
html body header#header div.middle-header div.middle-header-container div.logo img,
html body header#header div.middle-header div.middle-header-container div.logo a img,
html body header#header div.middle-header div.middle-header-container div.logo svg {
    height: var(--sv-header-logo-height, 52px) !important;
    max-height: var(--sv-header-logo-height, 52px) !important;
    max-width: var(--sv-header-logo-max-width, 200px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    display: block !important;
    pointer-events: auto !important;
}

html body header#header .middle-header-container .header-buttons,
html body header#header .middle-header-container .wallet-menu,
html body header#header .middle-header-container .current-wallet,
html body header#header .middle-header-container .login-buttons,
html body header#header .middle-header-container .login-buttons a,
html body header#header .middle-header-container .login-buttons button,
html body header#header .middle-header-container .user-menu,
html body header#header .middle-header-container .notifications-button {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* =========================================================================
   FOOTER LOGO
   ========================================================================= */
html body .footer-logo,
html body div.footer-logo {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: var(--sv-footer-logo-top-margin, 44px) 0 var(--sv-footer-logo-bottom-margin, 28px) 0 !important;
    padding: 0 !important;
}

html body .footer-logo a,
html body .footer-logo img,
html body div.footer-logo img {
    display: inline-block !important;
    margin: 0 auto !important;
    max-height: var(--sv-footer-logo-height, 72px) !important;
    height: var(--sv-footer-logo-height, 72px) !important;
    max-width: var(--sv-footer-logo-max-width, 260px) !important;
    width: auto !important;
    object-fit: contain !important;
    transform: translateX(var(--sv-footer-logo-x-offset, -46px)) !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

footer.row .footer-currencies img,
footer.row .footer-currencies .listing-block img,
footer.row .footer-currencies .currency-listing img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

footer.row .footer-currencies img:hover {
    opacity: 1;
}

/* ========================================================================
   FOOTER COINS — tek satırda otomatik sağa-sola kayma (ping-pong)
   ======================================================================== */
html body footer.row .footer-currencies,
html body .footer-currencies {
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
}

html body footer.row .footer-currencies .currency-listing,
html body .footer-currencies .currency-listing {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 40px !important;
    width: max-content !important;
    align-items: center !important;
    animation: sv-coins-pingpong 16s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important;
    will-change: transform !important;
}

html body footer.row .footer-currencies:hover .currency-listing,
html body .footer-currencies:hover .currency-listing {
    animation-play-state: paused !important;
}

html body footer.row .footer-currencies .listing-block,
html body .footer-currencies .listing-block {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
}

@keyframes sv-coins-pingpong {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-100% + 90vw), 0, 0);
    }
}

/* Mobil için biraz farklı translate */
@media (max-width: 991px) {
    @keyframes sv-coins-pingpong {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(calc(-100% + 88vw), 0, 0);
        }
    }
}

footer.row .footer-contents .content-block .content,
footer.row .footer-contents-col .content-block .content,
footer.row .footer-contents-row .content-block .content,
footer.row .footer-bottom .copyright,
footer.row .footer-bottom .about,
footer.row .footer-bottom .mail,
footer.row .footer-bottom .mail span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ========================================================================
   FOOTER — Platform kuralını yen (footer#footer div.xxx div.content chain)
   Specificity 1,3,4+ ile override
   ======================================================================== */
html body footer#footer div.footer-contents div.content-block div.content,
html body footer#footer div.footer-contents-row div.content-block div.content,
html body footer#footer div.footer-contents-col div.content-block div.content,
html body footer#footer div.footer-bottom div.about,
html body footer#footer div.footer-bottom div.copyright,
html body footer#footer div.footer-bottom div.copyright span,
html body footer#footer div.footer-menus div.footer-menu a,
html body footer#footer div.footer-menus div.footer-menu li,
html body footer#footer div.footer-menus div.footer-menu .title,
html body footer#footer div.footer-menu,
html body footer#footer div.footer-menu * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ========================================================================
   DESTEK / PARTNER / MEDYA — KIRMIZI label, BEYAZ email
   Platform specificity 1,3,4 + !important — biz 1,3,6+ ile yeneceğiz
   HTML: <a class="mail">Destek <span>destek@slotvadi.com</span></a>
   ======================================================================== */
html body footer#footer div.footer-bottom div.emails a.mail,
html body footer#footer.row div.footer-bottom div.emails a.mail,
html body footer#footer[id] div.footer-bottom div.emails a.mail,
html body footer#footer div.footer-bottom[class] div.emails a.mail,
html body footer#footer div.footer-bottom div.emails[class] a.mail,
html body footer[id="footer"] div.footer-bottom div.emails a.mail {
    color: var(--accent, #ed2a39) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

html body footer#footer div.footer-bottom div.emails a.mail span,
html body footer#footer.row div.footer-bottom div.emails a.mail span,
html body footer#footer[id] div.footer-bottom div.emails a.mail span,
html body footer[id="footer"] div.footer-bottom div.emails a.mail span {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* ========================================================================
   18+ ICON (licence-2.svg) — beyaz yap
   Curaçao shield (licence-1.svg) orijinal yeşil kalsın
   ======================================================================== */
html body footer#footer .content-block .icon img[src*="licence-2"],
html body footer#footer img[src*="licence-2"],
html body footer#footer .footer-contents-col:nth-of-type(2) .content-block .icon img,
html body footer#footer .footer-contents-col:nth-child(2) .content-block .icon img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.95 !important;
}

/* ========================================================================
   FOOTER MOBILE — desktop kuralları aynen mobile'da da uygulansın
   (Platform mobile-specific override yapıyorsa onu yen)
   ======================================================================== */
@media (max-width: 991px) {
    html body footer#footer div.footer-contents div.content-block div.content,
    html body footer#footer div.footer-contents-row div.content-block div.content,
    html body footer#footer div.footer-contents-col div.content-block div.content,
    html body footer#footer div.footer-bottom div.about,
    html body footer#footer div.footer-bottom div.copyright,
    html body footer#footer div.footer-bottom div.copyright span,
    html body footer#footer div.footer-menus div.footer-menu a,
    html body footer#footer div.footer-menus div.footer-menu li,
    html body footer#footer div.footer-menus div.footer-menu .title,
    html body footer#footer div.footer-menu,
    html body footer#footer div.footer-menu * {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    /* Mobile mail labels (Destek/Partner/Medya) — kırmızı */
    html body footer#footer div.footer-bottom div.emails a.mail,
    html body footer[id="footer"] div.footer-bottom div.emails a.mail {
        color: var(--accent, #ed2a39) !important;
        font-weight: 600 !important;
    }

    html body footer#footer div.footer-bottom div.emails a.mail span,
    html body footer[id="footer"] div.footer-bottom div.emails a.mail span {
        color: #ffffff !important;
    }

    /* Mobile 18+ icon white */
    html body footer#footer img[src*="licence-2"],
    html body footer#footer .footer-contents-col:nth-of-type(2) .content-block .icon img {
        filter: brightness(0) invert(1) !important;
    }
}

/* ========================================================================
   FOOTER — Fallback generic override (footer.row, footer yapı varyasyonları)
   ======================================================================== */
html body footer,
html body footer *,
html body footer.row,
html body footer.row *,
html body footer.row .content,
html body footer.row .content *,
html body footer.row .content-block,
html body footer.row .content-block *,
html body footer.row .about,
html body footer.row .about *,
html body footer.row .about a,
html body footer.row .about span,
html body footer.row .about strong,
html body footer.row .copyright,
html body footer.row .copyright *,
html body footer.row .copyright span,
html body footer.row .copyright a,
html body footer.row .mail,
html body footer.row .mail *,
html body footer.row .mail span,
html body footer.row .mail a,
html body footer.row .mail strong,
html body footer.row .footer-bottom,
html body footer.row .footer-bottom *,
html body footer.row .footer-bottom a,
html body footer.row .footer-bottom span,
html body footer.row .footer-bottom strong,
html body footer.row .footer-bottom .about,
html body footer.row .footer-bottom .mail span,
html body footer.row .footer-bottom .copyright,
html body footer.row .footer-contents,
html body footer.row .footer-contents *,
html body footer.row .footer-contents-row,
html body footer.row .footer-contents-row *,
html body footer.row .footer-contents-col,
html body footer.row .footer-contents-col *,
html body footer.row .footer-menus,
html body footer.row .footer-menus *,
html body footer.row .footer-menu,
html body footer.row .footer-menu *,
html body footer.row .footer-menu a,
html body footer.row .footer-menu .title,
html body footer.row .footer-menu li,
html body footer.row .footer-menu ul,
html body footer.row .footer-currencies,
html body footer.row .footer-currencies *,
html body footer.row .footer-bottoms,
html body footer.row .footer-bottoms *,
html body footer.row p,
html body footer.row span:not(.logo):not([class*="icon"]),
html body footer.row a,
html body footer.row strong,
html body footer.row em,
html body footer.row div {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ========================================================================
   SAĞLAYICILAR — Swiper.js carousel
   Tümünü Gör + ok butonlarını gizle + otomatik sağa-sola kayma
   ======================================================================== */
.provider-carousel .owl-nav,
.provider-carousel .owl-nav--header,
.provider-carousel .owl-view-all,
.provider-carousel .owl-prev,
.provider-carousel .owl-next,
.provider-carousel [class*="view-all"],
.provider-carousel .owl-dots,
.provider-carousel .swiper-button-prev,
.provider-carousel .swiper-button-next,
.provider-carousel .swiper-pagination,
.provider-carousel .section-header .owl-nav--header {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Swiper wrapper — animasyon */
.provider-carousel .swiper,
.provider-carousel .swiper-initialized {
    overflow: hidden !important;
}

html body .provider-carousel .swiper-wrapper {
    animation: sv-providers-auto-scroll 45s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important;
    will-change: transform !important;
    transform: translate3d(0, 0, 0);
}

html body .provider-carousel .swiper:hover .swiper-wrapper,
html body .provider-carousel .swiper-wrapper:hover,
html body .provider-carousel:hover .swiper-wrapper {
    animation-play-state: paused !important;
}

@keyframes sv-providers-auto-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-55%, 0, 0);
    }
}

/* Owl için legacy fallback (eğer başka yerde owl kullanılırsa) */
.provider-carousel .owl-carousel .owl-stage {
    animation: sv-providers-auto-scroll 45s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important;
    will-change: transform !important;
}

.provider-carousel .owl-carousel:hover .owl-stage {
    animation-play-state: paused !important;
}

/* =========================================================================
   HARDCODED NAVY/BLUE STRIPOUT
   ========================================================================= */
.responsive-menu,
.responsive-menu.active-menu,
.sidebar-wrapper {
    background-image: radial-gradient(420px 220px at 50% 0%, rgba(var(--accent-rgb), 0.22), transparent 62%),
    linear-gradient(180deg, rgba(24, 14, 16, 0.98) 0%, rgba(14, 10, 12, 0.98) 100%) !important;
}

.sidebar-section-title__line,
.sb-section-title__line,
.section-title__line {
    background-image: linear-gradient( 90deg,
    rgba(var(--accent-rgb), 0),
    rgba(var(--accent-rgb), 0.55),
    rgba(var(--accent-rgb), 0)) !important;
}

.enterence-box .hero-box .profile-card,
.enterence-box .hero-box .vip-card,
.enterence-box .hero-box .user-vip,
.enterence-box .hero-box .user-progress,
.enterence-box .hero-box [class*="profile-card"],
.enterence-box .hero-box [class*="vip-progress"],
.enterence-box .hero-box > div:not(.box-container):not(.hp-hero-bg) {
    background: radial-gradient(260px 160px at 10% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, rgba(28, 16, 18, 0.94) 0%, rgba(16, 10, 12, 0.96) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.enterence-box .hero-box .progress-bar,
.enterence-box .hero-box .progress-fill,
.enterence-box .hero-box [class*="progress"] .fill {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9) 0%, rgba(var(--accent-rgb), 1) 100%) !important;
}

.hero-box,
.box-container,
.section-header,
.section-title {
    background-color: transparent !important;
}

[style*="rgba(55, 153, 255"],
[style*="rgba(48, 126, 255"],
[style*="rgb(55, 153, 255)"],
[style*="rgb(48, 126, 255)"] {
    background-image: linear-gradient(180deg, rgba(24, 14, 16, 0.98), rgba(14, 10, 12, 0.98)) !important;
}

/* =========================================================================
   HERO ↔ BODY DIVIDER + FOOTER UNIFICATION
   ========================================================================= */
html,
body,
main,
main.home,
footer.row {
    background-color: #0d0d0f !important;
}

footer.row {
    background-image: none !important;
}

.enterence-box {
    position: relative !important;
    box-shadow: var(--sv-hero-divider-inset-shadow),
    0 20px 48px rgba(0, 0, 0, 0.52);
    padding-bottom: var(--sv-hero-divider-pad-bottom);
    margin-bottom: var(--sv-hero-divider-margin-bottom);
}

.enterence-box::after {
    content: "";
    position: absolute;
    left: var(--sv-hero-divider-inset-x);
    right: var(--sv-hero-divider-inset-x);
    bottom: 0;
    height: var(--sv-hero-divider-height);
    opacity: var(--sv-hero-divider-show, 1);
    background: linear-gradient( 90deg,
    rgba(var(--accent-rgb), 0) 0%,
    rgba(var(--accent-rgb), 0.75) 12%,
    var(--sv-hero-divider-color) 50%,
    rgba(var(--accent-rgb), 0.75) 88%,
    rgba(var(--accent-rgb), 0) 100%);
    box-shadow:
    0 0 var(--sv-hero-divider-glow-1) rgba(var(--accent-rgb), var(--sv-hero-divider-glow-1-opacity)),
    0 0 var(--sv-hero-divider-glow-2) rgba(var(--accent-rgb), var(--sv-hero-divider-glow-2-opacity)),
    0 0 var(--sv-hero-divider-glow-3) rgba(var(--accent-rgb), var(--sv-hero-divider-glow-3-opacity)),
    0 0 var(--sv-hero-divider-glow-4) rgba(var(--accent-rgb), var(--sv-hero-divider-glow-4-opacity));
    border-radius: var(--sv-hero-divider-radius);
    pointer-events: none;
}

main .search-form,
.search-form,
.top-search-form,
.top-search-input-wrapper {
    background: radial-gradient(900px 220px at 15% 0%, rgba(255, 255, 255, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(26, 14, 16, 0.96), rgba(14, 10, 12, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* =========================================================================
   SIDEBAR — red/black styling
   ========================================================================= */
/* Sidebar — sade, hafif kırmızı vurgu, çoğunlukla nötr koyu */
#responsive-menu,
#responsive-menu.responsive-menu,
html body #responsive-menu,
html body #responsive-menu.responsive-menu {
    --sidebar-bg-open-secondary: rgba(var(--accent-rgb), 0.06) !important;
    --sidebar-bg-collapsed-secondary: rgba(var(--accent-rgb), 0.06) !important;
    --stroke: rgba(255, 255, 255, 0.08) !important;
    --sidebar-stroke: rgba(255, 255, 255, 0.06) !important;
    --sidebar-stroke-strong: rgba(255, 255, 255, 0.12) !important;

    background:
        /* Sadece sol-üstte hafif kırmızı vurgu */
        radial-gradient(450px 300px at 0% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
        /* Base: nötr koyu siyah */
        linear-gradient(180deg, rgba(18, 18, 22, 0.98) 0%, rgba(12, 12, 14, 0.98) 100%) !important;
    background-color: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
}

html body div.sidebar-wrapper {
    background-color: transparent !important;
    background-image:
        radial-gradient(300px 200px at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 62%),
        linear-gradient(180deg, rgba(16, 16, 20, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

/* =========================================================================
   SIDEBAR MENU ITEMS
   ========================================================================= */
html body #responsive-menu .sb-top-btn,
html body #responsive-menu a.sb-top-btn,
html body #responsive-menu a.sb-top-btn:not(.active),
html body #responsive-menu .sl-acc__topBtn,
html body #responsive-menu .sl-acc__item {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.04)) !important;
    background-color: rgba(22, 12, 14, 0.6) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.30) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

html body #responsive-menu .sb-top-btn:hover,
html body #responsive-menu a.sb-top-btn:hover,
html body #responsive-menu .sl-acc__topBtn:hover {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.10)) !important;
    border-color: rgba(var(--accent-rgb), 0.55) !important;
    transform: translateY(-1px);
}

html body #responsive-menu .sb-top-btn.active,
html body #responsive-menu a.sb-top-btn.active,
html body #responsive-menu .sb-top-btn[aria-current],
html body #responsive-menu a.sb-top-btn[aria-current] {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.38), rgba(var(--accent-rgb), 0.22)) !important;
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.30), 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

html body #responsive-menu .sb-top-btn .icon,
html body #responsive-menu .sb-top-btn svg,
html body #responsive-menu .sb-top-btn .icon svg,
html body #responsive-menu .sl-acc__topBtn .icon svg,
html body #responsive-menu .sl-acc__item .icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 1px 3px rgba(var(--accent-rgb), 0.35));
}

html body #responsive-menu .sb-top-btn svg[fill="none"] path,
html body #responsive-menu .sb-top-btn svg path {
    fill: #ffffff !important;
}

html body #responsive-menu .sb-top-btn .arrow,
html body #responsive-menu .sb-top-btn .chevron,
html body #responsive-menu .sb-top-btn > span:last-child svg {
    color: rgba(var(--accent-rgb), 0.8) !important;
    fill: currentColor !important;
}

html body #responsive-menu .p2tabs--sidebar .p2seg.casino,
html body #responsive-menu .p2tabs--sidebar .p2seg.sportsbook {
    border: 1px solid rgba(var(--accent-rgb), 0.38) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.15) !important;
    border-radius: 10px !important;
}

html body #responsive-menu .sidebar-promo,
html body #responsive-menu .sidebar-chip,
html body #responsive-menu .sidebar-promo-item {
    background: rgba(var(--accent-rgb), 0.08) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.20) !important;
}

html body #responsive-menu .sidebar-section-title__line,
html body #responsive-menu .sb-section-title__line {
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent) !important;
}

html body,
html body.dark-mode,
html body.sb-collapsed,
html body.modal-open,
html body.dark-mode.sb-collapsed,
html body[class],
html[lang] body {
    background-color: #0d0d0f !important;
    background-image:
        radial-gradient(900px 500px at 0% 0%, rgba(var(--accent-rgb), 0.10), transparent 58%),
        radial-gradient(700px 400px at 100% 30%, rgba(var(--accent-rgb), 0.05), transparent 60%),
        linear-gradient(180deg, #121214 0%, #0b0b0d 100%) !important;
}

/* main ve content alanları da aynı red-black palet */
html body main,
html body main.home,
html body .page-content,
html body #__next,
html body > div {
    background-color: transparent !important;
}

/* =========================================================================
/* =========================================================================
   AUTH MODAL (GİRİŞ YAP / KAYIT OL) - KESİN ÇÖZÜM
   ========================================================================= */
.modal, .modal *, .modal-dialog, .modal-dialog *, .auth-modal, .auth-modal *,
.global-modal, .global-modal *, .modal .form-label, .modal label,
.modal .form-title, .modal h1, .modal h2, .modal h3, .modal h4, .modal h5 {
    color: #ffffff !important;
}

.modal .modal-dialog .modal-content, .modal .modal-content,
.auth-modal .modal-content, .global-modal .modal-content {
    background: radial-gradient(700px 300px at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    linear-gradient(180deg, rgba(22, 14, 16, 0.98), rgba(12, 10, 12, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 1. Modal Kapsayıcı (Kaydırma çubuğu artık KESİN OLARAK burada olacak!) */
html body .modal.auth-modal {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 999999 !important;
    text-align: center !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* 2. Görünmez Dikey Ortalama Elementi (Chrome'u sakinleştirir) */
html body .modal.auth-modal::before {
    content: '';
    display: inline-block !important;
    height: 100% !important;
    vertical-align: middle !important;
}

/* 3. Formun Ana Kutusu (Tam ortalama) */
html body .modal.auth-modal .modal-dialog,
html body div.modal.auth-modal > .modal-dialog,
html body .modal.auth-modal .modal-dialog.modal-dialog-centered {
    display: inline-block !important;
    text-align: left !important;
    vertical-align: middle !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 40px auto !important;
    max-width: 420px !important;
    width: 100% !important;
}

/* 4. İçerik Kutusu (Kısıtlama yok, form rahatça açılır) */
html body .modal.auth-modal .modal-content,
html body .modal.auth-modal .modal-dialog .modal-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
}

/* 5. Alt Boşluk (Mobilde "Devam Et" butonu tam görünsün diye boşluk eklendi) */
html body .modal.auth-modal .modal-body {
    padding: 18px 20px 60px !important; 
}

html body .modal.auth-modal .modal-header {
    padding: 14px 20px 6px !important;
}

html body .modal.auth-modal .form-group {
    margin-bottom: 12px !important;
}

html body .modal.auth-modal .form-buttons button {
    padding: 10px 16px !important;
    font-size: 14px !important;
}

/* 6. KAYIT OL BEYAZ YAZI KESİN ÇÖZÜMÜ */
html body .modal.auth-modal .modal-header .active,
html body .modal.auth-modal .modal-header .active *,
html body .modal.auth-modal .modal-header [aria-selected="true"],
html body .modal.auth-modal .modal-header [aria-selected="true"] *,
html body .modal.auth-modal .modal-header .is-active,
html body .modal.auth-modal .modal-header .is-active *,
html body .auth-modal .nav-link.active,
html body .auth-modal .nav-link.active *,
html body .auth-modal [role="tab"].active,
html body .auth-modal [role="tab"].active *,
html body .auth-modal .v-tab--active,
html body .auth-modal .v-tab--active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 575px) {
    html body .modal.auth-modal .modal-dialog {
        margin: 20px auto !important;
    }
}

/* DUYURU popup (SlotVadi V2 geçişimiz vb.) — sadece bu modal küçültülsün */
html body .modal.global-modal.global-modal--img .modal-dialog,
html body .global-modal.global-modal--img .modal-dialog {
    max-width: 460px !important;
    width: 100% !important;
    margin: 2rem auto !important;
}

html body .modal.global-modal.global-modal--img .modal-content,
html body .global-modal.global-modal--img .modal-content {
    padding: 0 !important;
    border-radius: 14px !important;
}

html body .modal.global-modal.global-modal--img .modal-body,
html body .global-modal.global-modal--img .modal-body {
    padding: 14px !important;
}

/* Duyuru içindeki görsel de sığsın */
html body .modal.global-modal.global-modal--img .global-modal__img,
html body .global-modal.global-modal--img .global-modal__img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 500px !important;
    object-fit: contain !important;
}

@media (max-width: 575px) {
    html body .modal.global-modal.global-modal--img .modal-dialog,
    html body .global-modal.global-modal--img .modal-dialog {
        max-width: calc(100% - 24px) !important;
        margin: 12px auto !important;
    }
}

/* =========================================================================
   MINI SIDEBAR FIX — collapsed state'de sidebar-wrapper 78px
   Aksi halde butonlar x=113'te render edilir (rail dışında, görünmez)
   ========================================================================= */
html body.sb-collapsed #responsive-menu .sidebar-wrapper,
html body.sb-collapsed #responsive-menu .sidebar-content,
html body.sb-collapsed #responsive-menu .menu-body,
html body.sb-collapsed #responsive-menu .sb-content-animate,
html body.sb-collapsed #responsive-menu .categories,
html body.sb-collapsed #responsive-menu .sb-top,
html body.sb-collapsed #responsive-menu .p2tabs,
html body.sb-collapsed #responsive-menu .p2tabs--sidebar,
html body.sb-collapsed #responsive-menu .sidebar-section-title {
    width: 78px !important;
    max-width: 78px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

html body.sb-collapsed #responsive-menu .sb-top,
html body.sb-collapsed #responsive-menu .p2tabs--sidebar {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
}

html body.sb-collapsed #responsive-menu .sb-top-btn,
html body.sb-collapsed #responsive-menu .p2seg,
html body.sb-collapsed #responsive-menu .sl-acc__topBtn {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.auth-modal .auth-logo,
.auth-modal .auth-logo .logo,
.auth-modal .auth-logo .logo a,
.auth-modal .auth-logo .logo img,
.auth-modal .modal-body .auth-logo img,
.auth-modal img.dark-logo {
    opacity: 1 !important;
    filter: none !important;
    height: auto !important;
    max-height: 60px !important;
    max-width: 180px !important;
    width: auto !important;
}

.auth-modal .auth-logo {
    text-align: center !important;
    margin: 10px auto 16px !important;
    padding: 0 !important;
    display: block !important;
}

.auth-modal .ato-btn,
.modal .ato-btn,
.ato-wrap .ato-btn {
    background: rgba(var(--accent-rgb), 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--accent-rgb), 0.42) !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.auth-modal .ato-btn:hover,
.modal .ato-btn:hover {
    background: rgba(var(--accent-rgb), 0.32) !important;
    border-color: rgba(var(--accent-rgb), 0.6) !important;
}

.auth-modal .ato-btn.is-active,
.modal .ato-btn.is-active,
.ato-wrap .ato-btn.is-active {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.42) !important;
}

.auth-modal .ato-indicator,
.modal .ato-indicator {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.32) !important;
}

.auth-modal .or-auth,
.auth-modal .other-buttons,
.auth-modal .or,
.auth-modal .social-logins,
.auth-modal a[href*="google"],
.auth-modal .google-auth,
.auth-modal [class*="google"] {
    display: none !important;
}

.enterence-box .or-auth,
.enterence-box .other-buttons,
.enterence-box .or,
.enterence-box a[href*="google"] {
    display: none !important;
}

/* =========================================================================
   "DAHA FAZLA GÖSTER" / LOAD MORE
   ========================================================================= */
.load-more,
.show-more,
[class*="load-more"],
[class*="show-more"],
button.btn-more,
a.btn-more,
.owl-btn-more,
.more-button,
.more-btn {
    color: var(--accent) !important;
    background: rgba(var(--accent-rgb), 0.10) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.35) !important;
    border-radius: 8px !important;
}

.load-more *,
.show-more *,
[class*="load-more"] *,
[class*="show-more"] *,
.owl-btn-more *,
.more-button *,
.more-btn * {
    color: var(--accent) !important;
    fill: currentColor !important;
}

.load-more svg,
.show-more svg,
[class*="load-more"] svg,
[class*="show-more"] svg,
.owl-btn-more svg,
.more-button svg,
.more-btn svg,
.load-more svg path,
.show-more svg path,
[class*="load-more"] svg path,
[class*="show-more"] svg path {
    fill: var(--accent) !important;
    stroke: var(--accent) !important;
    color: var(--accent) !important;
}

.spinner,
[class*="spinner"] circle,
[class*="loader"] path,
[class*="spinner"] path,
.loading-icon,
.load-more .spinner,
.show-more .spinner {
    stroke: var(--accent) !important;
    color: var(--accent) !important;
}

[class*="load-more"] svg[class*="joystick"],
[class*="load-more"] svg[class*="controller"],
button[class*="more"] svg,
a[class*="more"] svg {
    color: var(--accent) !important;
    fill: var(--accent) !important;
}

/* =========================================================================
   FOOTER — all text white (reinforcement)
   ========================================================================= */
footer.row,
footer.row a,
footer.row p,
footer.row span,
footer.row div,
footer.row li,
footer.row .title,
footer.row .content-block,
footer.row .content-block .content,
footer.row .footer-bottom,
footer.row .footer-bottom .copyright,
footer.row .footer-bottom .about,
footer.row .footer-bottom .mail,
footer.row .footer-bottom .mail span,
footer.row .footer-menu,
footer.row .footer-menu .title,
footer.row .footer-menu a,
footer.row .footer-currencies,
footer.row .footer-currencies span,
footer .footer-contents,
footer .footer-contents * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* =========================================================================
   MOBILE (≤ 991px) — tek birleşik blok
   ========================================================================= */
@media (max-width: 991px) {
    html body header#header .middle-header-container {
        min-height: 64px !important;
    }

    html body header .logo:not(.responsive-logo),
    html body header#header .logo:not(.responsive-logo),
    html body header#header .middle-header .logo:not(.responsive-logo),
    html body header#header .middle-header-container .logo:not(.responsive-logo),
    html body header#header .middle-header .middle-header-container .logo:not(.responsive-logo),
    html body header#header .middle-header-container div.logo:not(.responsive-logo),
    html body header#header div.logo:not(.responsive-logo),
    header .logo:not(.responsive-logo) {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        right: auto !important;
        bottom: auto !important;
        display: block !important;
        width: 1px !important;
        height: 1px !important;
        max-width: 1px !important;
        max-height: 1px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
        transform: translate(-9999px, -9999px) !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
    }

    html body header .logo:not(.responsive-logo) *,
    html body header .logo:not(.responsive-logo) a,
    html body header .logo:not(.responsive-logo) img,
    header .logo:not(.responsive-logo) img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body header#header .middle-header-container .responsive-logo,
    html body header .responsive-logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-left: 10px !important;
        pointer-events: none !important;
        position: relative !important;
        z-index: 2 !important;
    }

    html body header#header .middle-header-container .responsive-logo a,
    html body header#header .middle-header-container .responsive-logo img,
    html body header#header .middle-header-container .responsive-logo a img,
    html body header .responsive-logo img {
        height: var(--sv-header-logo-mobile-height, 64px) !important;
        max-height: var(--sv-header-logo-mobile-height, 64px) !important;
        max-width: var(--sv-header-logo-mobile-max-width, 210px) !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Logo container — flex-shrink ile sağdaki butonlara yer bıraksın */
    html body header#header .middle-header-container .responsive-logo {
        flex: 0 1 auto !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* Mobile (≤991px) — wordmark logo SOL ORTALI
       Sağdaki cüzdan kompaktlandığı için padding-left azaltıldı (logo nefes alsın) */
    html body header#header .middle-header-container {
        position: relative !important;
        padding-left: calc(var(--sv-mobile-logo-left, 10px) + var(--sv-mobile-logo-max-width, 150px) + 4px) !important;
        padding-right: 4px !important;
    }

    html body header#header .middle-header-container .responsive-logo,
    html body header .responsive-logo {
        position: absolute !important;
        left: var(--sv-mobile-logo-left, 10px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        max-width: var(--sv-mobile-logo-max-width, 150px) !important;
        width: auto !important;
        z-index: 5 !important;
        overflow: visible !important;
    }

    html body header#header .middle-header-container .responsive-logo a,
    html body header#header .middle-header-container .responsive-logo img,
    html body header .responsive-logo img {
        height: var(--sv-mobile-logo-height, 36px) !important;
        max-height: var(--sv-mobile-logo-height, 36px) !important;
        max-width: var(--sv-mobile-logo-max-width, 150px) !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Mobile (≤991px) — Bakiye DOĞRU SELECTOR ile kırpılır
       Platform yapısı: .balance > .icon + .money + .down
       .money div'i içinde bakiye yazısı var → onu kırpıyoruz */
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.money,
    html body header#header .middle-header-container .wallet-menu .current-wallet .balance .money {
        max-width: var(--sv-mobile-balance-width, 4ch) !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        padding: 0 var(--sv-mobile-wallet-money-padding-x, 2px) !important;
        margin: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        font-size: var(--sv-mobile-wallet-font-size, 12px) !important;
        line-height: 1.1 !important;
    }

    /* .money içindeki span (USD/TRY etiketi) — istersen onu da gizle */
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.money span {
        display: var(--sv-mobile-balance-currency-show, none) !important;
    }

    /* Tüm balance container max-width'i + flex gap (boş alan azaltılıyor) */
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance {
        max-width: var(--sv-mobile-wallet-max-width, 88px) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        gap: var(--sv-mobile-wallet-gap, 3px) !important;
        column-gap: var(--sv-mobile-wallet-gap, 3px) !important;
        padding: 0 !important;
    }

    /* Wallet button padding kompakt → boş alan azalır */
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button {
        padding: var(--sv-mobile-wallet-padding, 4px 7px) !important;
        gap: var(--sv-mobile-wallet-gap, 3px) !important;
        column-gap: var(--sv-mobile-wallet-gap, 3px) !important;
        min-width: 0 !important;
        font-size: var(--sv-mobile-wallet-font-size, 12px) !important;
    }

    /* Icon küçültme — büyük dolgu yapmasın */
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.icon,
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.icon img {
        width: var(--sv-mobile-wallet-icon-size, 18px) !important;
        height: var(--sv-mobile-wallet-icon-size, 18px) !important;
        max-width: var(--sv-mobile-wallet-icon-size, 18px) !important;
        max-height: var(--sv-mobile-wallet-icon-size, 18px) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Down arrow küçültme */
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.down,
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.down svg,
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet div.balance div.down img {
        width: var(--sv-mobile-wallet-arrow-size, 10px) !important;
        height: var(--sv-mobile-wallet-arrow-size, 10px) !important;
        max-width: var(--sv-mobile-wallet-arrow-size, 10px) !important;
        max-height: var(--sv-mobile-wallet-arrow-size, 10px) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body header#header .middle-header-container .header-buttons,
    html body header#header .middle-header-container .wallet-menu,
    html body header#header .middle-header-container .current-wallet,
    html body header#header .middle-header-container .login-buttons,
    html body header#header .middle-header-container .login-buttons a,
    html body header#header .middle-header-container .login-buttons button,
    html body header#header .middle-header-container .user-menu,
    html body header#header .middle-header-container .notifications-button,
    html body header#header .middle-header-container a.wallet-button,
    html body header#header .middle-header-container .button.register,
    html body header#header .middle-header-container .button.login {
        position: relative !important;
        z-index: 20 !important;
        pointer-events: auto !important;
    }

    html body .footer-logo,
    html body div.footer-logo {
        margin: 32px 0 24px 0 !important;
        text-align: center !important;
    }

    html body .footer-logo img,
    html body div.footer-logo img {
        transform: translateX(var(--sv-footer-logo-mobile-x-offset, 0px)) !important;
        margin: 0 auto !important;
        height: var(--sv-footer-logo-mobile-height, 64px) !important;
        max-height: var(--sv-footer-logo-mobile-height, 64px) !important;
        max-width: var(--sv-footer-logo-mobile-max-width, 220px) !important;
    }

    .enterence-box .hp-hero-bg {
        background-size: auto 90% !important;
        background-position: center center !important;
        opacity: 0.32 !important;
    }

    /* ============================================================
       LOWBAR WALLET — Kabartmalı parlak kırmızı küre (lifted gloss dome)
       Yukarıya kalkık, 3D camsı his, beyaz favicon
       ============================================================ */
    html body .sticky-menu .menu-item.wallet,
    html body .menu-items .menu-item.wallet {
        position: relative !important;
        overflow: visible !important;
        /* Platform ring var'larını sıfırla */
        --lb-wallet-ring-color: transparent !important;
        --lb-wallet-ring-size: 0 !important;
        --lb-wallet-glow: transparent !important;
        --lb-wallet-glow-radius: transparent !important;
    }

    /* Platform'un pseudo-ring'lerini kaldır */
    html body .sticky-menu .menu-item.wallet::before,
    html body .sticky-menu .menu-item.wallet::after,
    html body .sticky-menu .menu-item.wallet .logo::before,
    html body .sticky-menu .menu-item.wallet .logo::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* KÜRE — parlak kırmızı, yukarıya kalkmış */
    html body .sticky-menu .menu-item.wallet .logo,
    html body .menu-items .menu-item.wallet .logo {
        box-sizing: border-box !important;
        width: var(--sv-lowbar-wallet-circle-size, 60px) !important;
        height: var(--sv-lowbar-wallet-circle-size, 60px) !important;
        min-width: var(--sv-lowbar-wallet-circle-size, 60px) !important;
        min-height: var(--sv-lowbar-wallet-circle-size, 60px) !important;
        max-width: var(--sv-lowbar-wallet-circle-size, 60px) !important;
        max-height: var(--sv-lowbar-wallet-circle-size, 60px) !important;
        border-radius: 50% !important;
        border: none !important;
        outline: none !important;
        /* Parlak küre: üstten aşağı açık → koyu kırmızı + tepede beyaz highlight */
        background:
            radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 38%),
            radial-gradient(circle at 50% 100%, #8a0f17 0%, #c4232e 35%, #ed2a39 65%, #ff5865 100%) !important;
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.08),
            0 10px 22px rgba(237, 42, 57, 0.55),
            0 14px 32px rgba(0, 0, 0, 0.45),
            inset 0 -4px 10px rgba(0, 0, 0, 0.35),
            inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
        transform: translateY(-10px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transition: transform 0.15s ease, box-shadow 0.2s ease !important;
    }

    html body .sticky-menu .menu-item.wallet:active .logo {
        transform: translateY(-6px) scale(0.97) !important;
        box-shadow:
            0 6px 14px rgba(237, 42, 57, 0.45),
            0 8px 18px rgba(0, 0, 0, 0.4),
            inset 0 -3px 8px rgba(0, 0, 0, 0.4) !important;
    }

    /* Favicon — beyaza çevrilmiş (kırmızı kürenin üstünde görünür) */
    html body .sticky-menu .menu-item.wallet .logo img,
    html body .menu-items .menu-item.wallet .logo img {
        box-sizing: border-box !important;
        width: var(--sv-lowbar-wallet-favicon-size, 28px) !important;
        height: var(--sv-lowbar-wallet-favicon-size, 28px) !important;
        max-width: calc(var(--sv-lowbar-wallet-circle-size, 60px) - 20px) !important;
        max-height: calc(var(--sv-lowbar-wallet-circle-size, 60px) - 20px) !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        /* Kırmızı favicon'u beyaza çevir */
        filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)) !important;
    }

    /* "Anasayfa" yazısı — kürenin altında, biraz yukarı (küre kalktığı için) */
    html body .sticky-menu .menu-item.wallet .text {
        margin-top: -4px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    }
}

/* ========================================================================
   MOBILE TIGHT (≤ 767px) — Tombet stili: sol wordmark + kompakt bakiye
   ======================================================================== */
@media (max-width: 767px) {
    /* Header container — logo ve butonlar aynı satırda hizalı */
    html body header#header .middle-header-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-left: calc(var(--sv-mobile-logo-left, 12px) + var(--sv-mobile-logo-max-width, 110px) + 8px) !important;
    }

    /* Wordmark logo SOL ORTALI — Tombet gibi */
    html body header#header .middle-header-container .responsive-logo,
    html body header .responsive-logo {
        display: flex !important;
        position: absolute !important;
        left: var(--sv-mobile-logo-left, 10px) !important;
        top: var(--sv-mobile-logo-top, 50%) !important;
        transform: translateY(-50%) !important;
        max-width: var(--sv-mobile-logo-max-width, 150px) !important;
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 5 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    html body header#header .middle-header-container .responsive-logo a,
    html body header#header .middle-header-container .responsive-logo img,
    html body header .responsive-logo img {
        height: var(--sv-mobile-logo-height, 32px) !important;
        max-height: var(--sv-mobile-logo-height, 32px) !important;
        max-width: var(--sv-mobile-logo-max-width, 110px) !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Sağ butonlar — kompakt, sığsın */
    html body header#header .middle-header-container .header-buttons {
        gap: 4px !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    /* Cüzdan/bakiye butonu — kompakt */
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button {
        font-size: var(--sv-mobile-wallet-font-size, 12px) !important;
        padding: var(--sv-mobile-wallet-padding, 6px 10px) !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    /* BAKİYE FAZLASINI GİZLE — 0.00000000 → 0.00 görünür
       Wallet button'ın TAMAMINI sınırla, içindeki balance kırpılır */
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button,
    html body header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button {
        max-width: var(--sv-mobile-wallet-max-width, 110px) !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        position: relative !important;
    }

    /* Tüm yazı child'ları kırpılır */
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button > *,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .balance,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .amount,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button span {
        max-width: var(--sv-mobile-balance-width, 5ch) !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 1 !important;
    }

    /* Icon ve arrow KIRPILMASIN */
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .icon,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button > .icon,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .icon img,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .arrow,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .caret,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button .dropdown,
    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button > svg {
        max-width: none !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    html body header#header .middle-header-container .login-buttons a.button.register,
    html body header#header .middle-header-container .header-buttons a.button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    html body header#header .middle-header-container .user-menu,
    html body header#header .middle-header-container .notifications-button {
        padding: 4px !important;
        margin: 0 !important;
    }
}

/* ========================================================================
   SITE ZOOM — SADECE MASAÜSTÜ için orantılı büyütme
   Mobilde (≤ 991px) zoom uygulanmaz — mobile orijinal boyutta kalır
   --sv-site-zoom değişkenini config panelden ayarla (1.0 = %100)
   ======================================================================== */
@media (min-width: 992px) {
    html body {
        zoom: var(--sv-site-zoom, 1.08);
    }

    /* Firefox fallback (modern Firefox 126+ zoom destekliyor) */
    @-moz-document url-prefix() {
        html body {
            zoom: unset;
        }
    }
}

/* ========================================================================
   SIDEBAR — SADE GÖRÜNÜM
   - Tüm kırmızı border/çerçeveler kaldırıldı (transparent)
   - Hover'da sadece icon kırmızıya dönüyor
   - Active item sol kırmızı çizgi (indicator) korunuyor
   - Boyutlara dokunulmadı
   ======================================================================== */

/* Tüm sidebar item butonlarında çerçeveyi TAMAMEN öldür
   border + outline + box-shadow + ring + ::before/::after border'ları
   → sadece sol kırmızı active çizgi (config'ten gelir) ve hover bg kalır */
html body .responsive-menu .sb-top-btn,
html body .responsive-menu .sl-acc__topBtn,
html body .responsive-menu .sl-acc__head,
html body .responsive-menu .sl-acc__item,
html body .responsive-menu .sl-acc__itemInner,
html body .responsive-menu .sl-acc__bodyWrap,
html body .responsive-menu .sl-acc__list,
html body .responsive-menu .sl-acc__bullet,
html body .responsive-menu .sb-top-arrow,
html body .responsive-menu .sl-acc__chev,
html body .sidebar-wrapper .sb-top-btn,
html body .sidebar-wrapper .sl-acc__topBtn,
html body .sidebar-wrapper .sl-acc__head,
html body .sidebar-wrapper .sl-acc__item,
html body .sidebar-wrapper .sl-acc__itemInner,
html body .sidebar-wrapper .sl-acc__bodyWrap,
html body .sidebar-wrapper .sl-acc__list,
html body .sidebar-wrapper .sl-acc__bullet,
html body .sidebar-wrapper .sb-top-arrow,
html body .sidebar-wrapper .sl-acc__chev,
html body #responsive-menu .sb-top-btn,
html body #responsive-menu .sl-acc__topBtn,
html body #responsive-menu .sl-acc__head,
html body #responsive-menu .sl-acc__item,
html body #responsive-menu .sl-acc__itemInner,
html body #responsive-menu li.sl-acc__item,
html body #responsive-menu a.sl-acc__item,
html body #responsive-menu div.sl-acc__itemInner,
html body .sidebar-wrapper li.sl-acc__item,
html body .sidebar-wrapper a.sl-acc__item {
    border: 0 !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: 0 !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    /* Browser inspect'te tespit: ring shadow `0 0 0 1px rgba(237,42,57,0.18)` var → kill */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    /* Mavi-gri gradient'i de sade siyah'a çevir (config'ten ayarlanabilir) */
    background-image: var(--sv-sidebar-item-bg-image, none) !important;
}

/* Eğer çerçeve `::before` veya `::after` ile yapılıyorsa onu da nötrle
   ANCAK active item'ın ::before sol çizgi indicator'ı KORUNUR */
html body .responsive-menu .sb-top-btn:not(.is-active):not(.active)::before,
html body .responsive-menu .sb-top-btn:not(.is-active):not(.active)::after,
html body .responsive-menu .sl-acc__topBtn:not(.is-active):not(.active)::before,
html body .responsive-menu .sl-acc__topBtn:not(.is-active):not(.active)::after,
html body .responsive-menu .sl-acc__head:not(.is-active):not(.active)::before,
html body .responsive-menu .sl-acc__head:not(.is-active):not(.active)::after,
html body .responsive-menu .sl-acc__item:not(.is-active):not(.active)::before,
html body .responsive-menu .sl-acc__item:not(.is-active):not(.active)::after,
html body .sidebar-wrapper .sb-top-btn:not(.is-active):not(.active)::before,
html body .sidebar-wrapper .sb-top-btn:not(.is-active):not(.active)::after,
html body .sidebar-wrapper .sl-acc__topBtn:not(.is-active):not(.active)::before,
html body .sidebar-wrapper .sl-acc__topBtn:not(.is-active):not(.active)::after,
html body .sidebar-wrapper .sl-acc__head:not(.is-active):not(.active)::before,
html body .sidebar-wrapper .sl-acc__head:not(.is-active):not(.active)::after,
html body .sidebar-wrapper .sl-acc__item:not(.is-active):not(.active)::before,
html body .sidebar-wrapper .sl-acc__item:not(.is-active):not(.active)::after {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    /* content sıfırlamıyoruz - bg paterni varsa kullanılır - sadece border/shadow kapatıyoruz */
}

/* ========================================================================
   🎯 SİDEBAR — TEMİZ + SADE (mobile + desktop ortak)
   1) BORDER TAMAMEN YOK (transparan değil — gerçekten 0)
   2) Active item sol kırmızı çizgi (indicator) korunuyor
   3) Hover: SADECE icon kırmızıya döner (animasyon, scale, glow YOK)
   4) Mobile'da da aynı sade görünüm
   ======================================================================== */

/* 1️⃣ TÜM SIDEBAR ITEM'LARINDA BORDER YOK — ID-bazlı specificity ile site'in
   `#responsive-menu.responsive-menu.active-menu .sb-top-btn.active` kuralını yener */
html body #responsive-menu .sb-top-btn,
html body #responsive-menu .sb-top-btn.active,
html body #responsive-menu .sb-top-btn.is-active,
html body #responsive-menu .sb-top-btn:hover,
html body #responsive-menu .sb-top-btn.active:hover,
html body #responsive-menu .sl-acc__head,
html body #responsive-menu .sl-acc__head:hover,
html body #responsive-menu .sl-acc__topBtn,
html body #responsive-menu .sl-acc__topBtn:hover,
html body #responsive-menu .sl-acc__item,
html body #responsive-menu .sl-acc__item.active,
html body #responsive-menu .sl-acc__item:hover,
html body #responsive-menu .sl-acc__itemInner,
html body #responsive-menu .p2seg,
html body #responsive-menu .p2seg.casino,
html body #responsive-menu .p2seg.sportsbook,
html body #responsive-menu .p2seg:hover,
html body #responsive-menu.active-menu .sb-top-btn,
html body #responsive-menu.active-menu .sb-top-btn.active,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn.active,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn.is-active,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__head,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__head:hover,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__topBtn,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__item,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__item:hover,
html body #responsive-menu.responsive-menu.active-menu .p2seg,
html body #responsive-menu.responsive-menu.active-menu .p2seg:hover {
    border: 0 !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transform: none !important;  /* Site'in transform: translateY(-1px) hover'ını ez */
}

/* 2️⃣ ACTIVE ITEM SOL KIRMIZI ÇİZGİ (indicator) — config'ten ayarlanabilir */
html body #responsive-menu .sb-top-btn.active::before,
html body #responsive-menu .sb-top-btn.is-active::before,
html body #responsive-menu .sl-acc__head.active::before,
html body #responsive-menu .sl-acc__head.is-active::before,
html body #responsive-menu .sl-acc__topBtn.active::before,
html body #responsive-menu .sl-acc__topBtn.is-active::before,
html body #responsive-menu .sl-acc__item.active::before,
html body #responsive-menu .sl-acc__item.is-active::before,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn.active::before,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn.is-active::before {
    content: "" !important;
    display: block !important;
    opacity: var(--sv-sidebar-active-indicator-show, 1) !important;
    position: absolute !important;
    left: 0 !important;
    top: var(--sv-sidebar-active-indicator-inset, 8px) !important;
    bottom: var(--sv-sidebar-active-indicator-inset, 8px) !important;
    width: var(--sv-sidebar-active-indicator-width, 3px) !important;
    background: var(--sv-sidebar-active-indicator-color, #ed2a39) !important;
    border-radius: var(--sv-sidebar-active-indicator-radius, 0 3px 3px 0) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* 3️⃣ SADE HOVER — sadece icon kırmızı (yazı + bg değişmez, scale/glow yok) */
html body #responsive-menu .sb-top-btn:hover .icon,
html body #responsive-menu .sb-top-btn:hover .icon span,
html body #responsive-menu .sb-top-btn:hover .icon svg,
html body #responsive-menu .sb-top-btn:hover .icon svg path,
html body #responsive-menu .sb-top-btn:hover .icon svg circle,
html body #responsive-menu .sb-top-btn:hover .icon svg rect,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon span,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon svg,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon svg path,
html body #responsive-menu .sl-acc__topBtn:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__topBtn:hover .sl-acc__headIcon span,
html body #responsive-menu .sl-acc__topBtn:hover .sl-acc__headIcon svg,
html body #responsive-menu .sl-acc__topBtn:hover .sl-acc__headIcon svg path,
html body #responsive-menu .sl-acc__item:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__item:hover .sl-acc__headIcon span,
html body #responsive-menu .sl-acc__item:hover .icon,
html body #responsive-menu .sl-acc__item:hover .icon svg,
html body #responsive-menu .p2seg:hover .p2icon,
html body #responsive-menu .p2seg:hover .p2icon span,
html body #responsive-menu .p2seg:hover .p2icon svg,
html body #responsive-menu .p2seg:hover .p2icon svg path,
html body #responsive-menu .p2seg:hover .p2chip svg path,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon span,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon svg,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon svg path,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__head:hover .sl-acc__headIcon,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__head:hover .sl-acc__headIcon svg path,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__item:hover .sl-acc__headIcon,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__item:hover .icon,
html body #responsive-menu.responsive-menu.active-menu .p2seg:hover .p2icon svg path {
    color: var(--sv-sidebar-icon-hover-color, #ed2a39) !important;
    fill: var(--sv-sidebar-icon-hover-color, #ed2a39) !important;
    stroke: var(--sv-sidebar-icon-hover-color, #ed2a39) !important;
    /* Animasyon yok — anında geçiş, sade */
    transition: none !important;
}

/* =========================================================================
   SIDEBAR İKONLARI "CAM GİBİ" NET KIRMIZI (GLOW VE UZAYLI RENK İPTALİ)
   ========================================================================= */
/* 1. O iğrenç kırmızı sis bombası efektini (drop-shadow) tamamen sök at */
html body #responsive-menu .sb-top-btn:hover .icon,
html body #responsive-menu .sb-top-btn:hover .icon > span,
html body #responsive-menu.active-menu .sb-top-btn:hover .icon,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__topBtn:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__item:hover .sl-acc__headIcon,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn.supportbtn:hover .icon,
html body #responsive-menu .sb-top-btn.supportbtn:hover .icon {
    filter: none !important;
    -webkit-filter: none !important;
}

/* 2. SVG İkonların kalınlaşıp patlamasını engelle (Çizgiler zarif kalsın) */
html body #responsive-menu .sb-top-btn:hover .icon svg path[stroke],
html body #responsive-menu .sb-top-btn:hover .icon svg circle[stroke],
html body #responsive-menu .sb-top-btn:hover .icon svg rect[stroke],
html body #responsive-menu .sb-top-btn:hover .icon svg line[stroke],
html body #responsive-menu .sb-top-btn:hover .icon svg [stroke]:not([stroke="none"]),
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon svg [stroke]:not([stroke="none"]) {
    stroke: var(--sv-sidebar-icon-hover-color, #ed2a39) !important;
    stroke-width: 1.2 !important; /* Patlak görünümü incelttik */
}

/* 3. PNG/Resim ikonlar (Pragmatic vs.) "Uzaylı" mor/pembe renk yerine NET KIRMIZI olsun */
html body #responsive-menu .sl-acc__item:hover img,
html body #responsive-menu .sl-acc__item:hover .sl-acc__headIcon img,
html body #responsive-menu.responsive-menu.active-menu .sl-acc__item:hover img {
    /* Bu filtre resmi önce siyaha, sonra tam olarak jilet gibi kırmızıya çevirir */
    filter: brightness(0) saturate(100%) invert(26%) sepia(85%) saturate(3015%) hue-rotate(341deg) brightness(96%) contrast(98%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(26%) sepia(85%) saturate(3015%) hue-rotate(341deg) brightness(96%) contrast(98%) !important;
    transition: none !important;
}

/* ========================================================================
   HERO ALTI CASINO/SPOR BAŞLIKLARI YANINDAKİ KÜÇÜK İKONLARI GİZLE
   .simple-category > .item-title > .icon (20x20 kupa/kart/basketbol SVG'leri)
   Görselde "000j" gibi gözüken küçük, kalitesiz ikonlar — gizleyince temiz olur
   ======================================================================== */
html body .simple-category .item-title .icon,
html body main .simple-category .item-title .icon,
html body main a.simple-category div.item-title div.icon {
    display: var(--sv-hide-simple-category-icon, none) !important;
}

/* ========================================================================
   📱 MOBIL SIDEBAR — KIRMIZILIĞI TAMAMEN KALDIR (sade siyah)
   Browser inspect'te tespit edilen kırmızı tinted kaynaklar:
     - #responsive-menu radial-gradient(rgba(237,42,57,0.1)) ← TINT
     - .sidebar-wrapper radial-gradient(rgba(237,42,57,0.08)) ← TINT
     - .to-search-modal radial-gradient(rgba(237,42,57,0.1)) ← TINT
     - .sb-top-btn linear-gradient(rgba(237,42,57,0.1)) + bg-color rgba(22,12,14) ← TINT
     - .lang-opt.is-active rgba(237,42,57,0.16) bg + 0.42 border ← TINT
   ======================================================================== */
html body #responsive-menu,
html body #responsive-menu.responsive-menu,
html body #responsive-menu.responsive-menu.active-menu,
html body #responsive-menu .sidebar-wrapper,
html body #responsive-menu .sidebar-wrapper.sb-fade-slide {
    background-image: linear-gradient(rgba(18, 18, 22, 0.98) 0%, rgba(12, 12, 14, 0.98) 100%) !important;
}

html body #responsive-menu .sb-top-btn,
html body #responsive-menu .sb-top-btn.active,
html body #responsive-menu .sb-top-btn:hover,
html body #responsive-menu .sb-top-btn.supportbtn,
html body #responsive-menu.active-menu .sb-top-btn,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn {
    background-color: rgba(20, 20, 24, 0.6) !important;
    background-image: none !important;
}

html body #responsive-menu .to-search-modal,
html body .to-search-modal {
    background-image: linear-gradient(rgba(18, 18, 22, 0.92), rgba(12, 12, 14, 0.92)) !important;
}

html body #responsive-menu .lang-opt.is-active,
html body .lang-opt.is-active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ========================================================================
   🎯 HERO EŞİTLEME — Mobile + Desktop ortak Tombet stili
   "Hemen Oynamaya Başla + Kayıt Ol" hero kutusunu HER İKİ ekranda da gizle.
   Sadece Casino + Spor banner'lar yan yana kalsın (50/50 desktop, 50/50 mobile).
   ======================================================================== */
html body .enterence-box .hero-box,
html body main.home .enterence-box .hero-box,
html body .hp-hero .hero-box,
html body .hp-hero--desktop .hero-box,
html body .hp-hero--mobile .hero-box {
    display: none !important;
}

/* Desktop'ta Casino + Spor kartları 50/50 yan yana (col-lg-4 → col-lg-6 davranışı) */
@media (min-width: 992px) {
    html body main.home .enterence-box .row > .col-lg-4:first-child,
    html body main.home .hp-hero--desktop .row > .col-lg-4:first-child {
        display: none !important;
    }
    html body main.home .enterence-box .row > .col-lg-4:nth-child(n+2),
    html body main.home .hp-hero--desktop .row > .col-lg-4:nth-child(n+2) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ========================================================================
   📱 MOBIL HERO TEMIZLEME (Tombet'e uyumlu sade görünüm)
   1) "Oynamaya Başla" başlığı mobile'da gizli — gereksiz tekrar
   2) Casino/Spor kart yazılarının arkaplan gradient'i tam transparan
   ======================================================================== */
@media (max-width: 991px) {
    html body main.home .cat-carousel .section-header,
    html body main.home .cat-carousel.d-lg-none .section-header,
    html body main.home div.cat-carousel.d-lg-none > div.section-header {
        display: none !important;
    }
}

/* Casino/Spor kart yazıları (.item-title) — gradient arka plan kaldır → transparan */
html body .simple-category .item-title,
html body main .simple-category .item-title,
html body main.home .simple-category .item-title,
html body a.simple-category div.item-title {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* ========================================================================
   SIDEBAR TAB (CASINO/SPOR) — ARKA PLAN BÜYÜK SİLUET KALDIR + HOVER GLOW
   .p2bgIcon → kart silueti (Casino) + basketbol topu silueti (Spor) opacity 0.14
   ======================================================================== */
html body .p2tabs--sidebar .p2seg .p2bgIcon,
html body .p2tabs .p2seg .p2bgIcon,
html body .p2seg span.p2bgIcon,
html body .p2seg .p2bgIcon {
    display: var(--sv-hide-sidebar-bgicon, none) !important;
    opacity: 0 !important;
}

/* ========================================================================
   ANA SAYFA — CANLI KAZANÇLAR + CASINO/SPOR BAHİSLERİ TABLOSU GİZLEME
   Config toggle'ları config panel'de:
     --sv-hide-live-wins   → Canlı Kazançlar carousel
     --sv-hide-bets-table  → Casino/Spor Bahisleri tablosu
   Değer: 'none' = gizle, 'revert' veya 'block' = göster
   ======================================================================== */

/* Canlı Kazançlar carousel — KESİN class: .latestWins (Playwright ile doğrulandı)
   ⚠️ SCOPE: SADECE ana sayfa (main.home) — diğer sayfalardaki latestWins benzeri etkilenmez */
html body main.home .latestWins,
html body main.home div.latestWins,
html body main.home [class*="latestWins"],
html body main.home [class*="latest-wins"],
html body main.home .col-12:has(> .latestWins),
html body main.home .col-12:has(> div.latestWins) {
    display: var(--sv-hide-live-wins) !important;
}

/* ========================================================================
   ANA SAYFA OYUN CAROUSEL'LERİ — DESKTOP+MOBILE'DA HEPSİ GÖRÜNSÜN
   Site'in default'unda ana sayfa col-12 (içinde Pragmatic Play, Popüler Slot,
   Sağlayıcılar carousel'leri) `display: none` ile gizleniyordu (Bootstrap d-lg-none
   ve başka kurallar). Playwright ile inject testi: hyper-specific override işe yarıyor.
   Bu kural ana sayfadaki TÜM oyun gruplarını her ekran boyutunda görünür yapar.
   ======================================================================== */

/* Ana sayfa container > row > col-12 hep block (display:none kurallarını ez) */
html body main.home div.container div.row > div.col-12,
html body main#main div.container div.row > div.col-12,
html body main.home > div.container > div.row > div.col-12 {
    display: block !important;
}

/* cat-carousel.d-lg-none (mobile-only carousel) her ekran boyutunda görünsün */
html body main.home div.cat-carousel.d-lg-none,
html body main#main div.cat-carousel.d-lg-none,
html body div.cat-carousel.d-lg-none,
html body main.home div.cat-carousel,
html body div.cat-carousel {
    display: block !important;
}

/* DESKTOP'ta cat-carousel içindeki TEKRARLAYAN hero kısmı gizle
   Hero'da zaten "Oynamaya Başla" + Casino + Spor banner'lar var.
   Cat-carousel'de section-header (Oynamaya Başla) + DEEP NESTED simple-category (Casino/Spor) tekrar.
   Yapı: .cat-carousel > .section-carousel > .swiper > .swiper-wrapper > .swiper-slide > .item > .simple-category
   ⚠ DESCENDANT selector kullan (direct child değil) — Playwright ile doğrulandı 4→2 */
@media (min-width: 992px) {
    html body main.home .cat-carousel.d-lg-none > .section-header,
    html body main.home div.cat-carousel.d-lg-none > div.section-header,
    /* Cat-carousel içindeki TÜM simple-category (deep nested swiper içinde) */
    html body main.home .cat-carousel.d-lg-none .simple-category,
    html body main.home div.cat-carousel.d-lg-none .simple-category,
    html body main.home .cat-carousel.d-lg-none .item,
    html body main.home .cat-carousel.d-lg-none .swiper-slide .item,
    html body main.home div.cat-carousel.d-lg-none .item .simple-category,
    html body div.cat-carousel.d-lg-none > .section-carousel > .swiper .simple-category {
        display: none !important;
    }
}

/* Casino/Spor Bahisleri tablosu — SCOPE: sadece ana sayfa (main.home).
   .simple-bets gerçek class (Playwright doğruladı). Diğerleri varsayım — dar kapsamda tutuldu. */
html body main.home .simple-bets,
html body main.home [class*="simple-bets"],
html body main.home [class*="recent-bets"],
html body main.home [class*="home-bets"],
html body main.home [class*="home-recent-bets"],
html body main.home [class*="last-bets"],
html body main.home [class*="latestBets"],
html body main.home [class*="LatestBets"],
html body main.home [class*="bets-table"],
html body main.home [class*="BetsTable"],
html body main.home [class*="betsTable"],
html body main.home [data-section="bets-table"],
html body main.home [data-component*="BetsTable"] {
    display: var(--sv-hide-bets-table) !important;
}

/* "Veri bulunamadı" / "Gösterilecek herhangi bir veri yok" empty state'ları gizle
   ⚠ SCOPE: SADECE ana sayfa (main.home) — profil/arama/bahis sayfalarındaki empty state etkilenmez */
html body main.home .no-data,
html body main.home .no-results,
html body main.home .empty-state,
html body main.home .empty-data,
html body main.home .empty-list,
html body main.home .empty-results,
html body main.home [class*="no-data"],
html body main.home [class*="NoData"],
html body main.home [class*="noData"],
html body main.home [class*="empty-state"],
html body main.home [class*="EmptyState"],
html body main.home [class*="emptyState"],
html body main.home [class*="empty-data"],
html body main.home [class*="EmptyData"],
html body main.home [class*="empty-result"],
html body main.home [class*="EmptyResult"],
html body main.home [class*="empty-list"],
html body main.home [class*="EmptyList"],
html body main.home [data-section*="empty"],
html body main.home [data-section*="no-data"] {
    display: var(--sv-hide-empty-state, none) !important;
}

/* ========================================================================
   📱 MOBİL UX FIX'LERİ — Browser Inspect ile Tespit Edildi
   1) Sidebar açıkken backdrop overlay (kullanıcı dışarı tıklayıp kapatabilsin)
   2) Body padding-bottom — lowbar(78px) için yer ayır (içerik kapanmasın)
   3) Modal sheet z-index — game sheet lowbar'ın üstünde olsun
   4) Touch optimizasyonu — 300ms tap delay engellemesi + tap highlight
   5) Tap target boyutları — Apple HIG min 44x44
   6) Dropdown event stabilization — açılır açılmaz kapanma engellemesi
   ======================================================================== */

/* FIX 1: Sidebar açıkken backdrop overlay (body.browser-modal sidebar açıkken set edilir) */
@media (max-width: 991px) {
    body.browser-modal::before {
        content: '';
        position: fixed;
        inset: 0;
        background: var(--sv-mobile-backdrop-bg, rgba(0, 0, 0, 0.62));
        backdrop-filter: blur(var(--sv-mobile-backdrop-blur, 2px));
        -webkit-backdrop-filter: blur(var(--sv-mobile-backdrop-blur, 2px));
        z-index: var(--sv-mobile-backdrop-z, 1990);
        pointer-events: auto;
        animation: sv-mobile-fade-in 0.2s ease;
    }

    /* Search modal açıkken de backdrop koru */
    body.search-modal::before {
        content: '';
        position: fixed;
        inset: 0;
        background: var(--sv-mobile-backdrop-bg, rgba(0, 0, 0, 0.62));
        z-index: var(--sv-mobile-backdrop-z, 1990);
        pointer-events: auto;
    }
}

@keyframes sv-mobile-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* FIX 2: Body padding-bottom — lowbar yer ayır (75 → 80px) */
@media (max-width: 991px) {
    html body {
        padding-bottom: var(--sv-mobile-body-padding-bottom, 80px) !important;
    }
    /* iOS safe area için ekstra alan */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        html body {
            padding-bottom: calc(var(--sv-mobile-body-padding-bottom, 80px) + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* FIX 3: Modal sheet z-index lowbar'dan yüksek (game/promo sheet'ler için) */
.react-modal-sheet-backdrop {
    z-index: 1000000 !important;
}
.react-modal-sheet-container {
    z-index: 1000001 !important;
}

/* FIX 4: Touch optimizasyonu — 300ms tap delay yok + tap highlight */
@media (max-width: 991px) {
    html body a,
    html body button,
    html body [role="button"],
    html body .menu-item,
    html body .current-lang,
    html body .lang,
    html body .sb-top-btn,
    html body .sl-acc__head,
    html body .sl-acc__topBtn,
    html body .sl-acc__item,
    html body .p2seg,
    html body .item-image,
    html body .game-item,
    html body .simple-category {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: var(--sv-mobile-tap-highlight, rgba(237, 42, 57, 0.2)) !important;
    }
}

/* FIX 5: Tap target min 44x44 (Apple HIG) — lowbar item'ları */
@media (max-width: 991px) {
    html body .sticky-menu .menu-item,
    html body .sticky-menu .menu-items > * {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* FIX 6: Dropdown event stabilization — Profile dropdown açılır açılmaz kapanma fix
   Sebep: parent container'da pointer-events: none; veya z-index karışıklığı olabiliyor.
   Çözüm: dropdown panel açıldığında pointer-events ZORUNLU auto + yüksek z-index */
@media (max-width: 991px) {
    /* User menu / profile dropdown açık state */
    html body .user-menu .dropdown-menu,
    html body .user-menu .user-menus,
    html body .user-menu .user-menus-acc,
    html body .user-info .dropdown-menu,
    html body [class*="user-info"] [class*="dropdown"],
    html body [class*="profile"] [class*="dropdown"],
    html body .user-menu[aria-expanded="true"] *,
    html body .user-menu.is-open *,
    html body .user-menu.active *,
    html body .other-langs.isOpen,
    html body .languages-box .other-langs.isOpen {
        pointer-events: auto !important;
        z-index: 100 !important;
    }

    /* Dropdown trigger pointer-events */
    html body .user-menu,
    html body .user-menu > *,
    html body [class*="user-info"],
    html body [class*="user-info"] > *,
    html body .current-lang,
    html body .languages-box {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Dropdown'un click outside ile kapanması için olası overlay'ler — modal-sheet yapısı engellemesin */
    html body .react-modal-sheet-backdrop,
    html body [class*="modal-backdrop"] {
        pointer-events: auto !important;
    }
}

/* FIX 7: Sidebar yapısı — body class'ından bağımsız mobile sidebar düzgün açılsın
   Body 'browser-modal' class'ı sidebar açıkken eklenir. Backdrop tıklamaya tepki versin */
@media (max-width: 991px) {
    /* Backdrop tıklanınca sidebar kapatması için pointer-events doğru */
    body.browser-modal #responsive-menu.responsive-menu.active-menu {
        z-index: 2000 !important;  /* Backdrop(1990) üstünde */
    }
}

/* FIX 8: Lowbar wallet center button (V logo) — overlap fix */
@media (max-width: 991px) {
    html body .sticky-menu .menu-item.wallet,
    html body .sticky-menu .menu-items > .wallet,
    html body .sticky-menu [class*="wallet"] {
        z-index: 2 !important;
        position: relative !important;
    }
}

/* ========================================================================
   ULTRA-TIGHT MOBILE (≤ 380px) — iPhone SE/küçük cihazlar için ek sıkıştırma
   ======================================================================== */
@media (max-width: 380px) {
    html body header#header .middle-header-container .responsive-logo,
    html body header .responsive-logo {
        max-width: 110px !important;
        flex: 0 1 110px !important;
    }

    html body header#header .middle-header-container .responsive-logo a,
    html body header#header .middle-header-container .responsive-logo img,
    html body header .responsive-logo img {
        height: 42px !important;
        max-height: 42px !important;
        max-width: 110px !important;
    }

    html body header#header .middle-header-container .wallet-menu .current-wallet a.wallet-button {
        font-size: 11px !important;
        padding: 5px 6px !important;
    }
}

/* =========================================================================
   MOBİL "DEVAM ET" BUTONU TAM GÖRÜNME FİXİ
   ========================================================================= */
@media (max-width: 991px) {
    /* Formun boyunu biraz daha kısaltıp alt menüye çarpmasını engelliyoruz */
    html body .modal.auth-modal .modal-content,
    html body .modal.auth-modal .modal-dialog .modal-content {
        max-height: 75vh !important; 
    }
    
    /* Butonun rahatça kayıp yukarı çıkabilmesi için formun en altına ekstra boşluk ekliyoruz */
    html body .modal.auth-modal .modal-body {
        padding-bottom: 60px !important; 
    }
}
/* =========================================================================
   TELEFON MENÜSÜ TOMBET STİLİ (BEYAZ ZEMİN, SİYAH YAZI - KESİN ÇÖZÜM)
   ========================================================================= */
/* 1. Menü Zeminini Beyaz Yap ve Sınırları Belirle */
html body .react-international-phone-country-selector-dropdown,
html body ul.react-international-phone-country-selector-dropdown {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cccccc !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    z-index: 9999999 !important;
}

/* 2. Listede arka planı şeffaf yap ki beyaz zemin tam görünsün */
html body .react-international-phone-country-selector-dropdown__list-item {
    background-color: transparent !important;
}

/* 3. Yazıları KESİN SİYAH (Okunabilir) Yap - Modal'ın beyaz kuralını ezer */
html body .react-international-phone-country-selector-dropdown__list-item *,
html body .react-international-phone-country-selector-dropdown__list-item span,
html body .react-international-phone-country-selector-dropdown__list-item-country-name,
html body .react-international-phone-country-selector-dropdown__list-item-dial-code {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* 4. Üzerine gelince (Hover) veya seçiliyken hafif gri vurgu (Tombet stili) */
html body .react-international-phone-country-selector-dropdown__list-item:hover,
html body .react-international-phone-country-selector-dropdown__list-item--focused,
html body .react-international-phone-country-selector-dropdown__list-item--selected {
    background-color: #f0f0f0 !important;
}

/* 5. Araya konan ince çizgi (Divider) */
html body .react-international-phone-country-selector-dropdown__preferred-list-divider {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}
/* =========================================================================
   MOBİL ARAMA (SEARCH) EKRANI KLAVYE VE KAYDIRMA (SCROLL) FİXİ
   ========================================================================= */
/* 1. Ekranı karartan görünmez perdenin tıklamaları yutmasını engelle */
html body.search-modal::before {
    pointer-events: none !important;
}

/* 2. Arama ekranını en üste (z-index) taşı ve tıklanabilir/kaydırılabilir yap */
html body .to-search-modal,
html body .search-modal,
html body .top-search-layer,
html body [class*="search-modal"] {
    z-index: 999999 !important; /* Her şeyin üstüne çık */
    pointer-events: auto !important; /* Dokunmaları algıla */
    overflow-y: auto !important; /* İç kaydırmayı aç */
    -webkit-overflow-scrolling: touch !important; /* iPhone'da yağ gibi kaysın */
}

/* 3. Arama kutusu (Klavye açılsın diye zorla odaklanabilir yap) */
html body .to-search-modal input,
html body .search-modal input,
html body .top-search-layer input,
html body input[type="search"] {
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    touch-action: manipulation !important;
    z-index: 10 !important;
    position: relative !important;
}

/* 4. Arama sonuçları listesinin boyunu ayarla ve kaydırmayı aç */
html body .to-search-modal .search-results,
html body .search-modal .search-results,
html body [class*="search-result"] {
    pointer-events: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important; /* Alt menünün arkasında oyun kalmasın */
}

/* =========================================================================
   1. SIDEBAR İKONLARI "SİS BOMBASI" İPTALİ VE NET KIRMIZI FİXİ
   ========================================================================= */
/* İçeride kalan inatçı drop-shadow (parlama/sis) kodunu kesin olarak eziyoruz */
html body #responsive-menu .sb-top-btn:hover .icon,
html body #responsive-menu .sb-top-btn:hover .icon > span,
html body #responsive-menu.active-menu .sb-top-btn:hover .icon,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn:hover .icon,
html body #responsive-menu .sl-acc__head:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__topBtn:hover .sl-acc__headIcon,
html body #responsive-menu .sl-acc__item:hover .sl-acc__headIcon,
html body #responsive-menu.responsive-menu.active-menu .sb-top-btn.supportbtn:hover .icon,
html body #responsive-menu .sb-top-btn.supportbtn:hover .icon {
    filter: none !important;
    -webkit-filter: none !important;
    text-shadow: none !important;
}

/* İkonları uzaylı renginden kurtarıp cam gibi net kırmızıya boyuyoruz */
html body #responsive-menu .sb-top-btn:hover .icon svg path,
html body #responsive-menu .sl-acc__item:hover .icon svg path {
    fill: var(--accent, #ed2a39) !important;
    color: var(--accent, #ed2a39) !important;
}

/* Çizgisel (stroke) ikonları inceltip netleştiriyoruz */
html body #responsive-menu .sb-top-btn:hover .icon svg [stroke]:not([stroke="none"]) {
    stroke: var(--accent, #ed2a39) !important;
    stroke-width: 1px !important;
}

/* Resim (PNG) formatlı ikonları kırmızıya çeviriyoruz */
html body #responsive-menu .sl-acc__item:hover img {
    filter: brightness(0) saturate(100%) invert(26%) sepia(85%) saturate(3015%) hue-rotate(341deg) brightness(96%) contrast(98%) !important;
}
/* =========================================================================
   CASINO / SPOR BUTONLARI KESİN ÇÖZÜM (.p2seg Kapsamlı Override)
   ========================================================================= */

/* 6. HOVER DURUMUNDA BİLE YAZI/İKON RENGİNİN DEĞİŞMESİNİ (KIRMIZI OLMASINI) ENGELLE */
html body #responsive-menu .p2seg:hover .p2label,
html body #responsive-menu .p2seg:hover .p2icon svg,
html body #responsive-menu .p2seg:hover .p2icon svg path,
html body .p2tabs--sidebar .p2seg:hover .p2label,
html body .p2tabs--sidebar .p2seg:hover .p2icon svg,
html body .p2tabs--sidebar .p2seg:hover .p2icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: transparent !important;
}
@media (max-width: 991px) {
    /* Butonun olduğu kapsayıcı */
    .user-menu {
        position: relative !important;
        z-index: 9999 !important;
    }

    /* İkonun kendisi - Menüden daha üstte olmalı */
    .user-only-icon {
        position: relative !important;
        z-index: 10001 !important; 
        pointer-events: auto !important;
    }

    /* Açılan Menü - Butonun altında kalmalı */
    .user-menus {
        z-index: 10000 !important;
        /* Menüyü 5-10px aşağı it ki parmağın menüye çarpmasın */
        margin-top: 10px !important;
    }
}
/* =========================================================================
   TABLET MODU ÇİFT LOGO (DOUBLE LOGO) KESİN ÇÖZÜMÜ
   ========================================================================= */

/* 1. MASAÜSTÜ EKRANLAR (1200px ve üstü): Sadece Ana Logo görünsün, Mobil Logo KESİN GİZLENSİN */
@media (min-width: 1200px) {
    html body header#header .middle-header-container .responsive-logo,
    html body header .responsive-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
    }
}

/* 2. TABLET VE MOBİL EKRANLAR (1199px ve altı): Sadece Mobil Logo görünsün, Masaüstü Ana Logosu KESİN GİZLENSİN */
@media (max-width: 1199px) {
    /* Masaüstü koca logoyu yok et */
    html body header .logo:not(.responsive-logo),
    html body header#header .logo:not(.responsive-logo),
    html body header#header .middle-header .logo:not(.responsive-logo),
    html body header#header .middle-header-container .logo:not(.responsive-logo),
    html body header#header div.logo:not(.responsive-logo) {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* Tablette Responsive Logonun görünürlüğünü garantiye al */
    html body header#header .middle-header-container .responsive-logo,
    html body header .responsive-logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 5 !important;
    }
}
/* =========================================================================
   NİHAİ ÇÖZÜM: RESİMLİ BUTONLAR, BEYAZ İKONLAR VE TEMİZ HOVER
   ========================================================================= */

/* 1. Kutu zeminlerini tamamen şeffaf yap, içeride kalan eski gri/siyah arka planları EZ GEÇ */
html body #responsive-menu .p2tabs--sidebar button.p2seg {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Temanın koyduğu o iğrenç kırmızı filtreyi (::before) ve silüet ikonları KESİNLİKLE YOK ET */
html body #responsive-menu .p2tabs--sidebar button.p2seg::before,
html body #responsive-menu .p2tabs--sidebar button.p2seg .p2bgIcon {
    display: none !important;
    content: none !important;
}

/* 3. SENİN ÖZEL RESİMLERİNİ ZORLA EKRANA BASTIR (Eski gizleme kodlarını ezer) */
html body #responsive-menu .p2tabs--sidebar button.p2seg.casino .p2bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/04/casino-buton.png?v=20260427") !important;
    background-size: cover !important;
    background-position: center !important;
    filter: none !important;
    -webkit-filter: none !important;
}

html body #responsive-menu .p2tabs--sidebar button.p2seg.sportsbook .p2bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/04/spor-buton.png?v=20260427") !important;
    background-size: cover !important;
    background-position: center !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* 4. İkonları ve Yazıları ZORLA BEMBEYAZ YAP ve EN ÜSTE ÇIKAR */
html body #responsive-menu .p2tabs--sidebar button.p2seg .p2content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

html body #responsive-menu .p2tabs--sidebar button.p2seg .p2label,
html body #responsive-menu .p2tabs--sidebar button.p2seg .p2icon svg,
html body #responsive-menu .p2tabs--sidebar button.p2seg .p2icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: transparent !important;
}

/* 5. HOVER (Üzerine Gelme): Kırmızılık yok, sadece Tombet gibi soluklaşma/basılma hissi */
html body #responsive-menu .p2tabs--sidebar button.p2seg:hover {
    transform: scale(0.97) !important;
    filter: brightness(0.85) !important;
}

/* Hover'da yazılar ve ikonlar beyaz kalmaya devam etsin */
html body #responsive-menu .p2tabs--sidebar button.p2seg:hover .p2label,
html body #responsive-menu .p2tabs--sidebar button.p2seg:hover .p2icon svg,
html body #responsive-menu .p2tabs--sidebar button.p2seg:hover .p2icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 6. ACTIVE (Tıklama Efekti) */
html body #responsive-menu .p2tabs--sidebar button.p2seg:active {
    transform: scale(0.94) !important;
    opacity: 0.75 !important;
}
/* =========================================================================
   P2SEG (CASINO/SPOR) KIRMIZI İKON VİRÜSÜNE KARŞI GOD-MODE BEYAZLATICI
   (İçerideki o uzun zincirli kırmızı hover kurallarını ezip geçer)
   ========================================================================= */

/* Casino Butonu İçin Yüksek Rütbeli Beyazlatıcı */
html body #responsive-menu.responsive-menu.active-menu button.p2seg.casino:hover .p2icon svg,
html body #responsive-menu.responsive-menu.active-menu button.p2seg.casino:hover .p2icon svg path,
html body #responsive-menu.responsive-menu.active-menu button.p2seg.casino:hover .p2label,
html body #responsive-menu button.p2seg.casino:hover .p2icon svg,
html body #responsive-menu button.p2seg.casino:hover .p2icon svg path,
html body #responsive-menu button.p2seg.casino:hover .p2label {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
}

/* Spor Butonu İçin Yüksek Rütbeli Beyazlatıcı */
html body #responsive-menu.responsive-menu.active-menu button.p2seg.sportsbook:hover .p2icon svg,
html body #responsive-menu.responsive-menu.active-menu button.p2seg.sportsbook:hover .p2icon svg path,
html body #responsive-menu.responsive-menu.active-menu button.p2seg.sportsbook:hover .p2label,
html body #responsive-menu button.p2seg.sportsbook:hover .p2icon svg,
html body #responsive-menu button.p2seg.sportsbook:hover .p2icon svg path,
html body #responsive-menu button.p2seg.sportsbook:hover .p2label {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
}
/* =========================================================================
   CANLI KAZANÇLAR (LATEST WINS) WIDGET'INI TÜM SAYFALARDA GİZLE
   ========================================================================= */

/* 1. Ana widget kapsayıcısını ve tüm varyasyonlarını yok et */
html body .latestWins,
html body .latest-wins,
html body [class*="latestWins"],
html body [class*="latest-wins"],
html body .win-carousel,
html body .live-wins-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Eğer bir kolonun (Bootstrap col) içindeyse o kolonu da daralt */
html body .col-12:has(.latestWins),
html body .col-12:has([class*="latestWins"]) {
    display: none !important;
}
/* =========================================================================
   BUTONLARA TIKLAYINCA OLUŞAN KIRMIZI DOLGUYU İMHA ET (HER YERDE)
   ========================================================================= */

/* Casino ve Spor butonlarının 'active' (tıklanmış) halini resimle sabitle */
html body .p2seg.casino:active,
html body .p2seg.casino:focus,
html body .modal .p2seg.casino:active,
html body .modal .p2seg.casino:focus {
    background-color: transparent !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/04/casino-buton.png?v=20260427") !important;
    box-shadow: none !important;
}

html body .p2seg.sportsbook:active,
html body .p2seg.sportsbook:focus,
html body .modal .p2seg.sportsbook:active,
html body .modal .p2seg.sportsbook:focus {
    background-color: transparent !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/04/spor-buton.png?v=20260427") !important;
    box-shadow: none !important;
}

/* Tıklayınca ortaya çıkan o sinsi iç gölgeyi ve arka planı öldür */
html body .p2seg::after, 
html body .p2seg:active::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

/* Yazıların kırmızıya dönmesini her türlü durumda engelle */
html body .p2seg:active .p2label,
html body .p2seg:active .p2icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* =========================================================================
   V2 JSON CONFIG'İ EZİP GEÇEN NÜKLEER SİDEBAR KODU
   ========================================================================= */

/* 1. KUTULU YAPI (JSON'un genişlik ve padding ayarlarını ezer) */
html body div#responsive-menu.responsive-menu a.sb-top-btn,
html body div#responsive-menu.responsive-menu a.sl-acc__item,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn,
html body div.sidebar-wrapper.sb-fade-slide a.sl-acc__item {
    background-color: #141418 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    margin: 0 10px 6px 10px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    min-height: 44px !important;
    position: relative !important;
}

/* 2. HOVER VE AKTİF DURUM (Marka kırmızısı #de0016) */
html body div#responsive-menu.responsive-menu a.sb-top-btn:hover,
html body div#responsive-menu.responsive-menu a.sb-top-btn.active,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn:hover,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn.active {
    background-color: #1e1e24 !important;
    border-left: 4px solid #de0016 !important;
    border-radius: 4px 6px 6px 4px !important;
}

/* 3. JSON'UN İKONLARA BASTIĞI GLOW/SİS EFEKTİNİ İMHA ET */
html body div#responsive-menu.responsive-menu a.sb-top-btn .icon,
html body div#responsive-menu.responsive-menu a.sb-top-btn .icon *,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn .icon,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn .icon * {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: transparent !important;
}

html body div#responsive-menu.responsive-menu a.sb-top-btn .icon svg path,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn .icon svg path {
    fill: #ffffff !important;
}

/* 4. JSON'UN GİZLİ KATMANLARINI (::before / ::after) YOK ET */
html body div#responsive-menu.responsive-menu a.sb-top-btn::before,
html body div#responsive-menu.responsive-menu a.sb-top-btn::after,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn::before,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 5. YAZILAR VE OK DETAYLARI (#de0016) */
html body div#responsive-menu.responsive-menu a.sb-top-btn .sb-top-title,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn .sb-top-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    margin-left: 10px !important;
    -webkit-font-smoothing: antialiased !important;
}

html body div#responsive-menu.responsive-menu a.sb-top-btn .sb-top-arrow,
html body div.sidebar-wrapper.sb-fade-slide a.sb-top-btn .sb-top-arrow {
    margin-left: auto !important;
    color: #de0016 !important;
    font-size: 18px !important;
    text-shadow: none !important;
}
/* =========================================================================
   EN DIŞ KATMANDAKİ (SOL VE ÜST) LACİVERT/MAVİ SIZINTIYI TAMAMEN YOK ET
   ========================================================================= */

/* 1. Menünün EN DIŞ kabuğundaki lacivert sızıntıyı ve gradienti (renk geçişini) sil */
html body #responsive-menu,
html body .responsive-menu,
html body #responsive-menu.collapsed,
html body .responsive-menu.collapsed,
html body.sb-collapsed #responsive-menu,
html body .sidebar-wrapper,
html body .sidebar-content {
    background: #0d0d12 !important; /* Ortadaki tok siyah renk */
    background-color: #0d0d12 !important;
    background-image: none !important; /* Temanın mavi/lacivert gradientini yokedici */
    box-shadow: none !important;
    border: none !important;
}

/* 2. Dış kabuğa temanın eklediği görünmez renkli perdeleri (before/after) yırt at */
html body #responsive-menu::before,
html body #responsive-menu::after,
html body .sidebar-wrapper::before,
html body .sidebar-wrapper::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
}

/* 3. Mavi renk sitenin ana arkaplanından sızıyorsa diye Body'yi de sağlama alıyoruz */
html body,
html body.dark-mode,
html body.sb-collapsed {
    background-color: #0d0d12 !important;
    background-image: none !important; /* Ana zemindeki radyal sızıntıları kapatır */
}
/* =========================================================================
   COMM100 DEFAULT CHAT BUTONUNU GİZLEME (Açık sohbet penceresini bozmaz)
   ========================================================================= */

/* Sadece 88x88 boyutundaki kapalı Comm100 butonunu hedef al ve görünmez yap */
iframe[title="Sohbet düğmesi"][style*="width: 88px"],
iframe[style*="z-index: 2147483642"][style*="width: 88px"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Tıklamaları tamamen iptal eder */
    transform: scale(0) !important;
    z-index: -9999 !important; /* En alta gömer */
}
/* =========================================================================
   MOBİL GİRİŞ FORMU MAVİ ÇİZGİ/ZEMİN VE ODAKLANMA (FOCUS) KESİN İPTALİ
   ========================================================================= */

/* 1. MAVİ ODAKLANMA ÇİZGİSİNİ VE GÖLGELERİ KÖKÜNDEN İMHA ET */
html body div.react-modal-sheet-container,
html body div.react-modal-sheet-container:focus,
html body div.react-modal-sheet-container:focus-visible,
html body div.app-mobile-sheet__container,
html body div.modal.auth-modal,
html body div.modal.auth-modal:focus,
html body div.modal-dialog,
html body div.modal-dialog:focus,
html body div.modal-content,
html body div.modal-content:focus {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 2. DIŞ SARMALAYICILARIN ARKA PLANINI ZORLA ŞEFFAF YAP (Mavi Sızıntıyı Engeller) */
html body div.react-modal-sheet-container,
html body div.app-mobile-sheet__container,
html body div.react-modal-sheet-content,
html body div.react-modal-sheet-content-scroller,
html body div.modal.auth-modal.app-mobile-sheet,
html body div.modal-dialog,
html body div#authModal {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 3. SADECE ASIL FORM KUTUSUNU SİYAH VE ŞIK BIRAK */
html body div.modal-dialog div.modal-content,
html body div.auth-modal div.modal-content {
    background: #0d0d12 !important; /* Senin o premium siyah zemin */
    background-color: #0d0d12 !important;
    background-image: none !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.05) !important; /* Sadece zarif gri bir hat */
    box-shadow: 0 15px 50px rgba(0,0,0,0.9) !important; /* Mavi yerine tok, siyah gölge */
}

/* 4. ARAYA GİREN GÖRÜNMEZ PERDELERİ (::before/::after) YIRT AT */
html body div.react-modal-sheet-container::before,
html body div.react-modal-sheet-container::after,
html body div.modal.auth-modal::before,
html body div.modal.auth-modal::after,
html body div.modal-dialog::before,
html body div.modal-dialog::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
}
/* =========================================================================
   HER İKİ DURUMDA DA (EV YERİNE DE) SİYAH 3D KÜRE VE BEYAZ "V" LOGOSU
   ========================================================================= */

/* 1. Eski Ev SVG'sini ve Cüzdan resimlerini KESİN olarak gizle */
html body .sticky-menu .menu-item.wallet .logo svg,
html body .menu-items .menu-item.wallet .logo svg,
html body .sticky-menu .menu-item.wallet .logo img,
html body .menu-items .menu-item.wallet .logo img,
html body .sticky-menu .menu-item.wallet .guest-home-icon,
html body .menu-items .menu-item.wallet .guest-home-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Her iki duruma da Siyah/Koyu Gri Küre (Dark Sphere) efektini zorla uygula */
html body .sticky-menu .menu-item.wallet .logo,
html body .menu-items .menu-item.wallet .logo {
    box-sizing: border-box !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
    
    /* 3D Premium Siyah Efekti */
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 50% 100%, #33333a 0%, #1a1a1f 35%, #0d0d0f 65%, #000000 100%) !important;
    
    /* Kırmızı gölgeler yerine siyah/nötr gölgeler */
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.05),
        0 10px 22px rgba(0, 0, 0, 0.7),
        0 14px 32px rgba(0, 0, 0, 0.5),
        inset 0 -4px 10px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.15) !important;
        
    transform: translateY(-10px) !important; /* Havada asılı duruş */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

/* Küreye tıklanma (Aktif) basılma hissi - Siyah Gölgelerle */
html body .sticky-menu .menu-item.wallet:active .logo,
html body .menu-items .menu-item.wallet:active .logo {
    transform: translateY(-6px) scale(0.97) !important;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.6),
        0 8px 18px rgba(0, 0, 0, 0.5),
        inset 0 -3px 8px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Beyaz "V" logosunu kürenin tam ortasına yerleştir */
html body .sticky-menu .menu-item.wallet .logo::before,
html body .menu-items .menu-item.wallet .logo::before {
    content: "" !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/03/logo.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,0.4)) !important;
}

/* 4. Altındaki yazıyı (Anasayfa/Cüzdan) şık bir şekilde hizala */
html body .sticky-menu .menu-item.wallet .text,
html body .menu-items .menu-item.wallet .text {
    margin-top: -4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
/* =========================================================================
   SAĞ ALT HIZLI ERİŞİM BUTONUNU (FAB) 3D KIRMIZI KÜRE YAPMA
   ========================================================================= */

/* 1. Dış sarmalayıcının varsa mavi zeminini/gölgesini şeffaf yap */
html body .lowbar-fab__trigger,
html body .lowbar-fab__trigger:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Butonun ana gövdesini (core) Kırmızı 3D Küreye çevir (Ortadakiyle Birebir Aynı) */
html body .lowbar-fab__trigger-core {
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 50% 100%, #8a0f17 0%, #c4232e 35%, #de0016 65%, #ff5865 100%) !important;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(222, 0, 22, 0.55),
        0 14px 32px rgba(0, 0, 0, 0.45),
        inset 0 -4px 10px rgba(0, 0, 0, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
    border: none !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

/* Küreye Tıklanma hissi (aktif durum) */
html body .lowbar-fab__trigger:active .lowbar-fab__trigger-core {
    transform: scale(0.95) !important;
    box-shadow:
        0 6px 14px rgba(222, 0, 22, 0.45),
        0 8px 18px rgba(0, 0, 0, 0.4),
        inset 0 -3px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 3. İçindeki 3 noktalı varsayılan ikonu (SVG) kökünden gizle */
html body .lowbar-fab__trigger-glyph--menu svg {
    display: none !important;
}

/* 4. 3 noktanın yerine sizin beyaz V (Favicon) logonuzu oturt */
html body .lowbar-fab__trigger-glyph--menu::before {
    content: "" !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/03/logo.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Resmi bembeyaz yap ve hafif gölge ver */
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,0.4)) !important;
    vertical-align: middle !important;
}
/* =========================================================================
   FAB BUTONUNU TAM DAİRE YAPMA VE MAVİ YUKARI OKU KIRMIZIYA ÇEVİRME
   ========================================================================= */

/* 1. Hızlı Erişim (FAB) Butonunun köşelerini tıraşlayıp tam yuvarlak (küre) yapıyoruz */
html body .lowbar-fab,
html body .lowbar-fab__trigger,
html body .lowbar-fab__trigger-core {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important; /* Kusursuz daire olması için en/boy eşitler */
    border: none !important;
}

/* 2. Mavi "Yukarı Çık" okunu Logonun Kırmızısı (#de0016) yapıyoruz */
/* Temaların standart "yukarı çık" class'larını kapsayacak şekilde hedefledik */
html body .scroll-to-top,
html body .go-top,
html body .back-to-top,
html body [class*="scroll-to"],
html body [class*="back-top"],
html body [class*="scroll-top"],
html body [class*="go-top"] {
    background-color: #de0016 !important;
    background: #de0016 !important;
    background-image: none !important;
    border-color: #c4232e !important;
    box-shadow: 0 4px 10px rgba(222, 0, 22, 0.4) !important;
}
/* =========================================================================
   FAB (HIZLI ERİŞİM) MENÜSÜ AÇILIŞ DÜZENLEMESİ: KIRMIZI BUTONLAR VE V LOGOSU
   ========================================================================= */

/* 1. AÇILAN MAVİ BUTONLARI SLOTVADİ KIRMIZISI (#de0016) YAPMA */
html body .lowbar-fab__action,
html body .lowbar-fab__actions > *,
html body [class*="lowbar-fab__action"],
html body .lowbar-fab__item {
    background: linear-gradient(135deg, #de0016 0%, #a00010 100%) !important;
    background-color: #de0016 !important;
    border: 1px solid #ff5865 !important; /* Çerçeveyi hafif açık kırmızı yaptık */
    box-shadow: 0 6px 16px rgba(222, 0, 22, 0.3) !important;
}

/* Buton içindeki ikonların etrafında mavi zemin kaldıysa onu da şeffaf yap */
html body .lowbar-fab__action .icon,
html body .lowbar-fab__action [class*="icon"],
html body [class*="lowbar-fab__action"] [class*="icon"] {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. "YAMUK T" (ÇARPI) İKONUNU SİLİP, AÇIKKEN DE "V" LOGOSUNU KOYMA */
/* Temanın kendi çarpı/artı işaretini kökünden gizliyoruz */
html body .lowbar-fab__trigger-glyph--close svg,
html body .lowbar-fab__trigger-glyph--close .lowbar-fab__trigger-plus {
    display: none !important;
}

/* Yerine açık durumdayken de bembeyaz V (Favicon) logonuzu koyuyoruz */
html body .lowbar-fab__trigger-glyph--close::before {
    content: "" !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("https://slotvadigiris.com/wp-content/uploads/2026/03/logo.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,0.4)) !important;
    vertical-align: middle !important;
}

/* 3. ANA BUTONUN TEPESİNDEKİ KÜÇÜK MAVİ YÖN OKUNU (BADGE) KIRMIZI YAPMA */
html body .lowbar-fab__trigger [class*="badge"],
html body .lowbar-fab__trigger [class*="indicator"],
html body .lowbar-fab [class*="badge"],
html body .lowbar-fab [class*="indicator"],
html body .lowbar-fab__trigger-badge {
    background-color: #de0016 !important;
    background: #de0016 !important;
    border: 1px solid #a00010 !important;
    box-shadow: 0 2px 6px rgba(222, 0, 22, 0.5) !important;
}
/* =========================================================================
   İNANILMAZ İNATÇI KÜÇÜK OK (CARET) VE MAVİ GÖLGE İÇİN NÜKLEER ÇÖZÜM
   ========================================================================= */

/* 1. Küçük okun arka planını zorla kırmızı yap ve kırmızı gölge ver */
html body span.lowbar-fab__trigger-caret,
html body .lowbar-fab__trigger span.lowbar-fab__trigger-caret,
html body div.lowbar-fab span.lowbar-fab__trigger-caret {
    background: #de0016 !important;
    background-color: #de0016 !important;
    background-image: none !important;
    border: 1px solid #a00010 !important;
    /* Mavi gölgeyi ezip koyu kırmızı parlamayı basıyoruz */
    box-shadow: 0 2px 8px rgba(222, 0, 22, 0.8) !important;
    -webkit-box-shadow: 0 2px 8px rgba(222, 0, 22, 0.8) !important;
}

/* Okun içindeki veya arkasındaki gizli katmanlarda mavi kaldıysa onları da kırmızıya boğ */
html body span.lowbar-fab__trigger-caret::before,
html body span.lowbar-fab__trigger-caret::after {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Menü açıldığında (Aktif durumda) ana butonun etrafına yayılan MAVİ SİSİ kırmızıya çevir */
html body .lowbar-fab.is-active .lowbar-fab__trigger,
html body .lowbar-fab.is-open .lowbar-fab__trigger,
html body .lowbar-fab[data-state="open"] .lowbar-fab__trigger,
html body .lowbar-fab:hover .lowbar-fab__trigger {
    /* Mavi glow'u iptal edip, kırmızı/bordo bir aura veriyoruz */
    box-shadow: 
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 0 25px rgba(222, 0, 22, 0.7),
        inset 0 -4px 10px rgba(0, 0, 0, 0.35) !important;
    -webkit-box-shadow: 
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 0 25px rgba(222, 0, 22, 0.7),
        inset 0 -4px 10px rgba(0, 0, 0, 0.35) !important;
}

/* O küçük oka tıklandığında (focus/active) maviye dönmesini engelle */
html body span.lowbar-fab__trigger-caret:focus,
html body span.lowbar-fab__trigger-caret:active {
    outline: none !important;
    background: #c4232e !important;
    box-shadow: 0 2px 10px rgba(222, 0, 22, 0.9) !important;
}
/* =========================================================================
   FAB MENÜ AÇILDIĞINDA ARKADAKİ BÜYÜK MAVİ SİSİ/AURA'YI KIRMIZI YAPMA
   ========================================================================= */

/* 1. Menü açıldığında dış sarmalayıcının mavi background veya gradient'ini iptal et */
html body .lowbar-fab.is-active,
html body .lowbar-fab.is-open,
html body .lowbar-fab[data-state="open"],
html body .lowbar-fab:hover,
html body .lowbar-fab__actions,
html body .lowbar-fab__actions-container {
    background-image: none !important; 
    background-color: transparent !important;
}

/* 2. Etrafa yayılan MAVİ gölgeyi (box-shadow) KAN KIRMIZISINA çevir */
html body .lowbar-fab__actions,
html body .lowbar-fab__actions-container {
    /* 40px'lik geniş bir alana yayılan kırmızı arka plan gölgesi */
    box-shadow: 0 10px 50px rgba(222, 0, 22, 0.25) !important; 
    -webkit-box-shadow: 0 10px 50px rgba(222, 0, 22, 0.25) !important;
    border: none !important;
}

/* 3. Varsa ::before veya ::after ile eklenmiş gizli mavi gradientleri de kırmızıya boğ */
html body .lowbar-fab.is-active::before,
html body .lowbar-fab.is-open::before,
html body .lowbar-fab[data-state="open"]::before,
html body .lowbar-fab__actions::before,
html body .lowbar-fab__actions::after {
    background: radial-gradient(circle at bottom right, rgba(222, 0, 22, 0.15) 0%, transparent 70%) !important;
    box-shadow: none !important;
}

/* 4. Ana konteyner aktifleştiğinde yayılan ekstra sızıntıları temizle */
html body .lowbar-fab.is-active,
html body .lowbar-fab.is-open {
    box-shadow: 0 0 40px rgba(222, 0, 22, 0.2) !important;
}
/* =========================================================================
   FAB AÇILIR MENÜ - İKON ETRAFINDAKİ KARE ÇERÇEVEYİ BEYAZ YAPMA
   ========================================================================= */

/* İkonların etrafındaki çerçeveyi beyaz yap ve mavi/lacivert sızıntıları temizle */
html body .lowbar-fab__action .icon,
html body .lowbar-fab__item .icon {
    border: 1px solid #ffffff !important; /* Çerçeveyi jilet gibi bembeyaz yapıyoruz (kalınlığı 1px) */
    background: transparent !important; /* İçini şeffaf bırakıyoruz ki alttaki kırmızı tam görünsün */
    box-shadow: none !important; /* Lacivert/mavi sızıntı yapan gölgeleri kökünden siliyoruz */
    border-radius: 10px !important; /* O resimdeki kavisli kare görünümünü veriyoruz */
}

/* Varsa temanın araya soktuğu gizli mavi katmanları (before/after) imha et */
html body .lowbar-fab__action .icon::before,
html body .lowbar-fab__action .icon::after {
    display: none !important;
    content: none !important;
}