:root {
  --mobile-top-bar-height: 46px;
  --mobile-header-height: 166px;
  --mobile-footer-height: 48px;
  --tab-navigation-height: 48px;
  --padding-page-aside: 10px;
}

/*
 * Sağdaki siyah şerit: masaüstü .mainMenu / .footer-scroll için kullanılan
 * 100vw + calc(50% - 50vw) trick’i mobilde (scrollbar, iç içe genişlik) taşma/boşluk bırakır.
 * Mobil şablonda tam genişlik her zaman %100 + margin 0 olmalı.
 */
body.mobile-site .mainMenu {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto;
  right: auto;
}

body.mobile-site .footer-scroll {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tablet header.css: .mainMenu::after sağ kenar gradyanı — mobil şablonda istenmez */
body.mobile-site .mainMenu::after {
  content: none !important;
  display: none !important;
}

/* html şeffaf kaldığında boşluklar siyah görünebiliyor; body ile aynı tema */
html {
  background-color: var(--body-bg, #0f0522);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * global.css html/body overflow-x:hidden, position:sticky ile çakışıp .mobileHeader’ın
 * sayfayla birlikte kaybolmasına yol açabiliyor (Chrome / Safari). Mobilde clip kullan.
 */
html.mobile-root {
  overflow-x: clip;
  /* Referans (m.casinomilyon) ile aynı taban ölçek: Android font inflation'ı önler */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*
   * Üstte ince çizgi: varsayılan html/body (#0f0522) ile header (#0e0124) farkı.
   * Mobil kökte html zemini header ile aynı tona çekilir.
   */
  background-color: var(--headerBG, #0e0124);
}

body.mobile-site {
  width: 100%;
  margin: 0;
  overflow-x: clip;
  padding-bottom: 0;
  /* Gövde taban rengi header ile hizalı — sticky/saç teli arasında body-bg sızmaz */
  background-color: var(--headerBG, #0e0124);
  /* İçerik (header + slider hariç): sağ/sol hafif boşluk — .home-hero-slider aşağıda dengeleme ile tam genişlik */
  --mobile-page-gutter: 12px;
}

/*
 * position:sticky header'ı bozan ata overflow-x:hidden düzeltmesi.
 * bc-mobile-maltabet.css #root ve .layout-content-holder-bc'ye overflow-x:hidden veriyor;
 * bu ata elemanları scroll container yapıp header'ın sayfayla kaybolmasına yol açıyor.
 * clip yatay taşmayı yine engeller ama scroll container oluşturmaz → sticky çalışır.
 */
body.mobile-site #root,
body.mobile-site #root.layout-bc,
body.mobile-site #root .layout-content-holder-bc {
  overflow-x: clip !important;
}

body.mobile-site .mainContentWrap {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: visible;
  max-width: 100%;
}

body.mobile-site .mainContentWrap .home-hero-slider,
body.mobile-site .home-hero-slider {
  margin-top: 0 !important;
}

/* Hero slider: yalnızca ana sarıcı padding’i sıfırla — üst header şeridi etkilenmez */
body.mobile-site .mainContentWrap .home-hero-slider {
  margin-left: calc(-1 * var(--mobile-page-gutter));
  margin-right: calc(-1 * var(--mobile-page-gutter));
  width: calc(100% + 2 * var(--mobile-page-gutter));
  max-width: none;
  box-sizing: border-box;
}

.centerWrap {
  padding: 10px 0 20px;
  margin: 0;
}

/* Taşındı: assets/css/site-responsive.css — yalnızca m. şablonu (masaüstü responsive.css’te yok) */

@media (max-width: 992px) {
  .container {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .search-box {
    top: 61px;
  }

  .search-box .listProvider ul li {
    width: 23%;
  }

  .headBar {
    border-bottom: 1px solid #110329;
    min-height: var(--mobile-header-height);
    padding: 0;
  }

  .headLogo {
    height: 38px;
    margin: 5px 0;
  }

  .sidebarMain .sideScroll {
    width: 100%;
    padding: 0 15px;
  }

  .docButton .btn {
    margin-left: 5px;
  }

  .mainMenu {
    margin-top: 0;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mainMenu ul::-webkit-scrollbar {
    display: none;
  }

  body.mobile-site .mainMenu ul li a {
    font-size: 11px;
    padding: 9px 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8) !important;
    letter-spacing: 0.065em;
  }

  body.mobile-site .mainMenu ul li a i,
  body.mobile-site .mainMenu ul li a .menuIconImg {
    display: none;
  }

  body.mobile-site .mainMenu ul li a .CMSIconSVGWrapper {
    display: inline-flex !important;
  }

  .mainMenu sup {
    right: -20px;
  }

  .sidebarMain {
    width: 220px;
    top: 80px;
    height: calc(100dvh - 70px);
  }

  .innerSearch .form-control {
    height: 35px;
    font-size: 12px;
  }

  .balText,
  .depositBtn {
    padding: 0.3rem 0.4rem;
    margin: 0 0 0 0.3rem;
    font-size: 10px;
    height: 30px;
  }

  .reslogoRow {
    margin: 0 0 20px;
  }

  .playerNav {
    min-width: 200px;
    right: -0.5em;
  }

  .playerNav .pl-link {
    font-size: 12px;
    font-weight: 400;
    padding: 5px 10px;
  }

  .topGateway .gateBox .gateBTN .fa {
    width: 33px;
  }

  .eventTabs .nav-pills .nav-link {
    padding: 0.4rem 1rem;
  }

  .innerSearch .input-group {
    width: 250px;
  }

  .bonusDetail .table thead th span {
    white-space: nowrap;
  }
}

@media (max-width: 830px) {
  .selectCurrency .dropdown-item {
    width: 95%;
  }

  .row {
    margin: 0 -5px;
  }

  .container-fluid {
    padding: 0 5px;
  }
}

@media (max-width: 767px) {
  .search-box .listProvider ul li {
    width: 30%;
  }

  .search-box .listProvider {
    height: 300px;
  }

  .container {
    padding-right: 5px;
    padding-left: 5px;
  }

  .mainWrap {
    display: block;
  }

  .headerItem .loginCol .btn-warning {
    font-size: 12px;
  }

  .headerItem .loginCol {
    margin: 0;
  }

  .headerItem .playerCol {
    margin: 0;
  }

  .headerItem .langSelect {
    display: none;
  }

  .headerItem .currentTime {
    display: none;
  }

  .sidebarMain {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 35px 10px 35px;
    background: var(--headerBG);
  }

  .sidebarMain .close {
    font-size: 14px;
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: center;
    color: var(--white-color);
  }

  .sidebarMain .sideSports {
    margin-top: 20px;
  }

  header.headBar .disclamer {
    padding: 20px 20px;
  }

  .filter-rowreverse-style-col .sidebarMain.sideFilter .sideSports {
    margin-top: 6px;
  }

  .filter-rowreverse-style-col .sidebarMain.sideFilter .sideSports ul {
    padding-bottom: 4px;
  }

  .eventTabs .nav-link {
    padding: 0.6rem 1rem;
    font-size: 12px;
  }

  .reslogoRow .resLogo {
    margin: 0 5px 0;
    display: inline-block;
  }

  .tableFilter .form-group {
    width: 48.5%;
    margin: 0 0 0.8rem;
  }

  .loginModal .modal-content {
    height: 100vh;
  }

  .loginModal .close {
    font-size: 2rem;
    color: rgba(var(--textwhite), 0.6);
    padding: 10px 13px !important;
    text-shadow: none;
  }

  .loginModal .modal-body {
    padding: 15px 0px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    height: calc(97vh - 160px);
    min-height: 300px;
  }

  .selectCurrency .dropdown-item {
    width: 46.5%;
  }

  .depositRow .amoutvalue li {
    margin: 0 0 5px;
  }

  .amoutvalue .btn {
    padding: 3px 5px;
  }

  .table-responsive {
    min-height: calc(100dvh - 370px);
  }

  .withdraw-deposit-ui .table-responsive {
    min-height: calc(100dvh - 430px);
  }

  .topGateway .gateBox .gateBTN .fa {
    height: 22px;
    width: 25px;
  }

  .reslogoRow {
    justify-content: center;
  }

  .footerRow .copytext {
    margin: 0;
  }

  .tabsRow {
    right: 52px;
    margin: 3.5px 0 0;
  }

  .loginModal .row.justify-content-center.mb-5 .col-12 {
    padding: 0;
  }

  .loginModal .row.justify-content-center.mb-5 {
    margin: 0;
  }

  .loginModal .col-12.col-md-6 {
    padding: 0 7px;
  }

  .centerWrap.porfileWrap {
    padding: 0 0 0 0;
  }

  .playerNav {
    width: 100%;
  }

  .playerNav .mobile-section {
    display: block;
    width: 100%;
  }

  .playerNav .mobile-section .pl-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 4px;
  }

  .playerNav .mobile-section .pl-link i,
  .playerNav .mobile-section .pl-link .mobileHeaderIcon {
    margin-right: 8px;
    flex-shrink: 0;
  }

  .playerNav .mobile-section .pl-link span,
  .playerNav .mobile-section .pl-link b {
    flex: 1;
    text-align: left;
    display: inline-block;
  }

  #comm100-button-b6cb9628-fd1c-4462-bc36-bb069145836b iframe {
    right: -6px !important;
    bottom: 28px !important;
  }

  .playersidebarMain {
    display: none !important;
  }

  /* Profil modalı içinde hub menüsü (sidebar) mobilde görünür kalmalı. */
  .profile-modal__content .playersidebarMain,
  .profile-modal__content .sidebarMain.playersidebarMain {
    display: block !important;
  }

  .deposit-listing i.fa.h5 {
    font-size: 17px;
  }

  .picture-function .btn {
    padding: 9px 8px;
  }

  app-g5-navigation-sidebar {
    display: none;
  }

  app-player-sidebar app-g5-navigation-sidebar {
    display: block;
  }

  .sidebarMain .langSelect .dropdown-menu {
    transform: translate3d(0px, 28px, 0px) !important;
    width: 100%;
    margin: 0px !important;
    left: 0 !important;
  }

  .sidebarMain .langSelect.dropdown .dropdown-toggle {
    border: 1px solid var(--secondary);
    padding: 9px 10px !important;
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: var(--white-color) !important;
  }

  .sidebarMain .langSelect.dropdown {
    padding: 0;
    margin: 0;
    border: 0px;
  }

  .sidebarMain .langSelect .dropdown-toggle::after {
    top: 6px;
  }

  .innerSearch .input-group {
    max-width: 100%;
    width: 100%;
    flex-direction: row-reverse;
  }

  .smallModal .modal-body {
    padding: 15px 7px;
    max-height: calc(100vh - 160px);
  }

  .loginModal.smallModal .modal-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 1.8rem 14px;
    justify-content: center;
  }

  .loginModal.smallModal .modal-footer .btn-primary {
    max-width: 47%;
    justify-content: center;
    display: flex;
  }

  .filterTab .arrowTabs {
    display: none;
  }

  .filterTab ul {
    width: 100%;
  }

  .filterTab ul li a {
    display: flex;
    flex-direction: column;
    text-transform: capitalize;
    align-items: center;
    min-width: 80px;
    height: 60px;
    font-size: 10px;
  }

  .filterTab ul li a i {
    margin: 0px;
    height: 28px;
    font-size: 28px;
  }

  .filterTab ul .position-sticky {
    left: 0;
    z-index: 1;
  }

  .filterTab {
    margin: 0 0 0.8rem;
  }

  .breadcrumb {
    margin-top: 10px;
  }

  .filterTab.porviderTabs .mobilePaddingLeft-0 {
    padding-left: 0;
  }

  .sidebarMain .headerSocialIcon {
    padding-top: 20px;
    justify-content: center;
  }

}

@media (max-width: 480px) {
  .search-box .listProvider ul li {
    width: 46%;
  }
}

@media (max-width: 340px) {
  .balText,
  .depositBtn {
    font-size: 10px;
    padding: 0.3rem 0.2rem;
    margin: 0 0 0 0.2rem;
  }

  .loginModal .modal-body {
    padding: 0 10px;
  }
}

/* Promosyonlar: kategori şeridinin üstündeki fazla boşluk (.centerWrap padding + boş router-outlet) */
body.mobile-site .page-promotions .centerWrap {
  padding-top: 0;
  margin-top: 0;
}

body.mobile-site .page-promotions router-outlet {
  display: none !important;
}

body.mobile-site .page-promotions app-promotions-bonus,
body.mobile-site .page-promotions app-g6-promotions-bonus {
  display: block;
}

body.mobile-site .page-promotions .container-fluid > .row:first-child {
  margin-top: 0;
}

body.mobile-site .page-promotions .bonusRow {
  margin-top: 0;
}