/** * GorillaStrike — ANA MENÜ * * Düzen ızgarayla kuruluyor; her parça bir alan adı taşıyor. * * ┌──────────┬────────┬────────┐ * │ şerit │ şerit │ kese │ * ├──────────┼────────┼────────┤ * │ rütbe │ orta │ oyna │ * ├──────────┤ │ │ * │ logo │ │ │ * └──────────┴────────┴────────┘ * * AYNI DÜZEN MOBİLDE DE GEÇERLİ. Oyun yatay bir FPS, telefon yan * tutuluyor; ızgarayı tek sütuna yığmak asıl oynama duruşunda menüyü * bozuyordu. Ölçüler clamp() ile viewport'a bağlı, düzen değişmiyor. * Tek sütun yalnız telefon DİK tutulunca devreye giriyor ve orada da * "yan çevir" uyarısı çıkıyor. */ #menu { position: fixed; inset: 0; z-index: 60; display: block; /* ORTASI SAYDAM: insan ve kurt modelleri tuvalin ustunde burada gorunuyor. Kenarlarda koyu bir vinyet var ki yazilar okunsun, merkez acik kaliyor ki kompozisyon nefes alsin. */ background: radial-gradient(ellipse 62% 78% at 50% 54%, transparent 34%, rgba(5, 8, 14, 0.86) 78%), linear-gradient(180deg, rgba(6, 9, 15, 0.55) 0%, transparent 22%, transparent 74%, rgba(4, 6, 11, 0.7) 100%); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #menu.gizli { display: none; } /* ═══════════════════════════════════════════ YERLEŞİM — Kuboom / Standoff kuleleri Üstte tam genişlik para şeridi, solda ve sağda birer KULE, ortada canlı 3B sahne, altta ortada GORILPASS. Kuleler ızgara hücresi değil, kendi içinde flex sütun. Sebebi ölçülmüş bir tuzak: her düğmeyi ayrı bir ızgara alanına koyunca sütun genişliğini o sütundaki EN GENİŞ öğe belirliyor ve alt satırdaki düğme, üst satırdaki kesenin genişliğini miras alıyordu (PLAY 265 px'lik sütunda 179 px kalmıştı). Kule tek hücre, içindeki sıra HTML'den geliyor; kırılmada yalnız kulenin yönü değişiyor. ═══════════════════════════════════════════ */ #menu-ic { width: 100%; min-height: 100%; padding: clamp(8px, 1.5vw, 20px); display: grid; gap: clamp(6px, 1vw, 14px); /* Yan sütunlar İÇERİĞİ kadar; orta sütun kalan her şeyi alıyor. Karakterler orta sütunda ve "kocaman ama ekranı kaplamayan" olmaları için ona en geniş payı bırakmak gerekiyor. */ grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "solust logo sagust" ". orta ." ". orta ." "alt alt alt"; align-content: stretch; } #kume-solust { grid-area: solust; align-self: start; justify-self: start; } #kume-sagust { grid-area: sagust; align-self: start; justify-self: end; } #oyna-panel { grid-area: alt; } #orta-alan { grid-area: orta; position: relative; pointer-events: none; } /* AYAK GÖLGESİ KALDIRILDI. `#orta-alan::after` figürlerin dibine siyah bir elips çiziyordu; yeni düzende PLAY oraya geldiği için düğmenin üstünde kirli bir karartı olarak okunuyordu (sahibin uyarısı). Gölge işini zaten 3B ışıklar yapıyor. */ /* ═══ KULELER ═══ */ #sol-kule, #sag-kule { display: flex; flex-direction: column; gap: clamp(5px, 0.85vw, 10px); min-height: 0; min-width: 0; } /* Boşluk parçası kulenin nefes alanı: üstteki grup yukarı, alttaki grup aşağı yapışıyor. Sabit yükseklik yerine `flex: 1` — ekran uzadıkça boşluk uzuyor, kartlar sabit kalıyor. */ .kule-bosluk { flex: 1 1 auto; min-height: 0; } /* ═══ ORTAK DÜĞME DİLİ ═══ Koyu lacivert gövde, kalın altın çerçeve, altta sert gölge. Eğim (skew) KALDIRILDI: dört kule kartı alt alta dururken eğim kenarları birbirine kaydırıp düzeni tırtıklı gösteriyordu. */ .ust-dugme, .kule-kart { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: clamp(5px, 0.7vw, 10px); padding: clamp(8px, 1.15vw, 14px) clamp(8px, 1vw, 14px); border-radius: 5px; border: 2px solid var(--altin); background: linear-gradient(180deg, #41392f 0%, #0e1830 100%); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); color: #f2f6ff; font-family: inherit; font-weight: 800; font-size: clamp(9px, 1.05vw, 13px); letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; transition: filter 0.12s ease, transform 0.12s ease; touch-action: manipulation; } .ust-dugme:hover, .kule-kart:hover { filter: brightness(1.2); transform: translateY(-2px); } .ust-dugme:active, .kule-kart:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0.55); } .ust-dugme:focus-visible, .kule-kart:focus-visible { outline: 2px solid var(--buz); outline-offset: 2px; } /* Köşe aksanı — Kuboom kartlarının imzası */ .ust-dugme::after, .kule-kart::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 12px 12px 0 0; border-color: var(--altin) transparent transparent transparent; opacity: 0.85; pointer-events: none; } .ust-dugme svg, .ust-dugme .ui-ik, .ust-dugme .dj-ik, .kule-kart svg, .kule-kart .ui-ik, .kule-kart .dj-ik { fill: currentColor; flex: 0 0 auto; } .ust-dugme svg, .ust-dugme .ui-ik, .ust-dugme .dj-ik { width: clamp(15px, 1.7vw, 21px); height: clamp(15px, 1.7vw, 21px); } /* ═══ KULE KARTI ═══ ikon üstte, yazı altında */ .kule-kart { flex-direction: column; gap: clamp(3px, 0.5vh, 7px); padding: clamp(9px, 1.3vh, 16px) clamp(6px, 0.8vw, 12px); flex: 0 0 auto; } .kule-ikon { width: clamp(26px, 3.1vw, 44px); height: clamp(26px, 3.1vw, 44px); color: var(--altin); } .kule-yazi { line-height: 1.1; text-align: center; } .kule-alt { font-size: clamp(7.5px, 0.82vw, 10px); font-weight: 700; letter-spacing: 0.6px; text-transform: none; opacity: 0.66; line-height: 1.1; text-align: center; } /* Sayaç rozeti — kaç kasa var */ .kule-rozet { position: absolute; top: 5px; left: 6px; min-width: 19px; padding: 1px 5px; border-radius: 9px; background: var(--altin); color: #201400; font-size: 10px; font-weight: 900; letter-spacing: 0; } /* ═══ VİDEO ROZETİ ═══ Reklamla alınan her şeyin üstünde. Kilit simgesi DEĞİL — Playgama bir yapıyı "oyuncular reklamı anlamıyor" diye reddetmişti; ekranda video ikonu görünmesi şart. */ .video-rozet { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: #d33a2c; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 0.8px; } .video-rozet svg, .video-rozet .ui-ik, .video-rozet .dj-ik { width: 12px; height: 12px; fill: currentColor; } .video-rozet.mini { position: absolute; top: 5px; right: 5px; padding: 2px 4px; } /* Reklam ağı yokken video yerine hediye anlatımı (bkz. js/ads.js) */ body.reklamsiz .video-rozet { background: #2f8f5b; } /* Reklamsız pakette "VIDEO" yazısı da yanıltıcı — rozet yalnız hediye simgesi olarak kalıyor. */ body.reklamsiz .video-rozet span { display: none; } /* ═══ FREE KASA ═══ hazırken sallanıyor */ .free-kasa .kule-ikon { color: #ffd75e; } @keyframes kasa-salla { 0%, 64%, 100% { transform: rotate(0deg); } 68% { transform: rotate(-6deg) scale(1.03); } 74% { transform: rotate(5deg) scale(1.03); } 80% { transform: rotate(-4deg) scale(1.02); } 86% { transform: rotate(3deg); } 92% { transform: rotate(-1.5deg); } } /* ═══ VİDEOLU DERİ KARTI ═══ */ /* ═══ GORILPASS — alt orta şerit ═══ */ #gorilpass { justify-self: center; align-self: end; width: min(100%, 460px); gap: clamp(6px, 1vw, 12px); padding: clamp(7px, 1vh, 13px) clamp(12px, 2vw, 26px); background: linear-gradient(180deg, #584e3f 0%, #1a1236 100%); } #gorilpass svg, #gorilpass .ui-ik, #gorilpass .dj-ik { width: clamp(17px, 2vw, 26px); height: clamp(17px, 2vw, 26px); color: var(--altin); } .pass-yazi { font-size: clamp(11px, 1.5vw, 18px); letter-spacing: 2px; } .pass-alt { font-size: clamp(7.5px, 0.85vw, 10.5px); font-weight: 700; letter-spacing: 0.6px; text-transform: none; opacity: 0.6; } /* ═══ İKİNCİL ŞERİT — Görevler / Leaders ═══ Üst şeridin altında, sol kulenin üstünde duruyor; mutlak konumlu DEĞİL, ızgaranın `ust` satırına yapışık. */ /* Üst şeridin İÇİNDE, logo ile kesenin arasında. Ayrı bir ızgara öğesi olarak `ust` alanına bindirilmişti ve logonun üstüne biniyordu (ölçüldü: logo 826 px geniş, şerit x=534). */ #ikincil-serit { display: flex; gap: 6px; align-self: center; flex: 0 0 auto; } .mini-kart { padding: 5px clamp(7px, 1vw, 12px); font-size: clamp(8px, 0.95vw, 11px); } .mini-kart svg, .mini-kart .ui-ik, .mini-kart .dj-ik { width: 14px; height: 14px; } .mini-kart::after { border-width: 8px 8px 0 0; } /* ═══════════════════════════════════════════ SAĞ ÜST — para kesesi, ayar, Free ═══════════════════════════════════════════ */ #kese { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: clamp(5px, 0.8vw, 9px); align-content: start; } #kese-satirlar { display: flex; flex-direction: column; gap: 4px; padding: clamp(5px, 0.8vw, 9px); border-radius: 4px; background: linear-gradient(180deg, #39332a 0%, #0d1730 100%); border: 2px solid var(--altin); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); } .kese-satir { display: flex; align-items: center; gap: clamp(5px, 0.8vw, 9px); padding: clamp(3px, 0.5vw, 6px) clamp(5px, 0.8vw, 10px); border-radius: 3px; background: rgba(0, 0, 0, 0.35); } .kese-ikon { display: block; flex: 0 0 auto; } .kese-ikon svg, .kese-ikon .ui-ik, .kese-ikon .dj-ik { width: clamp(17px, 2.1vw, 24px); height: clamp(17px, 2.1vw, 24px); display: block; } .kese-ikon.coin svg, .kese-ikon.coin .ui-ik, .kese-ikon.coin .dj-ik { fill: #f5b83d; } .kese-ikon.coin svg .ic, .kese-ikon.coin .ui-ik .ic, .kese-ikon.coin .dj-ik .ic { fill: #ffd97a; } .kese-satir b { flex: 1; min-width: 0; text-align: left; font-size: clamp(12px, 1.7vw, 17px); font-weight: 800; font-variant-numeric: tabular-nums; } .kese-arti { width: clamp(17px, 2vw, 22px); height: clamp(17px, 2vw, 22px); border-radius: 3px; cursor: pointer; flex: 0 0 auto; background: linear-gradient(180deg, #ffdf6b, var(--sari-koyu)); border: 1px solid #7a4f06; color: #4a2c00; font-family: inherit; font-size: clamp(12px, 1.5vw, 16px); font-weight: 900; line-height: 1; display: grid; place-items: center; } .kese-arti:hover { filter: brightness(1.15); } /* ══ DOKUNMA ALANI GORUNUMU BOZMADAN BUYUTULUYOR ══ Olculdu (812x375 yatay telefon): rozet 15x15 -- parmakla isabet ettirmesi neredeyse imkansiz. Rozetin KUCUK gorunmesi tasarim: seviye kartinin icinde duran bir `+` isareti ve 44 piksele buyutulunce kart eziliyor. Onun yerine gorunmez bir sahte oge dokunma alanini 44x44'e tasiyor: piksel olcusu ayni kaliyor, parmak icin hedef buyuyor. `position: relative` sahte ogeyi rozete baglıyor; `z-index` vermiyor ki ustundeki gercek ogeleri ortmesin. */ .kese-arti { position: relative; } .kese-arti::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ELDE ÖDÜLLÜ REKLAM YOKKEN GİZLENİYOR. Lagged'in açık şartı: "hide buttons before reward is available." Sınıfı `odulDugmeleriTazele()` (js/main.js) koyup kaldırıyor; portalsız pakette hiç konmuyor, düğme hep duruyor. `!important`: aşağıdaki altın palet düzeltmesi de `!important` kullanıyor ve `display` ile çakışmasa da aynı seçiciyi hedefleyen üç ayrı blok var — gizleme her birini yenmeli. */ .kese-arti.gizli { display: none !important; } #ayar-dugme { grid-row: 1; grid-column: 2; width: clamp(38px, 4.6vw, 54px); height: clamp(38px, 4.6vw, 54px); border-radius: 4px; cursor: pointer; background: linear-gradient(180deg, #39332a 0%, #0d1730 100%); border: 2px solid var(--altin); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); display: grid; place-items: center; } #ayar-dugme svg, #ayar-dugme .ui-ik, #ayar-dugme .dj-ik { width: 58%; height: 58%; fill: var(--altin); } #ayar-dugme:hover svg, #ayar-dugme:hover .ui-ik, #ayar-dugme:hover .dj-ik { fill: #ffe9a8; } /* ═══════════════════════════════════════════ SOL — rütbe kartı ═══════════════════════════════════════════ */ /* Profil — Kuboom'da ekranın ÜST ORTASINDA: rozet + ad + ilerleme. Eskiden sol sütunda dikey bir karttı. */ #rutbe-kart { display: flex; align-items: stretch; gap: 0; border-radius: 4px; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, #39332a 0%, #0d1730 100%); border: 2px solid var(--altin); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); align-self: start; justify-self: center; width: min(100%, 460px); padding: 0; text-align: left; font-family: inherit; color: inherit; transition: filter 0.16s ease, transform 0.14s ease; } #rutbe-kart:hover { filter: brightness(1.15); transform: translateY(-1px); } #rutbe-kart:focus-visible { outline: 2px solid var(--buz); outline-offset: 2px; } #rutbe-avatar { flex: 0 0 auto; width: clamp(56px, 7vw, 78px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: clamp(5px, 0.8vw, 9px) 4px; background: rgba(6, 10, 20, 0.55); } #rutbe-rozet { display: block; line-height: 0; } #rutbe-rozet svg, #rutbe-rozet .ui-ik, #rutbe-rozet .dj-ik { width: clamp(34px, 4.4vw, 48px); height: clamp(34px, 4.4vw, 48px); display: block; } #oyuncu-etiket { font-size: clamp(7px, 0.95vw, 10px); font-weight: 700; opacity: 0.5; letter-spacing: 0.4px; } #rutbe-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: clamp(6px, 1vw, 11px); } #rutbe-satir { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #rutbe-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10px, 1.35vw, 14px); font-weight: 800; letter-spacing: 0.8px; color: var(--kehribar); } #rutbe-ust { font-size: clamp(8px, 1vw, 10px); font-weight: 700; letter-spacing: 1.6px; opacity: 0.45; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #xp-bar { height: clamp(6px, 0.8vw, 9px); border-radius: 5px; overflow: hidden; background: rgba(0, 0, 0, 0.45); } #xp-dolgu { height: 100%; width: 0%; border-radius: 5px; background: linear-gradient(90deg, #d99a2b, var(--kehribar)); box-shadow: 0 0 8px rgba(255, 179, 71, 0.55); transition: width 0.5s ease; } #xp-yazi { font-size: clamp(7.5px, 0.98vw, 10px); opacity: 0.5; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ═══════════════════════════════════════════ ORTA — karakter kartları ═══════════════════════════════════════════ */ /* Canli 3B sahnenin penceresi — yalnizca yer tutuyor, saydam ve tiklanamaz. Insan + kurt modelleri arkadaki tuvalde duruyor. */ #orta-alan { grid-area: orta; min-width: 0; pointer-events: none; } #karakterler { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.2vw, 14px); } /* ═══════════════════════════════════════════ ALT BAR ORTASI — harita · PLAY · nick Eskiden sağ sütunda dikey bir PANEL KUTUSUYDU (arka planlı, çerçeveli). Kuboom'un alt şeridinde kutu yok; ögeler doğrudan zeminin üstünde duruyor, o yüzden arka plan kaldırıldı. ═══════════════════════════════════════════ */ /* Harita kartı — Kuboom'daki mavi mod seçici bandının karşılığı, PLAY'in hemen yanında. İkinci harita gelince ok düğmeleriyle seçiciye dönüşecek. */ #harita-basligi { display: flex; flex-direction: column; gap: 1px; justify-content: center; padding: clamp(6px, 0.9vw, 11px) clamp(9px, 1.2vw, 15px); border: 2px solid var(--altin); border-radius: 4px; background: linear-gradient(180deg, #584e3f 0%, #352f27 100%); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); color: #ffe9a8; text-align: center; } #harita-basligi b { font-size: clamp(11px, 1.5vw, 16px); font-weight: 900; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); } #harita-basligi span { font-size: clamp(7px, 0.95vw, 10px); opacity: 0.7; color: #eae5da; text-transform: uppercase; letter-spacing: 0.6px; } /* Alt bar ortası: harita kartı · PLAY · nick. Nick kutusu eskiden PLAY kadar yer kaplıyordu (319 px) ve içi boştu — resme bakılarak görüldü. Artık dar ve sabit; ağırlık PLAY'de. */ #oyna-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; /* İlk satır kalan yeri ALIYOR: PLAY köşe kartlarıyla aynı boya çıksın. `auto` bırakılınca PLAY 92 px'te kalıp yanındaki 141 px'lik kartların yanında bodur duruyordu. */ grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: clamp(6px, 1vw, 12px); } /* `align-self: stretch` bir BUTONDA tutmuyor: kendi iç yüksekliğini koruyor (ölçüldü — satır 112 px iken PLAY 92 px'te kalıyordu). Yükseklik doğrudan veriliyor. */ #oyna-panel > * { align-self: stretch; } #oyna-panel #oyna, #oyna-panel #harita-basligi, #oyna-panel #nick-kutu { height: 100%; } #oyna-panel #oyna { grid-column: 2; grid-row: 1; } #oyna-panel #harita-basligi { grid-column: 1; grid-row: 1; } #oyna-panel #nick-kutu { grid-column: 3; grid-row: 1; } /* Alt yazı satırı AKIŞTAN ÇIKTI: ızgara satırı olarak yer kaplayınca PLAY 112 px'te kalıp yanındaki 141 px'lik köşe kartlarının yanında alçak duruyordu. Artık barın altına taşıyor, PLAY tam boy. */ #oyna-panel { position: relative; } /* "FIGHT THE BOTS" alt yazısı KALDIRILDI. Nereye konursa konsun PLAY'in gölgesinin üstüne biniyordu ve zaten gereksiz: modu yanındaki MIRAGE kartı söylüyor, Kuboom'da da PLAY'in altında böyle bir satır yok. DOM'dan silinmiyor — `oyunDurumuTazele()` her menüye dönüşte metnini yazıyor. */ #oyna-alt { display: none; } #nick-kutu { display: flex; flex-direction: column; gap: 2px; justify-content: center; padding: clamp(5px, 0.8vw, 9px) clamp(8px, 1.1vw, 13px); border-radius: 4px; background: linear-gradient(180deg, #39332a 0%, #0d1730 100%); border: 2px solid var(--altin); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); width: clamp(96px, 11vw, 142px); } /* Küçük etiket GİZLİ: alanın yer tutucusu zaten "Nickname" yazıyordu, kutuda aynı kelime iki kez görünüyordu. */ #nick-kutu span { display: none; } /* Adın kendisi kutunun ana içeriği; boş kutu gibi durmasın diye ortalanıyor ve yer tutucu da görünür kalıyor. */ #nick-kutu input { text-align: center; } #nick-kutu input::placeholder { color: rgba(244, 233, 207, 0.42); } #nick-kutu input { background: none; border: none; color: #fff; font-family: inherit; /* 16px altı yazı tipi iOS Safari'de odaklanınca sayfayı yakınlaştırıyor */ font-size: clamp(16px, 2vw, 21px); font-weight: 800; letter-spacing: 0.5px; padding: 0; width: 100%; min-width: 0; } #nick-kutu input:focus { outline: none; } /* `#sunucu-dugme` ve `#oyna-bot` kuralları KALDIRILDI — o düğmeler online katmanıyla birlikte silindi (bkz. CLAUDE.md "Sunucu yok"). */ /* ── Sunucu listesi ── */ .sunucu-satir { display: flex; align-items: center; gap: 7px; padding: clamp(4px, 0.7vw, 7px) clamp(6px, 0.9vw, 9px); border-radius: 7px; cursor: pointer; background: rgba(255, 255, 255, 0.05); font-size: clamp(9px, 1.15vw, 12px); font-weight: 700; border: 1px solid transparent; } .sunucu-satir:hover { background: rgba(224, 200, 133, 0.14); border-color: var(--buz); } .sunucu-satir .harita { color: var(--buz); letter-spacing: 1px; } .sunucu-satir .kadro { margin-left: auto; opacity: 0.65; font-variant-numeric: tabular-nums; } .sunucu-satir .bot-rozet { padding: 1px 5px; border-radius: 4px; font-size: 0.85em; background: rgba(255, 179, 71, 0.18); color: var(--kehribar); } /* ═══════════════════════════════════════════ BÜYÜK YEŞİL PLAY — nabız + sallanma ═══════════════════════════════════════════ */ /* PLAY — Kuboom'un dev SARI düğmesi. Yeşilden sarıya geçildi: referansta menünün tek sıcak vurgusu bu düğme ve altın çerçeveler; yeşil paletin dışında kalıyordu. */ #oyna { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.2vw, 14px); padding: clamp(11px, 1.9vw, 20px) clamp(10px, 1.8vw, 24px); border-radius: 6px; cursor: pointer; font-family: inherit; background: linear-gradient(180deg, #ffdf6b 0%, var(--sari) 45%, #eaa71a 100%); border: 3px solid #7a4f06; box-shadow: 0 5px 0 #7a4f06, 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.45); color: #4a2c00; font-size: clamp(22px, 4vw, 46px); font-weight: 900; letter-spacing: 3px; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); animation: playNabiz 1.6s ease-in-out infinite, playSalla 3.4s ease-in-out infinite; transform-origin: center bottom; } #oyna:disabled { filter: grayscale(0.7) brightness(0.7); cursor: default; animation: none; } #oyna:hover:not(:disabled) { filter: brightness(1.07); } #oyna:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #7a4f06; animation: none; } .play-yazi { line-height: 1; } .play-ikon { width: clamp(20px, 3.4vw, 38px); height: clamp(20px, 3.4vw, 38px); fill: #6b3f00; flex: 0 0 auto; } .play-ikon.sag { transform: scaleX(-1); } @keyframes playNabiz { 0%, 100% { box-shadow: 0 5px 0 #147a2e, 0 10px 26px rgba(35, 179, 72, 0.45); } 50% { box-shadow: 0 5px 0 #147a2e, 0 10px 40px rgba(90, 255, 140, 0.85); } } /* Sallanma kısa ve seyrek: sürekli titreyen düğme rahatsız ediyor, 3.4 saniyede bir göz ucuyla fark ediliyor. */ @keyframes playSalla { 0%, 82%, 100% { transform: rotate(0deg) scale(1); } 85% { transform: rotate(-2.2deg) scale(1.03); } 89% { transform: rotate(2.2deg) scale(1.03); } 93% { transform: rotate(-1.4deg) scale(1.02); } 96% { transform: rotate(1deg) scale(1.01); } } @media (prefers-reduced-motion: reduce) { #oyna { animation: none; } } #oyna-alt { text-align: center; font-size: clamp(8px, 1.05vw, 11px); letter-spacing: 1.4px; opacity: 0.45; font-weight: 700; } /* ═══════════════════════════════════════════ SOL ALT — logo ═══════════════════════════════════════════ */ /* Logo sol ÜSTE taşındı (eskiden sol alttaydı) — Kuboom'da alt köşeler MARKET/INVENTORY kartlarının. */ #menu-logo { align-self: center; } #menu-logo h1 { font-size: clamp(15px, 2.2vw, 28px); font-weight: 900; letter-spacing: 1.5px; line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7); } #menu-logo h1 span { color: var(--altin); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7); } #menu-logo .alt { margin-top: 4px; font-size: clamp(8px, 1vw, 11px); letter-spacing: 1.2px; opacity: 0.4; text-transform: uppercase; } /* ═══════════════════════════════════════════ AYAR PANELİ ═══════════════════════════════════════════ */ #ayar-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 70; width: min(92vw, 400px); /* Panel büyüdükçe (ses, efekt, veri silme…) ekrandan taşıyordu — ölçüldü: alt kenar görünür alanın dışında kalıyordu ve düğmelere ulaşılamıyordu. Yükseklik sınırlanıp içerik kaydırılıyor. */ max-height: min(88vh, 640px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; border-radius: 14px; background: rgba(10, 16, 28, 0.97); border: 1px solid rgba(228, 206, 147, 0.3); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65); } .ayar-baslik { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: 2.4px; margin-bottom: 6px; } #ayar-kapat { width: 28px; height: 28px; border-radius: 7px; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: none; color: #fff; font-size: 18px; font-family: inherit; line-height: 1; } #ag-durum-satir { margin-top: 14px; padding-top: 10px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 10px; } #online-durum { font-weight: 700; } #online-durum.baglaniyor { color: #ffd479; } #online-durum.bagli { color: #7fe6a0; } #online-durum.hata { color: var(--kirmizi); } #ag-durum-satir code { opacity: 0.4; font-size: 9px; word-break: break-all; } /* ── "Yakında" balonu ── */ #yakinda { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 75; padding: 18px 28px; border-radius: 13px; text-align: center; background: rgba(10, 16, 28, 0.97); border: 1px solid rgba(228, 206, 147, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); animation: yakindaGir 0.16s ease-out; } #yakinda b { display: block; font-size: 16px; font-weight: 800; letter-spacing: 2px; } #yakinda span { display: block; margin-top: 4px; font-size: 11px; opacity: 0.45; letter-spacing: 2px; } @keyframes yakindaGir { from { opacity: 0; transform: translate(-50%, -46%); } } /* ═══════════════════════════════════════════ RESPONSIVE İLKE: mobilde de MASAÜSTÜ DÜZENİ. Oyun yatay bir FPS; telefon zaten yan tutuluyor. Önceki sürüm 820 px altında her şeyi tek sütuna yığıyordu — ama yatay telefon 812 px genişliğinde, yani asıl oyun duruşunda menü bozuluyordu. Artık ızgara hep aynı; ölçüler viewport'a göre küçülüyor. Tek sütun yalnız DAR DİKEY ekranda (telefon dik tutulmuş) devreye giriyor ve orada da "telefonu yan çevir" uyarısı çıkıyor. ═══════════════════════════════════════════ */ /* Yatay telefon / küçük dizüstü — düzen aynı, ölçüler kısılıyor */ @media (max-width: 1100px) { #menu-ic { grid-template-columns: minmax(150px, 26vw) minmax(0, 1fr) minmax(180px, 30vw); gap: clamp(5px, 1vw, 10px); padding: clamp(5px, 1vw, 12px); } } /* Yatay telefon: yükseklik 540 px altı. Kritik: menü EKRANA SIĞMALI. Önceki sürümde karakter kartları (4/5 en-boy) içeriği 452 px'e çıkarıyordu; 390 px'lik yatay telefonda PLAY düğmesi katlamanın altında kalıyor, oyuncu oyuna giremiyordu. Burada ızgara ekran boyuna kilitleniyor ve orta sütun kalan yeri paylaşıyor. */ /* ═══════════════════════════════════════════ DAR EKRANDA ALT BAR İKİ SIRA Geniş ekranda alt barın ortası yan yana: [harita][PLAY][nick]. Merkez sütun daralınca harita kartı ve nick kutusu kendi asgari genişliklerini koruyor ve aradaki PLAY eziliyordu — ölçüldü: 812×375'te PLAY 22 px'e düşüyor, yani menünün ANA DÜĞMESİ tıklanamaz hâle geliyordu. Bu kırılmadan sonra harita ve nick üst sırayı paylaşıyor, PLAY tam genişlikte alta iniyor. Kuboom'da da PLAY her zaman en büyük öge. ═══════════════════════════════════════════ */ @media (max-width: 1000px) { #oyna-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; } #oyna-panel #harita-basligi { grid-column: 1; grid-row: 1; } #oyna-panel #nick-kutu { grid-column: 2; grid-row: 1; min-width: 0; } #oyna-panel #oyna { grid-column: 1 / -1; grid-row: 2; } #oyna-alt { grid-column: 1 / -1; grid-row: 3; } } /* Çevirme uyarısının VARSAYILANI — dikey medya sorgusundan ÖNCE duruyor ki o sorgu bunu ezebilsin (aynı özgüllükte kaynak sırası belirleyici). Aşağıdaki asıl blokta dururken tam tersi oluyor ve uyarı hiç görünmüyordu. */ /* Çok dar (360 px) */ @media (max-width: 400px) { #karakterler { gap: 4px; } #kese-satirlar { padding: 4px; } .kese-satir { padding: 3px 5px; gap: 4px; } } /* Maçtan çık — yalnız süren maç varken görünüyor */ /* =========================================== PANEL MODU — Envanter, Shop, Gorevler, Pass, Leaders Panel acikken logo, profil, yan sutunlar ve 3B alan gizleniyor; SAG SUTUN (para + ayar) ve ALT BAR (harita/nick/PLAY) kaliyor. Boylece oyuncu envanterden cikmadan dogrudan maca girebiliyor. =========================================== */ /* Panel açıkken menünün TAMAMI çekiliyor. Eskiden sağ sütun (para + PLAY) açık kalıyordu ki oyuncu shop'tan çıkmadan maça girebilsin; PLAY artık ekranın dibinde dev bir düğme ve panel içeriğinin üstüne biniyor. Kapatma çarpısı zaten sol üstte. */ body.panelde #kume-solust, body.panelde #kume-sagust, body.panelde #oyna-panel, body.panelde #orta-alan { display: none; } body.panelde #menu { background: linear-gradient(180deg, rgba(6, 9, 15, 0.94) 0%, rgba(4, 6, 11, 0.97) 100%); backdrop-filter: blur(4px); } body.panelde #menu-ic { grid-template-areas: "panel panel kese" "panel panel oyna"; grid-template-rows: auto 1fr; } /* Panel modunda alt bar DAR bir sütuna sıkışıyor (en fazla 210 px). Yan yana dizilmiş harita + PLAY + nick orada 52 px genişliğe çöküyordu — ölçüldü. Bu kipte dikey diziliyorlar. */ body.panelde #oyna-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-self: end; } body.panelde #oyna-panel > * { grid-column: 1 !important; grid-row: auto !important; } /* Alt köşe kartları panelde gereksiz: panelin kendisi zaten SHOP/ENVANTER içeriği. Izgara alanları da bu kipte tanımsız. */ /* Kocaman kirmizi carpi — sol ust */ #panel-x { grid-area: panel; justify-self: start; align-self: start; position: relative; z-index: 2; width: clamp(46px, 6vw, 66px); height: clamp(46px, 6vw, 66px); display: grid; place-items: center; cursor: pointer; /* Kuboom dili: köşeli, kalın koyu çerçeve, altta sert gölge */ border-radius: 4px; background: linear-gradient(180deg, #e8484f 0%, #b81f26 100%); border: 3px solid #6d1116; box-shadow: 0 4px 0 #6d1116, 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.28); transition: filter 0.14s ease, transform 0.1s ease; } #panel-x svg, #panel-x .ui-ik, #panel-x .dj-ik { width: 54%; height: 54%; fill: #fff; } #panel-x:hover { filter: brightness(1.12); } #panel-x:active { transform: translateY(3px); box-shadow: 0 1px 0 #7d1218; } #panel-x.gizli { display: none !important; } #panel { grid-area: panel; display: flex; flex-direction: column; gap: clamp(8px, 1.4vw, 14px); min-width: 0; min-height: 0; padding-left: calc(clamp(46px, 6vw, 66px) + clamp(10px, 1.6vw, 18px)); } #panel.gizli { display: none !important; } /* TELEFONDA panel TAM EKRAN. Masaüstünde sağ sütun (para + PLAY) bilerek açık kalıyor: oyuncu envanterden çıkmadan maça girebiliyor. Telefonda ise o sütun ekranın %30'unu kalıcı olarak yiyor ve shop %68'e sıkışıyordu — silah kartları yan yana sığmıyor, kapatma çarpısı başlığın üstüne biniyordu. Panel açıkken sağ sütun gizleniyor; kapatma çarpısı zaten hemen orada. */ @media (max-width: 900px), (max-height: 560px) { body.panelde #menu-ic { grid-template-columns: 1fr; grid-template-areas: "panel"; grid-template-rows: minmax(0, 1fr); } body.panelde #kese, body.panelde #oyna-panel { display: none; } /* Çarpı başlıkla çakışmasın diye panel içeriği onun altından başlıyor; dar ekranda yan yana yer yok. */ #panel { padding-left: 0; padding-top: calc(clamp(46px, 6vw, 66px) + 8px); } #panel-x { position: absolute; } } #panel-baslik { display: flex; align-items: baseline; gap: 12px; } #panel-ad { font-size: clamp(18px, 3.2vw, 32px); font-weight: 800; letter-spacing: clamp(2px, 0.5vw, 5px); text-transform: uppercase; color: var(--buz); text-shadow: 0 0 26px rgba(224, 200, 133, 0.35); } .panel-alt-baslik { font-size: clamp(9px, 1.1vw, 11px); letter-spacing: 3px; opacity: 0.42; text-transform: uppercase; margin-bottom: 8px; } .panel-icerik { min-width: 0; min-height: 0; overflow-y: auto; } .panel-icerik.gizli { display: none !important; } .panel-bos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: clamp(30px, 8vh, 70px) 20px; text-align: center; border: 1px dashed rgba(228, 206, 147, 0.2); border-radius: 13px; } .panel-bos b { font-size: clamp(15px, 2.4vw, 22px); font-weight: 800; letter-spacing: 3px; } .panel-bos span { font-size: clamp(10px, 1.3vw, 13px); opacity: 0.4; letter-spacing: 1px; } @media (max-height: 540px) { #panel { padding-left: calc(clamp(38px, 5vw, 52px) + 10px); gap: 6px; } #panel-x { width: clamp(38px, 5vw, 52px); height: clamp(38px, 5vw, 52px); } #panel-ad { font-size: clamp(15px, 2.6vw, 22px); } } @media (max-width: 700px) and (orientation: portrait) { body.panelde #menu-ic { grid-template-columns: 1fr; grid-template-areas: "panel" "kese" "oyna"; grid-template-rows: auto auto auto; } /* ══ SOL BOŞLUK GERİ EKLENMİYOR ══ Burada `padding-left` yeniden veriliyordu ve yukarıdaki `max-width: 900px` kuralının `padding-left: 0`ını EZİYORDU. Kapatma çarpısı o kuralda `position: absolute` olduğu için ayrılan yerin karşılığı yok — 58 piksel boşa gidiyordu. Ölçüldü (375×812): panel 363 px, kenarlık 80, sol boşluk 58 → içeriğe yalnız 225 px kalıyordu. Sahibi "mobilde liderlik ve günlük görevler bozuluyor" diye bildirdi; sebebi buydu. */ #panel { padding-left: 0; } } /* =========================================== ISTATISTIK PENCERESI =========================================== */ #istatistik { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 12, 0.8); backdrop-filter: blur(4px); padding: 16px; } #istatistik.gizli { display: none !important; } #ist-ic { width: min(94vw, 540px); max-height: 92vh; overflow-y: auto; padding: clamp(14px, 2.6vw, 22px); border-radius: 15px; background: linear-gradient(180deg, #241f18 0%, #12100c 100%); border: 1px solid rgba(228, 206, 147, 0.28); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.65); animation: istGir 0.16s ease-out; } @keyframes istGir { from { opacity: 0; transform: scale(0.97); } } #ist-bas { display: flex; align-items: center; gap: 13px; } #ist-rozet { line-height: 0; flex: 0 0 auto; } #ist-rozet svg, #ist-rozet .ui-ik, #ist-rozet .dj-ik { width: clamp(50px, 9vw, 66px); height: clamp(50px, 9vw, 66px); display: block; } #ist-kimlik { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } #ist-ad { font-size: clamp(16px, 2.8vw, 22px); font-weight: 800; letter-spacing: 0.2px; } #ist-ust { font-size: clamp(9px, 1.2vw, 11px); font-weight: 700; letter-spacing: 2.2px; color: var(--kehribar); text-transform: uppercase; } #ist-etiket { font-size: 10px; opacity: 0.4; font-weight: 700; } #ist-kapat { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: none; color: #fff; font-size: 20px; font-family: inherit; line-height: 1; } #ist-kapat:hover { background: rgba(255, 255, 255, 0.16); } #ist-cubuk { height: 8px; border-radius: 5px; margin-top: 14px; background: rgba(0, 0, 0, 0.42); overflow: hidden; } #ist-dolgu { height: 100%; width: 0%; border-radius: 5px; background: linear-gradient(90deg, #d99a2b, var(--kehribar)); } #ist-puan { margin-top: 5px; font-size: 11px; opacity: 0.5; font-weight: 700; } #ist-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-top: 16px; } .ist-kutu { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.06); } .ist-kutu .etiket { display: block; font-size: 9px; letter-spacing: 1.8px; opacity: 0.45; text-transform: uppercase; font-weight: 700; } .ist-kutu .deger { display: block; margin-top: 3px; font-size: clamp(17px, 3vw, 23px); font-weight: 800; font-variant-numeric: tabular-nums; } .ist-kutu.vurgu .deger { color: var(--buz); } .ist-kutu.kurt .deger { color: var(--kehribar); } .ist-kutu .alt { display: block; font-size: 9.5px; opacity: 0.4; font-weight: 600; } /* =========================================== MAC SONU PANELI =========================================== */ #bitis { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 12, 0.86); backdrop-filter: blur(5px); padding: 16px; } #bitis.gizli { display: none !important; } #bitis-ic { width: min(94vw, 460px); padding: clamp(18px, 3.4vw, 30px); border-radius: 16px; text-align: center; background: linear-gradient(180deg, #241f18 0%, #12100c 100%); border: 1px solid rgba(228, 206, 147, 0.3); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7); animation: bitisGir 0.22s ease-out; } @keyframes bitisGir { from { opacity: 0; transform: translateY(14px) scale(0.97); } } #bitis-baslik { font-size: clamp(24px, 5vw, 40px); font-weight: 900; letter-spacing: clamp(2px, 0.6vw, 6px); } #bitis-baslik.galip { color: #4ce07a; text-shadow: 0 0 30px rgba(76, 224, 122, 0.45); } #bitis-baslik.maglup { color: var(--kirmizi); text-shadow: 0 0 30px rgba(255, 77, 77, 0.4); } #bitis-baslik.berabere { color: var(--kehribar); } #bitis-skor { margin-top: 4px; font-size: clamp(19px, 3.4vw, 28px); font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.72; } #bitis-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 18px; text-align: left; } #bitis-alt { margin-top: 18px; font-size: 11px; letter-spacing: 1.6px; opacity: 0.5; font-weight: 700; } #bitis-alt b { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 5px; background: var(--buz); color: #2b1d05; font-size: 13px; } /* =========================================== MAGAZA — silah derileri ve sirt dovmeleri Envanterdeki .kart yerine kendi kartlari: urunler kucuk ve cok, karakter kartlari ise buyuk ve uc tane. Ayni sinifi zorlamak ikisini de bozuyordu. =========================================== */ .magaza-bolum { margin-bottom: clamp(10px, 2vh, 20px); } .urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 13vw, 132px), 1fr)); gap: clamp(7px, 1.1vw, 12px); } .urun { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 11px; cursor: pointer; background: linear-gradient(180deg, rgba(69, 61, 50, 0.72) 0%, rgba(16, 24, 44, 0.86) 100%); border: 1px solid rgba(220, 199, 140, 0.2); color: inherit; font-family: inherit; text-align: left; transition: border-color 0.15s ease, transform 0.12s ease; } .urun:hover { border-color: var(--buz); transform: translateY(-2px); } .urun:focus-visible { outline: 2px solid var(--buz); outline-offset: 2px; } .urun.secili { border-color: var(--kehribar); box-shadow: 0 0 0 1px var(--kehribar) inset; } .urun-gorsel { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; background: radial-gradient(ellipse at 50% 42%, rgba(190, 163, 90, 0.30), rgba(0, 0, 0, 0.32)); object-fit: contain; display: block; } /* Dovme gorselleri KOYU zeminde siyah — oyundaki gibi gostermek okunmaz kilardi. Magazada acik zemin + ters cevirme ile net. */ .urun-gorsel.dovme { background: linear-gradient(180deg, #d8e2f0 0%, #aab8cc 100%); padding: 6px; } .urun-ad { font-size: clamp(10px, 1.15vw, 12px); font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .urun-fiyat { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #6ee7a8; } .urun.secili .urun-fiyat { color: var(--kehribar); } @media (max-width: 700px) and (orientation: portrait) { .urunler { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } } /* Bitis barinda oyuncunun takimi — skorun hangi tarafi oldugu tek bakista anlasilsin */ #bitis-takim { margin-top: 2px; font-size: clamp(9px, 1.2vw, 12px); font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; } #bitis-takim.mavi { color: #6fb2ff; } #bitis-takim.kirmizi { color: #ff7b7b; } /* =========================================== MAGAZA DUZENI — suzgec + urunler + canli onizleme =========================================== */ #shop-suzgec { display: flex; gap: 6px; margin-bottom: clamp(8px, 1.4vh, 14px); flex-wrap: wrap; } .shop-sekme { padding: 7px clamp(10px, 1.6vw, 18px); border-radius: 9px; cursor: pointer; font-family: inherit; font-size: clamp(9px, 1.1vw, 11.5px); font-weight: 800; letter-spacing: 1.6px; color: #eae5da; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(220, 199, 140, 0.2); transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } .shop-sekme:hover { background: rgba(255, 255, 255, 0.1); } .shop-sekme.secili { background: linear-gradient(180deg, #5c5243 0%, #3b342b 100%); border-color: var(--kehribar); color: #fff; } .shop-sekme:focus-visible { outline: 2px solid var(--buz); outline-offset: 2px; } /* Urunler solda, onizleme sagda. Dar ekranda alt alta. */ #shop-govde { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 30%, 330px); gap: clamp(10px, 1.6vw, 18px); min-height: 0; align-items: start; } #shop-urunler { min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); } .magaza-bolum.gizli { display: none !important; } #shop-onizleme { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 13px; background: linear-gradient(180deg, rgba(53, 47, 39, 0.8) 0%, rgba(10, 16, 30, 0.9) 100%); border: 1px solid rgba(220, 199, 140, 0.22); } #onizleme-tuval { width: 100%; aspect-ratio: 3 / 4; display: block; border-radius: 9px; background: radial-gradient(ellipse at 50% 38%, rgba(160, 136, 70, 0.35), rgba(4, 7, 13, 0.9)); } #onizleme-etiket { display: flex; flex-direction: column; gap: 2px; text-align: center; } #onizleme-ad { font-size: clamp(11px, 1.5vw, 14px); font-weight: 800; letter-spacing: 0.4px; } #onizleme-alt { font-size: 9.5px; opacity: 0.45; letter-spacing: 1.4px; text-transform: uppercase; } /* DİKEY TELEFON — masaüstüyle AYNI DÜZEN (sahibin isteği: "masaüstü market tasarımı mobilde de işlesin"). Eskiden burada alt alta diziliyor ve önizleme üste çıkıyordu: ekranın üst yarısını tek bir silah resmi kaplıyor, ürün ızgarası katlamanın altına düşüyordu. Yan yana kalıyor; önizleme daralıyor ve kare orana iniyor, kartlar küçülüyor. 390 px'te ölçüldü: önizleme 117 px, liste 245 px, üç sütun kart. */ @media (max-width: 860px) and (min-height: 501px) { #shop-govde { grid-template-columns: minmax(0, 1fr) clamp(104px, 30%, 168px); gap: 8px; } #shop-onizleme { position: sticky; top: 0; order: 0; padding: 6px; gap: 4px; } #onizleme-tuval { aspect-ratio: 1 / 1; } #onizleme-alt { display: none; } .urunler { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; } } /* YATAY telefon: ekran alçak, alt alta dizmek felaket. Ölçüldü — 844x390'da önizleme ekranın %52'sini kaplıyor ve ilk ürün kartı y=445'te, yani katlamanın tamamen altında kalıyor; mağazada hiçbir ürüne ulaşılamıyor. Yan yana kalıyor, önizleme daralıyor ve kare oranına düşüyor. */ @media (max-height: 500px) and (orientation: landscape) { #shop-govde { grid-template-columns: minmax(0, 1fr) clamp(130px, 26%, 190px); gap: 8px; } #shop-onizleme { position: sticky; top: 0; order: 0; padding: 6px; gap: 4px; } #onizleme-tuval { aspect-ratio: 1 / 1; } #onizleme-alt { display: none; } .urunler { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; } } /* =========================================== ODUL SANDIGI etiketi — 3B sandigin ustune oturan DOM dugmesi =========================================== */ .sandik-etiket { /* z-index MENÜNÜN (60) ÜSTÜNDE olmalı: 26'dayken menü kaplaması etiketi görsel olarak değil ama TIKLAMA olarak örtüyordu — "AÇ!" düğmesine basılamıyordu. */ position: fixed; z-index: 65; transform: translate(-50%, -50%); /* ══ DOKUNMA HEDEFI ══ Olculdu (375x812): 114x31 -- yani yuksekligi 44'un altindaydi. Etiket TIKLANABILIR (hazirken kasayi aciyor, beklerken video teklif ediyor), yani gercek bir dokunma hedefi. `min-height` + flex ortalama: yazi ayni yerde duruyor, kutu buyuyor. `padding` ile buyutmek yaziyi asagi kaydiriyordu. */ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px clamp(9px, 1.3vw, 14px); border-radius: 999px; cursor: default; font-family: inherit; font-weight: 900; font-size: clamp(10px, 1.3vw, 13px); letter-spacing: 1.6px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 16, 28, 0.82); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: background 0.2s ease, border-color 0.2s ease; } .sandik-etiket.gizli { display: none !important; } /* Sayarken sakin */ .sandik-etiket.sayiyor { opacity: 0.88; } /* Hazirken dikkat cekiyor — tiklanabilir tek durum bu */ .sandik-etiket.hazir { cursor: pointer; background: linear-gradient(180deg, #f0b429 0%, #c4830c 100%); border-color: #ffe08a; color: #23180a; box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.18), 0 6px 18px rgba(240, 180, 41, 0.4); animation: sandikNabiz 1.1s ease-in-out infinite; } .sandik-etiket.hazir:hover { filter: brightness(1.08); } @keyframes sandikNabiz { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.09); } } /* Odul alindi, mac bekleniyor */ .sandik-etiket.kilitli { opacity: 0.72; font-size: clamp(8.5px, 1.05vw, 10.5px); letter-spacing: 1.2px; border-color: rgba(255, 255, 255, 0.14); } @media (prefers-reduced-motion: reduce) { .sandik-etiket.hazir { animation: none; } } /* =========================================== ODALAR PENCERESI — ortada kucuk, tam ekran degil =========================================== */ #odalar { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 7, 12, 0.72); backdrop-filter: blur(3px); } #odalar.gizli { display: none !important; } #odalar-ic { width: min(92vw, 440px); max-height: min(78vh, 520px); display: flex; flex-direction: column; border-radius: 15px; overflow: hidden; background: linear-gradient(180deg, #241f18 0%, #12100c 100%); border: 1px solid rgba(228, 206, 147, 0.28); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.65); animation: odalarGir 0.16s ease-out; } @keyframes odalarGir { from { opacity: 0; transform: scale(0.96); } } #odalar-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: clamp(12px, 2vw, 18px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #odalar-baslik { display: block; font-size: clamp(14px, 2.4vw, 19px); font-weight: 900; letter-spacing: 3px; } #odalar-alt { display: block; margin-top: 3px; font-size: clamp(8.5px, 1.1vw, 10.5px); opacity: 0.45; letter-spacing: 1.2px; } /* Sag ust kosede KOCAMAN kirmizi kapatma */ #odalar-kapat { flex: 0 0 auto; width: clamp(38px, 5.5vw, 50px); height: clamp(38px, 5.5vw, 50px); display: grid; place-items: center; cursor: pointer; border-radius: 11px; color: #fff; background: linear-gradient(180deg, #e8484f 0%, #b81f26 100%); border: 2px solid #ff8a8f; box-shadow: 0 4px 0 #7d1218; transition: filter 0.14s ease, transform 0.08s ease; } #odalar-kapat svg, #odalar-kapat .ui-ik, #odalar-kapat .dj-ik { width: 56%; height: 56%; } #odalar-kapat:hover { filter: brightness(1.12); } #odalar-kapat:active { transform: translateY(3px); box-shadow: 0 1px 0 #7d1218; } #odalar-liste { display: flex; flex-direction: column; gap: 7px; padding: clamp(10px, 1.8vw, 15px); overflow-y: auto; min-height: 0; } .oda-satir { display: grid; align-items: center; gap: 10px; grid-template-columns: auto 1fr auto auto; padding: 10px clamp(9px, 1.4vw, 13px); border-radius: 11px; cursor: pointer; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(220, 199, 140, 0.18); color: inherit; font-family: inherit; text-align: left; transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease; } .oda-satir:hover { border-color: var(--kehribar); background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); } .oda-satir:focus-visible { outline: 2px solid var(--buz); outline-offset: 2px; } /* Harita rozeti — hangi haritada olduğu tek bakista belli */ .oda-harita { padding: 4px 9px; border-radius: 7px; font-size: clamp(8.5px, 1.05vw, 10px); font-weight: 900; letter-spacing: 1.6px; } .oda-harita.giris { background: rgba(224, 200, 133, 0.16); color: #d6ccb8; } .oda-harita.col { background: rgba(240, 180, 41, 0.16); color: #ffcf68; } .oda-kod { font-size: clamp(10px, 1.3vw, 12.5px); font-weight: 700; opacity: 0.55; letter-spacing: 1.4px; } .oda-kisi { font-size: clamp(11px, 1.5vw, 14px); font-weight: 900; font-variant-numeric: tabular-nums; } .oda-sure { font-size: clamp(9px, 1.2vw, 11px); font-weight: 800; opacity: 0.6; font-variant-numeric: tabular-nums; } .oda-sure.bitiyor { color: #ff8a8f; opacity: 1; } .odalar-bos { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: clamp(24px, 5vh, 44px) 16px; text-align: center; } .odalar-bos b { font-size: clamp(12px, 1.8vw, 15px); font-weight: 800; letter-spacing: 2px; } .odalar-bos span { font-size: clamp(9px, 1.2vw, 11px); opacity: 0.42; } /* ── Bakis hassasiyeti kaydiricisi ── YALNIZ dokunmatikte gorunuyor: masaustunde fare hassasiyeti ayri bir sey ve donmeyen bir kaydirici kafa karistirir. */ #hassasiyet-satir { display: none; } body.dokunmatikli #hassasiyet-satir { display: block; } .ayar-kaydirici { display: flex; align-items: center; gap: 12px; } .ayar-kaydirici input[type="range"] { flex: 1; min-width: 0; height: 30px; /* 30px: parmak hedefi */ -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } .ayar-kaydirici input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); } .ayar-kaydirici input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); } .ayar-kaydirici input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%; background: var(--buz); border: 2px solid #0d1016; box-shadow: 0 0 10px rgba(224, 200, 133, 0.5); } .ayar-kaydirici input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--buz); border: 2px solid #0d1016; box-shadow: 0 0 10px rgba(224, 200, 133, 0.5); } .ayar-kaydirici output { min-width: 46px; text-align: right; font-size: 13px; font-weight: 800; color: var(--buz); font-variant-numeric: tabular-nums; } .ayar-ipucu { margin-top: 4px; font-size: 9.5px; letter-spacing: 1px; opacity: 0.42; text-transform: uppercase; } /* Tam genislikte ac/kapa dugmesi (grafik kipi). Durum etiketi SAGDA ve renkli: "acik mi kapali mi" sorusunun cevabi dugmeye bakinca okunmali, basmayi denemeye gerek kalmadan. */ .ayar-dugme-genis { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; margin-top: 2px; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(228, 206, 147, 0.22); color: #dfe8f5; font-family: inherit; transition: background 0.15s, border-color 0.15s; } .ayar-dugme-genis:hover { background: rgba(255, 255, 255, 0.09); } .ayar-dugme-genis .ayar-dugme-ad { font-size: 12px; font-weight: 800; letter-spacing: 1.1px; } .ayar-dugme-genis .ayar-dugme-durum { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #8d9aad; } .ayar-dugme-genis.acik { background: rgba(224, 200, 133, 0.13); border-color: rgba(224, 200, 133, 0.55); } .ayar-dugme-genis.acik .ayar-dugme-durum { background: var(--buz); color: #06222c; } /* Gizlilik politikasi bagi — ayar panelinin dibinde, sakin. Portallar dis sunucu kullanan oyunlarda bunun oyun ICINDEN erisilebilir olmasini sart kosuyor; o yuzden gizlenebilir bir yerde degil, Ayarlar'in sabit bir parcasi. */ #gizlilik-bag { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: 1px; color: rgba(232, 238, 246, 0.5); text-decoration: none; border-bottom: 1px solid rgba(232, 238, 246, 0.2); padding-bottom: 1px; touch-action: manipulation; } #gizlilik-bag:hover { color: var(--buz); border-bottom-color: var(--buz); } /* Magaza fiyat etiketi. Uc durum: ACIK (yesil), alinabilir (altin), para yetmiyor (soluk kirmizi). Kilitli urun yine tiklaniyor — onizlemesi goruluyor, satin alma orada teklif ediliyor. */ .urun-fiyat.coinli::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 50%; background: #f5b83d; box-shadow: inset 0 0 0 1.5px #b8862a; } .urun.kilitli .urun-fiyat { color: var(--kehribar); font-weight: 800; } .urun.kilitli.pahali .urun-fiyat { color: #ff8080; } .urun.kilitli .urun-gorsel { filter: grayscale(0.55) brightness(0.72); } /* KİLİT — EMOJİ DEĞİL, oyunun kendi ikonu. `content: '🔒'` sistem emojisiydi: her cihazda başka çiziliyor (Windows'ta düz, iOS'ta parlak, Android'de bambaşka) ve oyunun diliyle hiç ilgisi yok. Artık sarmaşık sarmış paslı asma kilit. */ .urun.kilitli::after { content: ''; position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; background: url('../gorsel/ui/para-kilit.webp') center/contain no-repeat; opacity: .95; pointer-events: none; } .urun { position: relative; } /* PLAY'in üstündeki 20 px `style.css`'ten sızıyor (eski dikey menü düzeninden kalma). Yatayda düğmeyi satırın 20 px altına itiyordu: ölçümde alt kenarı 722 px, yani 720'lik ekranın 2 px DIŞINDA ve kendi panelinden 20 px taşmış hâlde. Dikey dal bunu zaten sıfırlıyordu, yatay dal unutulmuş. */ #oyna-panel #oyna { margin-top: 0; } /* Panel satirin tamamini kaplasin: ust bosluk kalkinca panel 92 px'e dustu ama komsu kartlar 112 px kaldi ve alt bar basamakli goründü. `align-self: stretch` satiri esitliyor; PLAY zaten `height: 100%`. */ #oyna-panel { align-self: stretch; } /* ═══════════════════════════════════════════════════════════════ DUYARLI DAVRANIŞ — kule düzeni DOSYANIN SONUNDA duruyor, bilerek: aynı özgüllükte kaynak sırası belirleyici ve bu proje o tuzağa iki kez düştü (HUD'da cephane, menüde ikon boyu). Dar ekran düzeltmeleri hep en sona. ═══════════════════════════════════════════════════════════════ */ /* ── ALÇAK YATAY (yatay telefon) ── */ @media (max-height: 560px) and (orientation: landscape) { #menu { overflow: hidden; } #menu-ic { height: 100%; min-height: 0; gap: 5px; padding: 6px; } /* LOGO YATAYDA GÖRÜNÜR — buradaki `#menu-logo { display: none }` kaldırılmış "kule" düzeninden kalmıştı. Eşik 560 px olduğu için HER telefon yatayda bu dala giriyordu ve sahibin "logo yatayda görünsün" kuralı sessizce çiğneniyordu. Ölçüldü: 812×375'te logo [321,12,171×56] ve dört köşe kümesiyle kesişimi 0 px, yani sığıyor. Dikeydeki gizleme ayrı kuraldan geliyor (aşağıda). */ #ikincil-serit { display: none; } .kule-kart { padding: 5px 6px; gap: 2px; } .kule-ikon { width: 22px; height: 22px; } .kule-alt { display: none; } .kule-yazi { font-size: 8.5px; letter-spacing: 0.6px; } #gorilpass { padding: 4px 12px; } .pass-alt { display: none; } #kese-satirlar { padding: 3px; gap: 3px; } .kese-satir { padding: 2px 6px; } #ayar-dugme { width: 32px; height: 32px; } #rutbe-avatar { width: 44px; } #oyna { padding: 6px; font-size: clamp(18px, 3.4vw, 28px); } .play-ikon { width: 20px; height: 20px; } #oyna-alt { display: none; } } /* ── DAR YATAY ── kule genişliği kısılıyor, hiçbir şey kaybolmuyor */ @media (max-width: 900px) and (orientation: landscape) { #menu-ic { grid-template-columns: clamp(104px, 15vw, 150px) minmax(0, 1fr) clamp(104px, 16vw, 165px); } .kule-yazi { font-size: 8.5px; letter-spacing: 0.5px; } .kule-alt { display: none; } } /* ── DİKEY ── Kuleler YATAY ŞERİDE dönüyor: solun altı üstte bir sıra, sağınki altta. 3B sahne ikisinin arasında kalıyor ve bandı korunuyor. `#oyna-panel` sağ kuleden çıkıp tam genişlikte en alta iniyor. */ @media (orientation: portrait) { #menu-ic { grid-template-columns: minmax(0, 1fr); /* SIRALAMA: en altta önce GORILPASS, en dipte PLAY. `#oyna-panel` DOM'da `#sag-kule`nin çocuğu, yani `#menu-ic`in ızgara ögesi DEĞİL — ona `grid-area: oyna` vermek hiçbir şey yapmıyor, panel kulenin içinde kalıyor. Bu yüzden PLAY `sag` satırında çiziliyordu ve GORILPASS onun ALTINA düşüyordu. Free kasa 3B objeye taşınınca sağ kulede yalnız oyna paneli kaldı; artık `sag` satırının kendisi PLAY satırı ve `pass` onun üstüne alındı. */ grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "ust" "sol" "orta" "pass" "sag"; padding-bottom: calc(14px + var(--sa-b, 0px)); row-gap: clamp(5px, 1vh, 10px); } #sol-kule, #sag-kule { flex-direction: row; align-items: stretch; gap: clamp(4px, 1.2vw, 9px); } #sol-kule > *, #sag-kule > * { flex: 1 1 0; min-width: 0; } /* Yatayda dikey nefes veren boşluk, sırada yer kaplamamalı */ .kule-bosluk { display: none; } #rutbe-kart { flex: 1.5 1 0; } .kule-kart { padding: 7px 4px; gap: 3px; } .kule-ikon { width: clamp(22px, 7vw, 34px); height: clamp(22px, 7vw, 34px); } .kule-yazi { font-size: clamp(8px, 2.5vw, 11px); letter-spacing: 0.4px; } .kule-alt { display: none; } #ust-serit { flex-wrap: wrap; } #menu-logo { flex: 1 1 100%; text-align: center; order: -1; } #menu-logo .alt { display: none; } #menu-logo h1 { font-size: clamp(18px, 5.4vw, 28px); } #kese { flex: 1 1 auto; grid-template-columns: 1fr auto auto; grid-template-rows: auto; } #kese-satirlar { flex-direction: row; } /* Görevler/liderlik dikeyde GİZLENMİYOR — bkz. dosya sonundaki dal. Burada `display: none` vardı ve o panellere telefonda hiç ulaşılamıyordu. */ /* PLAY paneli en altta, TAM GENİŞLİK. Sağ kulenin içinde kalırsa şeridin üçte birine sıkışıyor; telefonda başparmakla basılan tek düğme bu. */ #oyna-panel { justify-self: stretch; width: 100%; grid-template-columns: 1fr; } #oyna { width: 100%; margin-top: 0; min-height: clamp(58px, 8.6vh, 84px); } #harita-basligi { justify-self: center; text-align: center; } #nick-kutu { display: none; } #oyna-alt { display: none; } #gorilpass { width: 100%; align-self: auto; } } /* ── ALÇAK DİKEY (küçük telefon, tarayıcı çubukları açık) ── */ @media (orientation: portrait) and (max-height: 700px) { #menu-logo { display: none; } .kule-yazi { display: none; } /* İKON KALIYOR — sahibin şartı */ .kule-kart { padding: 6px 3px; } #gorilpass .pass-alt { display: none; } } /* ═══ SAĞ KULEDEKİ OYNA PANELİ ═══ Panel yatay düzende üç sütunlu bir şeritti (harita | PLAY | nick). Kulenin içinde o şerit 256 px'e sıkışıyor ve PLAY 52 px kalıyordu (ölçüldü). Kulede dikey yığın: harita başlığı üstte, altında DEV PLAY, en altta nick. */ #sag-kule #oyna-panel { display: flex; flex-direction: column; gap: clamp(4px, 0.7vh, 8px); width: 100%; padding: 0; background: none; border: none; box-shadow: none; } #sag-kule #oyna-panel > * { width: 100%; height: auto; } #sag-kule #harita-basligi { text-align: center; padding: clamp(5px,0.9vh,9px) 8px; } #sag-kule #nick-kutu { justify-content: center; } #sag-kule #oyna { margin-top: 0; min-height: clamp(64px, 10.5vh, 108px); font-size: clamp(24px, 3.4vw, 46px); letter-spacing: 2px; } #sag-kule .play-ikon { width: clamp(20px, 2.4vw, 32px); height: clamp(20px, 2.4vw, 32px); } #sag-kule #oyna-alt { display: none; } /* ═══ PARA ŞERİDİ KOMPAKT ═══ İki para satırı alt alta + dişli = 160 px yükseklik; üst satır 3B sahneden o kadar yer çalıyordu. Yan yana diziliyor. */ #kese { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(4px, 0.6vw, 8px); grid-template-columns: none; grid-template-rows: none; } #kese-satirlar { flex-direction: row; gap: 4px; } /* ═══════════════════════════════════════════════════════════════ KASA AÇMA EKRANI — CS:GO / Standoff kayan şerit Şerit `transform: translateX` ile kayıyor, `left` ile DEĞİL: translate bileşik katmanda kalıyor ve düzeni yeniden hesaplatmıyor. Kart genişliği CSS'te DEĞİL, JS'te ölçülüyor (`offsetWidth`) — clamp'li bir genişliği JS'te yeniden hesaplamaya çalışmak bu projede daha önce yanlış duruş noktası üretmişti. ═══════════════════════════════════════════════════════════════ */ #kasa-ekran { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 3vw, 40px); background: rgba(3, 6, 14, 0.88); backdrop-filter: blur(3px); } #kasa-ekran.gizli { display: none; } #kasa-kutu { width: min(100%, 860px); display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); padding: clamp(12px, 2vw, 26px); border-radius: 8px; border: 2px solid var(--altin); background: linear-gradient(180deg, #373128 0%, #0a1226 100%); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.5); } #kasa-baslik { text-align: center; font-weight: 900; font-size: clamp(13px, 2vw, 22px); letter-spacing: 3px; color: var(--altin); } /* Pist — kartların kaydığı pencere */ #kasa-pist { position: relative; overflow: hidden; height: clamp(96px, 17vh, 150px); border-radius: 6px; border: 2px solid rgba(220, 199, 140, 0.28); background: linear-gradient(180deg, #0c1428 0%, #060b18 100%); /* Kenarlarda solma: şerit pencereye "giriyor" hissi veriyor */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } #kasa-serit { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; will-change: transform; } .kasa-kart { flex: 0 0 auto; width: clamp(72px, 11vw, 104px); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px; border-radius: 5px; background: linear-gradient(180deg, #3d362d 0%, #0d1730 100%); /* Nadirlik rengi ALT ÇİZGİ olarak — CS:GO'daki gibi */ border-bottom: 4px solid var(--nadir, #c5b587); box-shadow: inset 0 0 22px -6px var(--nadir, #c5b587); } .kasa-kart svg, .kasa-kart .ui-ik, .kasa-kart .dj-ik { width: 60%; height: auto; fill: var(--nadir, #c5b587); opacity: 0.9; } /* SİLAH GÖRSELİ — kartın büyük kısmını kaplıyor. Görsel gelene kadar SVG duruyor; geldiği anda `gorselli` sınıfı SVG'yi gizliyor. Böylece kart hiçbir an boş kalmıyor ve şeridin yüksekliği zıplamıyor (şerit `transform` ile kayıyor, yükseklik değişimi görünür bir sıçrama yapardı). */ .kasa-gorsel { width: 100%; height: 62%; object-fit: contain; display: none; /* Nadirlik rengiyle hafif bir hâle — koyu kart üstünde silahın silueti ayrışsın. */ filter: drop-shadow(0 0 6px var(--nadir, #c5b587)); } .kasa-kart.gorselli .kasa-gorsel { display: block; } .kasa-kart.gorselli svg, .kasa-kart.gorselli .ui-ik, .kasa-kart.gorselli .dj-ik { display: none; } .kasa-kart b { font-size: clamp(7px, 0.85vw, 10px); font-weight: 800; letter-spacing: 0.4px; color: #dbe6f7; text-align: center; line-height: 1.05; } /* İğne — duracak nokta */ #kasa-igne { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--altin); box-shadow: 0 0 12px 2px rgba(240, 190, 70, 0.7); pointer-events: none; } #kasa-sonuc { text-align: center; } #kasa-sonuc.gizli { display: none; } #kasa-nadirlik { display: inline-block; padding: 3px 12px; border-radius: 4px; font-size: clamp(9px, 1.1vw, 12px); font-weight: 900; letter-spacing: 2px; background: var(--nadir, #c5b587); color: #0a0f1c; } #kasa-odul-ad { margin-top: 6px; font-size: clamp(16px, 2.6vw, 30px); font-weight: 900; letter-spacing: 1.5px; color: #fff; } #kasa-odul-alt { font-size: clamp(9px, 1.1vw, 12px); font-weight: 700; letter-spacing: 1px; opacity: 0.7; margin-top: 2px; } #kasa-dugmeler { display: flex; gap: 10px; justify-content: center; } #kasa-dugmeler .ust-dugme { min-width: clamp(110px, 16vw, 170px); } #kasa-tekrar.gizli { display: none; } #kasa-tekrar b { padding: 1px 6px; border-radius: 8px; background: var(--altin); color: #201400; font-size: 10px; } /* Açılış tepkisi — kart iğnenin altında dururken bir kez parlıyor */ @keyframes kasa-patla { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.14); filter: brightness(2.1); } 100% { transform: scale(1); filter: brightness(1); } } .kasa-kart.kazanan { animation: kasa-patla 0.5s ease-out; } /* ═══ AÇILIŞ KASASI — DEV "AÇ" DÜĞMESİ ═══ Şeridin üstünde, ortada duruyor; oyuncu buna basana kadar kasa dönmüyor. Pist bu sırada karartılıyor ki tek odak düğme olsun. */ #kasa-bas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.6vh, 6px); padding: clamp(12px, 2vh, 22px) clamp(20px, 4vw, 44px); border-radius: 10px; border: 3px solid #fff3c4; background: linear-gradient(180deg, #ffd75e 0%, #e0a03a 100%); box-shadow: 0 6px 0 #8a6008, 0 12px 30px rgba(0, 0, 0, 0.6); color: #241700; font-family: inherit; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; animation: kasa-bas-nabiz 1.5s ease-in-out infinite; touch-action: manipulation; } #kasa-bas.gizli { display: none; } #kasa-bas svg, #kasa-bas .ui-ik, #kasa-bas .dj-ik { width: clamp(30px, 5vh, 46px); height: clamp(30px, 5vh, 46px); fill: #241700; } .kasa-bas-yazi { font-size: clamp(15px, 2.6vw, 26px); } .kasa-bas-alt { font-size: clamp(8px, 1.1vw, 12px); font-weight: 800; letter-spacing: 1.4px; text-transform: none; opacity: 0.66; } #kasa-bas:active { transform: translate(-50%, -50%) translateY(4px); box-shadow: 0 2px 0 #8a6008; } @keyframes kasa-bas-nabiz { 0%, 100% { box-shadow: 0 6px 0 #8a6008, 0 12px 30px rgba(0,0,0,0.6), 0 0 0 0 rgba(255, 215, 94, 0.55); } 60% { box-shadow: 0 6px 0 #8a6008, 0 12px 30px rgba(0,0,0,0.6), 0 0 0 22px rgba(255, 215, 94, 0); } } /* Düğme beklerken pist sönük — tek odak düğme. */ #kasa-ekran.beklemede #kasa-pist { filter: brightness(0.42) saturate(0.5); } #kasa-ekran.beklemede #kasa-igne { opacity: 0.25; } #kasa-ekran.beklemede #kasa-dugmeler { visibility: hidden; } #kasa-kutu { position: relative; } @media (prefers-reduced-motion: reduce) { #kasa-bas { animation: none; } } /* Altın kartı — deri kartından ayrışsın diye ikon dolu ve sarı. Tur sonu kasasında şeridin çoğunluğu bu. */ .kasa-kart.altin svg, .kasa-kart.altin .ui-ik, .kasa-kart.altin .dj-ik { opacity: 1; } .kasa-kart.altin b { color: #ffe9a3; } /* ═══ 3B FREE KASA ETİKETİ ═══ `#sandik-etiket` kasanın ekran izdüşümüne oturuyor (js/sandik.js). Kasa karakterlerin ortasında olduğu için etiket de kadrajın ortasında; küçük ve okunur tutuluyor ki figürleri kapatmasın. */ .sandik-etiket { position: fixed; z-index: 26; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 2px solid var(--altin); background: linear-gradient(180deg, #41392f 0%, #0e1830 100%); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); color: #f2f6ff; font-family: inherit; font-weight: 900; font-size: clamp(9px, 1.1vw, 13px); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; white-space: nowrap; touch-action: manipulation; } .sandik-etiket.gizli { display: none; } .sandik-etiket:hover { filter: brightness(1.2); } .sandik-video { display: inline-flex; padding: 2px 5px; border-radius: 4px; background: #d33a2c; } .sandik-video svg, .sandik-video .ui-ik, .sandik-video .dj-ik { width: 13px; height: 13px; fill: #fff; } /* Reklam ağı yokken hediye rengi (bkz. main.js `reklamsiz`) */ body.reklamsiz .sandik-video { background: #2f8f5b; } /* Beklerken sönük ve rozetsiz — geri sayım yazıyor */ .sandik-etiket.bekliyor { filter: saturate(0.5) brightness(0.85); } .sandik-etiket.bekliyor .sandik-video { display: none; } /* ═══════════════════════════════════════════════════════════════ BUTON TEMASI — Kuboom referansı (EkranSS) Referanstaki düğme: YATAY ŞERİT, solda büyük ikon, sağında sola yaslı yazı, ince açık mavi çerçeve, koyu lacivert yarı saydam gövde ve sağ ALT köşede küçük bir üçgen aksan. Önceki hâl kalın ALTIN çerçeve + sağ ÜST köşe üçgeniydi; referansta altın yalnız PLAY'de ve pass biletinde var, geri kalan her şey mavi-gri. Altını her düğmeye dağıtmak PLAY'in baskınlığını yiyordu. KONUMLARA DOKUNULMUYOR: bu blok yalnız görünüm (çerçeve, zemin, hizalama, aksan). Izgara ve kule yerleşimi olduğu gibi duruyor. Dosyanın SONUNDA — aynı özgüllükte kaynak sırası belirleyici. ═══════════════════════════════════════════════════════════════ */ .ust-dugme, .kule-kart { border: 1.5px solid rgba(225, 201, 136, 0.55); border-radius: 4px; background: linear-gradient(180deg, rgba(82, 73, 60, 0.92) 0%, rgba(16, 30, 56, 0.94) 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07); color: #eaf3ff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } .ust-dugme:hover, .kule-kart:hover { border-color: rgba(224, 216, 201, 0.9); filter: brightness(1.14); } .ust-dugme:active, .kule-kart:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.45); } /* Köşe aksanı: sağ ÜSTTEN sağ ALTA taşındı ve açık maviye döndü. */ .ust-dugme::after, .kule-kart::after { top: auto; right: 0; bottom: 0; border-width: 0 0 11px 11px; border-color: transparent transparent rgba(225, 201, 136, 0.8) transparent; opacity: 1; } /* ── KULE KARTLARI: ikon SOLDA, yazı sola yaslı ── Referansta SHOP / CASES / MARKET hep bu düzende. Ortalanmış dikey yığın (ikon üstte, yazı altta) referansta hiç yok. */ .kule-kart { flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(7px, 1vw, 13px); padding: clamp(8px, 1.15vh, 14px) clamp(10px, 1.2vw, 16px); text-align: left; } .kule-ikon { width: clamp(24px, 2.7vw, 38px); height: clamp(24px, 2.7vw, 38px); flex: 0 0 auto; color: #e1c988; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); } .kule-yazi { text-align: left; letter-spacing: 1.6px; } .kule-alt { text-align: left; } /* Yazı + alt yazı tek sütun, ikonun sağında */ .kule-kart > .kule-yazi { flex: 1 1 auto; } /* Sayaç rozeti referanstaki kırmızı ünlem yerinde: sağ ÜST köşe */ .kule-rozet { top: -6px; left: auto; right: -6px; background: #e0342c; color: #fff; border: 2px solid #0e1830; } /* ── SHOP kırmızı, KASA/ENVANTER mavi (referanstaki ayrım) ── */ .ust-dugme[data-sekme="shop"] { border-color: rgba(235, 126, 126, 0.6); background: linear-gradient(180deg, rgba(104, 40, 44, 0.92) 0%, rgba(52, 18, 24, 0.94) 100%); } .ust-dugme[data-sekme="shop"]::after { border-color: transparent transparent rgba(235, 126, 126, 0.85) transparent; } .ust-dugme[data-sekme="shop"] .kule-ikon { color: #f08c8c; } /* ── FREE KASA etiketi de aynı dile geliyor ── */ .sandik-etiket { border: 1.5px solid rgba(225, 201, 136, 0.55); border-radius: 4px; background: linear-gradient(180deg, rgba(82, 73, 60, 0.94) 0%, rgba(16, 30, 56, 0.96) 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } /* ── RÜTBE/SEVİYE KARTI ── aynı şerit dili */ #rutbe-kart { border: 1.5px solid rgba(225, 201, 136, 0.55); border-radius: 4px; background: linear-gradient(180deg, rgba(82, 73, 60, 0.92) 0%, rgba(16, 30, 56, 0.94) 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } /* ── PARA ŞERİDİ ── referanstaki koyu haplar */ #kese-satirlar { border: 1.5px solid rgba(225, 201, 136, 0.45); border-radius: 4px; background: linear-gradient(180deg, rgba(42, 35, 26, 0.94) 0%, rgba(20, 17, 12, 0.96) 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } /* ── PLAY: referansta TEK ALTIN öge, olduğu gibi kalıyor ── Yalnız çerçevesi inceliyor ki şeritlerle aynı aileye girsin. */ #oyna { border-width: 2px; border-radius: 4px; } /* ── GORILPASS: referanstaki BOOM PASS bileti gibi altın ── */ #gorilpass { border: 2px solid #ffd75e; border-radius: 4px; background: linear-gradient(180deg, #6b5312 0%, #33260a 100%); } #gorilpass::after { border-color: transparent transparent rgba(255, 215, 94, 0.9) transparent; } #gorilpass svg, #gorilpass .ui-ik, #gorilpass .dj-ik { color: #ffd75e; } /* ── İKİNCİL ŞERİT (Görevler / Leaders) ── Referansta sağdaki NEWS/FRIENDS/CLANS gibi: yazı solda, ikon sağda. */ .mini-kart { flex-direction: row-reverse; } .mini-kart svg, .mini-kart .ui-ik, .mini-kart .dj-ik { color: #e1c988; } @media (orientation: portrait) { /* Dikeyde kule şeride dönüyor; orada ikon ÜSTTE daha okunur (yan yana dört kart, yatay düzen yazıyı kırpıyor). */ .kule-kart { flex-direction: column; justify-content: center; gap: 3px; } .kule-yazi, .kule-alt { text-align: center; } } /* ═══════════════════════════════════════════════════════════════ GÜNLÜK ÖDÜLLER Referans (EkranSS/DAILY GIFTS): gün kartlarından bir ızgara, alınan gün onaylı, bugünkü altın çerçeveli, kalanlar kilitli; altta "ne zaman döneceğin" sayacı. Izgara `auto-fit` ile sarıyor: 14 kart telefonda 3-4 sütuna, masaüstünde 7'ye iniyor. Sabit 7 sütun dikeyde kartları 40 px'e düşürüyordu. ═══════════════════════════════════════════════════════════════ */ #gunluk-ekran { /* 88 — MENÜNÜN ÜSTÜNDE. Burası 58 yazıyordu ve `#menu` 60: perde menünün ALTINDA çiziliyordu, yani "AL" düğmesi hiç tıklanamıyordu. Oyundaki bütün perdeler 62 ve üstü, 58 tek aykırı değerdi. 88 seçildi: `#istatistik` (80), `#bitis` ve `#odalar` (85) üstünde ama yükleme perdesinin (100) altında — "telefonu çevir" uyarısı her şeyi örtmeye devam etmeli. */ position: fixed; inset: 0; z-index: 88; display: flex; align-items: center; justify-content: center; padding: clamp(8px, 2.5vw, 32px); background: rgba(3, 6, 14, 0.9); backdrop-filter: blur(3px); } #gunluk-ekran.gizli { display: none; } #gunluk-kutu { width: min(100%, 880px); max-height: 100%; display: flex; flex-direction: column; gap: clamp(7px, 1.4vh, 16px); padding: clamp(10px, 2vw, 24px); border-radius: 6px; border: 1.5px solid rgba(225, 201, 136, 0.55); background: linear-gradient(180deg, rgba(57, 50, 41, 0.97) 0%, rgba(9, 17, 34, 0.98) 100%); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45); overflow: hidden; } #gunluk-baslik { text-align: center; } #gunluk-baslik b { display: block; font-size: clamp(15px, 2.4vw, 26px); font-weight: 900; letter-spacing: 2.4px; color: #ffd75e; } #gunluk-baslik span { font-size: clamp(9px, 1.15vw, 13px); font-weight: 700; letter-spacing: 0.8px; color: #d3c9b4; } #gunluk-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(74px, 11vw, 106px), 1fr)); gap: clamp(4px, 0.8vw, 9px); overflow-y: auto; min-height: 0; } .gun-kart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: clamp(5px, 0.9vh, 9px) 4px clamp(6px, 1vh, 10px); border-radius: 4px; border: 1.5px solid rgba(225, 201, 136, 0.4); background: linear-gradient(180deg, rgba(132, 109, 44, 0.9) 0%, rgba(50, 44, 36, 0.94) 100%); } .gun-kart .gun-no { align-self: flex-start; font-size: clamp(8px, 1vw, 11px); font-weight: 900; letter-spacing: 0.6px; color: #ebe6dc; } .gun-kart svg, .gun-kart .ui-ik, .gun-kart .dj-ik { width: clamp(26px, 3.4vw, 44px); height: clamp(26px, 3.4vw, 44px); } .gun-kart .gun-miktar { font-size: clamp(9px, 1.15vw, 13px); font-weight: 900; color: #fff; } .gun-kart .gun-ad { font-size: clamp(7.5px, 0.95vw, 11px); font-weight: 800; letter-spacing: 0.5px; color: #d3c9b4; text-transform: uppercase; } /* Altın ödülü sarı, kasa ödülü mavi */ .gun-kart.coin svg, .gun-kart.coin .ui-ik, .gun-kart.coin .dj-ik { fill: #f0c14b; } .gun-kart.kasa svg, .gun-kart.kasa .ui-ik, .gun-kart.kasa .dj-ik { fill: #e1c988; } /* BÜYÜK GÜN (7 ve 14) — referanstaki altın çerçeveli kartlar */ .gun-kart.buyuk { border-color: #ffd75e; } .gun-kart.buyuk .gun-ad { color: #ffd75e; } /* ALINAN gün: sönük + onay işareti */ .gun-kart.alindi { filter: saturate(0.35) brightness(0.62); } .gun-kart.alindi::after { content: '✓'; position: absolute; top: 3px; right: 6px; color: #49d96b; font-size: clamp(12px, 1.6vw, 18px); font-weight: 900; } /* KİLİTLİ gün: kilit */ .gun-kart.kilitli { opacity: 0.55; } .gun-kart.kilitli::after { content: '🔒'; position: absolute; top: 3px; right: 5px; font-size: clamp(9px, 1.2vw, 13px); } /* BUGÜN: vurgulu, hafif nabız */ .gun-kart.bugun { border-color: #ffd75e; border-width: 2px; box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.5); animation: gun-nabiz 1.8s ease-out infinite; } @keyframes gun-nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.5); } 60% { box-shadow: 0 0 0 12px rgba(255, 215, 94, 0); } } #gunluk-sayac { text-align: center; font-size: clamp(9px, 1.1vw, 12.5px); font-weight: 800; letter-spacing: 1.4px; color: #d3c9b4; } /* ALTTA DEV DÜĞME — sahibin isteği */ #gunluk-al { width: 100%; min-height: clamp(48px, 8vh, 78px); font-size: clamp(15px, 2.4vw, 28px); letter-spacing: 2.4px; border: 2px solid #fff3c4; background: linear-gradient(180deg, #ffd75e 0%, #e0a03a 100%); color: #241700; box-shadow: 0 5px 0 #8a6008; text-shadow: none; } #gunluk-al svg, #gunluk-al .ui-ik, #gunluk-al .dj-ik { width: clamp(20px, 2.6vw, 32px); height: clamp(20px, 2.6vw, 32px); fill: #241700; } #gunluk-al::after { border-color: transparent transparent rgba(36, 23, 0, 0.35) transparent; } #gunluk-al:disabled { filter: saturate(0.4) brightness(0.75); cursor: default; } #gunluk-kapat.gizli { display: none; } @media (prefers-reduced-motion: reduce) { .gun-kart.bugun { animation: none; } } /* ═══════════════════════════════════════════════════════════════ ÜST ŞERİT — TEK SATIR, TEK YÜKSEKLİK Şikâyet: "üst kısım çok düzensiz". Sebebi ölçüldü — aynı satırdaki ögelerin yükseklikleri 56 / 54 / 35 / 27 px idi ve seviye kartı şeridin ALTINDA ayrı duruyordu. Göz dört ayrı hizaya bakıyordu. Yeni düzen (sahibin isteği): hepsi TEK satır ve TEK yükseklikte (`--serit-h`). Altında ICE CLAW banner'ı — artık kule kartı değil, geniş bir afiş. ═══════════════════════════════════════════════════════════════ */ #menu-ic { --serit-h: clamp(46px, 6.6vh, 60px); } #ust-serit { align-items: stretch; gap: clamp(5px, 0.8vw, 10px); min-height: var(--serit-h); } /* Şeritteki HER öge aynı yükseklikte. `align-items: stretch` tek başına yetmiyor: `