/* * overlay.css — Oyun kartı hover katmanı (bizim eklememiz; BC CSS'ine dokunmaz) * ----------------------------------------------------------------------------- * BC'de .casinoGameItemBlock (favori/bilgi + oyun adı + Demo/Oyna) yalnız fare * üstüne gelince MOUNT ediliyordu (React). Bizim server-render kartlarımızda blok * her zaman DOM'da → casino-game-layer animasyonu 0→1 çalışıp KALICI görünüyordu. * Burada: default GİZLE, yalnız hover/focus'ta göster (BC'nin doğal davranışı). */ .casinoGameItemContent .casinoGameItemBlock { animation: none !important; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .casinoGameItemContent .casinoGameItem:hover .casinoGameItemBlock, .casinoGameItemContent .casinoGameItem:focus-within .casinoGameItemBlock { opacity: 1; pointer-events: auto; } /* ----------------------------------------------------------------------------- * Yatay taşma fix (QA D: "banner taşmış / responsive bozuk") * Sağ kenardaki nav öğesinin gizli hover alt-menüsü (.nav-menu-sub, absolute + * visibility:hidden) kapalıyken bile layout'ta yer tutup ~92px yatay scrollbar * yaratıyordu. Hero/slider aslında taşmıyor. Header static olduğu için body'de * overflow-x kısıtı sticky'yi bozmaz. clip: scroll-container yaratmaz (dikey * scroll + sticky güvende), hidden fallback eski tarayıcılar için. */ html, body { overflow-x: hidden !important; overflow-x: clip !important; } /* Sport alt-nav (#13) aktif/hover — inline arka planı yener */ .sport-subnav-bar .sport-subnav-item.active { background: var(--hero-btn-bc, #38a169) !important; color: #fff !important; } .sport-subnav-bar .sport-subnav-item:hover { background: rgba(var(--b-sc, 255, 255, 255), .14) !important; } /* ----------------------------------------------------------------------------- * Bonus cüzdanı seçim ekranı (oyun açılırken: "Gerçek parayla / Bonusla") * ----------------------------------------------------------------------------- * İşaretleme operatörün verdiği referans siteden birebir alındı; bu sınıfların * HİÇBİRİ bizim BC paketinde yok (ölçüldü) → kutu ortalanmıyor, düğmeler çıplak * kalıyordu. Buradaki kurallar referansın YALNIZ bu ekrana ait olanları. * * ⚠️ İki uyarlama zorunluydu: * 1) Referans `[class=browser]` (TAM eşleşen html sınıfı) ile masaüstü * ölçülerini veriyor; bizim `` → o seçici hiç tutmaz. * Masaüstü uygulaması olduğu için ölçüler doğrudan temel kurala yazıldı. * 2) Referansın `--b-text` değişkeni bizde YOK; karşılığı `--b-sc` * (arka plan `--b` üzerindeki metin rengi). */ .availableBonusModalHolder { display: flex; flex-direction: column; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; background-color: rgba(var(--b), .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow-y: auto; overflow-x: hidden; padding: 1.6rem; } .availableBonusContent { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: auto; width: 100%; color: rgba(var(--b-sc), 1); gap: 32px; max-width: 640px; animation: availableBonusContentShow 480ms ease-in-out; } @keyframes availableBonusContentShow { 0% { transform: translate(0, -8rem); opacity: 0 } 100% { transform: initial; opacity: 1 } } .availableBonusImg { display: block; object-fit: contain; width: 160px } .availableBonusTitle { font-weight: bold; text-align: center; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); font-size: 30px; line-height: 36px; } .availableBonusTitleDesc { text-align: center; color: rgba(var(--b-sc), .8); font-size: 16px; line-height: 20px; } .availableBonusContent .divider { width: 100%; border-bottom: 2px solid hsla(0, 0%, 100%, .1) } .availableBtnBlock { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin: 4px 0; gap: 16px; } .availableBtnBlock.flexRow { flex-direction: row } .availableButton { display: flex; align-items: center; justify-content: center; border: none; outline: none; box-shadow: 0 4px 7px 0 rgba(var(--b), .3); cursor: pointer; width: 100%; transition: opacity 120ms; height: 40px; border-radius: 8px; padding: 0 12px; max-width: 295px; } .availableButton:hover { opacity: .8 } .availableButton:active { transform: scale(.98) } .availableButton.type-2 { background-color: gold; color: #000 } .availableButton.type-4 { background-color: hsla(0, 0%, 100%, .15); color: #fff } .availableButtonText { color: inherit; text-transform: uppercase; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1px; }