/* ───────────────────────────────────────────────────────────────── * bs-live-portrait-fix.css — ITER 394 (BS-PARALEL TIPATIP) * ───────────────────────────────────────────────────────────────── * v4.0 (2026-05-12, ITER 394): "bs ile tıpatıp aynı" — full BS-paralel * reset of CANLI CASINO OYUNLARI section based on LIVE BS measurement * (m.bahissende302.com/tr/ @scrollY=900, hm-row-bc[5], DPR=1.25). * * Numeric evidence (rule #20, rule #119 no-guess): * * PROPERTY BS LIVE MR PRE-v4.0 FIX * ───────────────────────────────────────────────────────────────────── * section.bg transparent rgb(10,10,20) §9 transparent * section.padding 0 6px 0 6px 2px 10px 4px 10px §9 0 6px * section.margin 12px 0 8px 0 12px 0 12px 0 (browser default OK) * section.border none none ✓ * title.render ::before (CSS) HTML

OK (text node) * title.fontSize 15px 16px §7 15px * title.fontWeight 700 800 §7 700 * title.letterSpacing 0.5px 0.3px §7 0.5px * title.color rgb(255,255,255) rgb(255,255,255) ✓ * title.textTransform none (already upper) uppercase (functionally =) * cards.gap 10px 8px §8 10px * cards.padding 0 10px 16px 4px 0 6px §8 0 10px 16px * card.bg transparent rgb(0,0,0) §1 transparent * card.border 0 0.8px rgba255/.04 §1 0 * card.br 10px 10px ✓ * card.overlay (info) NONE (img-only DOM) flex grad overlay §4 hide on live * img.objectFit cover cover ✓ * img.objectPosition 50% 50% (center) 50% 0% (top) §2 50% 50% * pulse-dot NONE (no element) 9×9 red livePulse §17 REMOVED * scroll-indicator NONE (no ::after) gold linear-grad §16 REMOVED * "Tümünü Gör" NONE present (hidden) ✓ §15 hidden + markup removed * * Decision rationale: User said "hangisi daha iyise öyle yap. bs ile * tıpatıp aynı olacak şekilde karar ver". v3.9-v3.11 custom features * (pulse dot + gold indicator + section dark bg) were MR-only additions * that diverge from BS reference. Tıpatıp = strict BS parity → remove * all MR-only chrome, keep portrait card geometry (140×188 was already * BS-correct), tighten typography to BS exact values. * * Markup also updated: frontend-astro/src/components/HomeBackdrop.astro * .bs-live-dot and .bs-live-viewall elements REMOVED from * SSR output (DOM parity rule #99). Crash section markup retains * .bs-crash-icon (separate path, kept for the lightning bolt — itself * suppressed by §13 anyway). * * Override registry status: AI_USER_OVERRIDES.md ITER 391+392+393 overrides * for v3.9/v3.10 (pulse dot, scroll indicator, dark section bg) are now * REVERTED per explicit user directive 2026-05-12 ("bs ile tıpatıp aynı" * takes precedence over earlier "scroll indicator bahissende de açıkça * gözüküyor" feedback — re-measurement showed BS has no ::after on * .hm-row-bc[5] section. The earlier user feedback was likely about a * different BS section or a rendering glitch). * * Rules: #20, #30, #34, #50, #99, #119, #121, #156, #158, #159. * ───────────────────────────────────────────────────────────────── */ /* ── §1. Card geometry — 140×188 BS-exact, NO bg, NO border ── * BS: background transparent, border 0 (img is full-bleed visual). * MR pre-v4.0 had #000 bg + 0.8px subtle border (chrome). Strip both. */ html.mobile-root body.mobile-site section.bs-live-section .bs-live-cards .game-item, html.mobile-root body.mobile-site section.bs-live-section .bs-live-cards .game-cta, html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-item, html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-cta { width: 140px !important; height: 188px !important; min-width: 140px !important; min-height: 188px !important; flex: 0 0 140px !important; aspect-ratio: 140 / 188 !important; position: relative !important; overflow: hidden !important; background: transparent !important; border-radius: 10px !important; border: 0 !important; box-shadow: none !important; } /* ── §2. Image full-bleed; object-position 50% 50% (BS CENTER, not top). * BS measure: object-position computed = "50% 50%" → image centered * vertically, dealer face/wheel center in frame. MR pre-v4.0 used * "center top" (50% 0%) which clipped lower detail. */ html.mobile-root body.mobile-site section.bs-live-section .bs-live-cards .game-item img, html.mobile-root body.mobile-site section.bs-live-section .bs-live-cards .game-cta img, html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-item img, html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-cta img { width: 140px !important; height: 188px !important; object-fit: cover !important; object-position: 50% 50% !important; display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; border-radius: 10px !important; } /* ── §3. Hide favorites star + info button (BS: no overlay buttons) ── */ html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-fav, html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-info-btn { display: none !important; } /* ── §4. Hide .game-card-info bottom gradient overlay. * BS measure: card child tree is single — no text overlay at all * (game name + provider are baked into the 800×1076 artwork). * MR markup keeps .game-card-info element for compatibility with other * grids (slot section), but on bs-live-section it must be invisible to * avoid double-text stack against the baked artwork. */ html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-card-info, html.mobile-root body.mobile-site section.bs-live-section .bs-live-cards .game-card-info { display: none !important; } /* ── §7. Section title typography — BS-EXACT 15px/700/0.5px ── * BS ::before pseudo on .hm-row-bc[5]: fontSize 15, fontWeight 700, * letterSpacing 0.5px, color white. MR pre-v4.0 was 16/800/0.3px. * Specificity ladder kept (0,6,0) to beat home-deep-fixes.css legacy. */ html.mobile-root body.mobile-site .bs-live-section.bs-live-section.bs-live-section .bs-live-title.bs-live-title.bs-live-title, html.mobile-root body.mobile-site section.bs-live-section.bs-live-section.bs-live-section .bs-live-title.bs-live-title.bs-live-title, html.mobile-root body.mobile-site .bs-live-section.bs-live-section.bs-live-section .bs-live-header-left .bs-live-title.bs-live-title.bs-live-title, html.mobile-root body.mobile-site section.bs-live-section.bs-live-section.bs-live-section .bs-live-header .bs-live-title.bs-live-title.bs-live-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; line-height: 1.2 !important; color: #ffffff !important; text-transform: uppercase !important; padding: 0 10px 8px 0 !important; margin: 0 !important; } /* ── §8. Cards row — gap 10px, padding 0 10px 16px (BS-EXACT) ── * BS .product-banner-container-bc.col-4.product-banner-without-titles: * gap=10px, padding=0 10px 16px 10px, display=flex, overflow=auto (h-scroll). * MR pre-v4.0 had gap 8px + padding 4px 0 6px (custom). */ html.mobile-root body.mobile-site .bs-live-section.bs-live-section.bs-live-section .bs-live-cards.bs-live-cards.bs-live-cards, html.mobile-root body.mobile-site section.bs-live-section.bs-live-section.bs-live-section .bs-live-cards.bs-live-cards.bs-live-cards { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; padding: 0 10px 16px 10px !important; margin: 0 !important; /* v4.1 (2026-05-12): scrollbar-width: thin to keep gold thumb visible. * Firefox honors scrollbar-width + scrollbar-color. WebKit/Blink handled * by ::-webkit-scrollbar* rules below. BS reference (m.bahissende302.com) * extracted: row's native horizontal scrollbar restyled with 4px height, * gold gradient thumb, faint gold track. Prior v4.0 hid scrollbar * entirely (display:none + scrollbar-width:none) by mistake. */ scrollbar-width: thin !important; scrollbar-color: rgb(212, 175, 55) rgba(212, 175, 55, 0.15) !important; } /* ── §8a. Gold horizontal scrollbar (BS-EXACT, extracted 2026-05-12) ── * Source: BS m.bahissende302.com .layout-content-holder-bc > * .hm-row-bc:nth-child(5) .product-banner-container-bc * ::-webkit-scrollbar* (live casino row). * Effect: 4px-tall gold gradient horizontal scrollbar visible below * the card row, showing scroll position as user pans. * MR adapted selector: .bs-live-section:not(.bs-crash-section) * .bs-live-cards. */ html.mobile-root body.mobile-site .bs-live-section:not(.bs-crash-section) .bs-live-cards::-webkit-scrollbar { height: 4px !important; display: block !important; } html.mobile-root body.mobile-site .bs-live-section:not(.bs-crash-section) .bs-live-cards::-webkit-scrollbar-track { background: rgba(212, 175, 55, 0.15) !important; border-radius: 2px !important; } html.mobile-root body.mobile-site .bs-live-section:not(.bs-crash-section) .bs-live-cards::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgb(184, 148, 31), rgb(212, 175, 55), rgb(232, 201, 74), rgb(212, 175, 55), rgb(184, 148, 31)) !important; border-radius: 2px !important; } html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-item { scroll-snap-align: start !important; } /* ── §9. Section background — TRANSPARENT (BS-EXACT) + padding 0 6px ── * BS .hm-row-bc[5]: background transparent (no bg-color, no bg-image), * border none, border-radius 0, padding 0 6px 0 6px. * MR pre-v4.0 had #0a0a14 solid + 12px 10px padding. Strip both. */ html.mobile-root body.mobile-site section.bs-live-section.bs-live-section.bs-live-section, html.mobile-root body.mobile-site .bs-live-section.bs-live-section.bs-live-section { background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; padding: 0 6px 0 6px !important; margin: 12px 0 8px 0 !important; position: relative !important; } /* ── §10. Suppress legacy .bs-crash-section ::after gradient * bs-crash-section-parity.css §6 stacks a 28% bottom fade pseudo- * element on each crash card. Hide it to keep parity with live row. */ html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item::after, html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta::after { content: none !important; display: none !important; background: none !important; opacity: 0 !important; } /* ── §13. Hide lightning bolt ⚡ on crash section header (BS-paralel: BS * renders plain "HIZLI KAZANÇ OYUNLARI" header with no icon). */ html.mobile-root body.mobile-site .bs-crash-section .bs-crash-icon { display: none !important; } /* ── §15. Hide "Tümünü Gör" link — markup removed in HomeBackdrop.astro * but rule retained as defense-in-depth (in case any cached SSR * output or legacy build retains the element). */ html.mobile-root body.mobile-site .bs-live-section .bs-live-viewall, html.mobile-root body.mobile-site .bs-live-section .bs-live-header .bs-live-viewall, html.mobile-root body.mobile-site section.bs-live-section .bs-live-viewall, html.mobile-root body.mobile-site section.bs-live-section .bs-live-header .bs-live-viewall, html.mobile-root body.mobile-site .bs-live-section a.bs-live-viewall, html.mobile-root body.mobile-site .bs-crash-section .bs-live-viewall, html.mobile-root body.mobile-site section.bs-crash-section .bs-live-viewall { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; opacity: 0 !important; } /* ── §17. Hide .bs-live-dot — markup removed in HomeBackdrop.astro, * rule retained as defense-in-depth. BS has no pulse dot on the * CANLI CASINO OYUNLARI title. */ html.mobile-root body.mobile-site .bs-live-section .bs-live-dot, html.mobile-root body.mobile-site section.bs-live-section .bs-live-dot, html.mobile-root body.mobile-site .bs-live-section .bs-live-header-left .bs-live-dot { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; animation: none !important; } /* ── §18. Section header layout — tight to top, no extra padding. */ html.mobile-root body.mobile-site .bs-live-section.bs-live-section.bs-live-section.bs-live-section .bs-live-header.bs-live-header, html.mobile-root body.mobile-site section.bs-live-section.bs-live-section.bs-live-section.bs-live-section .bs-live-header.bs-live-header, html.mobile-root body.mobile-site .bs-live-section.bs-live-section.bs-live-section.bs-live-section .bs-live-header-left.bs-live-header-left { padding: 0 !important; margin: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; } /* ── §14. Reduced motion bypass (was §11) ── */ @media (prefers-reduced-motion: reduce) { html.mobile-root body.mobile-site .bs-live-section .bs-live-cards { scroll-snap-type: none !important; } }