/* ============================================================================= * themes.css — per-player selectable themes (class on : theme-classic / theme-gold) * ----------------------------------------------------------------------------- * .theme-gold = "Grand Lambada" gold look, drawn ENTIRELY IN CSS (no images): * metallic conic gold frame + dark inner fill + glass gloss + bevel + glow, * with labels/numbers/icons injected via ::before/::after (Font Awesome 6 + * plain text). Sharp, scalable, and fully re-colorable from the tokens below. * All rules scoped under .theme-gold so switching to classic restores the * original sprite-image buttons untouched. * ========================================================================== */ .theme-gold{ /* daha canlı / parlak sarı-altın (mockup tonuna yakın) */ --gL:#fff3b0; --g1:#ffd23e; --g2:#f0a81e; --g3:#8a5e0a; --g4:#5e3f06; --fillTop:#333; --fillBot:#040404; --glow:rgba(255,190,40,.62); } /* ---- metalik altın gövde (ortak) : boş .button-* div'lerine uygulanır ---- */ .theme-gold .button-bet1,.theme-gold .button-bet2,.theme-gold .button-bet3, .theme-gold .button-bet4,.theme-gold .button-bet5, .theme-gold .button-bet1egt,.theme-gold .button-bet2egt,.theme-gold .button-bet3egt, .theme-gold .button-bet4egt,.theme-gold .button-bet5egt, .theme-gold .button-selectgame,.theme-gold .button-selectgame2, .theme-gold .button-selectlines,.theme-gold .button-lines, .theme-gold .button-selectbet,.theme-gold .button-egtbet,.theme-gold .button-egtbets, .theme-gold .button-takewin,.theme-gold .button-morebutton, .theme-gold .button-autoplay,.theme-gold .button-start,.theme-gold .button-spin, .theme-gold .button-maxbet{ background: linear-gradient(180deg,#1c1c1c 0%,#070707 100%) padding-box, linear-gradient(180deg,#fff3b0 0%,#ffd23e 30%,#eaa81e 62%,#7f5608 100%) border-box !important; background-repeat:no-repeat !important; border:4px solid transparent !important; border-radius:13px !important; box-shadow:0 0 12px var(--glow), inset 0 1px 1px rgba(255,245,190,.55), inset 0 -1px 1px rgba(90,60,0,.6) !important; position:relative; overflow:hidden; display:flex !important; flex-direction:column; align-items:center; justify-content:center; color:var(--gL); font-family:Segoe UI,Arial,sans-serif; container-type:size; /* içerik butona göre oranlı ölçeklensin (cqh/cqmin) */ } /* üst yarı cam parlaklık — tüm altın butonlar */ .theme-gold .button-bet1::after,.theme-gold .button-bet2::after,.theme-gold .button-bet3::after, .theme-gold .button-bet4::after,.theme-gold .button-bet5::after, .theme-gold .button-start::after,.theme-gold .button-spin::after,.theme-gold .button-maxbet::after{ /* reserved: labels below use ::before for number, ::after for text where needed */ } /* ---- BET rakam + etiket (::before = rakam, alt etiket ayrı) ---- */ .theme-gold [class*="button-bet"]{ gap:1px; } .theme-gold .button-bet1::before{content:"1"} .theme-gold .button-bet2::before{content:"2"} .theme-gold .button-bet3::before{content:"3"} .theme-gold .button-bet4::before{content:"4"} .theme-gold .button-bet5::before{content:"5"} .theme-gold .button-bet1egt::before{content:"1"} .theme-gold .button-bet2egt::before{content:"2"} .theme-gold .button-bet3egt::before{content:"3"} .theme-gold .button-bet4egt::before{content:"4"} .theme-gold .button-bet5egt::before{content:"5"} .theme-gold [class*="button-bet"]::before{ font-weight:900; font-size:clamp(13px,44cqh,24px); line-height:.9; /* baştan sona parlak sarı; alt tonu çok az koyultuyoruz (sönük görünmesin) */ background:linear-gradient(180deg,#fff7c8 0%,#ffe873 40%,#ffd430 78%,#f6bd22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:min(1.1cqmin,1px) rgba(90,58,0,.5); paint-order:stroke; /* kontur dolgunun ALTINDA -> dolgu parlak kalır */ text-shadow:0 0 5px rgba(255,205,80,.45); } .theme-gold [class*="button-bet"]::after{ content:"BET"; font-weight:900; font-size:clamp(7px,14cqh,10px); letter-spacing:.06em; margin-top:1cqh; background:linear-gradient(180deg,#fff4be,#ffdf5c 55%,#e09512); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:min(.8cqmin,.8px) rgba(70,45,0,.6); paint-order:stroke; } /* ---- START / SPIN / MAXBET : parlak yeşil + cam parlaklık + kalın altın bevel ---- */ .theme-gold .button-start,.theme-gold .button-spin,.theme-gold .button-maxbet{ background: linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.10) 34%, rgba(255,255,255,0) 46%) padding-box, /* üst gloss */ radial-gradient(130% 95% at 50% -12%, #9dffb6 0%, #3bd45f 38%, #10a52f 72%, #0a7d24 100%) padding-box, /* yeşil */ linear-gradient(180deg,#fff6cf 0%,#ffd83f 28%,#e9a81e 60%,#7f5608 100%) border-box !important; /* altın bevel */ border:5px solid transparent !important; border-radius:16px !important; box-shadow: 0 0 16px var(--glow), inset 0 3px 6px rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,55,15,.6), inset 0 0 0 1px rgba(255,255,255,.15) !important; } .theme-gold .button-start::before{content:"START"; font-weight:900; letter-spacing:.04em; font-size:clamp(8px,22cqh,15px); color:#fff; -webkit-text-stroke:1px rgba(0,45,12,.35); paint-order:stroke; text-shadow:0 1px 0 rgba(255,255,255,.55), 0 2px 2px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.4);} .theme-gold .button-spin::before{content:"SPIN"; font-weight:900; letter-spacing:.04em; font-size:clamp(9px,30cqh,17px); color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.55);} .theme-gold .button-maxbet::before{content:"MAX"; font-weight:900; letter-spacing:.04em; font-size:clamp(9px,30cqh,17px); color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.55);} /* ---- yuvarlak buton: AUTO ---- */ .theme-gold .button-autoplay{ border-radius:50% !important; } .theme-gold .button-autoplay::before{ font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f021"; /* arrows-rotate */ font-size:clamp(10px,34cqh,20px); background:linear-gradient(180deg,#fff8cf,#ffd23e 55%,#c8860f); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 2px rgba(0,0,0,.6);} .theme-gold .button-autoplay::after{content:"AUTO"; font-size:clamp(7px,14cqh,10px); font-weight:900; letter-spacing:.04em; background:linear-gradient(180deg,#fff4be,#ffcf3a 55%,#b8830f); -webkit-background-clip:text;background-clip:text;color:transparent;} /* ---- ikon/etiketli kare butonlar (FA ikon) ---- */ .theme-gold .button-selectgame::before,.theme-gold .button-selectgame2::before{ font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f11b"; font-size:clamp(10px,34cqh,20px);} .theme-gold .button-selectlines::before,.theme-gold .button-lines::before{content:"LINES"; font-weight:900; font-size:clamp(8px,22cqh,15px);} .theme-gold .button-selectbet::before,.theme-gold .button-egtbet::before,.theme-gold .button-egtbets::before{content:"BET"; font-weight:900; font-size:clamp(9px,26cqh,16px);} .theme-gold .button-takewin::before{content:"TAKE\A WIN"; white-space:pre; text-align:center; line-height:1; font-weight:900; font-size:clamp(7px,18cqh,13px);} .theme-gold .button-morebutton::before{font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f142"; font-size:clamp(10px,34cqh,20px);} .theme-gold .button-selectgame::before,.theme-gold .button-selectgame2::before, .theme-gold .button-selectlines::before,.theme-gold .button-lines::before, .theme-gold .button-selectbet::before,.theme-gold .button-egtbet::before,.theme-gold .button-egtbets::before, .theme-gold .button-takewin::before,.theme-gold .button-morebutton::before{ background:linear-gradient(180deg,#fff7c8,#ffe873 45%,#ffd430 82%,#f6bd22); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:min(.9cqmin,.9px) rgba(90,58,0,.5); paint-order:stroke; text-shadow:0 0 4px rgba(255,205,80,.4);} /* :active feedback for all gold buttons */ .theme-gold [class*="button-"]:active{ filter:brightness(.85); } /* NOT: takewin = "Take Win" (kazanç alma) — işlevsel buton, gizlenmiyor. */ /* ======================= NAV BUTONLARI ( -> CSS) ======================= */ /* ortak: img gizle, /
'i altın gövde yap */ .theme-gold #btnLobby,.theme-gold #btncamera,.theme-gold #vlmhigh a,.theme-gold #vlmmute a, .theme-gold .coinpanel a,.theme-gold .coinpanel2 a,.theme-gold #btnfullscreen a{ position:relative; display:inline-flex !important; align-items:center; justify-content:center; gap:8px; text-decoration:none; background: linear-gradient(180deg,#1c1c1c 0%,#070707 100%) padding-box, linear-gradient(180deg,#fff3b0 0%,#ffd23e 30%,#eaa81e 62%,#7f5608 100%) border-box; background-repeat:no-repeat; border:4px solid transparent; box-shadow:0 0 12px var(--glow), inset 0 1px 1px rgba(255,245,190,.5), inset 0 -1px 1px rgba(90,60,0,.6); color:var(--gL); font-weight:900; letter-spacing:.5px; } .theme-gold #btnLobby img,.theme-gold #btncamera img,.theme-gold #vlmhigh img,.theme-gold #vlmmute img, .theme-gold .coinpanel a img,.theme-gold .coinpanel2 a img,.theme-gold #btnfullscreen a img{ display:none !important; } /* LOBBY — altın pill: taç + yazı */ .theme-gold #btnLobby{ height:46px; padding:0 18px; border-radius:999px; } .theme-gold #btnLobby::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f521";font-size:18px; background:linear-gradient(180deg,var(--gL),var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;} .theme-gold #btnLobby::after{content:"LOBBY";font-size:15px; background:linear-gradient(180deg,var(--gL),var(--g1) 40%,var(--g2) 62%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.5px rgba(60,40,0,.5);} /* kamera — yuvarlak */ .theme-gold #btncamera{ width:46px; height:46px; border-radius:50%; padding:4px; } .theme-gold #btncamera::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f03d";font-size:18px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--gL),var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;} /* ses — yuvarlak */ .theme-gold #vlmhigh a{ width:46px; height:46px; border-radius:50%; padding:4px; } .theme-gold #vlmhigh a::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f028";font-size:18px; background:linear-gradient(180deg,var(--gL),var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;} /* ses kapalı (mute) — yuvarlak, kısık ikon */ .theme-gold #vlmmute a{ width:46px; height:46px; border-radius:50%; padding:4px; } .theme-gold #vlmmute a::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f6a9";font-size:18px; background:linear-gradient(180deg,var(--gL),var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;} /* fullscreen — yuvarlak */ .theme-gold #btnfullscreen a{ width:46px; height:46px; border-radius:50%; padding:4px; } .theme-gold #btnfullscreen a::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f065";font-size:16px; background:linear-gradient(180deg,var(--gL),var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;} /* INSERT MONEY / PARA — dolu parlak altın pill */ .theme-gold .coinpanel a,.theme-gold .coinpanel2 a{ height:44px; padding:0 22px; border-radius:999px; border:2px solid #fff2c0; background-image: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%), linear-gradient(180deg,var(--gL) 0%,var(--g1) 45%,var(--g2) 70%,var(--g3) 100%); color:#4a3400; text-shadow:0 1px 0 rgba(255,255,255,.6); box-shadow:0 0 14px var(--glow), inset 0 -3px 6px rgba(120,80,0,.5); } .theme-gold .coinpanel a::after,.theme-gold .coinpanel2 a::after{content:"PARA YATIR"; font-size:14px; font-weight:900;} /* ========================================================================= * SİTE GENELİ ALTIN ÇERÇEVELER (kart/panel/modal) * Non-destructive: sadece box-shadow ile altın ring (border-radius'u takip eder, * dolguyu/boyutu değiştirmez). Sitedeki tüm kart tiplerine uygulanır. * ========================================================================= */ .theme-gold .slot-card, .theme-gold .provider-card, .theme-gold .cat-card, .theme-gold .cp-card, .theme-gold .wa-card, .theme-gold .wa-frame, .theme-gold .deposit-card, .theme-gold .fy-card, .theme-gold .info-card, .theme-gold .card, .theme-gold .modal-content{ box-shadow: inset 0 0 0 1px rgba(255,245,190,.32), /* iç highlight */ 0 0 0 2px #ffd23e, /* parlak altın */ 0 0 0 3.5px #8a5e0a, /* koyu altın kenar */ 0 0 14px rgba(255,190,40,.35) !important; /* glow */ border-color:transparent !important; } /* Genel amaçlı yeniden kullanılabilir altın çerçeve yardımcı sınıfı */ .theme-gold .gl-frame{ box-shadow: inset 0 0 0 1px rgba(255,245,190,.32), 0 0 0 2px #ffd23e, 0 0 0 3.5px #8a5e0a, 0 0 14px rgba(255,190,40,.35) !important; border-color:transparent !important; } /* ========================================================================= * GOLD TEMA ARKA PLANI (lobi/genel) — Tema=Altın seçilince otomatik gold görsel. * Klasik temada DB'deki (lobbybg) arka plan aynen görünür; bu override yalnız * .theme-gold aktifken devreye girer. Cihaza göre mobil/masaüstü görsel. * ========================================================================= */ .theme-gold .app-bg{ content:url('../img/bg_gold_desktop.jpg') !important; object-fit:cover !important; } /* Login ve genel body arka planı da gold (app-bg olmayan sayfalar: login vb.) */ .theme-gold body{ background:#060606 url('../img/bg_gold_desktop.jpg') center center / cover fixed no-repeat !important; } @media (max-width:991px){ .theme-gold .app-bg{ content:url('../img/bg_gold_mobile.jpg') !important; } .theme-gold body{ background-image:url('../img/bg_gold_mobile.jpg') !important; } } /* ========================================================================= * COIN / MENÜ PANELİ (#mySidenav) — gold temada radiuslu, altın çerçeveli, * buton rengiyle (koyu) dolu, içeriği kadar (tam boy değil) panel. * Açılma hâlâ width ile (JS) çalışır; kapalıyken (width:0) inset gölge çizgi * göstermez. Klasik temada dokunulmaz. * ========================================================================= */ .theme-gold #mySidenav{ box-sizing:border-box !important; z-index:1002 !important; /* dokunmatik katmanın üstünde */ top:50% !important; right:-400px; transform:translateY(-50%) !important; /* default: off-screen (kapalı); openNav right:14px yapar */ transition:right .25s ease, width .25s ease !important; height:auto !important; max-height:94vh !important; border-radius:16px !important; background:linear-gradient(180deg,#1c1c1c 0%,#070707 100%) !important; box-shadow:none !important; /* dış gölge yok (kapalıyken sliver bırakıyordu) */ padding:14px 12px !important; overflow:hidden !important; /* scroll yok */ } /* altın çerçeve ::before ile — panel width:0 (kapalı) iken görünmez */ .theme-gold #mySidenav::before{ content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; box-shadow:inset 0 0 0 3px #e6b234, inset 0 0 0 4px #7f5608; } /* Coinler: çözünürlük elverdikçe büyük, dar ekranda küçülür (scroll'suz) */ .theme-gold #mySidenav .number-image{ width:clamp(78px,12vh,110px) !important; height:auto !important; margin:5px !important; } .theme-gold #mySidenav #coins{ margin-top:10px !important; } .theme-gold #mySidenav .h3{ font-size:18px !important; margin-bottom:4px !important; } .theme-gold #mySidenav .h5{ font-size:12px !important; } .theme-gold #mySidenav .mt-4{ margin-top:10px !important; } .theme-gold #mySidenav .mt-3{ margin-top:8px !important; } .theme-gold #mySidenav .mt-2{ margin-top:6px !important; } /* "Tutar Girişi" butonu istenmiyor — kaldır */ .theme-gold #send-coin{ display:none !important; } /* Landscape'te ekran kısa (≈375px): coin paneli sığmıyordu → küçük coinler + dikey scroll, üstte PARA YATIR ile çakışmasın diye tepeye hizala. */ @media (orientation:landscape){ .theme-gold #mySidenav{ top:0 !important; transform:none !important; height:100dvh !important; max-height:100dvh !important; overflow-y:auto !important; padding:8px 10px !important; } .theme-gold #mySidenav .number-image{ width:clamp(48px,20dvh,78px) !important; margin:4px !important; } .theme-gold #mySidenav .h3{ font-size:15px !important; } .theme-gold #mySidenav .h5{ font-size:11px !important; } } /* Yükleme overlay'i teke düşür: "Connecting, Please Wait…" (spinner) kalsın, çift gösterilen düz "Please Wait.." (.connection) gizlensin. */ .theme-gold .connection{ display:none !important; } /* ========================================================================= * SLOTV3 / LOBİ ALTIN VURGULAR (header altı çizgi, yan bar sağı, tab/duyuru/ * grup/geri çerçeveleri, bölüm başlığı altı çizgi) * ========================================================================= */ .theme-gold .app-header{ border-bottom:2px solid #e6b234 !important; box-shadow:0 2px 10px rgba(255,190,40,.20) !important; } .theme-gold .sidebar{ border-right:2px solid #e6b234 !important; box-shadow:2px 0 10px rgba(255,190,40,.15) !important; } .theme-gold .announcement-bar, .theme-gold .category-tab, .theme-gold .back-btn, .theme-gold .group-banner{ box-shadow:inset 0 0 0 1px rgba(255,245,190,.30), 0 0 0 2px #e6b234, 0 0 12px rgba(255,190,40,.28) !important; border-color:transparent !important; border-radius:12px !important; } .theme-gold .section-header{ border-bottom:2px solid #e6b234 !important; padding-bottom:6px !important; } /* ---- Sidebar tema-seçici aktif durum ---- */ .theme-gold .theme-pick[data-theme="gold"], .theme-classic .theme-pick[data-theme="classic"]{ outline:2px solid #e6b234; } /* Ekran modu değiştirme oku (back-btn) — newui'da istenmiyor, gizle */ .btnDisplayMode{ display:none !important; } /* ========================================================================= * MASAÜSTÜ GOLD RÖTUŞLARI (kullanıcı geri bildirimi) * ========================================================================= */ @media (min-width:992px){ /* GAMES butonuna yazı ekle (sadece ikon vardı) */ .theme-gold .button-selectgame::after, .theme-gold .button-selectgame2::after{ content:"GAMES"; font-weight:900; font-size:clamp(7px,15cqh,10px); margin-top:3cqh; letter-spacing:.03em; background:linear-gradient(180deg,#fff7c8,#ffd430 70%,#f6bd22); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:.6px rgba(90,58,0,.5); paint-order:stroke; } /* AUTO tam yuvarlak (elips değil) */ .theme-gold .button-autoplay{ width:auto !important; height:100% !important; aspect-ratio:1/1 !important; margin:0 auto !important; } /* Alt bar: karbon doku yerine siyah + altın üst çizgi; butonlar üst/alt boşlukla biraz küçük (align-items:center KULLANMA — boş div'leri çökertiyor). */ .theme-gold .keyboardall{ background:#0a0a0a !important; background-image:none !important; border-top:2px solid #e6b234 !important; box-shadow:inset 0 3px 10px rgba(0,0,0,.6), 0 -1px 6px rgba(255,190,40,.25) !important; padding:8px 6px !important; } /* BET (1-5) biraz daralsın, START genişlesin, LINES/BET küçülsün */ .theme-gold .keyboardall > div:has(.button-bet1), .theme-gold .keyboardall > div:has(.button-bet2), .theme-gold .keyboardall > div:has(.button-bet3), .theme-gold .keyboardall > div:has(.button-bet4), .theme-gold .keyboardall > div:has(.button-bet5){ flex:0 0 auto !important; max-width:5.2% !important; } .theme-gold .keyboardall > div:has(.button-selectlines), .theme-gold .keyboardall > div:has(.button-selectbet), .theme-gold .keyboardall > div:has(.button-selectgame), .theme-gold .keyboardall > div:has(.button-selectgame2), .theme-gold .keyboardall > div:has(.button-takewin){ flex:0 0 auto !important; max-width:7% !important; display:flex !important; align-items:center !important; } .theme-gold .keyboardall > div:has(.button-start){ flex:0 0 auto !important; min-width:150px !important; } /* GAMES / LINES / BET / WIN daha kısa (dikdörtgen görünüm), dikeyde ortalı */ .theme-gold .button-selectlines, .theme-gold .button-selectbet, .theme-gold .button-selectgame, .theme-gold .button-selectgame2, .theme-gold .button-takewin{ height:60% !important; } /* Sol üst bilgi paneli — temaya uygun altın çerçeve */ .theme-gold .playerinfo{ background: linear-gradient(180deg,#1c1c1c,#070707) padding-box, linear-gradient(180deg,#fff3b0,#ffd23e 30%,#eaa81e 62%,#7f5608) border-box !important; border:3px solid transparent !important; border-radius:10px !important; padding:6px 12px !important; width:auto !important; box-shadow:0 0 10px var(--glow), inset 0 1px 1px rgba(255,245,190,.4) !important; } } /* ========================================================================= * MOBİL GOLD RÖTUŞLARI (kullanıcı geri bildirimi) * ========================================================================= */ @media (max-width:991px){ /* kenarlıklar daha ince (kalın duruyordu) */ .theme-gold [class*="button-"]{ border-width:2px !important; } .theme-gold #btnLobby,.theme-gold #btncamera,.theme-gold #vlmhigh a,.theme-gold #vlmmute a, .theme-gold .coinpanel a,.theme-gold .coinpanel2 a,.theme-gold #btnfullscreen a{ border-width:2px !important; } /* AUTO ve yuvarlak nav butonları TAM daire (elips değil) */ .theme-gold .button-autoplay{ width:auto !important; height:100% !important; aspect-ratio:1/1 !important; margin:0 auto !important; } .theme-gold #btncamera,.theme-gold #vlmhigh a,.theme-gold #vlmmute a,.theme-gold #btnfullscreen a{ aspect-ratio:1/1 !important; } /* video üstündeki şeffaf cover'lar üst barı kaplayıp tıklamayı yiyordu — geçir */ .theme-gold .slotvideocover,.theme-gold .slotvideocoverup{ pointer-events:none !important; } /* video/dokunmatik katmanları playerinfo'nun ALTINA zorla (JS inline yüksek z-index verse bile) → üst bar tuşları tıklanabilir kalsın. Touch video üstünde çalışmaya devam. */ .theme-gold .cerceve,.theme-gold #container,.theme-gold #container-slot, .theme-gold #containerup,.theme-gold #janus-video,.theme-gold #videoframe, .theme-gold #divscreen,.theme-gold #divscreen3,.theme-gold .screen,.theme-gold .press{ z-index:0 !important; } /* Top bar: çerçeve YOK; dark bar + altın ALT çizgi; yüksekliği içerik kadar (küçük). z-index PARA YATIR (coinpanel z-index:1001) ile aynı olmalı ki nav tuşları da video katmanının ÜSTÜNDE ve tıklanabilir olsun. */ .theme-gold .playerinfo{ position:relative !important; z-index:1001 !important; height:auto !important; min-height:0 !important; /* bar içerik kadar (küçüldü) */ background:#0a0a0a !important; background-image:none !important; border-bottom:2px solid #e6b234 !important; box-shadow:0 2px 6px rgba(255,190,40,.25) !important; align-items:center !important; flex-wrap:nowrap !important; padding:2px 6px !important; padding-right:112px !important; /* sağdaki PARA YATIR ile çakışmasın */ } /* Oyuncu bilgi kutusu: çerçeve iptal, kompakt, sola dayalı — boşluk kalksın */ .theme-gold .playername{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 6px !important; text-align:left !important; flex:1 1 auto !important; min-width:0 !important; } /* LOBBY: sol boşlukta, taç + "LOBBY" yazılı pill */ .theme-gold .class-lobby{ order:-1 !important; display:flex !important; align-items:center !important; } .theme-gold #btnLobby{ width:auto !important; aspect-ratio:auto !important; height:28px !important; padding:0 10px !important; border-radius:999px !important; gap:5px !important; } .theme-gold #btnLobby::before{ font-size:12px !important; pointer-events:none !important; } .theme-gold #btnLobby::after{ display:inline !important; font-size:11px !important; pointer-events:none !important; } /* tıklama garanti: üstte ve tıklanabilir; içteki gizli img tıklamayı yemesin */ .theme-gold #btnLobby{ position:relative !important; z-index:3 !important; pointer-events:auto !important; cursor:pointer !important; } .theme-gold #btnLobby img{ pointer-events:none !important; } /* NOT: mobil oran override'ları (keyboardall/camera yükseklik) keypad'i bozuyordu; varsayılan newui oranlarına dönüldü (butonlar görünür kalsın). Video büyütme ayrıca .layout-mockup ile güvenli şekilde ele alınacak. */ /* stream hızı: kutuda yükseklik yapıyordu → video üstünde transparan overlay, SOLA dayalı */ .theme-gold #streamBitrate{ position:fixed !important; left:6px !important; right:auto !important; top:50px; z-index:40; text-align:left !important; background:transparent !important; padding:0 !important; margin:0 !important; text-shadow:0 1px 2px rgba(0,0,0,.9); font-size:11px !important; } /* tam ekran (expand) mobilde gereksiz — kolonuyla birlikte kaldır (sol boşluk kalmasın) */ .theme-gold .playerinfo > div:has(.class-fullscreen){ display:none !important; } .theme-gold .class-fullscreen, .theme-gold #btnfullscreen{ display:none !important; } /* Top bar kolonları: bootstrap %'leri yerine doğal genişlik (üst üste binme gitsin) */ .theme-gold .playerinfo > div{ flex:0 0 auto !important; width:auto !important; max-width:none !important; } .theme-gold .playerinfo > div:has(.playername){ flex:1 1 auto !important; min-width:0 !important; } /* LOBBY kolonunu EN SOLA al */ .theme-gold .playerinfo > div:has(.class-lobby){ order:-1 !important; } /* nav yuvarlak butonları (üst bar %25 küçültüldü) */ .theme-gold #btncamera,.theme-gold #vlmhigh a,.theme-gold #vlmmute a{ width:28px !important; height:28px !important; } .theme-gold #btncamera::before,.theme-gold #vlmhigh a::before,.theme-gold #vlmmute a::before{ font-size:13px !important; } /* PARA YATIR (coinpanel): en sağda, tepede, ince — SADECE buton kadar yer kaplasın (width:auto). Aksi halde geniş absolute div nav tıklamalarını yiyordu. */ .theme-gold .coinpanel,.theme-gold .coinpanel2{ position:absolute !important; right:6px !important; top:6px !important; left:auto !important; transform:none !important; width:fit-content !important; height:auto !important; z-index:1001 !important; margin:0 !important; } /* #btnCoin sarmalayıcısı da tüm üst barı kaplayıp (boş alanı) nav tıklamalarını yemesin — tıklama sadece coinpanel'in kendisine (PARA YATIR) gitsin. */ .theme-gold #btnCoin{ pointer-events:none !important; } .theme-gold .coinpanel,.theme-gold .coinpanel2{ pointer-events:auto !important; } .theme-gold .coinpanel a,.theme-gold .coinpanel2 a{ height:26px !important; min-height:0 !important; line-height:1 !important; padding:0 12px !important; } .theme-gold .coinpanel a::after,.theme-gold .coinpanel2 a::after{ font-size:11px !important; } /* === SOL BET DRAWER (#mySidenav2) — LINES ile açılır (durmaoyna gibi) === Kapalı: soldan ekran dışına (transform). .open ile içeri kayar. Buton rengiyle (koyu) dolu, altın çerçeveli, sağ köşeleri radiuslu. İçerik: TAKE WIN (sol) + BET 1-5 dikey (sağ). bet/takewin gold stilleri kendi kurallarından gelir. */ .theme-gold #mySidenav2{ position:fixed !important; top:50% !important; left:0 !important; transform:translate(-115%,-50%) !important; transition:transform .25s ease !important; width:min(60%,300px) !important; height:min(68vh,440px) !important; max-height:72vh !important; z-index:1002 !important; box-sizing:border-box !important; display:flex !important; flex-direction:row !important; gap:10px !important; padding:12px !important; background:linear-gradient(180deg,#1c1c1c 0%,#070707 100%) !important; border-radius:0 16px 16px 0 !important; overflow:hidden !important; } /* Landscape: kısa ekran → orta boy drawer; bet tuşları aşırı büyümesin */ @media (orientation:landscape){ .theme-gold #mySidenav2{ width:min(58%,380px) !important; height:94dvh !important; max-height:94dvh !important; padding:10px !important; gap:8px !important; } .theme-gold #mySidenav2 .bets-levels{ gap:5px !important; } } .theme-gold #mySidenav2::before{ content:""; position:absolute; inset:0; border-radius:0 16px 16px 0; pointer-events:none; box-shadow:inset 0 0 0 3px #e6b234, inset 0 0 0 4px #7f5608; } .theme-gold #mySidenav2.open{ transform:translate(0,-50%) !important; } .theme-gold #mySidenav2 .bets-takewin{ flex:1 1 0; display:flex; align-items:stretch; } .theme-gold #mySidenav2 .bets-takewin .button{ width:100% !important; height:100% !important; min-height:0 !important; } .theme-gold #mySidenav2 .bets-levels{ flex:1 1 0; display:flex; flex-direction:column; gap:8px; } .theme-gold #mySidenav2 .bets-levels .button{ width:100% !important; flex:1 1 0 !important; min-height:0 !important; } /* === ALT BAR: TEK SABİT KEYBOARD (swiper/bet-swap iptal) === Base CSS'te keyboard1 bazı modlarda position:absolute; left:0; width:11%; height:329px (sol dikey şerit) olup üst-sol nav tuşlarını KAPATIYOR ve alt barı bozuyordu. Hepsini düz akışa sabitliyoruz; keyboard2/3 (bet-swap) gizli. (BET 1-5 menüsü ileride masterdo gibi SOLDAN açılacak.) */ /* Yükseklik dağılımını flex ile yönet (yüzde matematiği güvenilmez çünkü mobilde playerinfo height:auto = içerik kadar). #app flex-column: playerinfo (içerik) + cerceve (kalan alanı tam doldurur). cerceve içinde: camera (flex:1) + alt bar (8.4vh sabit). SetScreen #container'ı camera-slider.height()'ten kurduğu için container+divscreen(touch)+ video birlikte ölçeklenir; boşluk/letterbox kalkar, dokunmatik hizası korunur. */ .theme-gold #app{ display:flex !important; flex-direction:column !important; } .theme-gold .cerceve{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; } .theme-gold .camera,.theme-gold .camera-slider{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; } .theme-gold .keyboardall{ flex:0 0 auto !important; background:#0a0a0a !important; background-image:none !important; height:8.4dvh !important; padding:4px 6px !important; /* dvh: iOS adres barı vh'yi şişirip barı büyütüyordu */ border-top:2px solid #e6b234 !important; box-shadow:inset 0 3px 8px rgba(0,0,0,.55), 0 -1px 5px rgba(255,190,40,.25) !important; display:flex !important; align-items:stretch !important; } .theme-gold .keyboard-swiper{ position:static !important; transform:none !important; width:100% !important; height:100% !important; display:flex !important; flex-direction:column !important; justify-content:center !important; } .theme-gold .keyboard1,.theme-gold .keyboard1-slider{ position:static !important; left:auto !important; top:auto !important; width:100% !important; height:100% !important; transform:none !important; display:flex !important; flex-direction:row !important; align-items:stretch !important; justify-content:center !important; gap:5px !important; } /* bet-swap satırları (keyboard2/3) bottom bar'da gizli — sol menüye taşınacak */ .theme-gold .keyboard2,.theme-gold .keyboard2-slider,.theme-gold .keyboard3{ display:none !important; } /* hücreler eşit; butonu dikeyde ORTALA (butonlara net yükseklik verildiği için çökmez) */ .theme-gold .keyboard1 > div{ flex:1 1 0 !important; max-width:none !important; min-width:0 !important; padding:0 2px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* GAMES/BET/LINES: küçük kare (barı doldurmaz), dikeyde ortalı */ .theme-gold .keyboard1 .button{ width:100% !important; height:76% !important; min-height:0 !important; } /* START: büyük (tam yükseklik) */ .theme-gold .keyboard1 .button-start{ height:100% !important; } /* AUTO: tam yuvarlak */ .theme-gold .keyboard1 .button-autoplay{ height:100% !important; width:auto !important; aspect-ratio:1/1 !important; margin:0 auto !important; } /* 3 nokta (morebutton) istenmiyor — kolonuyla birlikte kaldır (flex yer kaplamasın) */ .theme-gold .class-morebutton,.theme-gold .button-morebutton, .theme-gold .keyboard1 > div:has(.button-morebutton){ display:none !important; } /* START biraz daha geniş (yeşil vurgulu) */ .theme-gold .keyboard1 > div:has(.button-start){ flex:1.45 1 0 !important; } /* alttaki 6-7px boşluk: keyboardall alt padding/margin + safe-area sıfırla */ .theme-gold .keyboardall{ padding-bottom:0 !important; margin-bottom:0 !important; } .theme-gold #app{ margin-bottom:0 !important; } /* GAMES butonuna mobilde de "GAMES" yazısı */ .theme-gold .button-selectgame::after, .theme-gold .button-selectgame2::after{ content:"GAMES"; font-weight:900; font-size:clamp(7px,14cqh,10px); margin-top:2cqh; letter-spacing:.02em; background:linear-gradient(180deg,#fff7c8,#ffd430 70%,#f6bd22); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:.5px rgba(90,58,0,.5); paint-order:stroke; } } /* ========================================================================= * YAN EKRAN (LANDSCAPE) — son_kmc düzeni: video SOLU tam doldurur, tuşlar * SAĞDA dikey rayda alt alta. Portrait için yazdığımız flex/height kuralları * (üstteki max-width:991px bloğu her iki yönde geçerli) burada NÖTRLENİR. * Bu blok sonra geldiği için eşit özgüllükte !important'ta kazanır. * SetScreen video/#container'ı camera-slider ölçüsünden kurduğu için camera'ya * gerçek boyut (100vh + kalan genişlik) veriyoruz ki video görünsün. * ========================================================================= */ @media (max-width:991px) and (orientation:landscape){ :root{ --gold-rail: max(98px, 17vw); } /* portrait flex düzenini geri al */ .theme-gold #app{ display:block !important; } /* video alanı: sol tarafı tam kapla (ray genişliği kadar boşluk bırak) */ .theme-gold .cerceve{ display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:calc(100vw - var(--gold-rail)) !important; height:100dvh !important; flex:none !important; min-height:0 !important; overflow:hidden !important; } .theme-gold .camera,.theme-gold .camera-slider{ display:flex !important; position:relative !important; left:0 !important; top:0 !important; width:100% !important; height:100dvh !important; flex:none !important; min-height:0 !important; } .theme-gold .cameradiv{ width:100% !important; height:100% !important; } /* NOT: #container / #janus-video / #divscreen boyutlandırmasına DOKUNMUYORUZ — SetScreen (son_kmc tam sürümü) rate-crop'u kendisi yapar. Sadece video ALANINI (cerceve/camera) ve rayı kuruyoruz. */ /* LOBBY/kamera/ses SAĞ RAYA: PARA YATIR'ın altında. LOBBY tam satır, kamera+ses alt satırda yan yana. playername/bitrate landscape'te gizli (yer yok). */ .theme-gold .playerinfo{ position:fixed !important; right:0 !important; left:auto !important; top:42px !important; bottom:auto !important; width:var(--gold-rail) !important; height:auto !important; min-height:0 !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; background:transparent !important; border:none !important; box-shadow:none !important; z-index:1002 !important; padding:2px 4px !important; gap:4px !important; } .theme-gold .playerinfo > div{ flex:0 0 auto !important; width:auto !important; padding:0 !important; margin:0 !important; } .theme-gold .playerinfo > div:has(.playername), .theme-gold .playerinfo .playername, .theme-gold .playerinfo > div:has(.class-fullscreen){ display:none !important; } /* LOBBY: tam satır */ .theme-gold .playerinfo > div:has(.class-lobby){ order:-1 !important; flex:0 0 100% !important; display:flex !important; justify-content:center !important; } .theme-gold .playerinfo #btnLobby{ width:auto !important; } /* kamera + ses: alt satırda yan yana */ .theme-gold .playerinfo > div:has(.class-camera){ order:1 !important; } .theme-gold .playerinfo > div:has(.class-volume){ order:2 !important; } /* === SAĞ DİKEY RAY === */ .theme-gold .keyboardall{ position:fixed !important; right:0 !important; top:0 !important; left:auto !important; bottom:auto !important; width:var(--gold-rail) !important; height:100dvh !important; border-top:none !important; border-left:2px solid #e6b234 !important; box-shadow:inset 2px 0 8px rgba(0,0,0,.55), -1px 0 6px rgba(255,190,40,.25) !important; background:#0a0a0a !important; padding:6px 5px !important; display:flex !important; align-items:stretch !important; z-index:1000 !important; } .theme-gold .keyboard-swiper{ width:100% !important; height:100% !important; display:flex !important; flex-direction:column !important; justify-content:center !important; } /* tuşlar alt alta, eşit; morebutton gizli */ .theme-gold .keyboard1,.theme-gold .keyboard1-slider{ position:static !important; left:auto !important; top:auto !important; transform:none !important; width:100% !important; height:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:space-evenly !important; gap:5px !important; padding-top:100px !important; /* PARA YATIR + LOBBY + kamera/ses bloğunun altından başla */ } .theme-gold .keyboard1 > div{ flex:1 1 0 !important; width:100% !important; max-width:none !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:2px 0 !important; margin:0 !important; } .theme-gold .keyboard1 > div:has(.button-morebutton){ display:none !important; } /* GAMES/BET/LINES: dikdörtgen; START daha belirgin; AUTO tam daire */ .theme-gold .keyboard1 .button{ width:92% !important; height:82% !important; min-height:0 !important; } .theme-gold .keyboard1 .button-start{ height:92% !important; } /* AUTO: landscape'te daire yerine dikdörtgen + belirgin "AUTO" yazısı (ikon gizli) */ .theme-gold .keyboard1 .button-autoplay{ height:82% !important; width:92% !important; aspect-ratio:auto !important; border-radius:12px !important; margin:0 auto !important; } .theme-gold .keyboard1 .button-autoplay::before{ display:none !important; } .theme-gold .keyboard1 .button-autoplay::after{ content:"AUTO" !important; margin-top:0 !important; font-size:clamp(9px,30cqh,17px) !important; } .theme-gold .keyboard1 > div:has(.button-start){ flex:1.4 1 0 !important; } .theme-gold .keyboard1 > div:has(.button-autoplay){ flex:1.2 1 0 !important; } /* coin panel açılınca PARA YATIR (coinpanel) üstte kalmasın */ .theme-gold #mySidenav{ z-index:1004 !important; } /* PARA YATIR: rayın en üstünde, ray genişliğine sığsın (taşmasın) */ .theme-gold .coinpanel,.theme-gold .coinpanel2{ position:fixed !important; right:0 !important; top:4px !important; left:auto !important; z-index:1003 !important; width:var(--gold-rail) !important; display:flex !important; justify-content:center !important; padding:0 4px !important; } .theme-gold .coinpanel a,.theme-gold .coinpanel2 a{ width:100% !important; height:32px !important; padding:0 4px !important; } .theme-gold .coinpanel a::after,.theme-gold .coinpanel2 a::after{ font-size:9px !important; letter-spacing:0 !important; } } /* ========================================================================= * KULLANICI RÖTUŞLARI * ========================================================================= */ /* GAMES butonu: ikon render sorunlu (dik+yan) → ikonu kaldır, sadece "GAMES" yazısı */ .theme-gold .button-selectgame::before,.theme-gold .button-selectgame2::before{ content:none !important; } .theme-gold .button-selectgame::after,.theme-gold .button-selectgame2::after{ content:"GAMES" !important; margin-top:0 !important; font-size:clamp(9px,26cqh,15px) !important; letter-spacing:.02em !important; } /* Üst bar (portrait): LOBBY ile kamera+ses arasına boşluk (kamera grubu playername'e yaklaşsın) */ @media (max-width:991px) and (orientation:portrait){ .theme-gold .playerinfo > div:has(.class-camera){ margin-left:18px !important; } } /* ========================================================================= * LOGIN SAYFASI (gold) — arka plan gold imaja bağlı (DB loginbg'ye gerek yok, * lobby gibi tema=gold iken otomatik) + login kartına altın çerçeve. * .showcase inline background'u !important ile eziyoruz. Masaüstü/mobil imaj. * ========================================================================= */ .theme-gold .showcase{ background-color:#111 !important; background-image:url('../img/bg_gold_desktop.jpg') !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; background-attachment:fixed !important; } @media (max-width:991px){ .theme-gold .showcase{ background-image:url('../img/bg_gold_mobile.jpg') !important; background-attachment:scroll !important; } } .theme-gold .login-card{ border:3px solid transparent !important; border-radius:16px !important; background: linear-gradient(rgba(18,14,5,0.90),rgba(18,14,5,0.90)) padding-box, linear-gradient(180deg,#fff3b0,#ffd23e 30%,#eaa81e 62%,#7f5608) border-box !important; box-shadow:0 0 20px rgba(255,190,40,.35), inset 0 1px 1px rgba(255,245,190,.35) !important; }