/* Vendored Roboto (self-hosted, CDN yok). Google Fonts v51 subset dosyalari
   /assets/fonts/ altina indirildi; tum weight'ler ayni woff2'yi kullanir. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ayiklanan inline <html> stil bloku (index.php satir 1) */
html#component {
  --mobile-header-main-section-height: 49px;
  --mobile-header-navigation-height: 40px;
  --mobile-horizontal-tab-navigation-height: 40px;
  --mobile-sub-header-full-height: 40px;
  --mobile-self-exclusion-height: 0px;
  --mobile-header-full-height: 89px;
  --dynamic-header: 49px;
  --window-height: 932px;
  --hero-hover: 0, 179, 0;
  --hero-sc: 0, 2, 5;
  --hero: 0, 230, 0;
  --brand-hover: 16, 153, 35;
  --brand-sc: 0, 2, 5;
  --brand: 22, 199, 46;
  --secondary-hover: 4, 120, 120;
  --secondary-sc: 0, 2, 5;
  --secondary: 6, 169, 170;
  --accent-hover: 0, 179, 0;
  --accent-sc: 0, 2, 5;
  --accent: 0, 230, 0;
  --oc-1-hover: 229, 229, 229;
  --oc-1-sc: 0, 2, 5;
  --oc-1: 255, 255, 255;
  --oc-2-hover: 204, 171, 0;
  --oc-2-sc: 0, 2, 5;
  --oc-2: 255, 215, 0;
  --oc-3-hover: 255, 102, 118;
  --oc-3-sc: 255, 255, 255;
  --oc-3: 255, 52, 73;
  --odd-up-hover: 16, 153, 35;
  --odd-up-sc: 0, 2, 5;
  --odd-up: 22, 199, 46;
  --odd-down-hover: 255, 102, 118;
  --odd-down-sc: 255, 255, 255;
  --odd-down: 255, 52, 73;
  --neutral: 255, 255, 255;
  --neutral-sc: 0, 2, 5;
  --b-hover: 60, 60, 60;
  --b-sc: 255, 255, 255;
  --b: 35, 35, 35;
  --header-hover: 0, 28, 87;
  --header-sc: 255, 255, 255;
  --header: 0, 12, 36;
  --menu-hover: 0, 28, 87;
  --menu-sc: 255, 255, 255;
  --menu: 0, 12, 36;
  --tab-navigation-hover: 0, 28, 87;
  --tab-navigation-sc: 255, 255, 255;
  --tab-navigation: 0, 12, 36;
  --static-black-hover: 0, 22, 56;
  --static-black-sc: 255, 255, 255;
  --static-black: 0, 2, 5;
  --static-white-hover: 229, 229, 229;
  --static-white-sc: 0, 2, 5;
  --static-white: 255, 255, 255;
  --warning-hover: 245, 151, 0;
  --warning-sc: 0, 2, 5;
  --warning: 255, 173, 41;
  --error-hover: 226, 23, 54;
  --error-sc: 255, 255, 255;
  --error: 180, 19, 43;
  --success-hover: 8, 195, 129;
  --success-sc: 255, 255, 255;
  --success: 6, 147, 97;
  --info-hover: 49, 126, 241;
  --info-sc: 255, 255, 255;
  --info: 15, 99, 225;
  --border-radius: 4px;
  --font-family: Roboto, Arial, Helvetica, sans-serif;
  user-select: none;
}

/* ---- Yerel duzeltmeler ---- */

/* BetConstruct-Icons ::before pseudo-element'e inherit edilmiyor.
   Ana kural elementin kendisine `font-family: BetConstruct-Icons !important`
   veriyor ama tarayici ::before'un font'unu default'a (Roboto) dusuruyor. */
[class^="bc-i-"]::before,
[class*=" bc-i-"]::before {
  font-family: 'BetConstruct-Icons' !important;
  font-style: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* informative-widget (bilgi bari) yazi rengi koyu default'a dustugu icin
   koyu arkaplan uzerinde okunmuyor. */
.informative-widget,
.informative-widget-link,
.informative-widget p,
.informative-widget a {
  color: #ffffff;
}

/* Static HTML render'da Swiper JS init olmadigi icin
   .swiper-slide'a HTML'de yazili "width: 430px" inline stili viewport'u
   tasiyor ve .swiper container'da overflow: hidden uygulanmadigi icin
   header'in ustundeki bilgi bari sagda gozukuyor. Bunlari duzelt. */
.hdr-dynamic-content .swiper,
.hdr-dynamic-content .carouselWrapper,
.hdr-dynamic-content .swiper-wrapper {
  overflow: hidden;
  width: 100%;
}
.hdr-dynamic-content .swiper-slide {
  width: 100% !important;    /* inline "width: 430px" ezilir */
  flex-shrink: 0;
}
/* Informative widget - canli sitedeki tasarima birebir uy:
   main.css'in orijinal kurallari calissin (margin-top:4px, yesil border-top,
   yuvarlak kose, transparent white bg). Sadece 2 kucuk dokun:
   1) HTML'de bos <p class="informative-widget-container"> ve bos <p></p>
      var - gorunmez alan kaplarlar; gizle ki gercek metin dikey ortalansin.
   2) Gercek metin <p>'sini 12px/18px + rgba(255,255,255,0.7) yap (canli
      sitede .informative-widget-container>span'a tanimli — bizim HTML'de
      dogrudan <p>'de olduğu için tekrar ver). */
.hdr-dynamic-content .informative-widget-container,
.hdr-dynamic-content .informative-widget-link > p:empty {
  display: none !important;
}
.hdr-dynamic-content .informative-widget-link {
  align-items: center !important;
}
.hdr-dynamic-content .informative-widget-link > p {
  color: rgba(var(--b-sc), 0.7);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  word-break: break-word;
  margin: 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
/* Widget karti 51px'te bitiyor + 5px alt border-radius yumusama.
   Sorunlar:
   1) hdr-dynamic-content sadece 47px kaplayor, kart 4px disina tasiyor
      -> tasan bolgede alttaki slider siziyor.
   2) .header-bc bg bazi kosullarda opaque olmadigi icin kart curve
      DIsindan (border-radius'un kesim bolgesi) yine slider siziyor.
   Cozum:
   - hdr-dynamic-content'i widget kartinin alt kenarina kadar uzat (siyah
     opaque bg sizmayi engeller).
   - Header top'unu 51'e cek (kart alt kenari = header ust kenari).
   - Header bg'yi zorla opaque siyah yap. */
.hdr-dynamic-content {
  min-height: 62px !important;
  background: rgb(35, 35, 35) !important;
}
/* Kart bg'sini asagi dogru uzat -> daha genis gri alan */
.hdr-dynamic-content .informative-widget-link {
  min-height: 40px !important;
}
/* Header ust kenari = widget karti alt kenari (5 hm-row + 4 widget + 52 link = 61) */
.header-bc {
  top: 61px !important;
  background: rgb(35, 35, 35) !important;
}
/* Misafir (login degil) header - .hdr-additional-info yok, sadece logo bari
   var; kart alt kenarina daha yakin otursun diye biraz yukari cek. */
.header-bc.is-guest {
  top: 51px !important;
}
/* Misafir header GIRIS + KAYIT butonlari:
   - KAYIT rengini parlak yesil (#00e600) yap
   - GIRIS ile KAYIT'i birbirine yakinlastir (12px -> 6px) */
.header-bc.is-guest .btn.register {
  background: #00e600 !important;
  color: #000205 !important;
  margin-inline-start: 6px !important;
}
/* .hdr-additional-info (KAPAT + +3% + bonus + wallet ikon bari) icon boyutu -
   HER iki durumda da (auth/guest) buyuk. */
.header-bc .hdr-additional-info .user-nav-icon {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
}
.header-bc .hdr-additional-info .user-nav-icon + .user-nav-icon {
  margin-inline-start: 6px !important;
}
.header-bc .hdr-additional-info .bc-i-whatsapp {
  width: 58px !important;
}
.header-bc .hdr-additional-info .bc-i-whatsapp:before {
  width: 58px !important;
  height: 32px !important;
}
/* AUTH: KAPAT solda kalir, +3%/iconlar SAĞA yaslanir (main.css default).
   .headerExpanded'a flex:1 verildigi icin dogal olarak iconlar en saga itilir. */
.header-bc.is-authenticated .hdr-additional-info .headerExpanded {
  flex: 1 1 auto !important;
}
/* GUEST: KAPAT yok, sadece +3%/iconlar var -> SOLA yaslanir. */
.header-bc.is-guest .hdr-additional-info {
  justify-content: flex-start !important;
  padding-inline-start: 8px !important;
}
.header-bc.is-guest .hdr-additional-info .hdr-user-bc {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* bc-i-whatsapp icon main.css'te .header-bc scope'unda SVG background
   image olarak tanimli (media_1476_f5ed...svg) - ekstra kural gerekmiyor. */

/* ---- React runtime tarafindan inject edilen ama statik snapshot'ta
   eksik olan component'ler icin minimal layout kurallari. ---- */

/* sportMiniGame kart (Penalty vb.) - HTML: .sportMiniGame > .sportMiniGameBanner
   > [.sportMiniGameBackdrop (blurred bg), .sportMiniGameThumb (small),
   .sportMiniGameInfo (name+provider+button)] */
.sportMiniGame {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: rgba(var(--b), 1);
  margin: 8px;
  isolation: isolate;
}
.sportMiniGameBanner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  min-height: 84px;
}
.sportMiniGameBackdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.sportMiniGameBackdropImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) brightness(0.5);
  transform: scale(1.1);
}
.sportMiniGameThumb {
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.sportMiniGameThumbImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sportMiniGameInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.sportMiniGameTitles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.sportMiniGameName {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.sportMiniGameProvider {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.2;
}
.sportMiniGamePlayBtn {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 12px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Favori Takim widget kart */
.favouriteTeamsWidgetWrapper {
  padding: 8px;
}
.favouriteTeamsWidget {
  background: rgba(var(--b), 1);
  border-radius: var(--border-radius);
  padding: 12px;
}
.favouriteTeamsWidgetHeader {
  margin-bottom: 10px;
}
.favouriteTeamsWidgetTitle {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.favouriteTeamsList {
  display: flex;
}
.addYourFavouritesBtn {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
.addYourFavouritesBtn i {
  color: #ffd700;
  font-size: 14px;
}

/* Filter sports (video/globe icon + search) barr */
.filter-sports-bc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}
.filter-sports-bc > .btn {
  flex-shrink: 0;
  padding: 8px 12px;
  background: rgba(var(--b), 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius);
  color: #fff;
  cursor: pointer;
}
.filter-sports-bc .filter-icon-bc {
  font-size: 16px;
}
.filter-sports-bc .sport-search-bc {
  margin-left: auto;
}
.filter-sports-bc .ss-icon-holder-bc {
  padding: 8px 12px;
  background: rgba(var(--b), 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

/* Turnuvalar seçici (select+ikon, mor gradient bar) */
.tournament-select {
  margin: 8px;
}
.tournament-select .form-control-bc {
  background: linear-gradient(90deg, rgba(90, 40, 180, 0.9), rgba(140, 60, 220, 0.9));
  border-radius: var(--border-radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tournament-select .form-control-label-bc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  color: #fff;
}
.tournament-select .select-icon-bc {
  font-size: 18px;
  color: #fff;
}
.tournament-select .form-control-title-bc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  order: -1;
}
.tournament-select .form-control-select-bc {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.tournament-select .form-control-select-bc option {
  color: #000;
}

/* Bottom nav bar - main.css'te `.count-odd-animation { position: absolute }`
   kurali item'in KENDISINE uygulaniyor (CSS parsing hatasi/artifact).
   Bu kural CANLI item'ini akis disina atarak barin duzenini bozuyor.
   Item'i relative'e cek + badge yalnizca :after psuedo'da absolute olsun. */
.tab-navigation-w-bc > .tab-nav-item-bc.count-odd-animation {
  position: relative !important;
}

/* Bottom bar gorunurluk garantisi - .tab-navigation-w-bc bazi
   viewport'larda saklanabiliyor. Zorla goster. */
.layout-navigation-holder-bc {
  height: 60px !important;
  display: block !important;
}
.tab-navigation-w-bc {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 950 !important;
}
.tab-navigation-w-bc > .tab-nav-item-bc {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Header GIRIS/KAYIT butonlari garantisi - .hdr-user-bc bir bazi
   sayfalarda display:none oluyor. Ilk (butonlar) grubu goster. */
.header-bc .hdr-main-content-bc {
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  min-height: 49px !important;
}
.header-bc .hdr-main-content-bc > .hdr-user-bc {
  display: flex !important;
  gap: 6px !important;
  margin-left: auto;
}
.header-bc .hdr-main-content-bc > .hdr-user-bc > .btn.sign-in,
.header-bc .hdr-main-content-bc > .hdr-user-bc > .btn.register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
}
.header-bc .hdr-main-content-bc > .hdr-user-bc > .btn.sign-in {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  padding: 4px 8px !important;
  text-decoration: underline !important;
  text-decoration-color: #fff !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
}
.header-bc .hdr-main-content-bc > .hdr-user-bc > .btn.register {
  background: rgba(var(--brand), 1);
  color: rgba(var(--brand-sc), 1);
  border: 0;
}
.header-bc .hdr-toggle-button-bc {
  margin-left: 8px !important;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

/* ---- MOBILE VIEWPORT SIZDIRMA FIX ---- */
/* KOK NEDEN: casinoTopWinnersWidget / .horizontal-scroll gibi yatay
   scroll'lu widget'lar iceriklerini viewport disina tasiyor (3360px
   scrollWidth). body yatay overflow yapinca window.innerWidth
   viewport'tan (375) tasan icerige (1500+) esitleniyor - tum position:fixed
   bar'lar ve header'lar viewport disina genisliyor.
   Cozum: html/body overflow-x:hidden + tum horizontal-scroll widget'lari
   kendi container'ina hapset. */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100vw !important;
}
.layout-bc,
#root {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.layout-content-holder-bc {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.hm-row-bc,
.hm-row-bc-inner {
  max-width: 100vw !important;
  overflow-x: hidden;
}
/* Yatay scroll'lu widget'lar - kendi container'inda scroll etsinler */
.casinoTopWinnersWidget,
.casinoHorizontalGamesList,
.casinoGamesWidget {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.horizontal-scroll,
.casinoTopWinnersWidget .horizontal-scroll,
.casinoHorizontalGamesList .horizontal-scroll {
  max-width: 100vw !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.hdr-dynamic-content,
.header-bc,
.hdr-additional-info {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.layout-header-holder-bc {
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Ana slider (.slider-bc) - slide'lara inline width:430 verilmis,
   viewport 375'te yalpaliyor + swiper JS transform ile viewport
   disina kacan slide gostermeye calisiyor. Slide width'i viewport'a
   sabitle - transform hesabi da otomatik dogru olur. */
.slider-bc .swiper,
.slider-bc .swiper-wrapper {
  width: 100% !important;
  overflow: hidden !important;
}
.slider-bc .swiper .swiper-slide {
  width: 100% !important;
  flex-shrink: 0 !important;
}
/* Slider.js aktif olmayan slide'lari gizler; ilk slide gostermek icin
   ilk slide'a display:block garanti et. */
.slider-bc .swiper-slide.swiper-slide-active {
  display: block !important;
}

/* Genel slider container - hicbir carousel viewport'u tasmasin */
.carouselWrapper,
.carouselWrapper .swiper {
  max-width: 100% !important;
  overflow: hidden !important;
}
/* transform: none SADECE bilgi bari (informative-widget) icin -
   swiper JS yok, tek slide gosterilecek. Ana slider'da bu kural
   autoplay/swipe transform'unu ezerek slider'i sabitliyordu. */
.hdr-dynamic-content .carouselWrapper .swiper-wrapper {
  transform: none !important;
}

/* ---- Ozgun casino/slots design system uygulamasi ----
   Kaynak: kullanicinin paylastigi orijinal CSS - chip category
   navigation, provider items, casino grids, running line vb. */

/* Design tokens - Fluid Design System referans degiskenleri */
#component {
  --fds-ref-spacing-none: 0px;
  --fds-ref-spacing-4xsmall: 2px;
  --fds-ref-spacing-3xsmall: 4px;
  --fds-ref-spacing-2xsmall-nudge: 5px;
  --fds-ref-spacing-2xsmall: 6px;
  --fds-ref-spacing-xsmall: 8px;
  --fds-ref-spacing-medium: 12px;
  --fds-ref-spacing-large: 16px;
  --fds-ref-spacing-2xlarge: 24px;
  --fds-sem-dimension-4xlarge: 80px;
  --fds-sem-dimension-2xlarge: 56px;
  --fds-sem-dimension-xlarge: 48px;
  --fds-sem-dimension-large: 40px;
  --fds-sem-dimension-medium: 32px;
  --fds-sem-dimension-small: 24px;
  --fds-sem-dimension-xsmall-nudge: 20px;
  --fds-sem-dimension-xsmall: 16px;
  --fds-sem-dimension-2xsmall: 12px;
  --fds-ref-radius-full: 999px;
  --fds-ref-radius-medium: 12px;
  --fds-ref-radius-xsmall: 8px;
  --fds-ref-radius-3xsmall: 4px;
  --fds-ref-alpha-100: 1; --fds-ref-alpha-90: 0.9; --fds-ref-alpha-80: 0.8;
  --fds-ref-alpha-64: 0.64; --fds-ref-alpha-56: 0.56; --fds-ref-alpha-48: 0.48;
  --fds-ref-alpha-24: 0.24; --fds-ref-alpha-16: 0.16; --fds-ref-alpha-12: 0.12;
  --fds-ref-alpha-8: 0.08; --fds-ref-alpha-4: 0.04;
  --fds-ref-border-width-thin: 1px;
  --fds-ref-font-line-height-70: 14px;
  --fds-ref-font-line-height-80: 16px;
  --fds-ref-font-line-height-100: 20px;
  --fds-ref-font-line-height-120: 24px;
  --fds-ref-font-line-height-160: 32px;
  --fds-ref-font-size-50: 10px;
  --fds-ref-font-size-60: 12px;
  --fds-ref-font-size-70: 14px;
  --fds-ref-font-size-80: 16px;
  --fds-ref-font-size-120: 24px;
  --fds-ref-font-weight-regular: 400;
  --fds-ref-font-weight-medium: 500;
  --fds-ref-font-weight-semibold: 600;
  --fds-ref-letter-spacing-320: 0.4px;
}

/* Genel typo bilesenleri */
.ds-label { margin: 0; padding: 0; }
.ds-label.ds-label--medium-medium { font-weight: var(--fds-ref-font-weight-medium); font-size: var(--fds-ref-font-size-70); line-height: var(--fds-ref-font-line-height-100); }
.ds-label.ds-label--medium-regular { font-weight: var(--fds-ref-font-weight-regular); font-size: var(--fds-ref-font-size-70); line-height: var(--fds-ref-font-line-height-100); }
.ds-label.ds-label--small-regular { font-weight: var(--fds-ref-font-weight-regular); font-size: var(--fds-ref-font-size-60); line-height: var(--fds-ref-font-line-height-80); }
.ds-body.ds-body--large-medium { font-size: var(--fds-ref-font-size-80); font-weight: var(--fds-ref-font-weight-medium); line-height: var(--fds-ref-font-line-height-120); margin: 0; }
.ds-body.ds-body--medium-medium { font-size: var(--fds-ref-font-size-70); font-weight: var(--fds-ref-font-weight-medium); line-height: var(--fds-ref-font-line-height-100); margin: 0; }
.ds-caption { letter-spacing: var(--fds-ref-letter-spacing-320); margin: 0; padding: 0; }
.ds-caption--medium-medium { font-size: var(--fds-ref-font-size-50); line-height: var(--fds-ref-font-line-height-70); font-weight: var(--fds-ref-font-weight-medium); }
.ds-caption--medium-regular { font-size: var(--fds-ref-font-size-50); line-height: var(--fds-ref-font-line-height-70); font-weight: var(--fds-ref-font-weight-regular); }
.ds-caption--medium-semibold { font-size: var(--fds-ref-font-size-50); line-height: var(--fds-ref-font-line-height-70); font-weight: var(--fds-ref-font-weight-semibold); }
.ds-caption--large-medium { font-size: var(--fds-ref-font-size-60); line-height: var(--fds-ref-font-line-height-80); font-weight: var(--fds-ref-font-weight-medium); }
.typography-heading { font-weight: var(--fds-ref-font-weight-semibold); margin: 0; }
.typography-heading-5 { font-size: var(--fds-ref-font-size-120); line-height: var(--fds-ref-font-line-height-160); }

/* Chip - kategori sekmeleri */
.ds-chip {
  background: rgba(var(--b-sc), var(--fds-ref-alpha-8));
  color: rgba(var(--b-sc), var(--fds-ref-alpha-80));
  border-radius: var(--fds-ref-radius-full);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
  transition: box-shadow 0.2s;
}
.ds-chip.ds-chip-size--xs {
  gap: var(--fds-ref-spacing-4xsmall);
  min-width: 60px;
  padding: var(--fds-ref-spacing-3xsmall) var(--fds-ref-spacing-2xsmall);
}
.ds-chip.ds-chip-size--sm {
  gap: var(--fds-ref-spacing-3xsmall);
  min-width: 70px;
  padding: var(--fds-ref-spacing-xsmall) var(--fds-ref-spacing-medium);
}
.ds-chip.ds-chip-size--sm .chip__icon {
  width: var(--fds-sem-dimension-xsmall);
  height: var(--fds-sem-dimension-xsmall);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-chip.ds-chip-size--sm .chip__icon svg { width: 100%; height: 100%; display: block; }
.ds-chip.ds-chip--selected {
  background: rgba(var(--hero), var(--fds-ref-alpha-16));
  box-shadow: inset 0 0 0 var(--fds-ref-border-width-thin) rgba(var(--hero), 1);
}
.ds-chip.ds-chip-color--transparent.ds-chip--selected {
  background: rgba(var(--neutral), var(--fds-ref-alpha-90));
  color: rgba(var(--neutral-sc), var(--fds-ref-alpha-90));
}
.ds-chip.ds-chip--no-min-width { min-width: unset; }

/* Horizontal scroll container */
.horizontal-scroll {
  scroll-behavior: smooth;
  scrollbar-width: none;
  display: flex;
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }
.horizontal-scroll__inner {
  flex-shrink: 0;
  align-items: center;
  display: flex;
  transition: transform 0.3s;
}
.horizontal-scroll__inner--gap-xs { gap: var(--fds-ref-spacing-xsmall); }

/* Section title */
.sectionTitle {
  display: flex; flex-direction: row; align-items: center;
  min-height: var(--fds-sem-dimension-xsmall-nudge);
  max-height: var(--fds-sem-dimension-xsmall-nudge);
  gap: var(--fds-ref-spacing-xsmall);
  padding: 0 var(--fds-ref-spacing-xsmall);
}
.sectionTitleText {
  color: rgba(var(--b-sc), var(--fds-ref-alpha-90));
  flex: 1;
}

/* Link */
.ds-link {
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: color 0.2s, opacity 0.2s;
  position: relative;
}
.ds-link.ds-link-size--md { gap: var(--fds-ref-spacing-2xsmall); }
.ds-link.ds-link-size--md .link__icon { width: var(--fds-sem-dimension-xsmall-nudge); height: var(--fds-sem-dimension-xsmall-nudge); }
.ds-link.ds-link-color--transparent { color: rgba(var(--b-sc), var(--fds-ref-alpha-80)); }
.ds-link .link__icon.CMSIconSVGWrapper {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.ds-link .link__icon.CMSIconSVGWrapper svg { width: 100%; height: 100%; display: block; }
.ds-link .link__label { text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; overflow: hidden; }

/* Buttons */
.ds-btn {
  vertical-align: middle; cursor: pointer;
  justify-content: center; align-items: center;
  display: inline-flex; position: relative; overflow: hidden;
  transition: box-shadow 0.2s, filter 0.2s;
  border: 0;
}
.ds-btn.ds-btn-size--sm {
  height: var(--fds-sem-dimension-medium);
  min-width: var(--fds-sem-dimension-2xlarge);
  padding: var(--fds-ref-spacing-2xsmall) var(--fds-ref-spacing-large);
  gap: var(--fds-ref-spacing-2xsmall);
}
.ds-btn.ds-btn-size--md {
  height: var(--fds-sem-dimension-large);
  min-width: var(--fds-sem-dimension-4xlarge);
  padding: 0 var(--fds-ref-spacing-2xlarge);
  gap: var(--fds-ref-spacing-xsmall);
}
.ds-btn.ds-btn-variant--primary {
  background: rgba(var(--hero), 1);
  color: rgba(var(--hero-sc), 1);
}
.ds-btn.ds-btn-variant--transparent {
  background: rgba(var(--b-sc), var(--fds-ref-alpha-8));
  color: rgba(var(--b-sc), var(--fds-ref-alpha-90));
}
.ds-btn.ds-btn-radius--full { border-radius: var(--fds-ref-radius-full); }

/* Textfield */
.ds-textfield {
  gap: var(--fds-ref-spacing-3xsmall);
  flex-direction: column; width: 100%;
  display: inline-flex;
}
.ds-textfield__field {
  gap: var(--fds-ref-spacing-xsmall);
  cursor: text;
  border-radius: var(--fds-ref-radius-full);
  width: 100%; box-sizing: border-box;
  align-items: center; display: flex;
  position: relative; overflow: hidden;
  transition: background 0.2s, box-shadow 0.2s;
  background: rgba(var(--b-sc), var(--fds-ref-alpha-8));
  height: var(--fds-sem-dimension-large);
  padding: 0 var(--fds-ref-spacing-large);
}
.ds-textfield__text {
  align-items: center; display: flex;
  position: relative; overflow: hidden;
  flex: 1 0 0; align-self: stretch; min-width: 0;
}
.ds-textfield__label {
  font-weight: var(--fds-ref-font-weight-regular);
  color: rgba(var(--b-sc), var(--fds-ref-alpha-56));
  white-space: nowrap; text-overflow: ellipsis;
  pointer-events: none;
  position: absolute; top: 50%; left: 0; right: 0;
  overflow: hidden;
  transform: translateY(-50%);
  font-size: var(--fds-ref-font-size-70);
  line-height: var(--fds-ref-font-line-height-100);
}
.ds-textfield__input {
  all: unset;
  width: 100%;
  font-weight: var(--fds-ref-font-weight-medium);
  color: rgba(var(--b-sc), var(--fds-ref-alpha-80));
  white-space: nowrap; text-overflow: ellipsis;
  cursor: inherit; overflow: hidden;
  font-size: var(--fds-ref-font-size-70);
}
.ds-textfield__right {
  align-items: center; gap: var(--fds-ref-spacing-xsmall);
  flex-shrink: 0; display: flex;
}
.ds-textfield__right > .ds-textfield__icon {
  color: rgba(var(--b-sc), var(--fds-ref-alpha-56));
  width: var(--fds-sem-dimension-xsmall-nudge);
  height: var(--fds-sem-dimension-xsmall-nudge);
  flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center;
}
.ds-textfield__right > .ds-textfield__icon svg { width: 100%; height: 100%; }

/* Select */
.ds-select {
  gap: var(--fds-ref-spacing-3xsmall);
  flex-direction: column; width: 100%; min-width: 0;
  display: inline-flex; position: relative;
}
.ds-select__field {
  gap: var(--fds-ref-spacing-xsmall);
  cursor: pointer;
  border-radius: var(--fds-ref-radius-full);
  width: 100%; box-sizing: border-box;
  user-select: none;
  align-items: center; display: flex;
  position: relative; overflow: hidden;
  transition: background 0.2s;
  background: rgba(var(--b-sc), var(--fds-ref-alpha-8));
  height: var(--fds-sem-dimension-large);
  padding: 0 var(--fds-ref-spacing-large);
}
.ds-select__text {
  align-items: center; display: flex;
  position: relative; overflow: hidden;
  flex: 1 0 0; align-self: stretch; min-width: 0;
}
.ds-select__label {
  font-weight: var(--fds-ref-font-weight-regular);
  color: rgba(var(--b-sc), var(--fds-ref-alpha-56));
  white-space: nowrap; text-overflow: ellipsis;
  pointer-events: none;
  position: absolute; top: 50%; left: 0; right: 0;
  overflow: hidden; transform: translateY(-50%);
  font-size: var(--fds-ref-font-size-70);
  line-height: var(--fds-ref-font-line-height-100);
}
.ds-select__right {
  align-items: center; gap: var(--fds-ref-spacing-xsmall);
  flex-shrink: 0; display: flex;
}
.ds-select__field .ds-select__icon {
  color: rgba(var(--b-sc), var(--fds-ref-alpha-56));
  width: var(--fds-sem-dimension-xsmall-nudge);
  height: var(--fds-sem-dimension-xsmall-nudge);
  flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center;
}
.ds-select__field .ds-select__icon svg { width: 100%; height: 100%; }

/* CasinoGamesContainer - Ana wrapper */
.casinoGamesContainer {
  padding: 0;
}
.casinoNavigationAndFilters {
  flex-direction: column; display: flex;
  margin: var(--fds-ref-spacing-large) 0 var(--fds-ref-spacing-2xlarge) 0;
  gap: var(--fds-ref-spacing-3xsmall);
}
.casinoCategories { padding: var(--fds-ref-spacing-xsmall); }
.casinoGameProviderFilters {
  display: grid;
  padding: 0 var(--fds-ref-spacing-xsmall);
  gap: var(--fds-ref-spacing-xsmall);
  grid-template-columns: 1fr 1fr;
}
.casinoGameProviderFilters--withRandomGame { row-gap: var(--fds-ref-spacing-medium); }
.casinoSearchWrapper { position: relative; }
.casinoRandomGameButtonWrapper { grid-column: 1 / -1; }
.casinoRandomGameButtonWrapper .ds-btn { width: 100%; }

/* Casino game item */
.casinoGameItemContent {
  border-radius: var(--fds-ref-radius-xsmall);
  width: 100%; position: relative; overflow: hidden;
}
.casinoGameItemContent--regular { aspect-ratio: 44/31; }
.casinoGameItemBadgeContainer {
  top: var(--fds-ref-spacing-xsmall);
  right: var(--fds-ref-spacing-xsmall);
  z-index: 1; display: flex; position: absolute;
}
.casinoGameItem {
  background-color: rgba(var(--b-sc), var(--fds-ref-alpha-12));
  border-radius: var(--fds-ref-radius-xsmall);
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
}
.casinoGameItemImage {
  border-radius: var(--fds-ref-radius-xsmall);
  cursor: pointer; display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.24s;
}
.casinoGameItemImage--regular { aspect-ratio: 44/31; }
.casinoHorizontalGamesList {
  flex-direction: column; display: flex; overflow: hidden;
  gap: var(--fds-ref-spacing-xsmall);
}
.casinoHorizontalGamesListHorizontalScroll:not(.slideableCasinoGame) .casinoGameItemContent--regular {
  width: 150px;
}
.casinoHorizontalGamesListHorizontalScroll {
  padding: 0 var(--fds-ref-spacing-xsmall);
}
.casinoHorizontalGamesListHorizontalScroll .horizontal-scroll__inner { align-items: start; }
.casinoGamesWidget {
  flex-direction: column; display: flex; overflow: hidden;
  gap: var(--fds-ref-spacing-xsmall);
}

/* Provider items */
.casinoProvidersWidget {
  flex-direction: column; display: flex; overflow: hidden;
  gap: var(--fds-ref-spacing-xsmall);
}
.casinoProvidersWidgetHorizontalScroll { padding: 0 var(--fds-ref-spacing-xsmall); }
.providerItemsInner {
  width: 110px; min-width: 110px;
  height: var(--fds-sem-dimension-2xlarge);
  border-radius: var(--fds-ref-radius-3xsmall);
  background: rgba(var(--b-sc), var(--fds-ref-alpha-8));
  border: var(--fds-ref-border-width-thin) solid transparent;
  justify-content: center; align-items: center;
  display: flex; position: relative; overflow: hidden;
  transition: background 0.24s, border-color 0.24s;
}
.providerItemsBtn {
  text-align: center;
  padding: var(--fds-ref-spacing-2xsmall);
  color: rgba(var(--b-sc), var(--fds-ref-alpha-64));
  width: 100%; height: 100%;
  justify-content: center; align-items: center;
  display: flex; position: relative;
}
.providerItemsBtn .CMSIconSVGWrapper,
.providerItemsBtn svg {
  width: 100%; height: 100%;
}
.providerItemsBtn svg { display: block; }
.providerItemsBtn svg path {
  fill: rgba(var(--b-sc), var(--fds-ref-alpha-90));
  transition: fill 0.24s;
}
.providerBadge {
  pointer-events: none;
  z-index: 10; position: absolute; top: 1px;
}
.providerBadge .badge--sm:not(.badge--dot) {
  height: var(--fds-sem-dimension-2xsmall);
}

/* Badge (Ozel / Yeni) */
.badge {
  z-index: 4;
  border-radius: var(--fds-ref-radius-full);
  white-space: nowrap; user-select: none;
  justify-content: center; align-items: center;
  display: flex; position: absolute;
  transition: background-color 0.2s, transform 0.15s;
}
.badge--sm:not(.badge--dot) {
  height: var(--fds-sem-dimension-xsmall);
  min-width: var(--fds-sem-dimension-xsmall);
  padding: var(--fds-ref-spacing-4xsmall) var(--fds-ref-spacing-2xsmall-nudge);
}
.badge--lg:not(.badge--dot) {
  height: var(--fds-sem-dimension-small);
  min-width: var(--fds-sem-dimension-small);
  padding: var(--fds-ref-spacing-4xsmall) var(--fds-ref-spacing-2xsmall);
}
.badge--primary {
  background: rgba(var(--hero), 1);
  color: rgba(var(--hero-sc), 0.9);
}
.badge-standalone { display: inline-flex; }
.badge-standalone .badge {
  top: unset; right: unset;
  position: static;
}

/* Running line (En Yuksek Kazanclar) */
.runningLineWidget { position: relative; }
.runningLineWrapper {
  width: 100%; overflow: hidden;
  position: relative;
}
.runningLineWrapper.withShadows:before,
.runningLineWrapper.withShadows:after {
  content: ""; z-index: 1;
  height: 100%; width: 50px;
  position: absolute; top: 50%; bottom: 0;
  transform: translateY(-50%);
}
.runningLineWrapper.withShadows:before {
  background: linear-gradient(to right, rgba(var(--b), 1), rgba(var(--b), 0));
  left: 0;
}
.runningLineWrapper.withShadows:after {
  background: linear-gradient(to left, rgba(var(--b), 1), rgba(var(--b), 0));
  right: 0;
}
.runningLine {
  align-items: center; display: flex; gap: 8px;
}
.runningLine:not(.frozen) {
  animation: running-line-LTR 120s linear infinite;
}
@keyframes running-line-LTR {
  0%   { transform: translate(0); }
  100% { transform: translate(-50%); }
}
.casinoTopWinnersWidget {
  flex-direction: column; width: 100%;
  display: flex; overflow: hidden;
  gap: var(--fds-ref-spacing-medium);
}
.casinoTopWinnersWidgetTitle { flex: 1; }
.casinoTopWinnersWidgetHeader {
  justify-content: space-between; align-items: center;
  gap: var(--fds-ref-spacing-xsmall);
  padding-inline-end: var(--fds-ref-spacing-xsmall);
  display: flex;
}
.casinoTopWinnersPeriodsSection {
  justify-content: flex-end; align-items: center;
  gap: var(--fds-ref-spacing-2xsmall);
  display: flex;
  flex-shrink: 0;
}
.casinoWinnerWidgetItem {
  background: rgba(var(--b-sc), var(--fds-ref-alpha-8));
  border-radius: var(--fds-ref-radius-xsmall);
  align-items: center; display: flex;
  width: 180px !important;
  min-width: 180px;
  max-width: 180px;
  padding: var(--fds-ref-spacing-2xsmall);
  gap: var(--fds-ref-spacing-2xsmall);
  flex-shrink: 0;
}
.casinoWinnerWidgetImg {
  border-radius: var(--fds-ref-radius-3xsmall);
  width: var(--fds-sem-dimension-xlarge);
  height: var(--fds-sem-dimension-xlarge);
  flex-shrink: 0;
}
.casinoWinnerWidgetImg .casinoGameImageV2 { border-radius: inherit; }
.casinoWinnerWidgetInfo {
  gap: var(--fds-ref-spacing-4xsmall);
  flex-direction: column; flex: 1; min-width: 0;
  display: flex; overflow: hidden;
}
.casinoWinnerWidgetName,
.casinoWinnerWidgetGameName {
  color: rgba(var(--b-sc), var(--fds-ref-alpha-64));
}
.casinoWinnerWidgetAmount { color: rgba(var(--oc-2), 1); }
.casinoGameImageV2 {
  cursor: pointer;
  width: 100%; height: 100%;
  border-radius: var(--fds-ref-radius-xsmall);
  display: block; transition: filter 0.24s;
}
.casinoGameImageV2--rect { aspect-ratio: 1; }
.casinoGameImageV2--objectFit-cover { object-fit: cover; }

/* Tournaments widget */
.tournamentsWidget {
  flex-direction: column; display: flex;
  position: relative; overflow: hidden;
  gap: var(--fds-ref-spacing-xsmall);
}
.tournamentsHorizontalScroll { padding: 0 var(--fds-ref-spacing-xsmall); }
.tournamentsWidgetItem {
  flex-direction: column;
  display: flex;
  min-width: 340px; max-width: 340px;
  height: auto;
}
.tournamentsWidgetImgContent {
  border-radius: var(--fds-ref-radius-medium);
  aspect-ratio: 131 / 45;
  flex: 0 0 auto;
  position: relative; overflow: hidden;
}
.tournamentsWidgetImg {
  object-fit: cover;
  aspect-ratio: 131/45;
  width: 100%; height: 100%;
}
.tournamentsWidgetLive {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.tournamentsWidgetLive .badge--lg {
  position: static;
  padding: 4px 10px;
  min-height: 22px;
  font-size: 12px;
  line-height: 14px;
}
.tournamentsWidgetInfoContent {
  padding: var(--fds-ref-spacing-3xsmall);
  margin-top: -24px;
}
.tournamentsWidgetInfo {
  background: transparent;
  border-radius: var(--fds-ref-radius-medium);
  width: 100%; height: auto;
  z-index: 0;
  justify-content: flex-start; align-items: center;
  gap: 6px;
  padding: 10px 12px 12px;
  flex-direction: column;
  display: flex; position: relative;
  isolation: isolate;
}
.tournamentsWidgetName {
  font-size: 14px !important;
  line-height: 20px !important;
  color: #fff !important;
}
.tournamentsWidgetCounterValue,
.tournamentsWidgetCounterLabel {
  color: #fff !important;
}
.tournamentsWidgetAmountTitle {
  color: rgba(255, 255, 255, 0.6) !important;
}
.tournamentsWidgetCounter {
  min-width: 0 !important;
  padding: 4px 12px !important;
}
.tournamentsWidgetPrice {
  font-size: 22px !important;
  line-height: 28px !important;
}
.tournamentsWidgetInfoContent {
  margin-top: -28px !important;
}
.tournamentsWidgetName {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.tournamentsWidgetAmount {
  gap: 2px;
}
/* Frosted glass: info panelin arkaplanina blur uygula ki banner
   uzerine bindirilen alt kart orijinaldeki gibi "sise" gibi gorunsun. */
.tournamentsWidgetInfo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(35, 35, 35, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
  z-index: -1;
}
.tournamentsWidgetName {
  width: 100%;
  color: rgba(var(--b-sc), 1);
  text-align: center;
}
.tournamentsWidgetAmount {
  flex-direction: column; align-items: center;
  display: flex;
}
.tournamentsWidgetAmountTitle { color: rgba(var(--b-sc), var(--fds-ref-alpha-48)); }
.tournamentsWidgetPrice {
  color: rgba(var(--oc-2), 1);
  text-shadow: 0 0 30px rgba(var(--error), 1);
}
.tournamentsWidgetCounter {
  min-width: 180px;
  padding: var(--fds-ref-spacing-3xsmall) var(--fds-ref-spacing-large);
  white-space: nowrap;
  background: rgba(var(--static-black), var(--fds-ref-alpha-24));
  border-radius: var(--fds-ref-radius-xsmall);
  pointer-events: none;
  justify-content: center; align-items: center;
  display: flex;
}
.tournamentsWidgetCounterLabel {
  color: rgba(var(--static-white), var(--fds-ref-alpha-64));
  border-inline-end: 1px solid rgba(var(--static-white), var(--fds-ref-alpha-16));
  margin-inline-end: var(--fds-ref-spacing-xsmall);
  padding-inline-end: var(--fds-ref-spacing-xsmall);
}
.tournamentsWidgetCounterValue {
  color: rgba(var(--static-white), 1);
}
.tournamentsWidgetButtons {
  gap: var(--fds-ref-spacing-xsmall);
  width: 100%;
  display: flex;
}
.tournamentsWidgetButtons button { width: 100%; }

/* Genel hm-row-bc */
.hm-row-bc-inner { display: grid; }
.hm-row-bc {
  grid-auto-rows: 1fr;
  gap: 10px;
  display: grid;
}
.hm-row-bc + .hm-row-bc:has(.hm-row-bc-inner:not(:empty)) { margin-top: 10px; }
.hm-row-bc:first-child:has(.hm-row-bc-inner:not(:empty)) { margin-top: 5px; }
.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* CMSIconSVGWrapper */
.CMSIconSVGWrapper {
  flex-shrink: 0;
  justify-content: center; align-items: center;
  width: 16px; height: 16px;
  display: inline-flex;
}
.CMSIconSVGWrapper > svg {
  width: 100%; max-height: 100%;
  transition: all 0.24s;
}

/* casinoTopWinnersWidget - "En Yüksek Kazançlar" section.
   React runtime'da her live winner card ~90px height ile kompakt
   render olur; bizde CSS eksik, img'ler 440×310 natural boyutta
   tüm ekrani kapliyor. Kart formatina zorla. */
.casinoTopWinnersWidget {
  padding: 0;
  margin: 8px 0;
}
.casinoTopWinnersWidgetHeader {
  padding: 0 12px;
  margin-bottom: 8px;
}
.casinoTopWinnersWidgetTitle {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.casinoTopWinnersWidgetContent,
.casinoTopWinnersWidget .horizontal-scroll {
  display: flex;
  gap: 8px;
  padding: 0 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.casinoTopWinnersWidget .casinoTopWinnerCard,
.casinoTopWinnersWidget .casinoGameItem,
.casinoTopWinnersWidget [class*="TopWinner"]:not(.casinoTopWinnersWidget):not(.casinoTopWinnersWidgetHeader):not(.casinoTopWinnersWidgetTitle) {
  flex: 0 0 auto;
  width: 260px;
  min-height: 88px;
  max-height: 96px;
  background: rgba(var(--b), 1);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  display: flex !important;
  align-items: center;
  padding: 8px;
  gap: 10px;
  scroll-snap-align: start;
}
.casinoTopWinnersWidget img {
  max-width: 72px !important;
  max-height: 72px !important;
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  flex-shrink: 0;
}

/* Genel resim guvenlik agi - hicbir img viewport'tan tasmasin.
   React runtime tarafindan boyutlandirilan img'ler CSS eksikliginde
   natural boyutta cikip layout'i bozuyor. */
.layout-content-holder-bc img:not([class*="Wrapper"]) {
  max-width: 100%;
  height: auto;
}
/* Casino/spor kart image'lari - genellikle rented boyut zaten var,
   ancak eksik CSS senaryosunda kapak/cover davranisi. */
.casinoGameItem img,
.casinoGameItemImage img,
.casinoHorizontalGamesList img {
  max-width: 100%;
  object-fit: cover;
  display: block;
}

/* MENU item'i (generic-menu) main.css'te height:104 alarak bardan
   asagi tasiyor (bar 60px, item 104px). Bar icinde kalsin, yesil topak
   yukari tasarak orta ust'te dursun, yazi bar dibinde olsun. */
.tab-navigation-w-bc > .tab-nav-item-bc.generic-menu {
  height: 60px !important;
  overflow: visible !important;
  align-self: stretch !important;
  padding-top: 22px !important;
  padding-bottom: 6px !important;
}
.tab-navigation-w-bc > .tab-nav-item-bc.generic-menu > .genericMenuBurger {
  top: -22px !important;
}
.tab-navigation-w-bc > .tab-nav-item-bc.generic-menu > .tab-nav-title-bc {
  margin-top: 0 !important;
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
}

/* Header user-nav-icon'lar (bonus-casino, wallet, deposit vb.):
   ::before glyph baseline align'la display:block'ta merkezlenmiyor.
   Inline-flex + ortalanmis line-height ile glyph tam ortada olsun. */
.hdr-user-bc .user-nav-icon,
.hdr-user-bc .bc-i-deposit,
.hdr-user-bc .bc-i-wallet,
.hdr-user-bc .bc-i-bonus-casino,
.hdr-user-bc .bc-i-community,
.hdr-user-bc .bc-i-promotions,
.hdr-user-bc .bc-i-whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 24px;
  height: 24px;
  border-radius: 4px;
  vertical-align: middle;
}
.hdr-user-bc .user-nav-icon::before,
.hdr-user-bc .bc-i-deposit::before,
.hdr-user-bc .bc-i-wallet::before,
.hdr-user-bc .bc-i-bonus-casino::before,
.hdr-user-bc .bc-i-community::before,
.hdr-user-bc .bc-i-promotions::before {
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}
/* main.css whatsapp/promotions ikonlarina dis CDN URL'leri baglar +
   content:"" !important ile BC font glyph'ini eziyor. Dis CDN yerelde
   yok -> icon gorunmez. #component ID (specifity 1) + !important ile
   BC font glyph'lerine geri don. */
/* bc-i-whatsapp: canli sitede href=...selectedGroup=crypto - kripto rate
   chip'i. Kullanicidan alinan media_yuzde3.svg (animasyonlu SVG, "+3%")
   ile taklit et. Chip zemini transparent, sadece SVG. */
#component .hdr-additional-info .user-nav-icon.bc-i-whatsapp::before {
  content: "" !important;
  background: url('media_yuzde3.svg') center/contain no-repeat !important;
  color: transparent !important;
  width: 52px !important;
  height: 26px !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* bc-i-promotions: kullanicidan alinan yerel PNG hediye ikonu
   (assets/media_1476_851da6e8c43600af3a8f2801764f2fa4.png). Chip
   yesil zemin, PNG ortada goruntulenir. */
#component .hdr-additional-info .user-nav-icon.bc-i-promotions::before {
  content: "" !important;
  background: url('media_1476_851da6e8c43600af3a8f2801764f2fa4.png') center/contain no-repeat !important;
  transform: none !important;
  width: 18px !important;
  height: 18px !important;
  top: 0 !important;
  left: 0 !important;
  display: inline-block !important;
  color: transparent !important;
  font-size: 0 !important;
}
#component .hdr-additional-info .user-nav-icon.bc-i-bonus-casino::before {
  content: "\e9bf" !important;
  font-family: 'BetConstruct-Icons' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #000 !important;
  display: inline-block !important;
}
#component .hdr-additional-info .user-nav-icon.bc-i-wallet::before {
  content: "\e918" !important;
  font-family: 'BetConstruct-Icons' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #000 !important;
  display: inline-block !important;
}
/* Ikon capsule: yesil chip zemin (whatsapp/promotions/bonus-casino/wallet) */
#component .hdr-additional-info .user-nav-icon.bc-i-whatsapp,
#component .hdr-additional-info .user-nav-icon.bc-i-promotions,
#component .hdr-additional-info .user-nav-icon.bc-i-bonus-casino,
#component .hdr-additional-info .user-nav-icon.bc-i-wallet {
  background: #00e600 !important;
  color: #000 !important;
  min-width: 28px !important;
  width: 28px !important;
  height: 22px !important;
  border-radius: 3px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  margin: 0 !important;
}
/* Kripto rate chip: SVG bg, biraz daha buyuk */
#component .hdr-additional-info .user-nav-icon.bc-i-whatsapp {
  min-width: 52px !important;
  width: 52px !important;
  padding: 0 !important;
  background: transparent !important;
  height: 26px !important;
}
/* Diger chip ikonlari kucuk font */
#component .hdr-additional-info .user-nav-icon.bc-i-promotions::before,
#component .hdr-additional-info .user-nav-icon.bc-i-bonus-casino::before,
#component .hdr-additional-info .user-nav-icon.bc-i-wallet::before {
  font-size: 13px !important;
}
/* Container: sol yaslama, cok kucuk gap (1px) - referansdaki gibi.
   Sol kenardan biraz mesafe icin padding-left artirilmis. */
#component .hdr-additional-info .hdr-user-bc {
  padding: 4px 8px 4px 0 !important;
  gap: 1px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
/* Bir de her a > a arasi margin sifir kesin */
#component .hdr-additional-info .hdr-user-bc > a + a {
  margin-inline-start: 0 !important;
}
#component .hdr-additional-info {
  height: auto !important;
  min-height: 28px !important;
}
#component .hdr-additional-info .hdr-user-bc {
  display: flex !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
/* header-bc position:fixed + overflow:hidden auto -> altina koydugumuz
   .hdr-additional-info clip'leniyor. Overflow'u ac, height'i icerik
   kadar birak (min-height dayatma - fazla bosluk yaratir). */
#component .header-bc {
  height: auto !important;
  overflow: visible !important;
}

/* ================================================
   AUTHENTICATED HEADER - login sonrasi gorunum
   (kripto btn, bakiye, avatar, KAPAT>> expanded)
   ================================================ */

/* Para birimi kucuk chip'i (logonun yaninda) */
#component .header-bc .hdr-crypto-btn {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  margin-inline-start: 6px;
  cursor: pointer;
}
#component .header-bc .hdr-crypto-btn .currency-control-symbol-wrp {
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
#component .header-bc .hdr-crypto-btn .currency-control-symbol-letter {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700;
  width: auto !important;
  height: auto !important;
  line-height: 1;
}
#component .header-bc .hdr-crypto-btn .wallet-button-arrow {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 8px !important;
  font-family: 'BetConstruct-Icons' !important;
  font-style: normal;
}
#component .header-bc .hdr-crypto-btn .wallet-button-arrow.bc-i-small-arrow-down::before {
  content: "\e5cf";
  font-family: 'BetConstruct-Icons' !important;
}
#component .header-bc .hdr-crypto-btn .hdr-crypto-info {
  display: none;   /* Simdilik cripto rate placeholder gizli */
}

/* Bakiye + avatar container */
#component .header-bc.is-authenticated .hdr-main-content-bc > .hdr-user-bc {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-inline-start: 6px;
}
#component .header-bc .user-balance-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
#component .header-bc .user-balance-dropdown .nav-menu-item {
  display: flex;
  align-items: center;
  color: inherit;
}
#component .header-bc .hdr-user-info-content-bc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#component .header-bc .hdr-user-info-texts-bc {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
#component .header-bc .hdr-user-info-balance {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700;
  font-size: 13px;
}

/* Kullanici avatar (kirmizi glow) */
#component .header-bc .profileDetails {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
#component .header-bc .profileDetails .hdr-user-avatar-icon-bc {
  font-family: 'BetConstruct-Icons' !important;
  font-style: normal;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}
#component .header-bc .profileDetails .hdr-user-avatar-icon-bc.bc-i-user::before {
  content: "\e919";
  font-family: 'BetConstruct-Icons' !important;
}
#component .header-bc .profileDetails .user-not-verified {
  color: #ff3449 !important;
  text-shadow:
    0 0 8px #ff3449,
    0 0 14px rgba(255, 52, 73, 0.6);
}
#component .header-bc .profileDetails .user-verified {
  color: #00e600 !important;
  text-shadow:
    0 0 12px #109121,
    0 0 20px #109121;
}

/* KAPAT >> genisletilmis satir - additional-info altina */
#component .header-bc.is-authenticated .hdr-additional-info .isExpandedIcons {
  display: flex !important;
  z-index: 9;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(35, 35, 35, 1);
  width: 100%;
  height: 40px;
  padding: 0 8px;
  position: relative;
  align-items: center;
  gap: 4px;
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpanded {
  flex: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpanded > span {
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.9);
  margin-inline-end: 4px;
  font-size: 13px;
  font-weight: 500;
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpandedIcons {
  display: flex;
  align-items: center;
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpandedIcons i {
  font-family: 'BetConstruct-Icons' !important;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpandedIcons i:first-child {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpandedIcons i:last-child {
  margin-inline-start: -6px;
  font-size: 10px;
}
#component .header-bc.is-authenticated .hdr-additional-info .headerExpandedIcons i.bc-i-small-arrow-right::before {
  content: "\e5cc";
  font-family: 'BetConstruct-Icons' !important;
}
/* Collapsed durum: KAPAT satiri gizli, chip'ler acik */
#component .header-bc.is-authenticated .hdr-additional-info .isExpandedIcons.is-collapsed .headerExpanded > span {
  content: "AÇ";
}

/* CUZDANI BAGLA butonu hdr-crypto-content icinde */
#component .header-bc.is-authenticated .hdr-crypto-content {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 8px;
  display: flex !important;
  justify-content: center;
}
#component .header-bc.is-authenticated .hdr-crypto-content > .btn.connect-wallet {
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  width: auto;
  min-width: 200px;
  color: #000;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  border: 0;
}
#component .header-bc.is-authenticated .hdr-crypto-content > .btn.connect-wallet:hover {
  background: rgba(229, 229, 229, 1);
}

/* Auth header - Guest'e ozgu GIRIS/KAYIT butonlarini sifirla */
#component .header-bc.is-authenticated .btn.sign-in,
#component .header-bc.is-authenticated .btn.register {
  display: none !important;
}

/* === ⋮ toggle butonu (smart-panel'i acan yuvarlak buton) === */
#smart-panel-holder.hdr-toggle-button-bc {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin-inline-start: 8px !important;
  flex-shrink: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 14px !important;
  display: flex !important;
  position: relative !important;
  cursor: pointer;
  transition: background 0.2s;
}
#smart-panel-holder.hdr-toggle-button-bc:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
#smart-panel-holder.hdr-toggle-button-bc::before {
  font-family: 'BetConstruct-Icons' !important;
  content: "\ea1d" !important;
  font-style: normal;
  transition: transform 0.24s;
}
/* Panel acikken toggle vurgulu */
#smart-panel-holder.is-open {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* === Smart Panel (⋮ toggle ile acilir sag dikey panel) === */
.hdr-smart-panel-holder-arrow-bc {
  display: none;
  position: fixed;
  top: 60px;
  right: 6px;
  z-index: 99998;
  background: rgba(35, 35, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: smart-panel-slide 0.2s ease-out;
}
.hdr-smart-panel-holder-arrow-bc.open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
@keyframes smart-panel-slide {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0);   }
}
.hdr-smart-panel-holder-bc {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  align-items: center;
}
.hdr-smart-panel-holder-bc > .sp-button-bc {
  background: transparent !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 !important;
  border-radius: 6px;
  transition: background 0.2s;
}
.hdr-smart-panel-holder-bc > .sp-button-bc:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.hdr-smart-panel-holder-bc .sp-button-icon-bc {
  font-family: 'BetConstruct-Icons' !important;
  font-style: normal;
  font-size: 20px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: inline-block;
}
.hdr-smart-panel-holder-bc .sp-button-icon-bc.bc-i-notification::before {
  content: "\e94e" !important;
  font-family: 'BetConstruct-Icons' !important;
}
.hdr-smart-panel-holder-bc .sp-button-icon-bc.bc-i-favorite::before {
  content: "\e6df" !important;
  font-family: 'BetConstruct-Icons' !important;
}
.hdr-smart-panel-holder-bc .sp-button-icon-bc.bc-i-settings::before {
  content: "\e96a" !important;
  font-family: 'BetConstruct-Icons' !important;
}
.hdr-smart-panel-holder-bc .sp-button-icon-bc.bc-i-live-chat::before {
  content: "\ea1b" !important;
  font-family: 'BetConstruct-Icons' !important;
}
.hdr-smart-panel-holder-bc .sp-button-icon-bc.bc-i-betslip::before {
  content: "\e936" !important;
  font-family: 'BetConstruct-Icons' !important;
}
.hdr-smart-panel-holder-bc .sp-button-content-text-bc {
  display: none;
}
/* Footer holder React app'te display:none + grid-row:0px. Statik klonda
   footer icerigi (linkler, licenses, payment, copyright) her sayfada
   gorunmeli - grid tam genislik + auto height + display block. */
#root .layout-footer-holder-bc {
  display: block !important;
  grid-column: 1 / -1 !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}
#root.layout-bc {
  grid-template-rows: 49px auto auto auto auto 60px !important;
}
#component .hdr-additional-info {
  overflow: visible !important;
  height: auto !important;
}
/* (Eski duplicate kural silindi - yeni kompakt boyut yukarida) */
.tab-navigation-w-bc {
  background: rgba(var(--header), 1);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0 4px;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  height: 60px !important;
  overflow: visible !important;
}
.tab-navigation-w-bc > .tab-nav-item-bc {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 20% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 2px !important;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.tab-navigation-w-bc > .tab-nav-item-bc.active,
.tab-navigation-w-bc > .tab-nav-item-bc:hover {
  color: rgba(var(--brand), 1);
}
.tab-navigation-w-bc > .tab-nav-item-bc > i,
.tab-navigation-w-bc > .tab-nav-item-bc > .genericMenuBurger {
  font-size: 20px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}
.tab-navigation-w-bc .tab-nav-title-bc {
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: inherit;
}

/* Ortadaki MENU item'ini floating action button gibi buyut, uste tasit */
.tab-navigation-w-bc > .tab-nav-item-bc.generic-menu {
  overflow: visible !important;
}
.tab-navigation-w-bc > .tab-nav-item-bc.generic-menu > .genericMenuBurger {
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(var(--brand), 1) !important;
  color: rgba(var(--brand-sc), 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}
.tab-navigation-w-bc > .tab-nav-item-bc.generic-menu > .tab-nav-title-bc {
  margin-top: 32px !important;
}

/* count/badge indicator (CANLI 'nin 250 badge'i) - absolute konumlanmali,
   yoksa akista yer kaplayip item'i buyutuyor. */
.tab-navigation-w-bc > .tab-nav-item-bc.count-odd-animation::after,
.tab-navigation-w-bc > .tab-nav-item-bc[data-badge]::after {
  position: absolute !important;
  top: 2px !important;
  right: 8px !important;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: rgba(var(--brand), 1);
  color: rgba(var(--brand-sc), 1);
  font-size: 9px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Masaustu footer'i mobil viewport'ta gizle */
[class*="is-mobile"] .layout-footer-holder-bc {
  display: none;
}

/* Alt bar yuksekligi kadar layout icerigi altta bosluk birak */
.layout-content-holder-bc {
  padding-bottom: 70px;
}