/* ⚠️ Bu blok BC'nin STOK MOR paletini eziyor (theme-vars.css `--b/--header/--menu`) —
 * silinemez, yalnız değeri değişir. `!important` şart: theme-vars.css cascade'de bu
 * dosyadan SONRA yükleniyor (layout.js).
 *
 * ALTIN TEMA: vurgu renkleri mobil paletle aynı; header/menü kroması `--chrome-1`in RGB
 * karşılığı, böylece BC'nin `rgba(var(--header), …)` yazan kuralları da uyuyor.
 *
 * 🔴 `--b` BC'nin TABAN ZEMİN tokeni (gövde, kart, panel, popup, iskelet). Lacivertti,
 * bu yüzden sayfa geçişinde içerik boşalınca tüm ekran bir an lacivert yanıp sönüyordu.
 * ⚠️ Değerler RGB ÜÇLÜSÜ olmak zorunda (hex DEĞİL): BC bunları `rgba(var(--b), .5)`
 * içine gömüyor. */
:root {
    --b: 5, 6, 10 !important;
    --b-hover: 14, 16, 23 !important;
    --hero: 238, 205, 36 !important;
    --hero-hover: 209, 180, 32 !important;
    /* --oc-1 = paketin BİRİNCİL DÜĞME tokeni (`.btn.a-color`: popup GİRİŞ,
       PARA YATIR, UYGULA…). Altın DEĞİL (istek 2026-08-16): nötr gri dolgu +
       beyaz yazı. --oc-2 altın kalıyor (ayarlar/cashout metinleri onu kullanır). */
    --oc-1: 58, 62, 74 !important;
    --oc-1-hover: 72, 77, 90 !important;
    --oc-1-sc: 255, 255, 255 !important;
    --oc-2: 238, 205, 36 !important;
    --oc-2-hover: 209, 180, 32 !important;
    --accent: 238, 205, 36 !important;
    --accent-hover: 209, 180, 32 !important;
    --menu: 5, 6, 10 !important;
    --menu-hover: 14, 16, 23 !important;
    --header: 5, 6, 10 !important;
    --header-hover: 14, 16, 23 !important;
    --tab-navigation: 5, 6, 10 !important;
    --tab-navigation-hover: 14, 16, 23 !important;
}

/* Arama düğmesinin kutusu: sabit lacivert (#09204f) altın kromanın sağ ucunda
 * tek parlak mavi kare olarak kalıyordu. Kroma zemin, tokene bağlı.
 * DÜZ TASARIM: çerçeve yok — ayrımı zemin tonu veriyor. */
.generic-search-btn:before,
.generic-search-close-btn:before {
    background: var(--chrome-2, #0e1017) !important;
    border-radius: 6px !important;
}

/* Arka plan görseli + altındaki düz renk (görsel yüklenmezse kalan taban).
 * ⚠️ Görsel `#root`un KENDİ zeminine yazılıyor, ayrı bir katmana DEĞİL: negatif
 * z-index'li pseudo denendi, `#root` yığın bağlamı açmadığı için `body`+`#root`
 * zeminlerinin altında kalıp hiç görünmüyordu (2026-08-15 ölçüldü).
 * `fixed`: kutu VIEWPORT kadar olsun — `scroll` olsaydı `cover` görseli belge
 * boyuna (uzun sayfada 5-6 ekran) göre ölçekleyip devasa büyütüyordu.
 * ⚠️ GÖRÜNÜRLÜK %20 (istek 2026-08-15): görselin ÜSTÜNE %80 zemin tülü, `opacity`
 * ile DEĞİL — zemin `.layout-bc`in kendi katmanı olduğu için `opacity` bütün sayfa
 * içeriğini de soldururdu. Daha silik istenirse yüzde BÜYÜTÜLÜR.
 * ⚠️ Tül AYNEN header'da da var (`.layout-header-holder-bc`) — oranlar ayrışırsa
 * header'ın alt kenarında basamak görünür, ikisi birlikte değiştirilir.
 * ⚠️ Ortak bir `--site-bg-tul` tokeni DENENDİ, GERİ ALINDI: palet kuralı her
 * `var()` kullanımına tanımla birebir aynı fallback yazılmasını şart koşuyor
 * (lib/site-paleti.test.js) → değer zaten her kullanımda tekrarlanıyordu. */
body .layout-bc {
    background:
        linear-gradient(color-mix(in srgb, var(--site-bg, #05060a) 80%, transparent), color-mix(in srgb, var(--site-bg, #05060a) 80%, transparent)),
        url("/brand/site-bg.webp") center / cover no-repeat fixed,
        var(--site-bg, #05060a) !important;
}


/* Tek ölçü: `width:280px` + `max-width:160px` ikilisi zaten 160px'e kırpılıyordu. */
.logo-container .hdr-logo-bc {
    width: 160px !important;
}

/* Sayfa genişliği TEK yerde: içerik, logo satırı ve ana navbar AYNI kutuya
 * ortalanıyor (üçü ayrı ayrı yazılıyordu, değerler kaymaya açıktı).
 *
 * ⚠️ Kapsam ANASAYFAYLA SINIRLANMAZ (`.is-home-page` eklemeyin): diğer sayfalar
 * `page-full-size` sınıfını alıyor (lib/route.js `rootClassFor`) ve paketin
 * `.layout-bc.page-full-size .layout-content-holder-bc{padding:0 10px}` kuralıyla
 * ekran boyu uzuyor — 1670px'e ortalı header'ın altında içerik iki yandan taşar.
 *
 * ⚠️ `padding-inline` + `border-box` süs değil, HİZANIN KENDİSİ: paket içerik
 * kabına 10px yan boşluk veriyor, header satırlarında yok. Kutular eşitlenmezse
 * içerik header'a göre 10px içeride kalır — anasayfa sliderındaki kayma buydu.
 * Boşluk header satırlarına da veriliyor, böylece <1670px ekranda ikisi de
 * kenara yapışmaz.
 *
 * ⚠️ Değer `--layout-width` — paketin KENDİ tokeni (index.Y8VP_-at.css `:root`,
 * 1670px) ve footer kabı (`.footerContainer`) da onu kullanıyor. Sabit sayı
 * yazılırsa footer ile içerik ayrı genişliklere düşer.
 *
 * ⚠️ `page-game-view` DIŞARIDA: oyun kutusu = oyun alanı (1.8:1) + launcher'ın sağ
 * paneli. 1670'lik kaba sokulunca oyun alanı panel kadar daralıyor, 1.8'e sığmak
 * için kısalıyor ve sayfanın altında boşluk kalıyor. Kutu EKRANA göre ölçülüyor;
 * aşağıdaki oyun-sayfası bloğu her iki eksende de sığdırıyor.
 *
 * ⚠️ Navbar kabı KUTULANIYOR, nav'ın kendisi değil: casino/spor alt şeridi
 * `.nav-content-bc`nin DOĞRUDAN çocuğu — kapsam dışı kalırsa tam ene yayılır
 * ("üstteki boxed, alttaki full width"). Ortak çerçeve de (overlay.css
 * `.bg-nav-wrap`) aynı sınıra oturuyor. */
#root:not(.page-game-view) .layout-content-holder-bc,
.hdr-main-content-bc {
    max-width: var(--layout-width, 1670px) !important;
    margin-inline: auto !important;
    padding-inline: 10px !important;
    box-sizing: border-box !important;
}

/* Navbar kabı AYNI sınırda ama YAN BOŞLUKSUZ: 10px'i satırların kendisi veriyor
 * (overlay.css `.bg-nav`/`.bg-subnav`), kapta kalsaydı ortak çerçeve ile satır
 * zemini arasında boş bant görünürdü. Eskiden 10px burada basılıp overlay'de
 * `padding-inline: 0 !important` ile geri alınıyordu — iki kural, tek sonuç. */
#root > div.layout-header-holder-bc > header > div.nav-content-bc {
    max-width: var(--layout-width, 1670px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

/* `padding-top`: hero slider header'a yapışıyordu. Boşluk SATIRA değil KABA
 * veriliyor — bölüm sırası BO'dan (`home_sections`) değişebiliyor, ilk satır
 * her zaman slider olmayabilir; nefes payı sıraya bakmaksızın dursun. */
.is-home-page .layout-content-holder-bc {
    margin-bottom: 80px !important;
    padding-top: 20px !important;
}

/* OYUN SAYFASI (game-view) EKRANA SIĞAR — dikey kaydırma yok.
 * ⚠️ Kutuya SATIR İÇİ ölçü yazmayın (page.js): sabit yükseklik header + alt şerit
 * + footer ile pencereden uzun oluyor, sayfa yukarı-aşağı kayıyordu.
 *
 * ⚠️ `.layout-bc` zaten `grid-template-rows: auto 1fr auto` (paket kuralı) —
 * `height:100vh` verilince içerik satırı KALAN yüksekliği alır, ayrıca hesap
 * yapmaya (100vh - header) gerek yok; header yüksekliği değişse de tutar.
 * ⚠️ `min-height:0`: grid/flex öğesinin varsayılan `min-height:auto`'su
 *    küçülmeyi engeller, iframe kabı taşardı.
 * ⚠️ Footer gizli: orijinalde de oyun tam ekranken basılmıyor
 *    (`casino-lock-scroll` kuralı, CasinoFullGameTemplate.css).
 * ⚠️ Kutunun sağındaki 41px, panelin (kapat/yenile/favori) yeri — paket
 *    `margin-inline-end:41px` ile ayırıyor; `flex:1` kalanı doldurur. */
#root.page-game-view {
    height: 100vh;
    overflow: hidden;
}

#root.page-game-view .layout-footer-holder-bc {
    display: none;
}

#root.page-game-view .layout-content-holder-bc,
#root.page-game-view .casino-full-game-bg,
#root.page-game-view .casino-full-game-container {
    height: 100%;
    min-height: 0;
}

/* Alt boşluk 10px — kutu ekranın alt kenarına yapışmasın. `border-box` kutuda:
 * payı yükseklikten düşer, kaydırma yine doğmaz.
 * ⚠️ YAN boşluk 0: kutu zaten ortalanıyor ve kalan yer iki yana paylaşılıyor.
 * 10px kalsaydı 1920×1080'de genişlik 20px yetmiyor, oyun 1.8'e sığmak için
 * kısalıyor ve ALTTA ince bant kalıyordu (ölçüldü: 9px). */
#root.page-game-view .layout-content-holder-bc {
    padding-inline: 0 !important;
    padding-bottom: 10px !important;
}

#root.page-game-view .casino-full-game-block {
    flex: 1;
    height: 100%;
    min-height: 0;
}

/* OYUN ALANI SABİT 1.8:1 + PANEL (operatör isteği 2026-08-14).
 *
 * ⚠️ Oran OYUN SÜTUNUNUN, kutunun DEĞİL: kutunun içinde launcher'ın sağ paneli de
 * var; kutu 1.8'e kilitlenirse oyun sütunu panel kadar daralıp altında bant
 * bırakıyor. Kutu, panel genişliği kadar daha geniş.
 *
 * ⚠️ `--gv-panel` AYAR DÜĞMESİ: launcher'ın sabit panel genişliği (kaydırma
 *    çubuğu dahil), ekran görüntüsünden ölçüldü. Launcher panelini
 *    daraltır/genişletirse tek yer burası: küçük gelirse oyunun altında ince
 *    bant, büyük gelirse yanlarda ince bant kalır (kırpma/taşma OLMAZ).
 * ⚠️ Yükseklik önce KAPTAN (`100cqh`), sığmıyorsa genişlikten türetilir; sonra
 *    genişlik ondan üretilir → iki eksende de sığar, oran hep 1.8.
 *    `max-width`/`max-height` ile yazılamıyor: biri kırpılınca diğeri
 *    küçülmüyor. Kap sorgusu birimleri için `container-type: size` şart.
 * ⚠️ `- 41px`: sağdaki düğme şeridinin yeri (paketin `margin-inline-end`i).
 * ⚠️ Yalnız TEK oyun görünümünde: çoklu görünümde iki blok kabı bölüşüyor. */
#root.page-game-view .casino-full-game-container.num-casino-games-1 {
    container-type: size;
}

/* Çoklu görünümde bloklar kabı bölüşüyor; ikinci bloğun düğme şeridi (sağda,
 * `right:-41px`) yan boşluk kalmadığı için ekran dışında kalıyordu — yeri kaptan
 * ayrılıyor. Tek oyunda gerekmiyor: orada kutu zaten ortalı, artan yer var. */
#root.page-game-view .casino-full-game-container.num-casino-games-2 {
    padding-inline-end: 41px;
}

#root.page-game-view .num-casino-games-1 .casino-full-game-block {
    --gv-panel: 250px;
    --gv-h: min(100cqh, calc((100cqw - 41px - var(--gv-panel)) / 1.8));
    flex: 0 0 auto;
    height: var(--gv-h);
    width: calc(var(--gv-h) * 1.8 + var(--gv-panel));
}

/* ═══ BÖLÜM BAŞLIĞI: "TÜMÜ ›" + ŞERİT KENARI OKU (2026-08-14 revizyon) ═══════
 * Başlıktaki sağ/sol kare oklar KALDIRILDI: altın bandın içinde ikinci bir
 * bileşen gibi duruyorlardı. Şimdi bantta yalnız bölümün liste sayfasına giden
 * "Tümü ›" bağlantısı var; kaydırma parmakla/tekerlekle, ok da şeridin kendi
 * kenarında (UiBoot > `kenarOklariKur`).
 *
 * ⚠️ `a.serit-tumu` — SINIF TEK BAŞINA YETMEZ: custom.css paket CSS'inden ÖNCE
 *    basılıyor (layout.js cssLinks sırası), eşit özgüllükte temanın
 *    `.view-see-more` kuralı kazanır ve bağlantı gri kalırdı. */
a.serit-tumu {
    display: inline-flex;
    align-items: center;
    align-self: center; /* bant kalktı: hap satırın ORTASINA hizalı (2026-08-15) */
    flex: none;
    /* Satırın EN SAĞINA dayalı: `margin-left:auto` başlıkla arasındaki tüm boşluğu
       yiyor, `margin-inline-end:0` da temanın 4px'lik payını siliyor. */
    margin-left: auto;
    margin-inline-end: 0;
    /* VARSAYILAN BETCO DÜĞMESİ (2026-08-17 operatör isteği): altın hap KALKTI —
       ölçü/renk/hover birebir temanın `.btn.s-small` değerleri (index…css:12867,
       12921). Sınıf eklemek yerine kopyalandı: "Tümü" işaretlemesi iki platformda
       string+JSX olarak iki yerde duruyor, tek CSS bloğu ikisini birden çeviriyor. */
    height: 28px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--border-radius);
    background: rgba(var(--b-sc), .15);
    color: rgba(var(--b-sc), .9);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--default-transition-duration), color var(--default-transition-duration);
}

a.serit-tumu:hover {
    background: rgba(var(--b-sc), .35);
    color: rgba(var(--b-sc), .9);
}

/* Ok hover'da bir tık ilerliyor — "gider" sinyali, ayrı bir düğme değil. */
a.serit-tumu .view-arrow-more { transition: transform .18s ease; }
a.serit-tumu:hover .view-arrow-more { transform: translateX(2px); }

/* Ok carousel'in İÇİNDE, kenardan --ok-ic kadar içeride: sınıra oturunca
 * "ayrı bir buton" gibi okunuyordu. Şerit tam genişlikte kalıyor, KARTLAR
 * OKUN ALTINDAN geçiyor — ok kaydırdıkça yer değiştirmiyor.
 *
 * MİNİMAL OK (2026-08-15, TÜM şeritlerde — ÖNE ÇIKAN BAHİSLER, POPÜLER
 * CASINO/CANLI, SİZDEN GELENLER): kutulu düğme (koyu plaka + altın çerçeve +
 * gölge) KALDIRILDI — görünen iz yalnız saç teli çizgiyle çizilen chevron.
 * Kontrastı kenar perdesi veriyor; SARI YALNIZ HOVER'DA. İkon fontunun kalın
 * glifi gizli (font-size:0), chevron `i` üstüne border ile çiziliyor. Görsel
 * iz incelse de tık alanı ::after ile geniş kalıyor.
 *
 * ⚠️ Sarmalayıcıyı JS üretiyor (kazınmış mobil gövdeye elle <div> eklenemiyor,
 *    bkz. `kenarOklariKur`) ve YALNIZ şeridi sarıyor: ok başlık bandının değil,
 *    kart satırının dikey ortasına oturuyor.
 * ⚠️ TEK TASARIM, İKİ ÖLÇEK: küçük kartlı şeritte (SİZDEN GELENLER, `.bk-serit`)
 *    yalnız ölçü düşüyor; biçim/renk/hover aynı. */
.serit-kenar {
    --ok-en: 30px;
    --ok-boy: 52px;
    --ok-ic: 10px; /* carousel kenarından içeri */
    --ok-cizgi: 12px; /* chevron'un kare gövdesi */
    --ok-perde: 80px; /* kenardaki koyulaşan geçişin genişliği */
    position: relative;
    margin-bottom: 8px; /* kartlarla bir sonraki bölüm başlığı arası nefes */
}

/* Küçük kartlı şerit: yalnız ÖLÇEK farkı. */
.serit-kenar:has(.bk-serit) {
    --ok-en: 28px;
    --ok-boy: 44px;
    --ok-ic: 6px;
    --ok-cizgi: 10px;
    --ok-perde: 64px;
}

/* Kenar perdesi: ok boşlukta durmasın, kartların üstünde hafifçe koyulaşan bir
 * navigasyon alanının ortasına otursun; yarım görünen son kart da kontrollü
 * bitsin. Yalnız o yöne kaydırılabiliyorsa var. */
.serit-kenar::before,
.serit-kenar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--ok-perde);
    opacity: 0;
    pointer-events: none; /* karta tıklamayı yutmasın */
    transition: opacity .2s ease;
}

.serit-kenar::before {
    left: 0;
    background: linear-gradient(90deg, rgba(5, 6, 10, .62), rgba(5, 6, 10, 0));
}

.serit-kenar::after {
    right: 0;
    background: linear-gradient(270deg, rgba(5, 6, 10, .62), rgba(5, 6, 10, 0));
}

.serit-kenar.kenar-sol::before,
.serit-kenar.kenar-sag::after { opacity: 1; }

.serit-kenar-ok {
    position: absolute;
    top: 50%; /* kartların dikey ortası */
    z-index: 2;
    width: var(--ok-en);
    height: var(--ok-boy);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, .9);
    line-height: 1;
    opacity: 0;
    pointer-events: none; /* görünmezken tıklamayı yutmasın */
    transform: translateY(-50%);
    transition: opacity .2s ease, color .18s ease, transform .12s ease;
}

.serit-kenar-ok[data-yon="sol"] { left: var(--ok-ic); }
.serit-kenar-ok[data-yon="sag"] { right: var(--ok-ic); }

/* Glif yerine çizilen chevron: 1.5px saç teli, 45° döndürülmüş kare köşesi.
 * İkon fontunun kalın glifi font-size:0 ile gizli. translateX chevron'un
 * görsel ağırlığını düğme ortasına çeker. */
.serit-kenar-ok i {
    font-size: 0;
    width: var(--ok-cizgi);
    height: var(--ok-cizgi);
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}

.serit-kenar-ok[data-yon="sol"] i { transform: translateX(2px) rotate(-135deg); }
.serit-kenar-ok[data-yon="sag"] i { transform: translateX(-2px) rotate(45deg); }

/* Görsel düğme 42px, GERÇEK tık alanı her yönde +7px (≈56px): küçük chevron'u
 * tam tutturmak zorunda kalınmasın. Görünürlüğü etkilemiyor, yalnız hedef. */
.serit-kenar-ok::after {
    content: "";
    position: absolute;
    inset: -7px;
}

/* Sağdaki yalnız kaydıracak yer varken, soldaki yalnız kaydırıldıktan sonra —
 * ilk kutuda sol ok, son kutuda sağ ok YOK (sınıfları şeridin scroll
 * dinleyicisi yazıyor). Durgunda düşük opaklık: oyun kapakları ana odak, ama
 * bölümün yatay kaydığı ilk bakışta anlaşılsın diye görünmez de değil. */
.serit-kenar.kenar-sol .serit-kenar-ok[data-yon="sol"],
.serit-kenar.kenar-sag .serit-kenar-ok[data-yon="sag"] {
    opacity: .62;
    pointer-events: auto;
}

/* Masaüstü: şeridin üstüne gelince oklar netleşiyor, okun kendi üstünde sarı
 * plaka DEĞİL yalnız altın chevron + kısa büyüme. Dokunmatikte hover yok —
 * orada esas kontrol swipe. */
@media (hover: hover) {
    .serit-kenar.kenar-sol:hover .serit-kenar-ok[data-yon="sol"],
    .serit-kenar.kenar-sag:hover .serit-kenar-ok[data-yon="sag"] { opacity: 1; }

    .serit-kenar-ok:hover {
        color: var(--gold, #eecd24);
        transform: translateY(-50%) scale(1.15);
    }
}

.serit-kenar-ok:active { transform: translateY(-50%) scale(.94); }

/* Dar pencerede yalnız ölçek düşüyor; konum (kenardan --ok-ic içeride) aynı. */
@media (max-width: 700px) {
    .serit-kenar { --ok-en: 34px; --ok-boy: 46px; --ok-ic: 10px; --ok-perde: 60px; }
}

/* ═══ AYNI DÜĞME DİLİ: SLIDER VE KATEGORİ OKLARI (2026-08-15) ════════════════
 * Şerit kenarındaki ok MİNİMAL olunca (plaka yok, yalnız chevron) sayfadaki
 * ÖTEKİ oklar da aynı dile çekildi: kutu/çerçeve/gölge YOK, glif beyaz,
 * SARI YALNIZ HOVER'DA. Kapsam `.slider-bc .carouselWrapper` (anasayfa büyük
 * slider, alt afiş carousel'leri, /tr/games/home ve casino sayfalarının
 * slider'ı) + casino kategori barının oku. Ödeme adımlarındaki `.carousel`
 * okları KAPSAM DIŞI: onlar form akışının parçası, bölüm gezinmesi değil.
 *
 * ⚠️ Kural AYRI yazıldı, `.serit-kenar-ok` seçici listesine eklenmedi: o kural
 *    konumu da taşıyor (absolute + translateY) ve testler onu tek blok olarak
 *    kilitliyor. Buradaki üç okun KONUMUNU tema veriyor, yalnız GÖRÜNÜM ortak —
 *    biri değişirse ötekini de güncelle.
 * ⚠️ ÖZGÜLLÜK ZORUNLU, sıra yetmez: custom.css paket CSS'inden ÖNCE basılıyor
 *    (layout.js cssLinks), eşit özgüllükte tema kazanır. Glif kuralları bu
 *    yüzden `[class*=is-web]` ile yazıldı — temanın hover rengi 0,5,1.
 * ⚠️ `height`/`margin-top` TEMADAN kalıyor: base swiper kuralı yüksekliği
 *    `--swiper-navigation-size`, dikey ortalamayı da negatif margin ile
 *    kuruyor; yükseklik burada değişseydi ok dikeyde kayardı.
 * ⚠️ Bu oklarda glif İKON FONTUNDAN kalıyor (şerit okundaki gibi border ile
 *    çizilmiyor): tema chevron'u `:after` içeriğiyle basıyor, ::after'ı
 *    çizime çevirmek konum/boyut kurulumunu da devralmayı gerektirirdi. */
.slider-bc .carouselWrapper .swiper-button-prev,
.slider-bc .carouselWrapper .swiper-button-next,
[class*=is-web] .casinoCategories .horizontal-scroll__arrow.ds-btn {
    width: 30px;
    border: 0;
    border-radius: 10px; /* odak/tap highlight köşesi için */
    background: none;
    box-shadow: none;
    color: rgba(255, 255, 255, .9);
    transition: color .18s ease, transform .12s ease;
}

/* Glif düğmenin rengini alsın ve okunur büyüklükte olsun: tema `:after`a ayrı
   bir gri (rgba(--b-sc,.75)) ve `carouselCountEnable` içinde 8px veriyor. */
[class*=is-web] .slider-bc .carouselWrapper .swiper-button-prev:after,
[class*=is-web] .slider-bc .carouselWrapper .swiper-button-next:after {
    color: currentColor;
    font-size: 12px;
}

@media (hover: hover) {
    .slider-bc .carouselWrapper .swiper-button-prev:hover,
    .slider-bc .carouselWrapper .swiper-button-next:hover,
    [class*=is-web] .casinoCategories .horizontal-scroll__arrow.ds-btn:hover {
        background: none;
        color: var(--gold, #eecd24);
    }

    /* Temanın hover kuralı (0,5,1) glifi beyazlatıyordu; altın kalmalı. Kısa
       büyüme de burada: slider okunda tema transform kullanmıyor, kategori
       okunda `translateY(-50%)` var → ayrı yazıldı. */
    [class*=is-web] .slider-bc .carouselWrapper .swiper-button-prev:not(.swiper-button-disabled):hover:after,
    [class*=is-web] .slider-bc .carouselWrapper .swiper-button-next:not(.swiper-button-disabled):hover:after {
        color: currentColor;
    }

    .slider-bc .carouselWrapper .swiper-button-prev:hover,
    .slider-bc .carouselWrapper .swiper-button-next:hover { transform: scale(1.15); }

    [class*=is-web] .casinoCategories .horizontal-scroll__arrow.ds-btn:hover { transform: translateY(-50%) scale(1.15); }
}

.slider-bc .carouselWrapper .swiper-button-prev:active,
.slider-bc .carouselWrapper .swiper-button-next:active { transform: scale(.94); }

[class*=is-web] .casinoCategories .horizontal-scroll__arrow.ds-btn:active { transform: translateY(-50%) scale(.94); }

/* ═══ TEK ŞERİT — DÖRT BÖLÜM AYNI (2026-08-16 isteği) ════════════════════════
 * EN POPÜLER CASINO · EN POPÜLER CANLI CASINO · ÖNE ÇIKAN BAHİSLER · SİZDEN
 * GELENLER artık BİREBİR aynı kutu: tek sıra, yatay kayan, kenar oklu, kendi
 * kendine ilerleyen. Önceden üç ayrı düzendi (casino iki satırlık ızgara, canlı
 * casino başka ölçüde flex şerit, öne çıkan bahisler başka boşlukta) ve aynı
 * sayfada üç farklı kutu boyu yan yana duruyordu.
 *
 * `.oto-serit` = kayan kutunun ORTAK davranışı, her dört bölümde de var.
 * `.pop-serit` = yalnız OYUN KAPAĞI kutusunun ölçüsü (casino + canlı casino).
 * Maç ve kazanç kartı kendi eninde kalıyor: içerikleri aynı ende olamaz
 * (SİZDEN GELENLER'in ölçüsü lib/buyuk-kazanclar.js `.bk-serit` kuralında).
 *
 * ⚠️ scroll-behavior AUTO olmalı: oto-kaydırma döngüsü her karede scrollLeft
 *    yazıyor, `.horizontal-scroll`un smooth'uyla kuyruğa girerse şerit geride
 *    kalır. Kaydırmanın kendisi (tekerlek + tut-sürükle) tema sınıfından.
 * 🔴 SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA: custom.css paket CSS'inden ÖNCE basılıyor
 *    (Kabuk.js `cssLinks`), yani eşit özgüllükte PAKET kazanır. Tek sınıfla
 *    yazılsaydı `scroll-behavior` paketin `.horizontal-scroll{smooth}` kuralına,
 *    `gap` de `.product-banner-container-bc{grid-gap:10px}`e yenilirdi.
 * ⚠️ Yatay dolgu BİLEREK yazılmıyor: her bölümün kendi kenar boşluğu temadan
 *    geliyor, burada ezilse şeritler sayfanın kenarından farklı başlardı. */
.oto-serit.horizontal-scroll {
    gap: 12px;
    padding-bottom: 6px;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
}

/* ⚠️ `!important`: temanın `col-4` ızgarası aynı özgüllükte ve o da !important. */
.product-banner-container-bc.pop-serit {
    display: flex !important;
}

/* Kutu genişliği TAM SAYIYA bölünmüyor (5 değil 5.35): sağda bir sonraki kartın
 * ucu görünüyor — şeridin kaydığı, ok olmadan da anlaşılsın (2026-08-14). */
.product-banner-container-bc.pop-serit > * {
    flex: 0 0 calc((100% - 48px) / 5.35);
    min-width: 0;
}

@media (max-width: 1100px) {
    .product-banner-container-bc.pop-serit > * { flex-basis: calc((100% - 36px) / 4.35); }
}

@media (max-width: 700px) {
    .product-banner-container-bc.pop-serit > * { flex-basis: calc((100% - 24px) / 3.35); }
}

/* ⚠️ `.featuredGames` bir ızgara ÖĞESİ → varsayılan min-width:auto ile içeriğinin
 * min-content'inden dar olamaz. Eski marquee `overflow:hidden` olduğu için sorun
 * çıkmıyordu; 48 kartlık (~16.000px) şerit buradan yukarı sızarsa sayfa yatayda
 * uzar (aynı arıza SİZDEN GELENLER'de yaşandı, bkz. lib/buyuk-kazanclar.js). */
.hm-row-bc-inner > .featuredGames { min-width: 0; }


/* Logo satırının boyu. Genişlik/ortalama dosyanın başındaki ortak blokta,
 * zemin ise header kroma bloğunda (`.header-bc, .hdr-main-content-bc`). */
.hdr-main-content-bc {
    height: 80px !important;
}


/* HEADER GİRİŞ / ÜYE OL: GİYDİRME YOK (istek 2026-08-17, referans
 * set1bet106 — o sitenin custom.css'i BOŞ, düğmeler paketin stoğu).
 * Stok: `.btn.sign-in` altı çizili metin (`--header-sc`), `.btn.register`
 * `--hero` zeminli düğme, ayraç GİRİŞ'in SOLUNDA (`.hdr-user-bc .sign-in:after`).
 * ⚠️ Buraya kural EKLEMEYİN — eklenen her satır referanstan uzaklaştırır. */


.popup-inner-bc {
    border-radius: 20px !important;
    background: var(--site-bg, #05060a) !important;
}

/* Slider öğesinin üstündeki BC karartma katmanı kapatılıyor.
   ⚠️ Eski not "iki durağı da saydam, hiçbir şey boyamıyor" diyordu — YANLIŞ:
   paketin gradyanı `to bottom, #0000 62%, #000000b3`, yani alt %38'i %70 siyaha
   boyuyor. Bu kural gerçekten iş yapıyor (afişin altı kararmasın), TERCİH. */
.sdr-item-bc:before {
    background: none !important;
}

/* 🔴 SAYFA KABUĞU IZGARA DEĞİL DİKEY FLEX — YAPIŞKAN HEADER'IN ŞARTI.
 *
 * Tema `#root`u ızgara yapıyor (`display:grid; grid-template-rows:auto 1fr auto`,
 * alanlar "header" "content" "footer" "betslip"). Izgara öğesinde `position:
 * sticky`in kapsayıcı bloğu ELEMANIN KENDİ IZGARA ALANI'dır — header satırı
 * `auto`, yani tam header boyu → yapışacak MESAFE YOK, header sayfayla birlikte
 * yukarı kayıp gidiyor. Temanın "sticky" header'ı bu yüzden hiç yapışmıyordu ve
 * çözüm olarak `position: fixed` seçilmişti; fixed de header'ı akıştan çıkarıp
 * offset'i panel JS'ine bırakıyordu (gerekçe hemen aşağıda).
 *
 * Dikey flex'te kapsayıcı blok flex KABIDIR (tüm sayfa boyu) → header hem AKIŞTA
 * (kendi yüksekliği kadar yer kaplar, hesap gerekmez) hem de kaydırırken üstte
 * asılı kalır. Yığılma sırası ızgaranınkiyle aynı (DOM sırası: header, içerik,
 * footer, kupon) — `grid-area` bildirimleri sessizce etkisiz kalır.
 * ⚠️ İçeriğe `flex: 1` şart: `1fr` satırı gidince kısa sayfalarda footer yukarı
 * tırmanır, altında zemin boşluğu kalırdı.
 * ⚠️ Sol menülü/sportsbook ızgarası DIŞARIDA (temanın kendi koşulu): o düzen tek
 * sütun değil. Bu portta o sınıf hiç basılmıyor (lib/route.js), ama basılırsa
 * ızgara düzeni bozulmasın. */
#root.layout-bc:not(.hasLeftMenu):not(.sportsbook) {
    display: flex !important;
    flex-direction: column;
}

#root.layout-bc:not(.hasLeftMenu):not(.sportsbook) > .layout-content-holder-bc {
    flex: 1 0 auto;
}

/* ALTIN TEMA — HEADER KROMASI + AKIŞTAKİ (sticky) HEADER.
 *
 * Zemini TEK yer boyuyor (holder): iç satırlar (`.hdr-main-content-bc`, navbar)
 * 1670px'e ortalı olduğu için kendi zeminlerini boyarlarsa gradyan geniş ekranda
 * ortada kesik bir şerit gibi duruyordu.
 * ⚠️ `margin-bottom: 0` + `box-shadow: none`: tema header'a
 * `--desktop-header-margin-bottom` (10px) alt boşluk verip aynı kalınlıkta düz bir
 * `box-shadow` bandıyla boyuyor — navbar'ın altında görünür bir şerit bırakıyordu.
 * ⚠️ Zemin DÜZ (kroma gradyanı DEĞİL) + `border-bottom: 0`: gradyanın dibi
 * (`--chrome-2`) sayfa zemininden açık kaçıyordu; header üstü/altıyla tek renk.
 *
 * 🔴 ZEMİN SAYDAM — %12 (istek 2026-08-15; oran 2026-08-16'da %20'den düştü,
 * "header daha koyu, geçirgenliği az"). İki şey birden geliyor:
 *   1. Arka plan görseli header'ın ARKASINDAN okunuyor: görseli ATA (`.layout-bc`)
 *      boyuyor ve `fixed` iliştirme onu VIEWPORT'a kadrajlıyor, yani header'ın
 *      arkasındaki dilim sayfadakiyle piksel hizalı. Header'a AYRI bir `url(…)`
 *      katmanı YAZILMAZ: görsel opak, kendi katmanı olsaydı altındaki her şeyi
 *      örter ve saydamlık imkânsız olurdu (ata zaten aynı dilimi basıyor).
 *   2. Kaydırınca içerik header'ın içinden hafifçe seçiliyor (yapışkan header).
 * ⚠️ Bedeli: görsel header'ın altında SAYFADAKİNDEN SÖNÜK okunuyor — iki tül üst
 * üste biniyor (sayfanın %80'i + buradaki %88). Daha belirgin istenirse buradaki
 * yüzde KÜÇÜLTÜLÜR, ama aynı oranda kayan içerik de belirginleşir; okunabilirliğin
 * sınırı bu.
 * ⚠️ Alt kenardaki ton farkı ARTIK BEKLENEN: header sayfadan bilerek koyu, o fark
 * header'ı içerikten ayıran sınırın kendisi. Sayfa tülü (`.layout-bc`) buna
 * uydurulmaz — o yalnız "arka plan görseli fazla/az belirgin" denince değişir.
 * ⚠️ Mobil ikizi `mobile/public/custom.css` (`#root .header-bc`) AYNI oranda.
 *
 * ⚠️ `position: sticky !important`: kiracı `theme_custom_css` alanına tema
 * dosyasının ESKİ (fixed) bir kopyasını basabiliyor. Header AKIŞTA kalmalı —
 * fixed'e dönerse içerik offseti yine JS'e kalır (bkz. aşağıdaki panel yaması).
 * ⚠️ `top`/`z-index` YAZILMIYOR: tema dosyası aynı değerleri (0 / 952) zaten
 * veriyor ve custom.css'ten SONRA yükleniyor — buradaki kopya ölüydü. */
.layout-header-holder-bc {
    position: sticky !important;
    margin-bottom: 0 !important;
    background: color-mix(in srgb, var(--site-bg, #05060a) 88%, transparent) !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* İç satırlar zemin BOYAMAZ — holder'ınki görünsün (`.header-bc`te `--site-bg`
 * duruyordu, logo satırı kromanın ortasında ayrı bir bant gibi kalıyordu).
 * `.hdr-main-content-bc`in ölçüsü ayrı kuralda (dosyanın başındaki genişlik
 * bloğu + yükseklik). */
.header-bc,
.hdr-main-content-bc {
    background: transparent !important;
}

/* Panel JS'inin header yaması ETKİSİZLEŞTİRİLİYOR — akıştaki header'da ölü ama
 * kural hâlâ basılıyor ve iki yerden birden zarar veriyordu:
 *   `margin-top: var(--cw-header-h, 145px)` → header'ın altında 145px ölü bant
 *      (JS akıştaki header'ı 0 ölçüp değişkeni SİLİYOR, yedek devreye giriyor).
 *   `#root.layout-bc.page-full-size .layout-content-holder-bc{height:calc(100vh
 *      - …); overflow-y:auto}` → anasayfa DIŞINDAKİ her sayfa (promosyonlar,
 *      casino, hesap…) viewport boyu bir İÇ KAYDIRICIYA giriyor; ızgara o
 *      kutunun içinde kırpılıyor, sayfaya oturmuyordu.
 * ⚠️ Seçici `html body #root.layout-bc …` — panel stili çalışma anında <head>in
 * SONUNA ekleniyor, sırayla yenemeyiz; tek kaldıraç ÖZGÜLLÜK (o kuralların en
 * güçlüsü 1,3,0; bu 1,3,3). Aynı gerekçe dosyadaki diğer `html body #root`
 * bloklarında da geçerli. */
html body #root.layout-bc .layout-content-holder-bc {
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
}


/* BÖLÜM BAŞLIĞI (2026-08-15 yenileme): DOLU ALTIN BANT KALDIRILDI. 40px'lik
 * gradyan blok başlığı kartlardan bağımsız bir "kutu" gibi gösteriyordu; şerit
 * başlığı artık zeminsiz — solda altın işaret çubuğu, altta sağa doğru sönen
 * saç teli hat. Bandın rengini taşıyan `--site-bar-*` tokenleri duruyor (mobil
 * geri-gezinme başlığı, casino popup başlığı hâlâ kullanıyor).
 * ⚠️ `!important` şart: custom.css paket CSS'inden ÖNCE basılıyor. */
.page-view-more {
    position: relative;
    background: none !important;
    text-align: left !important;
    width: 100% !important;
    height: 46px !important;
    margin-bottom: 14px !important;
    gap: 10px;
}

/* Sol işaret çubuğu: kabuk paketten `display:flex` alıyor, pseudo ilk esnek öğe. */
.page-view-more::before {
    content: "";
    flex: none;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold-hi, #f6e386), var(--gold-deep, #a68c1e));
}

/* Alt hat: soldan altın, sağa doğru SÖNÜYOR — kutuyu kapatan bir çerçeve değil,
 * biten bir vurgu. Mutlak konum: `::before` gibi esnek öğe olsa satırı bozardı. */
.page-view-more::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-line, rgba(238, 205, 36, .32)), transparent 70%);
}

/* Başlık SOLA DAYALI (2026-08-14 operatör isteği): girinti işaret çubuğunun
 * `gap`inden geliyor. `flex:none` kalıyor — başlık büyümezse "Tümü ›"
 * bağlantısı `margin-left:auto` ile sağa dayanabiliyor. */
.view-title-more {
    color: var(--site-bar-fg, #f6e386) !important;
    text-align: left;
    flex: none !important;
    font-size: 15px !important;
    /* 700 ÇOK KALINDI (2026-08-17): dört bölüm başlığı da bantta kart adlarından
       daha ağır basıyordu. 500 = temanın kendi düğme/başlık ağırlığı. */
    font-weight: 500 !important;
    letter-spacing: .08em !important;
}


/* Ana navbar + alt şerit: kural sahibi assets/app/overlay.css (`.bg-nav*`).
 * Buraya öğe başına kutu/hover/aktif giydirmesi yazmayın — "kesik kesik" görünüm
 * yapıyordu, şerit NATIVE BC dilinde kalsın. */

/* Footer DÜZ TASARIM: altın hat KALDIRILDI, ayrımı tek düz ton yapıyor
 * (`--chrome-2`, sayfa zemininden bir tık açık — çizgi değil renk bloğu).
 * ⚠️ Yan boşluk SIFIRLANDI: paket holder'a ASİMETRİK boşluk veriyor (start 10px,
 * end 5px) ve içindeki `.footerContainer` `--layout-width`e ortalanıyor — footer
 * içeriği sayfa ortasına göre 2.5px kayıyordu. Kutu artık yukarıdaki sayfa
 * genişliği bloğunun aynısı.
 *
 * ⚠️ Arka plan görseli footer'da da sürüyor (istek 2026-08-15), header/sayfa ile
 * AYNI reçete — tek fark tülün RENGİ: `--chrome-2`. `--site-bg` kullanılsaydı
 * footer sayfa zeminiyle birebir aynı tona düşerdi, yani yukarıdaki "ayrımı düz
 * ton yapıyor" kuralı ölürdü. Tül oranı SAYFA ile aynı (%80 → görsel %20);
 * header'ınki 2026-08-16'da %88'e çıktı, footer BİLEREK takip etmedi — koyulaşan
 * şey header, footer sayfanın devamı.
 * ⚠️ En alttaki DÜZ katman görsel yüklenmezse kalan taban; footer opak kalmalı. */
.layout-footer-holder-bc {
    background:
        linear-gradient(color-mix(in srgb, var(--chrome-2, #0e1017) 80%, transparent), color-mix(in srgb, var(--chrome-2, #0e1017) 80%, transparent)),
        url("/brand/site-bg.webp") center / cover no-repeat fixed,
        var(--chrome-2, #0e1017) !important;
    padding-inline: 0 !important;
}

.footerContainer {
    padding-inline: 10px !important;
    box-sizing: border-box !important;
}


.footerContainer .sliderGroup .sliderContent .sliderTitle {
    display: none;
}

/* İndirme (platform) rozetleri şeridi — NORMAL AKIŞ + `margin:auto` ile ortalı,
 * rozet sayısı değişse de tutar. ⚠️ `position:absolute` KULLANMAYIN: konumlanmış
 * ata yok (`.footerContainer` da `.footerWrapper` da static) ve `.footerWrapper`
 * `overflow:hidden` taşıyor — şerit footer'da hiç görünmüyordu. */
.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) {
    max-width: 900px;
    margin: 0 auto 22px;
    overflow: visible;
}

/* Tema satırı `inline-block + white-space:nowrap`: 6 rozet dar ekranda taşıyordu.
 * Flex + wrap → ortalanır, sığmayan alta iner. */
.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 26px;
    white-space: normal;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage {
    min-width: 0;
    width: auto;
    margin: 0 !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage img {
    display: block;
    width: 108px;
    height: auto;
    opacity: 1 !important;
    filter: none !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage:nth-child(1) img {
    content: url(assets/images/android.png) !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage:nth-child(2) img {
    content: url(assets/images/apple.png) !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage:nth-child(3) img {
    content: url(assets/images/macos.png) !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage:nth-child(4) img {
    content: url(assets/images/huawei.png) !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage:nth-child(5) img {
    content: url(assets/images/linux.png) !important;
}

.footerContainer .sliderGroup .sliderContent .sliderGroup .horizontalSliderWrapper:nth-child(1) .horizontalSliderRow .sliderImage:nth-child(6) img {
    content: url(assets/images/windows.png) !important;
}


/* ⚠️ Footer rozetlerini KOORDİNATLA yerleştirmeyin (`position:absolute`, yüzde
 * offset): rozet sayısı BO ayarından geliyor (0/1/3), elle ölçülmüş koordinatlar
 * tutmuyor. Normal akış + `.sliderSingleEl`in `justify-content:center`i yeterli. */

/* Sorumlu oyun (BeGambleAware) rozeti — telif satırının İÇİNDE, 18+ ve
 * "2015 - … " yazısıyla AYNI HİZADA: `.copyRightBlock` space-between olduğu
 * için rozet ortaya oturur. Mobilde blok column olduğundan alta düşer. */
.footerResponsibleBadge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

[class*=is-mobile] .footerResponsibleBadge {
    width: 100%;
    padding: 10px 0 4px;
}

.footerResponsibleBadge img {
    display: block;
    width: auto;
    height: 26px;
    opacity: .75;
}


/* Yasal metin ayarları (şirket adı/adres/lisans) BOŞ olan kiracıda
 * `.ftr-copy-rights-bc` boş basılıyor, sarmalayıcısı yine de 24px boşluk
 * bırakıyordu — logo şeridi telif satırından kopuk duruyordu.
 * DOM'dan silmek yerine gizleniyor: `nth-child` sırası korunur (kiracıların BO
 * özel CSS'leri şeritleri sıra numarasıyla hedefliyor). */
.footerContainer .sliderSingleElWrapper:has(> .sliderSingleEl > .ftr-copy-rights-bc:empty) {
    display: none;
}

/* Şeritler arası tema boşlukları (42px alt + 24px ara) üç şeritlik bir yığın
 * için fazlaydı: rozetlerle telif satırı arasında koca bir siyah boşluk kalıyordu. */
.footerContainer > .sliderGroup {
    padding-bottom: 12px;
}

/* ⚠️ Footer şeritlerini SIRA NUMARASIYLA gizlemeyin (`:nth-child(4)/(5)`): 4.
 * sarmalayıcı kiracının kendi logosu, 5. de `footer_trust_badges` — rozet sayısı
 * ayardan geldiği için numaralar kayıyor ve yanlış şerit kayboluyor. */

/* ⚠️ Üst-bar linklerine KONUMA göre görsel giydirmeyin: linkler BO ayarından
 * geliyor, boş olan hiç basılmıyor (Header.js `.filter`) → sıra kayınca her link
 * komşusunun görselini giyiyor. Giydirme gerekirse linkin KENDİ sınıfına bağlanır. */

.promotionsListEl-bc:hover {
    border-radius: 20px !important;
}

.promotionsArticleThumbnail-bc {
    backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
}

.promotionsListEl-bc img {
    opacity: 0.9 !important;
}

.promotions-article-title.ellipsis {
    display: none !important;
}

/* Hover'da BC'nin scale(1.05) yakınlaştırması İSTENMİYOR, görsel yalnız karartılır. */
.promotionsListEl-bc:hover .promotionsArticleThumbnail-bc {
    transform: scale(1) !important;
    background: #0000007a !important;
}

.footerSocialLink .bc-i-instagram {
    background: url(assets/images/media_18755722_9880aacb5c98ebcf74b757c9f8039915.png) !important;
    background-size: cover !important;
    width: 29px !important;
    height: 29px !important;
}

.footerSocialLink .bc-i-twitter {
    background: url(assets/images/media_18755722_a012469067e06e8743ac0594bd65fcf4.png) !important;
    background-size: cover !important;
    width: 29px !important;
    height: 29px !important;
}

.footerSocialLink .bc-i-telegram {
    background: url(assets/images/media_18755722_cb546f35385b47112ae854788e39e4bc.png) !important;
    background-size: cover !important;
    width: 29px !important;
    height: 29px !important;
}


.footerSocialLink .bc-i-youtube {
    background: url(assets/images/media_18755722_5089a3e39394daaaf67657907407ed0a.png) !important;
    background-size: cover !important;
    width: 29px !important;
    height: 29px !important;
}


.footerSocialLink {
    background-color: transparent !important;
}

.footerSocialLink a {
    background: transparent !important;
}

.footerSocialLink .bc-i-instagram::before {
    color: transparent !important;
}

.footerSocialLink .bc-i-twitter::before {
    color: transparent !important;
}

.footerSocialLink .bc-i-telegram::before {
    color: transparent !important;
}

.footerSocialLink .bc-i-youtube::before {
    color: transparent !important;
}


.m-nav-items-list-item-bc.active,
.m-nav-items-list-item-bc:hover {
    border: none !important;
    background: transparent !important;
}

.m-nav-items-list-item-bc:not(.active) {
    background: transparent !important;
    border: transparent !important;
}


.m-nav-items-list-item-bc .nav-ico-w-row-bc .payment-logo {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.m-nav-items-list-item-bc .nav-ico-w-row-bc {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    width: 100%;
    height: 90px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.payment-logo {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Ödeme yöntemi kartları (yatır + çek, ikisi de `.dep-w-info-bc`).
 *
 * Kartların zemini de çerçevesi de sıfırlanmıştı ve grid boşluğu 0'dı: logolar birbirine
 * yapışık banner'lara dönüşmüştü, seçili yöntemin de hiçbir işareti yoktu.
 * Sonra tam ters uca kaçtı: opak kroma zemin + altın çerçeve kartı fazla belirgin
 * yapıyordu. Şimdi CAM (glass): yarı saydam zemin + blur, çerçeve beyazın kısık
 * tonu. Altın yalnız SEÇİLİ kartta. Mobil aynı stil (mobile/public/custom.css).
 * Kartın altındaki ad + limit bandı için bkz. aşağıdaki ALT BANT bloğu. */
.dep-w-info-bc .m-block-nav-items-bc {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Kart = DÜZ RENK BLOĞU: çerçeve yok, ayrımı zemin tonu veriyor (koyu sayfa
 * zemininde %5 beyaz tül). Alttaki yazı bandı bir tık açık ton (aşağıdaki blok)
 * — iki düz yüzey, aralarında çizgi yok.
 * ⚠️ `backdrop-filter` EKLEMEYİN: kartın arkası düz opak renk (`--site-bg`), yani
 * tek piksel boyamaz — buna karşılık her kartı ayrı compositor katmanı yapıp
 * asenkron kayan listede "yüzme"/köşe kırılması çıkarıyor.
 * ⚠️ Köşe yarıçapı PAKETTEN (`--border-radius`): paket aynı seçiciye eşit
 * özgüllükle ve custom.css'ten SONRA yazıyor — buradaki `border-radius: 14px`
 * hiç uygulanmıyordu, silindi. 14px isteniyorsa `!important` şart. */
.dep-w-info-bc .m-nav-items-list-item-bc {
    background: rgba(255, 255, 255, .05) !important;
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
    overflow: hidden;
    cursor: pointer;
    display: flex;              /* logo panesi + yazı plakası alt alta */
    flex-direction: column;
}

/* Logo panesi: kartın gövdesi, tek düz ton. Cam gradyanları/iç ışık çizgisi
 * KALDIRILDI (düz tasarım) — logo kendi renginde okunuyor.
 * ⚠️ `!important` şart: 571. satırdaki kural padding-top/bottom'ı `1px !important`
 * ile çiviliyor, önemsiz bir `padding` onu ezemezdi. */
.dep-w-info-bc .m-nav-items-list-item-bc .nav-ico-w-row-bc {
    height: 84px !important;
    padding: 12px !important;
    flex: 0 0 auto;
    order: 1;
}

/* Durumlar da DÜZ: çerçeve rengi değil ZEMİN tonu değişiyor. */
.dep-w-info-bc .m-nav-items-list-item-bc:hover {
    background: rgba(255, 255, 255, .09) !important;
}

.dep-w-info-bc .m-nav-items-list-item-bc.active {
    background: rgba(var(--hero, 238, 205, 36), .18) !important;
}

/* YAZI PLAKASI: yöntem adı + limitler. Kart genişliğinde, KESKİN kenarlı buzlu
 * bant — kartın alt köşelerini `overflow: hidden` zaten kırpıyor, plakanın ayrı
 * yuvarlaklığı yok. Kart gövdesinden ÇİZGİYLE değil bir tık açık tonla ayrılır.
 *
 * Değerler DATASET'ten geliyor (`yontemVerisiYaz`, UiBoot.js) — yani sunucudan.
 * Bu satırlar bir zamanlar da vardı ama metin CSS'e GÖMÜLÜYDÜ ve gerçek
 * limitlerle çelişiyordu; o yüzden silinmişlerdi (bkz. dosya başı). `attr()`
 * ile geri geldiler: kaynak tek, karta ayrı DOM düğümü yok.
 *
 * ⚠️ Öznitelik seçicisi ŞART: veri gelmeden (ya da limitsiz yöntemde) `content`
 * boş dize basar ve kartın altında sebepsiz boş bir plaka kalırdı. */
.dep-w-info-bc .m-nav-items-list-item-bc[data-pay-name]::before,
.dep-w-info-bc .m-nav-items-list-item-bc[data-limit]::after {
    background: rgba(255, 255, 255, .10);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dep-w-info-bc .m-nav-items-list-item-bc[data-pay-name]::before {
    order: 2;
    content: attr(data-pay-name);
    padding: 9px 10px 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgba(var(--b-sc, 255, 255, 255), .92);
}

.dep-w-info-bc .m-nav-items-list-item-bc[data-limit]::after {
    order: 3;
    content: attr(data-limit);
    padding: 0 10px 9px;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(var(--hero, 238, 205, 36), .8);
}

/* Limitsiz yöntemde bandın alt boşluğu ::after'dan gelemez. */
.dep-w-info-bc .m-nav-items-list-item-bc[data-pay-name]:not([data-limit])::before {
    padding-bottom: 9px;
}


.ftr-copy-rights-bc a {
    color: #b0abb8;
}

[class*=is-web] .copyRightBlock {
    padding-bottom: 20px !important;
}

/* Öne çıkan oyun kartı: sayfa zemini DEĞİL, bir kroma yüzeyi — üstündeki
   thumbnail yüklenene kadar görünen kutu artık header/navbar ile aynı renkte. */
.featuredGameItem {
    background-color: var(--chrome-1, #05060a) !important;
}
/* yapilacaklar.txt (2026-07-13) — Madde 10: oyun kartında hareket ("hareketli hale
 * getirelim"). Provider thumbnail'ları statik → hover'da hafif yakınlaşma. Blurlu
 * Demo/Oyna overlay'i bundle'ın casino-game-layer keyframe'i zaten sağlar. */
.casinoGameItemImage { transition: transform var(--slow-transition-duration, .3s) ease, filter var(--default-transition-duration) ease; }
.casinoGameItem:hover .casinoGameItemImage,
.casinoGameItem:has(> .casinoGameItemBlock) .casinoGameItemImage {
    transform: scale(1.06);
}

/* ============================================================================
 * dekstop.txt (2026-07-13) — masaüstü düzeltmeleri
 * ========================================================================= */

/* Madde 5: oyun kartına hover/dokun'da BULANIKLAŞMA alanı. Bundle .casinoGameItemBlock
 * overlay'ini gösteriyor ama blur/koyu arka plan vermiyordu ("blur vardı gitmiş"). */
.casinoGameItemBlock {
    background: rgba(5, 6, 10, .62) !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.casinoGameItemBlock .casinoGameItemLabelBc { color: #fff; }
.casinoGameItem:hover .casinoGameItemImage { filter: blur(2px) brightness(.72); }

/* Madde 2: "yukarı çık" butonu aşağı inince görünsün. Bundle onu .header-bc içinde
 * static + opacity:0 bırakıyordu → hiç görünmüyordu. ui.js body'ye taşır (header'ın dinamik
 * transform'u fixed'i hapsetmesin) + eşikte (y>400) .nav-floating-btn-show ekler.
 * hatalar #10: native GÖRÜNÜM (yatayda ortalı, alttan 90px, saydam yuvarlak). */
.center-bottom-btn {
    position: fixed !important;
    left: 0; right: 0; margin: 0 auto;   /* native center-bottom: yatayda ortala */
    bottom: 90px;
    width: 56px; height: 56px;
    display: flex !important; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.center-bottom-btn.nav-floating-btn-show { opacity: 1 !important; pointer-events: auto; }
/* Butonun GÖRÜNÜMÜ (56px yuvarlak, yarı saydam, blur) tema dosyasında:
 * assets/index.Y8VP_-at.css `.center-bottom-btn` — buradaki blok yalnız konum +
 * `-show` görünürlüğü (o sınıfı ui.js ekliyor, paket yalnız `-hide` biliyor). */

/* Oyun kartı YÜKLENİRKEN kayan iskelet (shimmer) — mobil ikizle BİREBİR aynı
 * (mobile/public/custom.css). Görsel gelince UiBoot `.is-loaded` ekler → durur.
 * ⚠️ Kurallar `.casinoGamesList` ile KAPSANMAZ: aynı kart anasayfa şeritlerinde,
 * jackpot/turnuva bloklarında ve favori panelinde de basılıyor; kapsarsak kart
 * bulunduğu yere göre farklı görünürdü (kullanıcı isteği: her yerde birebir aynı). */
.casinoGameItem {
    background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.05) 70%);
    background-size: 220% 100%;
    animation: betgoTileShimmer 1.4s linear infinite;
}
.casinoGameItem.is-loaded { background: none; animation: none; }
@keyframes betgoTileShimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* Madde 10: kartlarda idle "hareket" — periyodik ışık geçişi (shine). GPU-dostu, kart
 * hover değilken. Kartın İLK 10'unda (kullanıcı isteği); kapsayıcıdan bağımsız. */
.casinoGameItem { position: relative; }
.casinoGameItemContent:nth-child(-n+10) .casinoGameItem::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 48%, transparent 62%);
    transform: translateX(-130%);
    animation: casinoCardShine 6s ease-in-out infinite;
}
.casinoGameItemContent:nth-child(-n+10) .casinoGameItem:hover::after,
.casinoGameItemContent:nth-child(-n+10) .casinoGameItem:has(> .casinoGameItemBlock)::after { display: none; }
@keyframes casinoCardShine {
    0%, 62%   { transform: translateX(-130%); }
    82%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
    .casinoGameItemContent:nth-child(-n+10) .casinoGameItem::after { animation: none; display: none; }
}

/* dekstop.txt #7: ANLIK KAZANÇLAR altı HIZLI ERİŞİM — bölüm kısayol kartları tek sırada eşit
 * genişlik (eski $__promo İade bannerları aşağı taşındı, bkz. home.php $__quick). */
.home-quick-access {
    display: grid !important;
    grid-template-columns: none !important;   /* base .product-banner-container-bc auto-fill 322px'i ez */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    width: 100%;
}
.home-quick-access > div { min-width: 0; }
.home-quick-access .product-banner-bc { display: block; width: 100%; }
.home-quick-access .product-banner-img-bc { width: 100%; height: auto; display: block; border-radius: 10px; }

@media (max-width: 900px) {
    .home-quick-access { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
}

/* Görselin ARKASINDA altın ışıma + hafif süzülme — kutular "uçuyor" gibi dursun.
 * Işıma `::before`ta (z-index:-1 → görselin altında), süzülme görselin kendisinde:
 * iki ayrı katman, biri diğerinin transform'unu ezmiyor. `isolation` şart —
 * onsuz negatif z-index kutuyu terk edip bölüm zeminine kaçar.
 * ⚠️ Mobil ikizi: mobile/public/custom.css (`.col-5`) — birlikte değiştirin. */
.home-quick-access .product-banner-bc {
    position: relative;
    isolation: isolate;
}

.home-quick-access .product-banner-bc::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 55%, var(--gold-glow, rgba(238, 205, 36, .16)) 0, rgba(238, 205, 36, .10) 38%, transparent 70%);
    filter: blur(12px);
    animation: hizliIsima 3.6s ease-in-out infinite;
}

.home-quick-access .product-banner-img-bc {
    animation: hizliSuzulme 4.2s ease-in-out infinite;
    will-change: transform;
}

/* Kutular aynı anda nefes alırsa şerit tek parça yanıp söner; üçlü kaydırma
   dalga hissi veriyor. */
.home-quick-access > div:nth-child(3n+2) .product-banner-bc::before,
.home-quick-access > div:nth-child(3n+2) .product-banner-img-bc { animation-delay: .8s; }
.home-quick-access > div:nth-child(3n+3) .product-banner-bc::before,
.home-quick-access > div:nth-child(3n+3) .product-banner-img-bc { animation-delay: 1.6s; }

@keyframes hizliIsima {
    0%, 100% { opacity: .5; transform: scale(.92); }
    50%      { opacity: 1;  transform: scale(1.06); }
}

@keyframes hizliSuzulme {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .home-quick-access .product-banner-bc::before,
    .home-quick-access .product-banner-img-bc { animation: none; }
}

/* Ayarlar dropdown menüsü (Oran formatı / Dil / Saat formatı) — BC select'e tık → seçenek listesi.
   Görünümü motorun KENDİ `.multi-select-label-bc` kuralları verir (compact-mode
   varyantı dahil); burada yalnız açık/kapalı ve imleç kalır. Eskiden buradaki elde
   yazılmış kutu motorun stilini eziyordu. */
.js-setting-select { position: relative; cursor: pointer; }
.js-setting-menu[hidden] { display: none; }
.js-setting-option { cursor: pointer; }

/* Bir kazancın üstüne gelince şerit dursun — okumaya/tıklamaya fırsat versin. */
.casinoTopWinnersWidget .runningLine:hover { animation-play-state: paused; }

/* NAVBAR ŞERİTLERİ (yayılım + ikon ölçüsü) overlay.css'te (`.bg-nav-list` /
 * `.bg-subnav-list`) — buraya ikinci kopya yazmayın. */

/* Açılır menü (`.nav-menu-sub`): kiracı `custom_css`i ana nav öğelerini ortalarken
 * TORUNLARI da kapsıyor → satırlar sola yaslanmalı. Kiracı kuralı
 * `html body #root …` + !important olduğu için özgüllük şart. */
html body #root .layout-header-holder-bc .nav-content-menu .nav-menu-sub .nav-menu-item {
    justify-content: flex-start !important;
}
/* ⚠️ BAKİYE KUTUSUNA (`.header-user-nav … .balanceAmount` /
 * `a:has(.hdr-user-info-content-bc)`) BURADAN CSS YAZILMAZ (istek 2026-08-15):
 * kutu tamamen kiracının BO > "Yalnızca header için özel CSS" alanına
 * (`header_custom_css`) bırakıldı. Eskiden burada onun altın gradyan + 100px
 * kutu + `#171300` yazı dayatmasını geri çeviren karşı kurallar vardı. */

/* ══════════════════════════════════════════════════════════════════════════
 * ALTIN TEMA — GİRİŞ / ÜYE OL POPUP'I
 *
 * Kapsam `.entrance-popup-bc` ile SINIRLI: `form-control-*`, `checkbox-*`
 * sitedeki her formda geçiyor, kapsamsız kural bütün siteyi altına çevirirdi.
 * Yalnız RENK değişiyor; geometri native kalıyor. Değerler theme-vars.css'ten, fallback'li.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Kabuk. `:has()` şart: `.popup-inner-bc` sitedeki tüm popup'ların ortak kabı
   (o kural popup kabuğunu site zeminiyle boyuyor) — yalnız giriş/kayıt olanı kromaya çevir. */
.popup-inner-bc:has(.entrance-popup-bc) {
    background: linear-gradient(180deg, var(--chrome-1, #05060a), var(--chrome-2, #0e1017)) !important;
}

.entrance-popup-bc .e-p-section-title-bc,
.entrance-popup-bc .form-control-icon-bc,
.entrance-popup-bc .dropdownIcon-bc,
.popup-inner-bc:has(.entrance-popup-bc) > .e-p-close-icon-bc {
    color: var(--gold, #eecd24) !important;
}

/* Alanlar: zemin saydam (kabuk kroması görünsün), yazı sıcak altın.
   Kayan başlık dolu/odaklıyken kutunun ÜSTÜNE çıkıyor (native top:-2px) →
   kenarlıklı kutu yerine native alt çizgi düzeni korunuyor. */
.entrance-popup-bc .form-control-input-bc,
.entrance-popup-bc .form-control-textarea-bc,
.entrance-popup-bc .form-control-select-bc {
    color: var(--gold-hi, #f6e386) !important;
}

.entrance-popup-bc .form-control-title-bc {
    color: rgba(238, 205, 36, .6) !important;
}

.entrance-popup-bc .form-control-bc.focused .form-control-title-bc {
    color: var(--gold, #eecd24) !important;
}

/* ⚠️ ALT ÇİZGİ (`.form-control-input-stroke-bc`) KURALLARI SİLİNDİ: paket o
   elemanı KOŞULSUZ gizliyor (`display: none`, assets/index.Y8VP_-at.css — kuralın
   kendisi `display:block` veren satırdan SONRA geliyor), yani `:before`/`:after`
   giydirmesi hiçbir zaman boyanmadı. Alan kutusunun çerçevesini yukarıdaki
   `form-control-*` kuralları veriyor. Geri istenirse önce `display` açılmalı. */

/* Onay kutusu (Beni hatırla / kural onayları) — DÜZ: boşken altın tül dolgu
   (çerçeve yerine), doluyken dolu altın. */
.entrance-popup-bc .checkbox-control-icon-bc {
    background: rgba(238, 205, 36, .16) !important;
    border: 0 !important;
}

.entrance-popup-bc .checkbox-control-input-bc:checked ~ .checkbox-control-icon-bc {
    background: var(--gold, #eecd24) !important;
    color: #05060a !important;
}

.entrance-popup-bc .checkbox-control-text-bc,
.entrance-popup-bc .privacy-police-text {
    color: rgba(238, 205, 36, .75) !important;
}

/* ⚠️ GİRİŞ / ÜYE OL SUBMIT DÜĞMESİNE CSS YAZILMAZ (istek 2026-08-15): `.btn.a-color`
   paketin genel birincil düğmesi (sitedeki her formda aynı), popup'a kapsanmış
   altın gradyan + hover/active/focus/disabled giydirmesi kaldırıldı. Düğme artık
   temanın varsayılanıyla çiziliyor. */

.entrance-popup-bc .sg-n-forgot-password,
.entrance-popup-bc .live-chat-adviser-bc,
.entrance-popup-bc .checkbox-control-text-privacy {
    color: var(--gold, #eecd24) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * ALTIN TEMA — GEÇMİŞ TABLOSU (.historyList-bc)
 *
 * Satırlar `lib/bets.js` (BAHİS GEÇMİŞİ > TÜMÜ) ve `lib/wallet-history.js`
 * (bakiye hareketleri, çekim talepleri) içinde inline stille çiziliyor:
 * inline yalnız GEOMETRİ + durum rozetinin rengini veriyor, zemin/metin rengi
 * hiç yoktu → satırlar sayfa zemininde renksiz duruyordu. Renk katmanı burada.
 * `border-bottom` inline geldiği için tek `!important` orada gerekli.
 * ══════════════════════════════════════════════════════════════════════════ */
.historyList-bc {
    margin: 8px 0 12px;
    border-radius: var(--border-radius, 4px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--chrome-1, #05060a), var(--chrome-2, #0e1017));
}

.historyList-bc .betHistoryRow-bc {
    color: var(--gold-hi, #f6e386);
    border-bottom: 1px solid var(--gold-line, rgba(238, 205, 36, .32)) !important;
}

/* ⚠️ ZEBRA YOK: mobilde sekme filtresi satırları `display:none` yapıyor
   (ui.js filterBetRows) — `nth-child` gizli satırları da sayacağı için şerit
   delik deşik görünürdü. Ayırma işini kenar çizgisi + hover yapıyor. */
.historyList-bc .betHistoryRow-bc:hover { background: rgba(238, 205, 36, .08); }
.historyList-bc .betHistoryRow-bc:last-child { border-bottom: 0 !important; }

/* Bozdur / İPTAL — satır içi ikincil düğme: DÜZ altın tül dolgu, çerçeve yok. */
.historyList-bc .btn.a-outline {
    color: var(--gold, #eecd24) !important;
    background: rgba(238, 205, 36, .16) !important;
    border: 0 !important;
}

.empty-b-text-v-bc { color: rgba(238, 205, 36, .7) !important; }


/* ══════════════════════════════════════════════════════════════════════════
 * BONUS EKRANLARI (.bonus-page — BONUS TALEBİ / SPOR / CASİNO / GEÇMİŞ)
 *
 * Kabuk düzeltmesi `lib/account.js`te (başlık şeridi + kaydırma gövdesi);
 * burası yalnız o gövdenin İÇİ. Pano ~1000px geniş: temanın varsayılanları
 * kenar çubuğu genişliğine (≈300px) göre ayarlı olduğu için burada dağılıyordu.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Bölüm başlıkları artık PENCERE başlığı değil, içerik başlığı: 49px'lik dolu
 * şerit yerine düz tipografik başlık (üç şerit üst üste "hangisi sayfa adı?"
 * sorusu yaratıyordu). DÜZ TASARIM: alt ayraç çizgisi yok, ayrımı boşluk +
 * altın renk + büyük harf aralığı taşıyor. */
.bonus-page .u-i-common-content > .overlay-header {
    height: auto;
    line-height: 1.2;
    padding: 0 0 7px;
    margin: 20px 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gold, #eecd24);
}

.bonus-page .u-i-common-content > .overlay-header:first-child {
    margin-top: 0;
}

/* Bonus kartı: tam genişlikte "Durum" ile değeri arasında ~900px boşluk
 * kalıyordu. `min-height:120px` de gereksiz — kart içeriği kadar. */
.bonus-page .u-i-p-amounts-bc {
    max-width: 520px;
    min-height: 0;
}

/* Talep geçmişi satırı: dört alan (ad / durum / tutar / tarih) sola yığılıyordu
 * (`.eligible-bonus` yalnız `display:flex`). Ad esner, kalanlar sağa yaslanır. */
.bonus-page .eligible-bonus {
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--chrome-2, #0e1017);
    border-radius: var(--border-radius, 4px);
}

.bonus-page .eligible-bonus > .eligible-bonus-title:first-of-type {
    flex: 1;
}

/* Promosyon ızgarası: temanın sütun min'i 345px — panoda iki DEV afiş çıkıyor,
 * 11 promosyon beş ekran boyu sürüyordu. Panoda afiş bir seçim düğmesi (detay
 * popup'ı zaten tıklayınca açılıyor), o yüzden küçük.
 * ⚠️ `!important` HÂLÂ ŞART ama gerekçesi değişti (2026-08-13): karşı kural artık
 * custom.css'te değil PAKETTE (assets/PromotionDetailsTemplate.CqBzzhRf.css
 * `.promotionsList-bc:not(.gridView)`) — özgüllük eşit, paket SONRA yükleniyor. */
.bonus-page .promotionsList-bc {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) !important;
    grid-gap: 10px;
    padding: 0 !important;
}

/* Profil > sol menü: HOVER = seçili görünümün aynısı. Seçili satırı
 * `.user-profile-nav-item-cursor:after` çiziyor (kayan tek kutu: gradient zemin
 * + 2px altın sol hat) — hover'ı da aynı reçeteyle satırın KENDİ kutusuna
 * veriyoruz; satır zaten liste padding'i (15px) içinde, yani cursor kutusuyla
 * birebir aynı genişlikte. 2px kenarlık metni kaydırmasın diye
 * padding 12 → 10px. */
.user-profile-nav-list .user-profile-nav-item:hover {
    padding-inline-start: 10px;
    background-image: linear-gradient(to right, rgba(var(--b), .3), rgba(var(--b), .1));
    border-inline-start: 2px solid var(--gold, #eecd24);
    border-start-end-radius: var(--border-radius, 4px);
    border-end-end-radius: var(--border-radius, 4px);
}

/* ============================================================================
 * PROFİL MODALI REFERANS SİTENİN FONTUNU KULLANIR (2026-08-15).
 *
 * Ölçüm (referans siteye test/1 ile girilip modal açıldı, computed style):
 * modaldaki HER metin `Roboto, Arial, Helvetica, sans-serif`; ikinci bir yazı
 * tipi yok, yalnız `bc-i-*` ikonları BetConstruct-Icons. Ölçü/kalınlıklar
 * (12/13/14/20px · 400/500/700) zaten paket CSS'inden geliyor, birebir aynı.
 *
 * 🔴 Değer paketin `:root{--font-family: Rubik}` VARSAYILANI DEĞİL: referans
 * site çalışma anında `<html style="--font-family: Roboto, Arial, Helvetica,
 * sans-serif">` yazıp onu eziyor. theme-vars.css'te "birebir aynısı" diye
 * duran Rubik bu yüzden yanlış — ama gövde fontu BİLEREK Rubik bırakıldı,
 * kapsam yalnız bu modal.
 *
 * ⚠️ `!important` YOK ve gerekmiyor: karşı kural paketin `html{font-family:
 * var(--font-family)}` kuralı, sınıf seçicisi eleman seçicisini yener (custom.css
 * paketten ÖNCE yüklense bile). Modal içindeki `font-family: inherit` yazan
 * alanlar (input, select, .form-control-input-bc) buradan miras alır.
 * ⚠️ Yazı tipini değiştireceksen tema-degiskenleri.test.js'teki istisnayı da
 * güncelle — orada tek font kuralının bekçisi duruyor. */
.user-profile-container {
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

/* VIP puanlari: seviye seridi (Bronze/Silver/...) scrollbar gizle */
.loyaltyProgramWrapper .horizontalSliderWrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.loyaltyProgramWrapper .horizontalSliderWrapper::-webkit-scrollbar { display: none; }

/* ============================================================================
 * KAYAN OVERLAY BAŞLIK ŞERİDİ GÖRÜNMÜYORDU (promosyon detayı).
 *
 * Paket şeridi `:not([style*="transform: translateY(0px)"])` ile gizliyor ve eşleşme
 * `style` niteliğinin HAM METNİNE bakıyor: React SSR boşluksuz bastığı için tutmuyor,
 * şerit opacity:0 kalıyordu (promosyon adı da geri oku da görünmüyordu).
 * ========================================================================= */
.overlay-sliding-wrapper-bc[style*="translateY(0"] .back-nav-bc { opacity: 1 !important; }

/* ============================================================================
 * ANLIK KAZANÇLAR — SLIDERIN ALTINDA İNCE ŞERİT (2026-08-15 sadeleştirme).
 *
 * Altın panel/başlık/çip giydirmesi KALDIRILDI (başlık ve dönem çipleri artık
 * DOM'da da yok — bkz. app/page.js `winners`). Görünüm pakete bırakıldı
 * (CasinoTopWinnersWidget + RunningLine css'leri); burada yalnız üç şey var:
 * satır sliderın dibine yaklaşır, tutar altın, kart odaklanınca şerit durur.
 * ⚠️ Mobil ikizi: mobile/public/custom.css (orada başlık kazınmış gövdede
 * olduğundan display:none ile gizli) — birlikte değiştirin.
 * ========================================================================= */

/* Bölümler arası 20px (index.css `.hm-row-bc:not(:first-child):has(...)`,
 * özgüllük 0-4-0) bu satır için 6px'e iner → şerit slidera "yapışık" okunur.
 * `.layout-content-holder-bc` ŞART: custom.css paketten ÖNCE yüklendiği için
 * beraberlik kaybeder, fazladan sınıf 0-5-0 yapıp kuralı geçirir. */
.layout-content-holder-bc .hm-row-bc:not(:first-child):has(.hm-row-bc-inner > .casinoTopWinnersWidget) { margin-top: 6px; }

/* `tabular-nums`: rakam genişliği sabit → kayan şeritte tutarlar zıplamıyor. */
.casinoTopWinnersWidget .casinoWinnerWidgetAmount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold, #eecd24);
}

/* Şerit üstündeki kart odaklanınca da dursun (klavye/dokunmatik). Hover
 * duraklatması yukarıda ayrı blokta. Reduced-motion CSS'i YOK: UiBoot
 * `seritHiziniKur` tercihi zaten okuyup şeridi `.frozen`a alıyor. */
.casinoTopWinnersWidget .runningLine:focus-within { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════════════════════
 * ALTIN TEMA — MASAÜSTÜ HEADER ÜST SATIRI
 *
 * Üst satır (PARA YATIR / ORTAKLIK / telegram-wa-tv / bakiye / profil / dil /
 * saat / smart-panel) paketin STOK grisiyle geliyordu: ayraçlar `--menu-sc`in
 * %10'u, ikonlar düz beyaz, hover'da yalnız opaklık oynuyordu. Sitenin geri
 * kalanı (navbar, bölüm şeritleri, footer) altın kroma olduğu için header'ın
 * üst satırı tek "renksiz" bant olarak kalıyordu.
 *
 * Yalnız RENK/BOŞLUK: geometri, hizalama, açılır menü davranışı pakette kalıyor.
 * ⚠️ custom.css motordan ÖNCE yükleniyor → eşit özgüllükte `!important` şart.
 * ⚠️ `.skipped` (PARA YATIR) DIŞARIDA: kiracının `header_custom_css`i o düğmeyi
 * adres eşleşmesiyle (`a[href*="deposit"]`) altın CTA'ya çeviriyor; ikinci bir
 * giydirme onunla çakışırdı.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Ayraçlar altın hattın aynısı — sayfa genelindeki ince çizgilerle tek dil. */
.hdr-main-content-bc .header-icon-text:after,
.hdr-main-content-bc .compact-mode:after,
.hdr-main-content-bc .nav-menu-other:after,
.hdr-main-content-bc .infoTime:after,
.hdr-main-content-bc .smartPanel-bc:after {
    background: var(--gold-line, rgba(238, 205, 36, .32)) !important;
    height: 22px !important;
}

/* PARA YATIR ikonu ₺ (dolar değil): ikon fontunda lira glifi yok, karakter
   olarak basılıyor. `<i>` italik gelmesin diye font-style sıfırlanıyor. */
.tl-ikon:before {
    content: "₺";
    font-style: normal;
    font-weight: 700;
}

/* ⚠️ `.header-icon-text` giydirmesi YAZMAYIN: üst satırda o sınıfı taşıyan TEK
 * öğe PARA YATIR CTA'sı ve o hep `.skipped` (Header.js `links`). İkon/metin
 * linkleri (ORTAKLIK/telegram/wa/tv) logonun yanındaki şeride taşındı —
 * sahibi overlay.css `.bg-hdr-social-item`. Paketin `[class*=bc-i]` Roboto
 * dayatması da o yüzden ölü: anchor `bc-i-*` sınıfı taşımıyor (ikon ayrı <i>). */

/* ⚠️ Bakiye kutusuna (`.hdr-user-info-content-bc`, `.balanceAmount`) KUTU/GİYDİRME
 * kuralı YAZILMAZ — bkz. yukarıdaki bakiye notu. Tek istisna aşağıdaki renk.
 *
 * BONUS TUTARI BEYAZ, ALTIN DEĞİL (istek 2026-08-15): paket `.ext-2`ye
 * `color: rgba(var(--oc-2), 1)` yazıyor ve `--oc-2` bu dosyanın `:root` bloğunda
 * altına çevrildiği için satır sarı çıkıyordu.
 * ⚠️ TOKENE DOKUNULMUYOR: `--oc-2` ayarlar sayfası, cashout slider ve öne çıkan
 *    oyunlarda da geçiyor — orada altın DOĞRU.
 * ⚠️ `!important` şart: custom.css paket CSS'inden ÖNCE yükleniyor (layout.js
 *    cssLinks), eşit özgüllükte paketin kuralı kazanırdı.
 * ⚠️ Mobil ikizinde kural GEREKMİYOR: orada `--oc-2` hiç tanımlı değil (bkz.
 *    mobile/lib/bonus-kart.test.js), bildirim geçersiz düşüp renk miras kalıyor. */
.hdr-user-info-texts-bc.ext-2 {
    color: #fff !important;
}

/* Profil avatarı + smart-panel ikonları: sönük beyaz yerine altın hover. */
.hdr-main-content-bc .hdr-user-avatar-icon-bc,
.hdr-main-content-bc .sp-button-icon-bc,
.hdr-main-content-bc .generic-search-btn > i {
    transition: color .15s ease;
}

.hdr-main-content-bc .nav-menu-other > li:hover > a > .hdr-user-avatar-icon-bc,
.hdr-main-content-bc .sp-button-bc:hover .sp-button-icon-bc,
.hdr-main-content-bc .generic-search-btn:hover > i {
    color: var(--gold, #eecd24) !important;
}

/* Saat: BİLEREK giydirilmiyor — referans (casinoroyal526) ile birebir aynı
   görünmesi istendi, o sitede saat paketin stok stiliyle (12px / beyaz /
   %10 zemin) çıkıyor. Buraya .infoTime kuralı EKLEMEYİN. */

/* VİP rozeti şeridi de aynı hatta otursun. */
.hdr-main-content-bc .loyaltyBonusHeaderText {
    color: var(--gold, #eecd24) !important;
}

/* PARA YATIR: giydirme YOK — paketin stok `.btn.a-color` düğmesi kullanılıyor
   (istek 2026-08-17). Özel gradyan/kutu/hover kuralları kaldırıldı. */

/* Tarih alanları tek takvim gösterir (lib/takvim.js, alanın altına açılır).
   Tarayıcının kendi ikonu ikinci bir kutu açıyordu — tema dışı ve yanlış konumda. */
.form-control-input-bc[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
}