/* ===== active/CSS/header_buttons.css ===== */
/* =====================================================
   MITOBET - Header Butonları (Kompakt + Divider)
   TV | PROMOSYONLAR | CANLI DESTEK | GİRİŞ YAP | KAYIT OL
   Ana Renk: #CFAE6D (Altın/Bej)
   ===================================================== */

/* =====================================================
   1. HEADER ACTIONS - KOMPAKT CONTAINER
   ===================================================== */

.header__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

/* Mobil search butonu desktop'ta gizli ama flex'te yer kaplıyor - tamamen kaldır */
.header__actions .header__search-btnmob {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =====================================================
   2. TÜM BUTONLAR - ORTAK STİL (Büyük & Okunaklı)
   ===================================================== */

.header__signin,
.header__signup,
.header__actions [class*="signup"],
.header__actions [class*="register"],
.header__actions .btn-primary,
.mito-header-btn {
    height: 36px !important;
    min-width: auto !important;
    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* =====================================================
   3. GİRİŞ YAP (Outline Altın)
   ===================================================== */

.header__signin {
    background: transparent !important;
    border: 1.5px solid rgba(207, 174, 109, 0.45) !important;
    color: #CFAE6D !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.header__signin:hover {
    background: rgba(207, 174, 109, 0.1) !important;
    border-color: #CFAE6D !important;
    color: #e9c37a !important;
    box-shadow: 0 0 12px rgba(207, 174, 109, 0.15) !important;
}

.header__signin:active {
    transform: scale(0.96) !important;
}

/* =====================================================
   4. KAYIT OL (Solid Altın Gradient)
   ===================================================== */

.header__signup,
.header__actions [class*="signup"],
.header__actions [class*="register"],
.header__actions .btn-primary {
    background: linear-gradient(135deg, #CFAE6D 0%, #b8973d 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
}

.header__signup:hover,
.header__actions [class*="signup"]:hover,
.header__actions [class*="register"]:hover,
.header__actions .btn-primary:hover {
    background: linear-gradient(135deg, #e9c37a 0%, #CFAE6D 100%) !important;
    box-shadow: 0 3px 15px rgba(207, 174, 109, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #000 !important;
}

.header__signup:active,
.header__actions [class*="signup"]:active,
.header__actions [class*="register"]:active {
    transform: translateY(0) scale(0.96) !important;
}

/* Sweep efekti */
.header__signup::before,
.header__actions [class*="signup"]::before,
.header__actions [class*="register"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
    pointer-events: none !important;
}

.header__signup:hover::before,
.header__actions [class*="signup"]:hover::before,
.header__actions [class*="register"]:hover::before {
    left: 100% !important;
}

/* =====================================================
   5. PROMOSYONLAR BUTONU (Shimmer Animasyonlu)
   ===================================================== */

.mito-header-btn--promo {
    background: linear-gradient(135deg, #CFAE6D 0%, #b8973d 50%, #CFAE6D 100%) !important;
    background-size: 200% 100% !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    animation: mitoPromoSweepBg 3s ease-in-out infinite !important;
}

/* Buton arka planı kayma animasyonu */
@keyframes mitoPromoSweepBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Üstten geçen ışık çizgisi */
.mito-header-btn--promo::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 40% !important;
    height: 200% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    ) !important;
    transform: skewX(-20deg) !important;
    animation: mitoSweepLine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes mitoSweepLine {
    0% { left: -60%; }
    50% { left: 120%; }
    100% { left: 120%; }
}

.mito-header-btn--promo:hover {
    animation: none !important;
    background: linear-gradient(135deg, #e9c37a 0%, #CFAE6D 100%) !important;
    background-size: 100% 100% !important;
    box-shadow: 0 3px 18px rgba(207, 174, 109, 0.45) !important;
    transform: translateY(-1px) !important;
}

.mito-header-btn--promo:hover::after {
    animation: none !important;
    opacity: 0 !important;
}

.mito-header-btn--promo:active {
    transform: translateY(0) scale(0.96) !important;
}

/* =====================================================
   6. CANLI DESTEK BUTONU (Outline + Yeşil Dot)
   ===================================================== */

.mito-header-btn--support {
    background: transparent !important;
    border: 1.5px solid rgba(207, 174, 109, 0.45) !important;
    color: #CFAE6D !important;
    transition: border-color 0.6s ease, box-shadow 0.6s ease !important;
}

.mito-header-btn--support .mito-live-dot {
    width: 6px !important;
    height: 6px !important;
    background: #4ade80 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    animation: mitoLiveDot 1.5s ease-in-out infinite !important;
}

@keyframes mitoLiveDot {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
        opacity: 1;
    }
    50% { 
        box-shadow: 0 0 0 4px rgba(74, 222, 128, 0);
        opacity: 0.6;
    }
}

.mito-header-btn--support:hover {
    animation: none !important;
    background: rgba(207, 174, 109, 0.1) !important;
    border-color: #CFAE6D !important;
    color: #e9c37a !important;
    box-shadow: 0 0 12px rgba(207, 174, 109, 0.15) !important;
}

.mito-header-btn--support:active {
    transform: scale(0.96) !important;
}

/* =====================================================
   7. TV BUTONU (Outline + İkon)
   ===================================================== */

.mito-header-btn--tv {
    background: transparent !important;
    border: 1.5px solid rgba(207, 174, 109, 0.45) !important;
    color: #CFAE6D !important;
}

.mito-header-btn--tv .mito-tv-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.mito-header-btn--tv:hover {
    background: rgba(207, 174, 109, 0.1) !important;
    border-color: #CFAE6D !important;
    color: #e9c37a !important;
    box-shadow: 0 0 12px rgba(207, 174, 109, 0.15) !important;
}

.mito-header-btn--tv:active {
    transform: scale(0.96) !important;
}

/* =====================================================
   8. TELEGRAM BUTONU (Outline)
   ===================================================== */

.mito-header-btn--telegram {
    background: transparent !important;
    border: 1.5px solid rgba(207, 174, 109, 0.45) !important;
    color: #CFAE6D !important;
}

.mito-header-btn--telegram:hover {
    background: rgba(207, 174, 109, 0.1) !important;
    border-color: #CFAE6D !important;
    color: #e9c37a !important;
    box-shadow: 0 0 12px rgba(207, 174, 109, 0.15) !important;
}

.mito-header-btn--telegram:active {
    transform: scale(0.96) !important;
}

/* =====================================================
   9. DİVİDER (CANLI DESTEK | GİRİŞ YAP arası çizgi)
   ===================================================== */

.mito-header-divider {
    width: 1px !important;
    height: 20px !important;
    background: rgba(207, 174, 109, 0.3) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
}

/* =====================================================
   9. ÜST BANNER - GÜNCEL GİRİŞ (Her ekran)
   ===================================================== */

.mito-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #181818 !important;
    margin-top: 5px !important;
    padding: 4px 12px !important;
    width: 100% !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1000 !important;
    flex-shrink: 0 !important;
}

.mito-topbar span {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 10px !important;
}

.mito-topbar a {
    color: #CFAE6D !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    background: linear-gradient(90deg, #CFAE6D, #e9c37a) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: all 0.2s ease !important;
}

.mito-topbar a:hover {
    filter: brightness(1.2) !important;
}


/* =====================================================
   10. MOBİL RESPONSIVE
   ===================================================== */

/* =====================================================
   11. MOBİL BAR (Header altı ortalanmış butonlar)
   ===================================================== */

.mito-mobile-bar {
    display: none;
}

@media (max-width: 992px) {
    .mito-header-btn--promo,
    .mito-header-btn--support,
    .mito-header-btn--tv,
    .mito-header-btn--telegram,
    .mito-header-divider {
        display: none !important;
    }

    /* Header'ı mobilede daralt & hizala */
    #header .container .row > .col-12 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Header alt çizgi */
    #header,
    header.header {
        border-bottom: 1px solid rgba(207, 174, 109, 0.15) !important;
    }

    header#header .container .row .col-12 .header__content,
    #header .header__content,
    .header__content {
        padding-top: 5px !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        min-height: unset !important;
        height: 55px !important;
        max-height: 55px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* header__actions (buton container) mobilede yüksekliği daralt */
    .header__actions {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* GİRİŞ YAP / KAYIT OL butonları mobilde 80px → 32px */
    .header__actions .header__signin,
    .header__actions .header__signup,
    .header__actions [class*="signup"],
    .header__actions [class*="register"],
    .header__actions .btn-primary {
        height: 32px !important;
        max-height: 32px !important;
        line-height: 32px !important;
        padding: 0 14px !important;
    }

    .mito-mobile-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: #181818 !important;
        padding: 5px 20px !important;
        width: 100% !important;
        margin-top: 0 !important;
        border-top: none !important;
        box-sizing: border-box !important;
    }

    /* Header container ile aynı hizaya getir */
    #header .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .mito-mobile-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        height: 30px !important;
        padding: 0 14px !important;
        border-radius: 5px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }

    /* TV */
    .mito-mobile-btn--tv {
        background: transparent !important;
        border: 1.5px solid rgba(207, 174, 109, 0.4) !important;
        color: #CFAE6D !important;
    }

    /* Promosyonlar - Sweep animasyonu */
    .mito-mobile-btn--promo {
        background: linear-gradient(135deg, #CFAE6D 0%, #b8973d 50%, #CFAE6D 100%) !important;
        background-size: 200% 100% !important;
        border: none !important;
        color: #000 !important;
        position: relative !important;
        overflow: hidden !important;
        animation: mitoPromoSweepBg 3s ease-in-out infinite !important;
    }

    .mito-mobile-btn--promo::after {
        content: '' !important;
        position: absolute !important;
        top: -50% !important;
        left: -60% !important;
        width: 40% !important;
        height: 200% !important;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent
        ) !important;
        transform: skewX(-20deg) !important;
        animation: mitoSweepLine 3s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    /* Canlı Destek */
    .mito-mobile-btn--support {
        background: transparent !important;
        border: 1.5px solid rgba(207, 174, 109, 0.4) !important;
        color: #CFAE6D !important;
        transition: border-color 0.6s ease, box-shadow 0.6s ease !important;
    }

    .mito-mobile-btn--support .mito-live-dot {
        width: 5px !important;
        height: 5px !important;
        background: #4ade80 !important;
        border-radius: 50% !important;
        display: inline-block !important;
        animation: mitoLiveDot 1.5s ease-in-out infinite !important;
    }

    .mito-mobile-btn .mito-tv-icon {
        font-size: 11px !important;
    }

    /* Telegram mobil */
    .mito-mobile-btn--telegram {
        background: transparent !important;
        border: 1.5px solid rgba(207, 174, 109, 0.4) !important;
        color: #CFAE6D !important;
    }
}

@media (max-width: 768px) {
    .header__actions {
        gap: 4px !important;
    }

    .header__signin,
    .header__signup,
    .header__actions [class*="signup"],
    .header__actions [class*="register"] {
        height: 28px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }

    /* Mobilde GİRİŞ YAP outline kalmalı, gradient/glow olmamalı */
    .header__signin,
    .header__signin.header__signup {
        background: transparent !important;
        border: 1.5px solid rgba(207, 174, 109, 0.45) !important;
        color: #CFAE6D !important;
        box-shadow: none !important;
    }

    /* ——— Login Sonrası Header (Mobil) ——— */

    /* ——— Login Sonrası Header (Mobil) ——— */

    /* Logo dikeyde tam ortala */
    .header__content .header__logo {
        display: flex !important;
        align-items: center !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        height: 100% !important;
    }

    /* header__action - tüm ikonlar eşit aralıklı */
    .header__content .header__action {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-left: auto !important;
    }

    /* Bakiye + cüzdan yapışık */
    .header__content .header__wallet {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Bakiye yazısı küçült */
    .header__content #dropdownWalet {
        font-size: 12px !important;
        padding: 0 4px !important;
    }

    /* Cüzdan ikon butonu bakiyeye yapışık */
    .header__content .header__wallet-btn {
        margin-left: 0 !important;
        padding: 0 2px !important;
    }

    /* Bildirim & profil ikonları - eşit aralık (gap: 12px üstten geliyor) */
    .header__content .header__dropdown {
        display: flex !important;
        align-items: center !important;
    }

    .header__content .header__dropdown button {
        padding: 4px !important;
    }
}

@media (max-width: 480px) {
    .header__signin,
    .header__signup,
    .header__actions [class*="signup"],
    .header__actions [class*="register"] {
        height: 26px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        box-shadow: none !important;
    }

    .header__signin,
    .header__signin.header__signup {
        box-shadow: none !important;
    }

    /* Login sonrası - daha küçük ekran */
    .header__content #dropdownWalet {
        font-size: 12px !important;
    }
}


/* ===== active/CSS/mobile_navbar.css ===== */
/* =====================================================
   MITOBET - Mobil Alt Bar (Tabbar/Lowbar)
   Site temasına uygun renk güncellemesi
   Arka plan: #181818 | Altın: #CFAE6D
   ===================================================== */

/* Ana container - tek renk */
#tabbar,
.lowbar,
#tabbar *,
.lowbar * {
    background-color: #181818 !important;
    background-image: none !important;
}

#tabbar,
.lowbar {
    border-top: 1px solid rgba(207, 174, 109, 0.15) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Nav container */
#tabbar nav,
.lowbar nav {
    background: #181818 !important;
}

/* Ortadaki logo butonu */
#tabbar nav > *:nth-child(3),
.lowbar nav > *:nth-child(3),
#tabbar nav [class*="logo"],
#tabbar nav [class*="center"],
.lowbar nav [class*="logo"],
.lowbar nav [class*="center"] {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tüm nav linkleri / butonları (ortadaki sticky-menu hariç) */
#tabbar nav a,
#tabbar nav button,
#tabbar nav > *:not(.center),
.lowbar nav a,
.lowbar nav button,
.lowbar nav > *:not(.center) {
    color: #CFAE6D !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

/* Ortadaki sticky-menu — sitenin toggle mekanizmasına dokunma */
#tabbar li.center,
#tabbar li.center *,
.lowbar li.center,
.lowbar li.center *,
#tabbar .sticky-menu-container,
#tabbar .sticky-menu-container *,
.lowbar .sticky-menu-container,
.lowbar .sticky-menu-container * {
    opacity: 1 !important;
    transition: none !important;
    background-color: transparent !important;
    background-image: unset !important;
}

/* Aktif durum */
#tabbar nav a.active,
#tabbar nav button.active,
#tabbar nav > *.active,
.lowbar nav a.active,
.lowbar nav button.active,
.lowbar nav > *.active,
#tabbar nav a[class*="active"],
.lowbar nav a[class*="active"] {
    color: #e9c37a !important;
    opacity: 1 !important;
}

/* Hover */
#tabbar nav a:hover,
#tabbar nav button:hover,
.lowbar nav a:hover,
.lowbar nav button:hover {
    color: #e9c37a !important;
    opacity: 1 !important;
}

/* SVG ikonları */
#tabbar svg,
#tabbar .svg-icon,
.lowbar svg,
.lowbar .svg-icon {
    fill: #CFAE6D !important;
    color: #CFAE6D !important;
    background: transparent !important;
}

#tabbar .active svg,
#tabbar a.active svg,
.lowbar .active svg,
.lowbar a.active svg,
#tabbar [class*="active"] svg,
.lowbar [class*="active"] svg {
    fill: #e9c37a !important;
    color: #e9c37a !important;
}

/* Yazı rengi */
#tabbar span,
#tabbar label,
.lowbar span,
.lowbar label {
    color: inherit !important;
    background: transparent !important;
}

/* Ortadaki logo img */
#tabbar img,
.lowbar img {
    background: transparent !important;
}

/* Ortadaki animasyonlu logo (inner-menu) */
#tabbar .inner-menu,
.lowbar .inner-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

#tabbar .inner-menu .icon,
.lowbar .inner-menu .icon,
#tabbar .inner-menu .icon.plus,
.lowbar .inner-menu .icon.plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

#tabbar .inner-menu .icon img,
.lowbar .inner-menu .icon img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    background: transparent !important;
}


/* ===== active/CSS/section_buttons.css ===== */
/* =====================================================
   MITOBET - Section "TÜMÜNÜ GÖR" Butonları
   Renk uyumu - altın outline
   ===================================================== */

.section__view,
a.section__view,
a.section__view.section__view--carousel,
.section__title-wrap .section__view {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #CFAE6D !important;
    border: 1px solid rgba(207, 174, 109, 0.4) !important;
    transition: all 0.25s ease !important;
}

.section__view:hover,
a.section__view:hover,
a.section__view.section__view--carousel:hover,
.section__title-wrap .section__view:hover {
    color: #e9c37a !important;
    border-color: #CFAE6D !important;
    background: rgba(207, 174, 109, 0.08) !important;
    text-decoration: none !important;
}

/* SVG ok */
.section__view svg,
.section__view--carousel svg,
.section__title-wrap .section__view svg {
    fill: #CFAE6D !important;
    color: #CFAE6D !important;
}

.section__view:hover svg {
    fill: #e9c37a !important;
    color: #e9c37a !important;
}

/* Mobilde küçült */
@media (max-width: 768px) {
    .section__view,
    a.section__view,
    a.section__view.section__view--carousel {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
}


/* ===== active/CSS/modal_buttons.css ===== */
/* =====================================================
   MITOBET - Modal Giriş/Kayıt Butonları
   İkisi de solid altın gradient
   ===================================================== */

/* Ortak stil */
#signin-modal .form__btn,
#signup-modal .form__btn {
    background: linear-gradient(135deg, #CFAE6D 0%, #b8973d 100%) !important;
    background-image: linear-gradient(135deg, #CFAE6D 0%, #b8973d 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

#signin-modal .form__btn:hover,
#signup-modal .form__btn:hover {
    background: linear-gradient(135deg, #e9c37a 0%, #CFAE6D 100%) !important;
    background-image: linear-gradient(135deg, #e9c37a 0%, #CFAE6D 100%) !important;
    box-shadow: 0 4px 18px rgba(207, 174, 109, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #000 !important;
}

#signin-modal .form__btn:active,
#signup-modal .form__btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Sweep efekti */
#signin-modal .form__btn::before,
#signup-modal .form__btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
    pointer-events: none !important;
}

#signin-modal .form__btn:hover::before,
#signup-modal .form__btn:hover::before {
    left: 100% !important;
}


/* ===== active/CSS/main.css ===== */
/* =====================================================
   MITOBET - Main CSS
   Genel site düzeltmeleri
   ===================================================== */

/* ——— Header Border Kaldır ——— */
.header,
#header,
header,
.header__content {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ——— Genel Arka Plan Rengi (#222028 yerine #181818) ——— */
.modal-content,
.modal__content,
.dropdown-menu,
.card,
[class*="modal"] .modal-content,
[class*="modal"] .modal__content {
    background: #181818 !important;
    background-color: #181818 !important;
}

/* Multisearch arka plan - kaldırıldı (search alanını bozuyordu) */

/* Form input arka planları (sadece modal/form içi) */
.modal .form__input,
.modal .form-control,
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="email"],
.modal select {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border-color: rgba(207, 174, 109, 0.2) !important;
}

.modal .form__input:focus,
.modal .form-control:focus {
    background: #252525 !important;
    border-color: #CFAE6D !important;
}

/* ——— Para Yatır / Para Çek Container & Responsive ——— */

/* Container padding düzeltme */
.section--first > .container,
.section:first-child > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Üst satır (başlık + tablar) */
.section--first .col-12.d-flex.justify-content-between,
.section:first-child .col-12.d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    margin-bottom: 8px !important;
}

/* Başlık */
.section--first h1,
.section:first-child .col-12.d-flex h1 {
    font-size: clamp(18px, 4vw, 26px) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Tab'lar */
#tabs-nav.nav.nav-tabs.tabs-nav {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#tabs-nav .nav-link,
#tabs-nav .nav-item .nav-link {
    padding: 8px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
}

/* Kartlar satırı - üst boşluk */
.section--first > .container > .row:nth-child(2),
.section:first-child > .container > .row:nth-child(2) {
    padding-top: 4px !important;
}

/* Mobil */
@media (max-width: 767px) {
    .section--first > .container,
    .section:first-child > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .section--first .col-12.d-flex.justify-content-between,
    .section:first-child .col-12.d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 0 !important;
        margin-bottom: 4px !important;
    }

    .section--first h1,
    .section:first-child .col-12.d-flex h1 {
        font-size: 20px !important;
    }

    #tabs-nav.nav.nav-tabs.tabs-nav {
        width: 100% !important;
    }

    #tabs-nav .nav-link,
    #tabs-nav .nav-item .nav-link {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    /* Kartlar arası boşluk */
    .section--first > .container > .row:nth-child(2) > [class*="col-"],
    .section:first-child > .container > .row:nth-child(2) > [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }
}

/* ——— Footer: Kutusuz Tasarım (Sadece border/bg/shadow kaldırma) ——— */

/* Sağlayıcı kartları - kutusuz */
#footer-providers-section #providers-grid .provider-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#footer-providers-section #providers-grid .provider-item .partner,
#footer-providers-section #providers-grid .partner {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Sağlayıcı logoları - beyaz, yarı saydam */
#footer-providers-section #providers-grid .partner img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.5 !important;
    transition: opacity 0.25s ease !important;
}
#footer-providers-section #providers-grid .partner:hover img {
    opacity: 0.9 !important;
}

/* Para birimleri & ödeme yöntemleri - kutusuz */
.footer__currencies ul.footer__accepted li,
#footer-payment-methods ul.footer__accepted li,
div.footer__currencies ul.footer__accepted li {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.footer__currencies ul.footer__accepted .instrument-icon-wrapper,
#footer-payment-methods ul.footer__accepted li .instrument-icon-wrapper,
#footer-payment-methods .footer__accepted li .instrument-icon-wrapper,
div.footer__currencies ul.footer__accepted li div.instrument-icon-wrapper,
.footer__currencies .footer__accepted .instrument-icon-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ——— Footer: Para Birimleri & Ödeme Yöntemleri Efektleri ——— */

/* Idle pulse animasyonu (sadece ödeme yöntemleri için) */
@keyframes mito-icon-pulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 0.88; }
}

/* ——— KABUL EDİLEN PARA BİRİMLERİ — Jojova Tarzı ——— */

/* Container: altın border çerçeve, koyu arka plan */
.footer__currencies:not(#footer-payment-methods) {
    border: 1px solid rgba(207, 174, 109, 0.3) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 16px 20px 14px !important;
    margin: 0 0 16px 0 !important;
}

/* Başlık: altın renk */
.footer__currencies:not(#footer-payment-methods) .section__title,
.footer__currencies:not(#footer-payment-methods) .footer__title,
.footer__currencies:not(#footer-payment-methods) > span:first-child,
.footer__currencies:not(#footer-payment-methods) > div:first-child {
    color: #CFAE6D !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Liste: tek satır yatay, taşarsa scroll */
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 0 2px !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted::-webkit-scrollbar {
    display: none !important;
}

/* Her li: ikon + isim yan yana */
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted li {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 4px !important;
}

/* Ayraç yok (Jojova'da yok) */
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted li::after {
    content: none !important;
    display: none !important;
}

/* instrument-icon-wrapper: ikon + isim container */
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

/* İkon: küçük renkli daire */
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper img {
    width: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* İsim etiketi (JS tarafından eklenir) */
.footer__currencies:not(#footer-payment-methods) .mito-currency-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    transition: color 0.2s ease !important;
}

/* Hover: hafif arka plan + isim belirginleş */
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper:hover {
    background: rgba(207, 174, 109, 0.08) !important;
}
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper:hover img {
    transform: scale(1.08) !important;
    filter: brightness(1.1) !important;
}
.footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper:hover .mito-currency-label {
    color: #CFAE6D !important;
}

/* Mobil */
@media (max-width: 767px) {
    .footer__currencies:not(#footer-payment-methods) {
        padding: 12px 14px 10px !important;
        margin: 0 0 12px 0 !important;
    }
    .footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper img {
        width: 18px !important;
        height: 18px !important;
        max-height: 18px !important;
    }
    .footer__currencies:not(#footer-payment-methods) .mito-currency-label {
        font-size: 10px !important;
    }
    .footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper {
        gap: 4px !important;
        padding: 3px 4px !important;
    }
    .footer__currencies:not(#footer-payment-methods) ul.footer__accepted li {
        margin: 0 2px !important;
    }
}

/* ——— ÖDEME YÖNTEMLERİ — Mevcut efektler ——— */

/* Logolara idle pulse + hover */
#footer-payment-methods ul.footer__accepted .instrument-icon-wrapper img {
    opacity: 0.65 !important;
    filter: none !important;
    animation: mito-icon-pulse 3.5s ease-in-out infinite !important;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease !important;
    will-change: transform, opacity !important;
}

#footer-payment-methods ul.footer__accepted .instrument-icon-wrapper:hover img {
    opacity: 1 !important;
    transform: scale(1.08) translateY(-2px) !important;
    filter: brightness(1.15) drop-shadow(0 2px 8px rgba(207, 174, 109, 0.35)) !important;
    animation: none !important;
}

#footer-payment-methods ul.footer__accepted .instrument-icon-wrapper {
    transition: transform 0.3s ease !important;
}
#footer-payment-methods ul.footer__accepted .instrument-icon-wrapper:hover {
    transform: translateY(-1px) !important;
}

#footer-payment-methods ul.footer__accepted li:nth-child(2n) .instrument-icon-wrapper img {
    animation-delay: -1.2s !important;
}
#footer-payment-methods ul.footer__accepted li:nth-child(3n) .instrument-icon-wrapper img {
    animation-delay: -2.4s !important;
}
#footer-payment-methods ul.footer__accepted li:nth-child(5n) .instrument-icon-wrapper img {
    animation-delay: -0.6s !important;
}

/* ——— Mobil: Para Birimleri daha küçük ——— */
@media (max-width: 767px) {
    .footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper img {
        width: 16px !important;
        height: 16px !important;
        max-height: 16px !important;
    }
    .footer__currencies:not(#footer-payment-methods) .mito-currency-label {
        font-size: 10px !important;
    }
    .footer__currencies:not(#footer-payment-methods) ul.footer__accepted li:not(:last-child)::after {
        margin: 0 8px !important;
        font-size: 14px !important;
    }
    .footer__currencies:not(#footer-payment-methods) ul.footer__accepted .instrument-icon-wrapper {
        gap: 4px !important;
    }
}

/* ——— Footer: CMS "TÜMÜNÜ GÖR" Butonlarını Gizle ——— */
#footer-providers-section .section__view,
#footer-providers-section .section__view--carousel,
#footer-providers-section .section__title-wrap .section__view,
.footer__currencies .section__view,
#footer-payment-methods .section__view {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ——— Footer: Sağlayıcılar Collapse Sistemi ——— */

/* Grid collapse: varsayılan 2 satır (~180px web, ~130px mobil) */
#footer-providers-section #providers-grid {
    max-height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: max-height 0.5s ease !important;
}

/* Açık durumda */
#footer-providers-section #providers-grid.mito-expanded {
    max-height: 3000px !important;
}

/* Alt gradient fade — "devamı var" hissi */
#footer-providers-section #providers-grid::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: linear-gradient(to bottom, transparent, #181818 90%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: opacity 0.4s ease !important;
}

/* Açık durumda gradient kaybolsun */
#footer-providers-section #providers-grid.mito-expanded::after {
    opacity: 0 !important;
    height: 0 !important;
}

/* Toggle buton stili */
.mito-providers-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 12px auto 0 !important;
    padding: 8px 22px !important;
    background: transparent !important;
    border: 1px solid rgba(207, 174, 109, 0.35) !important;
    border-radius: 20px !important;
    color: #CFAE6D !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    outline: none !important;
}

.mito-providers-toggle:hover {
    border-color: #CFAE6D !important;
    background: rgba(207, 174, 109, 0.08) !important;
    color: #e9c37a !important;
}

/* Ok ikonu */
.mito-providers-toggle .mito-toggle-arrow {
    display: inline-block !important;
    transition: transform 0.35s ease !important;
    font-size: 10px !important;
}

/* Açık durumda ok yukarı dönsün */
.mito-providers-toggle.mito-expanded .mito-toggle-arrow {
    transform: rotate(180deg) !important;
}

/* Mobil ayarlar */
@media (max-width: 767px) {
    #footer-providers-section #providers-grid {
        max-height: 130px !important;
    }

    #footer-providers-section #providers-grid::after {
        height: 50px !important;
    }

    .mito-providers-toggle {
        font-size: 11px !important;
        padding: 6px 18px !important;
        margin-top: 8px !important;
    }
}

/* ——— Random Winners Slider Gizle (Web & Mobil) ——— */
#random-winners-slider,
.RandomSlider-wrapper,
.container.RandomSlider-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}


/* ===== active/CSS/hide.css ===== */
/* =====================================================
   MITOBET - Hide CSS
   Gizlenecek elementler & Modal Düzeltmeleri
   ===================================================== */

/* ——— Geçici: EN dil seçeneği JS ile gizleniyor (header_extra_buttons.js) ——— */

/* ——— Modal Görsel Gizle (Giriş/Kayıt) ——— */
.modal__sign-img,
.modal__content .modal__sign-img,
#signin-modal .modal__sign-img,
#signup-modal .modal__sign-img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* ——— Giriş Modal - Büyük & Ortalı ——— */
#signin-modal .modal-dialog {
    max-width: 500px !important;
    margin: auto !important;
}

#signin-modal .modal__content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 30px 40px !important;
}

#signin-modal .modal__head {
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

#signin-modal .modal__title {
    text-align: center !important;
    width: 100% !important;
}

#signin-modal .modal__form {
    width: 100% !important;
    max-width: 100% !important;
}

#signin-modal .form__group {
    margin-bottom: 20px !important;
}

#signin-modal .form__input {
    width: 100% !important;
    padding: 14px 16px !important;
}

#signin-modal .form__btn {
    width: 100% !important;
    margin-top: 10px !important;
}

#signin-modal .form__text {
    text-align: center !important;
    margin-top: 15px !important;
}

/* ——— Kayıt Modal - Büyük & Ortalı ——— */
#signup-modal .modal-dialog {
    max-width: 520px !important;
    margin: auto !important;
}

#signup-modal .modal__content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 25px 35px !important;
}

#signup-modal .modal__head {
    text-align: center !important;
    margin-bottom: 15px !important;
}

#signup-modal .modal__title {
    text-align: left !important;
}

#signup-modal .modal__form {
    width: 100% !important;
    max-width: 100% !important;
}

#signup-modal .form__group {
    margin-bottom: 16px !important;
}

#signup-modal .form__input {
    width: 100% !important;
    padding: 12px 14px !important;
}

#signup-modal .form__btn {
    width: 100% !important;
    margin-top: 15px !important;
}

#signup-modal .form__text {
    text-align: center !important;
    margin-top: 12px !important;
}

/* ——— Her iki modal için ortak ——— */
#signin-modal .modal__close,
#signup-modal .modal__close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 100 !important;
}

#signin-modal .form__delimiter,
#signup-modal .form__delimiter {
    text-align: center !important;
    margin: 15px 0 !important;
}

/* ——— Kayıt Modal Row/Col Fix ——— */
#signup-modal .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#signup-modal [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Telefon numarası fix */
#signup-modal .form__group,
#signup-modal .setting__form,
#signup-modal [class*="setting"] {
    width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#signup-modal .form__group .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Doğum tarihi ve referans kodu yan yana */
#signup-modal .form__group .row > [class*="col-6"],
#signup-modal .form__group .row > .col-12.col-xl-6 {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
}

/* Modal content position relative + Arka plan rengi */
#signin-modal .modal-content,
#signup-modal .modal-content,
.modal-content {
    position: relative !important;
    background: #181818 !important;
    background-color: #181818 !important;
}

#signin-modal .modal__content,
#signup-modal .modal__content,
.modal__content {
    background: #181818 !important;
    background-color: #181818 !important;
}

/* Modal head flex düzeltme */
#signup-modal .modal__head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding-right: 50px !important;
}


/* ===== active/CSS/vip_hide.css ===== */
/* VIP Sayfasında "Ayrıcalıklı VIP Deneyimi" Bölümünü Gizle */
body[class*="vip"] .vip:has(.vip__title),
body[data-page*="vip"] .vip:has(.vip__title) {
    display: none !important;
}

/* Alternatif selector - URL bazlı */
@supports selector(:has(*)) {
    .vip:has(.vip__title):has(.vip__btn) {
        display: none !important;
    }
}



/* ===== active/CSS/slider_bg/slider_border.css ===== */
/* Main Slider Border & Skeleton Effects */

/* Skeleton Loading Animasyonu */
@keyframes shimmerMain {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Slider Container Ayarları */
#main-slider .slide {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important; /* Varsayılan radius */
  z-index: 1 !important;
  
  /* 4. Skeleton Loading Background */
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmerMain 1.5s infinite linear !important;
}

/* 3. Inner Shadow (Derinlik Efekti) */
#main-slider .slide::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Hafif iç gölge ve alt kısımdan yukarı doğru karartma */
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2), inset 0 -50px 60px rgba(0,0,0,0.5) !important;
  pointer-events: none !important;
  z-index: 2 !important; /* Resmin üzerinde */
  border-radius: 12px !important;
  transition: box-shadow 0.3s ease !important;
}

/* Resim Ayarları */
#main-slider .slide img.slide-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hover Durumu */
#main-slider .slide:hover {
  /* Hover'da skeleton dursun (gerçi resim varken görünmez ama) */
  animation: none !important;
}

#main-slider .slide:hover::after {
  /* Hover'da gölgeyi biraz hafiflet */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 -30px 40px rgba(0,0,0,0.3) !important;
}



/* ===== active/Slider_Alt_CSS/Slider_Alt_CSS.css ===== */
/* BannerFunctions CSS - #extra-slider1 (Custom8Banner) */

#extra-slider1 {
  padding-top: 0 !important;
}

/* Desktop & Laptop Grid Layout (8 cols - Tam Sığdırma) */
.Custom8Banner-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 20px 10px !important; /* Üst/alt padding artırıldı (kesilmeyi önlemek için) */
  overflow: visible !important; /* Taşmaya izin ver */
}

/* 4. Skeleton Loading Animasyonu */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Base Slide Style */
.Custom8Banner-slide {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 15/22 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin-top: 12px !important;
  border: 2px solid transparent !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transform: scale(1) !important;
  z-index: 1 !important;
  
  /* 4. Skeleton Loading Background - Aydınlatılmış */
  background: linear-gradient(90deg, #2a2a2a 25%, #353535 50%, #2a2a2a 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite linear !important;
}

/* 3. Inner Shadow (Derinlik Efekti) - Karartma Azaltıldı */
.Custom8Banner-slide::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Çok hafif iç gölge - karartma minimuma indirildi */
  box-shadow: inset 0 0 8px rgba(0,0,0,0.1), inset 0 -20px 25px rgba(0,0,0,0.2) !important;
  pointer-events: none !important; /* Tıklamayı engelleme */
  z-index: 2 !important; /* Resmin üzerinde */
  border-radius: 10px !important; /* Border radius uyumu */
  transition: all 0.4s ease !important;
}

/* Desktop Animation & Hover Effects - Focus Mode (Jojova Style) */
@media (min-width: 769px) {
  /* 3D Focus Efekti - Grid'e hover olunca diğerleri hafif solsun */
  .Custom8Banner-grid:hover .Custom8Banner-slide:not(:hover) {
    opacity: 0.7 !important;
    transform: scale(0.95) translateY(3px) !important;
    filter: grayscale(20%) blur(0px) !important;
    border-color: rgba(233, 195, 122, 0.2) !important;
  }

  /* Üzerine gelinen kartı öne çıkar */
  .Custom8Banner-grid .Custom8Banner-slide:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    border-color: #e9c37a !important;
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(233, 195, 122, 0.4) !important;
    z-index: 10 !important;
    
    /* Hover'da skeleton animasyonunu durdur */
    animation: none !important;
    background: #000 !important;
  }

  /* Hover'da Inner Shadow'u Hafiflet (Görsel daha net görünsün) */
  .Custom8Banner-slide:hover::before {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 -20px 30px rgba(0,0,0,0.3) !important;
  }

  /* Glow Efekti */
  .Custom8Banner-slide:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      to bottom,
      rgba(233, 195, 122, 0.15) 0%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
    z-index: 3 !important; /* Shadow'un da üzerinde */
  }
}

/* Link ve Resim Ayarları */
.Custom8Banner-link,
.Custom8Banner-cover,
.Custom8Banner-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Genel .slot stil çakışmalarını önle */
.Custom8Banner-slide .slot,
.Custom8Banner-slide .slot--carousel {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}

.Custom8Banner-slide .slot:hover,
.Custom8Banner-slide .slot--carousel:hover {
  transform: none !important;
  background: transparent !important;
}

.Custom8Banner-link {
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

.slot__cover,
.slot__img {
  width: 100% !important;
  height: 100% !important;
}

.Custom8Banner-img img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  vertical-align: top !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Tablet/Laptop Scroll */
@media (max-width: 1200px) and (min-width: 769px) {
  .Custom8Banner-grid {
    gap: 6px !important;
  }
}

/* Mobile Grid Layout */
@media (max-width: 768px) {
  /* Container'ları sabitle - Swiper kaydırmasını engelle */
  #extra-slider1 {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .Custom8Banner-wrapper,
  .Custom8Banner-ticker,
  .Custom8Banner-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Swiper özelliklerini devre dışı bırak */
  .ticker-swiper-container {
    overflow: hidden !important;
    touch-action: auto !important;
  }
  
  .Custom8Banner-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 5px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    /* Swiper transform'u engelle */
    translate: none !important;
  }

  .Custom8Banner-grid::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Swiper slide transform'unu engelle */
  .Custom8Banner-slide.swiper-slide {
    transform: none !important;
    flex-shrink: 0 !important;
  }

  .Custom8Banner-slide {
    aspect-ratio: 3/4 !important;
    margin: 0 !important;
    border: none !important;
    transform: none !important;
    /* Mobilde de skeleton olsun - Aydınlatılmış */
    background: linear-gradient(90deg, #2a2a2a 25%, #353535 50%, #2a2a2a 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
  }

  /* Mobile minimal 3D efekt - Saydamlaştırma KALDIRILDI */
  /* .Custom8Banner-grid:hover .Custom8Banner-slide:not(:hover) {
    opacity: 0.5 !important;
    transform: scale(0.95) !important;
    filter: grayscale(30%) !important;
  } */
  
  .Custom8Banner-slide:hover {
    transform: scale(1.02) !important;
    z-index: 2 !important;
    animation: none !important;
    /* Mobilde border ekleyelim */
    border: 1px solid rgba(233, 195, 122, 0.6) !important; 
  }

  .Custom8Banner-img img {
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  
  .Custom8Banner-slide:hover::after {
    display: none !important;
  }
  
  /* Mobilde inner shadow çok hafif */
  .Custom8Banner-slide::before {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 -10px 15px rgba(0,0,0,0.15) !important;
  }
}


/* ===== active/PromoPage/promopage.css ===== */
/* =====================================================
   MITOBET - Promosyon Sayfasi Redesign v3
   Tarayici uyumlu, sade ve kaliteli
   ===================================================== */

/* Sayfa Basligi Gizle */
.section__title.section__title--head {
    display: none !important;
}

.section:has(.section__title--head) .nav.nav-tabs.tabs-nav,
.ection:has(.section__title--head) .nav.nav-tabs.tabs-nav {
    display: none !important;
}
#tabs-nav,
#wallet-modal .nav.nav-tabs.tabs-nav,
#wallet-modal .tabs-nav {
    display: flex !important;
}

/* =====================================================
   TABS NAV
   ===================================================== */
#tabs-nav {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    margin-bottom: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#tabs-nav .nav-link,
#tabs-nav .tabs-nav__btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    -webkit-transition: all 0.25s ease !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

#tabs-nav .nav-link:hover,
#tabs-nav .tabs-nav__btn:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

#tabs-nav .nav-link.active,
#tabs-nav .tabs-nav__btn.active {
    background: rgba(207, 174, 109, 0.12) !important;
    color: #CFAE6D !important;
    font-weight: 600 !important;
}

/* =====================================================
   BLOG GRID
   ===================================================== */
.blog-grid {
    display: -ms-grid !important;
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 0 !important;
    margin-top: 8px !important;
}

@media (max-width: 1399px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 2px !important;
    }
}

/* =====================================================
   POST KART
   ===================================================== */
.post {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    background: #0e0e0e !important;
    border: 1px solid rgba(207, 174, 109, 0.1) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    position: relative !important;
    -webkit-transition: -webkit-transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.03),
                inset 0 0 0 1px rgba(207, 174, 109, 0.04) !important;
}

.post:hover {
    -webkit-transform: translateY(-8px) !important;
    transform: translateY(-8px) !important;
    border-color: rgba(207, 174, 109, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4),
                0 0 25px rgba(207, 174, 109, 0.07),
                inset 0 1px 0 rgba(207, 174, 109, 0.1),
                inset 0 0 0 1px rgba(207, 174, 109, 0.15) !important;
}

.post:active {
    -webkit-transform: translateY(-3px) !important;
    transform: translateY(-3px) !important;
}

/* Ust kenar altin cizgi */
.post::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 15% !important;
    right: 15% !important;
    height: 2px !important;
    background: -webkit-linear-gradient(left, transparent, #CFAE6D, transparent) !important;
    background: linear-gradient(90deg, transparent, #CFAE6D, transparent) !important;
    opacity: 0 !important;
    -webkit-transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease !important;
    transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease !important;
    z-index: 5 !important;
}

.post:hover::before {
    opacity: 1 !important;
    left: 5% !important;
    right: 5% !important;
}

/* Sweep isik efekti */
.post::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -80% !important;
    width: 40% !important;
    height: 100% !important;
    background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.025), transparent) !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.025), transparent) !important;
    -webkit-transform: skewX(-15deg) !important;
    transform: skewX(-15deg) !important;
    -webkit-transition: left 0.8s ease !important;
    transition: left 0.8s ease !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.post:hover::after {
    left: 130% !important;
}

/* =====================================================
   POST COVER
   ===================================================== */
.post__cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.post__cover img,
.post__cover .lazy-load-image-background img {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
    object-fit: cover !important;
    display: block !important;
    -webkit-transition: filter 0.4s ease !important;
    transition: filter 0.4s ease !important;
}

.post:hover .post__cover img,
.post:hover .post__cover .lazy-load-image-background img {
    -webkit-filter: brightness(1.06) !important;
    filter: brightness(1.06) !important;
}

.post__cover .lazy-load-image-background {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* =====================================================
   POST TITLE
   ===================================================== */
.post__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: transparent !important;
    -webkit-transition: color 0.3s ease !important;
    transition: color 0.3s ease !important;
    display: block !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
}

/* Baslik altinda genisleyen altin cizgi */
.post__title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 16px !important;
    width: 30px !important;
    height: 2px !important;
    background: -webkit-linear-gradient(left, #CFAE6D, rgba(207, 174, 109, 0.15)) !important;
    background: linear-gradient(90deg, #CFAE6D, rgba(207, 174, 109, 0.15)) !important;
    border-radius: 1px !important;
    -webkit-transition: width 0.45s ease !important;
    transition: width 0.45s ease !important;
}

.post:hover .post__title::after {
    width: 55px !important;
}

.post:hover .post__title {
    color: #CFAE6D !important;
}

/* Baslik altinda aciklama */


@media (max-width: 767px) {
    .post__title {
        font-size: 22px !important;
        padding: 12px 14px !important;
        line-height: 1.35 !important;
    }

    .post__title::after {
        left: 14px !important;
        bottom: 6px !important;
    }


}

/* =====================================================
   META & TEXT - Gizle
   ===================================================== */
.blog-grid .post__meta,
.blog-grid .post__date,
.blog-grid .post__text {
    display: none !important;
}

/* =====================================================
   POST CONTENT & BIG
   ===================================================== */
.post__content {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    width: 100% !important;
}

.post--big {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.post--big .post__cover {
    max-width: 100% !important;
}

@media (min-width: 1200px) {
    .post--big {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
}

/* =====================================================
   REVEAL ANIMASYONU
   ===================================================== */
.post[data-promo-reveal] {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: opacity 0.55s ease, -webkit-transform 0.55s ease !important;
    transition: opacity 0.55s ease, transform 0.55s ease !important;
}

.post[data-promo-reveal="visible"] {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
}

.post[data-promo-reveal="visible"]:hover {
    -webkit-transform: translateY(-8px) !important;
    transform: translateY(-8px) !important;
}




/* ===== active/PromoPage/Promo_up_button.css ===== */
/* =====================================================
   MITOBET - Promosyon Kategori Butonlari Redesign
   Hedef: .category-grid-wrapper, .category-tile
   Tema: Koyu zemin, altin aksan (#CFAE6D / #FFD700)
   ===================================================== */

/* Grid Wrapper */
.category-grid-wrapper {
    padding: 8px 0 16px !important;
    background: transparent !important;
}

.category-grid {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

/* =====================================================
   CATEGORY TILE - Ana Buton
   ===================================================== */
.category-tile {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 280px !important;
    max-width: 100% !important;
    height: 64px !important;
    background: linear-gradient(135deg, #141414 0%, #0d0d0d 100%) !important;
    border: 1px solid rgba(207, 174, 109, 0.15) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.category-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(207, 174, 109, 0.5) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(207, 174, 109, 0.1) !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%) !important;
}

/* Aktif Durum */
.category-tile.active {
    border-color: rgba(207, 174, 109, 0.4) !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 12px rgba(207, 174, 109, 0.08) !important;
}

/* Hover isik sizmasi */
.category-tile::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, transparent, rgba(207, 174, 109, 0.06), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.category-tile:hover::before {
    opacity: 1 !important;
}

/* =====================================================
   CATEGORY IMAGE - Sol Gorsel
   ===================================================== */
.category-image {
    width: 64px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(207, 174, 109, 0.1) !important;
}

.category-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease, filter 0.4s ease !important;
    filter: brightness(1.05) saturate(1.1) !important;
}

.category-tile:hover .category-image img {
    transform: scale(1.1) !important;
    filter: brightness(1.15) saturate(1.2) !important;
}

/* =====================================================
   CATEGORY INFO - Sag Taraf (Baslik + Ok)
   ===================================================== */
.category-info {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
    height: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =====================================================
   CATEGORY TITLE
   ===================================================== */
.category-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

.category-tile:hover .category-title {
    color: #CFAE6D !important;
    text-shadow: 0 0 8px rgba(207, 174, 109, 0.2) !important;
}

.category-tile.active .category-title {
    color: #CFAE6D !important;
}

/* =====================================================
   CATEGORY ARROW - Ok Isareti
   ===================================================== */
.category-arrow {
    font-size: 22px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 300 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    flex-shrink: 0 !important;
}

.category-tile:hover .category-arrow {
    transform: translateX(4px) !important;
    color: #CFAE6D !important;
}

.category-tile.active .category-arrow {
    color: rgba(207, 174, 109, 0.6) !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .category-grid {
        gap: 8px !important;
    }

    .category-tile {
        height: 56px !important;
        flex: 1 1 100% !important;
        border-radius: 10px !important;
    }

    .category-image {
        width: 56px !important;
    }

    .category-title {
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
    }

    .category-info {
        padding: 0 14px !important;
    }

    .category-arrow {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .category-grid-wrapper {
        padding: 6px 0 12px !important;
    }

    .category-tile {
        height: 52px !important;
    }

    .category-image {
        width: 52px !important;
    }

    .category-title {
        font-size: 13px !important;
    }
}

/* =====================================================
   PULSE ANIMASYONU - Aktif Buton
   ===================================================== */
@keyframes tilePulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
                    0 0 12px rgba(207, 174, 109, 0.08);
    }
    50% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
                    0 0 20px rgba(207, 174, 109, 0.15);
    }
}

.category-tile.active {
    animation: tilePulse 3s ease-in-out infinite !important;
}

.category-tile:hover {
    animation: none !important;
}


/* ===== active/giris_gorseli/mito_giris_gorseli.css ===== */
/* Modal Sign Image Gizleme - MITOBET */
.modal__sign-img,
.modal__sign-img * {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}


/* ===== active/slot_oncesi_css/mito_slot_oncesi.css ===== */
/* ========================================
   MITOBET - SLOT OYUNU ÖNCESİ KAYIT EKRANI CSS
   Renk Paleti: #C7A769 (Bronz/Altın)
   Web ve Mobil Uyumlu
   ======================================== */

/* Frame container'ı oyunun üstüne sabitlenir */
.frame {
    position: relative;
    z-index: 1000 !important;
}

/* Oyun ekranını kapat - Frame aktif değilse */
.frame:not(.active) .frame__cover {
    position: relative;
    z-index: 999;
}

/* Kayıt ekranını (nav + butonlar) öne çıkar ve merkeze al */
.frame__cover:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85) !important;
    opacity: 1 !important;
    z-index: 998 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Nav ve butonları TAM ORTAYA al */
.frame__nav {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1000 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 30px 20px;
    width: calc(100% - 40px);
    max-width: 450px;
}

/* Bakiye dropdown container */
.frame__balance {
    position: relative;
    z-index: 1002 !important;
    background: rgba(199, 167, 105, 0.05);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid rgba(199, 167, 105, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.frame__balance span {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600;
}

/* Dropdown buton stilleri */
.frame-mob__dropdown-btn {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(199, 167, 105, 0.3) !important;
    transition: all 0.3s ease;
}

.frame-mob__dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(199, 167, 105, 0.5) !important;
    transform: translateY(-2px);
}

/* Dropdown menü */
.frame-mob__menu {
    position: absolute !important;
    z-index: 1003 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid rgba(199, 167, 105, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Butonlar container */
.frame__btns {
    position: relative;
    z-index: 1001 !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Kayıt Ol butonu - MITOBET Bronz/Altın */
.frame__btn {
    width: 100% !important;
    height: 56px !important;
    background: linear-gradient(135deg, #C7A769 0%, #A8894D 100%) !important;
    border: none !important;
    color: #1d2735 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(199, 167, 105, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}

.frame__btn:hover {
    background: linear-gradient(135deg, #D4B87A 0%, #C7A769 100%) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(199, 167, 105, 0.6);
    color: #000 !important;
}

/* Demo butonu - Koyu tema uyumlu */
.frame__play {
    width: 100% !important;
    height: 56px !important;
    background: linear-gradient(135deg, rgba(199, 167, 105, 0.15) 0%, rgba(199, 167, 105, 0.08) 100%) !important;
    border: 2px solid rgba(199, 167, 105, 0.4) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.frame__play:hover {
    background: linear-gradient(135deg, rgba(199, 167, 105, 0.25) 0%, rgba(199, 167, 105, 0.15) 100%) !important;
    border-color: rgba(199, 167, 105, 0.6) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(199, 167, 105, 0.4);
}

.frame__play svg {
    width: 28px !important;
    height: 28px !important;
    margin-right: 12px;
}

/* Oyun aktif olduğunda overlay'i kaldır */
.frame__cover.active:before {
    display: none !important;
}

.frame__cover.active .frame__nav,
.frame__cover.active .frame__btns {
    display: none !important;
}

/* ========================================
   MOBİL RESPONSIVE (768px ve altı)
   ======================================== */
@media (max-width: 768px) {
    .frame__nav {
        padding: 25px 20px;
        gap: 18px;
        max-width: 85%;
        width: 85%;
    }
    
    .frame__balance {
        padding: 12px 15px;
        width: 100%;
    }
    
    .frame__balance span {
        font-size: 16px !important;
    }
    
    .frame__btns {
        max-width: 100%;
        padding: 0;
        gap: 12px;
    }
    
    .frame__btn,
    .frame__play {
        height: 50px !important;
        font-size: 14px !important;
    }
    
    .frame__play svg {
        width: 24px !important;
        height: 24px !important;
        margin-right: 10px;
    }
}

/* ========================================
   TABLET (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .frame__nav {
        padding: 25px 20px;
        max-width: 480px;
    }
    
    .frame__btns {
        max-width: 450px;
    }
}

/* ========================================
   DESKTOP (992px ve üstü)
   ======================================== */
@media (min-width: 992px) {
    .frame__nav {
        padding: 40px 30px;
        gap: 25px;
        max-width: 550px;
    }
    
    .frame__btns {
        flex-direction: row;
        max-width: 600px;
        gap: 20px;
    }
    
    .frame__btn,
    .frame__play {
        width: calc(50% - 10px) !important;
    }
}

/* ========================================
   HOVER EFFECTS - GLOW (MITOBET Bronz)
   ======================================== */
.frame__btn:hover {
    animation: mitoGoldGlow 1.5s infinite ease-in-out;
}

.frame__play:hover {
    animation: mitoBronzeGlow 1.5s infinite ease-in-out;
}

@keyframes mitoGoldGlow {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(199, 167, 105, 0.4);
    }
    50% {
        box-shadow: 0 8px 30px rgba(199, 167, 105, 0.7);
    }
}

@keyframes mitoBronzeGlow {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(199, 167, 105, 0.3);
    }
    50% {
        box-shadow: 0 8px 30px rgba(199, 167, 105, 0.5);
    }
}

/* ========================================
   LOADING STATE (Opsiyonel)
   ======================================== */
.frame__btn:active,
.frame__play:active {
    transform: translateY(0) !important;
    transition: transform 0.1s ease;
}

/* ========================================
   INSTRUMENT ICON (Para Birimi İkonu)
   ======================================== */
.instrument-icon-wrapper {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(199, 167, 105, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.instrument-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

/* ========================================
   DİSABLED STATE (Eğer gerekirse)
   ======================================== */
.frame__btn:disabled,
.frame__play:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   DARK/LIGHT THEME SUPPORT
   ======================================== */
[data-bs-theme="light"] .frame__cover:before {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="light"] .frame__balance {
    background: rgba(199, 167, 105, 0.08);
    border-color: rgba(199, 167, 105, 0.3);
}

[data-bs-theme="light"] .frame__balance span {
    color: #1d2735 !important;
}

[data-bs-theme="light"] .frame-mob__dropdown-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1d2735 !important;
}

[data-bs-theme="light"] .frame-mob__menu {
    background: rgba(255, 255, 255, 0.98) !important;
}


/* ===== active/slot_oncesi_css/mito_slot_unavailable.css ===== */
/* ========================================
   MITOBET - SLOT OYUNU MEVCUT DEĞİL EKRANI
   Renk Paleti: #C7A769 (Bronz/Altın)
   Oyun yoksa veya yüklenemiyorsa gösterilir
   ======================================== */

/* Ana unavailable container - Minimal */
.slot__unavailable {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100% !important;
    padding: 0 8px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    background: transparent !important;
}

/* SVG Icon - MITOBET Bronz */
.slot__unavailable svg {
    width: 42px;
    height: 42px;
    fill: #C7A769;
    stroke: none;
    margin-bottom: 12px;
    opacity: 0.9;
}

/* Span (Açıklama metni) - Minimal */
.slot__unavailable span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 120px;
    line-height: 1.4;
    padding: 0 8px;
}

/* ========================================
   FRAME UNAVAILABLE (Alternatif stil)
   ======================================== */
.frame__unavailable {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* SVG Icon - MITOBET Bronz (kırmızı yerine) */
.frame__unavailable svg {
    width: 64px;
    height: 64px;
    stroke: #C7A769;
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.frame__unavailable span {
    font-size: 18px;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 450px;
    line-height: 1.6;
    padding: 0 20px;
}

/* Overlay background - MITOBET Bronz */
.frame__unavailable:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(199, 167, 105, 0.1) 0%, transparent 70%);
    z-index: 1;
}

/* ========================================
   MOBİL RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .slot__unavailable {
        height: 100%;
        padding: 15px 10px;
    }
    
    .slot__unavailable svg {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }
    
    .slot__unavailable span {
        font-size: 12px;
        max-width: 110px;
    }
    
    .frame__unavailable svg {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }
    
    .frame__unavailable span {
        font-size: 16px;
        max-width: 90%;
    }
}

/* ========================================
   TABLET (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .slot__unavailable svg {
        width: 40px;
        height: 40px;
    }
    
    .frame__unavailable svg {
        width: 60px;
        height: 60px;
    }
}

/* ========================================
   LIGHT THEME SUPPORT
   ======================================== */
[data-bs-theme="light"] .slot__unavailable svg {
    fill: #A8894D;
    opacity: 0.85;
}

[data-bs-theme="light"] .slot__unavailable span {
    color: rgba(29, 39, 53, 0.85);
}

[data-bs-theme="light"] .frame__unavailable {
    background: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="light"] .frame__unavailable svg {
    stroke: #A8894D;
}

[data-bs-theme="light"] .frame__unavailable span {
    color: #1d2735;
}

[data-bs-theme="light"] .frame__unavailable:before {
    background: radial-gradient(circle at center, rgba(199, 167, 105, 0.15) 0%, transparent 70%);
}

/* ========================================
   HOVER EFFECT (Minimal)
   ======================================== */
.slot__unavailable svg {
    transition: all 0.3s ease;
}

.slot:hover .slot__unavailable svg {
    transform: scale(1.05);
    opacity: 1;
}


/* ===== active/slot_oncesi_css/slot_unavailable.css ===== */
/* ========================================
   SLOT OYUNU MEVCUT DEĞİL EKRANI
   Oyun yoksa veya yüklenemiyorsa gösterilir
   MITOBET THEME
   ======================================== */

/* Ana unavailable container - Minimal */
.slot__unavailable {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100% !important;
    padding: 0 8px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    background: transparent !important;
}

/* SVG Icon - Direkt, kapsama yok */
.slot__unavailable svg {
    width: 42px;
    height: 42px;
    fill: #e6d28b;
    stroke: none;
    margin-bottom: 12px;
    opacity: 0.9;
}

/* Span (Açıklama metni) - Minimal */
.slot__unavailable span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 120px;
    line-height: 1.4;
    padding: 0 8px;
}

/* ========================================
   FRAME UNAVAILABLE (Alternatif stil)
   ======================================== */
.frame__unavailable {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.frame__unavailable svg {
    width: 64px;
    height: 64px;
    stroke: #eb5757;
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.frame__unavailable span {
    font-size: 18px;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 450px;
    line-height: 1.6;
    padding: 0 20px;
}

/* Overlay background */
.frame__unavailable:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(235, 87, 87, 0.1) 0%, transparent 70%);
    z-index: 1;
}

/* ========================================
   MOBİL RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .slot__unavailable {
        height: 100%;
        padding: 15px 10px;
    }
    
    .slot__unavailable svg {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }
    
    .slot__unavailable span {
        font-size: 12px;
        max-width: 110px;
    }
    
    .frame__unavailable svg {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }
    
    .frame__unavailable span {
        font-size: 16px;
        max-width: 90%;
    }
}

/* ========================================
   TABLET (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .slot__unavailable svg {
        width: 40px;
        height: 40px;
    }
    
    .frame__unavailable svg {
        width: 60px;
        height: 60px;
    }
}

/* ========================================
   LIGHT THEME SUPPORT
   ======================================== */
[data-bs-theme="light"] .slot__unavailable svg {
    fill: #c9a961;
    opacity: 0.85;
}

[data-bs-theme="light"] .slot__unavailable span {
    color: rgba(29, 39, 53, 0.85);
}

[data-bs-theme="light"] .frame__unavailable {
    background: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="light"] .frame__unavailable span {
    color: #1d2735;
}

/* ========================================
   HOVER EFFECT (Minimal)
   ======================================== */
.slot__unavailable svg {
    transition: all 0.3s ease;
}

.slot:hover .slot__unavailable svg {
    transform: scale(1.05);
    opacity: 1;
}


/* ===== active/yatirim_uyari_sistemi/yatirim_uyari.css ===== */
/* =====================================================
   MITOBET - Yatırım Uyarı Sistemi CSS
   Ana Renk: #CFAE6D (Altın/Bej)
   ===================================================== */

/* CSS Variables - Mito Gold */
:root {
    --mito-gold: #CFAE6D;
    --mito-gold-rgb: 207, 174, 109;
    --mito-gold-light: #e9c37a;
    --mito-gold-dark: #b8973d;
}

/* Form Note Error - Mito Güncelleme */
#wallet-modal .form__note.error {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 40px !important;
    margin-top: 20px !important;
    border: 1px solid #CFAE6D !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    background-color: transparent !important;
    color: var(--tf-tc) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-transform: none !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    text-align: left !important;
    cursor: pointer !important;
}

#wallet-modal .form__note.error::before {
    content: "!" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    background-color: #CFAE6D !important;
    color: #000000 !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 20px !important;
    font-weight: bold !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    animation: mitoPulse 2s infinite !important;
}

#wallet-modal .form__note.error:hover {
    background-color: rgba(207, 174, 109, 0.1) !important;
    color: #CFAE6D !important;
}

/* Yeni Sabit Uyarı Kutusu - MITO GOLD AGRESIF */
.mito-warning-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 40px !important;
    margin: 15px 0 !important;
    border: 2px solid #CFAE6D !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background-color: rgba(207, 174, 109, 0.08) !important;
    color: var(--tf-tc, #FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    box-shadow: 0 0 15px rgba(207, 174, 109, 0.4) !important;
    animation: mitoBorderBlink 2s infinite, mitoInitialShake 0.8s ease-out !important;
}

.mito-warning-container::before {
    content: "⚠" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
    margin-top: 1px !important;
    background-color: #CFAE6D !important;
    color: #000000 !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 24px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    animation: mitoIconPulse 1.5s infinite, mitoIconGlow 2s infinite !important;
    box-shadow: 0 0 10px rgba(207, 174, 109, 0.6) !important;
}

/* MITO GOLD ANIMASYONLAR */
@keyframes mitoPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes mitoBorderBlink {
    0%, 50% {
        border-color: #CFAE6D;
        box-shadow: 0 0 15px rgba(207, 174, 109, 0.4);
    }
    25%, 75% {
        border-color: #e9c37a;
        box-shadow: 0 0 20px rgba(233, 195, 122, 0.6);
    }
}

@keyframes mitoInitialShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

@keyframes mitoIconPulse {
    0%, 100% { 
        transform: scale(1); 
        background-color: #CFAE6D;
    }
    50% { 
        transform: scale(1.2); 
        background-color: #e9c37a;
    }
}

@keyframes mitoIconGlow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(207, 174, 109, 0.6);
    }
    50% { 
        box-shadow: 0 0 20px rgba(233, 195, 122, 0.8);
    }
}

.mito-warning-container:hover {
    background-color: rgba(207, 174, 109, 0.15) !important;
    color: #CFAE6D !important;
    box-shadow: 0 0 25px rgba(207, 174, 109, 0.7) !important;
    transform: scale(1.02) !important;
}

.mito-warning-text {
    display: block;
    line-height: 1.5;
    text-align: left;
    position: relative;
    z-index: 2;
    font-style: normal !important;
    flex: 1;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.mito-warning-text strong {
    color: #CFAE6D;
    font-weight: 700;
    font-style: normal !important;
}

/* İkinci sabit uyarı kutusu - INFO */
.mito-info-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 40px !important;
    margin: 10px 0 !important;
    border: 1px solid #CFAE6D !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background-color: transparent !important;
    color: var(--tf-tc, #FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-transform: none !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: default !important;
}

.mito-info-container::before {
    content: "i" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    margin-top: 2px !important;
    background-color: #CFAE6D !important;
    color: #000000 !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 20px !important;
    font-weight: bold !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

.mito-info-container:hover {
    background-color: rgba(207, 174, 109, 0.1) !important;
    border-color: #e9c37a !important;
}

.mito-info-text {
    display: block;
    line-height: 1.5;
    text-align: left;
    position: relative;
    z-index: 2;
    font-style: normal !important;
    flex: 1;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.mito-info-text strong {
    color: #CFAE6D;
    font-weight: 600;
    font-style: normal !important;
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
    #wallet-modal .form__note.error,
    .mito-warning-container,
    .mito-info-container {
        padding: 12px !important;
        font-size: 12px;
        margin: 12px 0;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
    
    .mito-warning-text,
    .mito-info-text {
        line-height: 1.5;
        font-style: normal !important;
        padding-top: 0px;
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        display: block !important;
    }
    
    #wallet-modal .form__note.error::before,
    .mito-warning-container::before,
    .mito-info-container::before {
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        font-size: 9px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        flex-shrink: 0 !important;
        min-width: 16px !important;
    }
}

/* ===== active/CSS/stories_override.css ===== */
/* =====================================================
   MITOBET - Custom Stories (no library)
   ===================================================== */

/* ---------- Thumbnail row ---------- */
#mito-stories {
    display: none;
    width: 100%;
    padding: 6px 0 4px;
    background: transparent;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    #mito-stories {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 10px 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}

#mito-stories::-webkit-scrollbar {
    display: none;
}

.ms-avatar {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid #cfae6d;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.ms-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* ---------- Modal overlay ---------- */
#ms-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

#ms-modal.ms-open {
    opacity: 1;
}

/* ---------- Progress bar ---------- */
.ms-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 10;
}

.ms-bar {
    height: 100%;
    width: 0%;
    background: #cfae6d;
}

/* ---------- Story image ---------- */
.ms-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* ---------- Tap zones ---------- */
.ms-tap-left,
.ms-tap-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 35%;
    z-index: 5;
    cursor: pointer;
}

.ms-tap-left  { left: 0; }
.ms-tap-right { right: 0; }

/* ---------- Close button ---------- */
.ms-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(207, 174, 109, 0.5);
    background: rgba(0, 0, 0, 0.7);
    color: #cfae6d;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Link button ---------- */
@keyframes msPulse {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1);   box-shadow: 0 4px 20px rgba(207, 174, 109, 0.35); }
    50%       { transform: translateX(-50%) translateY(-4px) scale(1.04); box-shadow: 0 8px 28px rgba(207, 174, 109, 0.55); }
}

.ms-link {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: linear-gradient(135deg, #d4b96e 0%, #f5d98a 50%, #cfae6d 100%);
    color: #181818;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.3px;
    border-radius: 28px;
    padding: 12px 28px 12px 24px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    animation: msPulse 2.2s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.ms-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* ===== active/CSS/section_titles.css ===== */
/* =====================================================
   MITOBET - Section Titles & Big Wins
   ===================================================== */

/* ——— Section Başlık Wrapper ——— */
#main__content .section__title-wrap,
#main__content [class*="title-wrap"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 12px !important;
    border-left: 3px solid #CFAE6D !important;
    margin-bottom: 14px !important;
}

/* ——— Section Başlık Text ——— */
#main__content h2.section__title,
#main__content .section__title,
body h2.section__title {
    color: #CFAE6D !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ——— Başlık İkonu (img & svg) ——— */
#main__content .section__title-wrap img.svg-icon,
#main__content .section__title-wrap svg.svg-icon,
#main__content [class*="title-wrap"] img.svg-icon,
#main__content [class*="title-wrap"] svg.svg-icon {
    filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(600%) hue-rotate(5deg) !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* ——— SON BÜYÜK KAZANÇLAR Wrapper ——— */
#big-wins-wrapper {
    background: rgba(10, 10, 14, 0.6) !important;
    border: 1px solid rgba(207, 174, 109, 0.15) !important;
    border-radius: 14px !important;
    padding: 20px 0 18px !important;
    margin: 0 0 20px !important;
}

/* ——— Kush Kartları ——— */
#big-wins-wrapper .kush--carousel {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(207, 174, 109, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    position: relative !important;
}

#big-wins-wrapper .kush--carousel:hover {
    border-color: rgba(207, 174, 109, 0.35) !important;
    box-shadow: 0 4px 20px rgba(207, 174, 109, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* ——— Resimler — overlay YOK ——— */
#big-wins-wrapper .kush--carousel img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    filter: none !important;
}

/* ——— Kazanç Miktarı ——— */
#big-wins-wrapper .kush--carousel [class*="amount"],
#big-wins-wrapper .kush--carousel [class*="price"],
#big-wins-wrapper .kush--carousel [class*="win"],
#big-wins-wrapper .kush--carousel span,
#big-wins-wrapper .kush--carousel p {
    color: #CFAE6D !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ——— Mobil ——— */
@media (max-width: 767px) {
    #main__content .section__title-wrap,
    #main__content [class*="title-wrap"] {
        padding-left: 10px !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    #main__content h2.section__title,
    #main__content .section__title,
    body h2.section__title {
        font-size: 12px !important;
        letter-spacing: 1.4px !important;
    }

    #main__content .section__title-wrap img.svg-icon,
    #main__content .section__title-wrap svg.svg-icon,
    #main__content [class*="title-wrap"] img.svg-icon,
    #main__content [class*="title-wrap"] svg.svg-icon {
        width: 15px !important;
        height: 15px !important;
    }

    #big-wins-wrapper {
        border-radius: 10px !important;
        padding: 14px 0 12px !important;
        margin: 0 0 14px !important;
    }

    #big-wins-wrapper .kush--carousel {
        border-radius: 8px !important;
    }
}


/* ===== active/CSS/sportsbook_override.css ===== */
/* ===== Sportsbook Gold/Dark Theme Override ===== */
/* Overrides ebetlab sportsbook blue (hue 217) CSS custom properties
   with gold (hue 43) / dark background theme.
   All utility classes (bg-primary-*, text-primary-*, border-primary-* etc.)
   reference these vars via hsl(var(--primary-*)), so overriding the vars
   is sufficient to retheme the entire sportsbook component. */

:root {
    --primary: 43 100% 70% !important;
    --primary-foreground: 35 50% 15% !important;
    --primary-50: 43 100% 95% !important;
    --primary-100: 43 100% 90% !important;
    --primary-200: 43 100% 80% !important;
    --primary-300: 43 100% 70% !important;
    --primary-400: 43 100% 60% !important;
    --primary-500: 43 100% 50% !important;
    --primary-600: 43 100% 40% !important;
    --primary-700: 43 100% 30% !important;
    --primary-800: 43 100% 20% !important;
    --primary-900: 43 100% 10% !important;
    --primary-950: 43 100% 5% !important;

    --secondary: 43 100% 70% !important;
    --secondary-foreground: 35 50% 15% !important;
    --secondary-50: 43 100% 95% !important;
    --secondary-100: 43 100% 90% !important;
    --secondary-200: 43 100% 80% !important;
    --secondary-300: 43 100% 70% !important;
    --secondary-400: 43 100% 60% !important;
    --secondary-500: 43 100% 50% !important;
    --secondary-600: 43 100% 40% !important;
    --secondary-700: 43 100% 30% !important;
    --secondary-800: 43 100% 20% !important;
    --secondary-900: 43 100% 10% !important;
    --secondary-950: 43 100% 5% !important;

    --tertiary: 220 20% 6% !important;
    --tertiary-foreground: 0 0% 100% !important;
    --tertiary-50: 220 20% 5% !important;
    --tertiary-100: 220 20% 10% !important;
    --tertiary-200: 220 20% 16% !important;
    --tertiary-300: 220 20% 24% !important;
    --tertiary-400: 220 20% 32% !important;
    --tertiary-500: 220 20% 40% !important;
    --tertiary-600: 220 20% 50% !important;
    --tertiary-700: 220 20% 60% !important;
    --tertiary-800: 220 20% 70% !important;
    --tertiary-900: 220 20% 80% !important;
    --tertiary-950: 220 20% 90% !important;

    --body-bg: hsl(220 20% 6% / 1) !important;
}

.dark {
    --primary: 43 100% 70% !important;
    --primary-foreground: 35 50% 15% !important;
    --primary-50: 43 100% 5% !important;
    --primary-100: 43 100% 10% !important;
    --primary-200: 43 100% 20% !important;
    --primary-300: 43 100% 30% !important;
    --primary-400: 43 100% 40% !important;
    --primary-500: 43 100% 50% !important;
    --primary-600: 43 100% 60% !important;
    --primary-700: 43 100% 70% !important;
    --primary-800: 43 100% 80% !important;
    --primary-900: 43 100% 90% !important;
    --primary-950: 43 100% 95% !important;

    --secondary: 43 100% 70% !important;
    --secondary-foreground: 35 50% 15% !important;
    --secondary-50: 43 100% 5% !important;
    --secondary-100: 43 100% 10% !important;
    --secondary-200: 43 100% 20% !important;
    --secondary-300: 43 100% 30% !important;
    --secondary-400: 43 100% 40% !important;
    --secondary-500: 43 100% 50% !important;
    --secondary-600: 43 100% 60% !important;
    --secondary-700: 43 100% 70% !important;
    --secondary-800: 43 100% 80% !important;
    --secondary-900: 43 100% 90% !important;
    --secondary-950: 43 100% 95% !important;

    --tertiary: 220 20% 6% !important;
    --tertiary-foreground: 0 0% 100% !important;
    --tertiary-50: 220 20% 5% !important;
    --tertiary-100: 220 20% 10% !important;
    --tertiary-200: 220 20% 16% !important;
    --tertiary-300: 220 20% 24% !important;
    --tertiary-400: 220 20% 32% !important;
    --tertiary-500: 220 20% 40% !important;
    --tertiary-600: 220 20% 50% !important;
    --tertiary-700: 220 20% 60% !important;
    --tertiary-800: 220 20% 70% !important;
    --tertiary-900: 220 20% 80% !important;
    --tertiary-950: 220 20% 90% !important;

    --body-bg: hsl(220 20% 6% / 1) !important;
}

body {
    background-color: hsl(220 20% 6%) !important;
}


/* ===== active/CSS/EK ===== */
.blog__cover {
    width: 100%;
    margin-bottom: 35px;
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
}
.blog__cover img {
    border-radius: 20px;
}
.ranking {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: 1rem;
}

.ranking::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -120px;
  right: -120px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  transform: rotate(-20deg);
  transition: all 0.4s;
  z-index: 0;
}

.ranking:hover::after {
  bottom: -100px;
  right: -100px;
  transform: rotate(-10deg);
  opacity: 0.2;
}

.ranking p {
  transition: all 0.4s;
}
.ranking:hover p {
  color: #babbc4;
}

.ranking > * {
  position: relative;
  z-index: 1;
}

 .ranking.state-slug-bronze::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/S9R0WMBy3Xj3L7gHvN2qRGsFvlgeN4Zk58p5xUy5.png');
}
.ranking.state-slug-silver::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/N0gyD69TIhliLgyGKqzdV7IaI2j24rYXZPbMcgdp.png');
}
.ranking.state-slug-gold::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/xrUfLPCn624fz5KZiqXwM8907KRImChpyWI6wZOW.png');
}
.ranking.state-slug-platin::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/yrYRp5ZRMNEajEWGOCZprkahzCZxwXEJzRRDJKGJ.png');
}
.ranking.state-slug-emerald::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/fgQsFqNvxHLksMGFuRsXnLFUyZ4F4VDfAr4VXyLx.png');
}
.ranking.state-slug-diamond::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/JHhS0WQB6j2wvGHdOIjHKMrj1XF145NXe0J4aTmO.png');
}
.ranking.state-slug-immortal::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/VqYcst7uhqhqKJ4jHCqcO33PhDfU4earS6hJnKk8.png');
}
.ranking.state-slug-legend::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/pLPYSwEYRq6n74SvhwQ0xGM6NT4kc3P0rC6lLIZi.png');
}
.ranking.state-slug-endless::after {
  background-image: url('https://vendor-provider.fra1.digitaloceanspaces.com/ebetlab/vip-states/kvlkxlvkasdqGVADVQE/6crYTj8mlvwInkRTbgryRny4OuwGhUqbx99OMmNo.png');
}

/* Promosyonlar sayfasında tarih/meta ve text bilgisini gizle */
.post__meta,
.post__text {
    display: none !important;
}


/* ===== active/CSS/Kingo ===== */
/* Sadece mini-slider-wrapper ID'li alanı etkileyen stiller */
#mini-slider-wrapper .swiper {
    margin: 0 !important;
    padding: 0 !important;
}

#mini-slider-wrapper .swiper-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
}

#mini-slider-wrapper .swiper-slide {
    width: calc(33.333% - 8px) !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    min-width: 350px !important;
    max-width: 450px !important;
}

#mini-slider-wrapper .mini-swiper {
    width: calc(33.333% - 8px) !important;
    margin-right: 12px !important;
    min-width: 350px !important;
    max-width: 450px !important;
}

#mini-slider-wrapper .slide-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
}

#mini-slider-wrapper .responsive-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

#mini-slider-wrapper .swiper-button-prev,
#mini-slider-wrapper .swiper-button-next {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Eski hover efektini disable et */
#mini-slider-wrapper .slide-content.cursor-pointer:hover {
    transform: none !important;
    transition: none !important;
}

/* Modern şık hover efekti */
#mini-slider-wrapper .swiper-slide {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

#mini-slider-wrapper .swiper-slide:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
    z-index: 100 !important;
}

#mini-slider-wrapper .swiper-slide .responsive-image {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    filter: brightness(1) !important;
}

#mini-slider-wrapper .swiper-slide:hover .responsive-image {
    filter: brightness(1.1) !important;
}

/* Hover'da hafif glow efekti */
#mini-slider-wrapper .swiper-slide:hover::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Responsive tasarım */
@media (max-width: 1200px) {
    #mini-slider-wrapper .swiper-slide,
    #mini-slider-wrapper .mini-swiper {
        min-width: 300px !important;
        max-width: 380px !important;
    }
}

@media (max-width: 768px) {
    #mini-slider-wrapper .swiper-slide,
    #mini-slider-wrapper .mini-swiper {
        width: calc(50% - 6px) !important;
        min-width: 250px !important;
        max-width: 320px !important;
        margin-right: 8px !important;
    }
}

@media (max-width: 480px) {
    #mini-slider-wrapper .swiper-slide,
    #mini-slider-wrapper .mini-swiper {
        width: calc(100% - 4px) !important;
        min-width: 200px !important;
        max-width: 100% !important;
        margin-right: 4px !important;
    }
}

/* Main Slider Container İçinde Optimizasyon */

#main-slider .swiper-wrapper {
  transform: translate3d(0px, 0px, 0px) !important;
}

/* ===== JACKPOT ALANI DÜZELTİLMİŞ TASARIM ===== */

#jackpots-container {
    padding: 1rem 0 0 0;
    margin: 0;
}

#jackpots-container .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

#jackpots-container .swiper {
    overflow: visible;
    padding: 0;
    margin: 0;
}

#jackpots-container .swiper-wrapper {
    gap: 0.5rem;
    align-items: stretch;
    padding: 0 1rem;
    margin: 0;
}

#jackpots-container .swiper-slide {
    width: 460px !important;
    margin-right: 0 !important;
    height: auto;
    flex-shrink: 0;
}

/* Jackpot Kartı Düzeltilmiş Stili */
#jackpots-container .jackpot {
    padding: 2.5rem 2rem;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 16px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#jackpots-container .jackpot:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: #9A6A0C;
}

/* Logo Wrapper Düzeltilmiş Stilleri */
#jackpots-container .jackpot__logo-wrapper {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    flex-shrink: 0;
}

#jackpots-container .jackpot__logo-wrapper::before {
    content: 'JACKPOT';
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #9A6A0C;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#jackpots-container .jackpot__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    transition: all 0.3s ease;
}

#jackpots-container .jackpot:hover .jackpot__logo {
    transform: scale(1.05);
}


/* Çift Değer Alanı Düzeltilmiş */
#jackpots-container .jackpot__double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-shrink: 0;
}

/* Responsive Düzeltilmiş Tasarım */
@media (max-width: 1400px) {
    #jackpots-container .swiper-slide {
        width: 380px !important;
    }
    
    #jackpots-container .jackpot {
        padding: 2.25rem 1.75rem;
    }
}

@media (max-width: 1200px) {
    #jackpots-container .swiper-slide {
        width: 360px !important;
    }
    
    #jackpots-container .jackpot {
        padding: 2rem 1.5rem;
    }
    
    #jackpots-container .jackpot__value--grand-gold span,
    #jackpots-container .jackpot__value--grand-7 span,
    #jackpots-container .jackpot__value--zebra span {
        font-size: 1.3rem;
        padding: 1.375rem 1.875rem;
    }
}

@media (max-width: 992px) {
    #jackpots-container .swiper-slide {
        width: 340px !important;
    }
    
    #jackpots-container .jackpot {
        padding: 1.875rem 1.375rem;
    }
    
    #jackpots-container .swiper-wrapper {
        gap: 1.5rem;
        padding: 0 0.75rem;
    }
}

@media (max-width: 768px) {
    #jackpots-container .swiper-slide {
        width: 320px !important;
    }
    
    #jackpots-container .jackpot {
        padding: 1.75rem 1.25rem;
    }
    
    #jackpots-container .jackpot__value--grand-gold span,
    #jackpots-container .jackpot__value--grand-7 span,
    #jackpots-container .jackpot__value--zebra span {
        font-size: 1.2rem;
        padding: 1.25rem 1.75rem;
    }
    
    #jackpots-container .jackpot__value span {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
    
    #jackpots-container .swiper-wrapper {
        gap: 1.25rem;
        padding: 0 0.5rem;
    }
}

@media (max-width: 576px) {
    #jackpots-container .swiper-slide {
        width: 300px !important;
    }
    
    #jackpots-container .jackpot {
        padding: 1.5rem 1.125rem;
    }
    
    #jackpots-container .jackpot__double {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    #jackpots-container .jackpot__logo {
        width: 56px;
        height: 56px;
    }
    
    #jackpots-container .jackpot__logo-wrapper::before {
        font-size: 0.75rem;
        padding: 0.375rem 1rem;
        top: -0.875rem;
    }
    
    #jackpots-container .swiper-wrapper {
        gap: 1rem;
        padding: 0 0.375rem;
    }
}

@media (max-width: 480px) {
    #jackpots-container .swiper-slide {
        width: 415px !important;
    }
    
    #jackpots-container .jackpot {
        padding: 1.375rem 1rem;
    }
    
    #jackpots-container .container {
        padding: 0;
    }
    
    #jackpots-container .swiper-wrapper {
        gap: 0.875rem;
        padding: 0 0.25rem;
    }
}

#jackpots-container .jackpot:hover .jackpot__value--grand-gold span,
#jackpots-container .jackpot:hover .jackpot__value--grand-7 span,
#jackpots-container .jackpot:hover .jackpot__value--zebra span {
    transform: scale(1.02);
}
@media (max-width: 768px) {
    .section {
        padding-top: 0px !important;
    }
}

/* ===== active/CSS/Logo ===== */
/* Logo - 600x200 PNG için düzeltilmiş */
.sidebar__logo {
    display: block;
    width: 150px !important;
    height: 50px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

@media (min-width: 1200px) {
    .sidebar__logo {
        width: 160px !important;
        height: 53px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

/* Mobil için */
@media (max-width: 1199px) {
    .sidebar__logo {
        width: 120px !important;
        height: 40px !important;
    }
}

.slot__pos,
.slot__title--no {
    visibility: hidden;
    display: none;
}

.slot__cover--no-layer img {
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

/* ===== active/CSS/sidebar ===== */

.sidebar__social-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 12px;
    margin: 0;
    justify-content: flex-start;
    # max-width: 240px; 
    flex-direction: row;
}

.sidebar__social-container li {
    width: calc(25% - 6px); 
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar__social-container li a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--tf-bg2);
    border-radius: 10px;
    padding: 10px;
    transition: all 0.2s ease;
  cursor:pointer;
}

.sidebar__social-container li a:hover ,
.instrument-icon-wrapper:hover svg {

    transform: scale(1.05);
    background-color: #333;
}

.sidebar__social-container li svg {
    width: 100%;
    height: auto;
    max-width: 28px;
    margin: auto;
    display: block;
}
.mobile-app-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #ff143e;
  background-color: #06101d;
  border: 1px solid #ff143e;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 20, 62, 0.2);
  font-family: monospace !important;
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInMobileApp 0.4s ease-out forwards;
  position: relative;
  z-index: 1;
}

.mobile-app-button:hover {
  background-color: #ff143e;
  color: #fff;
  transform: scale(1.57);
  box-shadow:
    0 0 12px rgba(255, 20, 62, 0.6),
    0 0 20px rgba(255, 20, 62, 0.4),
    0 0 30px rgba(255, 20, 62, 0.2);
  z-index: 2;
}

.mobile-app-icon {
  width: 22px;
  height: 22px;
  color: inherit;
  transition: transform 0.3s ease;
  transform: rotate(-10deg);
}

.mobile-app-button:hover .mobile-app-icon {
  transform: rotate(20deg);
}

@keyframes fadeInMobileApp {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Header butonu sadece desktopta görünür */
#mobile-app-btn {
  display: block;
}

@media screen and (max-width: 1024px) {
  #mobile-app-btn {
    display: none !important;
  }
}

/* Footer butonu sadece mobilde görünür */
#mobile-app-btn-footer {
  display: none !important;
}

@media screen and (max-width: 1024px) {
  #mobile-app-btn-footer {
    display: block !important;
    margin: 12px auto 0 auto !important;
  }
}

@media screen and (max-width: 768px) {
  #mobile-app-btn-footer {
    width: 162px !important;
    height: 50px !important;
  }
}


/* ===== active/CSS/featured_matches.css ===== */
/* =====================================================
   MITOBET - One Cikan Etkinlikler
   /sportsbook .popular-events-widget DOM'undan iframe ile parse edilen
   maclari ana sayfada altin temali kartlarda gosterir.
   ===================================================== */

#mito-featured {
    margin: 16px auto;
    color: #e8e8ee;
    max-width: 1400px;
    padding: 0 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#mito-featured .mito-feat__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 14px;
}

#mito-featured .mito-feat__bar {
    width: 3px;
    height: 16px;
    background: #CFAE6D;
    border-radius: 2px;
}

#mito-featured .mito-feat__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #CFAE6D;
    text-transform: uppercase;
    margin: 0;
}

#mito-featured .mito-feat__count {
    font-size: 11px;
    font-weight: 500;
    color: #7a8099;
    margin-left: auto;
}

/* Grid */
#mito-featured .mito-feat__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 1199px) {
    #mito-featured .mito-feat__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    #mito-featured .mito-feat__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
    #mito-featured .mito-feat__grid { grid-template-columns: 1fr; }
}

/* Kart */
.mito-feat__card {
    background: linear-gradient(180deg, #1a1f2e 0%, #141826 100%);
    border: 1px solid rgba(207, 174, 109, 0.18);
    border-radius: 10px;
    padding: 12px;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mito-feat__card:hover {
    border-color: rgba(207, 174, 109, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.mito-feat__sport-tag {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px;
    font-weight: 500;
    color: #7a8099;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Takim satiri */
.mito-feat__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 12px;
}

.mito-feat__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    min-width: 0;
}

.mito-feat__jersey {
    width: 26px;
    height: 26px;
    display: inline-block;
}

.mito-feat__jersey svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mito-feat__name {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mito-feat__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    line-height: 1.2;
    padding: 0 4px;
}

.mito-feat__time .d {
    color: #9aa0b4;
    font-weight: 500;
}

.mito-feat__time .t {
    color: #CFAE6D;
    font-weight: 600;
}

/* Bahis tipi etiketi */
.mito-feat__bet-type {
    font-size: 10px;
    font-weight: 500;
    color: #7a8099;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    padding: 0 2px;
}

/* Oranlar */
.mito-feat__odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.mito-feat__odds.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mito-feat__odd {
    background: #0f1421;
    border: 1px solid rgba(207, 174, 109, 0.15);
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mito-feat__odd:hover {
    background: #CFAE6D;
    color: #0a0a14;
    border-color: #CFAE6D;
}

.mito-feat__odd:active {
    transform: scale(0.97);
}

.mito-feat__odd .lbl {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #7a8099;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mito-feat__odd:hover .lbl {
    color: #0a0a14;
}

.mito-feat__odd .val {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.mito-feat__odd:hover .val {
    color: #0a0a14;
}

/* Footer */
.mito-feat__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    color: #7a8099;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mito-feat__foot .more {
    color: #CFAE6D;
    font-weight: 600;
}

/* Skeleton */
.mito-feat__card.is-skeleton {
    cursor: default;
    pointer-events: none;
}

.mito-feat__card.is-skeleton:hover {
    border-color: rgba(207, 174, 109, 0.18);
    transform: none;
    box-shadow: none;
}

.mito-feat__skeleton-line,
.mito-feat__skeleton-box {
    background: linear-gradient(90deg, #1f2436 0%, #2a3047 50%, #1f2436 100%);
    background-size: 200% 100%;
    animation: mitoFeatShimmer 1.4s linear infinite;
    border-radius: 4px;
}

.mito-feat__skeleton-line {
    height: 10px;
    margin: 6px 0;
}

.mito-feat__skeleton-box {
    height: 32px;
    margin: 4px 0;
}

@keyframes mitoFeatShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hata durumu */
#mito-featured .mito-feat__error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    color: #7a8099;
    font-size: 13px;
    background: linear-gradient(180deg, #1a1f2e 0%, #141826 100%);
    border: 1px dashed rgba(207, 174, 109, 0.2);
    border-radius: 10px;
}

#mito-featured .mito-feat__error strong {
    color: #CFAE6D;
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}


/* ===== active/CSS/v2css.css ===== */
/* =========================================================
   MITOBET v2 — flat black + gold theme
   Source: gambaddcss.css (selector mapping)
   - Background: flat #000000
   - Border / accent: #d8aa50 (gold)
   - Hover / highlight: #e9c37a
   - Text: #fff8e7 (cream) / #CFAE6D (muted)
   NOTE: Asset URL'leri (logo, hero) korundu — kullanıcı sonradan güncelleyecek.
   ========================================================= */
:root {
    /* =========================================================
       THEME CONTRACT (GLOBAL)
       Change values in /assets/css/themes/<domain>.css
       ========================================================= */

    /* Logo */
    --header-footer-logo: url("https://assetsv2.mrgambcommunity.com/Logo/Logo.png");
    --homepage-entrance-bg-image: url("https://assetsv2.mrgambcommunity.com/Arkaplan/3840x840.jpg");

    /* CSS Override */
    --lineartooltipbg: linear-gradient(#0A0A0F, #000000);


    /* Brand */
    --brand-primary: #d8aa50;
    --brand-primary-rgb: 216, 170, 80;
    --brand-primary-contrast: #ffffff;
    --brand-secondary: #8b6424;
    --brand-secondary-rgb: 139, 100, 36;

    --accent: #d8aa50;
    --accent-rgb: 216, 170, 80;
    --active: #8b6424;

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

    /* Surfaces */
    --surface-bg: #000000;
    --surface-bg-rgb: 0, 0, 0;
    --surface-1: #0A0A0F;
    --surface-2: #0A0A0F;
    --surface-3: #1a1a1a;
    --surface-4: #1f1f1f;

    --surface-card: var(--surface-2);
    --surface-modal: #0A0A0F;
    --surface-elevated: #0A0A0F;

    --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 dark palette aliases */
    --legacy-bg-1: #000000;
    --legacy-bg-2: #0A0A0F;
    --legacy-bg-3: #1a1a1a;
    --legacy-text-muted: #CFAE6D;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.88);
    --text-muted: rgba(255, 255, 255, 0.72);
    --text-soft: rgba(255, 255, 255, 0.56);
    --text-disabled: rgba(255, 255, 255, 0.38);
    --text-on-accent: var(--brand-primary-contrast);

    /* States */
    --success: #13e398;
    --success-rgb: 19, 227, 152;
    --warning: #efb025;
    --warning-rgb: 239, 176, 37;
    --danger: #ff5365;
    --danger-rgb: 255, 83, 101;
    --info: #44a7ff;
    --info-rgb: 68, 167, 255;

    --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 scale */
    --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 scale */
    --border-thin: 1px;
    --border-medium: 2px;

    /* Shadow scale */
    --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);

    /* Gradients */
    --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(0, 0, 0, 0.9), rgba(0, 0, 0, 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(to right, #8b6424, #d8aa50, #e9c37a, #d8aa50, #8b6424);

    /* Legacy variables currently consumed by existing CSS */
    --panel-top: #0A0A0F;
    --panel-bottom: #000000;

    --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.05), transparent 55%), linear-gradient(180deg, rgba(10, 10, 15, 0.94), rgba(0, 0, 0, 0.96));
    --linearbgreversed: radial-gradient(900px 220px at 85% 0%, rgba(255, 255, 255, 0.05), transparent 55%), linear-gradient(180deg, rgba(10, 10, 15, 0.94), rgba(0, 0, 0, 0.96));

    /* Progress / indicators */
    --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%
    );

    /* Inputs */
    --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);

    /* Buttons */
    --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 */
    --header-register-bg: var(--btn-primary-bg);
    --header-register-color: var(--btn-primary-color);
    --wallet-btn-bg-start: #0A0A0F;
    --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);

    /* Tabs / chips / pills */
    --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);

    /* Cards / modals */
    --card-bg: var(--gradient-surface);
    --card-border: var(--surface-border-soft);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);

    --modal-bg: var(--modalbg);
    --modal-border: var(--surface-border-soft);
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-xl);

    /* Wallet */
    --wallet-deposit-bg: var(--accent);
    --wallet-withdraw-gradient: var(--gradient-withdraw);
    --wallet-footer-btn-bg: var(--legacy-bg-3);
    --wallet-footer-btn-color: var(--text-primary);

    /* Game opener */
    --game-opener-border: var(--accent);
    --game-opener-overlay: linear-gradient(0deg, rgba(24, 24, 31, 0.84) 0%, rgba(24, 24, 31, 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 controls */
    --slider-nav-bg: rgba(10, 10, 15, 0.82);
    --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);

    /* Typography tokens */
    --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 (global) */
    --top-search-form-border: 1px solid rgba(255,255,255,0.10);
    --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: #CFAE6D;
    --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(0, 0, 0, 0.78);
    --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(10, 10, 15, 0.84), rgba(0, 0, 0, 0.86));
    --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: #fff8e7;
    --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);

    /* Lowbar (mobile dock) */
    --lb-bg: #000000;
    --lb-stroke: rgba(255, 255, 255, 0.1);
    --lb-stroke-2: rgba(255, 255, 255, 0.06);
    --lb-text: #ffffff;
    --lb-muted: rgba(255, 255, 255, 0.65);
    --lb-active: #8b6424;
    --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: #0A0A0F;
    --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%);
    --lb-chat-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.65));
    --lb-chat-border: rgba(var(--accent-rgb), 0.5);
    --lb-chat-color: #ffffff;
    --lb-chat-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.26), 0 8px 20px rgba(0, 0, 0, 0.28);
    --lb-chat-shadow-hover: 0 14px 28px rgba(var(--accent-rgb), 0.34), 0 10px 24px rgba(0, 0, 0, 0.32);

    /* Sidebar top tabs (casino/sportsbook) */
    /* Set CDN SVG URL here per-domain:
       --sidebar-tab-casino-bg-image: url("https://cdn.example.com/sidebar-casino-bg.svg");
       --sidebar-tab-sportsbook-bg-image: url("https://cdn.example.com/sidebar-sportsbook-bg.svg");
    */
    --sidebar-tab-casino-bg-image: linear-gradient(180deg, rgba(216, 170, 80, 0.85), rgba(0, 0, 0, 0.9));
    --sidebar-tab-sportsbook-bg-image: linear-gradient(180deg, rgba(216, 170, 80, 0.84), rgba(0, 0, 0, 0.92));

    /* Bonus request modal */
    --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 club page */
    --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);

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

    /* Notification dropdown */
    --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(216, 170, 80, 0.16);
    --notif-empty-border: rgba(255, 255, 255, 0.08);
    --notif-item-bg: rgba(216, 170, 80, 0.14);
    --notif-item-bg-hover: rgba(216, 170, 80, 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);

    /* Wallet settings modal */
    --wgs-text: rgba(255, 255, 255, 0.92);
    --wgs-muted: rgba(255, 255, 255, 0.55);
    --wgs-panel-bg: rgba(20, 24, 36, 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(40, 30, 5, 0.92), rgba(var(--success-rgb), 0.45));

    /* Game page + empty states */
    --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, #8b6424, #a78440, #d8aa50, #e9c37a, #e9c37a);
    --game-bets-empty-bg: linear-gradient(145deg, rgba(10, 10, 15, 0.92), rgba(0, 0, 0, 0.88));
    --game-bets-empty-border: rgba(216, 170, 80, 0.34);
    --game-bets-empty-icon-bg: rgba(216, 170, 80, 0.24);
    --game-bets-empty-icon-border: rgba(233, 195, 122, 0.34);
    --game-bets-empty-icon-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --game-bets-empty-title: #fff8e7;
    --game-bets-empty-text: rgba(255, 244, 213, 0.9);
    --game-bets-empty-button-bg: rgba(216, 170, 80, 0.45);
    --game-bets-empty-button-border: rgba(216, 170, 80, 0.5);
    --game-bets-empty-button-hover-bg: rgba(216, 170, 80, 0.58);
    --game-bets-empty-button-hover-border: rgba(233, 195, 122, 0.72);

    /* Favorites empty card */
    --favorites-empty-bg: linear-gradient(140deg, rgba(10, 10, 15, 0.94), rgba(0, 0, 0, 0.96));
    --favorites-empty-border: rgba(216, 170, 80, 0.3);
    --favorites-empty-shadow: inset 0 1px 0 rgba(255, 244, 213, 0.14), 0 18px 42px rgba(0, 0, 0, 0.42);
    --favorites-empty-icon-bg: rgba(216, 170, 80, 0.28);
    --favorites-empty-icon-border: rgba(233, 195, 122, 0.42);
    --favorites-empty-icon-shadow: 0 8px 26px rgba(139, 100, 36, 0.45);
    --favorites-empty-title: #fff8e7;
    --favorites-empty-text: rgba(255, 244, 213, 0.9);
    --favorites-empty-btn-bg: linear-gradient(180deg, #d8aa50 0%, #8b6424 100%);
    --favorites-empty-btn-border: rgba(233, 195, 122, 0.58);
    --favorites-empty-btn-shadow: 0 8px 20px rgba(216, 170, 80, 0.36);

    /* Race / raffle info blocks */
    --event-trophy-bg: rgba(0, 0, 0, 0.18);
    --event-trophy-border: rgba(244, 183, 58, 0.3);
    --event-card-border: rgba(255, 255, 255, 0.08);
    --event-divider: rgba(255, 255, 255, 0.12);
    --event-title: #ffffff;
    --event-label: rgba(255, 244, 213, 0.95);
    --event-muted: rgba(207, 174, 109, 0.95);
    --event-stat-label: rgba(207, 174, 109, 0.92);
    --event-cta-bg: var(--gradient-primary);
    --event-cta-color: var(--brand-primary-contrast);
    --event-progress-track: rgba(10, 10, 15, 0.75);

    /* Withdraw progress */
    --withdraw-progress-bg: rgba(10, 10, 15, 0.72);
    --withdraw-progress-border: rgba(216, 170, 80, 0.3);
    --withdraw-progress-track: rgba(15, 15, 20, 0.85);
    --withdraw-progress-fill: linear-gradient(90deg, #8b6424 0%, #d8aa50 100%);
    --withdraw-progress-stat-bg: rgba(255, 255, 255, 0.04);
    --withdraw-progress-label: #CFAE6D;
    --withdraw-progress-value: #fff8e7;
    --withdraw-progress-note: #CFAE6D;

    /* Challenges page */
    --challenge-filter-bg: rgba(10, 10, 15, 0.55);
    --challenge-filter-border: rgba(216, 170, 80, 0.24);
    --challenge-filter-text: #CFAE6D;
    --challenge-filter-text-hover: #fff8e7;
    --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%, #a78440 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(3, 9, 18, 0.32);
    --challenge-image-fallback: color-mix(in srgb, var(--surface-3) 75%, #8b6424 25%);

    --challenge-title: #fff8e7;
    --challenge-target: rgba(255, 244, 213, 0.88);
    --challenge-label: rgba(207, 174, 109, 0.84);
    --challenge-value: #ffffff;
    --challenge-author: #fff8e7;
    --challenge-claimed-divider: rgba(167, 206, 233, 0.16);

    --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: rgba(255, 255, 255, 0.75);
    --challenge-control-btn-bg: rgba(10, 14, 22, 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%, #d9f3ff 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) 76%, #8b6424 24%) 0%,
        color-mix(in srgb, var(--accent) 84%, #e9c37a 16%) 100%
    );
    --challenge-provider-pill-text: #ffffff;

    /* Tournament buttons */
    --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 header tabs */
    --general-tabs-text: #CFAE6D;
    --general-tabs-active-text: var(--accent);
    --general-tabs-active-font: "Rubik Bold";

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

    --sidebar-bg-open: linear-gradient(180deg, rgba(10, 10, 15, .96) 0%, rgba(0, 0, 0, .98) 100%);
    --sidebar-bg-open-accent: rgba(var(--accent-rgb), .18);
    --sidebar-bg-open-secondary: rgba(255, 255, 255, .08);

    --sidebar-bg-collapsed: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.98) 100%);
    --sidebar-bg-collapsed-accent: rgba(var(--accent-rgb), 0.20);

    --sidebar-bg-active: linear-gradient(180deg, rgba(10, 10, 15, 0.97) 0%, rgba(0, 0, 0, 0.98) 100%);
    --sidebar-bg-active-accent: rgba(var(--accent-rgb), 0.22);
    --sidebar-bg-active-secondary: rgba(255, 255, 255, 0.10);

    --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: rgba(255, 244, 213, 0.95);
    --sidebar-text-muted: rgba(207, 174, 109, 0.84);
    --sidebar-text-soft: #CFAE6D;

    --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, #0A0A0F 0%, color-mix(in srgb, var(--accent) 84%, #8b6424 16%) 100%);

    --sidebar-top-btn-border: rgba(255, 255, 255, 0.07);
    --sidebar-top-btn-bg: linear-gradient(95deg, rgba(15, 15, 20, 0.65) 0%, rgba(10, 10, 15, 0.75) 50%, rgba(0, 0, 0, 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: rgba(255, 244, 213, 0.94);
    --sidebar-top-btn-arrow: rgba(207, 174, 109, 0.88);

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

/* Scoped variables for hero area slider */
.hero-area-slider {
    --hero-accent: var(--accent);
    --hero-accent-rgb: var(--accent-rgb);
    --hero-nav-bg: var(--slider-nav-bg);
    --hero-nav-bg-hover: var(--slider-nav-bg-hover);
    --hero-nav-border: var(--slider-nav-border);
    --hero-pagination-dot: var(--slider-pagination-dot);
    --hero-pagination-dot-active: var(--slider-pagination-dot-active);
}

/* =========================================================
   GLOBAL THEME OVERRIDES FOR LEGACY SELECTORS
   ========================================================= */

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

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);
}
/* Sidebar buttons Hover */
a.sb-top-btn:hover {
    color: #e9c37a !important;
    text-decoration: none !important;
}
/* Primary action buttons */
.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;
}

/* Inputs */
.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;
}

/* Modals and cards */
.modal .modal-dialog .modal-content,
.modal-body,
#betModal .modal-dialog .modal-content .modal-body div.wallet-box,
#walletModal .modal-dialog .modal-content .modal-body div.wallet-box,
.auth-modal .modal-dialog .modal-content .modal-body {
    background: var(--modal-bg) !important;
    border: var(--border-thin) solid var(--modal-border);
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow);
}

/* Wallet buttons */
#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit {
    background-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;
}

/* Tabs and chips */
.simple-bets .nav.nav-pills .nav-link.active,
.simple-bets .nav.nav-pills .nav-link[aria-selected="true"],
.simple-bets ul li button.active,
.simple-bets ul li button[aria-selected="true"] {
    color: 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;
}

/* Animated tab indicator */
.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;
    box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.18) !important;
}

/* Progress bars */
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(216, 170, 80, 0.2);
}

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

/* Game opener buttons */
.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;
}

/* Race carousel CTA */
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 active marker and active links */
.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 background glow */
.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;
}

/* Notification surfaces */
.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);
}

/* Generic utility mappings for old hardcoded palette usage */
.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;
}

/* Background Override */
html,
body,
#app,
main,
main#main,
main#home,
.home-page,
.home-page .container,
.general-container,
.inner-page,
.page-content {
    background-color: #000000 !important;
}

body.dark-mode {
    background-color: #000000 !important;
    background-image:
        radial-gradient(1200px 500px at 20% -10%, rgba(255, 255, 255, .06), transparent 55%),
        linear-gradient(180deg, rgb(56 8 105), rgba(0, 0, 0, 1)) !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: cover !important;
}

body.dark-mode main,
body.dark-mode main#home,
body.dark-mode .home-page,
body.dark-mode .page-content,
body.dark-mode .general-container {
    background: transparent !important;
    background-color: transparent !important;
}
/* Background Override */

/* Game image fix (mobile fit) */
.game-item .game-top figure.game-image img,
.game-item .game-top figure.game-image img.carousel-skel,
.game-item .game-top figure.game-image img.carousel-skel img {
    object-fit: fill !important;
    width: 100% !important;
    height: 100% !important;
}
/* User Menü Background Color */
body.dark-mode .user-menu .user-menus ul li div:hover {
    background-color: rgb(255 255 255 / 16%) !important;
}

/* Network dropdown fix */
.form-item.form-item-select-2 select#network,
.form-item.form-item-select-2 select#network option {
    background-color: #0A0A0F !important;
    color: #ffffff !important;
}

/* İşlemler Sayfası BG */
html body .page div.page-header {
  background-image: var(--homepage-entrance-bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-size: cover !important;
}
/* İşlemler Sayfası BG */


/* Soc Sayfası Hero BG */
body.dark-mode .soc-hero {
  position: relative !important;
  overflow: hidden !important;
  background: var(--homepage-entrance-bg-image) no-repeat left / cover !important;
}
/* Soc Sayfası Hero BG */


/* Soc Hero BG Shine Effect */
body.dark-mode .soc-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 140%;
  pointer-events: none;
  z-index: 2;

  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.05) 35%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.05) 65%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-18deg);
  filter: blur(6px);
  animation: socHeroShine 4.5s ease-in-out infinite;
}

/* Soft glow */
body.dark-mode .soc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12), transparent 20%),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.05), transparent 30%);

  animation: socHeroGlow 3s ease-in-out infinite alternate;
}

@keyframes socHeroShine {
  0% { left: -45%; opacity: 0; }
  10% { opacity: 1; }
  60% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

@keyframes socHeroGlow {
  0% { opacity: 0.4; }
  100% { opacity: 0.9; }
}

/* ph6q Header Background */
body.dark-mode header.ph6q {
  background: var(--homepage-entrance-bg-image) no-repeat left / cover !important;
}
/* ph6q Header Background */

/* ===== WALLET ICON FIX ===== */
/* SVG gizle */
.user-menus li:nth-child(1) .icon svg {
  display: none !important;
}

/* Yeni ikon */
.user-menus li:nth-child(1) .icon {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V9H17C15.8954 9 15 9.89543 15 11V13C15 14.1046 15.8954 15 17 15H21V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7Z' stroke='%238C8DA8' stroke-width='1.5'/%3E%3Cpath d='M17 11H22V13H17C16.4477 13 16 12.5523 16 12C16 11.4477 16.4477 17 11Z' stroke='%238C8DA8' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ===== WALLET ICON END ===== */

/* ===== ACTIVE BUTTON CASINO CLEAN ===== */

.faq__chip.is-active,
.ato-btn.is-active {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important; /* varsa glow'u da siler */
}
/* ===== CASINO END ===== */

/* === CATEGORY IMAGE FIX START === */

div.enterence-box a.simple-category figure.item-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
    border-radius: 4px;
}

div.enterence-box a.simple-category figure.item-image img {
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* === CATEGORY IMAGE FIX END === */


/* === MOBILE HERO BG OVERRIDE START === */

@media (max-width: 768px) {
  .hp-hero.hp-hero--mobile .hp-hero-bg {
    background-image: url('https://assetsv2.mrgambcommunity.com/Arkaplan/mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* === MOBILE HERO BG OVERRIDE END === */

/* === STICKY MENU CENTER FIX START === */

.sticky-menu {
    width: 90% !important;
    max-width: 420px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 16px !important;
}
/* === STICKY MENU CENTER FIX END === */

/* === STICKY MENU LOGO FIX === */
.sticky-menu .menu-item.wallet .logo img {
    border-radius: 6px !important;
    width: 50px !important;
    height: 50px !important;
    box-shadow: none !important;
    margin-bottom: 7px;
}

/*.sticky-menu .menu-item.wallet .text {
  display: none;
}*/
/* === STICKY MENU LOGO FIX END === */

/* === MAIN MENU FIX === */
@media (max-width: 991px) {
    #responsive-menu.responsive-menu.active-menu {
        background: #000000 !important;
    }
}
/* === MAIN MENU FIX END === */

/* === MAIN Home Casino - Sports === */
@media (max-width: 575px) {
    div.cat-carousel div.section-carousel div.owl-carousel a.simple-category div.item-title {
        padding: 4.5px 9px !important;
        background: radial-gradient(520px 300px at 0 0, #d8aa5038, #0000 60%), linear-gradient(#000000fa 0%, #000000fa 100%) !important;
    }
}
/* Oynamaya Başla Text */

/*div.section-header div.section-title {
    display: none;
}*/
/* Oynamaya Başla Text */
/* === MAIN Home Casino - Sports END === */
/* === MAIN LOGO === */
@media (max-width: 575px) {
    header#header div.middle-header div.middle-header-container div.responsive-logo img {
        height: 50px;
        width: 100%;
    }
}
/* === MAIN LOGOEND === */


/* === Kazançlar Alanı CSS v2 === */
/* Kart */
.latestWins__card {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: none !important;
  border: none !important;
}

/* Provider gizle */
.latestWins__provider {
  display: none !important;
}

/* Görsel */
.latestWins__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000000bd !important;
  transform: none !important;
}


/* Meta alanı */
.latestWins__meta {
  position: relative !important;
  background: linear-gradient(
    180deg,
    rgba(18, 0, 35, 0.85) 0%,
    rgb(14 0 36 / 95%) 100%
  ) !important;

  justify-content: space-between !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 8px 6px !important;
  font-size: 12px !important;
  display: flex !important;
  overflow: hidden !important;
}

/* Shine efekti */
.latestWins__meta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: latestwins-shine 3.5s infinite;
  pointer-events: none;
}

/* Keyframe */
@keyframes latestwins-shine {
  0% { left: -75%; }
  100% { left: 130%; }
}

/* === Kazançlar Alanı CSS v2 END === */



/* Settings page theme tokens */
:root {
    --settings-sidebar-bg: rgba(0, 0, 0, 0.9);
    --settings-sidebar-border: rgba(216, 170, 80, 0.2);
    --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: rgba(255, 244, 213, 0.84);
    --settings-sidebar-item-active-bg: linear-gradient(120deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.08));
    --settings-sidebar-active-color: #fff8e7;

    --settings-content-bg: rgba(0, 0, 0, 0.88);
    --settings-content-border: rgba(216, 170, 80, 0.18);
    --settings-content-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
    --settings-content-radius: 12px;

    --settings-block-bg: rgba(0, 0, 0, 0.84);
    --settings-block-border: rgba(216, 170, 80, 0.18);
    --settings-block-divider: rgba(216, 170, 80, 0.16);
    --settings-block-header-bg: transparent;
    --settings-block-radius: 10px;
    --settings-block-title-color: rgba(255, 244, 213, 0.96);
    --settings-block-desc-color: rgba(207, 174, 109, 0.78);

    --settings-field-title-color: rgba(255, 244, 213, 0.9);
    --settings-control-bg: rgba(0, 0, 0, 0.72);
    --settings-control-border: rgba(216, 170, 80, 0.24);
    --settings-control-color: rgba(255, 244, 213, 0.95);
    --settings-control-radius: 8px;

    --settings-check-title-color: rgba(255, 244, 213, 0.94);
    --settings-check-desc-color: rgba(207, 174, 109, 0.74);

    /* Common page header */
    --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: rgba(255, 255, 255, 0.96);
    --page-header-subtitle-color: rgba(255, 255, 255, 0.65);
    --page-header-icon-color: #d8aa50;

    /* Blog detail */
    --blog-detail-shell-border: rgba(255, 255, 255, 0.08);
    --blog-detail-shell-radius: 12px;
    --blog-detail-shell-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 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: rgba(255, 255, 255, 0.8);
    --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: rgba(255, 255, 255, 0.9);
    --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: rgba(255, 255, 255, 0.82);
    --blog-detail-time-color: rgba(255, 255, 255, 0.65);
    --blog-detail-content-color: rgba(255, 255, 255, 0.88);

    /* Policies page */
    --policies-content-bg: rgba(0, 0, 0, 0.86);
    --policies-content-color: var(--text-secondary);
    --policies-link-color: var(--accent);
    --policies-heading-color: #fff;

    /* Wheel page */
    --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: rgba(255, 255, 255, 0.9);
    --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(139, 100, 36, 0.72));
    --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(15, 15, 20, 0.92), rgba(0, 0, 0, 0.98));
    --wheel-stage-center-border: rgba(255, 255, 255, 0.26);
    --wheel-stage-center-ring: rgba(6, 12, 24, 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(10, 10, 15, 0.94), rgba(0, 0, 0, 0.97));
    --wheel-spin-btn-color: rgba(255, 244, 213, 0.96);
    --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: rgba(255, 255, 255, 0.7);
    --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: #fff8e7;
    --wheel-status-ready-border: rgba(216, 170, 80, 0.35);
    --wheel-status-ready-bg: rgba(216, 170, 80, 0.12);
    --wheel-status-passive-color: rgba(255, 255, 255, 0.76);
    --wheel-article-border: rgba(255, 255, 255, 0.08);
    --wheel-article-bg: rgba(255, 255, 255, 0.01);
    --wheel-article-color: rgba(255, 255, 255, 0.88);
    --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);

    /* Promotions cards */
    --promotion-hover-panel-bg: linear-gradient(180deg, rgba(10, 10, 15, 0.94), rgba(0, 0, 0, 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: rgba(255, 255, 255, 0.96);
    --promotion-hover-desc-color: rgba(207, 174, 109, 0.78);
    --promotion-bottom-icon-color: var(--text-primary);
    --promotion-bottom-info-color: var(--text-muted);
}

/* =========================================================
   FLAT BLACK + GOLD ENFORCEMENT
   En sonda: tüm kalan gradient'leri ve mor kalıntıları düzleştir,
   gold border/aksanları öne çıkar.
   ========================================================= */

/* Tam siyah arka plan */
html,
body,
body.dark-mode,
#app,
main,
main#main,
main#home,
.home-page,
.home-page .container,
.general-container,
.inner-page,
.page-content {
    background: #000000 !important;
    background-image: none !important;
    background-color: #000000 !important;
}

/* Kart yüzeyleri – flat koyu */
.card,
.modal-content,
.modal-body,
.panel,
.surface,
.section-block,
.bonus-card,
.notification-item,
.simple-bets,
.race-item,
.promotion-card,
.faq__chip,
.ato-btn,
.latestWins__card,
.simple-category,
.cat-carousel,
.responsive-menu {
    background: #0A0A0F !important;
    background-image: none !important;
}

/* Genel kart border'ları gold ince */
.bonus-card,
.notification-item,
.race-item,
.promotion-card,
.simple-category,
.faq__chip,
.ato-btn {
    border: 1px solid rgba(216, 170, 80, 0.35) !important;
}

/* Active / hover'da gold border parlasın */
.faq__chip:hover,
.ato-btn:hover,
.bonus-card:hover,
.promotion-card:hover,
.simple-category:hover,
.race-item:hover,
.notification-item:hover {
    border-color: #d8aa50 !important;
    box-shadow: 0 0 0 1px rgba(216, 170, 80, 0.45), 0 8px 22px rgba(0, 0, 0, 0.6) !important;
}

/* Game item — gold ince border */
.game-item,
.game-item .game-top,
.game-item figure.game-image {
    border-radius: 8px !important;
}

.game-item {
    border: 1px solid rgba(216, 170, 80, 0.28) !important;
    background: #0A0A0F !important;
}

.game-item:hover {
    border-color: #d8aa50 !important;
    box-shadow: 0 0 0 1px rgba(216, 170, 80, 0.5), 0 10px 28px rgba(0, 0, 0, 0.7) !important;
}

/* Game opener overlay — koyu opak */
.game-item div.game-top div.game-opener {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 2px solid #d8aa50 !important;
}

/* Sidebar — flat */
.sidebar,
.sidebar .menu,
.sidebar .submenu,
.sidebar-menu,
.accordion-menu,
.responsive-menu {
    background: #000000 !important;
    background-image: none !important;
}

.sidebar a,
.sidebar-menu a,
.accordion-menu a {
    border-bottom: 1px solid rgba(216, 170, 80, 0.10) !important;
}

.sidebar a:hover,
.sidebar-menu a:hover,
.accordion-menu a:hover,
.sidebar a.active,
.sidebar-menu a.active,
.accordion-menu a.active {
    color: #d8aa50 !important;
    background: rgba(216, 170, 80, 0.06) !important;
}

/* Header / Lowbar / Sticky — flat */
header#header,
.lowbar,
.sticky-menu,
.middle-header,
.middle-header-container {
    background: #000000 !important;
    border-color: rgba(216, 170, 80, 0.18) !important;
}

/* Buton primary — düz altın */
.button.register,
.btn-primary,
.common-form-button .button,
form.general-form div.form-buttons button,
.auth-form div.form-buttons button {
    background: #d8aa50 !important;
    background-image: none !important;
    color: #000000 !important;
    border: 1px solid #d8aa50 !important;
    box-shadow: 0 6px 18px rgba(216, 170, 80, 0.28) !important;
}

.button.register:hover,
.btn-primary:hover,
.common-form-button .button:hover,
form.general-form div.form-buttons button:hover,
.auth-form div.form-buttons button:hover {
    background: #e9c37a !important;
    color: #000000 !important;
}

/* Wallet butonları */
.wallet-button,
span.button.deposit,
span.button.withdraw {
    background: #d8aa50 !important;
    background-image: none !important;
    color: #000000 !important;
}

/* Inputlar — koyu zemin, gold focus */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea,
.phone-input,
.phone-input input {
    background: #0A0A0F !important;
    background-image: none !important;
    color: #fff8e7 !important;
    border: 1px solid rgba(216, 170, 80, 0.30) !important;
}

input:focus,
select:focus,
textarea:focus,
.phone-input input:focus {
    border-color: #d8aa50 !important;
    box-shadow: 0 0 0 2px rgba(216, 170, 80, 0.25) !important;
}

/* Modal — flat */
.modal .modal-dialog .modal-content,
.auth-modal .modal-dialog .modal-content,
#walletModal .modal-content,
#betModal .modal-content {
    background: #0A0A0F !important;
    background-image: none !important;
    border: 1px solid rgba(216, 170, 80, 0.24) !important;
}

/* Progress bars — gold */
.progress-bar span,
.progress-fill,
.race-progress .line,
.simple-progress .fill {
    background: #d8aa50 !important;
    background-image: none !important;
}

/* Tab active — gold underline / pill */
.simple-bets .nav-pills .nav-link.active,
.simple-bets ul li button.active,
.faq__chip.is-active,
.ato-btn.is-active {
    background: rgba(216, 170, 80, 0.14) !important;
    color: #fff8e7 !important;
    border-color: #d8aa50 !important;
}

/* Tooltip / panel mor gradient öldür */
[class*="tooltip"],
[class*="dropdown-menu"],
.notif-panel {
    background: #0A0A0F !important;
    background-image: none !important;
    border: 1px solid rgba(216, 170, 80, 0.24) !important;
}

/* Page header banner — koyu */
html body .page div.page-header {
    background: #0A0A0F !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(216, 170, 80, 0.30) !important;
}

/* Soc hero shimmer — koyu zemine ayar */
body.dark-mode .soc-hero {
    background: #0A0A0F !important;
    background-image: none !important;
    border: 1px solid rgba(216, 170, 80, 0.22) !important;
}

/* Latest wins kartı */
.latestWins__img {
    background: #000000 !important;
}
.latestWins__meta {
    background: #0A0A0F !important;
    background-image: none !important;
    border-top: 1px solid rgba(216, 170, 80, 0.22) !important;
}