/* =============================================================================
   1. :ROOT DEĞİŞKENLER VE RENKLER (ORİJİNAL)
============================================================================= */
:root {
    /* Primary Cyan renkler (Brand/Accent) */
    --hero: 106, 230, 255 !important;
    --hero-sc: 0, 0, 0 !important;
    --hero-hover: 85, 200, 220 !important;
    --brand: 106, 230, 255 !important;
    --brand-hover: 85, 200, 220 !important;
    --accent: 106, 230, 255 !important;
    --accent-hover: 85, 200, 220 !important;
    --oc-1: 106, 230, 255 !important;
    --oc-1-hover: 85, 200, 220 !important;
    --odd-up: 34, 197, 94 !important;
    --odd-up-hover: 22, 163, 74 !important;
    
    /* Primary Red renkler */
    --oc-2: 246, 4, 6 !important;
    --oc-2-hover: 200, 3, 5 !important;
    --oc-3: 246, 4, 6 !important;
    --oc-3-hover: 200, 3, 5 !important;
    --odd-down: 246, 4, 6 !important;
    --odd-down-hover: 200, 3, 5 !important;
    
    /* BG (#171B29) - Ana background */
    --menu: 23, 27, 41 !important;
    --menu-sc: 255, 255, 255 !important;
    --header: 23, 27, 41 !important;
    --header-sc: 255, 255, 255 !important;
    --b: 23, 27, 41 !important;
    --b-sc: 255, 255, 255 !important;
    --tab-navigation: 23, 27, 41 !important;
    --tab-navigation-sc: 255, 255, 255 !important;
    
    /* Base 1 (#1F2437) - Hover states */
    --base-1: 31, 36, 55 !important;
    --menu-hover: 31, 36, 55 !important;
    --header-hover: 31, 36, 55 !important;
    --b-hover: 31, 36, 55 !important;
    --tab-navigation-hover: 31, 36, 55 !important;
    
    /* Base 2 (#272E47) - Ek background */
    --base-2: 39, 46, 71 !important;
    
    /* Secondary renk */
    --secondary: 106, 230, 255 !important;
    --secondary-hover: 85, 200, 220 !important;
    --secondary-sc: 0, 0, 0 !important;
    
    /* Static renkler */
    --static-black: 23, 27, 41 !important;
    --static-black-hover: 31, 36, 55 !important;
    --static-black-sc: 255, 255, 255 !important;
    
    /* Gradient renkler - Para Yatır butonu */
    --gradient-purple-start: 168, 85, 247 !important;
    --gradient-pink-end: 236, 72, 153 !important;
    --gradient-purple-hover: 147, 51, 234 !important;
    --gradient-pink-hover: 219, 39, 119 !important;
    
    /* Temel renkler */
    --white: 255, 255, 255 !important;
    --black: 0, 0, 0 !important;
}
.logo {
    margin-left: 25px !important;
}
/* =============================================================================
   2. HEADER VE BUTONLAR (ORİJİNAL)
============================================================================= */
.header-bc { height: 60px !important; }

/* TÜM header butonları için ortak stil */
.hdr-user-bc .btn.sign-in,
.hdr-user-bc .btn.register,
.hdr-user-bc .header-custom-buttons .btn {
    min-width: 80px !important;
    height: 35px !important;
    border-radius: 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

/* Buton text'leri */
.hdr-user-bc .btn span,
.hdr-user-bc .header-custom-buttons .btn span {
    line-height: 1 !important;
    display: inline-block !important;
    font-weight: 300 !important;
}

/* Buton ikonları gizle */
.hdr-user-bc .header-custom-buttons .btn::before { display: none !important; }

/* PARA YATIR butonu */
.hdr-user-bc .header-custom-buttons .btn[aria-label="PARA YATIR"] {
    background: linear-gradient(135deg, rgba(var(--gradient-purple-start), 1) 0%, rgba(var(--gradient-pink-end), 1) 100%) !important;
    color: rgba(var(--white), 1) !important;
    border: none !important;
    font-weight: 600 !important;
}
.hdr-user-bc .header-custom-buttons .btn[aria-label="PARA YATIR"]:hover {
    background: linear-gradient(135deg, rgba(var(--gradient-purple-hover), 1) 0%, rgba(var(--gradient-pink-hover), 1) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(var(--gradient-purple-start), 0.5) !important;
}

/* BENİ ARA butonu - Gizli */
.hdr-user-bc .header-custom-buttons .btn[aria-label="Beni ara"] { display: none !important; }

/* GİRİŞ butonu */
.hdr-user-bc .btn.sign-in {
    background: rgba(var(--base-2), 1) !important;
    color: rgba(var(--white), 1) !important;
    border: 1px solid rgba(var(--hero), 0.3) !important;
}
.hdr-user-bc .btn.sign-in:hover {
    background: rgba(var(--base-1), 1) !important;
    border-color: rgba(var(--hero), 0.6) !important;
    transform: translateY(-1px) !important;
}

/* KAYIT butonu */
.hdr-user-bc .btn.register {
    background: rgba(var(--hero), 1) !important;
    color: rgba(var(--black), 1) !important;
    border: none !important;
    font-weight: 600 !important;
}
.hdr-user-bc .btn.register:hover {
    background: rgba(var(--hero-hover), 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(var(--hero), 0.4) !important;
}

/* Header Buton Düzeni */
.hdr-user-bc, .hdr-user-bc .header-custom-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

img.product-banner-img-bc { border-radius: 8px !important; }

/* Loyalty Bonus Header */
.loyaltyBonusHeader {
    background: rgba(var(--base-2), 1) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 8px 20px !important;
    height: auto !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    position: relative !important;
    margin-inline-end: 24px !important;
}
.loyaltyBonusHeader:before, .loyaltyBonusHeader:after, 
.loyaltyBonusHeaderBackground, .loyaltyBonusHeaderShadow { display: none !important; }

.loyaltyBonusImg {
    width: 24px !important; height: 24px !important; margin: 0 !important; object-fit: contain !important;
}
.loyaltyBonusHeaderText {
    background: linear-gradient(180deg, #D8AB51 0%, #CE7E22 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 16px !important; font-weight: 600 !important;
    text-transform: capitalize !important; margin: 0 !important; display: block !important;
}

/* =============================================================================
   3. SAYFA YERLEŞİMİ (LAYOUT FIX)
============================================================================= */
.hasLeftMenu:not(.sportsbook) {
    grid-template-columns: 268px minmax(0, 1fr) !important; /* 268px Menü Genişliği */
    height: auto !important; 
    overflow: visible !important;
    display: grid !important;
}

.sportsbook-container, .live-calendar {
    padding-left: 268px !important;
}

/* =============================================================================
   4. SOL MENÜ KONUMLANDIRMA (FIXED -> RELATIVE DÖNÜŞÜMÜ)
============================================================================= */
.asideMenu {
    width: 268px !important;
    background: #171B29 !important; /* Arkaplan rengi */
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px !important;
    box-sizing: border-box !important;

    /* Bu kısım menüyü sayfayla beraber kaydırır */
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important; 
    min-height: 100% !important;
    overflow: visible !important; 
    z-index: 90 !important;
    margin: 0 !important;
}

/* İçerik kapsayıcıları serbest bırak */
.asideMenuContent, .asideMenuCompact, .left-menu-scroll {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =============================================================================
   5. MENÜ GÖRÜNÜMÜ (BAŞLIKLAR VE LİSTE)
============================================================================= */

/* Gruplama */
.asideMenuCompact > .asideMenuNavItem {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- BAŞLIKLAR (Örn: SPORLAR) --- */
.asideMenuCompact > .asideMenuNavItem > .asideMenuNavLink {
    background: transparent !important;
    border: none !important;
    padding: 0 0 8px 12px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.asideMenuCompact > .asideMenuNavItem > .asideMenuNavLink svg {
    fill: #6B7280 !important;
    width: 16px !important; height: 16px !important;
}

.asideMenuCompact > .asideMenuNavItem > .asideMenuNavLink .asideMenuOpenNavTitle {
    color: #6B7280 !important;
    font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase !important; margin-left: 10px !important;
    letter-spacing: 0.5px !important; display: block !important;
}

/* --- ALT MENÜ LİSTESİ --- */
.asideSubMenu, .hiddenAsideSubMenu, .asideMenuNavItem [id^="react-collapsed-panel-"] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Link Stili (Normal Durum) */
.asideSubMenu .asideMenuNavLink {
    padding: 0 16px !important; 
    height: 44px !important; 
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* Link Yazısı */
.asideSubMenu .asideSubMenuNavTitle {
    color: #B1B6CA !important;
    font-size: 15px !important; font-weight: 500 !important;
    margin-left: 12px !important; padding: 0 !important;
}

/* Link İkonu */
.asideSubMenu .asideMenuNavItemIconWrapper, .asideSubMenu svg {
    width: 18px !important; height: 18px !important; fill: #B1B6CA !important;
}

/* =============================================================================
   6. ACTIVE EFEKTİ (YEŞİL GRADIENT - FIGMA)
============================================================================= */
/* Seçili menü arka planı */
.asideSubMenu .asideMenuNavLink.active,
.asideSubMenu .asideMenuNavLink.router-link-active,
.asideSubMenu .asideMenuNavItem.active .asideMenuNavLink {
    background: linear-gradient(90deg, rgba(110, 255, 173, 0.5) -8.47%, rgba(110, 255, 173, 0.06) 32.09%, rgba(110, 255, 173, 0.0375) 49.36%, rgba(110, 255, 173, 0.025) 64.58%, rgba(110, 255, 173, 0) 82.84%), #1B1F2F !important;
    background-blend-mode: hard-light, normal !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: none !important;
    height: 44px !important;
}

/* Seçili yazı rengi */
.asideSubMenu .asideMenuNavLink.active .asideSubMenuNavTitle,
.asideSubMenu .asideMenuNavLink.router-link-active .asideSubMenuNavTitle,
.asideSubMenu .asideMenuNavItem.active .asideMenuNavLink .asideSubMenuNavTitle {
    color: #ffffff !important; font-weight: 600 !important;
}

/* Seçili ikon rengi */
.asideSubMenu .asideMenuNavLink.active svg,
.asideSubMenu .asideMenuNavLink.router-link-active svg,
.asideSubMenu .asideMenuNavItem.active .asideMenuNavLink svg {
    fill: #ffffff !important; color: #ffffff !important;
}

/* =============================================================================
   7. TEMİZLİK VE HOVER DÜZELTMELERİ (ÇAKIŞMA ÖNLEME)
============================================================================= */

/* Hover Efekti (Sadece linklere, hafif aydınlanma) */
.asideSubMenu .asideMenuNavLink:hover {
    background: rgba(110, 255, 173, 0.05) !important;
    color: #fff !important;
}
.asideSubMenu .asideMenuNavLink:hover .asideSubMenuNavTitle,
.asideSubMenu .asideMenuNavLink:hover svg {
    color: #ffffff !important; fill: #ffffff !important;
}

/* Varsayılan gri arka planları ve kenarlıkları YOK ET */
.asideMenuCompact > .asideMenuNavItem:hover,
[class*="is-web"] .asideMenuCompact > .asideMenuNavItem:hover,
[class*="is-web"] .asideMenuNavLink:active,
[class*="is-web"] .asideMenuNavLink:focus,
[class*="is-web"] .asideMenuNavLink:visited,
[class*="is-web"] .asideMenuNavLink {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Linklerdeki varsayılan gri tonu sil */
.asideSubMenu .asideMenuNavLink {
    background: transparent !important;
    box-shadow: none !important;
}

/* Parent Element Renk Baskısını Kaldır */
.asideMenuOpen .asideMenuNavItem.active, 
.asideMenuCompact .asideMenuNavItem.active {
    background: transparent !important;
    color: inherit !important;
}

/* Gereksizleri Gizle */
.asideMenuArrowRight { display: none !important; }
.asideMenuNavGradient { display: none !important; }
.tooltipIconWrapper { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
p#asideMenuBurger { display: none !important; }

/* =============================================================================
   8. BAKİYE KARTLARI (ANA BAKİYE & BONUS BAKİYE)
   Figma değerleri kullanılarak uyarlandı.
============================================================================= */

/* --- GENEL KART AYARLARI --- */
.u-i-p-amounts-bc .u-i-p-a-content-bc {
    border-radius: 15px !important;
    padding: 10px 10px !important; /* Figma: 10px padding */
    min-height: 122px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Eski süslemeleri kaldır */
.u-i-p-amounts-bc .u-i-p-a-content-bc:after,
.u-i-p-amounts-bc .u-i-p-a-content-bc:before {
    display: none !important; content: none !important;
}

/* --- KART 1: ANA BAKİYE (.withdrawable) --- */
/* Yeşil Gradient: #169321 -> #305833 (İstediğin Ton) */
.u-i-p-amounts-bc.withdrawable .u-i-p-a-content-bc {
    background: linear-gradient(108deg, #169321 0%, #305833 100%) !important;
}

/* --- KART 2: BONUS BAKİYE (.bonuses) --- */
/* Kahverengi Gradient: Figma değerleri */
.u-i-p-amounts-bc.bonuses .u-i-p-a-content-bc {
    background: linear-gradient(97.22deg, #A27A29 2.05%, #704B23 99.57%) !important;
}

/* --- İÇERİK METİNLERİ (BAŞLIK VE TUTAR) --- */
.total-balance-r-bc, 
.u-i-p-amounts-bc .u-i-p-a-content-bc > span {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Başlık: "ANA BAKİYE" / "Bonus Bakiyesi" */
.u-i-p-a-title-bc,
.u-i-p-amounts-bc.bonuses .u-i-p-a-title-bc,
.u-i-p-amounts-bc.bonuses .bonus-info-section span {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    margin-bottom: 5px !important;
    line-height: 16px !important;
    opacity: 1 !important;
}

/* Tutar: "107.00₺" */
.u-i-p-a-amount-bc,
.u-i-p-amounts-bc.bonuses .u-i-p-a-amount-bc,
.u-i-p-amounts-bc.bonuses .bonus-info-section b {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 23px !important;
}

/* --- GÖZ İKONU (ANA BAKİYE) --- */
.total-balance-r-bc {
    position: relative !important;
    margin-bottom: 15px !important; /* Başlık ile butonlar arası boşluk */
}

.u-i-p-a-c-icon-bc.bc-i-eye {
    position: absolute !important; 
    right: 0 !important; 
    top: 0 !important;
    width: 30px !important; 
    height: 30px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    font-size: 18px !important; 
    color: #FFFFFF !important;
    cursor: pointer !important;
}

/* --- BUTONLAR (PARA YATIR / ÇEKİM - SADECE ANA BAKİYEDE) --- */
.u-i-p-a-buttons-bc {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: auto !important; /* En alta it */
}

.u-i-p-a-deposit-bc, 
.u-i-p-a-withdraw-bc {
    flex: 1 !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
}

/* Buton Hover */
.u-i-p-a-deposit-bc:hover, 
.u-i-p-a-withdraw-bc:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Buton Yazısı */
.u-i-p-a-deposit-bc span, 
.u-i-p-a-withdraw-bc span {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
}

/* Buton İkonu */
.u-i-p-a-deposit-bc i, 
.u-i-p-a-withdraw-bc i {
    font-size: 20px !important; /* Figma vektör boyutu */
    color: #FFFFFF !important;
    margin-right: 5px !important;
}

/* --- BONUS KARTI İÇİN ÖZEL DÜZENLEME --- */
/* Bonus kartında buton olmadığı için içeriği ortalayalım veya düzgün dağıtalım */
.u-i-p-amounts-bc.bonuses .u-i-p-a-content-bc {
    justify-content: center !important;
    gap: 5px !important;
}
/* Bonus Info Section'ı gizle veya uyarla (HTML yapısına göre) */
.u-i-p-amounts-bc.bonuses .bonus-info-section {
    width: 100% !important;
}

/* --- MENU GORSELİ CEVRİMSİZ --- */

/* Her yerde geçerli olsun */
[class*="is-web"] a[aria-label="15cevrimsiz"].asideMenuNavLink,
a[aria-label="15cevrimsiz"].asideMenuNavLink {
    background: url(https://cmsbetconstruct.com/storage/medias/zibilyonbet-18759880/media_18759880_6b5f8ea4aa5e3204af4e68f4243512ed.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 90px !important;
    border: none !important;
    border-radius: 0 !important; /* veya 12px - istediğiniz gibi */
    padding: 0 !important;
    pointer-events: auto !important; /* Tıklanabilir olsun */
    transition: transform var(--slow-transition-duration) !important;
}

[class*="is-web"] a[aria-label="15cevrimsiz"].asideMenuNavLink:hover,
a[aria-label="15cevrimsiz"].asideMenuNavLink:hover {
    transform: scale(1.06) !important;
}

a[aria-label="15cevrimsiz"] > div {
    opacity: 0 !important;
    filter: opacity(0) !important;
}

a.bc-i-live-chat.header-icon:before {
    color: #69e6ff;
    padding: 10px;
    background: #282828;
    border-radius: 7px;
    border: 1px solid #3e3e3e;
}

a.bc-i-live-chat.header-icon:before {
    animation: chatGlow 2s ease-in-out infinite;
}

@keyframes chatGlow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(105, 230, 255, 0.5);
    }
    50% { 
        box-shadow: 0 0 10px rgba(105, 230, 255, 0.8), 
                    0 0 20px rgba(105, 230, 255, 0.5),
                    0 0 30px rgba(168, 85, 247, 0.3);
    }
}