/* theme_custom_css */ /* =========================================================================== KARTALBET β€” BILESEN TASARIMI (BO > theme_custom_css) Kaynak: Kartalbet_CSS_Yapilacaklar.md Β· Uretim 2026-09-11 πŸ”΄ BRIFIN Β§20'si BURADA UYGULANDI. Brief "mevcut Betco DOM'unu incele, class isimlerini tespit et, selector'lari ona gore uyarla" diyor. Asagidaki HER secici CANLI kartalbet sayfasindan olculdu (masaustu 442 benzersiz sinif, mobil 270). Bu depoda dis bir tema dosyasini oldugu gibi yapistirmak bir kez OLCULEREK cokmustu: 28 secici ailesinin 28'i de 0 eslesme vermisti. ⚠️ Palet BURADA DEGIL, `theme_vars_css`te. Burasi yalnizca renk degiskeniyle anlatilamayan seyler: geometri, golge, hover, izgara. Renk gerektiginde `var(--gold)` / `var(--oc-2)` uzerinden okunuyor ki paleti tek yerden degistirmek yeterli kalsin. ⚠️ Β§21: "`!important` yalnizca gercekten gerektiginde kullan". Asagida `!important` YALNIZCA motorun kendi `custom.css`i ayni bildirimi `!important` ile civiledigi yerlerde var ve her birinin yanina hangi kurali yendigi yaziliyor. Gerisi ozgullukle kazaniyor. πŸ”΄ YUKLEME SIRASI OLCULDU β€” VE SEZGININ TERSI: 0 custom.css (motorun kendi temasi) 1 /api/kiraci/tema-css <-- BU DOSYA 2..38 index.*.css, CasinoGame.*.css, FeaturedGames.*.css ... (32 paket) 34 /api/kiraci/tema-vars (palet -- paketlerden SONRA, sorunsuz) Yani `theme_custom_css` en sonda DEGIL IKINCI sirada. BC bilesen paketlerinin TAMAMI ondan sonra yukleniyor ve ESIT OZGULLUKTE sirayi onlar kazaniyor. Ilk turda uc kural tam bu yuzden yayinda ama ETKISIZ kaldi (olculdu: .casinoGameItemImage transition, .ds-btn birincil zemin, .form-control-input zemin). Cozum `!important` degil -- rakiplerin hicbiri `!important` yazmiyor (olculdu) -- OZGULLUGU bir basamak yukseltmek: cekisen kurallar `#root` ile basliyor (1-0-0). `#root` motorun kendi kabugu (`
`) ve bu ogelerin HEPSI onun icinde. Cekismeyen kurallara `#root` EKLENMEDI: gereksiz ozgulluk, ileride mesru bir duzeltmenin onunu keser. ⚠️ KISALTMA TUZAGI: motor `.ds-btn.ds-btn-variant--primary`e `background` (KISALTMA) yaziyor ve kisaltma `background-image`i `none`a SIFIRLIYOR. Bu yuzden gradyan `background-image` olarak degil `background` olarak yaziliyor -- yoksa ozgulluk yetse bile kisaltma onu silerdi. =========================================================================== */ /* ───────────────────────── Β§7 KART SISTEMI ───────────────────────────────── "Tum kartlarda ortak tasarim dili Β· koyu yuzey Β· ince border Β· yuvarlatilmis koseler Β· hafif golge Β· hover durumlari Β· tutarli spacing" Olculdu: .casinoGameItem radius 8px ama border YOK, box-shadow YOK. */ /* ── 7b Β· GAGA CENTIGI + olculmus golge temizligi (2026-09-14) ─────────── πŸ”΄ DIS GOLGELER KALDIRILDI, cunku GORUNMUYORLARDI. Olculdu canlida, sayfa zemini rgb(6,10,20): `0 2px 10px rgba(0,0,0,.45)` -> zeminden kontrast **1,03:1** `1px rgba(255,255,255,.07)` -> **1,15:1** Koyu zemine siyah golge dusurmek tanim geregi is yapmaz. Kural yayindaydi, olculdu ve goze gorunen hicbir sey uretmiyordu. πŸ”΄ VE `clip-path` onlari ZATEN silecekti: kirpma ogenin butun boyamasini kesiyor, dis golge kirpma alaninin DISINDA kaliyor. Yani centik eklenince golge sessizce olu bir bildirime donerdi. Bedeli olculdu: 1,03:1, yani sifir. Yerine hover'da GORUNUR bir kontur kondu (`--gold`, 6,35:1; eskisi `--gold-line`, .34 alfa ile neredeyse gorunmezdi). CENTIK: sag-ust kosede 14 px'lik duz kesik (brief 7 "gaga centigi ... tek kose yeter; dordu birden gurultu olur"). ⚠️ `border-radius` KORUNMUYOR -- `clip-path` onu ezer. O yuzden kalan uc kose poligonun ICINDE yuvarlatildi: 8 px yaricapli ceyrek yay uc noktayla yaklastirildi (2,34px = 8 - 8*cos45). Bu satirlar suslemedir ama atlanirsa kartlar birden kare koseli olurdu. ⚠️ Kirpilan ucgen TIKLANAMAZ hale gelir (clip-path hit-test'i de keser). 14 px'lik kose; kartin tikanabilir alani 222x156'da %0,4 azaliyor. */ .casinoGameItem, .promotionsListEl-bc, .featuredGameItem { border: 1px solid rgba(255, 255, 255, .07); clip-path: polygon( 8px 0, calc(100% - var(--kb-centik, 14px)) 0, 100% var(--kb-centik, 14px), 100% calc(100% - 8px), calc(100% - 2.34px) calc(100% - 2.34px), calc(100% - 8px) 100%, 8px 100%, 2.34px calc(100% - 2.34px), 0 calc(100% - 8px), 0 8px, 2.34px 2.34px); transition: border-color .18s ease, transform .18s ease; } .casinoGameItem:hover, .promotionsListEl-bc:hover, .featuredGameItem:hover { border-color: var(--gold); /* 6,35:1 β€” eskisi .34 alfaydi */ } /* ───────────────────── Β§11 CASINO / OYUN KARTLARI ────────────────────────── "Hover'da hafif zoom efekti kullan" + Β§19 "kart hover zoom efektini HAFIF" Olculdu: .casinoGameItemImage transition = `filter .24s` β€” yani zoom icin gereken transform gecisi HIC YOK; transform yazip gecisi eklememek zoom'u ani bir sicramaya cevirirdi. */ .casinoGameItem { overflow: hidden; /* zoom kartin disina tasmasin */ } /* πŸ”΄ `#root` sart: `CasinoGame.BuQPhEgY.css` (yukleme sirasi 16) ayni secicide `transition: filter var(--default-transition-duration)` yaziyor ve bu dosya 1. sirada oldugu icin esit ozgullukte KAYBEDIYORDU -- olculdu: hesaplanan deger `filter 0.24s`, yani transform gecisi hic yoktu ve zoom ani sicrardi. */ #root .casinoGameItemImage { transition: filter .24s, transform .28s ease; will-change: transform; /* πŸ”΄ 2026-09-14: OYUN GORSELLERI GERILIYORDU. Motorun `CasinoGame.BuQPhEgY.css`i `width:100%; height:100%` yaziyor ama `object-fit` YAZMIYOR -- varsayilan `fill`, yani goruntu kutuya ZORLANIYOR. Olculdu `/tr/casino/slots`ta, 12 kartin 8'i bozuk: kart kutusu 196x138 (oran 1,426), en kotu ornek dogal 496x420 (oran 1,181) -> yatayda **%21 gerilme**. Oyun logolari ve yuzler sisman goruunuyordu. `cover` kirpar, germez: 1,181'lik bir gorselde yukseklikten ~%17 kirpilir. Oyun kapaklari ortalanmis tasarlandigi icin kirpmak germekten iyidir ve Β§11'in "gorsel karti TAM kaplasin" maddesi zaten bunu istiyor. */ object-fit: cover; } #root .casinoGameItem:hover .casinoGameItemImage { transform: scale(1.045); /* Β§19 "hafif" β€” %4,5 */ } /* Dokunmatik cihazda hover yapisik kalir (parmak cekilince efekt asili kalir). */ @media (hover: none) { #root .casinoGameItem:hover .casinoGameItemImage { transform: none; } } /* ─────────────────────── Β§10 ORAN BUTONLARI ──────────────────────────────── "Oranlari koyu kucuk kartlar icinde goster Β· oran degerini ALTIN/SARI ile vurgula Β· hover'da MAVI border Β· secili orani farkli goster Β· mobilde dokunmaya uygun boyut" πŸ”΄ ALTIN 2026-09-14'te KALKTI (kullanici karari). Kartal isaretinde altin YOK; 23 "Altin %0" diyor. Olculdu, kart zemini rgb(6,10,20) uzerinde: bugunku altin #F5C542 -> 12,20:1 beyaz -> **19,79:1** Beyaz hem figure uygun hem DAHA OKUNUR; 10'un kendi karar maddesi de beyazi oneriyordu. πŸ”΄ `--oc-2` DEGISKENINE DOKUNULMADI, yalniz bu kural degisti. Degiskeni 23 kural okuyor ve cogu giris gerektiren ekranlarda (kupon bacagi, bonus kademesi, ucuncul baglanti, favori ikonu) -- olculemedi. Rengi degiskenden kaldirmak o olculmemis yuzeyleri de degistirirdi; `--oc-1` dersi (33 kural, gorunmez butonlar) tam bu sinifti. Altin oran butonundan kalkti, degiskende BEKLIYOR. Ilk yazarken olculmustu: `.market-coefficient-bc`e renk yazan baska kural YOK, deger MIRAS geliyordu -- o yuzden `!important` gerekmiyor. */ /* ── πŸ”΄ SECICILER 2026-09-14'te DUZELTILDI β€” IC ICELIK TERSMIS ──────────── Bu blok devralindiginda `.market-odd-bc .market-coefficient-bc` yaziyordu, yani "katsayi, oran ogesinin ICINDE". Canlida olculen gercek yapi TERSI:
<- DIS kapsayici
2.34 <- SAYIYI TASIYAN oge
Sayilar 216 ogenin 216'sinda `.market-odd-bc` span'inin DOGRUDAN metin dugumu; `.market-odd-bc` icinde `.market-coefficient-bc` olan oge SIFIR. Yani o secici hicbir seyle eslesmiyordu -- kural yayindaydi, servis ediliyordu, olu idi. Beyaz rengi ekrana getiren sey listenin ucuncu secicisiydi (`.sgm-market-g-i-cell-bc .market-coefficient-bc`) ve o da DIS kapsayiciyi boyuyordu; sayinin kendisi motorun `.market-odd-bc:not(.not-boosted-odd)` kuralindan ALTIN kalmaya devam ediyordu. Olculdu: 174 gorunur sayi hala rgb(245,197,66). Ozgulluk: rakip (0,2,0) ve !important yok -> beraberlik BIRAKILMIYOR, (0,3,0) veriliyor. Iki secici: biri olculen hucre sinifiyla, digeri kapsayici ikilenerek -- ikincisi hucre sinifi baska bir widget'ta farkliysa da tutsun diye. */ .sgm-market-g-i-cell-bc .market-coefficient-bc .market-odd-bc, .market-coefficient-bc.market-coefficient-bc .market-odd-bc { color: #fff; /* 19,79:1 β€” 23 "Altin %0" */ font-weight: 600; } /* "koyu kucuk kartlar" β€” olculdu: bugun zemin seffaf, radius 0. Kontur `transparent` idi; 10'un karar maddesi "altin kalkarsa: rakam beyaz, CIP KOYU + 1 px KONTUR" diyor. Rakam beyaza dondugu icin cipin kendi siniri artik tek ayirt edici -> kontur gorunur yapildi. */ /* πŸ”΄ CIP ARTIK YALNIZ HUCREYE VERILIYOR, SAYI SPAN'INE DEGIL. Ayni ters-yapi hatasi buraya da sinmisti: zemin + kontur + radius hem hucreye hem `.market-odd-bc`ye yaziliyordu ve `.market-odd-bc` hucre degil SAYI. Olculdu canlida: sayi span'i 29x17 px, kendi zemini rgba(255,255,255,.043), 1 px konturu ve 8 px radius'u vardi -- yani gercek cipin (hucre, 100x44, radius 10) ICINDE IKINCI BIR CIP. `min-height: 44px` de ayni yanlis hedefteydi: 17 px'lik bir sayi span'ini mobilde 44 px'e zorluyordu. Dokunma hedefi HUCRENIN isi; olculdu, hucre zaten 44 px. ⚠️ `.market-odd-bc` bu kurallardan CIKARILDI ama SILINMEDIGI yer var: renk kurali hala onu hedefliyor (yukarida), cunku sayiyi o tasiyor. Olculen sayfada 216/216 `.market-odd-bc` bir SPAN; baska bir widget'ta cip rolunde cikarsa bu blok orada cip vermez -- o zaman OLCULUP eklenir, tahminle degil. */ .sgm-market-g-i-cell-bc { background-color: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .10); border-radius: 8px; transition: background-color .15s ease, border-color .15s ease; } .sgm-market-g-i-cell-bc:hover { background-color: rgba(0, 149, 255, .10); border-color: var(--gold); /* "hover'da MAVI border" */ } /* "Secili orani farkli gorunumle belirt" β€” motorun secili sinifi olcumle dogrulanmadi (sayfada secili oran yoktu); `active` ve `selected` ikisi de birakildi. ⚠️ Bunlar OLCULMEMIS varsayim, olu olabilirler. */ .sgm-market-g-i-cell-bc.active, .sgm-market-g-i-cell-bc.selected { background-color: rgba(0, 149, 255, .18); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-glow); } /* "Mobilde dokunmaya uygun boyut" β€” WCAG/iOS asgari dokunma hedefi 44px. */ @media (max-width: 767px) { .sgm-market-g-i-cell-bc { min-height: 44px; } } /* ──────────────────────── Β§9 SPOR KARSILASMALARI ─────────────────────────── "Mac bilgilerini okunabilir yap Β· hover ve active durumlarini hazirla" Olculdu: .featuredGameItem zemin rgb(11,18,32) (= --chrome-1), border rgba(255,255,255,.15). Zemin dogru, eksik olan okunabilirlik kademesi. */ .featuredGameItemCompetitionName, .featuredGameItemTime { color: rgba(255, 255, 255, .62); } .featuredGameItemPlayerName { color: rgba(255, 255, 255, .94); /* Β§1 "yazi kontrastini yuksek tut" */ font-weight: 500; } /* ────────────────────── Β§8 PROMOSYON KARTLARI ────────────────────────────── "Desktop'ta 3 kolon Β· mobilde tek kolon Β· gorseller karti tamamen kaplasin Β· alt kisimda koyu gradient Β· baslik ve CTA okunabilirligi" πŸ”΄ Olculdu: `.promotionsList-bc` bugun `386px 386px 386px 386px` = DORT kolon. Brief uc istiyor. Sabit piksel yerine `1fr` veriliyor ki kolon sayisi kirilim noktalarinda gercekten degissin. */ /* πŸ”΄ Rakip olculdu: PromotionDetailsTemplate.*.css icinde ".promotionsList-bc:not(.gridView) { grid-template-columns: repeat(auto-fill, minmax(min(345px,100%), 1fr)) }" -> ozgulluk 0-2-0. Benim 0-1-0 kuralim kaybediyordu (olculdu: canlida hala 386px x4). Sinif adini iki kez yazip ":not(.gridView)"i de tasiyarak 0-3-0'a cikiyoruz; ":not(.gridView)" BILEREK korunuyor -- motor "gridView" modunda baska bir yerlesim istiyor ve onu ezmek ayri bir gorunumu bozardi. */ .promotionsList-bc.promotionsList-bc:not(.gridView) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1200px) { .promotionsList-bc.promotionsList-bc:not(.gridView) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .promotionsList-bc.promotionsList-bc:not(.gridView) { grid-template-columns: minmax(0, 1fr); /* "mobilde tek kolon" */ } } .promotionsArticleThumbnail-bc { width: 100%; object-fit: cover; /* "gorseller karti tamamen kaplasin" */ } /* "Alt kisimda koyu gradient" β€” basligin gorsel uzerinde okunmasi icin. */ .promotionsListEl-bc { position: relative; } .promotionsListEl-bc::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(to top, rgba(6, 10, 20, .92), rgba(6, 10, 20, 0)); pointer-events: none; /* tiklamayi YUTMASIN */ z-index: 0; } .promotions-article-title { position: relative; z-index: 1; /* gradyanin USTUNDE kalsin */ color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } /* ─────────────────────────── Β§15 BUTONLAR ────────────────────────────────── "Uye ol ve ana CTA butonlarini MAVI GRADIENT yap Β· hover efekti Β· yuvarlatilmis koseler Β· mobilde yeterli dokunma alani" Olculdu: `.ds-btn-variant--primary` bugun DUZ rgb(0,149,255), radius 999px (zaten yuvarlak). Eksik olan gradyan ve hover. */ /* πŸ”΄ "background" KISALTMASI + "#root". Motor index.Y8VP_-at.css'te (sira 2) ".ds-btn.ds-btn-variant--primary { background: rgba(var(--hero),...) }" yaziyor. Iki sorun birden vardi: (a) o dosya benden SONRA yukleniyor ve ozgulluk esitti, (b) "background" kisaltmasi benim "background-image"imi "none"a SIFIRLIYORDU. Olculdu: hesaplanan background-image = none. */ #root .ds-btn.ds-btn-variant--primary.ds-btn-appearance--filled { background: linear-gradient(180deg, #2aa8ff 0%, #0095ff 48%, #0074d9 100%); border: none; transition: filter .16s ease, box-shadow .16s ease; } #root .ds-btn.ds-btn-variant--primary.ds-btn-appearance--filled:hover { filter: brightness(1.08); box-shadow: 0 4px 14px var(--gold-glow); } /* "Giris butonunu IKINCIL gorunumde tasarla" β€” motorda saydam varyant. */ .ds-btn-variant--transparent-static-light { border: 1px solid rgba(255, 255, 255, .22); transition: border-color .16s ease, background-color .16s ease; } .ds-btn-variant--transparent-static-light:hover { border-color: var(--gold); background-color: rgba(0, 149, 255, .10); } @media (max-width: 767px) { .ds-btn { min-height: 40px; } /* dokunma alani */ } /* =========================================================================== 15b ESKI BUTON AILESI (`.btn`) -- BIRINCIL CTA --------------------------------------------------------------------------- 15 yalniz `.ds-btn` ailesini kapsiyordu. Motorda IKI buton ailesi var ve oyuncunun en cok bastigi dugmeler ESKI ailede: duyuru penceresindeki TAMAM, giris formundaki GIRIS, onay ekranlari. Olculdu 2026-09-13 canlida: `.btn.a-color` dolgusunu `rgba(var(--oc-1),1)` aliyor; panelle kontrasti 1,08:1 idi, yani buton GORUNMUYORDU. Palet duzeltmesi onu gorunur yapiyor, brief 15 ise ana CTA icin MAVI GRADYAN istiyor. Ikisi bilerek AYRI: `--oc-1`i maviye cevirmek basari bildirimini ve onay tiklerini de maviye cevirirdi. `#root` KULLANILMIYOR. Giris/kayit penceresi PORTAL: zincir INPUT -> .e-p-content-holder-bc -> .entrance-popup-bc -> .popup-inner-bc -> #login-popup -> BODY, yani `#root`un ICINDE DEGIL. 15'teki `.ds-btn` kurali `#root` onekiyle yazildi ve o yuzden pencere icinde calismiyor. Burada sinif adi IKI KEZ yazilarak ozgulluk (0,2,0) -> (0,3,0) cikariliyor; ogenin agacta nerede durdugu onemsizlesiyor. `background` KISALTMASI kullaniliyor. Motor da kisaltma yaziyor; yalniz `background-image` verilseydi motorun kisaltmasi onu none'a SIFIRLARDI -- ayni tuzak 15'te bir kez odendi. `:not(.a-outline)` sart. `.btn.a-outline.a-color` KONTUR varyanti ve dolgusunun olmamasi bilincli; gradyan oraya da vursaydi ikincil buton birincile donusur, logodaki "konturlu isaret + dolu wordmark" hiyerarsisi duzlesirdi. Kontrast: ust uc #0090F8 panele 5,66:1 (UI bileseni >=3:1); metnin oturdugu alt yari #0B5CAD uzerinde beyaz 6,67:1 (metin >=4,5:1). */ .btn.a-color.a-color:not(.a-outline) { background: linear-gradient(180deg, #0090f8 0%, #0d6ac8 100%); color: #fff; font-weight: 600; transition: filter .16s ease, box-shadow .16s ease; } .btn.a-color.a-color:not(.a-outline):hover { filter: brightness(1.08); box-shadow: 0 4px 14px var(--gold-glow); } .btn.a-color.a-color:not(.a-outline):active { filter: brightness(.94); } /* ──────────────────────────── Β§14 FORMLAR ────────────────────────────────── "Input alanlarini koyu yuzeyde goster Β· FOCUS durumunda mavi border/glow Β· hata mesajlarini belirgin goster Β· login/register modal genel temayla uyumlu" Olculdu: `.form-control-bc`, `.form-control-input-bc`, `.entrance-popup-bc`, `.reg-form-*`, `.popup-inner-bc` DOM'da MEVCUT. */ /* πŸ”΄ BURADA "#root" KULLANILAMAZ β€” giris/kayit penceresi PORTAL. Ilk turda "#root .form-control-input-bc" yazildi ve kural yayinda olmasina ragmen hic uygulanmadi. Sebep ozgulluk degil AGAC: olculdu, input'un ust zinciri INPUT -> .e-p-content-holder-bc -> .entrance-popup-bc -> .popup-inner-bc -> #login-popup -> BODY yani "#root"un ICINDE DEGIL. Motor modali body'ye portalliyor; "#root" oneki oraya hic ulasmiyor. Cozum ATADAN BAGIMSIZ olmali: sinif ADINI IKI KEZ yazmak ozgullugu 0-1-0'dan 0-2-0'a cikarir ve ogenin agacta nerede durdugu onemsizlesir. Canlida dogrulandi (gecici stil enjekte edilip hesaplanan deger okundu). */ .form-control-input-bc.form-control-input-bc, .form-control-select-bc.form-control-select-bc { background: rgba(255, 255, 255, .05); border-radius: 8px; transition: border-color .16s ease, box-shadow .16s ease; } /* 14) ODAK GOSTERGESI -- OLCULDU 2026-09-14, hedef YANLIS OGEYDI. Devraldigimiz kural iki sey yapiyordu ve IKISI de cizmiyordu: 1. `.form-control-bc.focused .form-control-input-stroke-bc` Bu oge canlida **0x0**: `position: absolute; inset: auto 0 0 0`, yani yuksekligi hic yok. Uzerine yazilan kenar da parilti da gorunmez. 2. `border-color: var(--gold)` -- girdinin `border-width`i **0px**. Rengi olan ama genisligi olmayan kenar cizilmez; brief'in istedigi "mavi kenar" hic olusmadi, yalniz disaridaki 3 px parilti vardi. Cozum: kenari `inset` golge ile ciz. Golge YERLESIMI ETKILEMEZ -- yani odaklaninca metin 1 px kaymaz (gercek `border` eklemenin bedeli buydu) ve `border-width`e hic bagli degil. `!important` BILEREK: dogrulanan bicim budur (tarayicida once/sonra ekran goruntusuyle karsilastirildi; kuralsiz halde ne mavi ne kirmizi kenar vardi). */ .form-control-input-bc:focus, .form-control-select-bc:focus { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px var(--gold-glow) !important; outline: none; } /* "Hata mesajlarini belirgin goster" β€” --oc-3 motorun uyari kirmizisi, bilerek degistirilmedi (anlam tasiyor). */ /* 14) HATA GOSTERGESI -- ayni ariza: hedef 0x0 idi, yani hata durumu ekranda HIC gorunmuyordu. Olculdu: `.form-control-bc`ye `has-error` sinifi ELLE takildiginda (form GONDERILMEDEN) girdinin golgesi `none`, kenari `0px` kaliyordu. Uyari kirmizisi `--oc-3` DEGISMEDI: anlam tasiyan renk. */ .form-control-bc.has-error .form-control-input-bc, .form-control-bc.has-error .form-control-select-bc { box-shadow: inset 0 0 0 1px rgb(var(--oc-3)), 0 0 0 3px rgba(var(--oc-3), .18) !important; } /* Login/register penceresi β€” "genel temayla uyumlu". Bu da PORTAL icinde (#login-popup > body), o yuzden ayni cift-sinif teknigi. */ .popup-inner-bc.popup-inner-bc { border: 1px solid rgba(255, 255, 255, .08); } /* ────────────────────── Β§17 MOBIL ALT MENU ───────────────────────────────── "Aktif ogeyi MAVI renkle belirt" πŸ”΄ Olculdu: motorun custom.css'i `.tab-navigation-w-bc .tab-nav-item-bc i { color: rgba(251,238,194,.52) !important }` yaziyor β€” eski ALTIN temadan kalma kremsi bir ton, ozgulluk (0,3,1) ve `!important`. Palet degisikligi bunu YENMEZ: `!important` sirayla yenilmiyor. Bir sinif daha ekleyerek (0,4,1) + `!important` ile yeniliyor. */ .tab-navigation-w-bc .tab-nav-item-bc i.tab-nav-icon-bc { color: rgba(255, 255, 255, .58) !important; transition: color .15s ease; } /* πŸ”΄ `.active` 2026-09-14'te KALDIRILDI, yerine `[aria-current="page"]`. Olculdu m.beton67.com'da, hem `/tr` hem sekmenin KENDI hedefi olan `/tr/casino/slots` sayfasinda: `.tab-nav-item-bc.active` = **0**. Motor mobil sekme cubugunda aktif sekmeyi HIC isaretlemiyor; bes sekmenin besi de ayni renkte (baslik .70, ikon .58) ve centik serit 0 px genis. Isareti artik Ozel Govde JS koyuyor (ucuncu IIFE): sekmenin `href`i mevcut yola en uzun onek olarak uyuyorsa `aria-current="page"`. `aria-current` secildi, `.active` DEGIL: motorun kendi yonettigi bir sinifa yazmak React yeniden cizdikce kavga cikarir; `aria-current` motorun hic kullanmadigi ve ekran okuyucunun da okudugu inert bir isaret. Betik hic kosmazsa gorunum BUGUNKU gorunumdur. */ .tab-navigation-w-bc .tab-nav-item-bc[aria-current="page"] i.tab-nav-icon-bc, .tab-navigation-w-bc .tab-nav-item-bc:active i.tab-nav-icon-bc { color: var(--gold) !important; } /* πŸ”΄ ESKI HALI OLUYDU: `.tab-nav-item-bc.active .tab-nav-title-bc`, ne `!important` ne yeterli ozgulluk. Olculdu 2026-09-14 mobilde: motor "aktif"i `.active` SINIFIYLA KURMUYOR -- sayfada `.tab-nav-item-bc.active` ogesi SIFIR. Gercek durumlar `:active` (basili tutulurken) ve `.menu` (menu ortusu acikken, `body:has(...)` ile). Ustelik rakip kural `!important` tasidigi icin ozgullukten bagimsiz kazaniyordu. Ikisi birden: hedef duzeltildi, !important eklendi. */ .tab-navigation-w-bc .tab-nav-item-bc[aria-current="page"] p.tab-nav-title-bc, .tab-navigation-w-bc .tab-nav-item-bc:active p.tab-nav-title-bc, body:has(> .hdr-nav-menu-holder-bc) .tab-navigation-w-bc .tab-nav-item-bc.menu p.tab-nav-title-bc { color: var(--gold) !important; } /* Motor centik seridi zaten ciziyor (`custom.css`: 2 px, `var(--gold)`, `transition: width .18s`) ama genisligi yalniz `:active`te 0 -> %40 oluyor, yani parmak basiliyken. Aktif sekmede de acilsin: */ .tab-navigation-w-bc .tab-nav-item-bc[aria-current="page"]:not(:nth-child(3))::before { width: 40%; } /* =========================================================================== 17b MOBIL ALT MENU -- TAMAMLAMA (olculdu 2026-09-14, m.beton67.com) --------------------------------------------------------------------------- πŸ”΄ MOBILIN `custom.css`i MASAUSTUNUNKINDEN FARKLI BIR DOSYA (d1961d5618 vs 9c3f3baa17). Masaustunde yaptigim tarama burayi KAPSAMIYOR; iki dosya ayri ayri taranmali. Mobil dosyada sabit kodlanmis (degiskene bagli olmayan) UC kural var: 1. `.tab-nav-item-bc i` -> rgba(251,238,194,.52) [17'de cozuldu] 2. `.tab-nav-item-bc p` -> rgba(251,238,194,.38) [BURADA] 3. `.tab-nav-item-bc.menu` zemin -> rgba(238,205,36,.14) [BURADA] (2) BIR ERISILEBILIRLIK ARIZASI, yalniz renk uyumsuzlugu degil: metin 9 px / 500 ve kontrast **3,17:1**. WCAG metin icin 4,5:1 istiyor. Alt menu etiketleri mobil oyuncunun en cok baktigi yazi. rgba(255,255,255,.70) -> **9,70:1**. Ozgulluk: motor (0,2,1) + !important; `p.tab-nav-title-bc` ile (0,3,1) + !important. (3) Marka mavisine cevriliyor. Motor kurali (0,4,1) ve !important YOK; `.menu` ikilenerek (0,5,1) cikiliyor -- masaustu/mobil yukleme sirasi ters oldugu icin beraberlik birakilmiyor. ⚠️ 2 PX SERIT ZATEN VAR VE ZATEN MAVI. Motor `.tab-nav-item-bc:not(:nth-child(3))::before` ile 2 px'lik bir ust serit ciziyor, rengi `var(--gold, #eecd24)` -- yani bizim mavimiz -- ve genisligi 0'dan %40'a animasyonlu. KENDI ::before'umu YAZMIYORUM: ayni pseudo'yu iki yerden kurmak birini oldururdu. Eksik olan tek sey BIΓ‡AK ACISI; yalnizca `transform` ezilerek 18,9 derece veriliyor, `translateX(-50%)` korunuyor (dusurulseydi serit ortadan kayardi). βœ… "Icerigin uzerine binmesin" maddesi OLCULDU ve zaten saglaniyor: sayfa sonuna kaydirildiginda footer alti 759 px, nav ustu 759 px -- ortusme yok. Bu yuzden alt bosluk EKLENMEDI. */ .tab-navigation-w-bc .tab-nav-item-bc p.tab-nav-title-bc { color: rgba(255, 255, 255, .70) !important; transition: color .15s ease; } body:has(> .hdr-nav-menu-holder-bc) .tab-navigation-w-bc .tab-nav-item-bc.menu.menu, body:has(.layout-content-holder-bc .m-navigation-container-bc) .tab-navigation-w-bc .tab-nav-item-bc.menu.menu { background: rgba(var(--hero, 0, 149, 255), .14); } .tab-navigation-w-bc .tab-nav-item-bc.tab-nav-item-bc:not(:nth-child(3))::before { transform: translateX(-50%) skewX(calc(-1 * var(--kb-bicak-aci, 18.9deg))); } /* ─────────────────── Β§6 KATEGORI / HIZLI ERISIM ──────────────────────────── "Kategori alanini kart/buton gorunumunde tasarla Β· mobilde yatay kaydirma Β· aktif kategoriyi mavi vurgula" ⚠️ `.home-quick-access`e `display` YAZILMIYOR: motorun kendi custom.css'i orada `display: grid !important` yaziyor ve bu depoda bir kez flex tabanli tasarimi oldurmustu. Yalniz gorunum veriliyor. */ .home-quick-access > * { border-radius: 10px; transition: transform .16s ease, box-shadow .16s ease; } .home-quick-access > *:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px var(--gold-line); } /* Β§2 "Aktif menu ogesini mavi vurgula" β€” πŸ”΄ KURAL 2026-09-14'te KALDIRILDI. Olculdu canlida: motor aktif ana menu ogesini ZATEN isaretliyor ve bizimkinden iyi yapiyor. `/tr/promotions`ta `PROMOSYONLAR` ogesi `.active` + `aria-current="page"` aliyor, `overlay.css`teki `#root .bg-nav-btn.active` kurali ona MAVI HAP zemini (`rgb(0,149,255)`, sayfaya karsi 6,35:1) ve koyu metin (`rgb(5,6,10)`, hapa karsi **6,5:1**) veriyor. Bizim kuralimiz (0,2,0) o kurala (1,2,0) kaybediyordu, yani zaten etkisizdi. Ama SESSIZCE tehlikeliydi: motor bir gun `#root` onekini birakirsa bizimki kazanir ve MAVI HAP UZERINE MAVI METIN yazar -- kontrast 1:1, okunamaz. Etkisi olmayan ama kazandiginda zarar veren kural tutulmaz. ⚠️ Plandaki "aktif menu ogesinin altina 18,9Β° bicak" maddesi bilerek UYGULANMADI: calisan ve erisilebilir bir gosterge (hap) varken uzerine ikinci gosterge koymak gurultudur. Mobil sekme cubugunda durum TERSI -- orada motor hicbir sey isaretlemiyor, bicak oraya kondu (yukarida). */ /* ──────────────────────────── Β§16 FOOTER ─────────────────────────────────── "Footer'i koyu arka planda tasarla Β· mobilde kolonlari tek/iki kolona dusur" Olculdu: `.layout-footer-holder-bc` zemin rgb(17,26,46) (= --chrome-2) β€” zaten dogru. Eksik olan kolon davranisi ve baglanti hover'i. */ .footerLinkColLinks a:hover, .footerSocialLink:hover { color: var(--gold); } @media (max-width: 1024px) { .footerLinkCols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .footerLinkCols { grid-template-columns: minmax(0, 1fr); } } /* ─────────────────────────── Β§18 RESPONSIVE ──────────────────────────────── "Gereksiz yatay scroll'u engelle" ⚠️ Olculdu: bugun TASMA YOK (masaustu 1594/1600, mobil 375/375). Bu kural bu yuzden `overflow-x: hidden` DEGIL: var olmayan bir tasmayi gizlemek, ileride dogacak gercek bir tasmayi da gorunmez yapar ve `position: sticky` olan header'i bozar. Yalnizca tasmanin en sik kaynagi siniri aliyor. */ img, video, .sliderImage, .product-banner-img-bc { max-width: 100%; } /* ─────────────────────────── Β§19 ANIMASYONLAR ────────────────────────────── "Hover animasyonlarini KISA tut Β· performansi dusurecek agir animasyonlardan kacin" + erisilebilirlik: hareketi azaltilmis cihazda hepsini kapat. */ @media (prefers-reduced-motion: reduce) { #root .casinoGameItem:hover .casinoGameItemImage, .home-quick-access > *:hover { transform: none; } #root .casinoGameItemImage, .casinoGameItem, .promotionsListEl-bc, .featuredGameItem, .home-quick-access > * { transition: none; } } /* =========================================================================== Β§1 Β· SAYFA ZEMINI β€” ALTIN CASINO FOTOGRAFININ RENGINI SOK --------------------------------------------------------------------------- Brief Β§1: "Koyu lacivert/siyah ana arka plan kullan." OLCULDU: motorun kendi /custom.css'i (yukleme sirasi 0) sayfa zeminine /brand/site-bg.webp koyuyor -- SICAK ALTIN/AMBER bir casino fotografi (1672x941). Ortunun RENGI zaten --site-bg'den geliyordu, yani palet degisikligim oraya ulasmisti; ama ortu %80 ve kalan %20 altin, yeni mavi kimlikle carpisiyordu. Son rebrand edilmemis gorsel yuzey buydu. πŸ”΄ DORT ZORLUK, dordu de olculdu: 1) Rakip kural `body .layout-bc` (0-2-0) ve `!important` YAZIYOR. Yani `!important` olmadan yenilemez -- brief Β§21'in "yalnizca gercekten gerektiginde" kosulu burada saglaniyor. Ozgullugu `#root` (1-0-0), footer'da cift sinif (0-2-0) ile asiyoruz: ikisi de YUKLEME SIRASINDAN BAGIMSIZ kazaniyor. Sira onemli cunku masaustu ile mobilde TERS. 2) Rakip `background` KISALTMASI yaziyor. Biz longhand yaziyoruz ki arka plan RENGI (son katman, var(--site-bg)) motordan gelmeye devam etsin; kisaltma yazmak onu sifirlardi. 3) πŸ”΄ `background-blend-mode: color` TEK BASINA YETMEDI -- ve bu ancak ekranin BUYUK BOLUMU zemin oldugunda goruldu. `color` ust katmanin RENK+DOYGUNLUGUNU, alt katmanin PARLAKLIGINI kullanir: altin gider ama fotograf KARARMAZ. Kartlarin arkasindayken sorun yok gorunuyordu, bos alanda GUMUS bir zemine donusuyordu. Karartma AYRI bir katman isi. 4) Cozum uc katman: (a) opak lacivert + `color` -> fotografi yeniden RENKLENDIRIR (altin oluyor), (b) uzerine %90 lacivert `normal` -> KARARTIR, (c) en altta fotografin kendisi -> DOKU kalir. Uc katman oldugu icin `background-size`/`-attachment`/`-position`/ `-repeat` listeleri de ELLE yazilmali: motorunki iki katmana gore siralanmisti (auto, cover, auto) ve ucuncu katmanda kayardi. Denendi ve ELENDI: yalniz ortuyu %95 yapmak (altin soluyor ama hala sicak), yalniz blend (yukaridaki 3. madde). Ikisi birlikte gerekiyor. */ #root.layout-bc { background-image: linear-gradient(color-mix(in srgb, var(--site-bg) 90%, transparent), color-mix(in srgb, var(--site-bg) 90%, transparent)), linear-gradient(var(--site-bg), var(--site-bg)), url("/brand/site-bg.webp") !important; background-blend-mode: normal, color, normal !important; background-size: auto, auto, cover !important; background-position: center, center, center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-attachment: scroll, scroll, fixed !important; } /* Footer ayni fotografi --chrome-2 ortusuyle tasiyor. Rakip 0-1-0 + !important; cift sinif 0-2-0 yapiyor ki sira tersine donse de kazansin. */ .layout-footer-holder-bc.layout-footer-holder-bc { background-image: linear-gradient(color-mix(in srgb, var(--chrome-2) 90%, transparent), color-mix(in srgb, var(--chrome-2) 90%, transparent)), linear-gradient(var(--chrome-2), var(--chrome-2)), url("/brand/site-bg.webp") !important; background-blend-mode: normal, color, normal !important; background-size: auto, auto, cover !important; background-position: center, center, center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-attachment: scroll, scroll, fixed !important; } /* =========================================================================== Β§19 Β· GIRIS ANIMASYONU β€” CSS tarafi --------------------------------------------------------------------------- Brief Β§19: "Hafif giris animasyonlari ekle" Β· "Hover animasyonlarini kisa tut" "Performansi dusurecek agir animasyonlardan kacin" πŸ”΄ BU BLOK KENDI BASINA HICBIR SEYI GIZLEMEZ. `.kb-giris` sinifini yalniz Ozel Govde JS yaziyor ve YALNIZ katlamanin altindaki dugumlere veriyor. Betik hic kosmazsa, patlarsa ya da alan bosaltilirsa sayfa bugunku gibi durur -- "icerik gorunmez kaldi" arizasi yapisal olarak imkansiz. ⚠️ Yalniz `opacity` animasyonu var, `transform` YOK. Gerekcesi betigin basindaki notta: `transform` tasiyan oge, altindaki `position:fixed` cocuklar icin kapsayici blok olur ve acilir pencereleri sessizce yanlis yere koyar. */ .kb-giris { opacity: 0; transition: opacity .34s ease; /* Gorunurluk degisecegini tarayiciya onceden soyle; gecis bitince `will-change` sorumlulugu kalkmasin diye .kb-gorundu'da sifirlaniyor. */ will-change: opacity; } .kb-giris.kb-gorundu { opacity: 1; will-change: auto; } /* Ikinci savunma hatti: betik zaten hareket azaltmada hic kurulmuyor, ama sinif bir sekilde yazilmis olsa bile icerik ANINDA gorunur olmali. */ @media (prefers-reduced-motion: reduce) { .kb-giris { opacity: 1; transition: none; will-change: auto; } } /* =========================================================================== Β§11 Β· CASINO KARTI HOVER KATMANI β€” "oyun adini gradient uzerinde goster" --------------------------------------------------------------------------- OLCULDU: oyun adi zaten mutlak konumlu bir katmanda (.casinoGameItemBlock, inset 0, opacity 0 -> 1) ve gorsel karti TAM kapliyor; yani Β§11'in "gorseller karti kaplasin" maddesi zaten saglaniyordu. Eksik olan iki sey vardi: 1) Katmanin zemini DUZ bir perde: `rgba(5, 6, 10, .62)`. Duz perde oyun gorselini bastan asagi soluklastiriyor; brief GRADIENT istiyor. 2) πŸ”΄ `5, 6, 10` ESKI betON `--site-bg` degeri, ELLE GOMULMUS. Palet degisikligi oraya ulasamiyordu -- degisken degil sabit sayi. Gradient icerigin durdugu iki ucta koyu (ad ustte, butonlar altta), ortada seffafa yakin: ad okunur, oyun gorseli gorunur kalir. πŸ”΄ 2026-09-14: BU KURAL YAZILMISTI AMA KASKADI KAYBEDIYORDU. Olculdu canlida: hesaplanan deger hala `rgba(5,6,10,.62)`, gradient `none`. Sebep motorun `custom.css`indeki `.casinoGameItemBlock { background: rgba(5,6,10,.62) !important }` -- ozgulluk (0,1,0), bizimki (0,2,0). **Ozgulluk `!important`i YENMEZ**; yenmek icin bizim de `!important` yazmamiz ve ozgullugu yuksek tutmamiz gerekiyor. Iki bildirim birden isaretlendi: `background` kisayolu yazan rakip hem rengi hem goruntuyu ayni anda eziyor, yalniz birini isaretlemek otekini yine kaybettirirdi. */ .casinoGameItem .casinoGameItemBlock { background-color: transparent !important; background-image: linear-gradient( to bottom, rgba(var(--b, 6, 10, 20), .90) 0%, rgba(var(--b, 6, 10, 20), .42) 38%, rgba(var(--b, 6, 10, 20), .42) 60%, rgba(var(--b, 6, 10, 20), .93) 100%) !important; } /* Ad, gorselin acik bir bolgesine denk gelse bile okunur kalsin (Β§1 "Yazi kontrastini yuksek tut"). */ .casinoGameItem .casinoGameItemLabelBc { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); } /* =========================================================================== 15c MOTORUN SABIT KODLANMIS ALTINI -- PALET BUNU YENMEZ --------------------------------------------------------------------------- Motorun custom.css'inde altin IKI bicimde geciyor: * var(--gold, #eecd24) -> 17 kural. --gold bizde #0095FF oldugu icin geri dusus hic kullanilmiyor; bu 17 kural ZATEN paleti izliyor. * rgba(238, 205, 36, a) -> 5 kural. Degisken YOK, deger dizenin icinde. Palet ne yazarsa yazsin bu bes yer ALTIN kaliyor. Olculdu 2026-09-14 canlida, custom.css?v=9c3f3baa17 ayristirilarak. Ekranda soyle gorunuyordu: giris penceresinde "SIFRENIZI MI UNUTTUNUZ?" mavi (rgb(0,149,255)) ama alan basliklari ve "Beni hatirla" altin -- tek pencerede iki renk ailesi. Β§23 "Altin %0" diyor. OZGULLUK: motor kurallari (0,2,0) + !important. Ilk sinif IKI KEZ yazilarak (0,3,0)'a cikiliyor; boylece yuklenme sirasindan bagimsiz kazaniyor (masaustu ile mobilde sira TERS -- bkz. 15b notu). `.empty-b-text-v-bc` tek sinif (0,1,0) oldugu icin (0,2,0)'a cikariliyor. RENK SECIMI: bunlar vurgu degil IKINCIL METIN. Marka mavisine cevirmek "mavi = aksiyon" isaretini sulandirirdi -- notr beyaz alfa kullanildi. Onay kutusu dolgusu ve gecmis satiri hover'i ise YUZEY, onlar --hero. */ .entrance-popup-bc.entrance-popup-bc .form-control-title-bc { color: rgba(255, 255, 255, .62) !important; } .entrance-popup-bc.entrance-popup-bc .checkbox-control-text-bc, .entrance-popup-bc.entrance-popup-bc .privacy-police-text { color: rgba(255, 255, 255, .75) !important; } .entrance-popup-bc.entrance-popup-bc .checkbox-control-icon-bc { background: rgba(var(--hero, 0, 149, 255), .16) !important; } .historyList-bc.historyList-bc .betHistoryRow-bc:hover { background: rgba(var(--hero, 0, 149, 255), .08); } .empty-b-text-v-bc.empty-b-text-v-bc { color: rgba(255, 255, 255, .7) !important; } /* =========================================================================== 15d HEADER'DAKI BASIBOS DUZENLEYICI DUGMESI (Β§1b, dorduncu ariza) --------------------------------------------------------------------------- Canlida su dugum var (olculdu 2026-09-14, beton67.com): DIV.hm-row-bc[style="grid-template-columns:12fr"] > I.e-p-close-icon-bc.bc-i-close-remove <- z-index 99999 > DIV.hm-row-bc-inner <- BOS: 0 cocuk, 0 metin Yani icerigi olmayan bir header satiri ve icinde motorun header yoneticisinden gelen "satiri sil" kontrolu. Oyuncuya kapatma dugmesi gibi gorunuyor; konumu da kayiyor (bir olcumde x=1246, bir olcumde x=-34). BIZDEN GELMIYOR: header_custom_html, _desktop, _mobile ucu de 0 bayt. Kalici cozum motorun header yoneticisinde O SATIRI SILMEK; buradaki kural yalniz oyuncunun ekranini temizliyor. HEDEFLEME: 11 adet .hm-row-bc var, bu kontrolu tasiyan YALNIZ 1 tanesi. :has(> .hm-row-bc-inner:empty) sarti bilerek kondu -- kural boylece KENDINI SINIRLIYOR: operator o satira bir gun icerik koyarsa kontrol geri gelir ve dolu bir satir sessizce yonetilemez hale gelmez. Gercek kapatma dugmeleri .hm-row-bc'nin cocugu DEGIL, onlar etkilenmiyor. */ .hm-row-bc:has(> .hm-row-bc-inner:empty) > .e-p-close-icon-bc { display: none !important; } /* =========================================================================== 2 HEADER -- alt sinir cizgisi + GIRIS/UYE OL hiyerarsisi --------------------------------------------------------------------------- Ozgulluk: sinif adi ikileniyor (0,1,0 -> 0,2,0). Motor bu hedeflerin UCUNDE (sign-in Β· register Β· view-title-more) !important yazmiyor, o yuzden oralarda !important KULLANILMIYOR -- gereksiz !important bir sonraki turu zorlastirir. πŸ”΄ HEADER ISTISNA VE BU BIR OLCUM HATASINDAN OGRENILDI. Ilk turda "dordunde de !important yok" diye yazmistim; taramam kural listesini SON 8 kayda kirpiyordu ve aradigim kural listenin BASINDAYDI. Gercek: custom.css -> .layout-header-holder-bc { border-bottom: 0px !important } Kural yayina gitti, servis edildi, eslesti ve HICBIR SEY yapmadi (hesaplanan deger 0px kaldi). Kirpilmis kanittan "temiz" sonucu cikmaz. ALT SINIR: `border-bottom` kullaniliyor, `box-shadow` DEGIL. Motorun kendi kurali `.layout-header-holder-bc`e zaten bir box-shadow yaziyor (`0 var(--desktop-header-margin-bottom...`); kisayolu ezmek o degeri sessizce siler. Bedeli header'in 1 px uzamasi (135 -> 136 px). Brief `rgba(0,144,248,.34)` diyor; burada `--gold-line` okunuyor ve degeri `rgba(0,149,255,.34)`. Fark 5 birim mavi; ayni degeri IKINCI KEZ sabit yazmak bu oturumun butun dersine aykiri olurdu (bkz. 15c). Cizgi DEKORATIF bir ayrac (1,63:1) -- WCAG 3:1 kurali bilesen sinirlari icin, ayraclar icin degil. BIΓ‡AK MOTIFI BURAYA KONMADI. Brief'in kendi gerekcesi: motif basliklara ayrildi, her yerde kullanilirsa anlamini yitirir. Header duz cizgi aliyor. */ .layout-header-holder-bc.layout-header-holder-bc { border-bottom: 1px solid var(--gold-line) !important; } /* GIRIS = IKINCIL (kontur) Β· UYE OL = BIRINCIL (dolu gradyan). Logodaki "konturlu isaret + dolu wordmark" hiyerarsisinin birebir karsiligi. Bugun TERSI degil, hiyerarsi HIC YOKTU: .btn.sign-in -> background:none Β· border:0 Β· padding-left:0 yani buton degil CIPLAK METIN gibi duruyordu .btn.register -> rgba(var(--hero),1) yani DUZ mavi dolgu Iki dugme yan yana duruyor (648,45) ve (689,45); biri dugme gibi gorunmuyor, oteki gradyansiz. Kontrast: kontur #0095FF header zemininde 6,35:1 (bilesen >=3:1); gradyanin alt yarisi #0B5CAD uzerinde beyaz metin 6,67:1 (metin >=4,5:1). Gradyan 15b ile AYNI dize -- birincil aksiyon tek bir gorunume sahip olmali; ikinci bir gradyan tanimlamak uc ay sonra ayrisirdi. */ /* πŸ”΄ 15 "Yuvarlatma tutarli" β€” 2026-09-14: SAYFADAKI TEK AYKIRI YUVARLATMA BU KURALDI, yani kendi isimizdi. Olculdu ana sayfada: gorunur butonlarin radius dagilimi 999px x40 (`ds-btn` ailesi), 10px x3, 50% x1 ve **4px x1** -- o bir tane GIRIS butonuydu. Kardesi UYE OL 10px; ikisi yan yana duruyor ve farkli yuvarlaniyordu. `border-radius` satiri KALDIRILDI: motorun `.btn { border-radius: var(--border-radius) }` degeri (10px) miras aliniyor, yani deger tek yerden yonetiliyor. ⚠️ Iki buton AILESI hala farkli dil konusuyor: `.btn` ailesi 10px dikdortgen, `ds-btn` ailesi 999px hap. Bu bir KUSUR degil tasarim karari -- 148 butonu tek dile cevirmek ayrica konusulmali. */ .btn.sign-in.sign-in { background: transparent; border: 1px solid var(--gold); padding-left: 14px; padding-right: 14px; } /* πŸ”΄ 15 "Hover'da kenar parlar, DOLGU KAYMAZ (kontur-once)" β€” eski hali dolguyu degistiriyordu (`background: rgba(hero,.12)`), yani maddenin tam tersi. Ikincil buton zaten kontur butonu; hover'da konturu parlatmak hem brief'e uyuyor hem 7b'deki kart hover'iyla (kontur rengi degisir, dolgu durur) ayni dili konusuyor. */ .btn.sign-in.sign-in:hover { border-color: #fff; color: #fff; } .btn.register.register { background: linear-gradient(180deg, #0090f8 0%, #0d6ac8 100%); color: #fff; transition: filter .16s ease; } .btn.register.register:hover { filter: brightness(1.08); } .btn.register.register:active { filter: brightness(.94); } /* =========================================================================== 5 BOLUM BASLIKLARI -- BIΓ‡AK SERIDI --------------------------------------------------------------------------- Bicak = figurden cikan motif: 18,9 derece egimli 2-3 px serit. Brief bunu YALNIZ basliklara ve aktif menu ogesine ayirdi. Hedef `.view-title-more`: canlida 5 adet, hepsi gorunur, hepsi `.page-view-more` icinde ("SIZDEN GELENLER", "En Populer Casino Oyunlari", "En Populer Canli Casino", "ONE CIKAN BAHISLER", ...). ::before SARMALAYICIDA DEGIL BASLIKTA. `.page-view-more`in kendi ::before'u ZATEN DOLU (content: "") -- motorun kullandigi bir pseudo. Oraya yazmak motorun ogesini ezerdi; H3'un ::before'u bos (olculdu: "none"). `position: relative` bilerek basliga veriliyor: `transform` iceren bir ogenin ALTINDAKI `position:fixed` cocuklar EKRANA degil o ogeye gore konumlanir (19'daki not). Bir H3'un fixed cocugu yok, o yuzden guvenli -- ama ayni skew'u bir BOLUM KAPSAYICISINA vermek acilir pencereleri kaydirirdi. Ozgulluk: motorun `[class*="is-web"] .view-title-more` kurali (0,2,0) yalniz `color` yaziyor; padding/position icin tek sinif bile yeterdi, yine de ikilenip (0,2,0) yapildi -- masaustu/mobil yukleme sirasi ters oldugu icin beraberlikte sira karar verir ve beraberlik istenmiyor. */ .view-title-more.view-title-more { position: relative; padding-left: 13px; } .view-title-more.view-title-more::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; transform: translateY(-50%) skewX(calc(-1 * var(--kb-bicak-aci, 18.9deg))); background: var(--gold); border-radius: 1px; } /* =========================================================================== 16 FOOTER -- ust sinir cizgisi --------------------------------------------------------------------------- Zemin ZATEN dogru: `.layout-footer-holder-bc` rgb(17,26,46) = --chrome-2. Eksik olan ust kenar (olculdu: border-top 0px, ::before none). πŸ”΄ BRIEF ILE BILINCLI SAPMA. 16 "ust kenarinda ince bicak seridi" diyor, ama 2 sunu diyor: "bicak motifi basliklara ayrildi, her yerde kullanilirsa anlamini yitirir". Ikisi celisiyor. 2'nin GEREKCESI oldugu icin o kazandi: footer da header'la ayni duz 1 px cizgiyi aliyor, bicak basliklarda ve aktif menude kaliyor. Sapma brief'e islendi. ⚠️ AYNI SECICI BU DOSYADA IKINCI KEZ GECIYOR ve bu BILEREK. Yukaridaki "site-bg fotografi" blogu ayni secicide `background-*` katmanlarini !important ile kuruyor. Oraya `border-top` eklemek renk isini zemin isiyle ayni kurala tikardi; ayri property, ayri kural, ayri gerekce. Catisma yok: iki kural ORTAK HICBIR ozellik yazmiyor. */ .layout-footer-holder-bc.layout-footer-holder-bc { border-top: 1px solid var(--gold-line); } /* 23-K1/K3 (2026-09-14, olculdu): gradyan alt ucu 2,97:1 -> 3,69:1. Asagidaki uc grup 4,5:1 kapisini geciyordu: .bk-etiket 4,05 (140 oge, CMS bolum blogu), mac saati 3,81 (48), footer bagi 3,79 (14). Ozgullukler: .bk-etiket (0,1,0) Β· saat (0,3,1) Β· footer (0,1,1); hicbirinde !important yok, sinif ikilenerek geciliyor. */ .bk-etiket.bk-etiket { color: var(--kb-sonuk, #9fb3c8); } .featuredGameItemTime.featuredGameItemTime > time:last-child:nth-child(2) { color: var(--kb-sonuk, #9fb3c8); } .footerLinkColEl.footerLinkColEl a { color: var(--kb-sonuk, #9fb3c8); } /* 23-K3 ikinci tur (2026-09-14, olculdu canlida) β€” GORUNMEZ METIN. Sayfanin VARSAYILAN metin rengi yoktu: `body` hesaplanan rengi rgb(0,0,0), yani tarayici varsayilani. Motorun her bileseni rengini kendi yazdigi icin bu bugune dek gorunmuyordu; yazmayan ilk oge kara zemine KARA yaziyor. Olculdu: 5.616 ogenin 2.220'si siyah miras aliyor, 1.741'i gorunur, ama dogrudan metin dugumu tasiyan yalniz IKISI -- ve ikisi de sayfanin en ustundeki duyuru seridinde: "Telegram" ve "Guncel giris kartalbet87.com", 1020x19 px, kontrast 1,06:1. Operatorun duyurdugu GUNCEL GIRIS ADRESI okunamiyordu. Varsayilan (0,0,1) ozgullukte: motorun her sinif kurali bunu yener. Yan etki olcuUldu ve SIFIR: siyah miras alan 100 psodo-ogenin 100'unde `content: ""` (dekoratif), currentColor kullanan 0 oge, siyah boyayan 0 svg. */ body { color: rgba(255, 255, 255, .86); /* 14,52:1 */ } /* "18+" yas rozeti motorun `index.Y8VP_-at.css`inde rgb(167,31,103) -- footer zemininde 2,51:1 ve 10 px. Pembe kimlik korunarak acildi: 5,84:1. */ .footerWarningAge.footerWarningAge { color: rgb(232, 106, 170); } /* 23-K8 (2026-09-14) β€” m.beton67.com'da AYRI olculdu; masaustunde cikmayan tek dusen oge footerin lisans/telif paragrafiydi: motorun `index.BxK75iQI.css` dosyasindan `rgba(var(--b-sc), .4)`, 10 px, 3,77:1. Sirket kayit ve lisans metni; .52'ye acildi -> 5,68:1. !important yok, ozgulluk (0,1,0) -> sinif ikileniyor. */ .ftr-copy-rights-bc.ftr-copy-rights-bc { color: var(--kb-sonuk, #9fb3c8); } /* Duyuru seridi gorunur olunca iki kusuru ortaya cikti: iki span bitisik basiliyordu ("TelegramGuncel giris ...") ve metin x=0'dan, yani ekranin kenarindan basliyordu (mobilde 375 px'te belirgin). */ .header-anons-seridi .swiper-slide { display: flex; align-items: center; gap: 12px; padding: 0 12px; } /* 23-K9 (2026-09-14, olculdu) β€” KLAVYE ODAGI HIC GORUNMUYORDU. Sayfada 323 odaklanabilir oge var; orneklenen 14'unun 14'unde odak verildiginde outline/box-shadow/kenar/zemin HICBIRI degismiyordu. Sebep iki katmanli: motor 13 kuralda `outline: none` yaziyor (hicbirinde !important yok) ve geriye kalan tek gostergesi `.btn:focus` (0,2,0) arka plan tonuydu -- onu da BIZIM `.btn.a-color.a-color` (0,4,0) ve `.btn.register.register` kurallarimiz maskeliyordu. Yani gosterge zaten zayifti, tasarim katmani kalanini da goturmus. `:focus-visible` secildi (`:focus` degil): fare tiklamasinda halka cikmiyor, yalniz klavyeyle gezinende cikiyor. Ozgulluk oge+psodo (0,1,1) ve oznitelik icin (0,2,0) -> motorun (0,1,0) `outline: none` kurallarini yener. Halka `--gold` (#0095ff, sayfa zemininde 6,35:1; UI bileseni icin 3:1 esigi). Destek olculdu: CSS.supports('selector(:focus-visible)') true. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Β§7b'nin `clip-path`i DIS halkayi kirpar (kirpma kutu disini siler), o yuzden centikli kartlarda halka iceri aliniyor. `.featuredGameItem` olculdu: `tabindex="0"` tasiyor, yani gercekten odaklaniyor. */ .featuredGameItem.featuredGameItem:focus-visible, .casinoGameItem.casinoGameItem:focus-visible, .promotionsListEl-bc.promotionsListEl-bc:focus-visible { outline-offset: -4px; } /* =========================================================================== 24) CANLI DESTEK PANELI BASLIGI ORTUYORDU (plan disi -- CANLI ARIZA) OLCULDU 2026-09-14, beton67.com. Saglayici LiveChat (lisans 19930567), ucuncu taraf: `cdn.livechatinc.com/tracking.js`. Kendi `chat.betgo.digital` uygulamamiz DEGIL, yani tek kaldirac panel CSS'i. ARIZA: sohbet ACIKKEN `#chat-widget-container` `position: fixed; bottom: 0; right: 0; width: 392px; height: 714px; z-index: 2147483639; background: transparent; pointer-events: auto` oluyor. Kutunun ust bolgesi GORUNMUYOR ama iframe oldugu icin oradaki her tiklamayi YUTUYOR. `bottom: 0` sabit oldugundan kutunun ust kenari `gorunumYuksekligi - 714`; GIRIS dugmesinin alt kenari 73 px: gorunum 720 -> ust 6 ENGELLI gorunum 760 -> ust 46 ENGELLI gorunum 768 -> ust 54 ENGELLI gorunum 800 -> ust 86 ACIK gorunum 850 -> ust 136 ACIK Esik: gorunum yuksekligi **787 px'in altinda** GIRIS / UYE OL / arama olu. 1366x768 dizustunde tarayici govdesi ~660, %125 olcekli 1920x1080'de ~760 -- ikisi de esigin altinda. KANIT TAHMIN DEGIL: GIRIS'in tam merkezine yapilan GERCEK tiklama giris penceresini acmadi ve `document.activeElement` IFRAME#chat-widget-minimized oldu. Oyuncu dugmeyi GORUYOR, tikliyor, hicbir sey olmuyor. COZUM: kutuyu kirpmak degil, ALT'a yasli yuksekligini sinirlamak. LiveChat'in kendi satir ici stilinde zaten `max-height: calc(100% + 0px)` var ve ic iframe'lerin IKISI de `height: 100%` -- yani kapsayici kisalinca widget bozulmadan kisaliyor. Olculdu: acik panel 392x714 -> 392x580, sohbetin kendi baslik/kucultme dugmesi ve alt CTA'si yerinde. 140 px = olculen baslik alti (135) + 5 px pay. NEDEN `!important`: rakip bir SATIR ICI stil. Ozgullik satir ici stili yenmez; yalniz `!important` yener (LiveChat'inki `!important` degil). NEDEN `html.is-web`: mobil pakette (`html.is-mobile`) ayni widget `width/height: 100%` ile TAM EKRAN aciliyor ve orada dogrusu odur. =========================================================================== */ html.is-web #chat-widget-container { max-height: calc(100% - 140px) !important; } /* =========================================================================== 24b) AYNI ARIZANIN MOBIL HALI -- DAHA KOTUSU (plan disi -- CANLI ARIZA) OLCULDU 2026-09-14, m.beton67.com, 375x812. Masaustunde arΔ±za yalnΔ±z sohbet ACIKKEN cikiyordu. Mobilde KUCULTULMUS haldeyken de var, yani KALICI: #chat-widget-container -> 55,376 320x436 (bottom: 0) Kutu ekranin ALT YARISI. Gorunur karsilama karti onun ust bolgesinde; alt ~35 px'i seffaf ama iframe oldugu icin dokunusu yutuyor -- ve tam orada ALT SEKME CUBUGU duruyor (`.tab-navigation-w-bc`, 0,759 375x53). Isabet sinamasi, 5 sekmeden 4'u OLU: SPOR OK (x 0..76, kutunun solunda kaliyor) BAHIS KUPONU OLU (orta SLOT) OLU CANLI CASINO OLU MENU OLU Ayrica 4 urun afisi (CASINO/SLOT/SPOR/TELEGRAM) ve yuzen düğme de olu. KANIT: CANLI CASINO'ya yapilan GERCEK dokunus gezinmedi (`/tr` -> `/tr`), bunun yerine SOHBET ACILDI ve odak `IFRAME#chat-widget` oldu. Yani oyuncu kupona basiyor, sohbet aciliyor. COZUM: masaustundeki gibi yukseklik kismak ISE YARAMAZ -- kutu `bottom: 0` ile ALTA yasli, yukseklik azalinca UST kenar iniyor, alt kenar yerinde kaliyor. Burada kutunun kendisini YUKARI almak gerekiyor. bottom: 60px -> 53 px sekme cubugu + 7 px pay max-height: 100% - 60px -> sohbet ACILDIGINDA kutu `height: 100%` istiyor; yalniz `bottom` versek kutu yukari tasip kendi BASLIGINI (geri / kucult dugmeleri) ekran disina atardi. Ikisi birlikte: kutu 0..752 arasi. OLCULDU (tarayicida, canliya yazmadan once): kucuk + kuralsiz : 55,376 320x436 -> 4 sekme OLU kucuk + kurallΔ± : 55,316 320x436 -> 5 sekmenin 5'i OK acik + kurallΔ± : 0,38 375x714 -> 5 sekmenin 5'i OK, sohbetin baslik ve kucult dugmeleri yerinde =========================================================================== */ html.is-mobile #chat-widget-container { bottom: 60px !important; max-height: calc(100% - 60px) !important; } /* =========================================================================== 15e) MOBILDE DOKUNMA ALANI (Β§15: "mobilde dokunma alani >= 44 px") OLCULDU 2026-09-14, m.beton67.com 375x812: gorunur 221 dokunma hedefinin 35'i 44 px'in altinda. En degerlileri basliktaki iki dugme: GIRIS 61x28 UYE OL 58x28 Gorunumu BUYUTMUYORUZ -- baslik yalnizca 49 px ve dugmeleri buyutmek yerlesimi bozar. Bunun yerine gorunmez bir dokunma alani seriyoruz: 28 + 8 + 8 = 44. NEDEN GUVENLI (uc olcum): 1) Dugmeler y 11..39, baslik y 0..49 -> +-8 px BASLIGIN ICINDE kalir. Alt menu satiri y 89'da basliyor, yani ona degmiyor. 2) Genislik DEGISMIYOR (`inset: -8px 0`), iki dugme arasindaki 12 px bosluga dokunulmuyor -- komsu dugmenin dokunusunu calmaz. 3) `::before` ve `::after` bu dugmelerde BOS (`content: none`), yani motorun bir seyini ezmiyoruz. Olculdu tarayicida: kuralsizken dugmenin 6 px ustu/alti `hdr-main-content-bc` (olu bosluk), kurallΔ±yken `BUTON`. Engellenen oge sayisi uc durumda da AYNI (10/21) -- hicbir sey calmadi. ⚠️ `.hdr-navigation-link-bc` (92x40) ve `.user-nav-icon` (24x24) BILEREK DISARIDA: birincisinin ebeveyni `overflow: auto hidden`, yani dikey genisleme KIRPILIR; ikincisinde ikonlar arasi bosluk 8 px, yatay genisleme komsunun dokunusunu CALARDI. =========================================================================== */ html.is-mobile .btn.sign-in, html.is-mobile .btn.register { position: relative; } html.is-mobile .btn.sign-in::after, html.is-mobile .btn.register::after { content: ""; position: absolute; inset: -8px 0; }