/* =============================================================
* home-card-parity.css
* --------------------------------------------------------------
* Hibrit BS-paralel kart layout (rule #30 dosya sahipliği):
* - bs-slot-section / bs-live-section / bs-crash-section
* - Yalnızca bu dosya bu sectionların görsel özelliklerini
* BS slot/live-casino sayfasındaki .casinoGameItem kart
* stilinden ödünç alarak hizalar.
* - Mevcut feature'lar (h-scroll, scroll-snap, "Tümünü Gör",
* "En Çok Beğenilen" badge, MR-only header, kalp ikonu)
* KORUNUR — sadece kart visual prop ve hover state hizalanır.
* - theme-robinbet-mobile.css ve slot-card-bs-exact.css'e
* dokunulmaz (rule #30).
* - Game artwork bulk-copy yapılmaz (rule #121).
* --------------------------------------------------------------
* Ölçüm tarihi: 2026-04-26
* BS slot card: 171.40 × 120.75, br 8px, bg rgba(255,255,255,0.1)
* .casinoGameItem hover -> aktif state mevcut (hover/active class)
* MR cards (önce): 100×132 / 140×220, br 10px, bg #000 / #121212
* --------------------------------------------------------------
* Specificity: html.mobile-root body.mobile-site … !important
* bayrağı yalnızca theme-robinbet'in yüksek specifik kuralları
* üzerinde çalışmak için kullanılır (rule #38).
* ============================================================= */
/* -----------------------------------------------------------
* 1) BS-paralel kart yüzey rengi + border-radius
* ----------------------------------------------------------- */
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,
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,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-cta,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta {
/* BS .casinoGameItem yüzey rengi (theme-robinbet'in --card-bg !important'ını override eder) */
background-color: rgba(255, 255, 255, 0.05) !important;
background-image: none !important;
background: rgba(255, 255, 255, 0.05) !important;
/* BS .casinoGameItem br: 8px (MR önce 10px → 8px) */
border-radius: 8px !important;
/* BS .casinoGameItem'da border yok */
border: none !important;
outline: none;
/* Smooth hover transition (rule #115 ease parity) */
transition: background-color 0.24s ease,
transform 0.24s ease,
box-shadow 0.24s ease !important;
will-change: transform;
}
/* Görsel de aynı 8px br'a hizalanır → parent overflow zaten kırpıyor */
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,
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,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-item img,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-cta img,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item img,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta img {
border-radius: 8px !important;
object-fit: cover !important;
}
/* -----------------------------------------------------------
* 2) BS-paralel hover/active state
* BS .casinoGameItem.hover.active sınıflarıyla yüzey
* aydınlanır; MR'da pointer ile aynı davranış simüle edilir.
* ----------------------------------------------------------- */
@media (hover: hover) {
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-item:hover,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-cta:hover,
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-item:hover,
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-cta:hover,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item:hover,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta:hover {
background-color: rgba(255, 255, 255, 0.10);
transform: translateY(-1px);
}
}
/* Active (touch press) — KART HİÇ BLURLAŞMAZ
* Kullanıcı talimati 2026-04-27: 'basılı tutup sürükleyince blurlaşıyor — hiç olmasın'.
* Önceki transform: scale(0.98) + bg-tint scroll-drag sırasında active state tetikleyip
* kart küçültme + transition smoothing → pixel grid kayma → blur hissi yaratıyordu.
* Çözüm: active'de transform yok + transition transform yok + GPU layer promote
* (translateZ(0)) + image-rendering crispEdges. */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-item:active,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-cta:active,
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-item:active,
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards .game-cta:active,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item:active,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta:active {
transform: none !important;
background-color: rgba(255, 255, 255, 0.05) !important;
}
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,
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,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta {
transition: background-color 0.18s ease !important;
transform: translateZ(0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
filter: none !important;
}
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,
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,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item img,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta img {
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
filter: none !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
/* -----------------------------------------------------------
* 3) Section başlık tipografisi — BS-paralel weight 500
* BS slot/casino sayfasında kategori başlık fw ~500
* MR'da bs-live-section / bs-crash-section title 14px/600 olduğu için
* sadece weight'i 500'e çekiyoruz (BS uniform), bs-slot-section'ın
* daha büyük 22px/600 başlığını override ETMİYORUZ (MR-spesifik
* "SLOT OYUNLARI" hero başlığı, scope dışı).
* ----------------------------------------------------------- */
html.mobile-root body.mobile-site .bs-live-section .bs-live-title,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-title {
font-weight: 500;
letter-spacing: 0.4px;
}
/* -----------------------------------------------------------
* 4) Sub-pixel polish — toFixed(2) ölçüme uyum (rule #132)
* Container padding'ini 0.5px hizaya çek; gap'i BS slot
* grid'inin 10px'ine yumuşat. h-scroll layout korunur.
* ----------------------------------------------------------- */
html.mobile-root body.mobile-site section.bs-live-section .bs-live-cards,
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards {
/* BS slot grid gap: 10px — MR önce 8px → 10px */
gap: 10px !important;
/* BS-paralel padding: simetrik 8px sol/sağ */
padding-left: 8px !important;
padding-right: 8px !important;
}
/* -----------------------------------------------------------
* 5) Scroll snap parity — BS slot grid'de snap yok ama
* h-scroll varyantlarında BS sliderContent'te `x mandatory`
* kullanılıyor. MR'da zaten var, snap-align'i `start` olarak
* sabitle (rule #19, #20 match).
* ----------------------------------------------------------- */
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,
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,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta {
scroll-snap-align: start;
}
/* -----------------------------------------------------------
* 6) Responsive breakpoint sub-pixel düzeltmeleri (rule #131)
* Ölçüm matrisi: 320 / 375 / 400 / 414 / 768
* ----------------------------------------------------------- */
@media (max-width: 359px) {
/* iPhone SE 320px — gap dar */
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards {
gap: 8px;
padding-left: 6px;
padding-right: 6px;
}
}
@media (min-width: 768px) {
/* Tablet — daha geniş gap (BS sliderContent'e paralel) */
html.mobile-root body.mobile-site .bs-live-section .bs-live-cards,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards {
gap: 12px;
padding-left: 12px;
padding-right: 12px;
}
}
/* -----------------------------------------------------------
* 9) Anasayfa bs-* kart overlay tamamen gizli (rule #121 user-override 2026-04-27 revize)
* Tap → direkt /slot navigation (overlay/OYNA/DEMO yok).
* Kullanıcı 'tıklandığı anda atmasını istiyorum' talimati.
* `.game-overlay` element DOM'da var ama display:none → blur flash yok.
* Touch-action manipulation 300ms tap-delay önler.
* ----------------------------------------------------------- */
html.mobile-root body.mobile-site .bs-slot-section .game-overlay,
html.mobile-root body.mobile-site .bs-live-section .game-overlay,
html.mobile-root body.mobile-site .bs-crash-section .game-overlay {
display: none !important;
}
html.mobile-root body.mobile-site .bs-slot-section .game-card-info,
html.mobile-root body.mobile-site .bs-live-section .game-card-info,
html.mobile-root body.mobile-site .bs-crash-section .game-card-info {
display: none !important;
}
html.mobile-root body.mobile-site .bs-slot-section .game-item,
html.mobile-root body.mobile-site .bs-slot-section .game-cta,
html.mobile-root body.mobile-site .bs-live-section .game-item,
html.mobile-root body.mobile-site .bs-live-section .game-cta,
html.mobile-root body.mobile-site .bs-crash-section .game-item,
html.mobile-root body.mobile-site .bs-crash-section .game-cta {
position: relative;
overflow: hidden;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* -----------------------------------------------------------
* 7.5) F7 fix (2026-05-12, ITER 383): section ancestor height clipping image bottom
* User feedback: "ordaki görselleri yukarı çekecektin görselin altı aşağıda kaldığı için"
* Forensic (Rule #20):
* - `theme-robinbet-mobile.css:14433-14435` locks section h/min/max-height 171px
* (legacy BS "row h:171" ref, when cards were 100×132)
* - Now cards 140×188 (Override #28), but section still 171px → 35px alt crop
* - Layer audit: SECTION h=171 scrollH=187, bs-slot-right h=171, bs-slot-cards h=171
* - Image baked-in title at y=900-1050 in 1076 nat → display y=157-184 in 188 card
* → bottom 17px of card (which has the title) clipped by section overflow:hidden
* Fix: F7 overrides section height to 220 (188 card + 32 paddings/margins),
* adjusts child container heights so full 188 card renders visible.
* Specificity: same as theme rule (0,5,2 with section element) → source-order wins. */
/* F7.1 box-sizing math fix (2026-05-12, ITER 383):
* F7 used content-box height but child padding pushed outer beyond.
* Card 188 + cards padding 12/6 = 206 outer. Right padding 8/8 = +16 → 222.
* Section needs 222+ to fit right outer. Add 2px buffer = 224. */
html.mobile-root body.mobile-site section.bs-slot-section,
html.mobile-root body.mobile-site .bs-slot-section {
height: 224px !important;
min-height: 224px !important;
max-height: 224px !important;
}
html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-left,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left {
height: 224px !important;
max-height: 224px !important;
}
html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-right,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-right {
height: 208px !important;
max-height: 208px !important;
}
html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards {
height: 190px !important;
max-height: 190px !important;
}
/* -----------------------------------------------------------
* 8) BS-paralel kart boyutu — 140×188 portrait (Override #28, 2026-05-11)
* BS canonical "En Beğenilen Slotlar" component 96110 = 10-card portrait row
* BS CMS API extraction: cards render as 140×188 portrait thumbnails
* (aspect 0.745:1 dikey, BS m.bahissende302.com 2026-05-11 measurement)
* Önceki 179×126 horizontal = bs-live/bs-crash section'larında kalır;
* bs-slot-section spesifik olarak portrait formatta.
* Override registry: AI_USER_OVERRIDES.md#anasayfa-bs-slot-clone-2026-05-11
* ----------------------------------------------------------- */
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 {
width: 140px !important;
height: 188px !important;
min-width: 140px !important;
min-height: 188px !important;
flex: 0 0 140px !important;
aspect-ratio: 140 / 188 !important;
}
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: 140px !important;
height: 188px !important;
object-fit: cover !important;
}
/* -----------------------------------------------------------
* 11) bs-live-section + bs-crash-section kart boyutu — 179×126
* (rule #121 user-override 2026-04-27 revize: bs-live ekleme)
* BS live-casino/home top games: 179×126 (BS slot grid ile aynı)
* Drakon DB match: 9 oyun (Immersive Roulette, Road To Eldorado,
* Aviator, The Choice, Bac Dice, Lucky Colors, Baccarat VIP,
* Kickoff Roulette, Aurum Roulette)
* Override registry: AI_USER_OVERRIDES.md#anasayfa-en-cok-begenilen-bs-asset-bypass-2026-04-27
* ----------------------------------------------------------- */
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,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-cta,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta {
width: 179px !important;
height: 126px !important;
min-width: 179px !important;
min-height: 126px !important;
flex: 0 0 179px !important;
aspect-ratio: 179 / 126 !important;
}
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,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-item img,
html.mobile-root body.mobile-site section.bs-crash-section .bs-live-cards .game-cta img,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item img,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta img {
width: 179px !important;
height: 126px !important;
object-fit: cover !important;
}
/* -----------------------------------------------------------
* 7) Reduced motion respect (rule #38 a11y)
* ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
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,
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,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-item,
html.mobile-root body.mobile-site .bs-crash-section .bs-live-cards .game-cta {
transition: none;
}
}
/* -----------------------------------------------------------
* §12. BS-paralel "En Beğenilen Slotlar" card chrome — iter 3
* (User feedback 2026-05-12 / ITER 379: overlay must render)
* User direct quote: "thunbail ler nasıl indiirlmez? bal gibi indirilir.
* derhal indir herşeyi ile beraber" — rule #121 override granted in chat.
*
* Diagnosis (ITER 379 forensic JS audit, MR tab 1067854103):
* - .bs-slot-card-overlay computed display: none (set by iter 2 below)
* - Markup IS in DOM:
* Gates of Olympus 1000
* PRAGMATIC PLAY
* - 12 thumbnails already in /mobile/assets/images/bs-popular/ (400×538)
* - Section layout 376×173 (left 30% / right 70% h-scroller) intact
* - BS image2 (user-supplied) shows overlay rendered on top of thumb
* - Previous "baked-in label" assumption (iter 2) was WRONG
*
* Fix scope:
* a) ★ favori + ⓘ info icons stay hidden (BS reference)
* b) .bs-slot-card-overlay → display: flex column at bottom with gradient
* c) .bs-slot-card-name → white 13px 700, text-shadow
* d) .bs-slot-card-provider → 9px 600 opacity 0.85 uppercase letter-spacing
* e) .bs-slot-title → gold gradient text (BS-paralel hero look)
* f) Card img stays z-index 1; overlay z-index 2
* ----------------------------------------------------------- */
/* a) Hide ★ favori + ⓘ info icons for bs-slot-section cards only */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-fav,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-info-btn {
display: none !important;
}
/* b) Card surface: relative positioning so overlay can absolute-position bottom */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .bs-slot-card {
position: relative !important;
overflow: hidden !important;
}
/* b.1) Image fully visible — F6 fix (2026-05-12, ITER 382).
* User feedback: "resim aslında tam ama çok aşağıda diye resmin
* alt tarafı gizleniyor. bu resimleri yukarı çıkarman gerekiyor
* ekranda tam gözükecek şekilde."
*
* Forensic (Rule #20 numeric proof, 2026-05-12 tab 1067854244):
* - Card render: 140.0 × 188.0 (aspect 0.7447, height locked)
* - Image natural: 800 × 1076 (aspect 0.7435)
* - With cover + 50% 50%: scale 0.175, display 140.00 × 188.30
* → 0.30px vertical overflow, 0.15px cropped top + 0.15px bottom
* - BS card actual: 140.0 × 188.3 (artwork aspect exact match)
* - MR card height locked to 188 by ancestor aspect-ratio (140/188)
*
* F6 = `object-fit: contain` mathematical guarantee FULL image
* visible inside 140×188 box. New behavior:
* - scale=min(140/800, 188/1076)=0.1747
* - Display: 139.78 × 188.00 — image fills full 188px vertical
* - 0.22px horizontal pillar-box (invisible at 1× and 2× DPR)
* - ZERO vertical crop → artwork bottom (baked-in title) guaranteed
*
* Previous (F1) used cover @ 50% 50% which still had 0.3px overflow
* causing perceptual "alt kısmı gizleniyor" complaint despite 99.9%
* visible math. F6 eliminates ANY theoretical crop. */
/* F6.1 specificity boost (2026-05-12, ITER 382 v2): selector list MUST beat
* line 261-267 cover rule which uses `section.bs-slot-section ... .game-item img`
* (specificity 0,5,4). Previous F6 used `.bs-slot-section .bs-slot-card img`
* (specificity 0,5,3) → LOST cascade. Live DOM verified: cards have class
* `game-item bs-slot-card` (both). New selector adds `section` element +
* `.game-item.bs-slot-card` combo → specificity (0,6,4) beats cover rule. */
html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-item.bs-slot-card img,
html.mobile-root body.mobile-site section.bs-slot-section .bs-slot-cards .game-cta.bs-slot-card img,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-item.bs-slot-card img,
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .game-cta.bs-slot-card img {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* F6: cover → contain (no crop guarantee) */
object-position: 50% 50% !important; /* Center for tiny 0.22px pillar-box */
background: #0a0a0a !important; /* Fill any pillar-box with card-dark bg */
}
/* b.2) Overlay container: F5 fix (2026-05-12, ITER 381) — HIDDEN.
* F2'de 30px slab + light gradient bırakmıştık, ama user feedback:
* "oyun görsellerinin alt kısmı gözükmüyor" — overlay artwork'ün
* baked-in title bölümünü (örn "GATES OF OLYMPUS 1000" yazı) hâlâ
* örtüyordu. BS canonical: NO overlay (uses `product-banner-without-titles`).
* F5 = BS-paralel canonical: overlay tamamen kapalı. Image full 140×188
* cover @ 50% 50% (F1 unchanged), artwork bottom (baked-in title)
* tamamen görünür. Caption text artık artwork'ün kendi baked-in
* title'ından okunur (Pragmatic/PG Soft tüm popüler oyunlarda baked-in
* title mevcut). Rule #20 forensic: BS `.product-banner-without-titles`
* computed display containers have NO bottom text band. */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .bs-slot-card-overlay {
display: none !important;
}
/* c) Game name — F2 simplified: 11px, drop-shadow heavier for legibility
* against the lighter background gradient. Single line, ellipsis. */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .bs-slot-card-name {
display: block !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: #ffffff !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8) !important;
text-align: left !important;
letter-spacing: 0.1px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 !important;
}
/* d) Provider name — F2 HIDDEN (BS-paralel minimalism, frees overlay space) */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-cards .bs-slot-card-provider {
display: none !important;
}
/* e) Section hero title — gold gradient text (BS-paralel "SLOT OYUNLARI" hero) */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-title {
font-size: 22px !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 4px 0 6px !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
background: linear-gradient(180deg, #f7d97a 0%, #c9963a 85%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow: none !important;
}
/* e.1) Subtitle "En Çok Beğenilen" — bump from tiny 9px to readable 10px */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-subtitle {
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
color: #d4af37 !important;
margin: 0 0 4px 0 !important;
}
/* e.2) "Tümünü Gör" link — slight visual polish, BS-paralel */
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-viewall {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 11px !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.78) !important;
text-decoration: none !important;
margin-top: 4px !important;
letter-spacing: 0.2px !important;
}
html.mobile-root body.mobile-site .bs-slot-section .bs-slot-left .bs-slot-viewall i {
font-size: 9px !important;
color: #d4af37 !important;
}