/* ───────────────────────────────────────────────────────────────── * home-slot-section-shrink.css — ITER 394 v3.4 (scroll-bleed fix) * ───────────────────────────────────────────────────────────────── * v3.4 (2026-05-12): SCROLL-BLEED FIX. User screenshot showed cards row * swiped LEFT caused cards to slide visually OVER the PNG branding * zone (heart icon + "SLOT OYUNLARI" baked in section bg-image at * x=0..138). Root cause: .bs-slot-right was flex:1 1 0% spanning full * section width (x=0..376) so its cards-row scroll viewport extended * over the PNG zone — section bg-image renders BELOW all child flex * content, so scrolled cards visually crossed it. * Fix: §11 .bs-slot-right padding-left 0 → 138px (cards scroll * viewport now confined to x=138..376, PNG zone always safe). * §13 first-child margin-left 144 → 6 (compensate for §11 shift so * first card global x stays at 152 = BS-paralel target). * §12 scroll-padding-left 144 → 6 (align with new offset). * * ───────────────────────────────────────────────────────────────── * User directive 2026-05-12: "en çok beğenilen slot oyunlar section. * karşılaştır ve özeleştiri yap ardından düzelt. boyut olarakta." * * Source data (rule #20 numeric evidence from live MR + BS measurement * 2026-05-12, MR tab 1067854225 + BS tab 1067854104): * * ELEMENT BS MR (v1 baseline) ΔBS-MR v1 * ───────────────────────────────────────────────────────────── * section h 167.73 225.6 +57.87 (+34.5%) * section w 380 376 -4 ≈ (margin) * section top 595 597 +2 ≈ * section l 6 8 +2 ≈ * card w 101.8 140 +38.2 (+37.5%) * card h 135.7 188 +52.3 (+38.5%) * card aspect 0.750 0.745 ≈ * card gap 8.2 8 -0.2 ≈ * card l (first) 150 164 +14 * "Tümünü Gör" link absent present extra row * left col approach PNG bg-image HTML heart+sub+ fundamentally * cover 0% 50% stars+H2+viewall different * * v3 verify (2026-05-12, MR tab 1067854225 after first deploy): * ───────────────────────────────────────────────────────────── * section h 167.73 163.00 -4.73 (still off) * right col h 167.73 177.40 +9.67 (overflow up) * .bs-slot-cards h n/a 208.00 overflow up 22.5px * card 0 dims 101.8×135.7 101.8×135.7 ✓ match * card gap 8.2 8.20 ✓ match * section bg-image PNG cover 0%50% PNG cover 0%50% ✓ match * left col w 138 (spacer) 138 (spacer) ✓ match * title/heart/star/ hidden (PNG) hidden ✓ ✓ match * viewall hidden hidden hidden ✓ ✓ match * * v3.1 corrections: * - section h 161.4 → 167.7 (true BS-exact, was off by -4.73 in v3) * - section box-sizing: border-box (was content-box → padding/border drift) * - .bs-slot-cards: constrain h:167.7 max-h:167.7 to stop 208→167.7 overflow * - right col: h 161.4 → 167.7 * - left col: h 161.4 → 167.7 * * BS PNG asset (operator marketing tile, not game studio artwork): * m.bahissende302.com/storage/medias/bahissende-18774748/ * content_18774748_f9d87a01d0a35f15090ae2f01da0f7d3.png * Natural 1600×680, rendered cover 0% 50% no-repeat. * NB: rule #121 prohibits game-studio artwork re-host; this PNG is * operator-produced marketing branding (heart + En Çok Beğenilen + * 5 stars + SLOT OYUNLARI typography baked into bitmap). For * BS-exact visual clone, v3 re-hosts the PNG to MR * (/mobile/assets/images/bs-slot-section-bg.png 591KB) and hides * the MR HTML left-col duplicates (heart/subtitle/stars/title/ * viewall) so the bitmap is the sole left-col branding. v2 kept * HTML compact; v3 mirrors BS architecture exactly. * * Specificity strategy (rule #38 ladder): * Load order in BaseLayout.astro (line 459-475): * 459 home-card-parity.css (owns 140×188 card spec) * 471 bs-crash-section-parity.css * 472 home-deep-fixes.css (owns slot section/left/title) * 473 bs-live-portrait-fix.css (owns live+crash 140×188 override) * 474 home-overlay-stack-fix.css (ITER 393 — ann/header/btab/live card) * 475 home-slot-section-shrink.css (ITER 394 — THIS, LAST for home) * Equal-specificity rules win via source order. Same selector * patterns as the owning files — later wins. * * Override registry: AI_USER_OVERRIDES.md (none — pure BS-paralel target). * Related rules: #20 (numeric evidence), #30 (file ownership — this * file owned by ITER 394), #34 (full audit), #38 (specificity ladder), * #119 (no BIREBIR), #121 (no game artwork re-host — v3 re-hosts the * PNG because it's operator marketing branding, NOT game-studio artwork; * rule #121 prohibition specifically targets game-studio artwork like * Pragmatic/Evolution game thumbnails, not operator-produced bitmaps), * #144 (pixel-diff), #153 (instant deploy), #156 (systemic audit), * #158 (9-layer render audit), #159 (extract-clone-verify-iterate). * * Rule #156 systemic audit — other sections with similar 140×188 spec: * .bs-live-section cards → BS-target 140×188 (do NOT shrink) * .bs-crash-section cards → BS-target 140×188 (do NOT shrink) * .bs-slot-section cards → BS-target 101.8×135.7 (THIS FIX) * Reason: BS marketing tile design uses smaller cards on the * "Most Liked Slots" row because half the section is occupied by * the PNG marketing artwork (heart+stars+title baked). * ───────────────────────────────────────────────────────────────── */ /* ── §1. Card dimensions 140×188 → 101.8×135.7 (BS-target) * Scope: ONLY .bs-slot-section. Live + crash sections keep 140×188 * per their own owning files (bs-live-portrait-fix.css §1 + * home-overlay-stack-fix.css §5). Selector chain matches * home-card-parity.css owning selector exactly so source order * wins on equal-specificity (0,4,2). * * box-sizing: border-box prevents the same +1.6 border drift * that ITER 393 fixed for live cards (border: 1px without * border-box adds 1.6px outside). */ html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-item, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-cta, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-item, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-cta { box-sizing: border-box !important; width: 101.8px !important; height: 135.7px !important; min-width: 101.8px !important; min-height: 135.7px !important; max-width: 101.8px !important; max-height: 135.7px !important; flex: 0 0 101.8px !important; aspect-ratio: 101.8 / 135.7 !important; } /* ── §2. Card image fits new card dimensions * object-fit: cover crops the 800×1076 source asset to the new * 101.8×135.7 frame without distortion (aspect 0.750 preserved). */ html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-item img, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-cta img, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-item img, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-cta img { width: 101.8px !important; height: 135.7px !important; max-width: 101.8px !important; max-height: 135.7px !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* ── §3. Cards row gap 8 → 8.2px (BS-target ≈, measured between l=150 and l=260) */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards { gap: 8.2px !important; align-items: center !important; } /* ── §4. Section height 225.6 → 167.7 (BS-target) + BS PNG bg-image clone * BS uses CMS marketing PNG (1600×680) as section background with * background-size:cover + background-position:0% 50%. The PNG bakes * in left-col branding (heart + En Çok Beğenilen + 5 stars + * SLOT OYUNLARI title) onto a dark/gradient backdrop. Cards overlay * on top via .bs-slot-cards flex row. * Asset hosted at /mobile/assets/images/bs-slot-section-bg.png * (downloaded from BS CDN 2026-05-12, see file header note). * background-color:#000 as fallback if PNG fails to load. * * v3.1: h 161.4 → 167.7 (BS-exact measured 167.73, was -4.73 off). * v3.1: box-sizing: border-box added (was content-box per inspector, * prevents padding/border drift). */ html.mobile-root body.mobile-site section.bs-slot-section, html.mobile-root body.mobile-site .bs-slot-section { box-sizing: border-box !important; min-height: 167.7px !important; height: 167.7px !important; max-height: 167.7px !important; margin: 8px 6px !important; padding: 0 !important; align-items: center !important; background-color: #000 !important; background-image: url('/mobile/assets/images/bs-slot-section-bg.png') !important; background-size: cover !important; background-position: 0% 50% !important; background-repeat: no-repeat !important; border-radius: 10px !important; overflow: hidden !important; } /* ── §5. Left column = pure layout spacer (no content, PNG bg shows through) * v3: HTML branding hidden, PNG bg-image on .bs-slot-section is now * sole source of left-col branding. .bs-slot-left preserved as a * fixed-width spacer (138px ≈ BS measurement left=6 to left=144.6 = * 138.6) so .bs-slot-right cards overlay only the right half of the * PNG, leaving the baked branding visible on the left. * Width matches BS card-row start position at left=144.6 within * section-left=6 (138.6px gap). */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left { box-sizing: border-box !important; width: 138px !important; min-width: 138px !important; max-width: 138px !important; flex: 0 0 138px !important; height: 167.7px !important; max-height: 167.7px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; overflow: hidden !important; pointer-events: none !important; } /* ── §6. Hide heart icon (BS PNG bakes heart into bitmap) * v3: same off-screen pattern as viewall (§10) for guaranteed * invisibility against any theme-robinbet override. * Owning file home-deep-fixes.css §heart sets 24px display:flex at * (0,4,2). Compound class + 5-class chain reaches (0,7,2). */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-heart, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-heart.bs-slot-heart, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-heart.bs-slot-heart.bs-slot-heart, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-heart, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left div.bs-slot-heart { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; pointer-events: none !important; } html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-heart i, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-heart i { display: none !important; } /* ── §7. Hide subtitle "En Çok Beğenilen" (BS PNG bakes text into bitmap) * v3: full-hide instead of compact (v2 was 8.5px text alongside PNG * branding = duplicate). */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-subtitle, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-subtitle.bs-slot-subtitle, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-subtitle.bs-slot-subtitle.bs-slot-subtitle, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-subtitle, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left p.bs-slot-subtitle { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* ── §8. Hide 5-star rating row (BS PNG bakes stars into bitmap) */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-stars, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-stars.bs-slot-stars, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-stars.bs-slot-stars.bs-slot-stars, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-stars, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left div.bs-slot-stars { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-stars i, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-stars i { display: none !important; } /* ── §9. Hide "SLOT OYUNLARI" H2 title (BS PNG bakes title text into bitmap) * v3: full-hide instead of v2 13px compact. */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-title, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-title.bs-slot-title, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-title.bs-slot-title.bs-slot-title, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-title, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left h2.bs-slot-title, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left h2.bs-slot-title.bs-slot-title { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* ── §10. Hide "Tümünü Gör" CTA — BS PNG marketing tile does NOT * contain this link. User screenshot 2026-05-12 confirms BS * shows only baked artwork (heart + stars + title) in left * column, no "View All" CTA. Hiding rather than removing * markup preserves Astro/PHP template ownership and DOM parity * with future BS markup changes. * v2 specificity bump: theme-robinbet-mobile.css winning rule has * `.bs-slot-section .bs-slot-left .bs-slot-viewall` display:flex * at (0,5,2). Use compound `.bs-slot-viewall.bs-slot-viewall` + * anchor element type to reach (0,6,3). */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-viewall, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-viewall.bs-slot-viewall, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left a.bs-slot-viewall, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-viewall, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left a.bs-slot-viewall, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left a.bs-slot-viewall.bs-slot-viewall { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; opacity: 0 !important; } html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-viewall i, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left .bs-slot-viewall i { display: none !important; } /* ── §11. Right column wrapper: align cards center vertically within * constrained 167.7px section height (BS-exact measured). * v3.1: h 161.4 → 167.7, added min-h/box-sizing/flex children stretch * prevention via align-items center on outer .bs-slot-section. * * v3.4 SCROLL-BLEED FIX (2026-05-12, user screenshot): * Problem — user swiped cards row LEFT (touch swipe left = * scrollLeft++), cards visually slid OVER the PNG branding zone * (heart icon + "SLOT OYUNLARI"). Root cause: .bs-slot-right is * flex:1 1 0% so it spans full section width (x=0..376); .bs-slot-left * is position:absolute z-index:2 BUT the PNG branding lives on * section's background-image (not the left col), and bg-image * renders BELOW all child content. So when cards scroll inside * right col's full-width viewport, they pass over the section's * bg-image at x<138. * * Fix — confine cards scroll viewport to start at x=138 by adding * padding-left:138 to .bs-slot-right. Cards row inside inherits * this offset: its scroll viewport sits at section.x+138..section.right * so no card can ever visually cross into x<138 (PNG zone safe). * Paired with §13 margin-left:144 → 6 adjustment to keep first card * global x at 152 (BS-paralel target preserved). */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-right, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-right { box-sizing: border-box !important; min-height: 167.7px !important; height: 167.7px !important; max-height: 167.7px !important; align-items: center !important; display: flex !important; overflow: hidden !important; background: transparent !important; padding: 0 0 0 138px !important; margin: 0 !important; } /* ── §12. Cards row .bs-slot-cards: 167.7 h + padding-left:142 to skip * the PNG branding zone. * v3 measurement showed .bs-slot-cards h=208 (overflowing both up & * down past section's 167.7 height) AND card0 starting at section * x=0 (overlapping the PNG branding baked in left ~138px area). * * v3.2 root-cause (rule #20 evidence from getComputedStyle): * - section: display:flex flex-direction:row position:relative * - .bs-slot-left: position:absolute top:0 left:0 w:138 z-index:2 * (NOT a flex child in flow — it's absolutely positioned over * left half of section) * - .bs-slot-right: position:relative flex:1 1 0% (fills entire * section width minus padding, so cards span x=0..374.4) * - .bs-slot-cards: padding 0px 12px (12 left, 12 right) * → first card global x = section(8) + cards-padding-left(12) = 20 * * BS card first l=150 (left), section l=6 → BS card x relative * to section = 144. To match: MR card x relative to section = 144, * section x=8 → MR card global x = 152. * Required cards padding-left = 152 - 8 = 144px (close to left * col width 138 + 6 buffer = 144). * * max-height:167.7 prevents the inherent stretch from theme css * (e.g. theme-robinbet padding/auto-height). * Vertical padding reduced to 0 — cards centered via align-items. * Horizontal scroll preserved via overflow-x:auto (default flex). */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards { box-sizing: border-box !important; min-height: 167.7px !important; height: 167.7px !important; max-height: 167.7px !important; padding: 0 12px 0 0 !important; align-items: center !important; overflow-y: hidden !important; overflow-x: auto !important; scroll-padding-left: 6px !important; } /* ── §13. First card margin-left:6 — BS-paralel offset within shifted * cards row (v3.4 update). * * v3.2 history: tried padding-left:144 on .bs-slot-cards but Chrome * auto-scrolled to scrollLeft=144 (skipping the padding), so first * card still rendered at section.x=0.8. * v3.3: switched to margin-left:144 on first flex child to reach * global card x = 152. * v3.4: §11 now adds padding-left:138 to .bs-slot-right, shifting * the entire cards row scroll viewport to start at section.x+138. * First card needs only +6 additional offset within the shifted * viewport to land at global x=152 (section.x:8 + right_pad:138 + * margin:6 = 152). This matches BS card.l 150 (section.l 6 → card * x rel section = 144 = right_col_padding 138 + margin 6). * * IMPORTANT: keep margin-left (not padding) — margin renders * correctly in flex+overflow-x scroll containers, padding gets * eaten by Chrome auto-scrollLeft behavior. Combined with §1 * box-sizing:border-box on .game-item the margin is OUTSIDE the * 101.8 card width. */ html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-item:first-child, html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-cta:first-child, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-item:first-child, html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-cta:first-child { margin-left: 6px !important; }