/* ============================================================================= PARA OYUNU · PREMIUM KATMAN ----------------------------------------------------------------------------- NEDEN VAR (2026-08-07 tasarım turu) Patron ekranları "sıradan, sanki yönetim paneli, gerçek bir oyun arayüzü gibi değil" diye işaretledi. Denetimde üç somut sebep çıktı: 1. Yüzeyler NÖTR GRİ idi (#1A1A1A/#242424/#363636). Nötr gri + tek mavi vurgu evrensel yönetim paneli görüntüsüdür. (tokens.css'te düzeltildi: yüzeyler artık markanın mürekkep-lacivert skalasında.) 2. DERİNLİK YOKTU. Her kart aynı düz dolgu + 1px gri kenarlık. Işık yok, malzeme yok, yükseklik yok. Oyun arayüzü sahne gibi kurulur: zemin, üstten ışık, yüzeyin ışığı yakalayan kenarı, temas gölgesi. 3. VURGU RENGİ IŞIK YAYMIYORDU. Buz mavisi yalnız metin ve kenarlık rengi olarak kullanılıyordu; premium his, vurgunun ışık kaynağı gibi davranmasından gelir (hâle, kenar parlaması, iç aydınlanma). BU DOSYA NE YAPAR Yapıya ve düzene DOKUNMAZ. Yalnız görsel özellikleri (arka plan, kenarlık, gölge, renk, geçiş) yükseltir. Böylece tek dosyayla 47 sayfanın tamamı birden premium olur ve gerekirse tek satır kaldırılarak geri alınabilir. YÜKLEME SIRASI: accents.css'ten HEMEN SONRA gelir; sayfaya özel dosyalar (lobi.css, dashboard.css ...) bundan sonra yüklenir ve gerektiğinde ezer. KURALLAR - Bölüm etiketlerinin önüne dekoratif çizgi (eyebrow) KONMAZ, patron istemiyor. - prefers-reduced-motion açıkken tüm hareket kapanır. - Kontrast AA altına düşmez. ============================================================================= */ :root { /* Işık ve malzeme değişkenleri: aşağıdaki kuralların tek kaynağı. */ --pr-ust-isik: rgba(255, 255, 255, 0.07); /* yüzeyin üst kenarı ışığı yakalar */ --pr-ic-hale: rgba(63, 199, 244, 0.05); /* yüzey içi hafif buz aydınlanması */ --pr-kenar: rgba(120, 170, 210, 0.14); /* nötr gri yerine marka tonlu kenar */ --pr-kenar-guclu: rgba(63, 199, 244, 0.30); --pr-golge-yumusak: 0 1px 2px rgba(2, 5, 10, 0.40), 0 8px 24px -8px rgba(2, 5, 10, 0.55); --pr-golge-kalkik: 0 2px 4px rgba(2, 5, 10, 0.45), 0 18px 44px -12px rgba(2, 5, 10, 0.70); --pr-hale-buz: 0 0 0 1px rgba(63, 199, 244, 0.20), 0 8px 30px -6px rgba(63, 199, 244, 0.28); --pr-hale-altin: 0 0 0 1px rgba(232, 199, 102, 0.22), 0 8px 30px -6px rgba(232, 199, 102, 0.24); --pr-gecis: 180ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* ============================================================================= 1. SAHNE · gövde artık düz dolgu değil, ışıklandırılmış bir zemin ----------------------------------------------------------------------------- Dört katman: üstten buz mavisi sahne ışığı, sağ altta ölçülü sıcak karşı ışık (kumarhane sıcaklığı; kış teması DEĞİL, yalnız denge için), taban gradyanı ve en üstte çok ince bir gren. Grenin işi bantlanmayı kırmak ve yüzeye fiziksel bir doku vermek: düz dijital dolgular ucuz görünür. ============================================================================= */ body { background-color: var(--hy-bg); background-image: radial-gradient(120% 80% at 50% -10%, rgba(63, 199, 244, 0.13) 0%, rgba(63, 199, 244, 0) 55%), radial-gradient(90% 70% at 100% 105%, rgba(232, 199, 102, 0.05) 0%, rgba(232, 199, 102, 0) 60%), linear-gradient(180deg, #0A101A 0%, #080C13 60%, #06090F 100%); background-attachment: fixed; background-repeat: no-repeat; } /* İnce gren: yüzeyin üstünde durur, tıklamayı engellemez. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.30; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ============================================================================= 2. YÜZEY MALZEMESİ · kartlar dikdörtgen değil, ışık alan malzeme ----------------------------------------------------------------------------- Üç işaret birlikte "yükseklik" hissi kurar: a) dikey gradyan -> ışık yukarıdan geliyor b) üst kenar ışığı (inset 1px) -> kenar ışığı yakalıyor c) iki katmanlı gölge -> yakın temas gölgesi + uzak ortam gölgesi Tek bir düz dolgu + gri kenarlık bunların hiçbirini söylemiyordu. ============================================================================= */ .card, .dash-panel, .dash-stat, .dash-hero, .dash-sec, .pf2-card, .pf2-hero, .cz2-card, .cz2-hold, .sz2-card, .sz2-hero, .gv2-card, .gv2-hero, .gv2-quest, .fr2-card, .modal-dialog, .lby-menu { background-color: var(--hy-surface); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 38%), radial-gradient(120% 90% at 50% 0%, var(--pr-ic-hale) 0%, rgba(63, 199, 244, 0) 62%); border-color: var(--pr-kenar); box-shadow: inset 0 1px 0 0 var(--pr-ust-isik), var(--pr-golge-yumusak); } /* Hero/öne çıkan yüzeyler daha güçlü ışık alır: sayfa hiyerarşisi görünür olsun. */ .dash-hero, .pf2-hero, .sz2-hero, .gv2-hero { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%), radial-gradient(110% 100% at 12% 0%, rgba(63, 199, 244, 0.13) 0%, rgba(63, 199, 244, 0) 58%); border-color: rgba(63, 199, 244, 0.20); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.09), var(--pr-golge-kalkik); } /* Tıklanabilir kartlar yaklaşınca yükselir. Sadece süs değil: neyin tıklanabilir olduğunu söyleyen tek işaret buydu, önceden hiç yoktu. */ a.card, a.dash-game, a.dash-luck__card, button.dash-reward, .fr2-card, .cz-pack { transition: transform var(--pr-gecis), box-shadow var(--pr-gecis), border-color var(--pr-gecis); } a.card:hover, a.dash-game:hover, a.dash-luck__card:hover, button.dash-reward:hover, .cz-pack:hover { transform: translateY(-2px); border-color: var(--pr-kenar-guclu); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), var(--pr-golge-kalkik), 0 0 26px -8px rgba(63, 199, 244, 0.35); } /* ============================================================================= 3. DÜĞMELER · ağırlık kazanır ----------------------------------------------------------------------------- Önceki hâl: çıplak 1px kenarlıklı hap düğmeler. Bu, yönetim paneli dilidir. Oyun düğmesi basılabilir bir NESNE gibi durmalı: dolgu, üstten iç ışık, renkli ortam hâlesi ve gerçek bir basılma durumu. ============================================================================= */ .btn-primary, .btn-cta, .dash-panel__cta { background-image: linear-gradient(180deg, #5AD2F7 0%, #3FC7F4 46%, #22ADDB 100%); border: 0; color: var(--hy-color-on-primary); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(4, 20, 28, 0.22), 0 2px 6px rgba(2, 5, 10, 0.40), 0 10px 26px -10px rgba(63, 199, 244, 0.60); transition: transform 120ms ease, box-shadow var(--pr-gecis), filter var(--pr-gecis); } .btn-primary:hover, .btn-cta:hover, .dash-panel__cta:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(2, 5, 10, 0.45), 0 14px 34px -10px rgba(63, 199, 244, 0.75); } .btn-primary:active, .btn-cta:active, .dash-panel__cta:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(4, 20, 28, 0.40), 0 1px 2px rgba(2, 5, 10, 0.4); } /* İkincil / hayalet düğmeler: çıplak kenarlık yerine hafif cam dolgu. */ .btn-secondary, .btn-surface, .btn-ghost, .lby-iconbtn, .chip-opt, .modal-close { background-color: rgba(146, 190, 225, 0.055); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%); border-color: var(--pr-kenar); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); transition: background-color var(--pr-gecis), border-color var(--pr-gecis), box-shadow var(--pr-gecis); } .btn-secondary:hover, .btn-surface:hover, .btn-ghost:hover, .lby-iconbtn:hover, .chip-opt:hover, .modal-close:hover { background-color: rgba(63, 199, 244, 0.10); border-color: var(--pr-kenar-guclu); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 0 18px -6px rgba(63, 199, 244, 0.45); } /* Seçili çip/sekme gerçekten seçili görünsün. */ .chip-opt[aria-pressed="true"], .cz2-txtab.is-active, .gv2-tab.is-active { background-image: linear-gradient(180deg, rgba(63, 199, 244, 0.28) 0%, rgba(63, 199, 244, 0.12) 100%); border-color: rgba(63, 199, 244, 0.55); color: var(--hy-color-ice-100); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 0 20px -8px rgba(63, 199, 244, 0.60); } /* ============================================================================= 4. DEĞERLER HAZİNE GİBİ GÖRÜNÜR ----------------------------------------------------------------------------- "1.122.859 Altın" düz sarı bir metindi. Altın bir MADENDİR: metalik bir gradyan ve sıcak bir hâle onu ekrandaki en değerli şey yapar. Rakamlar tabular-nums ile hizalanır ki sayaç değişirken zıplamasın. ============================================================================= */ .dash-stat__val, .pf2-stat__val, .cz2-amt, .lby-wallet b, .dash-jackpot__digit, .dash-reward__amt, .dash-winner__amt { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .dash-reward__amt, .dash-winner__amt, .lby-wallet--gold b, .cz2-amt--gold { background-image: linear-gradient(180deg, #FFE9A8 0%, #E8C766 52%, #C79A3A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(232, 199, 102, 0.22); } .dash-jackpot__digit { background-image: linear-gradient(180deg, #FFF3CF 0%, #F2D07A 50%, #C79A3A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(232, 199, 102, 0.35); } /* ============================================================================= 5. BÖLÜM ETİKETLERİ Dekoratif çizgi YOK (patron kuralı). Ayrım harf aralığı ve renkle kurulur. ============================================================================= */ .dash-games__label, .dash-sec__kick, .dash-panel__kick, .eyebrow { letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-color-ice-300); opacity: 0.85; } /* ============================================================================= 6. BOŞ DURUMLAR "Henüz maç geçmişin yok." düz gri bir cümleydi ve sayfayı ölü gösteriyordu. Kendi yüzeyine oturunca boşluk bir hata gibi değil, tasarlanmış bir durum gibi okunur. ============================================================================= */ .dash-winner--empty, .fr2-empty, .pf2-empty, .gv2-empty, .cz2-empty { background-image: radial-gradient(80% 120% at 50% 0%, rgba(63, 199, 244, 0.06) 0%, rgba(63, 199, 244, 0) 70%); border: 1px dashed var(--pr-kenar); border-radius: 12px; color: var(--hy-text-muted); } /* ============================================================================= 7. AYRAÇLAR VE GİRDİLER ============================================================================= */ hr, .divider, .dash-sep { border-color: var(--pr-kenar); } input, select, textarea { background-color: rgba(6, 10, 17, 0.55); border-color: var(--pr-kenar); box-shadow: inset 0 1px 2px rgba(2, 5, 10, 0.35); } input:focus, select:focus, textarea:focus { border-color: var(--pr-kenar-guclu); box-shadow: inset 0 1px 2px rgba(2, 5, 10, 0.35), 0 0 0 3px rgba(63, 199, 244, 0.18); } :root[data-theme="light"] #pf-s-balance, :root[data-theme="light"] .kl2-metric__v.is-score, :root[data-theme="light"] .unlk-price__amt { background-image: none; color: #6f4d00; -webkit-text-fill-color: #6f4d00; text-shadow: none; } /* ============================================================================= 8. İSTATİSTİK KUTULARI · rakamlar sayfanın kahramanı olur ----------------------------------------------------------------------------- Önceki hâl: küçük gri etiket + 20px değer, düz kutu. Yönetim paneli tablosu gibi okunuyordu. Premium oyun arayüzünde değer BÜYÜKTÜR, etiket küçüktür ve kutunun sol kenarında değerin ne olduğunu söyleyen renkli bir ışık çizgisi bulunur (Altın sarısı, USDT yeşili, buz mavisi). Gerçek sınıf adları sayfa sayfa farklı olduğu için hepsi burada toplanır. ============================================================================= */ .pf2-stat, .dash-stat, .sz-stat, .kl2-metric, .vip2-hstat { position: relative; overflow: hidden; background-color: var(--hy-elevated); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 46%); border-color: var(--pr-kenar); box-shadow: inset 0 1px 0 0 var(--pr-ust-isik), var(--pr-golge-yumusak); } /* Sol kenar ışığı: kutunun ne ölçtüğünü renkle söyler. */ .pf2-stat::before, .dash-stat::before, .sz-stat::before, .kl2-metric::before, .vip2-hstat::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(63, 199, 244, 0) 0%, var(--hy-color-primary) 50%, rgba(63, 199, 244, 0) 100%); opacity: 0.7; } .pf2-stat:hover, .dash-stat:hover, .sz-stat:hover, .kl2-metric:hover, .vip2-hstat:hover { border-color: var(--pr-kenar-guclu); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.09), var(--pr-golge-kalkik); } /* Değer büyür, etiket küçülüp sakinleşir: ölçek kontrastı premium hissin özüdür. */ .pf2-stat__val, .sz-stat__n, .kl2-metric__v { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.08; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pf2-stat__label, .sz-stat__c, .kl2-metric__k { letter-spacing: 0.10em; text-transform: uppercase; font-size: 0.6875rem; opacity: 0.78; } /* Altın değerleri metalik olur. Kimlikle bağlı olanlar sayfa CSS'inde #pf-s-balance gibi ID ile renklendiği için burada ID seviyesinde eziyoruz. */ #pf-s-balance, .kl2-metric__v.is-score, .unlk-price__amt { background-image: linear-gradient(180deg, #FFE9A8 0%, #E8C766 52%, #C79A3A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(232, 199, 102, 0.20); } /* ============================================================================= 9. İLERLEME ÇUBUKLARI · ışık yayan bir dolum Önceki hâl: düz renkli bir şerit. Artık gradyan dolum + hafif hâle, boş kısım ise içeri gömülü görünür. ============================================================================= */ .pf2-xp__bar, .pf2-achrow__bar, .pf2-mhrow__bar, .sz-prog__bar, .lby-top__prog, .pf2-av__bar { background-color: rgba(4, 9, 16, 0.65); box-shadow: inset 0 1px 2px rgba(2, 5, 10, 0.55); overflow: hidden; } .pf2-xp__fill, .pf2-achrow__fill, .pf2-mhrow__fill, .sz-prog__fill, .pf2-av__fill, .lby-top__prog > i { background-image: linear-gradient(90deg, #22ADDB 0%, #3FC7F4 55%, #9BE7FF 100%); box-shadow: 0 0 12px rgba(63, 199, 244, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* ============================================================================= 10. KADEME ROZETLERİ VE AVATAR HALKASI ============================================================================= */ .tier-badge, .pf2-tier, .lby-tier, [class*="tier__chip"] { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 100%); border: 1px solid rgba(146, 190, 225, 0.20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(2, 5, 10, 0.35); } /* AVATAR HALKASI · YALNIZ GERÇEKTEN DAİRE OLANA (2026-08-11, patron: "sağ üstteki avatarın arkasında kare gibi bir şey var") ÖNCEKİ HATA: bu 1px'lik yayılım halkası üç avatara birden veriliyordu ama yalnız .pf2-av daire (104x104 + border-radius 50%). Diğer ikisinin köşe yarıçapı YOK, yuvarlaklık İÇ öğede: .lby-avatar 84x46 dikdörtgen kutu, oval görünümü .pgf kozmetik halkası verir .pfm-avatar 96x96 kutu, daire .pfm-photo'da (kendi halkası da orada) Yarıçapsız kutuya yayılım gölgesi vermek KARE bir çerçeve çizer; lobinin sağ üstünde avatarın arkasında görünen kare buydu. Halka daireye kalır. */ .pf2-av { /* Sert 1px ice halka KALDIRILDI: kozmetik çerçeve (frame.js .pgf, data-avatar-frame) artık kullanıcının kuşandığı halkayı çiziyor; SVG seviye halkası içeride, kozmetik frame dışarıda, yalnız yumuşak ışıma kalır. */ box-shadow: 0 0 28px -6px rgba(63, 199, 244, 0.40); } /* Lobi avatarı: sert halka YOK (kozmetik çerçeve zaten çiziyor), yalnız yumuşak ışıma kalır -- çerçevesiz oyuncuda da avatar zeminden ayrışsın. `border-radius: 50%` ŞART: kutu 84x46 dikdörtgendir, yarıçapsız bırakılınca yumuşak ışıma da DİKDÖRTGEN bir hâle çiziyor ve zeminde soluk bir kare olarak seçiliyordu (sert halka kaldırıldıktan sonra da görüldü). Yarıçapla ışıma kozmetik halkanın oval biçimini izler. Öğe kırpmaz (overflow görünür), büstün üstten taşması bozulmaz. */ .lby-avatar { border-radius: 50%; box-shadow: 0 0 28px -6px rgba(63, 199, 244, 0.40); } /* ============================================================================= 11. SATIR LİSTELERİ · tablo gibi değil, oyun listesi gibi ============================================================================= */ .pf2-achrow, .pf2-mhrow, .fr2-row, .sd-wins__row, .kz-wins__row, .lb-row { border-color: var(--pr-kenar); transition: background-color var(--pr-gecis), border-color var(--pr-gecis); } .pf2-achrow:hover, .pf2-mhrow:hover, .fr2-row:hover, .lb-row:hover { background-color: rgba(63, 199, 244, 0.045); border-color: var(--pr-kenar-guclu); } /* Tamamlanmış başarım gerçekten kazanılmış görünsün. */ .pf2-achrow.is-done, .pf2-achrow[data-done="1"] { background-image: linear-gradient(90deg, rgba(63, 199, 244, 0.10) 0%, rgba(63, 199, 244, 0) 45%); border-color: rgba(63, 199, 244, 0.28); } /* ============================================================================= 12. HAREKET AZALTMA ============================================================================= */ @media (prefers-reduced-motion: reduce) { a.card, a.dash-game, a.dash-luck__card, button.dash-reward, .fr2-card, .cz-pack, .btn-primary, .btn-cta, .dash-panel__cta { transition: none; } a.card:hover, a.dash-game:hover, a.dash-luck__card:hover, button.dash-reward:hover, .cz-pack:hover, .btn-primary:active, .btn-cta:active, .dash-panel__cta:active { transform: none; } }