/* ==========================================================================
 * slot-deep-fixes.css
 * Generated: 2026-04-28 (Agent Slot — K.20+K.21+K.22+K.23 protocol)
 * Owner: AGENT-SLOT-OWNED (rule #30 file ownership)
 * Purpose: BS /tr/casino/slots EXACT MATCH for slot page sub-sections that
 *          were not addressed in slot-audit-fixes / slot-card-bs-exact /
 *          slot-overlay-fix. Each section block is fenced with explicit
 *          marker comments (K.30 compliant).
 *
 * Loads AFTER slot-audit-fixes.css, slot-card-bs-exact.css, slot-overlay-fix.css,
 * and provider-drawer-correction.css to win cascade by source order.
 *
 * Selector strategy (rule #30 + theme-robinbet specificity):
 *   - All rules guard with `body.mobile-site` and (page-scoped) `.slot-page-root`
 *   - Where theme-robinbet uses #game-grid (ID), we mirror that selector to
 *     beat its (0,1,n,m) tier.
 *   - Where slots.css uses `body.mobile-site .slot-page-root .X` (0,0,3,0) we
 *     stay at same/higher tier and rely on source order.
 *
 * Sections covered (matches Agent Slot brief):
 *   1. Hero banner (.slot-top-section) — height + spacing parity
 *   2. Slot hero tabs (JACKPOT/KAZANANLAR) — BS doesn't expose these in same
 *      hierarchy, but our internal panel must match BS jackpot widget visuals
 *   3. Category tabs (.cat-tab row) — BS uses square pill, no gold gradient,
 *      8px gap, font-size 11px, no extra borders
 *   4. Toolbar row (.slots-game-search-bar.games-header) — flex parity
 *      adjustments after ITER 43, normalize gap, padding, height
 *   5. Game grid 4-col tile layout — already covered by slot-card-bs-exact
 *      (171px x 121px); add empty-state + grid container parity
 *   6. Loading skeleton — shimmer effect for empty/loading state
 *   7. Search bar input expanded state — BS placeholder text + height
 *   8. RASTGELE OYNA button — BS spec: full-width, gold bg, 40px height
 *   9. Active filter chips (.active-filter-tag) — pill style, padding, gap
 *  10. Recent-games-section — h3 typography parity, padding
 *  11. Empty-state (slot oyunu bulunamadi) — center, padding, color
 *  12. Cat-tab .active state — BS uses solid color (no border) + flat bg
 * ========================================================================== */

/* ===== AGENT-SLOT BLOCK 1 START =====
 * 1. Hero banner section (.slot-top-section)
 *    BS: padding 0 0 12px, slider 1200x680 ratio capped 210px, no extra row gap.
 *    MR: .slot-below-hero (jackpot/winners) lives below — keep it but tighten
 *        spacing so total hero zone doesn't bloat.
 * ============================================================================== */
@media (max-width: 414px) {
  body.mobile-site .slot-page-root .slot-top-section {
    padding: 0 0 12px !important;
    margin-top: 0 !important;
    max-width: none !important;
  }
  body.mobile-site .slot-page-root .slot-top-section .home-hero-slider {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  body.mobile-site .slot-page-root .slot-top-section .home-hero-slider .slides {
    border-radius: 0 !important;
  }
  body.mobile-site .slot-page-root .slot-top-section .home-hero-slider img,
  body.mobile-site .slot-page-root .slot-top-section .home-hero-slider video,
  body.mobile-site .slot-page-root .slot-top-section .home-hero-slider picture {
    border-radius: 0 !important;
    width: 100% !important;
  }
}
/* ===== AGENT-SLOT BLOCK 1 END ===== */


/* ===== AGENT-SLOT BLOCK 2 START =====
 * 2. Slot hero tabs (JACKPOT / KAZANANLAR) wrapper + tablist
 *    BS doesn't have a "JACKPOT/KAZANANLAR" tab row directly under the hero,
 *    but MR has this MR-specific section. Tighten spacing so it does not
 *    visually drift from BS hero proportions.
 *    Override registry: this entire BLOCK is MR-specific (rule §21 — kept by
 *    user override, BS has no equivalent).
 * ============================================================================== */
body.mobile-site .slot-page-root .slot-below-hero {
  margin-top: 8px !important;
  gap: 8px !important;
}
/* ITER 121 — BS-paralel slot hero tabs (ANA SAYFA / TURNUVALAR / JACKPOTLAR)
 * Kullanıcı: "şuankiler küçük ve konumları yanlış"
 * Hedef: Pill arka plan kaldır, sadece text + active gold underline.
 * BS pattern: 3 eşit kolon, dark bg, büyük text, alttan altın underline (active). */
body.mobile-site .slot-page-root .slot-hero-tabs {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.mobile-site .slot-page-root .slot-hero-tablist {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body.mobile-site .slot-page-root .slot-hero-tab {
  flex: 1 1 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  padding: 0 8px !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}
body.mobile-site .slot-page-root .slot-hero-tab:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
}
body.mobile-site .slot-page-root .slot-hero-tab.slot-hero-tab--active {
  background: transparent !important;
  color: #fff !important;
  border-bottom: 3px solid #d4af37 !important;
  font-weight: 800 !important;
}
body.mobile-site .slot-page-root .slot-hero-tab:focus-visible {
  outline: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ITER 122 — Search button MUTLAK GÖRÜNÜR + tıklanabilir (kullanıcı: "tıklanmıyor")
 * Mevcut .games-search-expand bazı viewport'larda display:none alıyor.
 * MAX specificity ile mutlak görünür yap. Click → BS-paralel (input expand + focus). */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand,
html[lang] body.mobile-site .slot-page-root #gamesSearchExpand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-bar,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand .games-search-bar {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Expanded state — search input visible */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-bar,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand.is-expanded .games-search-bar {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  z-index: 5 !important;
}

html.mobile-root body.mobile-site .slot-page-root #searchClearBtn:hover,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn:active {
  background: rgba(212, 175, 55, 0.2) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  color: #d4af37 !important;
}

/* Input expanded — visible & full-width */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-input {
  position: relative !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip: auto !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 0 !important;
  border-radius: 6px 0 0 6px !important;
  font-size: 14px !important;
}

/* Expanded — button border-radius adjustment */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded #searchClearBtn {
  border-radius: 0 6px 6px 0 !important;
  border-left: 0 !important;
}
body.mobile-site .slot-page-root .slot-hero-tabpanel {
  margin-top: 8px !important;
}
body.mobile-site .slot-page-root .slot-hero-tabpanel[hidden] {
  display: none !important;
}

/* ITER 124 — REVERT ITER 123 hero tabs visibility (kullanıcı: "ilk açılış görünüm böyle" → duplicate)
 * Tanı: ANA SAYFA/TURNUVALAR/JACKPOTLAR header sub-nav (.hdr-sub-navigation-bc)
 *       ZATEN var (header.php line 113-122, slot/casino/livecasino sayfalarında auto-render).
 * Hero-tabs (JACKPOT/KAZANANLAR) farklı bir element — duplicate.
 * Çözüm: slot-below-hero gizli kalsın (theme-robinbet-mobile.css default davranışı).
 * Sadece search expand input geniş açılma (ITER 123b) korundu. */
html.mobile-root body.mobile-site .slot-page-root .slot-below-hero,
body.mobile-site .slot-page-root .slot-below-hero,
body.mobile-site .slot-below-hero {
  display: none !important;
}

/* ITER 125 — Sticky bar layout BS-paralel (kullanıcı: "ilk açılış görünüm böyle")
 * Sorun: 3 buton yan yana — all-games-btn (büyüteç) + view-module (hamburger) + search-btn (büyüteç)
 *        İki büyüteç duplicate karışık. BS-paralel: provider pill + view + search (3 element max).
 * Çözüm: all-games-btn gizle (BS'te yok) + provider pill genişlet. */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar .all-games-btn,
html.mobile-root body.mobile-site .slot-page-root .games-header .all-games-btn,
body.mobile-site .slot-page-root .all-games-btn {
  display: none !important;
}

/* ITER 216 — 3 çizgi (hamburger view-module-btn) gizle (kullanıcı: kaldır) */
html.mobile-root body.mobile-site .slot-page-root .view-module-btn,
html.mobile-root body.mobile-site .slot-page-root #viewModuleBtn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar .view-module-btn,
html.mobile-root body.mobile-site .slot-page-root .games-header .view-module-btn,
body.mobile-site .slot-page-root .view-module-btn,
body.mobile-site .slot-page-root #viewModuleBtn {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* ITER 219 — Search + Sort icon buttons BS-EXACT (BS DevTools ölçümü 2026-04-30)
 * BS searchInputWrp: 42×40, radius 8px, border 0.8px solid rgba(255,255,255,0.2), bg transparent
 * BS providerFilterBtnMob (sort): 40×40, radius 8px, border 0.8px solid rgba(255,255,255,0.2), bg transparent
 * Icon: BetConstruct-Icons font (BS) → SVG ile bypass (MR) — 18px, white */

/* SEARCH wrapper #gamesSearchExpand — BS searchInputWrp paralel: 42×40 */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand:not(.is-expanded):not(.always-expanded) {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 40px !important;
  flex: 0 0 42px !important;
}

/* SEARCH button #searchClearBtn — BS-EXACT (min-height override base.css 44px global rule) */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root .games-search-bar #searchClearBtn {
  width: 42px !important;
  height: 40px !important;
  min-width: 42px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  background: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1px 6px !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

/* Search icon — ITER 229: button ::before kapalı, sadece child <i class="bc-i-search">
 * çocuk eleman BC font glyph U+E91E render ediyor (slot-overlay-icons-fix.js
 * bc-i-* element'leri visible bırakıyor). Çift ikon (QQ) sorunu çözüldü. */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn::before,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* Child <i class="bc-i-*"> visible (overlay-icons-fix.js inline-style ile force,
 * burada cascade için backstop) */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-search,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-a-outline,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-search,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-close-a-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  font-family: "BetConstruct-Icons" !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  width: auto !important;
  height: auto !important;
}

/* SORT wrapper #sortToggleWrap — show (BS-paralel — search'in yanında) */
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-wrap,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #sortToggleWrap,
body.mobile-site .slot-page-root #sortToggleWrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* SORT button #sortToggleBtn — BS-EXACT (40×40, 8px radius, 0.8px white/0.2 border) */
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-wrap .sort-toggle-btn,
body.mobile-site .slot-page-root #sortToggleBtn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  background: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1px 6px !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

/* Sort icon — BS-EXACT BetConstruct font glyph U+EBED (ITER 228) */
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn::before,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn::before {
  content: "\ebed" !important;
  font-family: "BetConstruct-Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn i,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn i {
  display: none !important;
}

/* Provider pill (mobile-sidebar-toggle) genişlik artırılsın — truncated "Tüm Sağlayıc..." kaldırma */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle,
body.mobile-site .slot-page-root .mobile-sidebar-toggle {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  max-width: calc(100% - 110px) !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ITER 123b — search bar expand sonrası input MR-içi gerçekten geniş açılsın */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar,
body.mobile-site .slot-page-root .slots-game-search-bar {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 200px !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-bar {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-input {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 160px !important;
}
/* ===== AGENT-SLOT BLOCK 2 END ===== */


/* ===== AGENT-SLOT BLOCK 3 START =====
 * 3. Category tabs (.cat-tab row) — BS-paralel exact match.
 *    BS ölçümü (slot-audit-20260427.md ref):
 *      - tab width: ~70-80px, height ~62px (icon top, label bottom)
 *      - gap: 8px between tabs
 *      - bg: rgba(255,255,255,0.04), no border
 *      - font: 10-11px, weight 600 (BS), color rgba(255,255,255,0.75)
 *      - active: solid #d4af37, color #000, no border, no rounded glow
 *      - icon: 17px, flat color
 *      - radius: 6px (BS) vs 10px (MR currently)
 *    MR'da slots.css'te 76px width, 9px font, gold gradient — bizim hedef.
 *    Loads after slots.css so source order helps but specificity must match
 *    body.mobile-site .slot-page-root .cat-tab (0,0,3,0).
 * ============================================================================== */
@media (max-width: 414px) {
  body.mobile-site .slot-page-root .slots-category-filters {
    margin-left: calc(-1 * var(--mobile-page-gutter, 12px)) !important;
    margin-right: calc(-1 * var(--mobile-page-gutter, 12px)) !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .category-tabs-scroll {
    /* ITER 241 — kullanıcı: "biraz sağa çek" — left padding 12 → 20 (cat strip nudge) */
    padding: 8px 12px 8px 20px !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab {
    flex: 0 0 auto !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    min-height: 62px !important;
    height: 62px !important;
    padding: 8px 4px !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab.active {
    background: #d4af37 !important;
    background-image: none !important;
    color: #000 !important;
    border: 0 !important;
    font-weight: 700 !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab .cat-tab-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab i,
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab svg {
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
  }
  body.mobile-site .slot-page-root .slots-category-filters .cat-tab .cat-tab-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    color: inherit !important;
    display: inline-block !important;
  }
}
/* ===== AGENT-SLOT BLOCK 3 END ===== */


/* ===== AGENT-SLOT BLOCK 4 START =====
 * 4. Toolbar row (.slots-game-search-bar.games-header) — final parity.
 *    BS spec: 56px row, padding 8px 12px, gap 8px.
 *    Adjustments to slot-audit-fixes ITER 43 baseline:
 *      - row min-height pinned 56px (BS y:492-548)
 *      - filter pill height 40px, search/sort icons 40x40
 *      - margin between sections fixed 8px
 * ============================================================================== */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header {
  min-height: 56px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle__pill {
  height: 40px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle__pill-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.3px !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle__menu-icon {
  display: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .bs-filter-png {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .iconButtonBlock {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}
/* ===== AGENT-SLOT BLOCK 4 END ===== */


/* ===== AGENT-SLOT BLOCK 5 START =====
 * 5. Game grid container parity (.slots-games-container, .slot-oyun-listesi)
 *    + Empty state (.empty-state) BS-paralel.
 *    BS: empty container is hidden when 0 games; padding 24px, color muted.
 *    grid-template-columns already 171.4px 171.4px (slot-card-bs-exact).
 *    Block 5 adds parent padding parity + recent-games-section refinement.
 * ============================================================================== */
@media (max-width: 414px) {
  body.mobile-site .slot-page-root .slots-games-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.mobile-site .slot-page-root .slots-games-container .empty-state {
    grid-column: 1 / -1 !important;
    padding: 32px 16px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 8px !important;
  }
  body.mobile-site .slot-page-root .slots-games-container .empty-state i {
    font-size: 36px !important;
    color: rgba(212, 175, 55, 0.5) !important;
    margin-bottom: 8px !important;
    display: block !important;
  }
  body.mobile-site .slot-page-root .slots-games-container .empty-state h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 8px 0 4px !important;
  }
  body.mobile-site .slot-page-root .slots-games-container .empty-state p {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
}
/* ===== AGENT-SLOT BLOCK 5 END ===== */


/* ===== AGENT-SLOT BLOCK 6 START =====
 * 6. Loading skeleton — shimmer effect for empty/loading game-grid.
 *    BS uses subtle gradient pulse on placeholder cards. We provide a CSS-only
 *    shimmer so JS can toggle .is-loading on #game-grid before async fetch.
 * ITER 111 perf: 1.4s → 2s, will-change:background-position for GPU hint.
 * ============================================================================== */
@keyframes slot-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
body.mobile-site .slot-page-root #game-grid.is-loading .game-item,
body.mobile-site .slot-page-root .game-grid.is-loading .game-item {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  ) !important;
  background-size: 200% 100% !important;
  /* ITER 634: paint-only animation kapatıldı. */
  animation: none !important;
  will-change: auto !important;
}

/* ITER 111 perf: skeleton shimmer (game-skeleton__shimmer) GPU hint + slow */
body.mobile-site .slot-page-root .game-skeleton__shimmer {
  /* ITER 634: paint-only animation kapatıldı. */
  will-change: auto !important;
  animation: none !important;
}

/* ITER 112 perf: server-rendered skeleton placeholder for cards 9+
 * Above-fold (1-8) tam render, below-fold (9+) skeleton + JS hydration.
 * FCP < 800ms hedefi (HTML payload 45KB → 13KB).
 *
 * ITER 513 (2026-05-17) — BS-PARALEL REWRITE.
 * User report: "mor diye birşey olmamalı. slot sayfasının yükleme efektide
 * bozulmuş bahissendedeki yüklenme animasyonu bu. gidip canlı olarak tespit
 * edip kopyalayabilirmisin" + screenshot showing gray rectangles + white
 * sweep on black bg (no purple, no tint).
 *
 * Previous ITER 111+112 used purple `rgba(45,34,72,0.6) → rgba(30,21,56,0.7)`
 * gradient base + faint white shimmer overlay = visible purple-ish boxes,
 * BS-paralel violation.
 *
 * BS LIVE-MEASURED VALUES (from chat transcript investigation):
 *   .skeleton-loader-game-cube border: 2px solid rgba(var(--b-sc), .1)
 *   background-color: rgba(0,0,0,0) [transparent — parent black shows]
 *   background-image: linear-gradient(to right,
 *       rgba(255,255,255,0.1),
 *       rgba(255,255,255,0.3),
 *       rgba(255,255,255,0.1));
 *   background-size: 200% 100%;
 *   animation: bg-position 200% → -100% sweep, ~1s linear infinite
 *
 * IMPLEMENTATION:
 *   Single-element animator on the outer skeleton (parent does both base
 *   tint AND sweep via animated background-position). Inner __shimmer is
 *   hidden — redundant with parent gradient. This matches BS's DOM model
 *   (BS skeleton-loader-game-cube is one element with gradient+animation).
 */
/* ITER 513 fix-2 (2026-05-17): cascade specificity bump.
 * Live probe revealed ITER 511 (game-card-flash-fix.css) +
 * slot-tile-bs-zero.css with 2-ID selectors (specificity 2,4,2) were
 * killing ITER 513's bg-image (sets `var(--cover-bg, none)` → "none" on
 * skeleton element, no gradient → black box visible during initial load).
 * Solution: match with 2 IDs (#slotsGamesContainer + #game-grid) + extra
 * class `.game-item.game-item--skeleton` = specificity (2,5,2) which beats
 * the 2,4,2 generic .game-item rules unconditionally. Triple selector
 * variants to cover all DOM mounting patterns. */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.game-item--skeleton,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.game-item--skeleton,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.game-item--skeleton,
body.mobile-site .slot-page-root .game-item--skeleton {
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.10) 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 200% 0 !important;
  border-radius: 8px !important;
  /* ITER 513 fix-4 (2026-05-17): real game cards are LANDSCAPE 175:123
   * (~1.42), not 3/4 portrait. Match real `.game-item.casinoGameItemContent`
   * footprint so skeleton → real card transition has zero layout jolt.
   * Earlier fix-3 used 3/4 which was wrong — fix-4 corrects with measured
   * computed aspect-ratio from real DOM. */
  aspect-ratio: 175 / 123 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: default !important;
  pointer-events: none !important;
  /* ITER 634: paint-only animation kapatıldı. */
  animation: none !important;
  will-change: auto !important;
}
/* Inner shimmer overlay is redundant now (parent does the sweep).
 * Hide to avoid double-gradient layering / stale ITER 111 effect. */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.game-item--skeleton .game-skeleton__shimmer,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.game-item--skeleton .game-skeleton__shimmer,
body.mobile-site .slot-page-root .game-item--skeleton .game-skeleton__shimmer {
  display: none !important;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
body.mobile-site .slot-page-root #game-grid.is-loading .game-item img {
  visibility: hidden !important;
}
body.mobile-site .slot-page-root #game-grid.is-loading .game-item .game-overlay {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body.mobile-site .slot-page-root #game-grid.is-loading .game-item,
  body.mobile-site .slot-page-root .game-grid.is-loading .game-item {
    animation: none !important;
  }
}
/* ===== AGENT-SLOT BLOCK 6 END ===== */


/* ===== AGENT-SLOT BLOCK 7 START =====
 * 7. Search bar input expanded state — BS-paralel typography + height.
 *    BS: input height 40px, font-size 14px, placeholder color rgba(255,255,255,0.45)
 *    MR: existing 40px row but font/placeholder may drift.
 * ============================================================================== */
body.mobile-site .slot-page-root .games-search-expand .games-search-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
}
body.mobile-site .slot-page-root .games-search-expand.is-expanded .games-search-bar {
  background: rgba(255, 255, 255, 0.08) !important;
}
body.mobile-site .slot-page-root .games-search-input {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}
body.mobile-site .slot-page-root .games-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
body.mobile-site .slot-page-root .games-search-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
body.mobile-site .slot-page-root .games-search-icon-btn {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 16px !important;
  cursor: pointer !important;
}
body.mobile-site .slot-page-root .games-search-icon-btn i {
  font-size: 16px !important;
  line-height: 1 !important;
}
/* ===== AGENT-SLOT BLOCK 7 END ===== */


/* ===== AGENT-SLOT BLOCK 8 START =====
 * 8. RASTGELE OYUN OYNA button — BS spec parity.
 *    BS: full-width gold pill, 40-44px height, font-size 13px, weight 700,
 *    text uppercase, color #000.
 *    MR: random-game-btn already exists, normalize sizing/typography.
 * ============================================================================== */
@media (max-width: 992px) {
  html.mobile-root body.mobile-site .slot-page-root .random-game-btn,
  body.mobile-site .slot-page-root .random-game-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: calc(100vw - 8px) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 8px 4px 0 !important;
    padding: 0 12px !important;
    background: linear-gradient(135deg, #d4af37 0%, #c19c2e 100%) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
    cursor: pointer !important;
    transition: filter 0.18s ease, transform 0.18s ease !important;
  }
  body.mobile-site .slot-page-root .random-game-btn:hover {
    filter: brightness(1.06) !important;
  }
  body.mobile-site .slot-page-root .random-game-btn:active {
    transform: translateY(1px) !important;
  }
  body.mobile-site .slot-page-root .random-game-btn span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
  }
}
/* ===== AGENT-SLOT BLOCK 8 END ===== */


/* ===== AGENT-SLOT BLOCK 9 START =====
 * 9. Active filter chips (.active-filter-tag) — BS-paralel pill style.
 *    BS: chip 28px height, padding 0 10px, bg rgba(255,255,255,0.08),
 *    radius 14px, font-size 12px, gap 6px, x-button 14px.
 *    MR: active-filter-tag already exists; tighten to BS spec.
 * ============================================================================== */
body.mobile-site .slot-page-root .active-filters-box {
  width: 100% !important;
  padding: 8px 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
body.mobile-site .slot-page-root .active-filters-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.mobile-site .slot-page-root .active-filter-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 28px !important;
  padding: 0 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  border-radius: 14px !important;
  border: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body.mobile-site .slot-page-root .active-filter-tag span {
  color: inherit !important;
  font-size: inherit !important;
}
body.mobile-site .slot-page-root .active-filter-tag .remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  margin-left: 2px !important;
  line-height: 1 !important;
}
body.mobile-site .slot-page-root .active-filter-tag .remove:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.10) !important;
}
/* ===== AGENT-SLOT BLOCK 9 END ===== */


/* ===== AGENT-SLOT BLOCK 10 START =====
 * 10. Recent games section (Son Oynadıkların) header + grid parity.
 *     BS doesn't surface a "recent games" widget on /tr/casino/slots, but if
 *     MR shows it (logged-in users), tighten typography to match the rest
 *     of the page.
 *     Override registry: MR-only widget; show with BS-styled chrome.
 * ============================================================================== */
body.mobile-site .slot-page-root .recent-games-section[hidden] {
  display: none !important;
}
body.mobile-site .slot-page-root .recent-games-section {
  width: 100% !important;
  padding: 12px 12px 0 !important;
  box-sizing: border-box !important;
}
body.mobile-site .slot-page-root .recent-games-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}
body.mobile-site .slot-page-root .recent-games-header i {
  font-size: 14px !important;
  color: #d4af37 !important;
}
body.mobile-site .slot-page-root .recent-games-header h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
@media (max-width: 992px) {
  body.mobile-site .slot-page-root .recent-games-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 8px !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
  }
}
/* ===== AGENT-SLOT BLOCK 10 END ===== */


/* ===== AGENT-SLOT BLOCK 11 START =====
 * 11. Cat-tab arrows hide (already done in slots.css but ensure source-order win).
 *     Some viewports may still show them due to JS toggling display:flex.
 * ============================================================================== */
body.mobile-site .slot-page-root .slots-category-filters .cat-tab-arrow,
body.mobile-site .slot-page-root .slots-category-filters .cat-tab-arrow-left,
body.mobile-site .slot-page-root .slots-category-filters .cat-tab-arrow-right {
  display: none !important;
}
/* ===== AGENT-SLOT BLOCK 11 END ===== */


/* ===== AGENT-SLOT BLOCK 12 START =====
 * 12. Cat-tab .active state — final BS lock (BS uses solid #d4af37, no shadow).
 *     Wins over slots.css linear-gradient via source order.
 * ============================================================================== */
body.mobile-site .slot-page-root .slots-category-filters .cat-tab.active {
  background: #d4af37 !important;
  background-image: none !important;
  color: #000 !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
body.mobile-site .slot-page-root .slots-category-filters .cat-tab.active .cat-tab-label,
body.mobile-site .slot-page-root .slots-category-filters .cat-tab.active i,
body.mobile-site .slot-page-root .slots-category-filters .cat-tab.active svg {
  color: #000 !important;
  fill: #000 !important;
}
/* ===== AGENT-SLOT BLOCK 12 END ===== */


/* ===== AGENT-SLOT BLOCK 13 START =====
 * 13. Page-root background parity — BS uses solid #050f0a body, no extra layers.
 *     Some MR theme rules add gradients on .casino-container; flatten.
 * ============================================================================== */
body.mobile-site .slot-page-root .casino-container {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.mobile-site .slot-page-root .slots-filter-and-games {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* ===== AGENT-SLOT BLOCK 13 END ===== */


/* ===== AGENT-SLOT BLOCK 14 START =====
 * 14. Provider-search-bar inside the drawer — typography parity (BS-exact pill).
 *     Loaded after provider-drawer-correction.css; only inputs ID-prefixed
 *     here so we don't conflict with the drawer agent's section.
 * ============================================================================== */
body.mobile-site .slot-page-root .sidebar-search.provider-search-bar #providerSearchInput {
  font-size: 13px !important;
  color: #fff !important;
  background: transparent !important;
}
body.mobile-site .slot-page-root .sidebar-search.provider-search-bar #providerSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px !important;
}
/* ===== AGENT-SLOT BLOCK 14 END ===== */


/* ===== AGENT-SLOT BLOCK 15 START =====
 * 15. Sort toggle button typography parity.
 *     BS sort icon: 18px, color rgba(255,255,255,0.7), no border, square 40x40.
 * ============================================================================== */
body.mobile-site .slot-page-root .sort-toggle-wrap {
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}
body.mobile-site .slot-page-root .sort-toggle-btn {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.mobile-site .slot-page-root .sort-toggle-btn::before {
  content: "\ebed" !important;
  font-family: "BetConstruct-Icons" !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}
body.mobile-site .slot-page-root .sort-toggle-btn i {
  display: none !important;
}
/* ===== AGENT-SLOT BLOCK 15 END ===== */


/* ===== AGENT-SLOT BLOCK 16 START =====
 * 16. iOS Safari + scroll behavior parity for category-tabs-scroll horizontal
 *     scroll. BS uses `overscroll-behavior-x: contain` so the body doesn't
 *     scroll when the user reaches the end of the tabs row.
 * ============================================================================== */
body.mobile-site .slot-page-root .slots-category-filters .category-tabs-scroll {
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x proximity !important;
}
body.mobile-site .slot-page-root .slots-category-filters .cat-tab {
  scroll-snap-align: start !important;
}
/* ===== AGENT-SLOT BLOCK 16 END ===== */


/* ════════════════════════════════════════════════════════════════════
 * ITER 223 — Sticky bar SEARCH wrapper collapsed-state CLEANUP
 * Sorun: collapsed state'te wrapper border + input bg görünüyordu;
 * search button'ın 5px solunda kalıntı kare (kullanıcı: "yarım kare glitch").
 * Çözüm: :not(.is-expanded):not(.always-expanded) selector ile wrapper transparent + input zero-size.
 * Sadece button görünür kalır; expand olunca rule otomatik kalkar.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand:not(.is-expanded):not(.always-expanded),
html.mobile-root body.mobile-site .slot-page-root .games-search-expand:not(.is-expanded):not(.always-expanded) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand:not(.is-expanded):not(.always-expanded) .games-search-bar,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand:not(.is-expanded):not(.always-expanded) .games-search-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand:not(.is-expanded):not(.always-expanded) .games-search-input,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand:not(.is-expanded):not(.always-expanded) .games-search-input {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand:not(.is-expanded):not(.always-expanded) #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand:not(.is-expanded):not(.always-expanded) .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand:not(.is-expanded):not(.always-expanded) #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand:not(.is-expanded):not(.always-expanded) .games-search-icon-btn {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  /* theme-robinbet-mobile.css legacy centering hack
     `.games-search-btn { transform: translateY(-50%) }` absolute pos:0 ile
     -20px yukari kaydiriyordu (visual: search ikonu wrapper'in DISINDA). */
  transform: none !important;
  z-index: 6 !important;
}


/* ════════════════════════════════════════════════════════════════════
 * ITER 223c — Sticky bar SORT button BS-EXACT styling + gap fix
 * BS reference (m.bahissende302.com/tr/casino/slots):
 *   Search wrap: 42x40, bg transparent, 8px radius, 0.8px solid rgba(255,255,255,0.2)
 *   Sort  btn  : 40x40, bg transparent, 8px radius, 0.8px solid rgba(255,255,255,0.2)
 *   Gap        : 7px
 * MR before fix: sort wrap 40x40 bg transparent BUT 0px radius + 0px border
 *   gap was 21px (parent layout pushes them apart).
 * Fix: style #sortToggleWrap with same border/radius as search btn,
 *      pull it left with negative margin to shrink gap from 21px -> 7px.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 0 0 -14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Inner sort button — fill wrapper, transparent (border lives on wrapper) */
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap > *,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-wrap > * {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

/* Sort icon glyph centering + size match BS (~16-18px) */
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap svg,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-wrap svg,
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap i,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-wrap i {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  display: inline-block !important;
}


/* ════════════════════════════════════════════════════════════════════
 * ITER 224 — Sticky bar PILL + RANDOM button BS-EXACT match
 * BS reference (m.bahissende302.com/tr/casino/slots, providerTxtBtnMob + randomGameBtn):
 *   PILL  : 148x40, bg transparent, border 0.8px solid rgba(255,255,255,0.2),
 *           border-radius 8px, padding 8px
 *   RANDOM: 387x40, bg #d3af37 (gold), border 0, border-radius 4px,
 *           padding 0 20px, color #fff
 * MR before: pill border 0px + radius 0px + padding 0  →  needs match
 *            random h=38 + padding 0 12px              →  needs h=40 + padding 0 20
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Random game button — gold fill + 40px h + 20px h-pad (BS-exact) */
html.mobile-root body.mobile-site .slot-page-root #randomGameBtn,
html.mobile-root body.mobile-site .slot-page-root .random-game-btn,
html.mobile-root body.mobile-site .slot-page-root a.random-game-btn,
html.mobile-root body.mobile-site .slot-page-root button.random-game-btn {
  background: #d3af37 !important;
  background-color: #d3af37 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 4px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Random button inner image fix — restore aspect (no stretch) */
html.mobile-root body.mobile-site .slot-page-root #randomGameBtn img,
html.mobile-root body.mobile-site .slot-page-root .random-game-btn img {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 225 — Cat-tab alt kesilme fix (clipless render)
 * Sorun: .slots-category-filters + .category-tabs-scroll wrapper'larında
 *   max-height: 66px + overflow-y: hidden var (AGENT-SLOT BLOCK 3 satır 451-470).
 *   DPR=2.0 sub-pixel rendering sonucu cat-tab parent'ın 0.8px ALTINA taşıyor →
 *   alt rounded corner + active gold border bottom kesik görünüyor.
 * Ölçüm: tab.bot=278.74, wrapper.bot=277.94 → +0.80px clip.
 * Fix: Height lock kaldır, dikey overflow visible, scroll-container'a
 *   4px üst/alt padding ile sub-pixel + active border görünürlük garantisi.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters,
html.mobile-root body.mobile-site .slot-page-root .category-tabs-scroll {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
  box-sizing: content-box !important;
}

/* Scroll-container'a 76px min-height ver: cat-tab 66 + 10px nefes (5 üst + 5 alt).
   Browser overflow-x:auto + overflow-y:visible'i auto'ya çevirse de content
   kutuya sığdığı için clip olmaz. align-items:center ile cat-tab dikey ortalanır. */
html.mobile-root body.mobile-site .slot-page-root .category-tabs-scroll {
  min-height: 76px !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

html.mobile-root body.mobile-site .slot-page-root .slots-category-filters {
  min-height: 76px !important;
  height: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 226 — BS-EXACT cat-tab active state + pill BS-paralel match
 *
 * BS measured (m.bahissende302.com/tr/casino/slots, .horizontalCategoryItemWrp.active):
 *   - outer wrapper: bg transparent, NO outer border
 *   - inner .horizontalCategoryItem: 0.8px solid rgba(255,255,255,0.15) (faint white,
 *     SAME as inactive — active border is NOT gold)
 *   - ::before pseudo (on outer wrapper):
 *       position:absolute, inset 0, full 80x66
 *       background-image: linear-gradient(to top, rgba(211,175,55,0.6), rgba(255,255,255,0.1))
 *       This is the GOLD GLOW rising from bottom (signature BS active visual)
 *   - icon: -webkit-background-clip:text + bgImg linear-gradient(white, white60%)
 *           webkit-text-fill-color:transparent → renders as WHITE shimmer (NOT gold)
 *   - label: rgba(255,255,255,0.9)
 *
 * MR current (theme-robinbet-mobile.css:18757):
 *   - border 0.8px solid rgba(211,175,55,0.6) gold all sides ❌
 *   - icon color rgb(211,175,55) gold solid ❌
 *   - no ::before pseudo ❌
 *
 * Fix: override gold border → faint white, add ::before gold-glow gradient,
 * apply bg-clip:text + white linear-gradient on active icon.
 *
 * BS pill diff:
 *   - bgImg: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05))
 *   - fs 14px, fw 400, color rgba(255,255,255,0.8)
 *
 * MR pill (slot-deep-fixes.css:1190):
 *   - bgImg none ❌, fs 13 ❌, fw 500 ❌, color rgba(255,255,255,0.85) ❌
 * ════════════════════════════════════════════════════════════════════ */

/* Cat-tab .active border: faint white border + solid black bg (BS-exact) */
html.mobile-root body.mobile-site .slot-page-root a.cat-tab.active,
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active {
  border: 0.8px solid rgba(255, 255, 255, 0.15) !important;
  background: rgb(0, 0, 0) !important;
  background-color: rgb(0, 0, 0) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Cat-tab .active ::before — BS gold-glow gradient (extends -0.8px to cover full 80x66) */
html.mobile-root body.mobile-site .slot-page-root a.cat-tab.active::before,
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active::before {
  content: "" !important;
  position: absolute !important;
  inset: -0.8px !important;
  top: -0.8px !important;
  left: -0.8px !important;
  right: -0.8px !important;
  bottom: -0.8px !important;
  width: calc(100% + 1.6px) !important;
  height: calc(100% + 1.6px) !important;
  background: linear-gradient(to top, rgba(211, 175, 55, 0.6), rgba(255, 255, 255, 0.1)) !important;
  background-image: linear-gradient(to top, rgba(211, 175, 55, 0.6), rgba(255, 255, 255, 0.1)) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
}

/* Active inner content stacks above the gold-glow ::before */
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Active icon: BS uses bg-clip:text with white linear-gradient → WHITE shimmer */
html.mobile-root body.mobile-site .slot-page-root a.cat-tab.active .cat-tab-icon i,
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active .cat-tab-icon i,
html.mobile-root body.mobile-site .slot-page-root a.cat-tab.active .cat-tab-icon svg,
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active .cat-tab-icon svg {
  background: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.6)) !important;
  background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.6)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: rgb(211, 175, 55) !important;
  fill: rgba(255, 255, 255, 0.85) !important;
}

/* Active SVG fill: BS uses gradient stops, MR fallback to translucent white */
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active .cat-tab-icon svg path,
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active .cat-tab-icon svg g {
  fill: rgba(255, 255, 255, 0.85) !important;
}

/* Active label: BS rgba(255,255,255,0.9) + line-height 16px */
html.mobile-root body.mobile-site .slot-page-root a.cat-tab.active .cat-tab-label,
html.mobile-root body.mobile-site .slot-page-root .cat-tab.active .cat-tab-label {
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 16px !important;
}

/* PILL #mobileSidebarToggle BS-paralel font + bg-image match */
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle {
  background: rgba(0, 0, 0, 0) !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Pill PNG icon → tone match BS font-icon (white-80%) */
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .bs-filter-png,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .bs-filter-png {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.8 !important;
  filter: brightness(1.1) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 226 — Sticky-bar icon BS-EXACT (cat-tab + pill BetConstruct font)
 * BS uses BetConstruct-Icons font for ALL sticky-bar icons.
 * Cat-tab icons: fs:20, width:auto (preserve aspect ratio for trophy svg).
 * Pill icon: bc-i-filter-outline (replaces PNG funnel image).
 * ════════════════════════════════════════════════════════════════════ */

/* Cat-tab font-icon (Tüm Oyunlar bc-i-all-games1) — fs:20, lh:22px BS-exact (BS lh:22px gives glyph natural 22h) */
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters .cat-tab .cat-tab-icon i,
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters .cat-tab i.bc-i-all-games1,
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters .cat-tab i {
  font-size: 20px !important;
  line-height: 22px !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* Cat-tab inline-SVG (Popüler/Yeni/Jackpot/Bonus Buy/Video Slot) — fs:20, width:auto, h:20 */
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters .cat-tab .cat-tab-icon svg,
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters .cat-tab svg {
  font-size: 20px !important;
  width: auto !important;
  height: 20px !important;
  max-width: none !important;
  max-height: 100% !important;
  flex-shrink: 0 !important;
}

/* Cat-tab icon container — height 22 to fit BS Tüm Oyunlar 21x22 glyph */
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters .cat-tab .cat-tab-icon {
  width: auto !important;
  height: 22px !important;
  min-width: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Pill button icon — bc-i-filter-outline BS-exact (replaces PNG funnel) */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle__pill .bc-i-filter-outline,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle__pill .mobile-sidebar-toggle__pill-icon {
  font-family: "BetConstruct-Icons" !important;
  font-size: 16px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
}

/* Hide stale PNG image if any cached/legacy markup remains */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle__pill img.bs-filter-png {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 225 — Cat-tab alt kesilme fix
 * Sorun: .slots-category-filters + .category-tabs-scroll wrapper'larında
 *   max-height:66px + overflow-y:hidden var (önceki AGENT-SLOT BLOCK 3).
 *   DPR=2.0 sub-pixel rendering sonucu cat-tab parent'ın 0.8px ALTINA
 *   taşıyor → alt rounded corner + active gold border bottom kesik.
 * Fix: Height lock kaldır, dikey overflow visible, scroll-container'a
 *   4px üst/alt padding ile sub-pixel kayma + border görünürlük garantisi.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .slots-category-filters,
html.mobile-root body.mobile-site .slot-page-root .category-tabs-scroll {
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
}
html.mobile-root body.mobile-site .slot-page-root .category-tabs-scroll {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 229 — Pill text "Tüm Sağ..." truncate fix
 * Sorun: slots.css'te .mobile-sidebar-toggle__pill-text'e overflow:hidden
 *   + text-overflow:ellipsis + white-space:nowrap var; pill flex shrink
 *   ile daralınca "Tüm Sağlayıcılar" → "Tüm Sağ..." kesiliyor.
 * Fix: pill-text genişliğini serbest bırak (overflow:visible, no ellipsis),
 *   pill'e explicit min-width + flex-shrink:0 ile shrink engelle.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .mobile-sidebar-toggle__pill,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill-text {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 230 — Pill button BS-EXACT visual parity (providerTxtBtnMob clone)
 * Hedef: BS https://m.bahissende302.com/tr/casino/slots
 *   <button class="providerTxtBtnMob">
 *     <i class="bc-i-filter-outline"></i>
 *     <span class="providerFilter">Tüm Sağlayıcılar</span>
 *   </button>
 * BS computed: w:148, h:40, pad:8px, br:8px, border:0.8px solid
 *   rgba(255,255,255,0.2), bg:transparent, fs:14, fw:400, color:rgba(.,.8),
 *   gap:normal (icon + span doğal whitespace ile arada). icon fs:16,
 *   color:rgba(.,.8). text fs:14, fw:400, ls:normal, font-family:Roboto.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle {
  height: 40px !important;
  padding: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .mobile-sidebar-toggle__pill,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle__pill {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle__pill-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: normal !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  text-transform: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .mobile-sidebar-toggle__pill-icon,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle .mobile-sidebar-toggle__pill-icon,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle .bc-i-filter-outline {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 231 — Sort button .active state BS-EXACT
 * BS DOM: <button class="providerFilterBtnMob providerBtn bc-i-sort active">
 *   bg: rgb(211, 175, 55)  (gold #d3af37)
 *   border: 0.8px solid rgba(255, 255, 255, 0.4)
 *   border-radius: 8px
 *   color: rgb(255, 255, 255)
 *   ::before glyph color: white, font-size: 18px
 * Click → toggle active → page sorts A-Z (visual gold pill on)
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn.active,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn.active {
  background: rgb(211, 175, 55) !important;
  background-color: rgb(211, 175, 55) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn.active::before,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn.active::before {
  color: #ffffff !important;
  font-size: 18px !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 232 — BS-paralel categorized sort active section view
 * Sort active → grid'i çoklu yatay scroll satırına dönüştür.
 *   .mr-sort-grouped: parent grid layout off (block)
 *   .mr-sort-section: dikey blok (header + horizontal row)
 *   .mr-sort-section-head: section title + "TÜMÜ (+N)" link (BS-paralel)
 *   .mr-sort-section-row: yatay scroll, 8 kart side-by-side
 *   .mr-sort-card: kart genişliği fixed (BS-paralel ~158px)
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px 10px 14px !important;
  background: transparent !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.2px !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section-more {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #d4af37 !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 0 14px 14px 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section-row::-webkit-scrollbar {
  display: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-card {
  flex: 0 0 auto !important;
  width: 158px !important;
  min-width: 158px !important;
  max-width: 158px !important;
  scroll-snap-align: start !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-card .game-item {
  width: 158px !important;
  min-width: 158px !important;
  max-width: 158px !important;
  height: 158px !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 233 — mr-sort-grouped width overflow fix
 * slots.css @media (max-width:480px) `.game-grid { grid-template-columns:repeat(2,1fr); gap:8px }`
 * load order MR slot-deep-fixes'ten SONRA → grid-template-columns kalıyor,
 * section'lar 1349px genişliğe taşıyor (viewport 524px).
 * Cascade specificity bump + box-sizing ile section width'i lock.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped,
html.mobile-root body.mobile-site .slot-page-root #game-grid.mr-sort-grouped,
html.mobile-root body.mobile-site .slots-games-container .game-grid.mr-sort-grouped,
html.mobile-root body.mobile-site .games-scroll-container .game-grid.mr-sort-grouped {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped > .mr-sort-section,
html.mobile-root body.mobile-site .slot-page-root #game-grid.mr-sort-grouped > .mr-sort-section,
html.mobile-root body.mobile-site .game-grid.mr-sort-grouped > .mr-sort-section {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-loading {
  width: 100% !important;
  text-align: center !important;
  padding: 24px 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}
@media (max-width: 480px) {
  html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped,
  html.mobile-root body.mobile-site .slot-page-root #game-grid.mr-sort-grouped {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 234 — BS-EXACT sort active section view (visual exact match)
 * Plan: abstract-wondering-grove.md FAZ 1
 * BS reference: m.bahissende302.com/tr/casino/slots
 * ════════════════════════════════════════════════════════════════════ */

/* Section container — transparent bg, no border (BS measured: padding 0) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Section header — flex row, icon + title + more (BS measured: padding 10px 0) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
}

/* Section icon — 16x16 inline-flex, white color (BS measured) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-head .mr-sort-section-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex: 0 0 auto !important;
  color: #ffffff !important;
  fill: currentColor !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-head .mr-sort-section-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: currentColor !important;
  color: inherit !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-head .mr-sort-section-icon svg path {
  fill: currentColor !important;
}

/* Section title — fs:16, fw:400, color:#fff (BS) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-head .mr-sort-section-title {
  flex: 1 1 auto !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Section "TÜMÜ (+N)" — fs:14, color:rgba(255,255,255,0.5) (BS) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-head .mr-sort-section-more {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
}

/* Section row — horizontal scroll container */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Card — BS-EXACT 181×128 (full-bleed game artwork) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card {
  flex: 0 0 auto !important;
  width: 181px !important;
  min-width: 181px !important;
  max-width: 181px !important;
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important;
  position: relative !important;
}

/* Card inner game-item — fill card */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-item {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Card image — fill card */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-item .game-img,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* Hide provider band, info-strip, name-strip in section view (BS full-bleed) */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-provider,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-info-strip,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-name-strip,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-provider-band,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-bottom-strip {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide overlay (star/info/title/oyna/demo) in section view — BS doesn't show */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-overlay,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-fav,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped .mr-sort-section .mr-sort-section-row .mr-sort-card .game-info-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Section grouped grid — disable grid layout, allow vertical stacking */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
}

/* ITER 275 — Hide raw .game-item / .game-skeleton appended by infinite-scroll
 * (loadSlots IntersectionObserver) when sort-grouped view is active.
 * Why: applySortGroupView replaces grid.innerHTML with 4 .mr-sort-section
 * children, but loadMoreSentinel keeps firing as user scrolls and appends
 * raw .game-item to gameGrid via insertAdjacentHTML. Those bare items
 * render full-width oversized below the sort sections.
 * Fix: any direct child of .mr-sort-grouped that is NOT a sort section /
 * sort loading message is hidden. */
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped > .game-item,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped > .game-skeleton,
html.mobile-root body.mobile-site .slot-page-root .game-grid.mr-sort-grouped > .slot-skeleton-item,
html.mobile-root body.mobile-site #game-grid.mr-sort-grouped > .game-item,
html.mobile-root body.mobile-site #game-grid.mr-sort-grouped > .game-skeleton,
html.mobile-root body.mobile-site #game-grid.mr-sort-grouped > .slot-skeleton-item {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 237 — BS-paralel multi-select staging (provider drawer)
 *   - Counter row (mrStagedRow) BS-paralel layout
 *   - Selected provider card visual feedback (white bg)
 *   - Trash button (clear staged) icon style
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .bs-reset-row {
  display: none !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 16px 4px 16px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

html.mobile-root body.mobile-site .slot-page-root .bs-reset-row.has-selection {
  display: flex !important;
}

html.mobile-root body.mobile-site .slot-page-root .bs-reset-row #mrStagedCounter {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
}

html.mobile-root body.mobile-site .slot-page-root .bs-reset-row .bs-staged-trash {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
}

html.mobile-root body.mobile-site .slot-page-root .bs-reset-row .bs-staged-trash:hover,
html.mobile-root body.mobile-site .slot-page-root .bs-reset-row .bs-staged-trash:active {
  color: #ffffff !important;
}

/* ITER 237d: Selected provider — BS-paralel white gradient + NO border + inner shadow */
html.mobile-root body.mobile-site .slot-page-root .bs-prov-card.sidebar-provider-item.active:not(.bs-prov-all) {
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) !important;
  background-color: transparent !important;
  border: 0 none transparent !important;
  border-width: 0 !important;
  box-shadow: rgba(255, 255, 255, 0.9) 1px 1px 0px 0px inset !important;
}

html.mobile-root body.mobile-site .slot-page-root .bs-prov-card.sidebar-provider-item.active:not(.bs-prov-all) .bs-logo {
  color: #000000 !important;
}

html.mobile-root body.mobile-site .slot-page-root .bs-prov-card.sidebar-provider-item.active:not(.bs-prov-all) .bs-logo svg {
  color: #000000 !important;
  fill: currentColor !important;
}

/* ==========================================================================
 * ITER 238 — BS-paralel search button toggle (slot sticky bar)
 * BS davranis: collapsed 42x40 icon-only -> click -> expand fill row,
 * "Tum Saglayicilar" hide, input "Oyun Ara" full width, icon -> bc-i-close-remove.
 * Click again -> collapse + clear + icon revert.
 *
 * Trigger: .slots-game-search-bar.games-header parent gets .search-active class
 * via JS handler (slot-overlay-icons-fix.js ITER 238).
 * ========================================================================== */

/* Default collapsed state: search expand 42x40, Tum Saglayicilar visible */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) #gamesSearchExpand {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 40px !important;
  position: relative !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) #gamesSearchExpand .games-search-bar {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 40px !important;
  position: relative !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) #gamesSearchExpand .games-search-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Active expanded state: hide Tum Saglayicilar, expand search to fill row */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #mobileSidebarToggle {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #gamesSearchExpand {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  position: relative !important;
  margin-right: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #gamesSearchExpand .games-search-bar {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  position: relative !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 0 40px 0 0 !important;
  box-sizing: border-box !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #gamesSearchExpand .games-search-input {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 38px !important;
  padding: 1px 2px 1px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  border: 0 !important;
  outline: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip: auto !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #gamesSearchExpand .games-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
}
/* Icon button: absolute right when expanded (close X overlay) */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #gamesSearchExpand #searchClearBtn {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 2 !important;
}
/* Close X glyph (bc-i-close-remove) styling */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header.search-active #searchClearBtnIcon.bc-i-close-remove {
  font-family: BetConstruct-Icons !important;
  font-size: 14px !important;
  color: #ffffff !important;
  display: inline-block !important;
  visibility: visible !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 242 — Oyun Ara extend leftward (BS-paralel)
 * User 2026-05-02: "uoyn ara butonunu sola doğru uzat. 2. fotodaki gibi"
 *
 * BS reference: search input fills from left edge to just before sort btn.
 * MR before: expanded search w:317.6 starting at x:29 (17px margin-left
 * was overriding is-expanded margin:0 set in slots.min.css).
 *
 * Fix: MAX-specificity rule to remove left margin + reduce parent
 * padding, so expanded search starts near left edge of bar.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar .games-search-expand.is-expanded,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand.is-expanded,
html[lang] body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand.is-expanded {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header,
html.mobile-root body.mobile-site .slot-page-root .games-header.slots-game-search-bar {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 213 — Search/clear button transform reset (gold sliver fix)
 * User 2026-05-03: "buradaki bozukluğu tespit et" (slot search bar üst
 * kenarda altın renk taşma — clipped sliver visible).
 *
 * Tanı: theme-robinbet-mobile.css legacy rule
 *   `body.mobile-site .games-search-expand .games-search-btn {
 *      transform: translateY(-50%) !important;
 *   }`
 * absolute-positioned button'u 50% (~20px) yukari kaydiriyor. Onceki
 * iter'lerde `top: 50%` -> `top: 0` override edildi ama transform
 * kaldi. Sonuc: button rect y=231 (offsetParent y=249), ust kenar
 * 18-20px yukarida. `.games-search-expand` overflow:hidden var,
 * button'un ust kismi clip oluyor — visible olarak sadece dar bir
 * altin/turuncu serit kaliyor.
 *
 * Cozum: tum state'ler (default + .is-expanded + .search-active)
 * icin transform:none zorla. ITER 250 register-flag fix ile ayni
 * pattern. Source order MAX (file sonu) + selector specificity yuksek.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-btn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand .games-search-btn,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root .games-search-bar .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root .games-search-bar #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand .games-search-btn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-btn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded #searchClearBtn {
  transform: none !important;
  -webkit-transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 215 — Search close-X SVG override (font glyph tofu fix)
 * User 2026-05-03: BS X clean, MR X gozukur olarak kucuk box (tofu).
 * Tani: BetConstruct-Icons font'unda bc-i-close-remove char code (\e6e8)
 * MR'de yuklenmemis veya wrong glyph -> render edilmemis kare gozukuyor.
 * Cozum: JS iconEl.innerHTML'e inline SVG X enjekte et (ITER 215 JS).
 * CSS: search button icon'unun ::before content'ini disable et ki
 * font glyph + SVG cakismasin.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn .bc-i-close-remove::before,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn .bc-i-close-remove::before,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtnIcon.bc-i-close-remove::before {
  content: none !important;
  display: none !important;
}

/* SVG inside icon — ensure proper centering + color */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn .bc-i-close-remove svg,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn .bc-i-close-remove svg,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtnIcon.bc-i-close-remove svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 216 — Search bar right-shift + BS color overlay
 * - Sort button margin-left: -9px → 0 (shifts sort 9px right toward viewport edge)
 * - Search expand width: calc(100% - 56px) → calc(100% - 48px) (8px wider)
 * - ::after pseudo with rgba(255,255,255,0.1) overlay matches BS visual elevation
 * ════════════════════════════════════════════════════════════════════ */

html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > .sort-toggle-wrap,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active > .sort-toggle-wrap,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > #sortToggleWrap {
  margin-left: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand.is-expanded,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand {
  flex: 0 0 calc(100% - 48px) !important;
  width: calc(100% - 48px) !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-bar,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-bar {
  position: relative !important;
  overflow: hidden !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-bar::after,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-bar::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-bar .games-search-input,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-bar input,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand #searchClearBtn {
  position: relative !important;
  z-index: 2 !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 218 — Search ↔ Sort gap close (BS-paralel 7px)
 * MR before: flex gap 8px + exp margin-right 8px = 16px total
 * BS target: 7px gap between search box end and sort button start
 * Fix: exp margin-right → 0, parent gap → 7px
 * ════════════════════════════════════════════════════════════════════ */

html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar {
  gap: 7px !important;
  column-gap: 7px !important;
}

html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand.is-expanded {
  margin-right: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 219 — Button color BS-paralel (Tüm Sağlayıcılar + Search + Sort)
 * BS pattern: bg transparent + linear-gradient(rgba(255,255,255,0.1) → rgba(255,255,255,0.05)) + border 0.8px solid rgba(255,255,255,0.2)
 * MR before: pure black appearance (transparent bg + page-black background-color showing)
 * Fix: apply BS gradient overlay + border to all 3 buttons
 * ════════════════════════════════════════════════════════════════════ */

/* ITER 430: BS pillar (Tüm Sağlayıcılar) + sort btn keep the gradient.
 * Search btn removed from this rule — BS measurement shows it has bg
 * transparent (no gradient overlay). See ITER 219 base rule at line 287
 * for search-btn transparent background. */
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #sortToggle,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar .sort-toggle,
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap > button,
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap #sortToggle {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
}

/* ITER 219.1 — High-spec override defeating .slots-game-search-bar.games-header #X (1,5,2)
 * Uses (1,7,3) spec via [id] attr selector + double-class chain, with `background:` shorthand
 * to override the shorthand in earlier rule 115 (background: transparent !important). */
/* ITER 430: search btn selectors removed — BS has transparent bg on
 * .searchInputWrp (no gradient). Pill + sort retain gradient. */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #mobileSidebarToggle[id],
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle[id],
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #sortToggleBtn[id],
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #sortToggleBtn[id],
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar .sort-toggle-btn[class],
html.mobile-root body.mobile-site .slot-page-root #sortToggleWrap[id] > button {
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) transparent !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
}

/* ITER 430: explicit transparent bg for search btn (BS-paralel — no gradient) */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #searchClearBtn[id],
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #searchClearBtn[id],
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand[id] .games-search-icon-btn[class] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 220.1 — Search clear (X) button duplicate icon fix (scoped)
 * Issue: when user types, #searchClearBtn <i class="bc-i-close-a-outline">
 *        renders BOTH BC icon font glyph (::before, outline frame shape)
 *        AND an injected child <svg> (clean X). Stacked = duplicate.
 * BS uses single clean X. Fix: ONLY hide ::before of close icons
 * (bc-i-close*) — leave bc-i-search alone (collapsed-state magnifier).
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-a-outline::before,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close::before,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i[class*="bc-i-close"]::before {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Center child <svg> vertically inside <i> (was 14×28 with svg at bottom) */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-a-outline,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i[class*="bc-i-close"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

html.mobile-root body.mobile-site .slot-page-root #searchClearBtn svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
 * ITER 221 — BS-paralel skeleton placeholder bg on game cards
 * BS: .casinoGameItem has rgba(255,255,255,0.1) bg + 8px radius — appears
 *     as visible gradient placeholder while artwork image loads.
 * MR: .game-item was bgC rgba(0,0,0,0) (transparent) → empty black
 *     rectangles during loading. Add same bg + radius so loading state
 *     matches BS skeleton-style.
 * After image loads, image covers bg fully (no visible diff).
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item,
html.mobile-root body.mobile-site .slot-page-root .game-item {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: linear-gradient(110deg, rgba(255,255,255,0.06) 8%, rgba(255,255,255,0.14) 18%, rgba(255,255,255,0.06) 33%) !important;
  background-size: 200% 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  animation: mrGameSkeletonShimmer 1.4s ease-in-out infinite !important;
}

/* ITER 479 — Once a real image is rendered, kill shimmer animation BUT
 * preserve --cover-bg as parent fallback. During scroll-back IMG bitmap
 * gets GPU-evicted (still has [src] attribute, so this rule still matches),
 * if we set background-image:none the dark body bg bleeds through =
 * "black flash". Using var(--cover-bg, none) keeps the cover painted on
 * parent so eviction is invisible. */
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item:has(img[src]:not([src=""])),
html.mobile-root body.mobile-site .slot-page-root .game-item:has(img[src]:not([src=""])) {
  animation: none !important;
  background-image: var(--cover-bg, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

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

/* ════════════════════════════════════════════════════════════════════
 * ITER 222 — #gamesSearchExpand (search toggle btn) BS-paralel fix
 * Issue: button rendered as plain black square (no gradient bg) AND
 *        bc-i-search icon ::before content empty → no glyph visible.
 * Tüm Sağlayıcılar (mobileSidebarToggle) + sortToggleBtn already have
 * gradient bg via JS (slot-overlay-icons-fix.js); search expand btn
 * was missed. CSS fix here: gradient + border + SVG mask magnifier.
 * ════════════════════════════════════════════════════════════════════ */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05)) !important;
  border: 0.8px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ITER 429 — Allow native BetConstruct font glyph U+E91E to render on
 * .bc-i-search via its ::before. Prior Material Design mask-image approach
 * (ITER 222) drew a tiny diagonal stroke at 18px because the mask viewBox
 * geometry and 14px container clipped the lens. Font glyph renders crisp at
 * 18px via font hinting (BS-paralel). JS (slot-overlay-icons-fix.js) sets
 * font-family, font-size, color on the <i>. */

/* ════════════════════════════════════════════════════════════════════
 * ITER 243 — Search Opening Animation BS-paralel (collapsed → expanded)
 * User 2026-05-03: "Search Opening Animation + Bar Behavior Exact Clone (BS→MR)"
 *
 * BS reference (m.bahissende302.com /slot search button click):
 *   - #gamesSearchExpand width: 42px → 100% over 0.24s ease
 *   - #mobileSidebarToggle (Tüm Sağlayıcılar) collapses w:107→0, opacity:1→0
 *   - .games-search-bar border + bg fade-in
 *   - input opacity 0 → 1 with 50ms delay
 *   - close X (#searchClearBtn) icon rotation 0deg → 90deg (subtle feedback)
 *
 * Fix: Add transition declarations on the elements involved. The JS sets
 * inline styles via setProperty(!important) — those still trigger transitions
 * if the transition itself is declared with !important on the same element.
 * Specificity (0,5,3) → wins over base CSS without conflicting.
 * ════════════════════════════════════════════════════════════════════ */
/* ITER 432 — BS-paralel search expand animation (slowed from 0.24s ease →
 * 0.4s cubic-bezier). BS slots.css base uses cubic-bezier(0.22, 1, 0.36, 1)
 * (ease-out-quart) at 0.32s — user requested slower feel, so use 0.4s with
 * same easing curve for smooth deliberate open. */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .games-search-expand {
  transition:
    flex 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    max-width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    min-width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    margin 0.85s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-bar {
  transition:
    flex 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    border-width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.85s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle {
  transition:
    flex 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    max-width 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    margin 0.85s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.85s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-input {
  transition:
    opacity 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.12s,
    width 0.85s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-icon-btn {
  transition:
    width 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Reduced-motion: disable transition (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand,
  html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-bar,
  html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle,
  html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-input,
  html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand #searchClearBtn {
    transition: none !important;
  }
}

/* ===== ITER 247+ FAZ 2 START =====
 * Owner: AGENT-SLOT-FAZ2 (rule #30 file ownership)
 * Purpose: BS-paralel davranış (transition + active feedback) parity for all
 *          21 slot page interactions. Each ITER block fenced for rollback.
 *
 * Reference measurements (BS m.bahissende302.com /tr/casino/slots, vp 419):
 *   .randomGameBtn   transition: background 0.24s ease;     bg #d3af37; br 4px; fs 12px; fw 500
 *   .providerTxtBtnMob transition: all (catch-all);            br 8px; fs 14px; fw 400
 *   .providerFilterBtnMob transition: color 0.18s ease;        br 8px; fs 18px; fw 400
 *   .hdr-navigation-link-bc (sub-nav ANA SAYFA/TURNUVALAR/JACKPOTLAR) transition: all
 *   .casinoGameItem game-overlay slide animation for tap feedback
 *
 * MR diffs (before fix):
 *   #randomGameBtn   filter 0.18s, transform 0.18s        → BS: background 0.24s
 *   #sortToggleBtn   transition 0.25s (all)               → BS: color 0.18s
 *   #mobileSidebarToggle  flex/width/max-width/etc (search) → kept for search anim
 *   sub-nav (.hdr-navigation-link-bc)  color 0.2s, box-shadow 0.2s → BS: all
 * ============================================================================== */

/* ITER 247 — Sticky bar button transitions (BS parity) */
html.mobile-root body.mobile-site .slot-page-root #randomGameBtn,
html.mobile-root body.mobile-site .slot-page-root .random-game-btn {
  transition: background 0.24s ease, opacity 0.18s ease !important;
}

/* sortToggleBtn: BS uses `transition: color 0.18s` only — MR had generic 0.25s.
 * Override to BS-paralel (color is the only animated prop on BS sort icon hover/active). */
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn {
  transition: color 0.18s ease, background 0.24s ease, opacity 0.18s ease !important;
}

/* Active/tap feedback for sticky bar buttons (BS pattern: subtle opacity dip,
 * no transform/scale — different from MR's initial filter/transform). */
html.mobile-root body.mobile-site .slot-page-root #randomGameBtn:active,
html.mobile-root body.mobile-site .slot-page-root .random-game-btn:active {
  background-color: rgb(190, 158, 50) !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.92 !important;
}
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn:active,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn:active {
  color: rgba(255, 255, 255, 0.6) !important;
  filter: none !important;
  transform: none !important;
}
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle:active {
  opacity: 0.85 !important;
  filter: none !important;
  transform: none !important;
}
/* ===== ITER 247 END ===== */


/* ===== ITER 248 — Sub-nav (ANA SAYFA/TURNUVALAR/JACKPOTLAR) BS-paralel transitions =====
 * BS: transition: all (catch-all) — color + bg + border-bottom + opacity all animate together.
 * MR (before): transition: color 0.2s, box-shadow 0.2s — inactive→active border-bottom
 *   appears instantly (snap), only color/box-shadow animates.
 * Fix: extend transition to all relevant props, 0.2s ease (BS-paralel feel).
 *
 * Selector targets ONLY the slot page sub-nav (data-slot-hero-tabs scope) — does NOT
 * touch global header navigation (rule #30 file ownership boundary).
 * ============================================================================== */
html.mobile-root body.mobile-site .slot-page-root .slot-hero-tabs a.hdr-navigation-link-bc,
html.mobile-root body.mobile-site .slot-page-root [data-slot-hero-tabs] a.hdr-navigation-link-bc,
html.mobile-root body.mobile-site .slot-page-root .slot-hero-tablist a.hdr-navigation-link-bc {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    border-bottom-color 0.2s ease,
    border-bottom-width 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease !important;
}

/* Tap feedback for sub-nav links — BS dims slightly, no transform/scale */
html.mobile-root body.mobile-site .slot-page-root .slot-hero-tabs a.hdr-navigation-link-bc:active,
html.mobile-root body.mobile-site .slot-page-root [data-slot-hero-tabs] a.hdr-navigation-link-bc:active {
  opacity: 0.78 !important;
  transform: none !important;
}

/* Cat-tabs (Tüm Oyunlar / Popüler / Yeni / etc) — MR-specific (BS doesn't expose
 * cat tabs in slot page sticky bar). Apply BS-paralel `all 0.2s` transition for
 * uniform tap feedback. */
html.mobile-root body.mobile-site .slot-page-root .category-tabs-scroll a.cat-tab,
html.mobile-root body.mobile-site .slot-page-root #categoryTabsScroll a.cat-tab {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .category-tabs-scroll a.cat-tab:active,
html.mobile-root body.mobile-site .slot-page-root #categoryTabsScroll a.cat-tab:active {
  opacity: 0.82 !important;
  transform: none !important;
}
/* ===== ITER 248 END ===== */


/* ===== ITER 249 — Game card overlay buttons + Header button BS-paralel transitions ===== */
/* BS sp-button-bc: transition: background 0.24s
   BS sign-in (GİRİŞ): transition: color 0.24s
   BS register (KAYIT): transition: background 0.24s
   MR play-btn (OYNA) + demo-btn (DEMO) + game-info-btn (i): need explicit transitions */

/* Hamburger (mobile-sidebar-toggle) — keep MR layout transitions but add BS-paralel background */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle,
html.mobile-root body.mobile-site .layout-bc .mobile-sidebar-toggle,
html.mobile-root body.mobile-site #mobileSidebarToggle {
  transition:
    background-color 0.24s ease,
    color 0.18s ease,
    flex 0.24s ease,
    width 0.24s ease,
    max-width 0.24s ease,
    opacity 0.18s ease,
    visibility 0.24s ease,
    margin 0.24s ease,
    padding 0.24s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle:active,
html.mobile-root body.mobile-site .layout-bc .mobile-sidebar-toggle:active,
html.mobile-root body.mobile-site #mobileSidebarToggle:active {
  opacity: 0.82 !important;
  transform: none !important;
}

/* GİRİŞ (login button) — BS uses transition: color 0.24s */
html.mobile-root body.mobile-site .layout-bc .hdr-btn-login,
html.mobile-root body.mobile-site .slot-page-root .hdr-btn-login,
html.mobile-root body.mobile-site button.hdr-btn-login,
html.mobile-root body.mobile-site a.hdr-btn-login {
  transition: color 0.24s ease, background-color 0.24s ease, opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .layout-bc .hdr-btn-login:active,
html.mobile-root body.mobile-site .slot-page-root .hdr-btn-login:active {
  opacity: 0.82 !important;
  transform: none !important;
}

/* KAYIT (register button) — BS uses transition: background 0.24s */
html.mobile-root body.mobile-site .layout-bc .hdr-btn-register,
html.mobile-root body.mobile-site .slot-page-root .hdr-btn-register,
html.mobile-root body.mobile-site button.hdr-btn-register,
html.mobile-root body.mobile-site a.hdr-btn-register {
  transition: background-color 0.24s ease, color 0.24s ease, opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .layout-bc .hdr-btn-register:active,
html.mobile-root body.mobile-site .slot-page-root .hdr-btn-register:active {
  opacity: 0.88 !important;
  transform: none !important;
}

/* Game overlay buttons (OYNA / DEMO / info i) — MR-only, no BS render to compare
   but apply BS-paralel sp-button-bc transition pattern for tap feedback consistency */
html.mobile-root body.mobile-site .slot-page-root .game-overlay .play-btn,
html.mobile-root body.mobile-site .slot-page-root .game-item .play-btn,
html.mobile-root body.mobile-site .slot-page-root a.play-btn {
  /* ITER 652c: opacity 0.18s → 0.4s + transform 0.18s → 0.4s (BS-paralel sandviç animasyon) */
  transition: background-color 0.24s ease, color 0.24s ease, opacity 0.4s ease, transform 0.4s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-overlay .play-btn:active,
html.mobile-root body.mobile-site .slot-page-root .game-item .play-btn:active,
html.mobile-root body.mobile-site .slot-page-root a.play-btn:active {
  opacity: 0.88 !important;
  transform: none !important;
}

html.mobile-root body.mobile-site .slot-page-root .game-overlay .demo-btn,
html.mobile-root body.mobile-site .slot-page-root .game-item .demo-btn,
html.mobile-root body.mobile-site .slot-page-root a.demo-btn {
  /* ITER 652c: opacity 0.18s → 0.4s + transform 0.4s eklendi (BS-paralel sandviç animasyon) */
  transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease, opacity 0.4s ease, transform 0.4s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-overlay .demo-btn:active,
html.mobile-root body.mobile-site .slot-page-root .game-item .demo-btn:active,
html.mobile-root body.mobile-site .slot-page-root a.demo-btn:active {
  opacity: 0.82 !important;
  transform: none !important;
}

/* Game info button (i) — currently transition:all, BS-paralel: opacity + color */
html.mobile-root body.mobile-site .slot-page-root .game-overlay .game-info-btn,
html.mobile-root body.mobile-site .slot-page-root .game-item .game-info-btn,
html.mobile-root body.mobile-site .slot-page-root a.game-info-btn {
  transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-overlay .game-info-btn:active,
html.mobile-root body.mobile-site .slot-page-root .game-item .game-info-btn:active,
html.mobile-root body.mobile-site .slot-page-root a.game-info-btn:active {
  opacity: 0.7 !important;
  transform: none !important;
}

/* UYGULA (provider apply) button BS-paralel tap feedback */
html.mobile-root body.mobile-site .slot-page-root .apply-providers-btn,
html.mobile-root body.mobile-site .slot-page-root #applyProvidersBtn,
html.mobile-root body.mobile-site .slot-page-root .providers-apply-btn {
  transition: background-color 0.24s ease, opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .apply-providers-btn:active,
html.mobile-root body.mobile-site .slot-page-root #applyProvidersBtn:active,
html.mobile-root body.mobile-site .slot-page-root .providers-apply-btn:active {
  opacity: 0.88 !important;
  transform: none !important;
}
/* ===== ITER 249 END ===== */


/* ===== ITER 250 — Sub-nav (hdr-navigation-link-bc) + game-item + hero slider BS-paralel ===== */
/* Real selector for ANA SAYFA/TURNUVALAR/JACKPOTLAR is .hdr-navigation-link-bc inside .hdr-navigation-scrollable-content
   Current MR transition: color 0.2s, box-shadow 0.2s
   BS transition: all
   Add explicit BS-paralel: border-bottom-color, background-color, opacity transitions for active/hover state */
html.mobile-root body.mobile-site .hdr-navigation-scrollable-content a.hdr-navigation-link-bc,
html.mobile-root body.mobile-site .hdr-navigation-scrollable-content .hdr-navigation-link-bc,
html.mobile-root body.mobile-site .layout-bc a.hdr-navigation-link-bc {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-bottom-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .hdr-navigation-scrollable-content a.hdr-navigation-link-bc:active,
html.mobile-root body.mobile-site .layout-bc a.hdr-navigation-link-bc:active {
  opacity: 0.82 !important;
  transform: none !important;
}

/* Game items (.game-item) — current 'all', BS-paralel: transform/opacity/box-shadow */
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item,
html.mobile-root body.mobile-site .slot-page-root .game-grid > .game-item {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item:active {
  opacity: 0.92 !important;
  transform: scale(0.98) !important;
  transition-duration: 0.12s !important;
}

/* Hero slider container — currently 'all', explicit transform for swipe parity */
html.mobile-root body.mobile-site .slot-page-root .home-hero-slider,
html.mobile-root body.mobile-site .slot-page-root [class*="hero-slider"] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease !important;
}

/* Hero slider items / wrapper — BS uses Swiper, MR custom; no transform on .swiper-wrapper transitions */
html.mobile-root body.mobile-site .slot-page-root .home-hero-slider .swiper-wrapper,
html.mobile-root body.mobile-site .slot-page-root .home-hero-slider .slick-track {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Game grid container — explicit (no 'all') */
html.mobile-root body.mobile-site .slot-page-root .game-grid {
  transition: opacity 0.18s ease !important;
}
/* ===== ITER 250 END ===== */


/* ===== ITER 251 — Higher-specificity overrides for theme reset (all:unset !important) + drawer + earlier transition:none ===== */
/* theme-robinbet-mobile.css uses `body.mobile-site .mobileHeader-actions .hdr-btn-login { all: unset !important }`
   which competes with our transition rule. Use ID-based selectors to outrank.
   Also override earlier `#game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn { transition: none !important }` */

/* GIRIS (#Giris) — beat .mobileHeader-actions #Giris reset */
html.mobile-root body.mobile-site .mobileHeader-actions #Giris,
html.mobile-root body.mobile-site .mobileHeader-actions button#Giris,
html.mobile-root body.mobile-site #Giris.hdr-btn-login {
  transition: color 0.24s ease, background-color 0.24s ease, opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .mobileHeader-actions #Giris:active,
html.mobile-root body.mobile-site .mobileHeader-actions button#Giris:active {
  opacity: 0.82 !important;
}

/* KAYIT (#openRegister) — same higher specificity */
html.mobile-root body.mobile-site .mobileHeader-actions #openRegister,
html.mobile-root body.mobile-site .mobileHeader-actions button#openRegister,
html.mobile-root body.mobile-site #openRegister.hdr-btn-register {
  transition: background-color 0.24s ease, color 0.24s ease, opacity 0.18s ease !important;
}
html.mobile-root body.mobile-site .mobileHeader-actions #openRegister:active,
html.mobile-root body.mobile-site .mobileHeader-actions button#openRegister:active {
  opacity: 0.88 !important;
}

/* OYNA (a.play-btn) — ITER 652c: opacity 0.18s → 0.4s + transform 0.4s eklendi */
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item .game-overlay .game-actions a.play-btn,
html.mobile-root body.mobile-site #slotsGamesContainer #game-grid .game-item .game-overlay .game-actions a.play-btn {
  transition: background-color 0.24s ease, color 0.24s ease, opacity 0.4s ease, transform 0.4s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn:active {
  opacity: 0.88 !important;
  transform: none !important;
}

/* DEMO (a.demo-btn) — ITER 652c: opacity 0.18s → 0.4s + transform 0.4s eklendi */
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item .game-overlay .game-actions a.demo-btn,
html.mobile-root body.mobile-site #slotsGamesContainer #game-grid .game-item .game-overlay .game-actions a.demo-btn {
  transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease, opacity 0.4s ease, transform 0.4s ease !important;
}
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn:active {
  opacity: 0.82 !important;
  transform: none !important;
}

/* Provider drawer (.providers-sidebar / #providersSidebar) — currently 'all', explicit transform parity */
html.mobile-root body.mobile-site .slot-page-root aside#providersSidebar,
html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar,
html.mobile-root body.mobile-site .slot-page-root .slots-provider-filters#providersSidebar {
  transition: transform 0s !important;
}
html.mobile-root body.mobile-site .slot-page-root aside#providersSidebar.mobile-open,
html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar.mobile-open {
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
/* ===== ITER 251 END ===== */


/* ===== ITER 252 — Override slot-overlay-fix.css transition:none + provider-drawer-correction.css triple-class transition:all ===== */
/* slot-overlay-fix.css has 9 important rules transition:none on play/demo
   provider-drawer-correction.css has triple-class .providers-sidebar.providers-sidebar.providers-sidebar { transition: all !important }
   We use 2 IDs combinator + .show-overlay state path to win on specificity */

/* OYNA — ITER 652c (2026-05-22): opacity 0.18s → 0.4s + transform 0.4s eklendi (BS-paralel sandviç animasyon) */
html.mobile-root body.mobile-site #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn {
  transition: background-color 0.24s ease, color 0.24s ease, opacity 0.4s ease, transform 0.4s ease !important;
}

/* DEMO — ITER 652c (2026-05-22): opacity 0.18s → 0.4s + transform 0.4s eklendi */
html.mobile-root body.mobile-site #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn {
  transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease, opacity 0.4s ease, transform 0.4s ease !important;
}

/* Provider drawer — beat triple-class with ID + duplicate-class chain */
html.mobile-root body.mobile-site .slot-page-root aside#providersSidebar.providers-sidebar.providers-sidebar.providers-sidebar,
html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar.providers-sidebar.providers-sidebar.slots-provider-filters {
  transition: transform 0s !important;
}
html.mobile-root body.mobile-site .slot-page-root aside#providersSidebar.providers-sidebar.providers-sidebar.providers-sidebar.mobile-open,
html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar.providers-sidebar.providers-sidebar.slots-provider-filters.mobile-open {
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
/* ===== ITER 252 END ===== */

/* ===== ITER 276 — Provider search empty state (BS-parity)
 * Renders inside .provider-sheet between .bs-reset-row and #sidebarProvidersList.
 * Toggled by provider-search-fix.js → toggleEmptyState() based on visibleCount.
 * BS shows a centered message + icon when search filter returns 0 matches.
 * MR mirrors that pattern using a stroked SVG search-with-line icon (same
 * visual hint as BS's `search_no_result` glyph from BetConstruct icon font).
 * Also hides the sidebar provider list when empty state is visible so the
 * "Tümü" pseudo-card and any unmatched cards don't show through.
 * ============================================================== */
.provider-search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 20px 40px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  user-select: none;
}
.provider-search-empty-state[hidden] { display: none; }

.provider-search-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0.92;
}
.provider-search-empty-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.provider-search-empty-text {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
}

/* Hide provider list grid while empty state is active. Empty state scope:
 * any unmatched cards have display:none from applyFilter, but Tümü is exempt.
 * .is-empty-search class on the grid pulls Tümü out too so the empty area
 * is the single visible thing in the drawer body. */
.sidebar-providers-list.is-empty-search > .bs-prov-card.bs-prov-all,
.sidebar-providers-list.is-empty-search > .sidebar-provider-item.bs-prov-all {
  display: none !important;
}

/* ITER 422 — Expanded search: X button anchored to RIGHT edge (BS-paralel).
 * User report: X visible on LEFT of expanded search bar; should be on RIGHT.
 * Root cause: collapsed-state rule (line 1094) sets `position:absolute; left:0`
 * and inline JS styles may leak when transitioning. Force absolute right + reset
 * left/order for any state that includes `is-expanded` OR `search-active`. */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-bar,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand .games-search-bar {
  flex-direction: row !important;
  position: relative !important;
}
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-icon-btn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand .games-search-icon-btn {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  bottom: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  order: 2 !important;
}
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.is-expanded .games-search-input,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.search-active #gamesSearchExpand .games-search-input {
  order: 1 !important;
  flex: 1 1 auto !important;
  padding-right: 8px !important;
}

/* ITER 423 — Always-expanded slot search (BS-paralel always-visible input).
 * User request 2026-05-13: "oyun ara yazısını da bunla aynı ekle" — make the
 * 'Oyun Ara' placeholder text always visible like in BS reference. BS slot
 * page has the search input always rendered (270x38px) showing "Oyun Ara"
 * placeholder; MR previously hid input behind an icon-only collapsed button.
 *
 * Astro page now stamps `.always-expanded` + `.is-expanded` on initial render.
 * This CSS ensures the bar visually behaves as expanded regardless of any
 * JS toggle that may flip classes — force flex sizing, input visible, X right. */
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.always-expanded,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand.always-expanded {
  flex: 0 0 calc(100% - 48px) !important;
  width: calc(100% - 48px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.always-expanded .games-search-bar {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  position: relative !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 0 40px 0 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.always-expanded .games-search-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  order: 1 !important;
  padding: 1px 8px 1px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  border: 0 !important;
  outline: none !important;
  clip: auto !important;
  box-sizing: border-box !important;
}
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.always-expanded .games-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.always-expanded #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand.always-expanded .games-search-icon-btn {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  bottom: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 2 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* ITER 426 — Search magnifier icon BS-paralel render.
 * BS extract (tab 1067854492): magnifier glyph U+E91E from BetConstruct-Icons,
 * rendered at 18px white.
 * MR state: slot-overlay-icons-fix.js injects an SVG magnifier into
 * <i.bc-i-search> AND inline-styles `font-size:0 !important` on the <i>.
 * Inline !important always wins over stylesheet !important regardless of
 * specificity, so the font-glyph route is unreachable from CSS alone — the JS
 * is the source of truth for this <i>. The SVG path inside is already a clean
 * magnifier, just sized 14×14 (BS is 18×18) and wrapped in a 14px box.
 * Fix: keep the SVG visible (do NOT hide it) and upsize the wrapper + SVG to
 * 18×18 via CSS attribute selectors that override the inline `width="14"
 * height="14"` HTML attrs and the JS inline width/height. */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-search,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-search,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-search > svg,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-search > svg,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-search > svg {
  display: block !important;
  visibility: visible !important;
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  fill: currentColor !important;
  opacity: 1 !important;
}
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-search > svg path,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-search > svg path,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-search > svg path {
  fill: #ffffff !important;
}
/* Sort button ::before already wired at ITER 228 (U+EBED, 18px). Reassert here
 * with max specificity in case font-display: block delayed the glyph paint. */
html.mobile-root body.mobile-site .slot-page-root #sortToggleBtn::before,
html.mobile-root body.mobile-site .slot-page-root .sort-toggle-btn.bc-i-sort::before {
  content: "\ebed" !important;
  font-family: "BetConstruct-Icons" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: inline-block !important;
}

/* ITER 424 — Push search button + sort button cluster to RIGHT edge of sticky bar.
 * User request 2026-05-13: "arama butonunu ve onun sağındaki butonu sağa yanaştır
 * iyice" — push search + adjacent sort further right.
 * Parent `.slots-game-search-bar.games-header` is flex-start with gap 8px.
 * Adding `margin-left: auto` on the search expand wrapper pushes it (and the
 * sort wrap which follows in DOM order) all the way to the right of the row,
 * while the left "Tüm Sağlayıcılar" pill stays anchored on the left. */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar #gamesSearchExpand {
  margin-left: auto !important;
}
/* ===== ITER 276 END ===== */

/* ITER 466 — Slot search input typeable (geometry-only, no visual change).
 * User report 2026-05-14: "görünümü bozmadan düzelt. yazı yazılsın."
 * Sebep: .games-search-expand.always-expanded wrapper 42px'e collapse oluyor
 *   (sadece icon button kadar) — #searchModalInput içinde 1px alana sıkışıyor.
 * ITER 465 reverted çünkü görünüm (bg/border/color) değiştirmişti. Bu blok
 *   SADECE width/flex/min-width/max-width/pointer-events override eder —
 *   background, border, border-radius, color, font TAMAMEN dokunulmaz. */
html.mobile-root body.mobile-site .slot-page-root .games-search-expand.always-expanded {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .games-search-expand.always-expanded .games-search-bar {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root .games-search-expand.always-expanded #searchModalInput,
html.mobile-root body.mobile-site .slot-page-root .games-search-expand.always-expanded .games-search-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
}
/* ===== ITER 466 END ===== */
/* ===== ITER 469 START — Halve slot search expand animation (850ms -> 425ms) ===== */
/* (Superseded by ITER 471 below — kept as fallback) */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .games-search-expand {
  transition:
    flex 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    max-width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    min-width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    margin 0.425s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-bar {
  transition:
    flex 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    border-width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.425s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle {
  transition:
    flex 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    max-width 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.275s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    margin 0.425s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.425s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-input {
  transition:
    opacity 0.275s cubic-bezier(0.65, 0, 0.35, 1) 0.06s,
    width 0.425s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-icon-btn {
  transition:
    width 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
/* ===== ITER 469 END ===== */
/* ===== ITER 476 START — 2x slower than ITER 471 (260ms -> 520ms) per user request ===== */
/* Curve: cubic-bezier(0.22, 1, 0.36, 1) — fast start, smooth decelerate (BS-style fluid feel) */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .games-search-expand {
  transition:
    flex 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    min-width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-bar {
  transition:
    flex 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle {
  transition:
    flex 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-input {
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    width 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand #searchClearBtn,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #gamesSearchExpand .games-search-icon-btn {
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* ===== ITER 476 END ===== */

/* ════════════════════════════════════════════════════════════════════
 * ITER 512 (2026-05-17) — TWO-BUG FIX (skeleton sliver + missing search X)
 *
 * USER REPORT 2026-05-17 (screenshot attached):
 *   1. "oyun ismi aratınca oyunlar yüklenirken o animasyon çıkmıyor.
 *      resimdeki gibi siyahlık çıkıyor sadece oyun yüklenene kadar"
 *      → On /slot search, shimmer skeleton doesn't appear; black grid
 *        shows until games load.
 *   2. "arama butonunu üzerindeki ikon kaybolmuş . bu hep oluyor"
 *      → Search button icon is invisible (empty box where X should be).
 *
 * ────────────────────────────────────────────────────────────────────
 * BUG 1 ROOT CAUSE (skeleton sliver):
 *   `slot.js renderSkeletonItems()` emits:
 *     <div class="game-skeleton slot-skeleton-item">
 *       <div class="game-skeleton__image"></div>
 *       <div class="game-skeleton__overlay"></div>
 *     </div>
 *   Desktop slots.css has NO width rule on `.game-skeleton` (relies on grid
 *   columns `repeat(5, minmax(0, 1fr))` stretching children).
 *   Mobile theme overrides #game-grid to `grid-template-columns: 1fr 1fr`
 *   with `justify-items: center` — which means grid items DO NOT stretch
 *   horizontally; they collapse to intrinsic size. `.game-skeleton` has no
 *   intrinsic width (empty divs inside) → computed width = 0px.
 *   Result: skeleton renders as a 0×N invisible sliver → user sees the
 *   dark `.game-grid` background = "black flash" during search loading.
 *
 * BUG 1 FIX:
 *   Force `.game-skeleton.slot-skeleton-item` to `width: 100%; aspect-ratio:
 *   3/4` (matches real game-item img ratio at theme line 7828).
 *   Force inner `.game-skeleton__image` to fill the parent (override its
 *   desktop `aspect-ratio: 4/3` which would shrink it vertically).
 *   Hide `.game-skeleton__overlay` strip (mobile cards have no title area
 *   under the image; the overlay would protrude beyond a real card).
 *
 * ────────────────────────────────────────────────────────────────────
 * BUG 2 ROOT CAUSE (missing search X):
 *   When URL contains `?search=X` on page load:
 *     • slot.js reads URLSearchParams, populates input, runs search →
 *       bar.classList.add('search-active'); expand.classList.add('is-expanded')
 *     • icon class becomes `bc-i-close-remove`
 *   Theme line 18122 / 18147 sets `::before { content: "\e5cd" }` (clean X
 *   glyph from BetConstruct-Icons font) BUT slot-deep-fixes.css ITER 215
 *   (lines 2253-2258) sets `bc-i-close-remove::before { display: none
 *   !important }` — written when ITER 215 expected JS to inject inline
 *   SVG into the <i>. Problem: JS inline-SVG injection only fires on
 *   user-CLICK of search toggle (slot-overlay-icons-fix.js line 687); the
 *   URL-state init path does NOT trigger that click handler. So:
 *     • ::before is hidden (ITER 215 rule)
 *     • No SVG injected (no user click)
 *     • <i> wrapper has no sizing → renders 0×0
 *   Result: empty dark square where X should be.
 *
 * BUG 2 FIX (CSS layer, two-pronged):
 *   (a) Size the `<i>` wrapper: 18×18 inline-flex (parallel to ITER 426
 *       for bc-i-search, which already works correctly).
 *   (b) Conditional ::before — defeat ITER 215 UNCONDITIONAL hide; use
 *       :has(> svg) to detect SVG injection state:
 *         • Has SVG (post user-click): hide ::before, show SVG (no double-glyph)
 *         • No SVG (URL-state init path): show ::before glyph "\e5cd" at 18px white
 *       This preserves both code paths.
 *
 * SPECIFICITY: (1, 3, 2) — same ID-based ceiling as theme reset cascade.
 * Cascade-order tiebreak: slot-deep-fixes loads after theme (link index
 * later), so we win ties.
 *
 * COMPLEMENT: slot-overlay-icons-fix.js patched in same commit to also
 * inject inline-SVG X for bc-i-close-remove on every init pass (defense
 * in depth — if CSS :has() is not supported on legacy WebView, JS still
 * paints the X via SVG route).
 * ════════════════════════════════════════════════════════════════════ */

/* ───── BUG 1: Skeleton sizing + BS-paralel shimmer (ITER 513 rewrite) ─────
 *
 * Aynı BS-paralel reçeteyi `.game-item--skeleton` ile birebir paylaşır —
 * her iki skeleton (search-trigger + initial-load) görsel olarak identik.
 *
 * Önceki ITER 512 mor (rgba(35,25,55,0.65) + rgba(22,16,42,0.75)) gradient
 * tabani + ince beyaz shimmer overlay kullaniyordu — user "mor diye birsey
 * olmamali" reddi. Su an: transparent base + 3-stop white gradient (0.10 →
 * 0.30 → 0.10) bg-size 200% + bg-position 200% → -100% 1s linear sweep.
 *
 * Sweep animation tek element-de (parent) calistirilir — inner __image ve
 * __shimmer DOM dugumleri hidden cunku parent gradient + animation BS
 * skeleton-loader-game-cube single-element modelini birebir yansitir. */
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton.slot-skeleton-item,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton.slot-skeleton-item,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* ITER 513 fix-4 (2026-05-17): aspect-ratio 3/4 portrait WRONG — real slot
   * game cards are LANDSCAPE 175:123 (~1.42) computed from real DOM measure
   * `getBoundingClientRect().width / height` on `.game-item.casinoGameItemContent`.
   * Skeleton was 2x taller than real card → user reported "aynı değil".
   * Now skeleton dimensions match real card footprint = no jarring resize. */
  aspect-ratio: 175 / 123 !important;
  height: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.10) 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box !important;
  /* ITER 643 (2026-05-21): BS-EXACT SKELETON SHIMMER (canlı yakalama).
   *
   * BS slot sayfasında yakalanan animation (Chrome MCP, 2026-05-21):
   *   Element: .casinoGameItemContent.skeleton-loader-game-cube
   *   Computed: "1s linear infinite an-skeleton-loader"
   *   background: linear-gradient(to right, rgba(255,255,255,0.1),
   *               rgba(255,255,255,0.3), rgba(255,255,255,0.1)) 200% 50%
   *
   * MR'da ZATEN element (.game-skeleton.slot-skeleton-item) + aynı gradient
   * + bg-size 200% var. SADECE animation eksikti.
   *
   * KASMA ÖNLEMI:
   *   - will-change KAPALI (önceki ITER 502'de paint amplifier oluyordu)
   *   - Skeleton DOM'da kısa ömürlü (~0.5-2sn, response gelince siliniyor)
   *   - Plus ITER 638 sonrası MR DOM artık temiz (30+30=60 element scroll'da)
   *   - BS aynı pattern'le smooth çalışıyor; MR DOM artık BS'e yakın temizlikte
   *
   * Test sonucu kasarsa revert edilebilir, kullanıcı onayladı bu yaklaşımı. */
  animation: an-skeleton-loader 1s linear infinite !important;
  will-change: auto !important;
}

@keyframes an-skeleton-loader {
  0%   { background-position: 200% center; }
  100% { background-position: 0 center; }
}

@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton.slot-skeleton-item,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton.slot-skeleton-item {
    animation: none !important;
  }
}

/* Inner DOM hidden — parent does the entire BS-paralel effect (single layer). */
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton .game-skeleton__image,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton .game-skeleton__image,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton .game-skeleton__shimmer,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton .game-skeleton__shimmer,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton .game-skeleton__overlay,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton .game-skeleton__overlay {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton,
  html.mobile-root body.mobile-site .slot-page-root .game-grid .game-skeleton.slot-skeleton-item,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-skeleton.slot-skeleton-item,
  html.mobile-root body.mobile-site .slot-page-root .game-item--skeleton {
    animation: none !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
  }
}

/* ───── BUG 2: Search close-X icon visible on URL-state init ───── */

/* Size the <i.bc-i-close-remove> wrapper to 18×18 inline-flex
 * (parallel to ITER 426 for i.bc-i-search). Without this, the <i> is
 * a 0×0 inline element with no content and renders invisibly. */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-remove,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-close-remove,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-close-remove,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtnIcon.bc-i-close-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-family: 'BetConstruct-Icons' !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  background: transparent !important;
  border: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* When JS has injected inline <svg> child (user-click path),
 * hide the ::before glyph so we don't render two X marks on top of each
 * other. SVG renders inside the inline-flex container, parent-sized. */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-remove:has(> svg)::before,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-close-remove:has(> svg)::before,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-close-remove:has(> svg)::before,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtnIcon.bc-i-close-remove:has(> svg)::before {
  content: none !important;
  display: none !important;
}

/* When NO SVG child (URL-state init path / JS not yet run / pre-hydration),
 * paint the font-glyph X via ::before. This UN-DOES the ITER 215 hide rule
 * for this case. \e5cd = "clean X" glyph in BetConstruct-Icons (confirmed
 * canvas measureText 24px = font has glyph). */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-remove:not(:has(> svg))::before,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-close-remove:not(:has(> svg))::before,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-close-remove:not(:has(> svg))::before,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtnIcon.bc-i-close-remove:not(:has(> svg))::before {
  content: "\e5cd" !important;
  display: inline-block !important;
  font-family: 'BetConstruct-Icons' !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: #ffffff !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  speak: none !important;
}

/* SVG inside icon (when present from user-click) — ensure proper sizing.
 * Existing ITER 215 SVG sizing (lines 2261-2267) is 14×14; upsize to 18
 * to match the wrapper, so SVG-route and glyph-route both render at the
 * same visual size (BS-paralel 18px X). */
html.mobile-root body.mobile-site .slot-page-root #searchClearBtn i.bc-i-close-remove > svg,
html.mobile-root body.mobile-site .slot-page-root .games-search-icon-btn i.bc-i-close-remove > svg,
html.mobile-root body.mobile-site .slot-page-root #gamesSearchExpand i.bc-i-close-remove > svg,
html.mobile-root body.mobile-site .slot-page-root #searchClearBtnIcon.bc-i-close-remove > svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
}
/* ===== ITER 512 END ===== */

/* ============================================================================
 * ITER 513 (2026-05-17) — Collapsed toolbar magnifier glyph override
 *
 * Root cause: theme-robinbet-mobile.css lines 18120-18123 + 18145-18149 use
 * `:has(.games-search-input:not(:placeholder-shown))` to force the X glyph
 * (\e5cd) on the icon ::before whenever the input has typed text, REGARDLESS
 * of the icon's class. On `/slot?search=sweet` URL-state init, the input has
 * the URL query value as text → CSS rule fires → ::before content becomes X
 * — even after slot-overlay-icons-fix swaps the class back to bc-i-search.
 *
 * Fix: higher-specificity selector ANDed with parent toolbar's
 * :not(.search-active) state. When the toolbar wrapper is NOT in the
 * user-clicked expanded state, force ::before content back to the magnifier
 * glyph (\e91e). The user only sees an icon-only 42px button — clicking it
 * activates the search-active expanded state, at which point the original
 * X-glyph rule wins (different specificity-equal selector chain).
 *
 * Specificity (this rule):
 *   html + body.mobile-site + .slot-page-root +
 *   .slots-game-search-bar.games-header:not(.search-active) +
 *   .games-search-expand + #searchClearBtnIcon::before
 *   = 1 ID, 6 classes, 2 type
 *
 * Specificity (original X-glyph rule at theme-robinbet-mobile.css:18146):
 *   html + body.mobile-site + .slot-page-root +
 *   .games-search-expand:has(.games-search-input:not(:placeholder-shown)) +
 *   #searchClearBtnIcon::before
 *   = 1 ID, 5 classes, 2 type
 *
 * 6 > 5 → this rule wins.
 * ============================================================================ */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) .games-search-expand #searchClearBtnIcon::before,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) #gamesSearchExpand #searchClearBtnIcon::before {
  content: "\e91e" !important;
  --fa: "\e91e" !important;
  font-family: 'BetConstruct-Icons' !important;
  color: inherit !important;
  display: inline-block !important;
}

/* Also override the `.games-search-btn > i::before` selector (theme-robinbet
 * lines 18120-18123) at the same elevated specificity, since the same input
 * has-text trigger forces X glyph through that selector chain too. */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) .games-search-expand .games-search-btn > i::before,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header:not(.search-active) #gamesSearchExpand .games-search-btn > i::before {
  content: "\e91e" !important;
  font-family: 'BetConstruct-Icons' !important;
}
/* ===== ITER 513 END ===== */

/* ====================================================================
 * ITER 514 (2026-05-18) — Clear-providers trash button + Seçilmiş pill
 *
 * BS reference: m.bahissende303.com/tr/casino/slots after selecting a provider.
 *   - Pill text changes from "Tüm Sağlayıcılar" to "{Name} Seçilmiş".
 *   - Pill background becomes gold (matching .mobile-sidebar-toggle.has-selection).
 *   - A black-square TRASH button appears between the gold pill and the
 *     search/sort buttons.
 *   - Clicking trash clears ALL selected providers (returns to "Tüm Sağlayıcılar").
 *
 * Markup added in slot.astro:
 *   <button id="clearProvidersBtn" class="clear-providers-btn iconButtonBlock">
 *     <i class="fas fa-trash-can"></i>
 *   </button>
 * Renders only when selectedProviders.length > 0 (server-side guard).
 *
 * Style parity (BS-EXACT):
 *   - Size: 40x40 (matches .sort-toggle-btn)
 *   - Background: linear-gradient + transparent (same chip family)
 *   - Border: 0.8px rgba(255,255,255,0.2)
 *   - Border-radius: 8px
 *   - Icon: Font Awesome 6 Free Solid "fa-trash-can" (\f2ed), 16px white
 *   - Flex order: 2 (between mobile-sidebar-toggle:1 and games-search-expand)
 *
 * JS handler: /mobile/assets/js/provider-clear-fix.js
 *   - On click, strips providers[] from URL and reloads.
 *
 * Rule refs: rule #20 numerical proof, rule #160 EXACT KLONLA faz 3 CLONE.
 * ==================================================================== */

/* Pill turns gold when a provider is selected (BS-paralel).
 * ITER 547 (2026-05-20): selectors mirror the competing 4-rule cluster at L1572-1575
 * (which sets background:transparent !important on .mobile-sidebar-toggle +
 * #mobileSidebarToggle + games-header variants). Without matching specificity
 * the ID-bearing transparent rule wins and the pill stays clear.
 * Specificity required: (1,3,2) — ID selector wins over plain class chain. */
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle.has-selection,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle.has-selection,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle.has-selection,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header #mobileSidebarToggle.has-selection {
  background: rgb(211, 175, 55) !important;
  background-color: rgb(211, 175, 55) !important;
  border-color: rgb(211, 175, 55) !important;
  color: rgb(255, 255, 255) !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle.has-selection .mobile-sidebar-toggle__pill,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle.has-selection .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill-text,
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill-icon,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle.has-selection .mobile-sidebar-toggle__pill-icon,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar.games-header .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill-icon {
  color: rgb(255, 255, 255) !important;
  background: transparent !important;
}
html.mobile-root body.mobile-site .slot-page-root .mobile-sidebar-toggle.has-selection .mobile-sidebar-toggle__pill-icon::before,
html.mobile-root body.mobile-site .slot-page-root #mobileSidebarToggle.has-selection .mobile-sidebar-toggle__pill-icon::before {
  color: rgb(255, 255, 255) !important;
}

/* Trash button — appears only when providers selected */
html.mobile-root body.mobile-site .slot-page-root .clear-providers-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 2 !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  background-color: transparent !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: rgb(255, 255, 255) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html.mobile-root body.mobile-site .slot-page-root .clear-providers-btn:active {
  background: rgba(255, 255, 255, 0.15) !important;
}
html.mobile-root body.mobile-site .slot-page-root .clear-providers-btn > i {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: rgb(255, 255, 255) !important;
  display: inline-block !important;
}
html.mobile-root body.mobile-site .slot-page-root .clear-providers-btn > i.fa-trash-can::before {
  content: "\f2ed" !important;  /* Font Awesome 6: trash-can solid */
  color: rgb(255, 255, 255) !important;
}

/* Bump the search-expand and sort-wrap one slot to make room for trash:2.
 * Source-order DOM precedence already places trash before search/sort, so
 * any flex `order` ties with `order:2` resolve in source order — but we
 * lift them explicitly to be defensive against future theme rule rewrites. */
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > .games-search-expand,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > #gamesSearchExpand {
  order: 3 !important;
}
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > .sort-toggle-wrap,
html.mobile-root body.mobile-site .slot-page-root .slots-game-search-bar > #sortToggleWrap {
  order: 4 !important;
}
/* ===== ITER 514 END ===== */