/*
 * category-banners-show.css
 * --------------------------------------------------------------
 * Anasayfa quick-link kart grid'i (rb-category-banners — 8 kart:
 * PARA YATIR / PARA ÇEK / BONUS TALEP / SLOT / SPOR / TELEGRAM /
 * PROMOSYONLAR / CANLI TV) görünür hale getirir.
 *
 * Kullanıcı talimati 2026-04-27: "meritroyalde sliderin altındaki
 * bu bölüm kaybolmuş" — theme-robinbet-mobile.css'te eski
 * `display: none !important` rule'u bu grid'i gizliyor.
 *
 * Selector specificity (rule #151 mirror): max specificity ile
 * `display: grid !important` override + 4-column layout (BS-paralel
 * screenshot'a göre 4 sütun × 2 satır).
 *
 * Owner: bu dosya only (rule #30) — theme-robinbet-mobile.css'e
 * dokunulmaz, son-yüklenen override yöntemi.
 * --------------------------------------------------------------
 */

/* Specificity bump (.foo.foo trick) — theme cascade override garantili */
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners,
html.mobile-root body.mobile-site .rb-mobile-content-wrapper .rb-category-banners.rb-category-banners,
body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 8px !important;
  margin: 0 auto !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

html.mobile-root body.mobile-site .rb-category-banners > .rb-cat-banner,
html body.mobile-site .rb-category-banners > .rb-cat-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 8px !important;
  padding: 10px 4px !important;
  gap: 6px !important;
  height: 92px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html.mobile-root body.mobile-site .rb-category-banners > .rb-cat-banner > .rb-cat-icon-img,
html body.mobile-site .rb-category-banners > .rb-cat-banner > .rb-cat-icon-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  display: block !important;
}

html.mobile-root body.mobile-site .rb-category-banners > .rb-cat-banner > .rb-cat-label,
html body.mobile-site .rb-category-banners > .rb-cat-banner > .rb-cat-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  letter-spacing: 0.3px !important;
}

@media (max-width: 359px) {
  html.mobile-root body.mobile-site .rb-category-banners,
  html body.mobile-site .rb-category-banners {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  html.mobile-root body.mobile-site .rb-category-banners > .rb-cat-banner,
  html body.mobile-site .rb-category-banners > .rb-cat-banner {
    height: 80px !important;
  }
}

/* =============================================================
 * ITER 332 — BS-paralel quick-link tile grid (no right-edge clipping)
 * --------------------------------------------------------------
 * Universal 4-col grid using minmax(0, 1fr) — fits 320/375/400/414/440
 * viewport without overflow. Replaces any fixed-width tile (theme-
 * robinbet-mobile.css line 10564 has `repeat(4, 57px)` + width: 57px
 * which causes right-edge clipping on viewports < 252px-wide content).
 *
 * Specificity strategy (rule #38 ladder):
 *   `html.mobile-root body.mobile-site` + chained `.rb-category-banners`
 *   x3 (specificity bump) — wins over theme-robinbet 4-col fixed-px rule.
 *
 * Owner: category-banners-show.css ONLY (rule #30).
 * Trigger: rule #151 (universal viewport coverage), rule #133+ (4col).
 * --------------------------------------------------------------
 */
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners,
body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 8px 8px !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-category-banner,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-tile,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners > a,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners > .rb-cat-banner,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .category-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: unset !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
}

html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-category-banner-icon,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-tile-icon,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-cat-icon-img,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners img {
  width: clamp(28px, 9vw, 44px) !important;
  height: auto !important;
  max-width: 100% !important;
}

html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-category-banner-label,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-tile-label,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners .rb-cat-label,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners span {
  font-size: clamp(8px, 2.4vw, 11px) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

@media (min-width: 414px) {
  html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners,
  body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners {
    gap: 8px !important;
    padding: 8px 10px !important;
  }
}

/* ITER 332 — Hero slider counter BS-paralel position (only if slider present) */
html.mobile-root body.mobile-site .hero-swiper .swiper-pagination-fraction,
body.mobile-site .hero-swiper .swiper-pagination-fraction {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 8px !important;
  z-index: 5 !important;
  width: auto !important;
  left: auto !important;
}
/* END ITER 332 ============================================== */

/* =============================================================
 * ITER 341 — D5 tile grid BS-paralel correction (logged-in home)
 * --------------------------------------------------------------
 * Live measurement (BS m.bahissende302 vs MR m.meritroyalvip753, 392vp logged-in):
 *   BS .product-banner-container-bc.col-4: gap 8px, padding 0,
 *     tile 89×95.4, border 0 none, border-radius 12px
 *   MR .rb-category-banners (pre-341): gap 6px, padding 8px,
 *     tile 89.5×92, border 0.8px solid rgba(212,175,55,0.1),
 *     border-radius 8px (gold ring + 8px corners + tighter gap)
 *
 * Fix targets (BS-paralel):
 *   - container gap: 6 → 8 (universal, override @media gate from ITER 332)
 *   - container padding: 8 → 0 (BS has no container chrome)
 *   - tile border: 1px gold ring → 0 none (BS has no border)
 *   - tile border-radius: 8 → 12 (rounder corners, BS-paralel)
 *   - tile height: 92 → 95.4 (drop aspect-ratio 1/1, use explicit BS height)
 *   - tile padding: keep 10px 4px (label fit needs vertical breathing room)
 *
 * Specificity ladder (rule #38): 4-chain `.rb-category-banners` selector
 * to win over both ITER 332 (3-chain) and theme-robinbet line 10782
 * (html.mobile-root body.mobile-site .rb-category-banners — 1-chain).
 *
 * Owner: category-banners-show.css ONLY (rule #30).
 * Trigger: rule #158 (visual render layer parity), rule #34 (full-scroll
 * audit), ITER 337 cert D5 — kullanıcı 2026-05-08 directive.
 * ============================================================= */
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners.rb-category-banners,
body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners.rb-category-banners {
  gap: 8px !important;
  padding: 0 !important;
}

html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners > .rb-cat-banner,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners > a,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners > .rb-category-banner,
html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners > .category-item {
  border: 0 none !important;
  border-radius: 12px !important;
  height: 95.4px !important;
  aspect-ratio: auto !important;
  background: rgba(0, 0, 0, 0.45) !important;
}

@media (min-width: 414px) {
  html.mobile-root body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners.rb-category-banners,
  body.mobile-site .rb-category-banners.rb-category-banners.rb-category-banners.rb-category-banners {
    gap: 8px !important;
    padding: 0 !important;
  }
}
/* END ITER 341 ============================================== */