/* theme_custom_css */
/* ══════════════════════════════════════════════════════════════════════════
 * MotoBahis marka teması — palet + uyuşmayan noktalar
 * Ölçüm: 09.09.2026, canlı masaüstü + mobil (araclar/prob, renk taraması).
 *
 * TESPİT: sitenin bütün vurgu sistemi ALTIN (#eecd24) — marka ise KIRMIZI
 * (#B80200) + açık gri (#C6C5C4). Üç sayfada 360'a yakın öge altın taşıyordu:
 * oran rakamları (.market-odd-bc), jackpot tutarları (.bk-tutar), kazanan
 * tutarları, birincil düğmeler, ÜYE OL, bölüm başlıkları. Tek on-brand öge
 * afişlerdi (kırmızı/krom) — kroma onlarla çarpışıyordu.
 *
 * YÖNTEM: kural değil TOKEN eziyoruz. /custom.css her rengi `var(--ad, yedek)`
 * ile tüketiyor, BC paketi de `rgba(var(--hero),…)` okuyor; token'ı çevirmek
 * iki platformu birden düzeltiyor (mobilde token adları BİREBİR aynı, ölçüldü).
 *
 * `html:root` BİLEREK: /custom.css kendi `:root`unda `--hero/--oc-2/--accent`i
 * `!important` ile yazıyor (satır 15/23/25). Aynı özgüllükte kaynak sırasına
 * kalırdık; `html:root` (0,1,1) > `:root` (0,1,0), sıradan bağımsız kazanır.
 * ══════════════════════════════════════════════════════════════════════════ */

html:root {
    /* ── DOLGU rolü: üstünde BEYAZ yazı duran yüzeyler (ÜYE OL, birincil
     * düğmeler, aktif sekme). Marka kırmızısının birebir kendisi. */
    --hero: 184, 2, 0 !important;
    --hero-hover: 214, 20, 12 !important;
    --hero-sc: 255, 255, 255 !important;

    /* ── ORAN RAKAMLARI nötr KROM. Ölçüldü: `.market-odd-bc` rengini
     * `--oc-2`den alıyor. Kırmızı denendi ve GERİ ALINDI: `--odd-down`
     * (255,52,73) ile neredeyse aynı tona düşüyor — düşen oranla normal oran
     * ayırt edilemiyordu. Marka kuralı da aynı yere çıkıyor: "kırmızı yalnız
     * vurguda kalsın". Krom gri koyu zeminde 11:1. */
    --oc-2: 198, 197, 196 !important;
    --oc-2-hover: 239, 238, 237 !important;
    --oc-2-sc: 5, 6, 10 !important;

    /* ── METİN/İKON vurgusu: koyu zeminde RENK olarak kullanılan token.
     * #B80200 koyu zeminde 2.9:1 — okunmuyor; parlak kırmızı 5.8:1 (AA).
     * Dolgu kırmızısından AYRI olmasının tek sebebi bu, süs değil. */
    --accent: 255, 68, 54 !important;
    --accent-hover: 255, 110, 96 !important;
    --accent-sc: 5, 6, 10 !important;

    /* ── Site paleti (/custom.css bu adlarla tüketiyor). Adı "gold" kalıyor:
     * yeniden adlandırmak 20 kullanım yerini kırar, kazancı sıfır. */
    --gold: #ff4436 !important;        /* metin / ikon / kenar vurgusu */
    --gold-hi: #efeeed !important;     /* krom parlaklık — marka grisi ailesi */
    --gold-deep: #7d0100 !important;   /* gradyan dibi */
    --gold-line: rgba(184, 2, 0, .42) !important;
    --gold-glow: rgba(255, 68, 54, .16) !important;
    --btx-primary: #ff4436 !important; /* .bk-tutar YALNIZ bunu okuyor, :root'ta tanımsızdı */

    /* ── Bölüm şeridi. Marka notu: "kırmızı yalnız vurguda kalsın (yüzey
     * değil)" — şerit zemini koyu, kırmızı sadece çizgide; başlık krom. */
    --site-bar-from: #05060a !important;
    --site-bar-to: #1b0b0a !important;
    --site-bar-border: #b80200 !important;
    --site-bar-fg: #f0efee !important;

    /* ── Kroma alt tonu: #0e1017 MAVİYE çalıyordu, kırmızının yanında mor
     * görünüyordu. Aynı koyulukta nötr-sıcak karşılığı. */
    --chrome-2: #121011 !important;
}

/* ── SAYFA ZEMİNİ ─────────────────────────────────────────────────────────
 * Eski: /brand/site-bg.webp — rulet, slot makinesi, altın jeton ve pin-up
 * figürlü duvar kağıdı; marka.md'nin açık kuralı "abartılı 'ucuz casino'
 * görünümünden kaçın". Yerine markanın kendi afiş dili: gece şehir + kırmızı
 * ışık izleri + motosiklet (medya kütüphanesinden, 1280x720).
 *
 * ⚠️ URL `api.betgo.digital`; sunucu 302 ile `betgo-cdn.top`a yolluyor. CDN
 *    adı DEĞİL kaynak adı yazılı: CDN dönerse bağlantı kırılmasın.
 * `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ürdü.
 * ⚠️ GÖRÜNÜRLÜK tek sayıyla ayarlanır (tül yüzdesi). Daha silik istenirse
 *    yüzde BÜYÜTÜLÜR. `opacity` KULLANMA: zemin `.layout-bc`in kendi katmanı,
 *    bütün sayfa içeriğini de soldururdu.
 * ⚠️ Kuralın kendisi AŞAĞIDA (tek yerde). Burada %78'lik bir kopyası vardı;
 *    aşağıdaki %70 sürümü onu tamamen eziyordu — `araclar.kapsam` "ezilen
 *    bildirim" denetimi yakaladı. */

/* Footer aynı görseli sürüyor, tek fark tülün RENGİ ve KOYULUĞU: `--chrome-2`
 * ve %88. Sayfa zeminiyle aynı tonda olsaydı footer'ı sayfadan ayıran düz ton
 * kuralı (2026-08 kararı) ölürdü; bağlantı yoğun bir alan, daha sakin durmalı. */
.layout-footer-holder-bc {
    background:
        linear-gradient(rgba(18, 16, 17, .88), rgba(18, 16, 17, .88)),
        url("https://api.betgo.digital/storage/sliders/t20/2026/09/7d8aeeba-16ca-40f7-863a-b0a67849b630.webp")
            center / cover no-repeat fixed,
        #121011 !important;
}


/* ── TOKEN DIŞI KALAN ALTIN NOKTALAR ──────────────────────────────────────
 * /custom.css'te ham `rgba(238,205,36,…)` yazılmış, token'a bağlı olmayan
 * yerler. Token çevrimi bunları KAÇIRIYOR, tek tek gerekiyorlar. */

/* Giriş / kayıt / şifre sıfırlama açılırı — hepsi `.entrance-popup-bc`
 * kapsamında. Etiket ve onay metni artık KROM: form gövdesi nötr, kırmızı
 * yalnız odakta ve bağlantıda kalıyor (marka kuralı). */
.entrance-popup-bc .form-control-title-bc {
    color: rgba(198, 197, 196, .65) !important;
}

.entrance-popup-bc .checkbox-control-icon-bc {
    background: rgba(198, 197, 196, .16) !important;
}

.entrance-popup-bc .checkbox-control-text-bc,
.entrance-popup-bc .privacy-police-text {
    color: rgba(198, 197, 196, .8) !important;
}

/* Bahis geçmişi satırları */
.historyList-bc .betHistoryRow-bc:hover {
    background: rgba(184, 2, 0, .10) !important;
}

.historyList-bc .btn.a-outline {
    background: rgba(184, 2, 0, .18) !important;
}

.empty-b-text-v-bc {
    color: rgba(198, 197, 196, .7) !important;
}

/* ⚠️ Puan durumu rozetinin ESKİ kuralı (dolu kırmızı gradyan + kırmızı kenar)
 * KALDIRILDI: aşağıdaki karbon kapsül sistemi üç sosyal düğmeyi de aynı dile
 * getiriyor, eski kural yalnız birini ayrık bırakıyordu — üç düğmeden ikisi
 * nötr, biri kırmızı yanıyordu. Marka rengi artık hepsinde İKONDA. */


/* Canlı destek düğmesi (betgo sohbet gömüsü). Sarı daire düğmenin KENDİ
 * zemininde değil, `::after` pseudo'sunda — gövdeye yazmak hiçbir şey
 * değiştirmiyordu (ölçüldü: button bg = transparent, ::after = altın gradyan). */
.betgo-launcher__button::after {
    background-image: linear-gradient(91.24deg, #d61a10, #b80200) !important;
}

.betgo-launcher__button .betgo-launcher__icon path {
    fill: #fff !important;
}

/* Paketin genel birincil düğmesi (`.btn.a-color` — GİRİŞ, ÜYE OL submit,
 * başlık eylemleri) `--oc-1`den besleniyor ve o gri kalmıştı: açılırın en
 * önemli eylemi sayfadaki en sönük kutuydu.
 * Token AÇILIRA DEĞİL DÜĞMEYE kapsanıyor — 2026-08-15'te açılıra kapsanmış
 * giydirme bilerek kaldırılmıştı (düğme her formda aynı görünsün diye);
 * burada da her formda aynı görünüyor, yalnız rengi marka rengi.
 * `:root`ta ezilmiyor: `--oc-1` gri ikincil düğmelerde de kullanılıyor. */
.btn.a-color {
    --oc-1: 184, 2, 0;
    --oc-1-hover: 214, 20, 12;
    --oc-1-sc: 255, 255, 255;
}

/* ── SÜZGEÇ ŞERİDİ (kategori / sağlayıcı pilleri) ────────────────────────
 * Kaydırma oku SOLA KAYDIRILAMAZ durumdayken bile çiziliyor: `position:absolute`,
 * `z-index:2`, `opacity:.35`, `pointer-events:auto` ve tam olarak İLK PİLİN
 * üstünde (ikisi de x=10, ölçüldü) — "‹Tüm Oyunlar" diye okunuyor ve pilin sol
 * yarısı tıklanamıyor. Devre dışı ok görünmez ve tıklanamaz olmalı; etkin ok
 * (sağdaki) olduğu gibi kalıyor. */
.horizontal-scroll .ds-btn--disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Seçili pil: paket `rgba(hero,.16)` dolgu + 1px `#B80200` iç halka veriyordu.
 * Marka kırmızısı koyu zeminde 2.9:1 — halkanın KENDİSİ zor seçiliyordu,
 * komşu pil zaten `rgba(255,255,255,.08)`; ikisi neredeyse aynı görünüyordu.
 * Seçim DOLU kırmızı + beyaz yazı (6.9:1): tek bakışta hangisi açık belli. */
.ds-chip.ds-chip--selected {
    background: rgb(184, 2, 0) !important;
    box-shadow: none !important;
}

.ds-chip.ds-chip--selected .chip__label,
.ds-chip.ds-chip--selected .ds-label {
    color: #fff !important;
}

/* Maç saati `rgba(255,255,255,.4)` — 3.84:1, AA altında (ölçüldü, ana sayfada
 * 46 satır). Saat kupon kararının parçası, ikincil süs değil. */
.layout-content-holder-bc time {
    color: rgba(255, 255, 255, .62) !important;
}

/* Kaydırma ipucu gölgesi: `.horizontal-scroll__arrow-shadow` GENİŞLİĞİ SIFIR bir
 * öğe, karartmayı `box-shadow: #05060a 0 0 30px 22px` ile yapıyor (ölçüldü).
 * Kaydırılamayan yönde de çiziliyor: başlangıçta sol gölge ilk pilin üstüne
 * düşüyor, "Tüm Oyunlar"ın yarısı isli görünüyordu.
 * Durum sınıfı YOK — `horizontal-scroll--left` sabit, gerçek işaret okun
 * `--disabled`ı (üç kaydırma konumunda ölçüldü). Çocuk sırası: gölge, ok,
 * içerik, gölge, ok → sol ok 2., sağ ok 5. çocuk. */
.horizontal-scroll:has(> .ds-btn:nth-child(2).ds-btn--disabled) > .horizontal-scroll__arrow-shadow--left,
.horizontal-scroll:has(> .ds-btn:nth-child(5).ds-btn--disabled) > .horizontal-scroll__arrow-shadow--right {
    box-shadow: none !important;
}

/* ── STATİK SAYFALAR (footer bilgi sayfaları + 404) ───────────────────────
 * 11 hukuk/kural sayfası da 404 da `.footerInfoPage` kabuğunu kullanıyor.
 * Ölçüldü (tr/help/genel-kurallar): 37 paragraf, `margin:0` — hepsi tek blok
 * halinde akıyor; satır 1414 px, 13/18 px ile satır başına ~220 karakter.
 * Okunabilir ölçü 45-85 karakter; bu haliyle göz satır başını bulamıyor.
 * Renk kontrastı zaten geçiyordu (6.9:1) — sorun renk değil ÖLÇÜ ve NEFES. */
.footerInfoPage .footerInfoContent .content {
    max-width: 78ch !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* Sondaki paragrafa boşluk eklemeden ARAYA boşluk: `p + p`. */
.footerInfoPage .footerInfoContent .content p + p {
    margin-top: 12px !important;
}

/* Sayfa başlığı gövde metniyle aynı ağırlıktaydı (16px/400) — başlık gibi dursun. */
.footerInfoPage .footerInfoTitleText {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}

/* 404'teki "ANA SAYFAYA DÖN": dolgulu düğmenin İÇİNDE altı çizili yazı vardı
 * (altı çizgi = bağlantı, dolgu = düğme; ikisi birden okuyucuya iki farklı şey
 * söylüyor). Altı çizgi statik sayfa içeriğinin `a` kuralından geliyor, düğmeyi
 * de yakalıyordu. Genişlik `.btn{width:100%}`tan 370 px'ti — tek satırlık bir
 * eylem için sayfa eni kadar düğme. Kapsam yalnız statik sayfa. */
.footerInfoPage .footerInfoContent .btn {
    text-decoration: none !important;
    max-width: 240px !important;
    margin-top: 6px !important;
}

/* ── MOBİL ALT SEKME ÇUBUĞU ───────────────────────────────────────────────
 * Mobilin ana gezinme çubuğu KREM ALTIN kalmıştı: ikonlar
 * `rgba(251,238,194,.52)`, yazılar `rgba(251,238,194,.38)`. İlk altın
 * taramam bunu kaçırdı (süzgeç "mavi bileşen düşük" arıyordu, krem altının
 * mavisi yüksek); araclar/js/renk.js artık TON'a bakıyor, ikinci taramada
 * çıktı. Yazı 9px'te 3.12:1 idi — AA altı, sitedeki en çok kullanılan
 * gezinme. Krom + daha yüksek alfa: 7.3:1. */
/* Özgüllük ÖLÇÜLDÜ (/kural): paketin kuralı `.tab-navigation-w-bc
 * .tab-nav-item-bc p` = (0,2,1) ve `!important`. İlk denemem (0,2,0) idi,
 * !important'a rağmen KAYBETTİ. Tip seçiciyi de yazıp (0,3,1)'e çıkıyoruz. */
.tab-navigation-w-bc .tab-nav-item-bc i.tab-nav-icon-bc {
    color: rgba(255, 255, 255, .66) !important;
}

.tab-navigation-w-bc .tab-nav-item-bc p.tab-nav-title-bc {
    color: rgba(255, 255, 255, .74) !important;
}

/* "18+" rozeti mor-magenta (#A71F67) çiziliyordu — ne markada var ne de
 * okunuyor (2.93:1). Yasal işaret; marka aksanı değil, NÖTR olmalı. */
.footerWarning .footerWarningAge {
    color: rgba(255, 255, 255, .7) !important;
    border-color: rgba(255, 255, 255, .45) !important;
}

/* Jackpot tablosundaki "Kazanan / Bahis" etiketleri: 8px KALIN ve
 * `rgba(255,255,255,.42)` = 4.03:1 — mobil ana sayfada 140 kopya. 8px zaten
 * sınırda; rengin de sınırda olması okumayı bitiriyor. Punto tabloyu bozmasın
 * diye BÜYÜTMÜYORUM, yalnız alfa: 6.5:1. */
.bk-hucre .bk-etiket {
    color: rgba(255, 255, 255, .58) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * ÜST BAR — "gece pisti" konsepti
 * Marka notu: premium, hızlı, motosiklet/yarış enerjisi. Üç motif var, üçü de
 * logodan geliyor: KROM (gri metal), STOP LAMBASI İZİ (kırmızı ışık çizgisi),
 * ASFALT (nötr koyu yüzey). Süs değil, logonun sözlüğü.
 *
 * ⚠️ SÜREKLİ ANİMASYON YOK — bilerek. Kayan ışık şeridi konsepte uyardı ama
 *    her sayfada, boşta, sonsuza kadar CPU yakar (§4: koni gradyanı süpürmesi).
 *    Hareket YALNIZ hover'da ve yalnız `transform`/`opacity` üzerinde.
 * ⚠️ `will-change` ve `translate3d(0,0,0)` YOK (§4: ölçülen katman patlaması).
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Üst barın zemini: asfalt, üstünde metal parlaması ────────────────
 * Kutu YARI SAYDAM kalıyor (rgba(5,6,10,.88)) — sayfa zeminindeki motosiklet
 * ve ışık izleri barın ARDINDAN geçsin; konsept zaten orada, ayrıca boyamaya
 * gerek yok.
 * ⚠️ Logonun arkasına kırmızı radial DENENDİ, GERİ ALINDI: barın sol yarısı
 *    kırmızı sise dönüyordu — far değil, pas gibi duruyordu. Marka kuralı da
 *    aynı yere çıkıyor: "kırmızı yalnız vurguda kalsın (YÜZEY DEĞİL)".
 *    Kırmızı artık yalnız üç yerde: alt kenar izi, navbar saç teli, hız
 *    çizgisi. Kalan tek katman tepedeki ışık — metal kenar hissi.
 * ⚠️ Buradaki `background-image` kuralı SİLİNDİ: aşağıdaki karbon dokusu bloğu
 *    aynı ışık gradyanını zaten SON KATMAN olarak taşıyor ve bu kuralı tamamen
 *    eziyordu (hesaplanan değer ölçüldü: karbon sürümü kazanıyor). */

/* ── 2. Alt kenar: STOP LAMBASI İZİ ───────────────────────────────────────
 * Barı bitiren şey düz bir çizgi değil, sönerek dağılan bir ışık izi. Etki
 * 2 px'e HAPSEDİLDİ (§4'ün reçetesi): geniş bir parıltı kutusu yerine ince
 * bir şerit + altına tek yumuşak gölge. */
.layout-header-holder-bc::after,
.header-bc::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 2, 0, .65) 10%,
        #ff4436 24%,
        rgba(255, 68, 54, .70) 40%,
        rgba(184, 2, 0, .30) 68%,
        transparent 100%);
    box-shadow: 0 7px 20px -7px rgba(184, 2, 0, .7);
}

/* Not: pseudo'yu konumlandırmak için ayrıca `position:relative` YAZILMADI —
 * masaüstünde kutu `sticky`, mobilde `fixed` (ölçüldü); ikisi de mutlak
 * konumlu çocuk için kapsayıcı blok kuruyor. Yazılan kural zaten paketin
 * `fixed`ine kaybediyordu, yani ölü koddu. */

/* ── 3. Ana navbar: beyaz plaka değil, ASFALT şerit ───────────────────────
 * Paket `rgba(255,255,255,.15)` veriyordu — barın içindeki en marka dışı
 * yüzey oydu, gri bir plaka gibi duruyordu. Koyu şerit + üstünde ince kırmızı
 * saç teli: pistin kenar çizgisi.
 * ⚠️ Buradaki kural SİLİNDİ: şerit görseli tam genişlik `.nav-content-bc`e
 *    taşındığında `#root .nav-content-bc nav.bg-nav` kuralı üçünü de
 *    sıfırlıyordu (ölçüldü: background-image `none`, border-top `0px none`). */

/* ── 4. Nav öğesi: HIZ ÇİZGİSİ ────────────────────────────────────────────
 * `.bg-nav-btn` üzerinde `::before` ve `::after` BOŞ (ölçüldü: content:none),
 * yani paketin hiçbir şeyini ezmiyoruz.
 *   ::after  = alt çizgi, soldan sağa açılır
 *   ::before = arkasında kalan bulanık iz (hareket bulanıklığı)
 * Yumuşama eğrisi bilerek `cubic-bezier(.15,.85,.25,1)`: hızlı fırlar, yavaş
 * oturur — gaz verme hissi. Doğrusal olsaydı asansör kapısı gibi olurdu. */
.nav-content-bc .nav-menu-item.bg-nav-btn::after {
    content: "";
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b80200, #ff4436 70%, #ff8a7d);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.15, .85, .25, 1);
}

/* ⚠️ v1 `::before` BLOĞU SİLİNDİ: aşağıdaki v2 kuralı (`#root …::before`, eğik
 * plaka) aynı pseudo'yu daha yüksek özgüllükle yeniden kuruyordu — hesaplanan
 * değer ölçüldü, buradaki radyal gradyan sayfaya HİÇ çıkmıyordu. Yaşayan tek
 * bildirim `pointer-events: none`di; o ve blur notu v2 bloğuna taşındı. */

/* ⚠️ ÜÇ KURAL SİLİNDİ (`:hover::after`, `.active::after`, `.active::before`):
 * üçünü de v2'nin skewX'li sürümü eziyordu. Hover'da ölçüldü — açılan çizgi
 * `skewX(-12deg) scaleX(1)`, yani buradaki düz `scaleX(1)` hiç uygulanmadı. */

/* ── 5. ÜYE OL: fren lambası ──────────────────────────────────────────────
 * Dolgu zaten marka kırmızısı; eksik olan DERİNLİK. İnce parlak kenar +
 * altına kısa kırmızı sızıntı = yanan lamba. Hover'da lamba biraz daha yanar. */
.hdr-user-bc .btn.register {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .22),
        0 3px 12px -4px rgba(184, 2, 0, .9) !important;
    transition: box-shadow .18s ease-out, background-color .18s ease-out !important;
}

@media (hover: hover) {
    .hdr-user-bc .btn.register:hover {
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, .3),
            0 4px 18px -3px rgba(255, 68, 54, .95) !important;
    }
}


/* Bulunduğun sayfa DOLU KIRMIZI PLAKA değil. Paketin kuralı
 * `#root .bg-nav-btn.active { background: var(--gold); color:#05060a }` —
 * `--gold` artık parlak kırmızı olduğu için sekme kocaman turuncu-kırmızı bir
 * plakaya dönüyordu ve altındaki hız çizgisi içinde kayboluyordu. İki sebeple
 * kaldırıldı:
 *   1. Mobilde aktif sekme ZATEN alt çizgiyle işaretleniyor — iki platform iki
 *      ayrı dil konuşuyordu.
 *   2. Marka kuralı: kırmızı vurgu, yüzey değil.
 * Yerine: hafif kabartma + beyaz yazı + kırmızı hız çizgisi ve arkasındaki iz.
 * Özgüllük `#root` yüzünden (1,2,0); biz (1,3,0) yazıyoruz. */
/* ⚠️ `background: rgba(255,255,255,.06)` SİLİNDİ: aşağıda BİREBİR AYNI seçici
 * listesi `transparent !important` yazıyor ve sonra geldiği için kazanıyor. */
#root .nav-content-bc .nav-menu-item.bg-nav-btn.active,
#root .nav-content-bc .bg-nav-list > li:hover > .bg-nav-btn.active {
    color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * HIZ MOTİFLERİ — üst bardaki dil sayfanın geri kalanına taşınıyor
 * Aynı üç işaret her yerde: eğik işaret, soldan açılan kırmızı çizgi, sönen iz.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Bölüm başlığının sol işareti: dik çubuk yerine EĞİK hız işareti. Kutu
 * ölçüsü değişmiyor (3x18, `flex:none`), yalnız çiziliş eğik — satır kaymaz. */
.page-view-more::before {
    transform: skewX(-14deg);
}

/* ⚠️ OYUN KARTINA hız çizgisi YAZILMADI (denendi, silindi): paketin kendi
 * hover'ı zaten kartı bulanıklaştırıp adı + Demo/Oyna düğmelerini basıyor.
 * Çizgi teknik olarak UYGULANIYORDU ama o panelin ALTINDA kalıp hiç
 * görünmüyordu (/hover + getComputedStyle ile doğrulandı) — görünmeyen kural
 * ölü ağırlık. Kartın hover dili paketin; "Demo / Oyna" düğmeleri italik ses
 * katmanından payını zaten alıyor, kartın kırmızısı "Oyna"da duruyor.
 */

/* Kazanan şeridi: her satırın soluna sönen kırmızı ışık izi. Paket kutuyu
 * `static` bırakmış — mutlak konumlu çocuk için önce kapsayıcı gerek. */
.casinoTopWinnersWidget .casinoWinnerWidgetItem {
    position: relative;
    overflow: hidden;
}

.casinoTopWinnersWidget .casinoWinnerWidgetItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, #ff4436 45%, rgba(184, 2, 0, .25));
    pointer-events: none;
}

/* Mobil üst gezinme şeridi: masaüstü navbarla AYNI dil. Bağlantının iki
 * pseudo'su da boştu (aktif olanda da — ölçüldü), yani paketin kendi aktif
 * göstergesiyle çakışmıyoruz. */
.hdr-navigation-link-bc::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b80200, #ff4436 70%, #ff8a7d);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.15, .85, .25, 1);
    pointer-events: none;
}

.hdr-navigation-link-bc.active::after {
    transform: scaleX(1);
}

/* Birincil düğmeler: metale vuran ışık. Tek katman, çapraz ince parlama —
 * animasyon YOK, duran bir yansıma. `background-image` ayrı yazılıyor çünkü
 * paket `background` KISAYOLUNU kullanıyor ve kısayol image'ı sıfırlıyor. */
.ds-btn.ds-btn-variant--primary,
.btn.a-color,
.hdr-user-bc .btn.register {
    background-image: linear-gradient(104deg,
        transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%) !important;
}

/* Ürün kutuları (CASINO / SLOT / SPOR / TELEGRAM / PROMOSYONLAR): üstüne
 * gelince alt kenardan aynı kırmızı çizgi. Kutu `overflow:visible` — çizgi
 * dışarı taşmasın diye kenarlardan içeri alındı, kırpmaya gerek yok. */
.home-quick-access .product-banner-bc::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b80200, #ff4436 65%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .24s cubic-bezier(.15, .85, .25, 1);
    pointer-events: none;
}

@media (hover: hover) {
    .home-quick-access .product-banner-bc:hover::after {
        transform: scaleX(1);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * HAREKET — "geçen motor"
 * Konsepti tamamlayan tek şey hareketti. Kurallar:
 *   • Hareket YALNIZ `transform` / `opacity` üzerinde (yerleşim tetiklemez).
 *   • Sürekli çalışan TEK animasyon var: üst barın 2 px'lik alt kenarından
 *     geçen ışık. Kalan her şey hover/aktif — boştayken maliyeti SIFIR.
 *   • `will-change` ve `translate3d(0,0,0)` yok (§4: ölçülen katman patlaması).
 *   • Animasyon adları `mb-` önekli: paketin keyframe'leriyle çakışmasın.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. İMZA: üst barın altından geçen motor ──────────────────────────────
 * Statik stop lambası izi `::after`da duruyor; bunun ÜSTÜNDEN periyodik olarak
 * parlak bir ışık geçiyor — arkadan bir motor geçmiş gibi.
 *
 * ⚠️ `transform: translateX` DEĞİL `background-position` kullanılıyor: üst bar
 *    `overflow: visible` olmak ZORUNDA (menü açılırları dışarı taşıyor), yani
 *    kayan bir pseudo barın dışına çıkardı. Gradyan kutunun içine kırpılıyor,
 *    taşma sorunu hiç doğmuyor.
 * ⚠️ Boyanan alan 1434x2 px — bir kare tam en boyunca 3 kpx. Ölçüldü, ana
 *    thread'de fark edilir bir iz bırakmıyor (§3.2 reçetesi).
 * Zamanlama: geçiş ~1,5 sn, ardından ~5,5 sn sessizlik. Sürekli süpüren bir
 * şerit "ucuz casino" olurdu; seyrek geçiş "pist" hissi veriyor. */
.layout-header-holder-bc::before,
.header-bc::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    z-index: 1;
    background-image: linear-gradient(90deg,
        transparent 0 44%,
        rgba(255, 138, 125, .55) 47%,
        #fff 49.5%,
        #ff4436 51%,
        transparent 56% 100%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position-x: 130%;
    animation: mb-gecis 7s cubic-bezier(.4, 0, .25, 1) infinite;
}

@keyframes mb-gecis {
    /* Görünür pencere ÖLÇÜLDÜ: bant ekranda yalnız konum %75 ile %25 arasında.
     * İlk ayarda geçiş 7 sn'nin %21'iydi ve yumuşama ortada hızlandığı için
     * ışık ~250 ms'de gelip geçiyordu — göz yakalamıyordu. %26 + daha yumuşak
     * eğri: geçiş ~1,8 sn, ardından ~5,2 sn sessizlik. */
    0%   { background-position-x: 130%; }
    26%  { background-position-x: -30%; }
    100% { background-position-x: -30%; }
}

/* ── 2. Düğmelerde krom parlaması (hover) ─────────────────────────────────
 * Metale vuran ışık düğmenin üzerinden bir kez geçiyor. Kırpma gerekiyor;
 * `overflow:hidden` ögenin KENDİ `box-shadow`unu kırpmaz, o yüzden ÜYE OL'un
 * fren lambası parıltısı yerinde kalıyor. */
.hdr-user-bc .btn.register,
.btn.a-color.header-icon-text {
    position: relative;
    overflow: hidden;
}

.hdr-user-bc .btn.register::before,
.btn.a-color.header-icon-text::before {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -60%;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
}

@media (hover: hover) {
    .hdr-user-bc .btn.register:hover::before,
    .btn.a-color.header-icon-text:hover::before {
        animation: mb-parlama .62s cubic-bezier(.25, .6, .3, 1) 1;
    }
}

@keyframes mb-parlama {
    0%   { transform: translateX(0) skewX(-18deg);    opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

/* ── 3. Nav hover izi: KURAL SİLİNDİ ──────────────────────────────────────
 * `:hover::before { opacity: .75 }`i v2 eziyordu; hover'da ölçülen değer 1. */

/* ── 4. Ürün kutuları: kalkış ─────────────────────────────────────────────
 * Üstüne gelince kutu 3 px yükseliyor. `transform` — yerleşim tetiklemez,
 * komşu kutular kımıldamaz. Geçiş bildirimi AŞAĞIDAKİ derinlik bloğunda
 * (transform + border + gölge birlikte); burada tekrar yazılmıyordu, eziliyordu. */

@media (hover: hover) {
    .home-quick-access .product-banner-bc:hover {
        transform: translateY(-3px);
    }
}

/* ── 5. Mekanik basılma tepkisi ───────────────────────────────────────────
 * Düğme ve alt sekme basılınca hafifçe çöküyor. Dokunmatikte "tıkladım mı?"
 * sorusunu ortadan kaldırır; masaüstünde de düğmeye ağırlık verir. */
.btn:active,
.ds-btn:active,
.tab-navigation-w-bc .tab-nav-item-bc:active {
    transform: translateY(1px) scale(.985);
}

.btn,
.ds-btn {
    transition: transform .1s ease-out;
}

/* ── 6. LOGO: GAZ ─────────────────────────────────────────────────────────
 * Logonun kendi görselinde motor sağa bakıyor ve arkasında alev izi var; CSS
 * o hareketi SÜRDÜRÜYOR, yeni bir dil kurmuyor. Üç parça: logo hafifçe ileri
 * atılıp yerine oturuyor (gaz), üzerinden krom parlaması geçiyor, arkasından
 * üç hız çizgisi akıp sönüyor.
 *
 * ⚠️ `a.logo` STATIC'ti, dolayısıyla halosu (`::before`) en yakın konumlanmış
 *    ataya geriliyordu: ÖLÇÜLDÜ — mobilde 418 px, masaüstünde 1462 px genişlik.
 *    Logonun etrafında duracak ışık bütün üst bara yayılmış, hiçbir yerde
 *    görünmüyordu. `position: relative` ikisinde de kutuyu logoya oturtuyor.
 *
 * ⚠️ Hareket `background-position` ile, `transform: translateX` ile DEĞİL —
 *    §1 ile aynı sebep: logo kabı da üst bar da `overflow: visible`, kayan bir
 *    pseudo kabın dışına taşardı. Arka plan kendi kutusuna kırpılır; taşma
 *    sorunu hiç doğmaz ve halo'yu kesmek için `overflow: hidden` gerekmez.
 *
 * ⚠️ Dört çizgi TEK pseudo'da toplandı. Ayrı ögelere dağıtılsaydı dört ayrı
 *    kompozit katman olurdu (§4: animasyonu olmayan katman bile CPU'ya
 *    yazılıyor).
 *
 * ÖLÇÜLDÜ (mobil, aynı sayfada A/B, §2.1'deki `/olcum`, 3+3 tur, 8 sn, medyan):
 *    ms/hesap  açık 0,653  |  kapalı 0,527      FPS  açık 60  |  kapalı 60
 *    §3.2 ölçütü 0,5 iyi / 1,1 şişkin: efekt bandın içinde kalıyor, kare
 *    düşüşü yok. Tek koşuya bakma — aynı ayarda 0,31 ile 0,85 arası değer
 *    gördük, karar medyanla verildi.
 *
 * ⚠️ Yön: her şey SAĞDAN SOLA akıyor. Motor sağa gidiyorsa dünya geriye akar;
 *    çizgileri motorun gittiği yöne akıtmak logoyu geri geri gidiyor gösterdi.
 *
 * Ritim §1'e bağlı: ikisi de 7 sn. Önce alt kenardan ışık geçiyor (%0-26),
 * SONRA logo gaz veriyor (%36-62). Aynı anda koştuklarında iki hareket
 * birbirini yiyor, üst bar "titriyor" gibi duruyordu. */
.logo-container .logo {
    position: relative;
}

/* Halo: logonun arkasında duran kırmızı ışık. Değerler aynı, tek değişen
 * artık DOĞRU kutuya oturması. */
.logo-container .logo::before {
    content: "";
    position: absolute;
    inset: -6px -70px -6px -140px;
    z-index: -1;
    pointer-events: none;
    /* ⚠️ SERT SAG KENAR (olculdu, mobil): iki sebep vardi. (1) Bitis rengi
     * `transparent` = rgba(0,0,0,0) — kirmizidan SIYAHA gidiyordu, kenarda
     * kirli bir bant birakiyordu; renk artik ayni kirmizinin alfa 0 hali.
     * (2) Elips dikeyde bar disina tasip kirpilinca kalan sinir neredeyse dik
     * bir cizgi oluyordu; %88'e uzayan sonum + yatay maske ile dagiliyor. */
    background: radial-gradient(56% 150% at 46% 55%,
        rgba(255, 68, 54, .30),
        rgba(255, 68, 54, .13) 46%,
        rgba(255, 68, 54, 0) 92%);
    /* Maske IKI YANDA da sonuyor: kutunun kendi kenari gorunmesin. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30% 62%, transparent 98%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30% 62%, transparent 98%);
    /* Gaz anında halo parlıyor: logonun ÜSTÜNDEN geçen krom parlaması denendi
     * ve silindi — logo görselinin kendi metal parlaklığıyla çakışıp gri bir
     * leke bırakıyordu. Işık arkadan gelince motor öne çıkıyor. */
    animation: mb-logo-nabiz 1.25s ease-in-out infinite;
}

/* ⚠️ KUTU LOGODAN GENİŞ (`right: -95%`), ölçülerek düzeltildi: çizgiler önce
 * `inset: 0` ile logo kutusuna hapsedilmişti ve GÖRÜNMÜYORDU — logonun sol
 * yarısı zaten kendi turuncu alev iziyle dolu, 1 px'lik çizgi orada kayboluyor.
 * Kutu logo genişliğinin %195'i: çizgi logonun SAĞINDAKİ boşlukta beliriyor,
 * logonun üzerinden geçiyor, solda sönüyor. Yüzde olduğu için mobilde +95 px,
 * masaüstünde +304 px — kabın kendi genişliğine (197 / 842 px) bağlanmıyor. */
.logo-container .logo::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -95%;
    z-index: -1;
    pointer-events: none;
    /* Çizgilerin Y sırası: masaüstünde medya sorgusu bunları üst banda topluyor
     * (sosyal düğmeler 45-77 px'i kaplıyor, ölçüldü). Keyframe var() okur. */
    --y1: 14%;
    --y2: 27%;
    --y3: 42%;
    --y4: 56%;
    background-repeat: no-repeat;
    /* Üç hız çizgisi: beyaz / turuncu / kırmızı. Gradyanın PARLAK ucu SOLDA --
     * hareket sağdan sola, baş önde kuyruk arkada. Ters yazıldığında çizgiler
     * geri geri gidiyor gibi okunuyordu. */
    background-image:
        linear-gradient(90deg, #fff 0 6%, rgba(255, 255, 255, .35) 26%, transparent 100%),
        linear-gradient(90deg, rgba(255, 138, 125, 1) 0 5%, rgba(255, 138, 125, .3) 30%, transparent 100%),
        linear-gradient(90deg, rgba(255, 68, 54, 1) 0 6%, rgba(255, 68, 54, .3) 28%, transparent 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .8) 0 5%, rgba(255, 255, 255, .2) 24%, transparent 100%);
    background-size: 42% 1px, 34% 2px, 38% 1px, 28% 1px;
    background-position: 150% var(--y1), 150% var(--y2), 150% var(--y3), 150% var(--y4);
    /* ⚠️ MASKE ŞART: maskesiz sürümde çizgiler logo yazısının ÜSTÜNDEN geçiyor
     * ve "MOTOBAHIS"i kesiyordu (fotoğraf: .stud/g3400.png). Maske soldan
     * (logonun kendisi) sağa (boşluk) açılıyor: çizgiler logoya girerken
     * sönüyor, arkasındaki boşlukta parlak. Statik maske, animasyon yok. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0 20%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 0 20%, #000 52%);
    animation: mb-logo-hiz 1.25s linear infinite;
}

.logo-container .hdr-logo-bc {
    animation: mb-logo-gaz 1.25s ease-in-out infinite;
}

@keyframes mb-logo-hiz {
    /* SÜREKLİ akış: duraklama yok, çizgiler sağdan gelip solda sönüyor. linear
     * -- ivmelenme sabit hızı bozuyor, "gidiyor" hissi kayboluyordu. Dört
     * çizgi farklı mesafe kat ediyor (farklı hız), böylece tek kalın çizgi
     * gibi okunmuyorlar. */
    0%   { background-position: 125% var(--y1), 108% var(--y2), 140% var(--y3), 118% var(--y4); }
    100% { background-position: -45% var(--y1), -52% var(--y2), -40% var(--y3), -58% var(--y4); }
}

@keyframes mb-logo-nabiz {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.05); }
}

@keyframes mb-logo-gaz {
    /* Sürekli gaz: logo hep hafifçe ileri-geri salınıyor. Genlik kasten küçük
     * (mobil ~1 px) -- büyütünce üst bar titriyor gibi duruyor. */
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(1.1%); }
}

/* ── 7. HAREKETİ AZALT ────────────────────────────────────────────────────
 * Vestibüler rahatsızlığı olan kullanıcı işletim sisteminde "hareketi azalt"
 * diyorsa süsün hiçbiri çalışmaz. Erişilebilirlik pazarlık konusu değil. */
@media (prefers-reduced-motion: reduce) {
    .layout-header-holder-bc::before,
    .header-bc::before {
        animation: none;
        background-position-x: -30%;
        opacity: .35;
    }

    .hdr-user-bc .btn.register:hover::before,
    .btn.a-color.header-icon-text:hover::before {
        animation: none;
    }

    .logo-container .logo::before,
    .logo-container .logo::after,
    .logo-container .hdr-logo-bc {
        animation: none;
    }

    .logo-container .logo::after {
        opacity: .55;
        background-position: 8% var(--y1), 34% var(--y2), 18% var(--y3), 46% var(--y4);
    }

    .home-quick-access .product-banner-bc,
    .btn,
    .ds-btn {
        transition: none;
    }

    .home-quick-access .product-banner-bc:hover {
        transform: none;
    }
}

/* ⚠️ ÇİFT BOYAMA DÜZELTMESİ: masaüstünde `.header-bc` zaten
 * `.layout-header-holder-bc` İÇİNDE (DOM ağacı ölçüldü). Alt kenar izi ve
 * geçen ışık iki seçiciyle de eşleştiği için aynı 2 px şerit ÜST ÜSTE iki kez
 * boyanıyordu: alfa tasarlanandan parlak çıkıyor, animasyon iki kez koşuyor
 * (`document.getAnimations()` 2 `mb-` kaydı gösterdi). İçteki susturuldu.
 * Mobilde `.layout-header-holder-bc` YOK — oradaki tek şerit `.header-bc`in,
 * dokunulmuyor. */
.layout-header-holder-bc .header-bc::before,
.layout-header-holder-bc .header-bc::after {
    content: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * ÜST BAR 2 — "kuru" hissin ölçülen sebepleri
 * Aynı satırda BEŞ FARKLI YÜKSEKLİK vardı (ölçüldü): PARA YATIR/GİRİŞ/ÜYE OL
 * 28, sosyal 32, dil seçici 36, arama 52, kebab 28. Göz hizayı bulamayınca
 * tasarım "dizilmemiş" görünür — barın dağınık durmasının ana sebebi buydu.
 * Tek ölçü: 32 px. İkinci sebep derinlik yokluğu: her şey aynı düzlemde düz
 * dikdörtgendi; ayırıcı, kenar, doku, hiçbiri yoktu.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Karbon dokusu: motosiklet gövdesinin dili ────────────────────────────
 * Çok düşük kontrastlı çapraz dokuma. Statik (animasyon yok), tek boyama.
 * %1,2 alfa bilerek: "doku var mı?" diye bakınca görülüyor, okurken değil. */
/* ⚠️ UST BAR ARTIK OPAK (olculdu, 1920 px): bar `rgba(5,6,10,.88)` idi ve
 * ARDINDAKI SLIDER GORSELI (`img.sdr-image-bc`, x=239..1889 — ORTALANMIS
 * 1670 px kap) icinden goruluyordu. Ekran kaptan genisken barin solunda ve
 * sagindaki seritte gosterilecek gorsel YOK: x=196'da (8,10,14) → (45,16,18)
 * SERT DIKEY BASAMAK. "Kirmizi solda keskin bitiyor" sikayetinin sebebi buydu;
 * saydamlik ne kadar azaltilsa da basamak kalir, tek cozum opaklik.
 * Kaybedilen: sayfa zeminindeki motorun barin ardindan gecmesi — zaten yalniz
 * genis ekranda ve yalniz kenarlarda kesilmis halde goruluyordu. */
.layout-header-holder-bc {
    background-color: rgb(5, 6, 10) !important;
}

.layout-header-holder-bc,
.header-bc > .hdr-main-content-bc {
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, .010) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 46%) !important;
}

/* ── Tek yükseklik: 32 px ─────────────────────────────────────────────────
 * `min-height` DEĞİL `height`: paket bazılarına satır yüksekliğinden ölçü
 * veriyor, min-height ile 28'de kalıyorlardı. */
.hdr-main-content-bc .btn.s-small,
.hdr-main-content-bc .btn.a-color.header-icon-text,
.hdr-main-content-bc time.infoTime,
.hdr-main-content-bc .form-control-bc.select,
.hdr-main-content-bc .smartPanel-bc > i {
    height: 32px !important;
}

.hdr-main-content-bc .form-control-bc.select .form-control-select-bc {
    height: 32px !important;
    min-height: 32px !important;
}

/* ── Sosyal düğmeler: ham marka renkleri yerine karbon kapsül ─────────────
 * Telegram `#29B6F6→#0088CC` ve WhatsApp `#45A207→#008910` ham haliyle
 * duruyordu (ölçüldü) — koyu kırmızı bir barın ortasında bir mavi bir yeşil
 * kutu, paletin tamamını bozan iki leke. Kapsül artık karbon; marka rengi
 * yalnız İKONDA ve üstüne gelince kenarda beliriyor: tanınırlık gidiyor
 * değil, gürültü gidiyor. */
#root .bg-hdr-social-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .12) !important;
    transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .12s ease-out;
}

#root .bg-hdr-social-item.bc-i-telegram { color: #4fc3f7 !important; }
#root .bg-hdr-social-item.bc-i-whatsapp { color: #5ddc7a !important; }
#root .bg-hdr-social-item.bc-i-standings { color: #ff8a7d !important; }

@media (hover: hover) {
    #root .bg-hdr-social-item:hover {
        transform: translateY(-1px);
    }

    #root .bg-hdr-social-item.bc-i-telegram:hover {
        border-color: rgba(79, 195, 247, .8) !important;
        box-shadow: 0 0 12px -2px rgba(79, 195, 247, .6) !important;
    }

    #root .bg-hdr-social-item.bc-i-whatsapp:hover {
        border-color: rgba(93, 220, 122, .8) !important;
        box-shadow: 0 0 12px -2px rgba(93, 220, 122, .6) !important;
    }

    #root .bg-hdr-social-item.bc-i-standings:hover {
        border-color: rgba(255, 68, 54, .85) !important;
        box-shadow: 0 0 12px -2px rgba(255, 68, 54, .7) !important;
    }
}

/* ── GİRİŞ: altı çizili metin değil, hayalet düğme ────────────────────────
 * ÜYE OL dolu kırmızı; yanındaki ikincil eylem sadece altı çizili yazıydı,
 * düğme gibi durmuyordu. Aynı ölçüde çerçeveli kapsül: ikisi bir çift olur. */
.hdr-user-bc .btn.sign-in {
    padding: 0 14px !important;
    width: auto !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: border-color .18s ease-out, background-color .18s ease-out;
}

.hdr-user-bc .btn.sign-in::after {
    content: none !important;                      /* paketin alt çizgisi */
}

@media (hover: hover) {
    .hdr-user-bc .btn.sign-in:hover {
        border-color: rgba(255, 68, 54, .8) !important;
        background: rgba(255, 68, 54, .10) !important;
    }
}

/* ── Saat: gösterge paneli okuması ───────────────────────────────────────
 * Düz `rgba(255,255,255,.1)` gri kutuydu. Artık gömme bir ekran: içeri
 * gölge + üstte ince kırmızı çizgi + sabit genişlikli rakam (saat başı
 * değişince sayılar zıplamasın). */
.hdr-main-content-bc time.infoTime {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3)) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-top-color: rgba(184, 2, 0, .55) !important;
    box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, .9) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    /* Kenarlık 32'yi 34'e çıkarmıştı — paket `content-box` bırakmış. */
    box-sizing: border-box !important;
}

/* ── Arama ve bildirim: zeminsiz ikonlar → kapsül ─────────────────────────
 * Arama düğmesinin rengi `rgb(0,0,0)` ölçüldü (paket ata rengini
 * devralıyor); koyu zeminde siyah ikon. Kapsül + okunur renk. */
.hdr-main-content-bc .generic-search-btn {
    /* ⚠️ `display:flex` + ortalama ŞART, sadece ölçü vermek YETMİYOR. Paket
     * düğmeyi `display:block` + `padding:1px 6px` bırakıyor; kapsül 32x32'ye
     * çekilince 14 px'lik ikon ortalanmıyor, sağa itiliyor ve kutunun SAĞ
     * KENARINDAN 1 px TAŞIYOR (ölçüldü: ikon x=1411..1425, düğme 1392..1424).
     * Dolgu sıfırlanıp kutu esnek kutuya çevriliyor. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    flex: none !important;
    border-radius: 4px !important;
    color: rgba(255, 255, 255, .85) !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    transition: background-color .18s ease-out, border-color .18s ease-out;
}

/* İkonun KENDİ rengi var (`rgba(255,255,255,.8)`, ölçüldü); düğmeye renk
 * yazmak onu değiştirmiyordu — hover'da ikon sönük kalıyordu. */
.hdr-main-content-bc .generic-search-btn > i {
    /* ⚠️ `margin-left: 12px` PAKETTEN geliyor (ölçüldü): ikon geniş düğmede
     * yazının solunda dursun diye. Kapsül daraltılınca o boşluk ortalamayı
     * 6 px kaydırıyordu — `justify-content:center` doğru çalışıyor, sorun
     * ikonun kendi kenar boşluğuydu. */
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
    color: inherit !important;
}

.hdr-main-content-bc .smartPanel-bc > i {
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    transition: background-color .18s ease-out, border-color .18s ease-out;
}

@media (hover: hover) {
    .hdr-main-content-bc .generic-search-btn:hover,
    .hdr-main-content-bc .generic-search-btn:hover > i,
    .hdr-main-content-bc .smartPanel-bc > i:hover {
        background: rgba(255, 68, 54, .14) !important;
        border-color: rgba(255, 68, 54, .55) !important;
        color: #fff !important;
    }
}

/* ── Dil seçici: hizalı kapsül ────────────────────────────────────────────*/
.hdr-main-content-bc .form-control-bc.select .form-control-select-bc {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 4px !important;
    padding-inline: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * DERİNLİK — "kuru" hissin ikinci sebebi
 * Sitede hiçbir yerde katman yoktu: kart kenarı yok, gölge yok, ayırıcı yok.
 * Her şey aynı düzlemde düz koyu dikdörtgendi. Aşağıdaki hiçbir kural renk
 * eklemiyor — sadece YÜZEYLERİ birbirinden ayırıyor.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Navbar gömme gölgesi buradaydı; tam genişlik şeride taşındı (aşağıda).
 * Buradaki kural `#root ... nav.bg-nav { box-shadow: none }` ile eziliyordu. */

/* ⚠️ NAV HOVER ZEMİNİ SİLİNDİ: aşağıda aynı seçici + aynı `@media (hover:hover)`
 * `transparent !important` yazıp eziyordu (hover'da ölçüldü: rgba(0,0,0,0)). */

/* ── Kazanan kartları: kenarı olan kart ───────────────────────────────────
 * `rgba(255,255,255,.08)` düz kutuydu; komşusundan ayrılmıyordu. Kenar +
 * üstten ışık + hover'da kalkış. Sol kırmızı iz 2 → 3 px, artık görünüyor. */
.casinoTopWinnersWidget .casinoWinnerWidgetItem {
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .06);
    transition: transform .18s cubic-bezier(.15, .85, .25, 1),
                border-color .18s ease-out;
}


@media (hover: hover) {
    .casinoTopWinnersWidget .casinoWinnerWidgetItem:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 68, 54, .45);
    }
}

/* ── Ürün kutuları: çerçevesiz görseller havada duruyordu ─────────────────
 * `background: transparent; border: none; box-shadow: none` (ölçüldü) —
 * beş görsel zeminde yüzüyordu. Çerçeve + gölge onları KART yapıyor. */
.home-quick-access .product-banner-bc {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 6px;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .95);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.15, .85, .25, 1),
                border-color .2s ease-out, box-shadow .2s ease-out;
}

@media (hover: hover) {
    .home-quick-access .product-banner-bc:hover {
        border-color: rgba(255, 68, 54, .55);
        box-shadow: 0 10px 26px -12px rgba(184, 2, 0, .85);
    }
}

/* ── Bölüm başlığı: ince satırdan gerçek başlığa ──────────────────────────
 * İşaret 3x18'di, 46 px'lik satırda kayboluyordu. 4x22 + eğim korunuyor. */
.page-view-more::before {
    width: 4px !important;
    height: 22px !important;
}

/* "Tümü ›" bağlantısı 12 px düz yazıydı; artık tıklanabilir bir kapsül. */
.page-view-more > a {
    padding: 4px 10px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
    transition: border-color .18s ease-out, background-color .18s ease-out;
}

@media (hover: hover) {
    .page-view-more > a:hover {
        border-color: rgba(255, 68, 54, .7) !important;
        background: rgba(255, 68, 54, .12) !important;
    }
}

/* ── Yuvarlak gezinme okları: gri daireler markalanıyor ───────────────────
 * `.serit-gez-ok` ve yukarı çık düğmesi `rgba(255,255,255,.15)` gri daireydi
 * (ölçüldü) — sitenin en nötr iki ögesi. */
.serit-gez-ok,
.btn.nav-floating-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .12) !important;
    transition: border-color .18s ease-out, background-color .18s ease-out,
                box-shadow .18s ease-out;
}

@media (hover: hover) {
    .serit-gez-ok:hover,
    .btn.nav-floating-btn:hover {
        border-color: rgba(255, 68, 54, .8) !important;
        background: rgba(255, 68, 54, .16) !important;
        box-shadow: 0 0 14px -3px rgba(255, 68, 54, .75) !important;
    }
}

/* ── Arka plan görseli daha görünür ───────────────────────────────────────
 * Tül %78 idi ve motosiklet neredeyse hiç seçilmiyordu — konsept vardı ama
 * görünmüyordu. %70: görsel %30. Okunabilirlik yeniden ölçüldü, en parlak
 * zemin pikseli hâlâ AA sınırının içinde. */
body .layout-bc {
    background:
        linear-gradient(rgba(5, 6, 10, .70), rgba(5, 6, 10, .70)),
        url("https://api.betgo.digital/storage/sliders/t20/2026/09/7d8aeeba-16ca-40f7-863a-b0a67849b630.webp")
            center / cover no-repeat fixed,
        #05060a !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * NAVBAR ŞERİDİ: RENK TAM GENİŞLİK, YERLEŞİM AYNI
 * 1920'de ölçüldü: `.nav-content-bc` (kendi zemini `rgb(5,6,10)`)
 * `max-width:1670px` + `margin:0 117px` ile ortalıydı; ekranda iki yanda
 * 127'şer px zeminsiz bant kalıyordu — "renkler kesilmiş, sağ sol boş".
 *
 * ⚠️ ÇÖZÜM YERLEŞİMİ BÜYÜTMÜYOR. Tam genişlik olan yalnız ŞERİDİN KENDİSİ;
 *    içindeki menü (`nav.bg-nav`) eskisi gibi 1670'e ortalı kalıyor, yani
 *    öğeler kımıldamıyor ve alttaki içerikle hizası bozulmuyor.
 *    (Önce bütün üst bar tam genişlik yapıldı — öğeler de yayıldı, geri
 *    alındı. `100vw` de kullanılmadı: kaydırma çubuğu genişliği yüzünden
 *    1920'de 6 px yatay taşma üretiyordu.)
 * ══════════════════════════════════════════════════════════════════════════ */

#root > div.layout-header-holder-bc > header > div.nav-content-bc.bg-nav-wrap {
    max-width: none !important;
    margin-inline: 0 !important;
}

#root > div.layout-header-holder-bc > header > div.nav-content-bc.bg-nav-wrap > .nav-content-menu {
    /* `width:100%` ŞART: yalnız `max-width` + `auto` kenar boşluğu verilince
     * kutu içeriğe göre daralıp 1403 px'e düşüyordu (ölçüldü), menü ortada
     * sıkışıyordu. Şerit tam genişlik, menü tam 1670. */
    width: 100% !important;
    max-width: var(--layout-width, 1670px) !important;
    margin-inline: auto !important;
}

/* Paket `header.header-bc`e soldan 10 px veriyor; şerit o yüzden solda 10 px
 * açıkta kalıyordu (sağda 0). Sıfırlanınca `auto` kenar boşlukları kendini
 * yeniden ortalıyor, hiçbir şey kaymıyor. */
.layout-header-holder-bc > .header-bc {
    padding-inline: 0 !important;
}

/* ── Logo 2× (YALNIZ MASAÜSTÜ) ────────────────────────────────────────────
 * Ölçüldü: kutu 160x56, `object-fit: contain`, dosya 1983x793 (2,5:1) →
 * yüksekliğe sığıyordu, görünen boy 140x56. Gerçek iki kat için kutu 320x112
 * (görünen 280x112); 80 px'lik satır yetmediği için satır 120 px.
 *
 * ⚠️ KAPSAM MEDYA SORGUSU, sınıf DEĞİL. `.layout-header-holder-bc`i masaüstü
 *    işareti sandım — YANLIŞ: o sarmalayıcı MOBİLDE DE VAR (390x49, ölçüldü).
 *    Sınıfa kapsanan kural mobile sızdı ve 49 px'lik üst bara 112 px'lik logo
 *    bastı. İki platform aynı `theme_custom_css` alanını okuduğu için tek
 *    ayırıcı genişlik.
 * ⚠️ Eski üst bar yüksekliğini geri istersen: bu medya bloğunu sil, logo
 *    160x56'ya döner, satır 80 px olur. */
@media (min-width: 1100px) {
    .layout-header-holder-bc .logo-container .hdr-logo-bc {
        width: 320px !important;
        max-width: 320px !important;
        height: 112px !important;
    }

    .layout-header-holder-bc .logo-container .logo {
        height: 112px !important;
    }

    .layout-header-holder-bc .hdr-main-content-bc {
        min-height: 120px !important;
    }

    /* Hız çizgileri: masaüstünde logo kabı 842 px ve içinde sosyal düğmeler
     * (x=344..452, y=45..77) var — mobil ayarında alttaki iki çizgi onların
     * arkasında kayboluyordu. Çizgiler düğmelerin ÜSTÜNDEKİ banda toplanıyor,
     * kutu da kabın sonuna kadar uzatılıyor: iz 512 px sürüyor. */
    .logo-container .logo::after {
        --y1: 10%;
        --y2: 18%;
        --y3: 26%;
        --y4: 34%;
        right: -160%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0 26%, #000 42%);
        mask-image: linear-gradient(90deg, transparent 0 26%, #000 42%);
    }
}

/* ⚠️ KARBON DOKUSU ÇİFT BASILIYORDU. Doku kuralı hem
 * `.layout-header-holder-bc` (TAM GENİŞLİK) hem de
 * `.header-bc > .hdr-main-content-bc` seçicisiyle eşleşiyor; MASAÜSTÜNDE iç
 * katman saydam (`rgba(0,0,0,0)`, ölçüldü) olduğu için ikisi üst üste
 * basılıyor ve ortadaki 1670 px'lik şerit kenarlardan koyu çıkıyordu —
 * "renkler kesilmiş" görüntüsünün bir parçası. Masaüstünde iç katman
 * susturuluyor.
 * ⚠️ MOBİLDE SUSTURULMAZ: orada `.hdr-main-content-bc` OPAK (`rgb(5,6,10)`,
 *    ölçüldü) ve holder'ın dokusunu tamamen örtüyor; susturulunca mobil üst
 *    bar dokusuz kaldı (bir kez oldu, böyle yakalandı). Dokuyu mobilde taşıyan
 *    katman o. */
@media (min-width: 1100px) {
    .layout-header-holder-bc .hdr-main-content-bc {
        background-image: none !important;
    }
}

/* ⚠️ MOBİLDE TERSİ: orada iç katman OPAK olduğu için holder'ın dokusu zaten
 * görünmüyor ama YİNE DE boyanıyordu — aynı dokunun iki kez rasterize
 * edilmesi. (`araclar.kapsam` "çift eşleşen kural" denetimi yakaladı: iç
 * öğenin `background-image`ı `none` değildi.) Mobilde dokuyu görünen katman
 * taşısın, holder boş kalsın. */
@media (max-width: 1099px) {
    .layout-header-holder-bc {
        background-image: none !important;
    }
}

/* ⚠️ ŞERİDİN GÖRSELİ DE TAŞINDI. Taban rengi (`rgb(5,6,10)`) tam genişlik
 * oldu ama asfalt gradyanı, kırmızı saç teli ve gömme gölge hâlâ ORTALANMIŞ
 * `nav.bg-nav` üzerindeydi: piksel ölçümünde x=122'de `(5,6,10)` → `(18,19,22)`
 * SERT BASAMAK çıkıyordu. Kesilme hissinin son kaynağı buydu.
 * Görsel katman tam genişlik şeride taşınıyor, menü kutusu saydam kalıyor. */
#root > div.layout-header-holder-bc > header > div.nav-content-bc.bg-nav-wrap {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)) !important;
    border-top: 1px solid rgba(184, 2, 0, .38) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .05),
        inset 0 -8px 12px -10px rgba(0, 0, 0, .9) !important;
    box-sizing: border-box !important;
}

#root .nav-content-bc nav.bg-nav,
#root .nav-content-bc .nav-menu-container.header-navigation {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * MOBİL ALT ÇUBUK — üst barla aynı dil
 * Ölçüldü: 53 px, `fixed`, z-951, zemin `rgba(5,6,10,.94)`, yukarı doğru
 * gölge. Çubuğun İKİ pseudo'su da boştu; öğelerin `::before`i paketin,
 * `::after`i boş. Renkleri daha önce kromlanmıştı ama yüzey hâlâ düz koyu
 * dikdörtgendi — üst bardaki üç işaretin (karbon, stop lambası izi, hız
 * çizgisi) hiçbiri burada yoktu.
 *
 * ⚠️ "BULUNDUĞUN SEKME" İŞARETİ YOK, YAPILAMIYOR. Paket alt çubuğa aktif
 *    sınıf koymuyor (üç rotada ölçüldü) ve `.layout-bc`nin rota sınıfları da
 *    ayırt etmiyor: `is-home-page` HER rotada var, `is-sports-page` yalnız
 *    sporda. Yani beş sekmeden yalnız biri işaretlenebilirdi — yarım çalışan
 *    bir gösterge hiç olmamasından daha kafa karıştırıcı. Saf CSS ile
 *    çözülmüyor; rota dinleyen bir JS bloğu gerekir.
 * ══════════════════════════════════════════════════════════════════════════ */

.tab-navigation-w-bc {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .010) 0 1px, transparent 1px 4px) !important;
}

/* Üst kenar: barın alt kenarındaki stop lambası izinin AYNASI. Orada ışık
 * aşağı sızıyor, burada yukarı. Etki yine 2 px'e hapsedilmiş.
 * ⚠️ Buraya ikinci bir "geçen ışık" animasyonu KONULMADI: imza tek kalsın,
 *    iki şerit birden süpürünce pist değil tabela oluyor. */
.tab-navigation-w-bc::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 2, 0, .5) 14%,
        #ff4436 50%,
        rgba(184, 2, 0, .5) 86%,
        transparent 100%);
    box-shadow: 0 -6px 16px -8px rgba(184, 2, 0, .6);
}

/* Sekmeye basınca üstünden kırmızı çizgi geçiyor — dokunmatikte "bastım mı?"
 * geri bildirimi, üst bardaki hız çizgisiyle aynı eğri. Öğenin `::before`i
 * pakette dolu (ölçüldü), `::after` boş; onu kullanıyoruz. */
.tab-navigation-w-bc .tab-nav-item-bc::after {
    content: "";
    position: absolute;
    inset-inline: 10px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, #b80200, #ff4436 70%, #ff8a7d);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s cubic-bezier(.15, .85, .25, 1);
}

.tab-navigation-w-bc .tab-nav-item-bc:active::after {
    transform: scaleX(1);
}

/* Ortadaki "SLOT OYNA" rozeti CMS görseli (altın kalkan, `cms.brand507.com`) —
 * CSS onu boyayamaz. Altına kırmızı hale koyuyoruz: çubuktan kopuk altın bir
 * leke olmaktan çıkıp temanın içine oturuyor.
 * ⚠️ `:nth-child(3)` KIRILGAN: sekme sayısı ya da sırası değişirse hale yanlış
 *    ögeye gider. Daha iyi bir kanca yok — öge ayırt edici sınıf taşımıyor
 *    (beşi de sadece `tab-nav-item-bc`, ölçüldü). Menü düzeni değişirse burayı
 *    kontrol et. */
.tab-navigation-w-bc > .tab-nav-item-bc:nth-child(3)::after {
    content: "";
    position: absolute;
    inset: auto 0 6px;
    height: 46px;
    z-index: -1;
    transform: none;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(50% 60% at 50% 70%, rgba(255, 68, 54, .35), transparent 72%);
}

/* ══════════════════════════════════════════════════════════════════════════
 * KAYDIRMA İLERLEMESİ — devir göstergesi
 * Sayfanın en üstünde, 2 px, soldan sağa dolan kırmızı çizgi.
 * ⚠️ JS YOK: `animation-timeline: scroll()` bu tarayıcıda destekleniyor
 *    (ölçüldü, `CSS.supports` true). Kaydırma dinleyicisi yazmak aynı işi
 *    her karede ana thread'de yapardı; burada iş kompozitörde.
 * ⚠️ `@supports` şart: desteklemeyen tarayıcıda çubuk HİÇ çizilmez — yarım
 *    dolu sabit bir çizgi bırakmak yanlış bilgi verirdi.
 * ══════════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        width: 100%;
        z-index: 2147483000;
        pointer-events: none;
        transform-origin: left center;
        transform: scaleX(0);
        background: linear-gradient(90deg, #7d0100, #b80200 40%, #ff4436 80%, #ff8a7d);
        animation: mb-ilerleme linear both;
        animation-timeline: scroll(root block);
    }

    @keyframes mb-ilerleme {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }

    /* Hareketi azalt diyene ilerleme çubuğu da gösterilmez. */
    @media (prefers-reduced-motion: reduce) {
        body::after { animation: none; transform: scaleX(0); }
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * NAVBAR v2 — PİST OKLARI: düğmeler bölük, araları şevron
 * Ölçüldü (/js): `.bg-nav-list` flex, gap 4px, 9 adet BOŞ `<li>`, li'nin iki
 * pseudo'su da `content:none` → ayırıcıyı li'ye yazmak paketin hiçbir şeyini
 * ezmiyor. Düğmenin kendi ::before/::after'ı §4'te hız çizgisi olarak
 * kullanılıyordu; burada eğik plakaya ve ona bağlı hâleye çevriliyor.
 * Aşağıdaki kurallar §4'ten SONRA geldiği için aynı özgüllükte kazanır.
 * ══════════════════════════════════════════════════════════════════════════ */

#root .nav-content-bc .bg-nav-list {
    gap: 0 !important;
    align-items: center;
}

/* ── Şevron ayırıcı: yarış pisti yön oku ─────────────────────────────────
 * İki ince eğik çubuk (>>) — tek çubuk "ayırıcı", iki çubuk "yön" okuyor.
 * `currentColor` yok: kendi kırmızısını taşıyor, sönük duruyor, komşusu
 * hover olduğunda yanıyor. */
#root .nav-content-bc .bg-nav-list > li + li::before,
#root .nav-content-bc .bg-nav-list > li + li::after {
    content: "";
    width: 2px;
    height: 12px;
    flex: none;
    border-radius: 1px;
    transform: skewX(-20deg);
    background: linear-gradient(180deg, rgba(255, 68, 54, .70), rgba(184, 2, 0, .25));
    transition: background .2s ease-out, box-shadow .2s ease-out, transform .2s cubic-bezier(.15, .85, .25, 1);
}

#root .nav-content-bc .bg-nav-list > li + li::before {
    margin-left: 6px;
    opacity: .45;
}

#root .nav-content-bc .bg-nav-list > li + li::after {
    margin-right: 6px;
    margin-left: 2px;
    opacity: .85;
}

/* li'nin kendisi flex olmalı ki iki pseudo düğmenin YANINDA dizilsin
 * (içerik `<a>` blok; flex olmadan pseudo'lar alt satıra düşüyordu). */
#root .nav-content-bc .bg-nav-list > li {
    display: flex;
    align-items: center;
}

/* Hover eden düğmenin İKİ YANINDAKİ oklar yanar: hareket yönü okunur. */
@media (hover: hover) {
    #root .nav-content-bc .bg-nav-list > li:hover::before,
    #root .nav-content-bc .bg-nav-list > li:hover::after,
    #root .nav-content-bc .bg-nav-list > li:hover + li::before,
    #root .nav-content-bc .bg-nav-list > li:hover + li::after {
        opacity: 1;
        background: linear-gradient(180deg, #ff8a7d, #ff4436);
        box-shadow: 0 0 8px rgba(255, 68, 54, .85);
        transform: skewX(-20deg) translateX(2px);
    }
}

#root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active)::before,
#root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active)::after,
#root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active) + li::before,
#root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active) + li::after {
    opacity: 1;
    background: linear-gradient(180deg, #ff8a7d, #ff4436);
    box-shadow: 0 0 8px rgba(255, 68, 54, .6);
}

/* ── Düğme: dik kutu değil EĞİK PLAKA ────────────────────────────────────
 * Yerleşim değişikliği: zemin artık düğmenin kendisinde değil, `::before`
 * katmanında ve `skewX(-12deg)` — pist tabelası gibi öne eğik. Yazı eğilmiyor
 * (katman ayrı), yani okunurluk aynı kalıyor. */
#root .nav-content-bc .nav-menu-item.bg-nav-btn {
    position: relative;
    overflow: visible;
    padding: 0 14px !important;
    background: transparent !important;
    isolation: isolate;
}

#root .nav-content-bc .nav-menu-item.bg-nav-btn::before {
    content: "";
    position: absolute;
    /* v1 bloğundan TAŞINDI (orası ölüydü, silindi). */
    pointer-events: none;
    /* ⚠️ `filter: blur(4px)` DENENDİ, GERİ ALINDI: filtre yığın bağlamı açar ve
     * her nav öğesi için kompozit katman adayı yaratır — §4'te ölçülen katman
     * patlamasının aynı deseni, üstelik SÜS için. Gradyan zaten yumuşak
     * kenarlı; aynı görüntü, sıfır katman riski. */
    inset: 3px 0;
    left: 0;
    right: 0;
    bottom: 3px;
    height: auto;
    z-index: -1;
    border-radius: 3px;
    transform: skewX(-12deg) scaleX(.94);
    opacity: 0;
    background: linear-gradient(135deg, rgba(255, 68, 54, .22), rgba(184, 2, 0, .06) 55%, transparent);
    border: 1px solid rgba(255, 68, 54, .35);
    box-shadow:
        0 0 14px -2px rgba(255, 68, 54, .55),
        inset 0 1px 0 0 rgba(255, 255, 255, .12);
    transition: opacity .2s ease-out, transform .22s cubic-bezier(.15, .85, .25, 1);
}

@media (hover: hover) {
    #root .nav-content-bc .nav-menu-item.bg-nav-btn:hover {
        background: transparent !important;
    }

    #root .nav-content-bc .nav-menu-item.bg-nav-btn:hover::before {
        opacity: 1;
        transform: skewX(-12deg) scaleX(1);
    }
}

#root .nav-content-bc .nav-menu-item.bg-nav-btn.active,
#root .nav-content-bc .bg-nav-list > li:hover > .bg-nav-btn.active {
    background: transparent !important;
}

#root .nav-content-bc .nav-menu-item.bg-nav-btn.active::before {
    opacity: 1;
    transform: skewX(-12deg) scaleX(1);
}

/* Hız çizgisi eğik plakanın altına oturuyor: aynı eğim, aynı dil. */
#root .nav-content-bc .nav-menu-item.bg-nav-btn::after {
    left: 6px;
    right: 6px;
    bottom: 1px;
    transform: skewX(-12deg) scaleX(0);
}

@media (hover: hover) {
    #root .nav-content-bc .nav-menu-item.bg-nav-btn:hover::after {
        transform: skewX(-12deg) scaleX(1);
    }
}

#root .nav-content-bc .nav-menu-item.bg-nav-btn.active::after {
    transform: skewX(-12deg) scaleX(1);
}


/* ══════════════════════════════════════════════════════════════════════════
 * NAVBAR v3 — DURURKEN DE YAŞASIN: nabız + pist çizgisi
 * İki hareket, ikisi de UCUZ:
 *   1. Şevronlar sırayla yanıp sönüyor (yalnız `opacity` — kompozit katmanda,
 *      düzen/boyama yok). Gecikmeler soldan sağa kayık: ışık dizi boyunca
 *      akıyormuş gibi okunuyor.
 *   2. Navbarın ALTINDA ince bir ışık, soldan sağa geçen motor gibi koşuyor.
 * ⚠️ `filter`/`blur` YOK (§4'teki katman patlaması kuralı). Çizgi 2 px'lik tek
 *    şeritte kalıyor; hareket `background-position` — kutunun kendisi hiç
 *    taşınmıyor, `overflow:hidden` gerekmiyor (wrap `overflow:visible`,
 *    ölçüldü; hidden yazsaydık düğme hâlesini keserdi).
 * ══════════════════════════════════════════════════════════════════════════ */

@keyframes mb-sevron-nabiz {
    0%, 62%, 100% { opacity: .30; }
    72%           { opacity: .95; }
    82%           { opacity: .45; }
}

@keyframes mb-pist-cizgi {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: no-preference) {
    #root .nav-content-bc .bg-nav-list > li + li::before,
    #root .nav-content-bc .bg-nav-list > li + li::after {
        animation: mb-sevron-nabiz 2.6s ease-in-out infinite;
    }

    /* Soldan sağa kayan gecikme = ışığın dizide ilerlemesi. 9 li var
     * (ölçüldü), ayırıcı 2..9 arasında; `--i` yerine düz nth-child, çünkü tek
     * yerde ve okunur. `::after` yarım adım geride: çift çubuk sırayla yanıyor. */
    #root .nav-content-bc .bg-nav-list > li:nth-child(2)::before { animation-delay: 0s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(3)::before { animation-delay: .10s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(4)::before { animation-delay: .20s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(5)::before { animation-delay: .30s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(6)::before { animation-delay: .40s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(7)::before { animation-delay: .50s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(8)::before { animation-delay: .60s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(9)::before { animation-delay: .70s; }

    #root .nav-content-bc .bg-nav-list > li:nth-child(2)::after { animation-delay: .05s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(3)::after { animation-delay: .15s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(4)::after { animation-delay: .25s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(5)::after { animation-delay: .35s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(6)::after { animation-delay: .45s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(7)::after { animation-delay: .55s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(8)::after { animation-delay: .65s; }
    #root .nav-content-bc .bg-nav-list > li:nth-child(9)::after { animation-delay: .75s; }

    /* Hover/aktif komşuluğunda nabız DURUR: yanıp sönen bir şey imleci takip
     * eden vurguyu bozardı; orada ışık sabit yanıyor (v2 kuralları). */
    #root .nav-content-bc .bg-nav-list > li:hover::before,
    #root .nav-content-bc .bg-nav-list > li:hover::after,
    #root .nav-content-bc .bg-nav-list > li:hover + li::before,
    #root .nav-content-bc .bg-nav-list > li:hover + li::after,
    #root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active)::before,
    #root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active)::after,
    #root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active) + li::before,
    #root .nav-content-bc .bg-nav-list > li:has(> .bg-nav-btn.active) + li::after {
        animation: none;
    }
}

/* ── Pist çizgisi: navbarın altında koşan ışık ────────────────────────────
 * Şeridin kendi alt kenarına oturuyor (`bottom:-1px`), yani başlığın stop
 * lambası iziyle çakışmıyor — o BAŞLIĞIN altında, bu MENÜNÜN altında. */
#root > div.layout-header-holder-bc > header > div.nav-content-bc.bg-nav-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 2, 0, .35) 34%,
        rgba(255, 68, 54, .85) 46%,
        #ff8a7d 50%,
        rgba(255, 68, 54, .85) 54%,
        rgba(184, 2, 0, .35) 66%,
        transparent 100%);
    background-size: 55% 100%;
    background-repeat: no-repeat;
    background-position: -40% 0;
}

@media (prefers-reduced-motion: no-preference) {
    #root > div.layout-header-holder-bc > header > div.nav-content-bc.bg-nav-wrap::before {
        animation: mb-pist-cizgi 3.4s cubic-bezier(.35, 0, .2, 1) infinite;
    }
}