/* ================================================================== ARSENAL BAHIS · KIRMIZI GECE Ortak stiller. Palet degisimi icin yalnizca asagidaki :root blogu yeterli - renk degerleri baska hicbir yerde tekrar etmiyor. Bu blok `tema` temasindan kopyalandi (GECCEBET, turkuaz/okyanus kimligi); degisken ADLARI aynen korundu cunku bu dosyada ve public/arsenal/css/*.css altinda 705 yerde var(--...) ile kullaniliyorlar - isim degistirmek 705 satiri kirar. Sadece DEGERLER Arsenal'in kirmizi/altin/koyu-zemin kimligine cevrildi (kaynak: .superpowers/sdd/arsenal-sablon-haritasi.md bolum 3, response/styles.css :root'u). --kirmizi ve --kirmizi-parlak ise --aqua/--aqua-bright'in Arsenal'a ozgu isimli takma adlari - yeni yazilacak arsenal-ozel bileşenler dogrudan bu isimleri kullanabilsin, eski --aqua-* isimleri de var(...) uyumlulugu icin degismeden kalsin diye. */ :root { /* ---- marka ---- */ --aqua: #e51a2d; /* Arsenal kirmizisi (eski turkuaz --aqua'nin yerine) */ --aqua-soft: #ff8a92; --aqua-bright: #ff3347; /* parlak kirmizi */ --aqua-deep: #a30f1e; --coral: #ff735f; --win: #3ddc84; --sand: #ded1b8; /* Arsenal'a ozgu isimler - degeri yukaridaki --aqua/--aqua-bright ile ayni, coklu kullanim yerine gecmeden yeni Arsenal bilesenlerinde dogrudan anlasilir bir ad kullanilabilsin diye eklendi. */ --kirmizi: #e51a2d; --kirmizi-parlak: #ff3347; /* ---- yazı ---- */ --tx: #f5f4ec; --tx-2: rgba(245, 244, 236, .62); /* tx-3 ve tx-4 önce .42/.28 idi; 10-13px metinlerde kontrast eşiğin altında kalıyordu. Hiyerarşi aynı, sadece taban yükseldi. */ --tx-3: rgba(245, 244, 236, .64); --tx-4: rgba(245, 244, 236, .54); --ink: #2a0509; /* kirmizi zemin üstündeki koyu yazı */ /* ALTIN. Arsenal armasindaki altin tonu (harita bolum 3: #d9a95f). Arayuzde SADECE yan rayda ve yalnizca SUSLEME olarak geciyor: hicbir yerde "aktif", "uyari" ya da "basarili" anlamina gelmiyor. Durum rengi hala kirmizi; iki renk ayni isi yapmaya baslarsa ikisi de anlamini kaybeder. */ --gold: #d9a95f; --gold-dim: rgba(217, 169, 95, .38); /* ---- yüzeyler ---- Harita bolum 3'teki koyu zemin katmanlarindan (--bg #080a0e, --panel #11161d, --panel2 #171e27) turetildi; alfa degerleri (panel .62/.45, panel-3 .60) eski katman hiyerarsisiyle aynen korundu, yalniz renk tonu turkuazdan noturlemsi koyu griye kaydi. --line/--line-soft ise marka renginin (kirmizi) soft tonuyla hizali kalsin diye --aqua-soft'un rgb'sini kullaniyor. */ --panel: rgba(17, 22, 29, .62); --panel-2: rgba(23, 30, 39, .45); --panel-3: rgba(8, 10, 14, .60); --line: rgba(255, 138, 146, .12); --line-soft: rgba(255, 138, 146, .08); --line-tx: rgba(245, 244, 236, .16); /* ---- ölçü ---- */ --r-sm: 10px; --r: 18px; --r-lg: 24px; --hd: 78px; --pad: clamp(18px, 4.4vw, 64px); --wrap: 1440px; --gap: clamp(46px, 5vw, 70px); /* bölümler arası nefes */ --t: 180ms cubic-bezier(.4, 0, .2, 1); } * { box-sizing: border-box; } /* Görsel olarak gizli, ekran okuyucuya açık. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Oturum durumu. Sunucu basar, auth'a bağlı bloklar buna göre açılır kapanır. Blade tarafında bu blokları ayrıca @auth ile sarın — CSS ile gizlemek ziyaretçiye üye verisini yine de göndermek demek, burada sadece tasarımın iki durumu tek dosyada görünsün diye var. */ [data-auth="guest"] .auth-member { display: none !important; } [data-auth="member"] .auth-guest { display: none !important; } html { background: #090603; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; color: var(--tx); font: 400 15px/1.55 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-feature-settings: 'tnum' 1; /* para ve oran hizalansın */ overflow-x: clip; /* Su sütunu. Sabit yükseklik yerine oransal duraklar kullanıyoruz ki içerik uzayınca geçiş de uzasın, kırılma olmasın. */ background: linear-gradient(180deg, #53201c 0%, #461d17 9%, #3d1b14 18%, #351812 27%, #2d150f 36%, #25120d 46%, #1f100a 56%, #190e08 66%, #130b06 76%, #0e0805 86%, #090603 100%); background-attachment: scroll; } /* Modal/çekmece açıkken arka plan kaymasın. Mobilde kaydırma kabı , sadece body'ye vermek yetmiyor. */ body.is-locked { overflow: hidden; } html:has(body.is-locked) { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input { font: inherit; } svg { display: block; } ::selection { background: var(--aqua); color: var(--ink); } :focus-visible { outline: 2px solid var(--aqua-soft); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } /* Yatay raylarda çubuk gizleniyor; masaüstünde oklarla, dokunmatikte parmakla geziliyor. */ .noscroll { scrollbar-width: none; -ms-overflow-style: none; } .noscroll::-webkit-scrollbar { display: none; } /* Sayfa basliklari anasayfa bolum basliklariyla ("Canli masalar") AYNI yazi: Barlow Condensed 700 (kullanici istegi 2026-09-26). Kopyalanan temanin DM Serif Display'i Arsenal sayfalarinda yabanci duruyordu. */ .serif { font-family: 'Barlow Condensed', 'DM Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: .2px; } /* ================================================================== HAREKET Dalgalar 2880px genisliginde, periyodu 1440px olan bir yolu -1440px kaydirarak akiyor; dikis gorunmuyor. Bu uc degeri birlikte degistirin, yoksa ek yeri ortaya cikar. ================================================================== */ @keyframes gb-flow { from { transform: translateX(0) } to { transform: translateX(-1440px) } } @keyframes gb-drift { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(-30px) } } @keyframes gb-tide { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } } @keyframes gb-fall { from { transform: translateY(-120px) } to { transform: translateY(120px) } } .flow-a { animation: gb-flow 30s linear infinite; } .flow-b { animation: gb-flow 21s linear infinite reverse; } .flow-c { animation: gb-flow 44s linear infinite; } /* Yalniz YANA suzuluyor. Opaklik nabzi (gb-breathe) kaldirildi: arka planda yanip sonen hicbir sey kalmayacak. */ .caustic { animation: gb-drift 26s ease-in-out infinite; } .tideline { animation: gb-tide 6s ease-in-out infinite; } /* NABIZ YOK. Canli oldugunu rengi zaten soyluyor; yanip sonen bir nokta ekranin her yerinde goz kirpiyordu. Sinif adi duruyor - HTML'de on kusur yerde geciyor ve sunucu da basiyor; kurali silmek yerine hareketi aldik. */ .livedot { animation: none; } .snow-a { animation: gb-fall 34s linear infinite; } .snow-b { animation: gb-fall 52s linear infinite reverse; } /* ================================================================== ATMOSFER KATMANLARI Sayfanın üstüne biner, tıklamayı engellemez. ================================================================== */ .atmos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } /* Askidaki partikuller. Sayfanin %48'inden sonra basliyor. */ .atmos-snow { position: absolute; left: 0; right: 0; top: 48%; bottom: 6%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); } .atmos-snow svg { position: absolute; left: 0; } /* ================================================================== BUTONLAR ================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 24px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: transform var(--t), background var(--t), border-color var(--t), filter var(--t); } .btn:active { transform: translateY(1px); } .btn svg { width: 15px; height: 15px; } /* Birincil: turkuaz gradyan, koyu yazı. Sitedeki tek dolu buton ailesi. */ .btn-primary { background: linear-gradient(180deg, var(--aqua-bright), var(--aqua-deep)); color: var(--ink); box-shadow: 0 14px 34px rgba(155, 52, 61, .34); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: rgba(245, 244, 236, .10); border: 1px solid rgba(245, 244, 236, .28); color: var(--tx); } .btn-ghost:hover { border-color: rgba(245, 244, 236, .45); } .btn-outline { border: 1px solid var(--line-tx); color: var(--tx); } .btn-outline:hover { border-color: rgba(245, 244, 236, .34); } .btn-lg { height: 56px; padding: 0 38px; font-size: 15.5px; } .btn-sm { height: 40px; padding: 0 20px; font-size: 13.5px; } .btn-block { width: 100%; } /* ================================================================== KABARTMA Parlama (glow) degil, golge. Kart ailesi bu iki sinifi kullaniyor. ================================================================== */ .lift { border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 16px 34px rgba(0, 0, 0, .42); } .lift-sm { border: 1px solid var(--line-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 20px rgba(0, 0, 0, .30); } /* ================================================================== HEADER ================================================================== */ .hd { position: sticky; top: 0; z-index: 60; height: var(--hd); background: rgba(34, 16, 11, .82); border-bottom: 1px solid rgba(255, 138, 146, .10); transition: background var(--t), backdrop-filter var(--t); } /* Kaydırınca camlaşır — sayfanın üstündeyken zemin zaten koyu, blur'a gerek yok; boşuna GPU yakmasın. */ .hd.is-stuck { background: rgba(26, 13, 9, .88); backdrop-filter: blur(16px) saturate(140%); } .hd-in { height: 100%; display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); } .brand { display: flex; align-items: center; flex: none; } /* LOGO TEK GORSEL. Yukseklik veriliyor, genislik oranla geliyor: dosya degistiginde (yeni bir en-boy orani) baslik kendiliginden uyum sagliyor. ALTIN SADECE BURADA. Sitenin geri kalani turkuaz; marka isareti kendi rengini tasiyor ve o renk baska hicbir yerde gecmiyor - iki vurgu rengi bir arayuzde birbiriyle yarisir. */ .brand-logo { display: block; height: 30px; width: auto; flex: none; } /* Cekmece basligi ve footer: ayni dosya, kucuk boy. */ .brand-logo.is-sm { height: 24px; } .hd-short { display: none; } .nav { display: flex; gap: clamp(16px, 2.2vw, 30px); } .nav a { position: relative; padding-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--tx-2); white-space: nowrap; transition: color var(--t); } .nav a:hover { color: var(--tx); } .nav a.is-on { color: var(--tx); } /* Aktif sekme göstergesi dhoni teknesinin gövde kavisi. Aynı eğri logoda ve Private seviye şeridinin altında da geçiyor. */ .nav-curve { position: absolute; left: 50%; bottom: -6px; width: 58px; height: 7px; transform: translateX(-50%); } .nav a:not(.is-on) .nav-curve { display: none; } .hd-act { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; } .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(245, 244, 236, .14); color: var(--tx-2); transition: var(--t); } .icon-btn:hover { color: var(--tx); border-color: rgba(245, 244, 236, .3); } .icon-btn svg { width: 17px; height: 17px; } .hd-login { height: 40px; display: flex; align-items: center; padding: 0 18px; font-size: 14px; font-weight: 600; color: rgba(245, 244, 236, .86); transition: color var(--t); } .hd-login:hover { color: var(--tx); } /* ================================================================== SURFACE — HERO ================================================================== */ .hero { position: relative; height: 700px; overflow: hidden; } /* Fotoğraf. Alt kenarı maskeyle söndürülüyor: kesik bir görsel bitişi yerine sayfanın kendi derinlik gradyanına karışıyor, hemen altındaki dalga bandı da böyle aynı sudan devam ediyor gibi duruyor. */ .hero-shot { position: absolute; inset: 0; display: block; } .hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; display: block; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .4) 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .4) 90%, transparent 100%); } /* Kirmizi veli (eskiden turkuaz). Gün batımının turuncusu paletin dışında kalıyordu; soft-light düşük opaklıkta sıcaklığı kırpmadan markanın rengine çekiyor. Oyun kartlarındaki muamelenin aynısı. Renkler burada :root degiskeni degil dogrudan hex - orijinal dosyada da boyleydi, sadece Arsenal kirmizisine (--aqua-deep/--aqua/--aqua-deep) cevrildi. */ .hero-tint { position: absolute; inset: 0; background: linear-gradient(180deg, #8a0f1c 0%, #e51a2d 62%, #4a0810 100%); mix-blend-mode: soft-light; opacity: .34; /* Fotoğrafla aynı maske; yoksa veli bölümün alt kenarında düz kesilip çizgi bırakıyor. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%); } /* Metnin oturduğu bant için karartma. Ortadaki turkuaz parlama başlıkla çakışıyordu; radyal olan onu bastırıyor, üstteki header'ı, alttaki de sayfaya geçişi taşıyor. */ .hero-scrim { position: absolute; inset: 0; background: radial-gradient(112% 58% at 50% 40%, rgba(17, 8, 5, .76) 0%, rgba(17, 8, 5, .4) 44%, rgba(17, 8, 5, 0) 74%), linear-gradient(180deg, rgba(15, 8, 5, .7) 0%, rgba(15, 8, 5, .2) 26%, rgba(15, 8, 5, 0) 48%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); } /* Su altı ışık kırılmaları. Fotoğrafın kendi kıpırtısının üstünde hafif bir hareket — blur'lu ve düşük opaklıkta, göz "bir şey var" der ama ne olduğunu seçemez. */ .hero-caustic { position: absolute; left: -40px; right: -40px; bottom: 0; height: 340px; opacity: .09; filter: blur(14px); background: radial-gradient(22% 40% at 12% 70%, #faeff2 0%, rgba(250, 239, 242, 0) 62%), radial-gradient(18% 34% at 34% 88%, #faeff2 0%, rgba(250, 239, 242, 0) 62%), radial-gradient(26% 44% at 58% 74%, #faeff2 0%, rgba(250, 239, 242, 0) 62%), radial-gradient(16% 30% at 80% 90%, #faeff2 0%, rgba(250, 239, 242, 0) 62%), radial-gradient(20% 36% at 94% 66%, #faeff2 0%, rgba(250, 239, 242, 0) 62%); } /* Metin bloğu ufuk çizgisinin üstünde kalsın diye yukarıda: başlık villaların çatı hattına değince okunmuyordu. Altta kalan su boşluk değil, bölümün nefesi. */ .hero-in { position: relative; z-index: 2; padding-top: 124px; text-align: center; } .eyebrow { display: inline-flex; align-items: center; height: 32px; padding: 0 17px; border-radius: 999px; background: rgba(255, 138, 146, .12); border: 1px solid rgba(255, 138, 146, .3); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua-soft); } /* Baslik artik logonun kendisi. Olcu GENISLIGE bagli degil yuksekilige: logo yatay bir kelime isareti, dar ekranda genislige gore olceklenirse yuksekligi bir seride dusuyor. */ .hero-title { margin: 28px 0 0; line-height: 0; } .hero-title img { display: block; height: clamp(52px, 7.6vw, 108px); width: auto; margin-inline: auto; /* Fotografin acik yerlerinde kenar eriyordu; golge gorunmuyor, sadece kenari tutuyor. */ filter: drop-shadow(0 2px 26px rgba(17, 8, 5, .6)); } .hero-sub { margin: 20px auto 0; max-width: 660px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 300; line-height: 1.55; color: rgba(245, 244, 236, .82); text-shadow: 0 1px 16px rgba(17, 8, 5, .6); } .hero-cta { margin-top: 36px; display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; } /* ================================================================== DALGA BANTLARI Bölüm ayırıcı olarak çizgi yok, dalga var. Derine inildikçe katman sayısı, kalınlık ve opaklık düşer. Kalın ve soluk çiziyoruz: ince ve parlak çizgi "çizilmiş dalga" gibi duruyordu. Alttaki iki katman hafif blur'lu, üsttekiler net — su da böyle, uzaktaki kabarma yumuşak, yüzeydeki kırışık keskin. ================================================================== */ .waves { position: relative; overflow: hidden; } .waves svg { position: absolute; left: 0; width: 2880px; stroke-linecap: round; } .w-blur { filter: blur(3px); } /* Yüzey bandı hero'nun altına değil, üstüne biniyor: fotoğrafın söndüğü yer tam dalgaların içinde kalsın, kesik görünmesin. */ .waves-surface { height: 138px; margin-top: -140px; z-index: 1; } .waves-mid { height: 118px; margin-top: 30px; } .waves-deep { height: 92px; margin-top: 34px; } /* ================================================================== BÖLÜM BAŞLIĞI ================================================================== */ /* ================================================================== MENÜ ÇEKMECESİ Yalnız 980px altında. Alt bara beş yer sığıyor; Live, Aviator ve Promotions buradan gidiliyor. ================================================================== */ .hd-menu { display: none; } .drawer { position: fixed; inset: 0; z-index: 90; background: rgba(10, 5, 3, 0); transition: background 220ms ease; } .drawer.is-open { background: rgba(10, 5, 3, .62); } .drawer-panel { position: absolute; /* inset-inline-end, right degil: RTL'de "bitis kenari" soldur. right yazip yalniz animasyonu ters cevirmek paneli yine saga yapistiriyordu - acilis yonu degisiyor, panel degismiyordu. */ inset-block: 0; inset-inline-end: 0; width: min(340px, 86vw); padding: 18px var(--pad) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; background: linear-gradient(180deg, #3f1b15, #1b0f09 62%, #0e0805); border-inline-start: 1px solid var(--line); box-shadow: -28px 0 60px rgba(0, 0, 0, .5); /* translate mantiksal karsiligi yok; RTL'de asagida ters cevriliyor. */ transform: translateX(100%); transition: transform 220ms cubic-bezier(.32, .72, 0, 1); } .drawer.is-open .drawer-panel { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; height: 44px; } .drawer-head .brand-logo { height: 22px; } .drawer-search { display: none; width: 100%; align-items: center; gap: 10px; height: 46px; margin-top: 22px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(23, 10, 7, .45); font-size: 14px; font-weight: 500; color: var(--tx-2); } .drawer-search svg { width: 17px; height: 17px; } .drawer-nav { display: grid; gap: 2px; margin-top: 26px; } .drawer-nav a { padding: 14px 2px; font-size: 17px; font-weight: 600; color: var(--tx-2); border-bottom: 1px solid var(--line-soft); transition: color var(--t); } .drawer-nav a:hover { color: var(--tx); } .drawer-nav a.is-on { color: var(--aqua-soft); } .drawer-help { display: grid; gap: 2px; margin-top: auto; padding-top: 26px; } .drawer-help a { display: flex; align-items: center; gap: 11px; padding: 11px 2px; font-size: 14px; font-weight: 500; color: var(--tx-2); } .drawer-help a:hover { color: var(--tx); } .drawer-help svg { width: 17px; height: 17px; flex: none; color: var(--aqua-soft); } .drawer-foot { display: grid; gap: 10px; padding-top: 20px; } /* Destek. Tek düğme, altında kanal listesi. Kanal ikonları markanın rengini almıyor, kendi rengini alıyor — WhatsApp yeşili ve Telegram mavisi tanınmadığında tıklanmıyor. */ .hd-help { display: none; position: relative; } .hd-help > .icon-btn { border-color: transparent; } .hd-help > .icon-btn:hover, .hd-help > .icon-btn[aria-expanded="true"] { border-color: var(--line-tx); } .help-pop { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60; min-width: 188px; padding: 7px; border-radius: 16px; border: 1px solid var(--line); background: rgba(34, 16, 11, .96); backdrop-filter: blur(18px); box-shadow: 0 22px 48px rgba(0, 0, 0, .5); } /* display kuralı olmadığı için [hidden] kendi işini görüyor; yine de açıkça yazıyoruz, sonradan display eklenirse tuzak olmasın. */ .help-pop[hidden] { display: none; } .help-pop a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 500; color: var(--tx-2); transition: background var(--t), color var(--t); } .help-pop a:hover { background: rgba(255, 138, 146, .09); color: var(--tx); } .help-pop svg { width: 17px; height: 17px; flex: none; color: var(--tx-3); } .help-pop .is-wa { color: #4ce07f; } .help-pop .is-tg { color: #5bb8f5; } /* Bölüm başlığının yanındaki sayı. Kaç oyun olduğunu söylemek "binlerce oyun" demekten daha inandırıcı ve daha ucuz. */ .sec-n { display: inline-block; margin-inline-start: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 138, 146, .07); font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--aqua-soft); vertical-align: middle; transform: translateY(-2px); } /* Üye başlığındaki bakiye. Rakam serif, etiketi küçük — şeritteki sayılarla aynı dil. */ .hd-bal { display: flex; flex-direction: column; justify-content: center; padding: 0 14px 0 6px; line-height: 1.15; text-align: end; } .hd-bal span { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-4); } .hd-bal b { font-size: 17px; color: var(--tx); } .hd-bal:hover b { color: var(--aqua-soft); } .sec { position: relative; z-index: 1; margin-top: var(--gap); } .sec-tight { margin-top: 26px; } .sec-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; } .sec-label { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; /* --aqua degil --aqua-bright: anasayfada etiket hero'nun altindaki koyu sularda duruyor ve --aqua yetiyordu, ama ic sayfalarda hero yok - su sutununun EN ACIK ustu gorunuyor ve orada --aqua 4.45:1'de kaliyordu. Tek renk, her iki zeminde de gecerli. */ color: var(--aqua-bright); } /* IKI AYRI BASLIK DILI. Once her bolum basligi serif ve buyuktu. Bir arada bakildiginda her bolum ayni agirlikta bagiriyordu ve hicbiri one cikmiyordu; ustelik "her bolume yaratici bir baslik" hissi veriyordu. Simdi varsayilan baslik SANS, daha kucuk ve daha siki: gercek bir urun basligi. Serif yalniz markanin kendi mekaniklerinde (The Tide Board, Deep Run) ve sayfa basliklarinda kaliyor. */ .sec-title { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(19px, 1.9vw, 23px); letter-spacing: -.02em; font-weight: 700; } .sec-title.serif { display: block; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .2px; font-weight: 700; } /* Serif baslik icindeki canli noktasi satirin ustune kaciyordu. */ .sec-title.serif .dot { display: inline-block; margin-inline-end: 10px; vertical-align: middle; } .sec-note { margin: 8px 0 0; font-size: 14.5px; font-weight: 300; /* .64 idi. Ic sayfalarda hero olmadigi icin su sutununun en ACIK ust bandi gorunuyor ve orada 4.41:1'e dusuyordu. */ color: rgba(245, 244, 236, .74); } .sec-more { margin-inline-start: auto; flex: none; } /* ---------------- Ic sayfa basligi ---------------- Hero yok. Kisi ic sayfaya BAKMAYA degil bir sey ALMAYA ya da BULMAYA geliyor; fotografin altinda uc saniye beklemesinin karsiligi yok. Promosyonlar ve casino sayfalari ayni basligi kullaniyor - iki sayfa ayni seye benziyorsa ayni yerden gelmeli. */ /* Genislik SINIRI BASLIGIN KENDISINDE, kutusunda degil. Kutuda oldugunda .wrap'in "margin-inline: auto" kurali 720px'lik kutuyu ekranda ORTALIYORDU: 1440px'te baslik icerikten 322px iceride basliyor, altindaki izgara ise kenarda duruyordu. Gozle bakinca sayfanin ust yarisi kaymis gibi goruniyordu. */ .page-head { margin-top: 44px; } .page-head > * { max-width: 720px; } .page-title { margin: 8px 0 14px; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; color: var(--tx); } .page-head .sec-note { max-width: 620px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; } .dot-win { background: var(--win); } /* ================================================================== ŞERİT — sayaçlar ================================================================== */ /* KUTU DEGIL SATIR. Once yuvarlatilmis, gradyanli, 1px cerceveli bir panel'di - yani sayfadaki diger her seyle ayni kutu. Sayfada o kadar cok panel var ki bir tane daha eklemek hicbir seyi one cikarmiyordu. Simdi rakamlar dogrudan sayfanin uzerinde duruyor, aralarinda yalniz sac teli cizgiler var. Daha az sey ciziliyor, daha cok sey gorunuyor. */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line-soft); } .stat { padding: 22px 28px; border-inline-end: 1px solid var(--line-soft); } /* Panel kalkinca ilk ve son sutun sayfanin kenariyla hizalaniyor; yoksa serit iceriden baslamis gibi duruyor. */ .stat:first-child { padding-inline-start: 0; } .stat:last-child { padding-inline-end: 0; border-inline-end: 0; } .stat-k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; /* .6 idi. Serit panel olmaktan cikinca altindaki zemin acildi ve 11px etiket 4.38:1'e dustu. Panel gitti, kontrast kalsin. */ color: rgba(245, 244, 236, .74); } .stat-v { margin-top: 10px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; letter-spacing: -.01em; } .stat-v.is-aqua { color: var(--aqua-soft); } /* Değer tazelenince kısa bir parlama. Rakamın sessizce değişmesi fark edilmiyor, göze çarpan hareket de rahatsız ediyor. */ .stat-v { transition: color 240ms linear, text-shadow 240ms linear; } .stat-v.is-tick { color: var(--aqua-soft); text-shadow: 0 0 22px rgba(255, 138, 146, .45); } /* ================================================================== DURAN TEKLİFLER Tide Board gecelik ve saatli; burası kalıcı raf. Asimetrik: soldaki tek büyük teklif, sağdaki üç satır. Aynı boyda dört kart olsaydı hangisinin önemli olduğu anlaşılmazdı. ================================================================== */ .offers { display: grid; grid-template-columns: 1.08fr 1fr; gap: 18px; align-items: stretch; } /* Tek teklif (sagdaki satir listesi yok): ikinci kolon bos kalmasin. Iki sinifli secici, asagidaki medya kurallarindaki .offers'tan guclu - her genislikte tek kolon. */ .offers.offers-tek { grid-template-columns: 1fr; } .offer { position: relative; border-radius: var(--r-lg); background: linear-gradient(158deg, rgba(56, 24, 19, .72), rgba(44, 20, 15, .58) 74%); overflow: hidden; } .offer-lead { display: flex; } /* Kartın dibinde su. Tide Board'daki ile aynı katman, oranın küçük kardeşi gibi dursun diye. */ .offer-caustic { position: absolute; left: -30px; right: -30px; bottom: -50px; height: 280px; /* .3 idi. O deger hicbir zaman ekrana cikmiyordu: opaklik nabzi bunu eziyor ve .10-.19 arasinda tutuyordu. Nabiz kalkinca kutunun kendi degeri gorunur oldu ve fazla parlak kaldi. */ opacity: .15; filter: blur(22px); background: radial-gradient(28% 60% at 22% 70%, #dc96a3 0%, rgba(220, 150, 163, 0) 64%), radial-gradient(24% 52% at 62% 86%, #dc96a3 0%, rgba(220, 150, 163, 0) 64%), radial-gradient(22% 48% at 88% 64%, #dc96a3 0%, rgba(220, 150, 163, 0) 64%); pointer-events: none; } .offer-in { position: relative; padding: 34px 36px 32px; display: flex; flex-direction: column; align-items: flex-start; } .offer-k { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(245, 244, 236, .64); } .offer-v { margin-top: 12px; font-size: clamp(38px, 4.6vw, 62px); line-height: .96; letter-spacing: -.02em; color: var(--aqua-soft); } .offer-v span { display: block; margin-top: 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; font-weight: 300; letter-spacing: 0; color: var(--tx); } .offer-x { margin: 16px 0 0; max-width: 42ch; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(245, 244, 236, .58); } /* Şart satırı. Küçük ama gizli değil — bonusun asıl bilgisi bu. */ .offer-terms { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; } .offer-terms li { padding: 5px 11px; border: 1px solid var(--line-tx); border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: rgba(245, 244, 236, .58); } /* Butondan sonra kalan boşluk boş değil: kartın dibinde su duruyor. Kart sağdaki üç satır kadar uzuyor, artan yer havuz oluyor. */ .offer-lead .btn { margin-top: 28px; } .offer-list { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; } .offer-row { display: flex; align-items: center; gap: 22px; padding: 20px 24px; transition: border-color var(--t), transform var(--t); } .offer-row:hover { transform: translateY(-2px); border-color: rgba(255, 138, 146, .3); } .offer-row .offer-v { margin: 0; flex: none; min-width: 96px; font-size: clamp(28px, 2.8vw, 36px); } .offer-c b { display: block; font-size: 15.5px; font-weight: 700; } .offer-c span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: rgba(245, 244, 236, .62); } .offer-c .offer-terms { margin-top: 11px; } .offer-go { width: 20px; height: 20px; margin-inline-start: auto; flex: none; color: var(--tx-3); transition: color var(--t), transform var(--t); } .offer-row:hover .offer-go { color: var(--aqua-soft); transform: translateX(3px); } .offers-foot { margin: 18px 0 0; font-size: 13px; font-weight: 300; color: var(--tx-3); } .offers-foot a { color: rgba(255, 138, 146, .8); text-decoration: underline; text-underline-offset: 3px; } /* ================================================================== ÜYE ŞERİDİ Giriş yapmış üyede görünür. Kart seti bağlama göre değişir: aktif çevrim yoksa Wagering yerine Your Rewards basılır. ================================================================== */ .member-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .member-head b { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); } .member-head i { flex: 1; height: 1px; background: rgba(255, 138, 146, .1); } .member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .mcard { padding: 18px 20px; border-radius: var(--r); background: rgba(56, 24, 19, .55); } .mcard-k { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); } .mcard-v { margin-top: 10px; display: flex; align-items: baseline; gap: 7px; } .mcard-v strong { font-size: 26px; line-height: 1; font-weight: 400; } .mcard-v small { font-size: 12px; font-weight: 300; color: rgba(245, 244, 236, .64); } .mcard-go { margin-top: 14px; } .mcard-foot { margin-top: 9px; font-size: 12px; font-weight: 300; color: rgba(245, 244, 236, .64); } .mcard-row { display: flex; align-items: center; gap: 14px; } .mcard-thumb { width: 46px; height: 58px; flex: none; border-radius: 10px; background: linear-gradient(158deg, #ff6ec7, #3b1a5c); } .mcard-row b { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; } .bar { margin-top: 11px; height: 5px; border-radius: 3px; background: rgba(245, 244, 236, .1); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--aqua-deep), var(--aqua-soft)); } .chips { margin-top: 12px; display: flex; gap: 7px; } .chip { flex: 1; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 138, 146, .08); border: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; transition: var(--t); } .chip:hover { border-color: rgba(255, 138, 146, .3); } .chip.is-on { background: linear-gradient(180deg, var(--aqua-bright), var(--aqua-deep)); border-color: transparent; color: var(--ink); } .mcard-win { background: linear-gradient(150deg, rgba(61, 220, 132, .10), rgba(56, 24, 19, .55) 60%); } .mcard-win strong { color: var(--win); } /* ================================================================== OYUN KARTLARI Sağlayıcı görselleri birbirinden çok farklı renklerde geliyor. Beklemede hafif doygunluk kaybı + zayıf turkuaz soft-light katman hepsini aynı dünyaya çekiyor; hover'da gerçek renk geri geliyor. ================================================================== */ .grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* Kart bir

. Oyun linki kartı baştan başa kaplayan ayrı bir , favori butonu onun kardeşi. Önce buton linkin içindeydi: fareyle çalışıyordu ama içinde