/* header_custom_css */
/* ══════════════════════════════════════════════════════════════════════════
* GEMİNİBAHİS — HEADER CSS (TEK DOSYA)
* Hedef alan: Üst/Alt Bilgi > "Header CSS — Ortak"
*
* 🔴 "Header CSS — Masaüstü" ve "— Mobil" alanları BOŞ KALACAK.
* ──────────────────────────────────────────────────────────────────────────
* NEDEN TEK DOSYA — İLK DENEMEDE SİTENİN PATLAMA SEBEBİ BUYDU:
*
* Panelin alan açıklaması şöyle diyor: "YALNIZ masaüstü (boşsa ortak alan
* geçerli)". Yani platform alanı doluysa Ortak alan HİÇ YÜKLENMEZ — ikisi
* birleşmez, biri diğerinin YERİNE geçer (cascade değil, fallback).
*
* İlk turda token'lar (`--g-*`) Ortak alana, kurallar Masaüstü alana
* konmuştu. Masaüstünde Ortak yüklenmediği için o token'lar TANIMSIZ kaldı;
* `var(--g-cyan)` içeren her bildirim "invalid at computed-value time"
* olup düştü. Sonuç: PARA YATIR / GİRİŞ / ÜYE OL butonlarının zemini,
* kenarı, cam efekti tamamen gitti — butonlar şeffaflaştı. Tarayıcı bunu
* konsola hata olarak yazmaz, sessizce yapar.
*
* ⚠️ KURAL: panelin her alanı KENDİ KENDİNE YETERLİ olmak zorunda.
* Alanlar arasında değişken bağımlılığı kurulamaz.
*
* `.header-bc` ile başlayan kurallar mobilde zaten inert (o sınıf yalnız web
* derlemesinde var, ), bu yüzden hepsinin Ortak alanda
* durması güvenli. Font yüklemesi ve token'lar da böylece mobilde hazır
* bekliyor — mobil header'a sıra gelince yeniden tanımlamak gerekmeyecek.
* ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️⚠️ BU SATIR DOSYANIN İLK SATIRI OLMAK ZORUNDA ⚠️⚠️
* CSS spesifikasyonu: `@import` yalnızca bir stil sayfasının EN BAŞINDA
* geçerlidir; önünde tek bir kural bile varsa tarayıcı onu SESSİZCE atar —
* hata vermez, fontlar gelmez, site sistem fontuna düşer ve "neden font
* değişmedi" diye saatler harcanır. (Yorumlar sorun değil, KURAL sorun.)
*
* TEST: F12 > Network > Font sekmesinde Inter/Outfit/SpaceGrotesk woff2
* dosyaları düşüyor mu? Düşmüyorsa panel bu kutuyu paket CSS'in ARKASINA
* ekliyor demektir; o durumda altyapıdan içine şu satırı isteyin:
* */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=Space+Grotesk:wght@500;600&display=swap');
/* ══════════════════════════════════════════════════════════════════════════
* MARKA TOKEN'LARI (--g-*)
* Aşağıdaki tüm kurallar bu 15 satırı okur. Bir tonu değiştirmek
* istediğinizde selector aramayın, buradan çevirin; header, nav, panel,
* buton hepsi takip eder. `--g-` öneki bilinçli: platformun kendi
* token'larıyla (--b, --hero, --gold) asla karışmaz.
* ══════════════════════════════════════════════════════════════════════════ */
html:root,
:root {
/* Zemin ve metin — %60 / %30 */
--g-bg: #0F172A;
/* Derin Antrasit — ana zemin */
--g-surface: #1E293B;
/* Slate — yüzey/kart */
--g-surface-hi: #334155;
/* Slate açık — hover yüzeyi */
--g-text: #F8FAFC;
/* Titanyum — ana metin */
--g-text-dim: rgba(248, 250, 252, .62);
/* ikincil metin, pasif ikon */
/* Neon degrade durakları — %10, YALNIZ CTA ve aktif durum */
--g-cyan: #00C2FF;
--g-purple: #7B2CBF;
--g-fuchsia: #FF007A;
--g-grad: linear-gradient(135deg, #00C2FF 0%, #7B2CBF 55%, #FF007A 100%);
/* Cam (glassmorphism) reçetesi — tek yerden, her yüzeyde aynı his.
* Buzlu cam üç bileşenin BİRLİKTE çalışmasıdır; biri eksikse efekt
* "yarı saydam gri kutu"ya döner:
* 1) yarı saydam zemin 2) backdrop-filter blur 3) ÜST kenarda
* 1px açık çizgi (ışığın cama vurduğu kenar — derinliği bu verir) */
--g-glass: rgba(248, 250, 252, .06);
--g-glass-hi: rgba(248, 250, 252, .12);
--g-line: rgba(248, 250, 252, .10);
--g-line-neon: rgba(0, 194, 255, .32);
--g-blur: blur(18px) saturate(140%);
--g-shadow: 0 8px 28px rgba(0, 0, 0, .38);
--g-glow-cyan: 0 0 0 1px rgba(0, 194, 255, .35), 0 6px 20px rgba(0, 194, 255, .22);
/* Tipografi rolleri — marka kimliği bölüm 6 */
--g-font-ui: 'Inter', 'Rubik', system-ui, -apple-system, sans-serif;
--g-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
--g-font-num: 'Space Grotesk', ui-monospace, 'SFMono-Regular', monospace;
}
/* ══════════════════════════════════════════════════════════════════════════
* 🔴 İKON FONTU KORUMASI — BU BÖLÜMÜ SİLMEYİN, OKUYUN
* ──────────────────────────────────────────────────────────────────────────
* Header'daki Telegram, WhatsApp, bildirim, favori, ayarlar, canlı destek,
* kupon ikonlarının HEPSİ birer İKON FONTU glifi:
*
*
* Eleman BOŞ; görüntü `::before { content: "\eXXX"; font-family: }` ile basılıyor. Dolayısıyla:
*
* ❌ .header-bc, .header-bc * { font-family: 'Inter' !important; }
*
* ...yazdığınız an bu glifler Inter'de aranır, Inter'de o karakter yoktur
* ve İKONLARIN HEPSİ KAYBOLUR. Boş kutu bile görünmez, çünkü özel alan
* (private use area) karakterleri Inter'de tamamen tanımsızdır.
*
* ✅ DOĞRU YOL — iki tanesi birlikte:
* 1) Gövde fontu `--font-family` token'ından değişir (katman 1). Paket
* CSS'i gövdeyi bu token'la kurar, ikon sınıfları kendi font-family'sini
* açıkça yazar → ikonlar dokunulmaz kalır.
* 2) Başlık/buton fontu (Outfit) `*` ile değil, METİN TAŞIYAN elemanlara
* tek tek verilir — aşağıdaki tüm kurallar böyle yazıldı.
*
* Aynı tuzak `.tl-ikon` (PARA YATIR butonundaki ₺ ikonu) için de geçerli;
* o da operatörün eklediği bir ikon sınıfı, font vermeyin.
* ══════════════════════════════════════════════════════════════════════════ */
/* Alt çizgi temizliği — `*` yerine yalnız bağlantılarda.
* (`*` kullanmamanın tek sebebi font değil: yıldız seçici ::before/::after
* miras zincirine de girdiği için ikon ve sayaç pseudo'larını etkiler.) */
.header-bc a,
.header-bc a:hover {
text-decoration: none;
}
/* Rakamlar hizalı ve terminal netliğinde — marka kimliği bölüm 6:
* "oyuncunun bakiyesi süslü fontlarla değil, terminal netliğinde".
* tabular-nums: rakamlar eşit genişlikte olur, bakiye sayaç animasyonunda
* yazı soldan sağa oynamaz. */
.header-bc .infoTime,
.header-bc [class*="balance"],
.header-bc [class*="amount"] {
font-family: var(--g-font-num);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
* BURADAN AŞAĞISI MASAÜSTÜ HEADER KURALLARI
* (eski `03-header-masaustu.css`; ayrı alana konduğu için token'ları
* göremiyordu, o yüzden buraya taşındı)
*
* ÖZGÜLLÜK NOTU: `!important` sadece platformun KENDİ custom.css'inin kesin
* olarak boyadığı yerlerde (kroma zeminler, buton dolguları) kullanıldı.
* Geri kalan her yerde `.header-bc` ön eki ile özgüllük yükseltildi (0,3,0)
* — paketin `.btn.s-small` (0,2,0) kurallarını kaynak sırasından bağımsız
* yener. Gereksiz `!important` bir sonraki düzenlemeyi imkânsızlaştırır.
* ══════════════════════════════════════════════════════════════════════════ */
/* ══ 0. ALTYAPININ ÇARPI (CLOSE) İKONUNU VE BOŞ DİNAMİK ALANINI KALDIRMA ═══ */
.layout-header-holder-bc .hdr-dynamic-content,
.header-bc .hdr-dynamic-content,
.hdr-dynamic-content {
display: none !important;
}
.layout-header-holder-bc {
background: transparent !important;
}
.header-bc {
background:
radial-gradient(ellipse 65% 100% at 15% -20%, rgba(0, 194, 255, 0.12) 0%, transparent 55%),
radial-gradient(ellipse 55% 90% at 85% -15%, rgba(123, 44, 191, 0.14) 0%, transparent 60%),
linear-gradient(180deg, rgba(11, 17, 32, 0.88) 0%, rgba(15, 23, 42, 0.84) 100%) !important;
border-bottom: 1px solid rgba(248, 250, 252, 0.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%) !important;
backdrop-filter: blur(16px) saturate(140%) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
position: relative;
}
.header-bc::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 194, 255, .50), rgba(255, 0, 122, .35), transparent);
pointer-events: none;
}
/* Üst satır: Z-index 50 (Dropdownların ve bildirimlerin menünün arkasına girmemesi için) */
.header-bc .hdr-main-content-bc {
position: relative !important;
z-index: 50 !important;
min-height: 60px;
padding: 8px 16px;
gap: 16px;
}
/* ══ 2. LOGO ══════════════════════════════════════════════════════════════ */
.header-bc .hdr-logo-bc {
height: 32px;
width: auto;
filter: drop-shadow(0 0 12px rgba(0, 194, 255, .22));
}
.header-bc .logo-container {
gap: 14px;
}
/* ══ 3. SOSYAL İKONLAR (ORTAKLIK · TELEGRAM · WHATSAPP) — GİZLENDİ ══════════
* Kullanıcı isteği: Logonun yanındaki 3 sosyal medya butonu tamamen gizlendi. */
.header-bc .bg-hdr-social {
display: none !important;
}
/* ══ 4. SAĞ BLOK BUTONLARI ════════════════════════════════════════════════ */
.header-bc .hdr-user-bc {
display: flex;
align-items: center;
gap: 12px;
}
.header-bc .hdr-user-bc .btn {
font-family: var(--g-font-display);
font-size: 13px;
font-weight: 600;
line-height: 1;
height: 40px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: .4px;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition: all .25s ease;
}
.header-bc .hdr-user-bc .btn span {
text-decoration: none !important;
}
/* ── 4a. CÜZDAN / PARA YATIR — Kullanıcı isteği doğrultusunda masaüstünden de gizlendi ── */
.header-bc .header-custom-buttons,
.header-bc .hdr-user-bc .header-custom-buttons,
.header-bc .btn.a-color.header-icon-text,
.header-bc .tl-ikon,
.header-custom-buttons,
.tl-ikon {
display: none !important;
}
/* ── 4a-1. DİKEY AYRAÇ ÇİZGİSİNİ GİZLE (|) ──────────────────────────────────
* BetConstruct'ın GİRİŞ soluna koyduğu .sign-in::after dikey ayraç çizgisi kaldırıldı. */
.header-bc .hdr-user-bc .btn.sign-in::after,
.header-bc .hdr-user-bc .btn.login::after,
.header-bc .hdr-user-bc .sign-in::after,
.header-bc .hdr-user-bc .login::after,
.header-bc .sign-in::after,
.header-bc .login::after,
.header-bc .btn.sign-in::after,
.header-bc .btn.login::after,
.header-bc .logo-container::after,
.header-bc .hdr-user-bc::after,
.header-bc .hdr-user-bc::before,
.header-bc .header-custom-buttons::after,
.header-bc .header-custom-buttons::before {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
border: none !important;
}
/* ── 4b. GİRİŞ — Lüks Koyu Buzlu Cam + Vektörel GİRİŞ İKONU (➔]) ──────────── */
.header-bc .hdr-user-bc .btn.sign-in,
.header-bc .hdr-user-bc .btn.login,
.header-bc .hdr-user-bc .sign-in,
.header-bc .hdr-user-bc .login,
.header-bc .sign-in,
.header-bc .login {
height: 42px !important;
padding: 0 22px !important;
min-width: 105px !important;
max-width: none !important;
width: auto !important;
overflow: visible !important;
border-radius: 10px !important;
background: rgba(248, 250, 252, .08) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
border: 1px solid rgba(248, 250, 252, .18) !important;
color: #F8FAFC !important;
font-family: var(--g-font-display) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .4px !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: inset 0 1px 0 rgba(248, 250, 252, .12) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: all .25s ease !important;
}
.header-bc .hdr-user-bc .btn.sign-in span,
.header-bc .hdr-user-bc .btn.login span,
.header-bc .hdr-user-bc .sign-in span,
.header-bc .hdr-user-bc .login span,
.header-bc .sign-in span,
.header-bc .login span,
.header-bc .cw-hdr-lbl {
text-decoration: none !important;
color: inherit !important;
max-width: none !important;
width: auto !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
display: inline !important;
}
/* GİRİŞ İkonu (➔] Kapı / Oturum Giriş İkonu) */
.header-bc .hdr-user-bc .btn.sign-in::before,
.header-bc .hdr-user-bc .btn.login::before,
.header-bc .hdr-user-bc .sign-in::before,
.header-bc .hdr-user-bc .login::before,
.header-bc .btn.sign-in::before,
.header-bc .btn.login::before,
.header-bc .sign-in::before,
.header-bc .login::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
margin-right: 8px !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
transition: transform .22s ease !important;
}
.header-bc .hdr-user-bc .btn.sign-in:hover,
.header-bc .hdr-user-bc .btn.login:hover,
.header-bc .sign-in:hover,
.header-bc .login:hover {
background: rgba(0, 194, 255, .14) !important;
border-color: rgba(0, 194, 255, .50) !important;
color: var(--g-cyan) !important;
box-shadow: 0 0 18px rgba(0, 194, 255, .25), inset 0 1px 0 rgba(248, 250, 252, .18) !important;
transform: translateY(-1px) !important;
}
.header-bc .hdr-user-bc .btn.sign-in:hover::before,
.header-bc .hdr-user-bc .btn.login:hover::before {
transform: translateX(2px) !important;
}
/* ── 4c. ÜYE OL — Gemini Neon Degrade + Vektörel KAYIT İKONU (👤+) ────────── */
.header-bc .hdr-user-bc .btn.register,
.header-bc .hdr-user-bc .register,
.header-bc .btn.register,
.header-bc .register {
height: 42px !important;
padding: 0 24px !important;
min-width: 125px !important;
max-width: none !important;
width: auto !important;
overflow: visible !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #00C2FF 0%, #7B2CBF 55%, #FF007A 100%) !important;
background-size: 140% 140% !important;
background-position: 0% 50% !important;
color: #FFFFFF !important;
border: none !important;
font-family: var(--g-font-display) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .4px !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: 0 4px 18px rgba(0, 194, 255, .38), 0 0 12px rgba(123, 44, 191, .28) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: background-position .4s ease, transform .22s ease, box-shadow .22s ease !important;
}
.header-bc .hdr-user-bc .btn.register span,
.header-bc .hdr-user-bc .register span,
.header-bc .btn.register span,
.header-bc .register span {
text-decoration: none !important;
color: #FFFFFF !important;
max-width: none !important;
width: auto !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
display: inline !important;
}
/* ÜYE OL İkonu (👤+ Kullanıcı Ekleme / Kayıt İkonu) */
.header-bc .hdr-user-bc .btn.register::before,
.header-bc .hdr-user-bc .register::before,
.header-bc .btn.register::before,
.header-bc .register::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
margin-right: 8px !important;
background-color: #FFFFFF !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
transition: transform .22s ease !important;
}
.header-bc .hdr-user-bc .btn.register:hover,
.header-bc .hdr-user-bc .register:hover,
.header-bc .btn.register:hover,
.header-bc .register:hover {
background-position: 100% 50% !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 24px rgba(255, 0, 122, .55), 0 0 18px rgba(0, 194, 255, .45) !important;
}
.header-bc .hdr-user-bc .btn.register:hover::before,
.header-bc .register:hover::before {
transform: scale(1.1) !important;
}
/* ══ 5. AKILLI PANEL / 3 NOKTA MENÜSÜ (KULLANICI İSTEĞİ: TAMAMEN GİZLENDİ) ═══
* Kullanıcı isteği: Smart panel masaüstü ve mobilde tamamen gizlendi. */
.header-bc .smartPanel-bc,
.header-bc .smartPanel-bc::after,
.header-bc #smart-panel-holder,
.header-bc .hdr-smart-panel-holder-arrow-bc,
.header-bc .hdr-smart-panel-holder-bc,
.header-bc .hdr-toggle-button-bc,
.header-bc .sidePanel-holder-bc,
.smartPanel-bc,
#smart-panel-holder,
.hdr-toggle-button-bc {
display: none !important;
}
/* ══ 6. YAN PANELLER (bildirim çekmecesi · ayarlar · arama) — lüks cam ══════ */
.header-bc .sidePanel-holder-bc {
z-index: 999999 !important;
}
.header-bc .sidePanel-holder {
background: rgba(15, 23, 42, .96) !important;
-webkit-backdrop-filter: blur(16px) !important;
backdrop-filter: blur(16px) !important;
border: 1px solid rgba(0, 194, 255, .25) !important;
border-radius: 14px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, .75), 0 0 20px rgba(0, 194, 255, .15) !important;
}
.header-bc .overlay-header {
font-family: var(--g-font-display);
font-size: 14px;
font-weight: 600;
color: var(--g-text);
border-bottom: 1px solid var(--g-line);
}
.header-bc .notification-new-item {
border-bottom: 1px solid var(--g-line);
transition: background .2s ease;
}
.header-bc .notification-new-item:hover {
background: var(--g-glass);
}
/* Okunmamış bildirim işareti — kırmızı panik yok, neon mavi sinyal var.
* (Marka kimliği bölüm 4: panik yaratan dil ve görsel kullanılmaz.) */
.header-bc .notification-new-item[data-status="unread"] .notification-new-item-icon {
color: var(--g-cyan);
}
/* ══ 7. NAVİGASYON ŞERİDİ (GEMİNİ NEON GLASSMORPHISM) ═════════════════════
* Altyapının (BetConstruct / overlay.css) stok .bg-nav kurallarını ezmek için
* hem çoklu seçici (html:root body #root ...) hem !important kullanılmıştır.
* ══════════════════════════════════════════════════════════════════════════ */
/* ── 7a. DIŞ ŞERİT KAPSAYICI (Cam Tabanı Kaldırıldı - Kapsüller Doğrudan Header Üzerinde) ── */
html:root body #root .header-bc .nav-content-bc,
html:root body #root .header-bc .bg-nav-wrap,
html body #root .header-bc .nav-content-bc,
html body #root .header-bc .bg-nav-wrap,
.header-bc .nav-content-bc,
.header-bc .bg-nav-wrap {
position: relative !important;
z-index: 10 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 16px !important;
margin-bottom: 14px !important; /* Kullanıcı isteği: Ardından gelen bölümle ferah aralık */
}
/* ── 7b. ALTYAPININ İÇ KUTULARINI SIFIRLAMA (Gri/Mavi Kutuyu Kaldır) ─────────
* BetConstruct .bg-nav ve .header-navigation sınıflarına kendi stok koyu mavi/gri
* zeminini ve kenarlıklarını basar. Onları şeffaflaştırıp dış camla birleştiriyoruz. */
html:root body #root .header-bc .nav-content-menu,
html:root body #root .header-bc .header-navigation,
html:root body #root .header-bc .nav-menu-container,
html:root body #root .header-bc .bg-nav,
html:root body #root .header-bc .bg-nav-list,
html body #root .header-bc .nav-content-menu,
html body #root .header-bc .header-navigation,
html body #root .header-bc .nav-menu-container,
html body #root .header-bc .bg-nav,
html body #root .header-bc .bg-nav-list,
.header-bc .nav-content-menu,
.header-bc .header-navigation,
.header-bc .nav-menu-container,
.header-bc .bg-nav,
.header-bc .bg-nav-list {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ── 7c. MENÜ LİSTESİ DÜZENİ (Kapsüller Arası Ferah Boşluk) ──────────────── */
html:root body #root .header-bc .nav-menu,
html body #root .header-bc .nav-menu,
.header-bc .nav-menu {
display: flex !important;
align-items: center !important;
gap: 8px !important; /* Fotoğraf 4'teki gibi ferah kapsül aralığı */
margin: 0 !important;
padding: 6px 0 !important;
list-style: none !important;
}
/* ── 7d. ANA MENÜ KAPSÜL BUTONLARI (Fotoğraf 4 Estetiği + Gemini Neon) ───── */
html:root body #root .header-bc .nav-menu-item.bg-nav-btn,
html:root body #root .header-bc .nav-menu > li > .nav-menu-item,
html:root body #root .header-bc .bg-nav-list > li > .nav-menu-item,
html:root body #root .header-bc .header-navigation > ul > li > .nav-menu-item,
html body #root .header-bc .nav-menu-item.bg-nav-btn,
html body #root .header-bc .nav-menu > li > .nav-menu-item,
html body #root .header-bc .bg-nav-list > li > .nav-menu-item,
.header-bc .nav-menu-item.bg-nav-btn,
.header-bc .nav-menu > li > .nav-menu-item {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
height: 40px !important;
padding: 0 16px !important;
font-family: var(--g-font-display) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .4px !important;
text-transform: uppercase !important;
color: var(--g-text-dim) !important;
background: rgba(248, 250, 252, .04) !important;
border: 1px solid rgba(248, 250, 252, .08) !important;
border-radius: 8px !important;
box-shadow: none !important;
text-decoration: none !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: all .22s cubic-bezier(.4, 0, .2, 1) !important;
}
/* Metin span'ları ve ikon sarmalayıcıları rengi miras alsın */
html:root body #root .header-bc .nav-menu-item.bg-nav-btn > span,
html body #root .header-bc .nav-menu-item.bg-nav-btn > span,
.header-bc .nav-menu-item.bg-nav-btn > span {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
transition: color .22s ease, text-shadow .22s ease !important;
}
/* ── 7e. HOVER & AKTİF DURUMU (Neon Vurgu + Cam Parlaması) ───────────────── */
html:root body #root .header-bc .nav-menu-item.bg-nav-btn:hover,
html:root body #root .header-bc .nav-menu .nav-menu-item:hover,
html:root body #root .header-bc li:hover > .nav-menu-item,
html body #root .header-bc .nav-menu-item.bg-nav-btn:hover,
html body #root .header-bc li:hover > .nav-menu-item.bg-nav-btn,
.header-bc .nav-menu-item.bg-nav-btn:hover,
.header-bc li:hover > .nav-menu-item.bg-nav-btn {
color: var(--g-cyan) !important;
background: rgba(0, 194, 255, .08) !important;
border-color: rgba(0, 194, 255, .38) !important;
box-shadow: 0 0 14px rgba(0, 194, 255, .22) !important;
text-shadow: 0 0 12px rgba(0, 194, 255, .45) !important;
transform: translateY(-1px) !important;
}
html:root body #root .header-bc .nav-menu-item.bg-nav-btn.active,
html:root body #root .header-bc .nav-menu .nav-menu-item.active,
html body #root .header-bc .nav-menu-item.bg-nav-btn.active,
.header-bc .nav-menu-item.bg-nav-btn.active {
color: var(--g-cyan) !important;
background: rgba(0, 194, 255, .14) !important;
border-color: var(--g-cyan) !important;
box-shadow: 0 0 16px rgba(0, 194, 255, .35), inset 0 1px 0 rgba(0, 194, 255, .4) !important;
text-shadow: 0 0 12px rgba(0, 194, 255, .5) !important;
}
/* ── 7f. NEON ALT ÇİZGİ GÖSTERGESİ (Degrade Çizgi Animasyonu) ───────────── */
html:root body #root .header-bc .nav-menu-item.bg-nav-btn::after,
html body #root .header-bc .nav-menu-item.bg-nav-btn::after,
.header-bc .nav-menu-item.bg-nav-btn::after {
content: "" !important;
position: absolute !important;
left: 8px !important;
right: 8px !important;
bottom: -1px !important;
height: 2px !important;
border-radius: 2px !important;
background: var(--g-grad) !important;
box-shadow: 0 -2px 10px rgba(0, 194, 255, .7) !important;
transform: scaleX(0) !important;
transform-origin: center !important;
transition: transform .28s cubic-bezier(.4, 0, .2, 1) !important;
pointer-events: none !important;
}
html:root body #root .header-bc .nav-menu-item.bg-nav-btn:hover::after,
html:root body #root .header-bc .nav-menu-item.bg-nav-btn.active::after,
html:root body #root .header-bc li:hover > .nav-menu-item.bg-nav-btn::after,
html body #root .header-bc .nav-menu-item.bg-nav-btn:hover::after,
html body #root .header-bc .nav-menu-item.bg-nav-btn.active::after,
html body #root .header-bc li:hover > .nav-menu-item.bg-nav-btn::after,
.header-bc .nav-menu-item.bg-nav-btn:hover::after,
.header-bc .nav-menu-item.bg-nav-btn.active::after,
.header-bc li:hover > .nav-menu-item.bg-nav-btn::after {
transform: scaleX(1) !important;
}
/* ── 7g. İKONLAR (currentColor ile Otomatik Renk + Parlama Efekti) ───────── */
html:root body #root .header-bc .nav-menu-item .CMSIconSVGWrapper,
html body #root .header-bc .nav-menu-item .CMSIconSVGWrapper,
.header-bc .nav-menu-item .CMSIconSVGWrapper {
display: inline-flex !important;
align-items: center !important;
}
html:root body #root .header-bc .nav-menu-item .CMSIconSVGWrapper svg,
html body #root .header-bc .nav-menu-item .CMSIconSVGWrapper svg,
.header-bc .nav-menu-item .CMSIconSVGWrapper svg {
width: 15px !important;
height: 15px !important;
fill: currentColor !important;
color: inherit !important;
transition: transform .22s ease, filter .22s ease !important;
}
html:root body #root .header-bc .nav-menu-item:hover .CMSIconSVGWrapper svg,
html:root body #root .header-bc li:hover > .nav-menu-item .CMSIconSVGWrapper svg,
html body #root .header-bc .nav-menu-item:hover .CMSIconSVGWrapper svg,
.header-bc .nav-menu-item:hover .CMSIconSVGWrapper svg {
transform: scale(1.12) !important;
filter: drop-shadow(0 0 8px rgba(0, 194, 255, .7)) !important;
}
/* ── 7h. ALT MENÜ VE SUB-NAV BUTONLARI — TAMAMEN GİZLENDİ ─────────────────
* Kullanıcı isteği: Sayfa değiştiğinde çıkan alt menü butonları (bg-subnav-btn,
* nav-menu-sub, bg-nav-panel, bg-subnav-list vb.) masaüstünde hiçbir yerde
* çıkmayacak, kesin ve tavizsiz olarak tamamen gizlendi. */
html:root body #root .header-bc .nav-menu-sub,
html:root body #root .header-bc .bg-nav-panel,
html:root body #root .header-bc .bg-subnav-btn,
html:root body #root .header-bc .bg-subnav-list,
html:root body #root .header-bc .bg-nav-panel-item,
html:root body #root .header-bc [class*="bg-subnav"],
html:root body #root .header-bc [class*="nav-menu-sub"],
html body #root .header-bc .nav-menu-sub,
html body #root .header-bc .bg-nav-panel,
html body #root .header-bc .bg-subnav-btn,
html body #root .header-bc .bg-subnav-list,
html body #root .header-bc .bg-nav-panel-item,
html body #root .header-bc [class*="bg-subnav"],
html body #root .header-bc [class*="nav-menu-sub"],
.header-bc .nav-menu-sub,
.header-bc .bg-nav-panel,
.header-bc .bg-subnav-btn,
.header-bc .bg-subnav-list,
.header-bc .bg-nav-panel-item,
.header-bc [class*="bg-subnav"],
.header-bc [class*="nav-menu-sub"],
.nav-menu-sub,
.bg-nav-panel,
.bg-subnav-btn,
.bg-subnav-list,
.bg-nav-panel-item,
[class*="bg-subnav"],
[class*="nav-menu-sub"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* ══ 8. GİZLENEN ÖĞELER — OPERATÖR KARARI ════════════════════════════════
* Her satır tek bir öğeyi gizler; istemediğinizi silmeniz yeter.
* ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 KRİTİK KAPSAM DÜZELTMESİ — DİL SEÇİCİ
* Önceki hâli `.header-bc .form-control-bc[data-setting="lang"]` idi ve
* header'da dil seçici GERÇEKTEN gizlendi — ama aynı seçici ikinci bir
* elemanı da yakalıyordu: AYARLAR yan panelinin içindeki "Dil" satırı
* (.settings-selectors-bc > ... > [data-setting="lang"]). O panel de
* header'ın içinde yaşıyor. Sonuç: oyuncu dili HİÇBİR YERDEN
* değiştiremiyordu — Ayarlar'da yalnız "Oran formatı" ve "Saat formatı"
* kalıyordu.
* `>` (doğrudan çocuk) ile yalnız header satırındaki kopya gizlenir,
* Ayarlar panelindeki kopya yerinde kalır. */
.header-bc .hdr-main-content-bc>.form-control-bc[data-setting="lang"] {
display: none;
}
/* Saat — header'da yer kaplıyordu. (Gösterilmek istenirse bu satırı sil;
* Space Grotesk + tabular-nums "Ortak" kutusunda zaten tanımlı, saat
* rakamları saniye başına oynamaz.) */
.header-bc .hdr-main-content-bc>.infoTime {
display: none;
}
/* Arama butonu.
* ⚠️ NOT: bunu gizlemek, header'daki tek oyun arama girişini kapatır —
* arama paneli (.js-search-panel) DOM'da kalır ama açacak düğme kalmaz.
* 2000+ slot oyunu olan bir sitede arama en çok kullanılan öğelerden
* biridir; gizlemek yerine cam ikona çevirmek isterseniz bu bloğu silin,
* .sp-button-bc stilleri onu da kapsıyor. Karar sizde. */
.header-bc .generic-search-btn {
display: none;
}
/* ══ 9. HAREKET HASSASİYETİ ═══════════════════════════════════════════════
* Landing sayfasında da uyguladığımız kural: işletim sisteminde "hareketi
* azalt" açıksa geçişleri kapat. Erişilebilirlik gereği + landing ile
* tutarlılık. */
@media (prefers-reduced-motion: reduce) {
.header-bc *,
.header-bc *::after,
.header-bc *::before {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
* ══ 10. PREMIUM MODALLAR & FORMLAR (GİRİŞ, ÜYE OL, BAHİS KUPONU & POPUP) ═
* ──────────────────────────────────────────────────────────────────────────
* - SARI RENKLER TAMAMEN SİLİNDİ (Kapat X, Şifre Gözü, Şifremi Unuttum, Destek).
* - Giriş ve Üye Ol butonları header ile %100 AYNI DİLİ konuşur.
* - Lüks cam mor/camgöbeği degrade zemin, neon ışıma, kusursuz tipografi.
* ══════════════════════════════════════════════════════════════════════════ */
/* ── 10a. Popup & Modal Kabuğu (Lüks Koyu Cam + Neon Çerçeve) ────────────── */
.popup-inner-bc,
.dialog-content-bc {
background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 194, 255, 0.15) 0%, transparent 70%),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(123, 44, 191, 0.18) 0%, transparent 70%),
#0F172A !important;
background-color: #0F172A !important;
border: 1px solid rgba(248, 250, 252, 0.12) !important;
border-radius: 18px !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 194, 255, 0.16) !important;
backdrop-filter: blur(24px) saturate(150%) !important;
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
position: relative !important;
overflow: hidden !important;
}
.popup-inner-bc::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background: linear-gradient(90deg, transparent, #00C2FF 30%, #7B2CBF 70%, transparent) !important;
pointer-events: none !important;
z-index: 5 !important;
}
/* Masaüstünde Giriş & Kayıt Modalı İdeal Ölçüsü (Genişlik & Merkezleme) */
.popup-inner-bc:has(.entrance-popup-bc),
.popup-inner-bc:has(.reg-form-block-bc),
.popup-inner-bc:has(.form-sign-bc),
.popup-holder-bc .entrance-popup-bc,
.entrance-popup-bc,
.entrance-popup-bc.register,
.entrance-popup-bc.sign-in {
max-width: 480px !important;
width: 100% !important;
margin: auto !important;
box-sizing: border-box !important;
}
/* MASAÜSTÜ KAYIT MODALINDAKİ TANITIM AFİŞİ GÖRSELİNİN GİZLENMESİ (YALNIZCA POPUP İÇİ GÖRSEL) */
.entrance-popup-bc.register img.sdr-image-bc,
.entrance-popup-bc.register .sdr-item-bc > img.sdr-image-bc,
.entrance-popup-bc.register img[src*="1cc62945ab71aa06e734d7ec57217b03"],
.popup-inner-bc .entrance-popup-bc.register img.sdr-image-bc,
.popup-inner-bc .entrance-popup-bc.register img[src*="1cc62945ab71aa06e734d7ec57217b03"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
/* Kayıt Formu Adımlarının (Step 1 & Step 2) Görünürlüğü Güvencesi */
.entrance-popup-bc.register .sdr-item-bc,
.popup-inner-bc .entrance-popup-bc.register .sdr-item-bc {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── 10b. Kapatma Butonu (X) — Sarı Tamamen Kaldırıldı & Butonlarla Çarpışması Kesin Önlendi ── */
.popup-inner-bc .e-p-close-icon-bc,
.popup-inner-bc > .e-p-close-icon-bc,
.entrance-popup-bc .e-p-close-icon-bc,
.entrance-popup-bc .bc-i-close-remove,
.popup-holder-bc .bc-i-close-remove,
.e-p-close-icon-bc,
.bc-i-close-remove,
.close-popup-bc {
color: #94A3B8 !important;
background: rgba(248, 250, 252, 0.08) !important;
border: 1px solid rgba(248, 250, 252, 0.16) !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
line-height: 1 !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
position: absolute !important;
right: 16px !important;
top: 14px !important;
z-index: 999 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.popup-inner-bc .e-p-close-icon-bc::before,
.entrance-popup-bc .e-p-close-icon-bc::before,
.e-p-close-icon-bc::before,
.bc-i-close-remove::before,
.popup-holder-bc .bc-i-close-remove::before,
.close-popup-bc::before {
color: #94A3B8 !important;
font-size: 13px !important;
line-height: 1 !important;
transition: color 0.25s ease !important;
}
.popup-inner-bc .e-p-close-icon-bc:hover,
.entrance-popup-bc .e-p-close-icon-bc:hover,
.e-p-close-icon-bc:hover,
.bc-i-close-remove:hover,
.close-popup-bc:hover {
color: #FFFFFF !important;
background: rgba(0, 194, 255, 0.22) !important;
border-color: #00C2FF !important;
box-shadow: 0 0 16px rgba(0, 194, 255, 0.55) !important;
transform: rotate(90deg) scale(1.08) !important;
}
.popup-inner-bc .e-p-close-icon-bc:hover::before,
.entrance-popup-bc .e-p-close-icon-bc:hover::before,
.e-p-close-icon-bc:hover::before,
.bc-i-close-remove:hover::before,
.close-popup-bc:hover::before {
color: #FFFFFF !important;
}
/* ── 10c. Modal Başlığı, Logo & Üst Buton Bölgesi ─────────────────────────── */
.popup-inner-bc .e-p-header-bc,
.entrance-popup-bc .e-p-header-bc {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 20px !important;
padding-right: 70px !important; /* X ikonu için garantili emniyet koridoru */
border-bottom: 1px solid rgba(248, 250, 252, 0.08) !important;
background: rgba(15, 23, 42, 0.75) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
position: relative !important;
}
.popup-inner-bc .e-p-sections-bc,
.entrance-popup-bc .e-p-sections-bc,
.entrance-popup-bc.register .e-p-sections-bc,
.entrance-popup-bc.sign-in .e-p-sections-bc,
.e-p-header-bc .e-p-sections-bc {
position: relative !important;
right: auto !important;
top: auto !important;
margin-left: auto !important;
margin-right: 20px !important; /* Kapatma butonu ile asla çarpışamaz (70px + 20px) */
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
white-space: nowrap !important;
}
/* BETCONSTRUCT ÇİFT BUTON ÖNLEYİCİ: .e-p-sections-bc içindeki ekstra ikon elementini gizle (Yalnızca tekil ana buton kalır) */
.entrance-popup-bc .e-p-sections-bc .e-p-section-icon-bc,
.entrance-popup-bc .e-p-sections-bc i,
.popup-inner-bc .e-p-sections-bc .e-p-section-icon-bc,
.popup-inner-bc .e-p-sections-bc i,
.e-p-header-bc .e-p-sections-bc .e-p-section-icon-bc,
.e-p-header-bc .e-p-sections-bc i,
.entrance-popup-bc .e-p-sections-bc > :first-child:not(:only-child):not(.e-p-section-title-bc) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.popup-inner-bc .popup-t-logo-w-bc img,
.popup-inner-bc .hdr-logo-bc,
.entrance-popup-bc .popup-t-logo-w-bc img,
.entrance-popup-bc .hdr-logo-bc {
height: 28px !important;
max-height: 28px !important;
width: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 0 10px rgba(0, 194, 255, 0.30)) !important;
}
/* ── 10d. Modal Üst Geçiş Butonları (GİRİŞ & ÜYE OL) — Tekil, İkonlu & Header İle Birebir ─── */
/* 1) Kayıt Ol modalındaki "GİRİŞ" butonu (➔] İkonlu & Header İle Birebir Outline Glass) */
.entrance-popup-bc.register .e-p-sections-bc .e-p-section-title-bc,
.entrance-popup-bc.register .e-p-sections-bc a,
.entrance-popup-bc.register .e-p-sections-bc button,
.entrance-popup-bc.register .e-p-sections-bc .btn,
.entrance-popup-bc .e-p-sections-bc .e-p-section-title-bc,
.entrance-popup-bc .e-p-sections-bc .btn.sign-in,
.entrance-popup-bc .e-p-sections-bc .btn.login,
.entrance-popup-bc #login_button_id,
.popup-inner-bc .btn.sign-in {
background: rgba(248, 250, 252, 0.08) !important;
border: 1px solid rgba(248, 250, 252, 0.18) !important;
color: #F8FAFC !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
border-radius: 10px !important;
padding: 0 16px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.entrance-popup-bc.register .e-p-sections-bc .e-p-section-title-bc::before,
.entrance-popup-bc.register .e-p-sections-bc a::before,
.entrance-popup-bc.register .e-p-sections-bc button::before,
.entrance-popup-bc.register .e-p-sections-bc .btn::before,
.entrance-popup-bc .e-p-sections-bc .e-p-section-title-bc::before,
.entrance-popup-bc .e-p-sections-bc .btn.sign-in::before,
.entrance-popup-bc #login_button_id::before {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
margin-right: 6px !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.entrance-popup-bc.register .e-p-sections-bc .e-p-section-title-bc:hover,
.entrance-popup-bc .e-p-sections-bc .e-p-section-title-bc:hover,
.entrance-popup-bc #login_button_id:hover {
background: rgba(248, 250, 252, 0.15) !important;
border-color: rgba(0, 194, 255, 0.50) !important;
color: #00C2FF !important;
box-shadow: 0 0 14px rgba(0, 194, 255, 0.30) !important;
}
/* 2) Giriş Yap modalındaki "ÜYE OL" butonu (👤+ İkonlu & Header İle Birebir Canlı Gradient) */
.entrance-popup-bc.sign-in .e-p-sections-bc .e-p-section-title-bc,
.entrance-popup-bc.sign-in .e-p-sections-bc a,
.entrance-popup-bc.sign-in .e-p-sections-bc button,
.entrance-popup-bc.sign-in .e-p-sections-bc .btn,
.entrance-popup-bc .e-p-sections-bc .btn.register,
.entrance-popup-bc .e-p-sections-bc .register,
.entrance-popup-bc #register_button_id,
.popup-inner-bc .btn.register {
background: linear-gradient(135deg, #00C2FF 0%, #7B2CBF 55%, #FF007A 100%) !important;
background-size: 140% 140% !important;
border: none !important;
color: #FFFFFF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
border-radius: 10px !important;
padding: 0 16px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 14px rgba(0, 194, 255, 0.35) !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.entrance-popup-bc.sign-in .e-p-sections-bc .e-p-section-title-bc::before,
.entrance-popup-bc.sign-in .e-p-sections-bc a::before,
.entrance-popup-bc.sign-in .e-p-sections-bc button::before,
.entrance-popup-bc.sign-in .e-p-sections-bc .btn::before,
.entrance-popup-bc .e-p-sections-bc .btn.register::before,
.entrance-popup-bc #register_button_id::before {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
margin-right: 6px !important;
background-color: #FFFFFF !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.entrance-popup-bc.sign-in .e-p-sections-bc .e-p-section-title-bc:hover,
.entrance-popup-bc .e-p-sections-bc .btn.register:hover,
.entrance-popup-bc #register_button_id:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px rgba(0, 194, 255, 0.50), 0 0 14px rgba(123, 44, 191, 0.30) !important;
}
/* ── 10e. Modal Gövdesi & Form Alanı Bütünlüğü (Masaüstü Tam Merkezleme & Genişlik) ─────── */
.reg-form-block-bc,
.entrance-popup-bc.register .reg-form-block-bc,
.entrance-popup-bc .reg-form-block-bc,
.entrance-form-content-section-bc,
.form-sign-bc {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 440px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.entrance-form-content-bc,
.reg-form-content,
.reg-form-fields {
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: 440px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* Modal İçerik Sarmalayıcısı — Form Öğelerinin Düzgün Yerleşimi & Ortalanması */
.entrance-popup-bc .entrance-form-bc,
.entrance-popup-bc.register .entrance-form-content-bc,
.entrance-popup-bc.sign-in .form-sign-bc,
.popup-inner-bc > form,
.entrance-popup-bc form {
padding: 24px 28px !important;
background: transparent !important;
width: 100% !important;
max-width: 440px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* Form Altı / Aksiyon / Buton Bölgesi — Ayrık Blok Rengi Tamamen Kaldırıldı */
.entrance-popup-bc.register .reg-form-block-bc .reg-form-footer-bc,
.entrance-popup-bc.register .reg-form-footer-bc,
.entrance-popup-bc .reg-form-block-bc .reg-form-footer-bc,
.entrance-popup-bc .reg-form-footer-bc,
.popup-inner-bc .reg-form-block-bc .reg-form-footer-bc,
.popup-inner-bc .reg-form-footer-bc,
.reg-form-block-bc .reg-form-footer-bc,
.reg-form-footer-bc,
.entrance-popup-bc.register .entrance-form-actions-holder-bc,
.entrance-popup-bc .entrance-form-actions-holder-bc,
.popup-inner-bc .entrance-form-actions-holder-bc,
.entrance-form-actions-holder-bc,
.entrance-form-action-item-bc,
.e-p-footer-bc,
.reg-step-footer-bc {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 !important;
margin-top: 14px !important;
position: static !important;
}
/* BEYAZ AYRAÇ ÇİZGİSİ VE ADIM ÇUBUĞU (step-indicator) TAMAMEN KALDIRILDI */
.entrance-popup-bc.register .reg-form-block-bc .reg-form-footer-bc .step-indicator,
.entrance-popup-bc.register .reg-form-block-bc .reg-form-footer-bc .step-indicator-active,
.entrance-popup-bc.register .reg-form-block-bc .reg-form-footer-bc .step-indicator.step-indicator-active,
.entrance-popup-bc.register .reg-form-footer-bc .step-indicator,
.entrance-popup-bc.register .reg-form-footer-bc .step-indicator-active,
.entrance-popup-bc.register .reg-form-footer-bc .step-indicator.step-indicator-active,
.entrance-popup-bc.register .reg-form-footer-bc [class*="step"],
.entrance-popup-bc.register [class*="step-indicator"],
.entrance-popup-bc .reg-form-footer-bc .step-indicator,
.entrance-popup-bc .reg-form-footer-bc .step-indicator-active,
.entrance-popup-bc .reg-form-footer-bc .step-indicator.step-indicator-active,
.entrance-popup-bc .reg-form-footer-bc [class*="step"],
.popup-inner-bc .reg-form-footer-bc .step-indicator,
.popup-inner-bc .reg-form-footer-bc .step-indicator-active,
.popup-inner-bc .reg-form-footer-bc .step-indicator.step-indicator-active,
.popup-inner-bc .reg-form-footer-bc [class*="step"],
.reg-form-block-bc .reg-form-footer-bc .step-indicator,
.reg-form-block-bc .reg-form-footer-bc .step-indicator-active,
.reg-form-block-bc .reg-form-footer-bc .step-indicator.step-indicator-active,
.reg-form-block-bc .reg-form-footer-bc [class*="step"],
.reg-form-block-bc .step-indicator,
.reg-form-block-bc .step-indicator-active,
.reg-form-footer-bc .step-indicator,
.reg-form-footer-bc .step-indicator-active,
.reg-form-footer-bc .step-indicator.step-indicator-active,
.reg-form-footer-bc [class*="step-indicator"],
.reg-form-footer-bc [class*="step"],
.popup-inner-bc .step-indicator,
.popup-inner-bc .step-indicator-active,
.popup-inner-bc [class*="step-indicator"],
.steps-indicator,
.step-indicator,
.step-indicator-active,
.steps-indicator-bc,
.reg-step-indicator-bc,
.entrance-popup-bc hr,
.popup-inner-bc hr,
.reg-form-footer-bc hr,
.entrance-popup-bc .separator-bc,
.entrance-popup-bc [class*="separator"],
.entrance-popup-bc [class*="divider"],
.reg-form-footer-bc::before,
.reg-form-footer-bc::after,
.entrance-form-actions-holder-bc::before,
.entrance-form-actions-holder-bc::after,
.live-chat-adviser-bc::before,
.live-chat-adviser-bc::after {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
content: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
border-color: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
overflow: hidden !important;
}
/* Kayıt Başlıkları & Sloganların Tam Ortalanması */
.reg-form-block-bc .ds-title,
.entrance-popup-bc.register .ds-title,
.reg-form-block-bc h1,
.reg-form-block-bc h2,
.reg-form-block-bc h3,
.reg-form-block-bc p {
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
}
/* Üst Küçük Başlık / Slogan */
.reg-form-block-bc p:first-of-type,
.reg-form-block-bc .reg-subtitle-bc,
.entrance-popup-bc.register .reg-subtitle-bc {
color: #00C2FF !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
text-shadow: 0 0 10px rgba(0, 194, 255, 0.40) !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
}
/* Büyük Vurgulu Başlık */
.reg-form-block-bc .ds-title,
.entrance-popup-bc.register .ds-title,
.reg-form-block-bc h2,
.reg-form-block-bc h3 {
color: #FFFFFF !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
margin-bottom: 16px !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.60) !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
}
/* ── 10f. Gelişmiş Glassmorphism Form Girişleri & Placeholder'lar ─────────── */
.reg-form-block-bc .form-control-bc,
.form-sign-bc .form-control-bc,
.entrance-popup-bc .form-control-bc,
.entrance-form-bc .form-control-bc {
background: rgba(248, 250, 252, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 12px !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
margin-bottom: 10px !important;
padding: 6px 14px !important;
position: relative !important;
}
.reg-form-block-bc .form-control-bc:hover,
.form-sign-bc .form-control-bc:hover,
.entrance-popup-bc .form-control-bc:hover {
background: rgba(248, 250, 252, 0.07) !important;
border-color: rgba(0, 194, 255, 0.45) !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20), 0 0 14px rgba(0, 194, 255, 0.20) !important;
}
.reg-form-block-bc .form-control-bc:focus-within,
.reg-form-block-bc .form-control-bc.focused,
.form-sign-bc .form-control-bc:focus-within,
.form-sign-bc .form-control-bc.focused,
.entrance-popup-bc .form-control-bc:focus-within,
.entrance-popup-bc .form-control-bc.focused {
background: rgba(15, 23, 42, 0.90) !important;
border-color: #00C2FF !important;
box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.20), 0 0 20px rgba(0, 194, 255, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
transform: translateY(-1px) !important;
}
/* Placeholder / Kayan Başlık Tipografisi (Gelişmiş & Prestijli) */
.reg-form-block-bc .form-control-title-bc,
.form-sign-bc .form-control-title-bc,
.entrance-popup-bc .form-control-title-bc {
color: #94A3B8 !important;
font-family: var(--g-font-ui, 'Inter', sans-serif) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
transition: all 0.2s ease !important;
}
.reg-form-block-bc .form-control-bc:focus-within .form-control-title-bc,
.reg-form-block-bc .form-control-bc.focused .form-control-title-bc,
.form-sign-bc .form-control-bc:focus-within .form-control-title-bc,
.form-sign-bc .form-control-bc.focused .form-control-title-bc,
.entrance-popup-bc .form-control-bc:focus-within .form-control-title-bc,
.entrance-popup-bc .form-control-bc.focused .form-control-title-bc {
color: #00C2FF !important;
text-shadow: 0 0 10px rgba(0, 194, 255, 0.50) !important;
font-weight: 700 !important;
}
/* Input Yazı Tipi & Rengi */
.reg-form-block-bc .form-control-input-bc,
.form-sign-bc .form-control-input-bc,
.entrance-popup-bc .form-control-input-bc,
.entrance-popup-bc .form-control-textarea-bc,
.entrance-popup-bc .form-control-select-bc {
color: #FFFFFF !important;
font-family: var(--g-font-ui, 'Inter', sans-serif) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.2px !important;
background: transparent !important;
caret-color: #00C2FF !important;
}
/* HTML5 Placeholders */
.reg-form-block-bc input::placeholder,
.form-sign-bc input::placeholder,
.entrance-popup-bc input::placeholder,
.entrance-form-bc input::placeholder {
color: rgba(148, 163, 184, 0.60) !important;
font-family: var(--g-font-ui, 'Inter', sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
}
/* Ülke Seçim Alanı */
.reg-form-block-bc .form-control-select-bc,
.entrance-popup-bc .form-control-select-bc {
color: #FFFFFF !important;
font-weight: 600 !important;
}
.reg-form-block-bc .form-control-select-bc .flag-bc,
.entrance-popup-bc .form-control-select-bc .flag-bc {
border-radius: 3px !important;
margin-right: 8px !important;
}
/* Şifre Göz İkonu (Sarı Tamamen Kaldırıldı — Titanyum & Neon Camgöbeği) */
.form-sign-bc .form-control-icon-bc,
.reg-form-block-bc .form-control-icon-bc,
.entrance-popup-bc .form-control-icon-bc,
.entrance-popup-bc .dropdownIcon-bc,
.bc-i-eye-hidden,
.bc-i-eye {
color: #94A3B8 !important;
font-size: 18px !important;
transition: color 0.2s ease, transform 0.2s ease !important;
cursor: pointer !important;
}
.form-sign-bc .form-control-icon-bc:hover,
.reg-form-block-bc .form-control-icon-bc:hover,
.entrance-popup-bc .form-control-icon-bc:hover,
.bc-i-eye-hidden:hover,
.bc-i-eye:hover {
color: #00C2FF !important;
transform: scale(1.1) !important;
}
/* Onay Kutusu (Beni Hatırla) */
.form-sign-bc .checkbox-control-bc,
.reg-form-block-bc .checkbox-control-bc,
.entrance-popup-bc .checkbox-control-bc {
display: flex !important;
align-items: center !important;
margin: 14px 0 !important;
}
.form-sign-bc .checkbox-control-icon-bc,
.reg-form-block-bc .checkbox-control-icon-bc,
.entrance-popup-bc .checkbox-control-icon-bc {
background: rgba(248, 250, 252, 0.08) !important;
border: 1px solid rgba(248, 250, 252, 0.22) !important;
border-radius: 6px !important;
width: 18px !important;
height: 18px !important;
transition: all 0.2s ease !important;
}
.form-sign-bc .checkbox-control-input-bc:checked ~ .checkbox-control-icon-bc,
.reg-form-block-bc .checkbox-control-input-bc:checked ~ .checkbox-control-icon-bc,
.entrance-popup-bc .checkbox-control-input-bc:checked ~ .checkbox-control-icon-bc {
background: #00C2FF !important;
border-color: #00C2FF !important;
color: #0F172A !important;
box-shadow: 0 0 10px rgba(0, 194, 255, 0.45) !important;
}
.form-sign-bc .checkbox-control-text-bc,
.reg-form-block-bc .checkbox-control-text-bc,
.entrance-popup-bc .checkbox-control-text-bc,
.entrance-popup-bc .privacy-police-text {
color: #94A3B8 !important;
font-family: var(--g-font-ui, 'Inter', sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
margin-left: 8px !important;
}
/* ── 10g. Modal Submit / Aksiyon Butonları ("GİRİŞ" & "ÜYE OL" — İkonlu) ──── */
.form-sign-bc .btn,
.form-sign-bc button,
.form-sign-bc button[type="submit"],
.reg-form-block-bc .btn,
.reg-form-block-bc button,
.reg-form-block-bc button[type="submit"],
.entrance-form-bc button[type="submit"],
.entrance-form-bc .btn,
.entrance-form-bc .btn.a-color,
.entrance-popup-bc .btn.a-color,
.entrance-popup-bc.register .btn,
.entrance-popup-bc.sign-in .btn,
.entrance-form-actions-holder-bc .btn,
.entrance-form-action-item-bc .btn {
background: linear-gradient(135deg, #00C2FF 0%, #7B2CBF 55%, #FF007A 100%) !important;
background-size: 140% 140% !important;
border: none !important;
color: #FFFFFF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
border-radius: 12px !important;
height: 48px !important;
min-height: 48px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 6px 22px rgba(0, 194, 255, 0.40), 0 0 16px rgba(123, 44, 191, 0.30) !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Giriş Submit Butonu İkonu (➔]) — Tüm Muhtemel Seçiciler Dahil */
.entrance-popup-bc.sign-in .btn::before,
.entrance-popup-bc.sign-in button::before,
.entrance-popup-bc.sign-in button[type="submit"]::before,
.entrance-popup-bc.sign-in .entrance-form-action-item-bc .btn::before,
.entrance-popup-bc.sign-in .entrance-form-actions-holder-bc .btn::before,
.entrance-popup-bc.sign-in .btn.a-color::before,
.entrance-popup-bc.sign-in .form-sign-bc .btn::before,
.form-sign-bc .btn::before,
.form-sign-bc button::before,
.form-sign-bc button[type="submit"]::before,
.entrance-form-bc.login button[type="submit"]::before,
.entrance-form-bc.login .btn::before,
.entrance-popup-bc [data-action="login"]::before {
content: "" !important;
display: inline-block !important;
width: 17px !important;
height: 17px !important;
margin-right: 8px !important;
background-color: #FFFFFF !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
/* Üye Ol Submit Butonu İkonu (👤+) — Tüm Muhtemel Seçiciler Dahil */
.entrance-popup-bc.register .btn::before,
.entrance-popup-bc.register button::before,
.entrance-popup-bc.register button[type="submit"]::before,
.entrance-popup-bc.register .entrance-form-action-item-bc .btn::before,
.entrance-popup-bc.register .entrance-form-actions-holder-bc .btn::before,
.entrance-popup-bc.register .btn.a-color::before,
.entrance-popup-bc.register .reg-form-block-bc .btn::before,
.reg-form-block-bc .btn::before,
.reg-form-block-bc button::before,
.reg-form-block-bc button[type="submit"]::before,
.entrance-form-bc.registration button[type="submit"]::before,
.entrance-form-bc.registration .btn::before,
.entrance-popup-bc [data-action="register"]::before {
content: "" !important;
display: inline-block !important;
width: 17px !important;
height: 17px !important;
margin-right: 8px !important;
background-color: #FFFFFF !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.form-sign-bc .btn span,
.form-sign-bc button[type="submit"] span,
.reg-form-block-bc .btn span,
.reg-form-block-bc button[type="submit"] span,
.entrance-form-bc button[type="submit"] span,
.entrance-form-bc .btn.a-color span,
.entrance-popup-bc .btn.a-color span,
.entrance-popup-bc.register .btn span,
.entrance-popup-bc.sign-in .btn span {
color: #FFFFFF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
}
.form-sign-bc .btn:hover,
.reg-form-block-bc .btn:hover,
.entrance-form-bc button[type="submit"]:hover,
.entrance-form-bc .btn.a-color:hover,
.entrance-popup-bc .btn.a-color:hover,
.entrance-popup-bc.register .btn:hover,
.entrance-popup-bc.sign-in .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(0, 194, 255, 0.60), 0 0 22px rgba(123, 44, 191, 0.45) !important;
filter: brightness(1.08) !important;
}
.form-sign-bc .btn:active,
.reg-form-block-bc .btn:active,
.entrance-form-bc button[type="submit"]:active,
.entrance-form-bc .btn.a-color:active,
.entrance-popup-bc.register .btn:active,
.entrance-popup-bc.sign-in .btn:active {
transform: scale(0.98) !important;
}
/* ── 10g. "ŞİFRENİZİ Mİ UNUTTUNUZ?" (Sarı Kaldırıldı — Marka Camgöbeği) ──── */
.form-sign-bc .sg-n-forgot-password,
.entrance-popup-bc .sg-n-forgot-password,
.sg-n-forgot-password-text a,
.sg-n-forgot-password {
color: #00C2FF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
display: inline-block !important;
margin-top: 14px !important;
text-align: center !important;
}
.form-sign-bc .sg-n-forgot-password:hover,
.entrance-popup-bc .sg-n-forgot-password:hover,
.sg-n-forgot-password-text a:hover,
.sg-n-forgot-password:hover {
color: #7DD8FF !important;
text-shadow: 0 0 14px rgba(0, 194, 255, 0.65) !important;
}
/* ── 10h. "DESTEK İLE İLETİŞİME GEÇİN" (Beyaz Çizgi Yok, Şeffaf & Uyumlu) ── */
.form-sign-bc .live-chat-adviser-bc,
.entrance-popup-bc .live-chat-adviser-bc,
.reg-form-footer-bc .live-chat-adviser-bc,
.live-chat-adviser-bc {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: #94A3B8 !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.6px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin-top: 18px !important;
margin-bottom: 8px !important;
padding: 0 !important;
cursor: pointer !important;
width: 100% !important;
}
.live-chat-adviser-bc .bc-i-live-chat {
font-size: 16px !important;
color: #00C2FF !important;
transition: all 0.2s ease !important;
}
.live-chat-adviser-bc span {
color: #94A3B8 !important;
transition: all 0.2s ease !important;
}
.form-sign-bc .live-chat-adviser-bc:hover,
.entrance-popup-bc .live-chat-adviser-bc:hover,
.live-chat-adviser-bc:hover,
.live-chat-adviser-bc:hover span {
color: #00C2FF !important;
text-shadow: 0 0 10px rgba(0, 194, 255, 0.40) !important;
}
.live-chat-adviser-bc:hover .bc-i-live-chat {
color: #7DD8FF !important;
transform: scale(1.15) !important;
}
/* ── 10i. Bahis Kuponu / Betslip Modalı & Yan Panel ──────────────────────── */
.betslip-holder-bc,
.betslip-bc,
.sidePanel-holder-bc:has(.betslip-bc),
.sp-betslip-bc {
background: #0F172A !important;
background-color: #0F172A !important;
border-left: 1px solid rgba(248, 250, 252, 0.10) !important;
color: #F8FAFC !important;
}
.betslip-header-bc,
.betslip-tabs-bc {
background: rgba(15, 23, 42, 0.85) !important;
border-bottom: 1px solid rgba(248, 250, 252, 0.08) !important;
}
.betslip-tab-bc.active,
.betslip-tab-item-bc.active {
color: #00C2FF !important;
border-bottom: 2px solid #00C2FF !important;
background: rgba(0, 194, 255, 0.08) !important;
font-weight: 700 !important;
}
.bet-item-bc,
.betslip-single-bet-bc,
.betslip-event-bc {
background: #1E293B !important;
border: 1px solid rgba(248, 250, 252, 0.08) !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
margin-bottom: 8px !important;
}
.bet-item-bc .odd-rate-bc,
.betslip-event-bc .odd-bc,
.betslip-odd-value {
color: #00C2FF !important;
font-family: var(--g-font-num, monospace) !important;
font-weight: 700 !important;
}
.betslip-holder-bc .bs-button-bc,
.betslip-holder-bc .place-bet-btn,
.betslip-holder-bc .btn-place-bet,
.betslip-holder-bc button[type="submit"],
.betslip-action-btn,
.quick-bet-bc .btn {
background: linear-gradient(135deg, #00C2FF 0%, #7B2CBF 55%, #FF007A 100%) !important;
background-size: 140% 140% !important;
border: none !important;
color: #FFFFFF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
border-radius: 12px !important;
height: 44px !important;
box-shadow: 0 4px 18px rgba(0, 194, 255, 0.40) !important;
transition: all 0.25s ease !important;
cursor: pointer !important;
}
.betslip-holder-bc .bs-button-bc:hover,
.betslip-holder-bc .place-bet-btn:hover,
.betslip-action-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(0, 194, 255, 0.55), 0 0 16px rgba(123, 44, 191, 0.35) !important;
}
.sp-button-bc[data-component="Betslip"] .count-blink-even,
.betslip-count-badge,
.count-blink-even {
background: #FF007A !important;
color: #FFFFFF !important;
font-weight: 700 !important;
box-shadow: 0 0 8px rgba(255, 0, 122, 0.6) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
* ══ 11. BİLDİRİM, BAŞARI & BONUS MODALLARI (.availableBonusContent — MASAÜSTÜ)
* ──────────────────────────────────────────────────────────────────────────
* - Gönye & Oran düzeltmesi: 520px genişlik, ferah ve görkemli altın oran.
* - Lüks neon başarı rozeti, Outfit 800 bold tipografi, degrade ayraç.
* - GeminiBahis canlı gradient "TAMAM" butonu (✓ İkonlu, neon gölgeli).
* ══════════════════════════════════════════════════════════════════════════ */
/* Modal Kabuğu Boyut & Gönye İyileştirmesi (Genişletilmiş & İdeal Orantılı) */
.popup-inner-bc:has(.availableBonusContent),
.popup-middleware-bc:has(.availableBonusContent) .popup-inner-bc,
.popup-holder-bc:has(.availableBonusContent) .popup-inner-bc,
.popup-inner-bc:has(.availableBonusTitle),
.popup-holder-bc:has(.availableBonusTitle) .popup-inner-bc {
max-width: 520px !important;
width: 90vw !important;
min-height: 290px !important;
margin: auto !important;
padding: 0 !important;
border-radius: 22px !important;
background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 194, 255, 0.18) 0%, transparent 70%),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(123, 44, 191, 0.20) 0%, transparent 70%),
#0F172A !important;
background-color: #0F172A !important;
border: 1px solid rgba(248, 250, 252, 0.14) !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 45px rgba(0, 194, 255, 0.22) !important;
backdrop-filter: blur(24px) saturate(150%) !important;
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
overflow: hidden !important;
}
/* Modal Kapatma Butonu Konumu */
.popup-inner-bc:has(.availableBonusContent) .e-p-close-icon-bc,
.popup-inner-bc:has(.availableBonusContent) > .e-p-close-icon-bc,
.popup-inner-bc:has(.availableBonusTitle) .e-p-close-icon-bc {
top: 16px !important;
right: 16px !important;
z-index: 10 !important;
}
/* Modal İçerik Kutusu & Hizalama */
.availableBonusContent {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 42px 36px 34px !important;
width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
}
/* Başarı / Onay Rozeti (Animasyonlu Siber Neon Çember) */
.availableBonusContent::before {
content: "" !important;
display: block !important;
width: 58px !important;
height: 58px !important;
margin: 0 auto 18px auto !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(0, 194, 255, 0.25) 0%, rgba(123, 44, 191, 0.15) 70%), rgba(15, 23, 42, 0.85) !important;
border: 1.5px solid rgba(0, 194, 255, 0.50) !important;
box-shadow: 0 0 25px rgba(0, 194, 255, 0.35), inset 0 0 12px rgba(0, 194, 255, 0.20) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C2FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 28px 28px !important;
flex-shrink: 0 !important;
animation: geminiBonusBadgePulseDesk 2.5s infinite ease-in-out !important;
}
@keyframes geminiBonusBadgePulseDesk {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 20px rgba(0, 194, 255, 0.30), inset 0 0 10px rgba(0, 194, 255, 0.15);
}
50% {
transform: scale(1.06);
box-shadow: 0 0 32px rgba(0, 194, 255, 0.55), 0 0 18px rgba(123, 44, 191, 0.35), inset 0 0 14px rgba(0, 194, 255, 0.30);
}
}
/* Başlık */
.availableBonusContent .availableBonusTitle,
.availableBonusTitle {
display: block !important;
color: #FFFFFF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
text-align: center !important;
text-shadow: 0 0 18px rgba(0, 194, 255, 0.45) !important;
margin: 0 0 12px 0 !important;
}
/* Açıklama Metni */
.availableBonusContent .availableBonusTitleDesc,
.availableBonusTitleDesc {
display: block !important;
color: #94A3B8 !important;
font-family: var(--g-font-ui, 'Inter', sans-serif) !important;
font-size: 14px !important;
line-height: 1.65 !important;
font-weight: 500 !important;
text-align: center !important;
max-width: 440px !important;
margin: 0 auto 18px auto !important;
}
/* Lüks Neon Ayraç Çizgisi */
.availableBonusContent .divider,
.availableBonusContent > .divider {
height: 1px !important;
width: 100% !important;
max-width: 380px !important;
margin: 16px auto 22px auto !important;
background: linear-gradient(90deg, transparent 0%, rgba(0, 194, 255, 0.45) 30%, rgba(123, 44, 191, 0.45) 70%, transparent 100%) !important;
border: none !important;
}
/* Buton Bölgesi */
.availableBonusContent .availableBtnBlock,
.availableBtnBlock,
.availableBtnBlock.flexRow {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 6px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* TAMAM / Aksiyon Butonu */
.availableBonusContent .availableBtnBlock button,
.availableBonusContent .availableBtnBlock .btn,
.availableBonusContent .availableBtnBlock a,
.availableBonusContent .availableBtnBlock > *,
.availableBtnBlock button,
.availableBtnBlock .btn,
.availableBtnBlock a {
background: linear-gradient(135deg, #00C2FF 0%, #7B2CBF 55%, #FF007A 100%) !important;
background-size: 140% 140% !important;
border: none !important;
color: #FFFFFF !important;
font-family: var(--g-font-display, 'Outfit', sans-serif) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
border-radius: 12px !important;
height: 48px !important;
min-height: 48px !important;
min-width: 220px !important;
padding: 0 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 6px 22px rgba(0, 194, 255, 0.45), 0 0 16px rgba(123, 44, 191, 0.30) !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-decoration: none !important;
}
/* TAMAM Butonu İkonu (✓) */
.availableBonusContent .availableBtnBlock button::before,
.availableBonusContent .availableBtnBlock .btn::before,
.availableBonusContent .availableBtnBlock a::before,
.availableBonusContent .availableBtnBlock > *::before,
.availableBtnBlock button::before,
.availableBtnBlock .btn::before,
.availableBtnBlock a::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
margin-right: 9px !important;
background-color: #FFFFFF !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.availableBonusContent .availableBtnBlock button:hover,
.availableBonusContent .availableBtnBlock .btn:hover,
.availableBonusContent .availableBtnBlock a:hover,
.availableBonusContent .availableBtnBlock > *:hover,
.availableBtnBlock button:hover,
.availableBtnBlock .btn:hover,
.availableBtnBlock a:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(0, 194, 255, 0.60), 0 0 22px rgba(123, 44, 191, 0.45) !important;
filter: brightness(1.08) !important;
}
.availableBonusContent .availableBtnBlock button:active,
.availableBonusContent .availableBtnBlock .btn:active,
.availableBonusContent .availableBtnBlock a:active,
.availableBtnBlock button:active,
.availableBtnBlock .btn:active,
.availableBtnBlock a:active {
transform: scale(0.98) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
* 18.09.2026 — MASAÜSTÜ SOL MENÜ v2 (Betmarino birebir mantık, marka dili)
* ──────────────────────────────────────────────────────────────────────────
* Operatör kararı: üst menü kalkar, AYNI menü sola geçer.
* YENİ MENÜ YAZILMADI — mevcut header menüsü (`.nav-content-bc`, içeriği
* CMS › Menüler › "Header" konumundan gelir) CSS ile sol şeride çevrildi.
* Panelden öğe eklenir/çıkarılır/sıralanırsa sol menü KENDİLİĞİNDEN güncellenir.
*
* Referans: betmarino972.com (BetConstruct yerleşik `hasLeftMenu`) — canlı
* ölçüldü: kompakt 72px · açık 240px · kutucuk 208×43 · aralık 8px · kutucuk
* altında 1px parlak çizgi · hover'da sağdan sola parlayan degrade (270°) ·
* alt öğeler kutucuğun ALTINDA akordeon (› oku aşağı döner) · köşe rozetleri.
* Bu altyapıda o özellik YOK → aynı davranış CSS ile kuruldu.
*
* ⚠️ ÖZGÜLLÜK: Header CSS'in eski kuralları `html:root body #root .header-bc …`
* (1,3,2) + !important; bu bloğun seçicileri `html:root body #root.layout-bc`
* ile başlıyor.
* ══════════════════════════════════════════════════════════════════════════ */
:root {
--g-rail: 72px; /* kompakt şerit (Betmarino: 72) */
--g-rail-open: 240px; /* açık şerit (Betmarino: 240) */
--g-hdr: 80px; /* header satırı (Tema CSS: .hdr-main-content-bc{height:80px}) */
--g-tile-h: 43px; /* kutucuk yüksekliği (Betmarino: 43) */
}
/* 🔴 ÖN KOŞUL — header'daki backdrop-filter KALDIRILDI.
* `backdrop-filter` taşıyan ata, içindeki `position:fixed` öğeler için yeni
* kapsayıcı blok kurar: şerit ekrana değil header'a sabitlenirdi. (Aynı
* özellik ilk gün bildirim panelinin "içeri açılmasının" sebebiydi.) */
html:root body header.header-bc {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* ── SAYFA DÜZENİ ─────────────────────────────────────────────────────────
* İçerik + footer şerit kadar sağa (#root sol boşluğu). Header holder negatif
* marjla TAM ENE yayılır; boşluk holder'a değil `header.header-bc`nin İÇİNE
* verilir → header zemini x=0'dan başlar, sol üst köşede kare boşluk kalmaz
* (v1'de holder'a verilmişti, köşe farklı tonda kalıyordu), logo satırı da
* içerikle aynı eksende durur. */
html:root body #root.layout-bc {
padding-left: var(--g-rail) !important;
box-sizing: border-box !important;
}
html:root body #root.layout-bc > .layout-header-holder-bc {
margin-left: calc(-1 * var(--g-rail)) !important;
width: calc(100% + var(--g-rail)) !important;
padding-left: 0 !important;
box-sizing: border-box !important;
}
html:root body #root.layout-bc header.header-bc {
padding-left: var(--g-rail) !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* ── ŞERİT ────────────────────────────────────────────────────────────────── */
html:root body #root.layout-bc > div.layout-header-holder-bc > header > div.nav-content-bc {
position: fixed !important;
top: var(--g-hdr) !important;
bottom: 0 !important;
left: 0 !important;
width: var(--g-rail) !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 16px !important;
z-index: 960 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
box-sizing: border-box !important;
background:
radial-gradient(160% 35% at 0% 0%, rgba(0, 194, 255, .10), transparent 60%),
linear-gradient(180deg, #111A2E 0%, #0F172A 100%) !important;
border: 0 !important;
border-right: 1px solid rgba(248, 250, 252, .07) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: width .24s cubic-bezier(.4, 0, .2, 1), box-shadow .24s ease !important;
}
html:root body #root.layout-bc > div.layout-header-holder-bc > header > div.nav-content-bc::-webkit-scrollbar {
display: none;
}
html:root body #root.layout-bc > div.layout-header-holder-bc > header > div.nav-content-bc:hover {
width: var(--g-rail-open) !important;
box-shadow: 24px 0 60px rgba(2, 6, 23, .55) !important;
}
/* Menü açıkken arkadaki sayfa kararır + bulanıklaşır (Betmarino'daki odak
* hissi). Şeridin kendi pseudo'su, ekrana sabit; tıklamayı YUTMAZ
* (`pointer-events:none`) → fare içeriğe geçince menü kendiliğinden kapanır. */
html:root body #root.layout-bc > div.layout-header-holder-bc > header > div.nav-content-bc::before {
content: "" !important;
position: fixed !important;
top: var(--g-hdr) !important;
bottom: 0 !important;
left: var(--g-rail-open) !important;
right: 0 !important;
background: rgba(15, 23, 42, .45) !important;
-webkit-backdrop-filter: blur(6px) !important;
backdrop-filter: blur(6px) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .24s ease, visibility .24s ease !important;
}
html:root body #root.layout-bc > div.layout-header-holder-bc > header > div.nav-content-bc:hover::before {
opacity: 1 !important;
visibility: visible !important;
}
/* İç kaplar: yatay şerit düzenini sıfırla */
html:root body #root.layout-bc .header-bc .nav-content-bc .nav-content-menu,
html:root body #root.layout-bc .header-bc .nav-content-bc .nav-menu-container,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
overflow: visible !important;
}
/* Öğe DİKEY: eski kurallar li'yi yatay flex yapıyordu → alt menü kutucuğun
* yanına düşüyordu (canlıda görüldü). */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
position: relative !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
flex: none !important;
}
/* ── KUTUCUK ──────────────────────────────────────────────────────────────
* Kompaktta 40×43 ikon kutusu, açılınca 208×43 tam kutucuk. İkonun x'i iki
* durumda da AYNI (sol dolgu sabit) → açılırken ikon zıplamaz.
* Betmarino'nun altta 1px parlak mavi çizgisi → marka neon mavisi. */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
height: var(--g-tile-h) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 0 10px !important;
border: 0 !important;
border-bottom: 1px solid rgba(0, 194, 255, .55) !important;
border-radius: 8px !important;
background: linear-gradient(180deg, rgba(30, 41, 59, .75), rgba(22, 32, 52, .75)) !important;
box-shadow: inset 0 1px 0 rgba(248, 250, 252, .05), 0 4px 10px -6px rgba(0, 194, 255, .35) !important;
color: rgba(248, 250, 252, .78) !important;
font-family: 'Outfit', 'Inter', sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
overflow: hidden !important;
box-sizing: border-box !important;
transition: background .22s ease, color .22s ease, border-color .22s ease !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn .CMSIconSVGWrapper {
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
color: #7DD8FF !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn .CMSIconSVGWrapper svg {
width: 19px !important;
height: 19px !important;
}
/* Etiket: kompaktta görünmez, şerit açılınca belirir */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn > span:not(.CMSIconSVGWrapper) {
opacity: 0 !important;
transition: opacity .16s ease !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc:hover .bg-nav-list > li > a.bg-nav-btn > span:not(.CMSIconSVGWrapper) {
opacity: 1 !important;
transition-delay: .08s !important;
}
/* Hover + aktif sayfa: Betmarino'nun "sağdan sola parlayan" degradesi,
* marka renkleriyle (neon mavi → antrasit) */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn:hover,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn.active {
background: linear-gradient(270deg, rgba(0, 194, 255, .45) 0%, rgba(123, 44, 191, .22) 45%, rgba(22, 32, 52, .85) 80%) !important;
border-bottom-color: #00C2FF !important;
color: #FFFFFF !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn:hover .CMSIconSVGWrapper,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn.active .CMSIconSVGWrapper {
color: #FFFFFF !important;
}
/* Eski yatay menünün alt çizgi pseudo'sunu kapat (v1'in sol göstergesi dahil) */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn::after {
content: none !important;
display: none !important;
}
/* ── ROZETLER (Betmarino: kutucuğun sağ üst köşesinde renkli etiket) ────────
* Bağlantı ADRESİNE bağlı (sıraya değil): menü sırası panelden değişse de
* rozet doğru öğede kalır. Yalnız menü AÇIKKEN görünür (kompaktta ikonun
* üstüne binerdi). Metni değiştirmek için yalnız `content` düzenlenir. */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="/sports/live"]::before,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="/promotions"]::before,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="wonder-wheel"]::before,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="tournament"]::before,
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="live-casino"]::before {
position: absolute !important;
top: 0 !important;
right: 0 !important;
padding: 2px 6px !important;
border-radius: 0 8px 0 6px !important;
font-family: 'Outfit', 'Inter', sans-serif !important;
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
line-height: 1.35 !important;
color: #FFFFFF !important;
background: linear-gradient(135deg, #00C2FF, #7B2CBF 55%, #FF007A) !important;
opacity: 0 !important;
transition: opacity .16s ease !important;
pointer-events: none !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc:hover .bg-nav-list > li > a.bg-nav-btn::before {
opacity: 1 !important;
transition-delay: .08s !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="/sports/live"]::before { content: "CANLI" !important; background: #E11D48 !important; }
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="live-casino"]::before { content: "EN İYİ" !important; }
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="/promotions"]::before { content: "YENİ" !important; }
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="wonder-wheel"]::before { content: "GÜNLÜK" !important; }
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="tournament"]::before { content: "ÖDÜLLÜ" !important; }
/* Kompaktta CANLI BAHİS ikonunda yanıp sönen canlı noktası (işlevsel → kırmızı) */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="/sports/live"] .CMSIconSVGWrapper {
position: relative !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > a.bg-nav-btn[href*="/sports/live"] .CMSIconSVGWrapper::after {
content: "";
position: absolute;
top: -3px;
right: -4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #FF3449;
animation: gbSolCanli 1.6s ease-out infinite;
}
@keyframes gbSolCanli {
0% { box-shadow: 0 0 0 0 rgba(255, 52, 73, .6); }
100% { box-shadow: 0 0 0 8px rgba(255, 52, 73, 0); }
}
/* ── ALT MENÜ = AKORDEON (Betmarino gibi kutucuğun ALTINDA açılır) ───────────
* Alt öğesi olan kutucukta sağda › oku; üzerine gelince ok aşağı döner ve
* alt öğeler altta, girintili açılır. Yalnız şerit açıkken çalışır. */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li:has(> .nav-menu-sub)::after {
content: "" !important;
position: absolute !important;
top: calc(var(--g-tile-h) / 2 - 4px) !important;
right: 14px !important;
width: 7px !important;
height: 7px !important;
border-right: 1.5px solid rgba(248, 250, 252, .7) !important;
border-bottom: 1.5px solid rgba(248, 250, 252, .7) !important;
transform: rotate(-45deg) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: transform .2s ease, opacity .16s ease !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc:hover .bg-nav-list > li:has(> .nav-menu-sub)::after {
opacity: 1 !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc:hover .bg-nav-list > li:has(> .nav-menu-sub):hover::after {
transform: rotate(45deg) !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-nav-list > li > .nav-menu-sub {
display: none !important;
position: static !important;
width: 100% !important;
min-width: 0 !important;
margin: 6px 0 0 !important;
padding: 0 0 0 14px !important;
border: 0 !important;
border-left: 1px solid rgba(0, 194, 255, .25) !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
/* 🔴 Eski bir kural alt menüye `pointer-events:none !important` veriyordu:
* "Avi" görünüyor ama tıklama arkadaki header'a gidiyordu (ölçüldü). */
pointer-events: auto !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc:hover .bg-nav-list > li:hover > .nav-menu-sub {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .nav-menu-sub li {
width: 100% !important;
margin: 0 !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .nav-menu-sub .nav-menu-item {
display: flex !important;
visibility: visible !important; /* eski bir kural alt öğeleri gizliyordu */
opacity: 1 !important;
pointer-events: auto !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
height: 36px !important;
padding: 0 10px !important;
border-radius: 6px !important;
border: 0 !important;
background: rgba(248, 250, 252, .04) !important;
color: rgba(248, 250, 252, .78) !important;
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
box-sizing: border-box !important;
}
html:root body #root.layout-bc .header-bc .nav-content-bc .nav-menu-sub .nav-menu-item:hover {
background: rgba(0, 194, 255, .14) !important;
color: #FFFFFF !important;
}
/* Spor sayfasının masaüstü alt şeridi (`.bg-subnav`) aynı kabın içinde;
* öğeleri eskiden de gizliydi — boş kabı şeritte yer kaplamasın. */
html:root body #root.layout-bc .header-bc .nav-content-bc .bg-subnav {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
html:root body #root.layout-bc > div.layout-header-holder-bc > header > div.nav-content-bc,
html:root body #root.layout-bc .header-bc .nav-content-bc * { transition: none !important; animation: none !important; }
}
/* ── HİZA VE RİTİM (ölçüldü) ─────────────────────────────────────────────
* ÜYE OL düğmesinin kendi 10px sağ marjı sıfır → sağ kenar içerikle aynı çizgi
* (ölçüldü: logo solu = slider solu, ÜYE OL sağı = slider sağı). */
html:root body #root.layout-bc .hdr-user-bc .btn.register {
margin-right: 0 !important;
}
/* Anasayfa bölüm ritmi 20px; footer öncesindeki 80px → 40px (yalnız masaüstü) */
html:root body #root.layout-bc.is-home-page .layout-content-holder-bc {
margin-bottom: 40px !important;
}
/* ══════════════════════════════════════════════════════════════════════════
* 18.09.2026 — GİRİŞ / KAYIT MODALLARI + PARA YATIR İKONU (masaüstü)
* Referans: galyabet256 giriş modalı (içerik kadar yükseklik, başlık, sade düzen).
* Canlıda ölçülerek kuruldu. Mobil ayrı ölçülecek (bu alan yalnız masaüstü).
* ══════════════════════════════════════════════════════════════════════════ */
/* GİRİŞ: modal içerik kadar (660 → ~620). Form `position:absolute` geliyordu,
* yükseklik hesabına girmiyordu → modal ya 660'a çivili ya da 58'e çöküyordu. */
.popup-inner-bc:has(.entrance-popup-bc.sign-in) {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.popup-inner-bc:has(.entrance-popup-bc.sign-in) .entrance-popup-bc,
.popup-inner-bc:has(.entrance-popup-bc.sign-in) .e-p-content-holder-bc,
.popup-inner-bc:has(.entrance-popup-bc.sign-in) .e-p-content-bc,
.popup-inner-bc:has(.entrance-popup-bc.sign-in) .e-p-body-bc,
.entrance-popup-bc.sign-in .entrance-form-bc,
.entrance-popup-bc.sign-in .form-sign-bc {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex: none !important;
}
.entrance-popup-bc.sign-in .entrance-form-bc {
position: relative !important;
inset: auto !important;
}
/* Form tam genişlik (440 → 478): sağda 38px boş kalıyordu */
.popup-inner-bc:has(.entrance-popup-bc) .entrance-popup-bc .entrance-form-bc {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Alanlar düğmeyle AYNI genişlikte: her alan kutusunda 15px yan dolgu vardı
* (alan 792–1128, düğme 777–1143 → eşitlendi 777–1143) */
.entrance-popup-bc .entrance-f-item-bc {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Başlık + marka sloganı (marka kitabı örneği: "Sisteme Giriş Yap") */
.entrance-popup-bc.sign-in .entrance-form-bc::before {
content: "SİSTEME GİRİŞ YAP";
display: block;
text-align: center;
margin: 26px 0 4px;
font-family: 'Outfit', 'Inter', sans-serif;
font-size: 21px;
font-weight: 700;
letter-spacing: .08em;
color: #F8FAFC;
}
.entrance-popup-bc.sign-in .form-sign-bc::before {
content: "HIZ · GÜVEN · TEKNOLOJİ";
display: block;
text-align: center;
margin: 0 0 22px;
font-family: 'Outfit', 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .28em;
color: rgba(125, 216, 255, .85);
}
/* KAYIT: üç katmanlı daralma açıldı (kap 440 · içerik 384 · alanlar 322) —
* alanlar ve metinler düğmeyle aynı çizgide (777) */
.entrance-popup-bc.register .reg-form-block-bc,
.entrance-popup-bc.register .entrance-form-bc,
.entrance-popup-bc.register .entrance-form-content-bc,
.entrance-popup-bc.register .reg-form-footer-bc {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
.entrance-popup-bc.register .reg-form-content,
.entrance-popup-bc.register .reg-form-fields {
width: 100% !important;
max-width: none !important;
flex: 1 1 auto !important;
}
.entrance-popup-bc.register .sg-n-text-row-1-bc,
.entrance-popup-bc.register .sg-n-text-row-2-bc {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.entrance-popup-bc.register .sg-n-text-row-2-bc,
.entrance-popup-bc.register .sg-n-text-row-2-bc * {
font-family: 'Outfit', 'Inter', sans-serif !important;
font-size: 18px !important;
line-height: 1.35 !important;
letter-spacing: .02em !important;
}
.entrance-popup-bc.register .sg-n-text-row-1-bc,
.entrance-popup-bc.register .sg-n-text-row-1-bc * {
font-size: 11px !important;
letter-spacing: .14em !important;
}
/* PARA YATIR — yalnız ikon (₺), neon çerçeveli cam kare, GİRİŞ'in solunda.
* Eski kurallar bu bağlantıyı display/visibility/opacity/boyut ile gizliyordu —
* hepsi geri açılıyor. ₺ ikon fontu değil `content: var(--para-sembol)` karakteri
* (Tema CSS `.tl-ikon:before`), font verilebilir. */
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
pointer-events: auto !important;
}
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons a.btn {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 12px !important;
border: 1px solid transparent !important;
background:
radial-gradient(circle at 50% 30%, rgba(0, 194, 255, .22), transparent 70%) padding-box,
linear-gradient(#131C31, #131C31) padding-box,
linear-gradient(135deg, #00C2FF, #7B2CBF, #FF007A) border-box !important;
box-shadow: 0 4px 16px rgba(0, 194, 255, .22) !important;
font-size: 0 !important;
pointer-events: auto !important;
transition: transform .2s ease, box-shadow .2s ease !important;
}
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons a.btn > span {
display: none !important;
}
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons a.btn .tl-ikon {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
font-size: 21px !important;
font-weight: 700 !important;
font-family: 'Space Grotesk', 'Inter', sans-serif !important;
font-style: normal !important;
background: linear-gradient(135deg, #7DD8FF, #00C2FF 45%, #FF007A);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons a.btn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 22px rgba(123, 44, 191, .45), 0 0 14px rgba(0, 194, 255, .35) !important;
}
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons a.btn::after,
html:root body #root.layout-bc .hdr-user-bc .header-custom-buttons a.btn::before {
display: none !important;
}
/* GİRİŞ'in eski ayraç marjı 20 → 10: ₺ · GİRİŞ · ÜYE OL arası eşit 22px (ölçüldü) */
html:root body #root.layout-bc .hdr-user-bc .btn.sign-in {
margin-left: 10px !important;
}
/* ══════════════════════════════════════════════════════════════════════════
* KAYIT MODALI — GALYABET DÜZENİ + KENAR SCROLL (18.09.2026, masaüstü)
* Panelde alan sırası/açma-kapama ayarı YOK → CSS grid + order.
* Adı|Soyadı yan yana; İkinci isim + 2. posta kodu gizli; sıra: Kullanıcı adı,
* E-posta, Şifre, Şifre tekrar. Form sağ padding 0 → scroll modal kenarında.
* Alanlar, başlık, ÜYE OL butonu aynı çizgide (ölçüldü).
* ══════════════════════════════════════════════════════════════════════════ */
.entrance-popup-bc.register .entrance-form-content-section-bc{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important;align-items:start !important}
.entrance-popup-bc.register .entrance-form-content-section-bc > *{grid-column:1/-1 !important;margin:0 !important;order:50}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="middle_name"]),
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="zip_code_2"]){display:none !important}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="first_name"]){grid-column:1 !important;order:1}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="last_name"]){grid-column:2 !important;order:2}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="username"]){order:3}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="email"]){order:4}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="password"]){order:5}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="repeat_password"]){order:6}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="gender"]){grid-column:1 !important;order:60}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="city"]){grid-column:2 !important;order:61}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="currency"]){grid-column:1 !important;order:70}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="loyalty_code"]){grid-column:2 !important;order:71}
.entrance-popup-bc.register .entrance-form-content-section-bc > :has([name="agree"]){order:99}
.entrance-popup-bc.register form.entrance-form-bc.registration{padding-right:0 !important}
.entrance-popup-bc.register .entrance-form-content-bc{padding-right:0 !important}
.entrance-popup-bc.register .reg-form-content{margin-right:0 !important;padding-right:49px !important;scrollbar-width:thin;scrollbar-color:rgba(0,194,255,.45) transparent}
.entrance-popup-bc.register .reg-form-content::-webkit-scrollbar{width:5px}
.entrance-popup-bc.register .reg-form-content::-webkit-scrollbar-thumb{background:rgba(0,194,255,.45);border-radius:5px}
.entrance-popup-bc.register .reg-form-footer-bc .entrance-form-actions-holder-bc{width:auto !important;max-width:none !important;margin-left:28px !important;margin-right:59px !important}
.entrance-popup-bc.register .reg-form-footer-bc .entrance-form-actions-holder-bc .btn{width:100% !important;max-width:none !important;box-sizing:border-box !important}
/* ══════════════════════════════════════════════════════════════════════════
* GİRİŞ YAPMIŞ ÜST BAR — SEVİYE ROZETİ + BAKİYE + PROFİL (18.09.2026, masaüstü)
* Paket seviye rozeti (.loyaltyBonusHeader, "Bronze") açık mavi kurdele +
* aynı renkte yazı → okunmuyordu. Kurdele katmanları + pseudo kuyruklar gizlendi,
* yerine gradyan çerçeveli cam hap (madalya + seviye adı).
* Sıra: rozet | ₺ para yatır | bakiye hapı | profil halkası — hepsi 42px, aynı hizada.
* ══════════════════════════════════════════════════════════════════════════ */
html:root body #root.layout-bc .loyaltyBonusHeader{display:inline-flex !important;align-items:center !important;flex-direction:row-reverse !important;gap:8px !important;width:auto !important;height:42px !important;padding:0 14px 0 8px !important;margin:0 10px 0 0 !important;border-radius:999px !important;text-decoration:none !important;box-sizing:border-box !important;background:linear-gradient(rgba(15,23,42,.92),rgba(15,23,42,.92)) padding-box,linear-gradient(90deg,rgba(0,194,255,.55),rgba(123,44,191,.55),rgba(255,0,122,.45)) border-box !important;border:1px solid transparent !important;box-shadow:inset 0 1px 0 rgba(248,250,252,.06),0 4px 14px rgba(2,6,23,.35) !important;transition:box-shadow .2s ease,transform .2s ease !important}
html:root body #root.layout-bc .loyaltyBonusHeader:hover{box-shadow:inset 0 1px 0 rgba(248,250,252,.08),0 6px 20px rgba(0,194,255,.22) !important;transform:translateY(-1px)}
html:root body #root.layout-bc .loyaltyBonusHeader::before,
html:root body #root.layout-bc .loyaltyBonusHeader::after,
html:root body #root.layout-bc .loyaltyBonusHeader .loyaltyBonusHeaderShadow,
html:root body #root.layout-bc .loyaltyBonusHeader .loyaltyBonusHeaderBackground{display:none !important;content:none !important}
html:root body #root.layout-bc .loyaltyBonusHeader .loyaltyBonusImg{position:static !important;width:24px !important;height:24px !important;margin:0 !important;filter:drop-shadow(0 0 6px rgba(205,127,50,.45)) !important}
html:root body #root.layout-bc .loyaltyBonusHeader .loyaltyBonusHeaderText{position:static !important;margin:0 !important;padding:0 !important;color:#F8FAFC !important;font-family:'Space Grotesk','Inter',sans-serif !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.08em !important;text-transform:uppercase !important;line-height:1 !important;max-width:90px !important}
html:root body #root.layout-bc .hdr-user-bc{display:flex !important;align-items:center !important;gap:10px !important}
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav{margin:0 !important;padding:0 !important;border:0 !important}
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav,
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav > .nav-menu-other,
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav > .nav-menu-other > li{height:42px !important;display:flex !important;align-items:center !important}
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav::before,
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav::after{display:none !important}
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav:not(.profileDetails) > .nav-menu-other > li > a.nav-menu-item{display:flex !important;align-items:center !important;height:42px !important;padding:0 16px !important;border-radius:12px !important;background:rgba(30,41,59,.6) !important;border:1px solid rgba(248,250,252,.08) !important;box-shadow:inset 0 1px 0 rgba(248,250,252,.05) !important;transition:border-color .2s ease,background .2s ease !important}
html:root body #root.layout-bc .hdr-user-bc > .header-user-nav:not(.profileDetails) > .nav-menu-other > li > a.nav-menu-item:hover{border-color:rgba(0,194,255,.45) !important;background:rgba(30,41,59,.85) !important}
html:root body #root.layout-bc .hdr-user-bc .hdr-user-info-content-bc{color:#F8FAFC !important;font-family:'Space Grotesk','Inter',sans-serif !important;font-size:14px !important;font-weight:600 !important;font-variant-numeric:tabular-nums !important;letter-spacing:.02em !important}
html:root body #root.layout-bc .hdr-user-bc > .profileDetails > .nav-menu-other > li > a.nav-menu-item{display:flex !important;align-items:center !important;justify-content:center !important;width:42px !important;height:42px !important;padding:0 !important;border-radius:50% !important;background:linear-gradient(#1E293B,#1E293B) padding-box,linear-gradient(135deg,#00C2FF,#7B2CBF,#FF007A) border-box !important;border:1.5px solid transparent !important;box-sizing:border-box !important;transition:box-shadow .2s ease !important}
html:root body #root.layout-bc .hdr-user-bc > .profileDetails > .nav-menu-other > li > a.nav-menu-item:hover{box-shadow:0 0 16px rgba(0,194,255,.35) !important}
html:root body #root.layout-bc .hdr-user-bc .hdr-user-avatar-icon-bc{font-size:20px !important;width:auto !important;height:auto !important;color:#F8FAFC !important;margin:0 !important}