/* ============ TURKUAZ TASARIM SISTEMI ============ */ :root { --turkuaz: #06b6d4; --turkuaz-bright: #22d3ee; --turkuaz-deep: #0891b2; --navy: #0a1f3a; --navy-2: #0e2a4d; --ink: #e8f4f8; --ink-dim: #9db8c8; --card-bg: rgba(14, 42, 77, 0.55); --card-border: rgba(34, 211, 238, 0.18); --glass-blur: 14px; --success: #34d399; --danger: #f87171; --warning: #fbbf24; --gold: #fbbf24; --shadow: 0 10px 40px rgba(2, 12, 27, 0.45); --radius: 18px; --radius-sm: 12px; /* QZ-F22 G4: env() JS'ten dogrudan okunamaz — olcum probu (?olcum=1) ust guvenli alani bu degiskenden okur. Yerlesimde kullanilmaz. */ --safe-top-probe: env(safe-area-inset-top, 0px); --font: 'Inter', system-ui, -apple-system, sans-serif; --topbar-bg: rgba(10, 31, 58, 0.8); } [data-theme="light"] { --navy: #eef7fa; --navy-2: #dcedf4; --ink: #0b2536; --ink-dim: #4a6b7d; --card-bg: rgba(255, 255, 255, 0.72); --card-border: rgba(6, 182, 212, 0.25); --shadow: 0 10px 32px rgba(9, 60, 84, 0.14); --topbar-bg: rgba(238, 247, 250, 0.8); } * { margin: 0; padding: 0; box-sizing: border-box; } /* QZ-F23e G2: ZOOM TAMAMEN KILITLI (pinch + cift dokunma), KAYDIRMA SERBEST. Onceki kural 'manipulation' idi: yalniz double-tap zoom'u kapatiyor, pinch-zoom'u KORUYORDU. Beyhan bulgusu (ekran kanitli): Android PWA'da pinch ile yakinlasan sayfa kilitli kaliyor ve geri dondurulemiyordu. 'pan-x pan-y' zoom'u kaldirir, kaydirmayi birakir. Etkin touch-action ATA ZINCIRININ KESISIMIDIR — html/body'de kilitlemek tum alt agaci (oyun, dil, admin, ayarlar, modaller) kapsar, istisna kalmaz. Erisilebilirlik telafisi: Ayarlar > 🔤 Yazı boyutu (root font-size). */ html, body { touch-action: pan-x pan-y; } .btn, .opt, .joker-item, .icon-btn, .tab, .q-box, .emoji-grid button, .bg-options button, .player-card, .lite-wheel-container canvas, .scene-container canvas { touch-action: pan-x pan-y; } /* Kaydiricilar parmakla surulebilmeli: pan-* burada gesture'i tarayiciya kaptirirdi. 'none' zoom'u da kapatir — kilit bozulmaz. */ input[type="range"] { touch-action: none; } /* KRITIK: hidden attribute'u her zaman kazanmali — display atayan class'lar (.overlay, .row, .jokers vb.) UA stylesheet'ini ezip flicker'a yol aciyordu */ [hidden] { display: none !important; } /* KOK NEDEN (QZ-F10b sabit header): sticky eleman yalnizca EBEVEYN kutusu icinde yapisir. body height:100% viewport boyuna sabitlenince topbar'in yapisma araligi tek ekranla sinirli kaliyor, uzun sayfalarda (profil) kayboluyordu. body icerikle birlikte buyumeli. */ html { height: 100%; } /* QZ-F23e G2: YAZI BOYUTU — zoom kilidinin erisilebilirlik telafisi. Tum yazi olculeri rem tabanli oldugu icin root font-size'i degistirmek BUTUN ekranlarda tipografiyi birlikte olcekler; zoom'un aksine duzeni bozmaz, yatay kaydirma uretmez. Tercih ile gelir (public/js/text-size.js). Varsayilan 'md' = %100. */ html[data-textsize="sm"] { font-size: 87.5%; } html[data-textsize="md"] { font-size: 100%; } html[data-textsize="lg"] { font-size: 112.5%; } html[data-textsize="xl"] { font-size: 125%; } body { min-height: 100%; font-family: var(--font); color: var(--ink); background: var(--navy); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Buyuk yazi boyutlarinda TASMA KORUMASI (360x640 hedefi): uzun kelimeler sarilir, buton siralari alt satira gecer, sabit genislikli kutu kalmaz. */ body, .card, .btn, .opt, .q-box, .popover, .placements li, .player-card { overflow-wrap: anywhere; word-break: normal; } .row { flex-wrap: wrap; } button, input, select { font-family: inherit; font-size: 1rem; color: inherit; } h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; } /* ============ ARKA PLAN KATMANI ============ */ .bg-layer { position: fixed; inset: 0; z-index: -1; transition: opacity .8s ease; } /* ============ UST BAR ============ */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; /* iOS centikli cihazlar: ust guvenli alan kadar ek bosluk (degilse 0) */ padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; background: var(--topbar-bg); /* altindan gecen icerik okunur kalir */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .brand { font-weight: 900; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; cursor: pointer; } .brand-name { background: linear-gradient(90deg, var(--turkuaz-bright), var(--turkuaz)); -webkit-background-clip: text; background-clip: text; color: transparent; } .topbar-actions { display: flex; gap: 8px; flex-shrink: 0; } /* QZ-F23f G9: HEADER ARTIK 5 IKONA KADAR CIKIYOR (🛠️ 👤 🔄 ✨ ⚙️). 360px'te hesap: kenar boşluğu 2x12=24 → 336px kullanılabilir. 5 ikon x 38px + 4 x 6px boşluk = 214px; markaya 122px kalır ("🎡 Turkuaz" 1.05rem ≈ 100px) → SIĞAR, taşma yok. Marka ayrıca kısalabilir (min-width:0 + ellipsis) ki uzun marka adında da header bozulmasın. */ .brand { min-width: 0; } .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 400px) { .topbar { padding-left: 12px; padding-right: 12px; } .topbar-actions { gap: 6px; } .topbar-actions .icon-btn { width: 38px; height: 38px; font-size: 1rem; } .brand { font-size: 1.05rem; } } .icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card-bg); backdrop-filter: blur(var(--glass-blur)); cursor: pointer; font-size: 1.15rem; transition: transform .15s ease, border-color .15s ease; } .icon-btn:hover { transform: translateY(-2px); border-color: var(--turkuaz); } .icon-btn.small { width: 34px; height: 34px; font-size: .9rem; } .admin-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ============ POPOVER ============ */ .popover { position: fixed; top: 64px; right: 16px; z-index: 60; padding: 14px; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow); } .popover-title { font-weight: 700; margin-bottom: 10px; font-size: .9rem; color: var(--ink-dim); } .bg-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bg-options button { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: transparent; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; } .bg-options button:hover { background: rgba(6, 182, 212, .15); border-color: var(--turkuaz); } .bg-options button.selected { background: rgba(6, 182, 212, .25); border-color: var(--turkuaz); } /* ============ EKRANLAR ============ */ .screen { min-height: calc(100vh - 70px); padding: 16px; } #app { max-width: 1200px; margin: 0 auto; } /* ============ KARTLAR / CAM EFEKTI ============ */ .card { border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .glass { background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* ============ BUTONLAR ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(6, 182, 212, 0.1); color: var(--ink); font-weight: 600; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn.primary { background: linear-gradient(135deg, var(--turkuaz), var(--turkuaz-deep)); border: none; color: #fff; box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35); } .btn.primary:hover { box-shadow: 0 8px 26px rgba(6, 182, 212, 0.5); } .btn.ghost { background: transparent; } .btn.big { width: 100%; font-size: 1.05rem; min-height: 52px; } .btn.small-btn { min-height: 38px; padding: 6px 14px; font-size: .88rem; } .btn.danger { background: rgba(248, 113, 113, .15); border-color: rgba(248, 113, 113, .4); } /* ============ FORM ============ */ label { display: block; font-size: .9rem; font-weight: 600; margin: 12px 0 6px; color: var(--ink-dim); } input[type="text"], input[type="email"], input[type="password"], select { width: 100%; min-height: 44px; padding: 10px 14px; margin-top: 4px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(10, 31, 58, 0.4); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; } [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] select { background: rgba(255, 255, 255, 0.75); } input:focus, select:focus { border-color: var(--turkuaz); box-shadow: 0 0 0 3px rgba(6, 182, 212, .2); } .pw-wrap { position: relative; display: block; } .pw-wrap input { padding-right: 52px; } .pw-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; font-size: 1.05rem; opacity: .7; } .pw-toggle:hover { opacity: 1; } .check { display: flex; align-items: center; gap: 8px; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--turkuaz); } .row { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .row.center { justify-content: center; } .row > input, .row > select { flex: 1; margin-top: 0; } .muted { color: var(--ink-dim); font-size: .9rem; } .error-msg { color: var(--danger); font-weight: 600; margin-top: 10px; } .ok-msg { color: #22c55e; font-weight: 600; margin-top: 10px; } /* QZ-F19: yedek durumu */ /* ============ KARSILAMA / ONBOARDING (QZ-F19) ============ */ .onb-card { max-width: 420px; } .onb-slide { text-align: center; } .onb-slide h3 { margin: 8px 0 6px; } .onb-slide p { color: var(--ink-dim); line-height: 1.5; } .onb-emoji { font-size: 3rem; line-height: 1; } .onb-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; } .onb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, .45); transition: background .2s, transform .2s; } .onb-dot.on { background: var(--turkuaz, #06b6d4); transform: scale(1.25); } /* Sakinlik kurali: tek seferlik yumusak bir belirme — yanip sonme/titreme YOK */ #onb-reward .modal { animation: onbIn .35s ease; } @keyframes onbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #onb-reward .modal { animation: none; } } .pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(6, 182, 212, .18); border: 1px solid var(--card-border); font-size: .82rem; font-weight: 700; } .pill-green { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .4); color: var(--success); } .pill-gray { background: rgba(157, 184, 200, .14); border-color: rgba(157, 184, 200, .3); color: var(--ink-dim); } .pill-gold { background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .45); color: var(--gold); } /* QZ-F23e G1: bot maci rozeti — uyari degil, bilgi. Sakin turuncu. */ .pill.botmatch { background: rgba(251, 146, 60, .16); border-color: rgba(251, 146, 60, .45); color: #fb923c; font-size: .74rem; padding: 3px 10px; } .result-note.botmatch { background: rgba(251, 146, 60, .12); border-color: rgba(251, 146, 60, .35); color: #fb923c; } /* ============ CUSTOM SELECT (tum cihazlarda ayni) ============ */ .cselect { position: relative; flex: 1; min-width: 0; } .cselect-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; min-height: 0; } .cselect-btn { width: 100%; min-height: 44px; padding: 10px 38px 10px 14px; margin-top: 4px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(10, 31, 58, 0.4); color: var(--ink); text-align: left; cursor: pointer; font-size: 1rem; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s, box-shadow .15s; touch-action: manipulation; } [data-theme="light"] .cselect-btn { background: rgba(255, 255, 255, 0.75); } .cselect-btn:focus { outline: none; border-color: var(--turkuaz); box-shadow: 0 0 0 3px rgba(6, 182, 212, .2); } .cselect-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-60%); color: var(--ink-dim); font-size: 1.1rem; pointer-events: none; } .cselect-list { /* PORTAL (QZ-F10b): body seviyesinde fixed — kart overflow/z-index'i kirpamaz. left/width/top-bottom degerleri JS'te butonun rect'inden yazilir. */ position: fixed; z-index: 200; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--navy-2); box-shadow: var(--shadow); } .cselect-opt { min-height: 44px; padding: 10px 14px; display: flex; align-items: center; cursor: pointer; font-size: .95rem; touch-action: manipulation; } .cselect-opt:hover, .cselect-opt.active { background: rgba(6, 182, 212, .18); } .cselect-opt.selected { background: rgba(6, 182, 212, .28); font-weight: 700; } .cselect-opt.disabled { color: var(--ink-dim); cursor: default; } /* ============ GIRIS EKRANI ============ */ .auth-wrap { max-width: 460px; margin: 0 auto; padding-top: 4vh; } .hero { text-align: center; margin-bottom: 22px; } .hero h1 { font-size: 2.6rem; } .tagline { color: var(--ink-dim); margin-top: 6px; } .tabs { display: flex; gap: 6px; margin-bottom: 14px; } .tabs.small { margin-top: 4px; } .tab { flex: 1; min-height: 42px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--ink-dim); font-weight: 700; cursor: pointer; transition: all .15s; } .tab.active { background: rgba(6, 182, 212, .16); color: var(--ink); border-color: var(--card-border); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 6px 0; } .emoji-grid button { aspect-ratio: 1; min-width: 0; font-size: 1.3rem; border-radius: 10px; border: 1px solid transparent; background: rgba(6, 182, 212, .07); cursor: pointer; transition: transform .12s, border-color .12s, background .12s; } .emoji-grid button:hover { transform: scale(1.12); } .emoji-grid button.selected { border-color: var(--turkuaz); background: rgba(6, 182, 212, .28); } /* ============ DUYURU BANDI ============ */ .announce-band { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 12px; border-radius: var(--radius-sm); background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .4); font-size: .9rem; font-weight: 600; } .announce-band .ann-close { margin-left: auto; width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-dim); cursor: pointer; font-size: .95rem; } .announce-band .ann-close:hover { color: var(--ink); } /* ============ LOBI ============ */ .lobby-wrap { padding-top: 8px; } .lobby-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .lobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; } .rooms-card h3 { margin-bottom: 10px; } .room-list { display: flex; flex-direction: column; gap: 8px; } /* ============ QZ-F23d ============ */ /* G10: tam ekran panellerde STICKY kapatma basligi (PWA'da geri tusu yok) */ .popover-head, .panel-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -4px 8px; padding: 8px 4px; background: var(--navy-2, rgba(8, 24, 46, .96)); border-bottom: 1px solid var(--card-border); } .popover-head-title, .panel-head-title { font-weight: 800; font-size: .95rem; } .popover-head .icon-btn, .panel-head .icon-btn { width: 44px; height: 44px; min-height: 44px; } /* G3: soru sonu puan dokumu — kompakt, tasmaz, tek/iki satir */ .q-tally { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 4px; font-size: .78rem; } .q-tally .qt-item { padding: 3px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--card-border); background: rgba(148, 163, 184, .12); } .q-tally .qt-item.ok { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .4); } .q-tally .qt-item.no { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35); } .q-tally .qt-item.skip { background: rgba(148, 163, 184, .16); color: var(--ink-dim); } /* G5: inceleme filtresi sekmeleri */ .review-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; } .review-tabs .rv-tab.selected { background: rgba(6, 182, 212, .22); border-color: var(--turkuaz); color: var(--ink); } /* G6: yenilikler listesi */ .whatsnew-list { text-align: left; margin: 10px 0 14px; padding-left: 20px; line-height: 1.5; } .whatsnew-list li { margin-bottom: 6px; } /* QZ-F23f G9: modal EKRANA UYAR — icerik uzunsa modal ICI dikey kaydirma (sayfa degil). Yapiskan baslik .panel-head'den gelir, ✕ hep gorunur. */ #whatsnew-overlay .modal { max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .whatsnew-prev-list { text-align: left; margin-top: 8px; font-size: .86rem; } .whatsnew-prev-list .wn-rel { margin-bottom: 10px; } .whatsnew-prev-list .wn-rel b { display: block; } .whatsnew-prev-list ul { padding-left: 18px; margin-top: 4px; } /* G9: pull-to-refresh gostergesi — sakin, animasyonsuz */ .ptr-indicator { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%; transform: translateX(-50%); z-index: 140; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .82rem; background: var(--navy-2, rgba(8, 24, 46, .96)); border: 1px solid var(--card-border); box-shadow: var(--shadow); transition: opacity .15s; } .ptr-indicator.armed { border-color: var(--turkuaz); } .ptr-indicator.busy .ptr-icon { opacity: .6; } /* G11: "Oyunu Başlat" birincil ve gorunur — carkin hemen altinda */ .room-controls { gap: 10px; } .start-btn { width: 100%; max-width: 360px; font-size: 1.05rem; } .start-btn:disabled { opacity: .45; cursor: not-allowed; } /* QZ-F23b G3: test hesabi bandi — hangi hesapta oldugun DAIMA gorunur */ .imp-band { position: sticky; top: 0; z-index: 130; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); background: rgba(251, 191, 36, .92); color: #2a1a04; font-weight: 700; font-size: .85rem; } .imp-band[hidden] { display: none; } .imp-band .btn { min-height: 30px; padding: 3px 12px; font-size: .8rem; background: rgba(42, 26, 4, .12); color: #2a1a04; border-color: rgba(42, 26, 4, .3); } /* QZ-F23b G4: gunluk odul serisi — 7 kutucuk (dolu/bos) */ .daily-strip { display: flex; gap: 6px; justify-content: center; margin: 14px 0; flex-wrap: wrap; } .daily-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 42px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(148, 163, 184, .1); color: var(--ink-dim); font-size: .72rem; } .daily-cell.on { background: rgba(251, 191, 36, .18); border-color: rgba(251, 191, 36, .5); color: var(--ink); } .daily-cell.now { box-shadow: 0 0 0 2px rgba(251, 191, 36, .55); } .daily-cell .dc-day { font-weight: 700; } .daily-cell .dc-amt { font-variant-numeric: tabular-nums; } /* QZ-F23b G11: lider tablosu */ .lb-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .lb-tabs .lb-tab.selected { background: rgba(6, 182, 212, .22); border-color: var(--turkuaz); color: var(--ink); } .lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .lb-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(148, 163, 184, .08); font-size: .88rem; } .lb-row.me { background: rgba(6, 182, 212, .18); border: 1px solid rgba(6, 182, 212, .4); } .lb-row .lb-rank { min-width: 28px; font-weight: 700; } .lb-row .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row .lb-score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold); } .lb-me { margin-top: 8px; padding: 6px 8px; border-radius: 8px; font-size: .85rem; background: rgba(6, 182, 212, .14); border: 1px dashed rgba(6, 182, 212, .45); } /* QZ-F23b: soru sayisi kaydirmali cubugu (1-20). Dokunma hedefi mobilde rahat surüklenebilsin diye buyuk tutuldu (thumb 26px). */ .slider-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; } .slider-row .slider-label { color: var(--ink-dim); font-size: .85rem; white-space: nowrap; } .slider-row input[type="range"] { flex: 1 1 140px; min-width: 120px; height: 26px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } .slider-row input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, rgba(148, 163, 184, .35) 0%); background: rgba(148, 163, 184, .3); } .slider-row input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(148, 163, 184, .3); } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -9px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .slider-row input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 2px solid rgba(255, 255, 255, .85); } .slider-row input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .slider-out { min-width: 86px; text-align: center; font-variant-numeric: tabular-nums; } /* QZ-F23b: zorluk gevsemesi bildirimi — soru kartinda sakin bir satir */ .relax-note { margin: 2px 0 8px; padding: 6px 10px; border-radius: 10px; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .35); color: var(--ink); font-size: .82rem; line-height: 1.35; } /* QZ-F23: lobide "devam eden antrenman" hatirlatmasi (oturum sunucuda durur) */ .resume-note { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid rgba(45, 212, 191, .45); border-radius: 12px; background: rgba(45, 212, 191, .12); font-size: .9rem; } .resume-note .row { gap: 8px; } .room-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(6, 182, 212, .08); border: 1px solid var(--card-border); } .room-item .names { color: var(--ink-dim); font-size: .85rem; } /* ============ OYUN MASASI ============ */ .game-wrap { display: flex; flex-direction: column; gap: 12px; } .game-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .room-code { font-weight: 900; font-size: 1.2rem; letter-spacing: .2em; padding: 6px 14px; border-radius: 10px; cursor: pointer; background: rgba(6, 182, 212, .15); border: 1px dashed var(--turkuaz); } .game-status { flex: 1; text-align: center; color: var(--ink-dim); font-weight: 600; min-width: 160px; } .table-area { position: relative; height: min(62vh, 620px); min-height: 380px; border-radius: var(--radius); /* KOK NEDEN (QZ-F13 G5): buradaki overflow:hidden TUM katmani kirpiyordu — alt koltuk karti ('ben altta') sinira en yakin ve en uzun kart oldugundan akan isik halkasi (inset -5px + scale 1.07) kenarda kesiliyordu. Kirpma artik yalniz cark katmanlarinda; oyuncu kartlari hicbir koltukta kirplmaz. */ } .scene-container, .scene-container canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .scene-container { overflow: hidden; border-radius: var(--radius); } .lite-wheel-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius); } /* QZ-F22 G6: cark katmanlari HICBIR kosulda sifir yukseklikte kalamaz — 0 boyutlu konteynerde WebGL bagi kurulsa bile ekranda hicbir sey gorunmez. */ .scene-container, .lite-wheel-container { min-height: 260px; } .lite-wheel-container canvas { width: min(64vw, 46vh, 380px); height: min(64vw, 46vh, 380px); filter: drop-shadow(0 12px 30px rgba(2, 12, 27, .5)); } .lite-pointer { position: absolute; top: calc(50% - min(32vw, 23vh, 190px) - 30px); left: 50%; transform: translateX(-50%); font-size: 1.8rem; color: var(--gold); z-index: 5; text-shadow: 0 2px 10px rgba(0,0,0,.4); } .wheel-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 10px 22px; border-radius: 999px; font-weight: 800; font-size: 1.05rem; background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(var(--glass-blur)); z-index: 6; white-space: nowrap; animation: bannerIn .3s ease; } @keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Oyuncu kartlari — masa etrafinda */ .players-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .player-card { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: 8px 12px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(8px); transition: box-shadow .3s, border-color .3s, opacity .3s; } .player-card .pc-avatar { font-size: 1.7rem; line-height: 1; } .player-card .pc-name { font-weight: 700; font-size: .82rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-card .pc-score { font-weight: 800; font-size: .9rem; color: var(--turkuaz-bright); } .player-card .pc-tag { font-size: .66rem; color: var(--ink-dim); } .player-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(251, 191, 36, .35), 0 0 30px 6px rgba(251, 191, 36, .45); animation: glowPulse 1.1s ease-in-out infinite; /* QZ-F11: guclu sira vurgusu — hafif buyume + 🎯 rozeti */ transform: translate(-50%, -50%) scale(1.07); z-index: 6; } .player-card.selected::before { content: '🎯'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: .95rem; filter: drop-shadow(0 2px 6px rgba(251, 191, 36, .6)); } /* Sira kimdeyse digerleri hafif soluk (elenmisler zaten soluk) */ .players-layer.has-turn .player-card:not(.selected):not(.eliminated) { opacity: .68; } /* Kategori carki donerken secili oyuncuda akan isik halkasi */ .players-layer.spinning .player-card.selected::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; padding: 3px; pointer-events: none; background: conic-gradient(from 0deg, transparent 0deg 290deg, var(--turkuaz-bright) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: ringSpin 1s linear infinite; } @keyframes ringSpin { to { transform: rotate(1turn); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(251,191,36,.35), 0 0 26px 4px rgba(251,191,36,.4); } 50% { box-shadow: 0 0 0 5px rgba(251,191,36,.5), 0 0 44px 12px rgba(251,191,36,.6); } } .player-card.eliminated { opacity: .38; filter: grayscale(.9); } /* 6+ oyuncuda kompakt kartlar (ust uste binme olmasin) */ .player-card.compact { min-width: 64px; padding: 5px 8px; border-radius: 10px; } .player-card.compact .pc-avatar { font-size: 1.15rem; } .player-card.compact .pc-name { font-size: .68rem; max-width: 82px; } .player-card.compact .pc-score { font-size: .78rem; } .player-card.compact .pc-tag { font-size: .58rem; } /* QZ-F11: lite yatay serit KALDIRILDI — dairesel yerlesim her modda (JS artik .strip sinifini eklemiyor; kartlar cark cevresinde esit acili) */ /* QZ-F23: kopan oyuncu PASIF — kart soluklasir, "🔌 bağlantı bekleniyor" rozeti pc-tag'de durur. Bot devralmadigi icin koltuk sahibinindir. */ .player-card.disconnected { border-style: dashed; opacity: .55; filter: grayscale(.5); } /* QZ-F23: super yonetici "🚫 Odadan at" — pc-remove'un solunda durur */ .player-card .pc-kick { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .25); color: var(--danger); font-size: .7rem; cursor: pointer; pointer-events: auto; /* players-layer pointer-events:none'i asar */ transition: transform .12s, background .12s; } .player-card .pc-kick:hover { transform: scale(1.15); background: rgba(248, 113, 113, .45); } .player-card .pc-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .25); color: var(--danger); font-size: .72rem; font-weight: 900; cursor: pointer; pointer-events: auto; /* players-layer pointer-events:none'i asar */ transition: transform .12s, background .12s; } .player-card .pc-remove:hover { transform: scale(1.15); background: rgba(248, 113, 113, .45); } .player-card .pc-float { position: absolute; top: -14px; font-weight: 900; font-size: 1.05rem; color: var(--success); animation: floatUp 1.6s ease forwards; pointer-events: none; } .player-card .pc-float.neg { color: var(--danger); } @keyframes floatUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-42px); } } /* Oda kontrolleri */ .room-controls { display: flex; flex-direction: column; gap: 12px; align-items: center; } .bot-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; } /* ============ OVERLAY / MODAL ============ */ .overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(4, 14, 28, .55); backdrop-filter: blur(4px); padding: 14px; } .modal { max-width: 480px; width: 100%; text-align: center; animation: modalIn .25s ease; } @keyframes modalIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } .diff-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } .diff-btn { flex-direction: column; padding: 16px 8px; font-size: 1rem; } .diff-btn small { color: var(--ink-dim); font-weight: 500; font-size: .72rem; margin-top: 4px; } /* ============ SORU KARTI ============ */ .question-card { max-width: 620px; width: 100%; animation: modalIn .25s ease; /* QZ-F18: kart yuksekligi sohbet seridini HESABA KATAR — serit kadar kisalir */ max-height: calc(100vh - 28px - var(--chat-strip-h, 0px)); max-height: calc(100dvh - 28px - var(--chat-strip-h, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; /* kart ici momentum scroll */ } /* Antrenmanda kart yuksekligi: overlay kolonu kaydirir, kart dogal akista */ body.practice-mode .question-card { max-height: none; flex-shrink: 0; } .q-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .q-asker { margin-bottom: 4px; } .countdown { margin-left: auto; position: relative; width: 52px; height: 52px; } .countdown svg { width: 52px; height: 52px; transform: rotate(-90deg); } .cd-bg { fill: none; stroke: rgba(157, 184, 200, .25); stroke-width: 4; } .cd-ring { fill: none; stroke: var(--turkuaz-bright); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 125.6; stroke-dashoffset: 0; } .cd-ring.warn { stroke: var(--danger); } #cd-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; } .q-text { font-size: 1.3rem; margin: 10px 0 16px; line-height: 1.45; } .q-mask { font-family: monospace; font-size: 1.6rem; letter-spacing: .35em; margin-bottom: 12px; color: var(--turkuaz-bright); font-weight: 700; } /* Maskeli harf girisi: harf kutuculari (acilanlar sabit, boslar doldurulur) */ .q-boxes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; } .q-box { width: 36px; height: 44px; min-height: 44px; padding: 0; text-align: center; font-weight: 800; font-size: 1.05rem; border-radius: 8px; border: 1px solid var(--card-border); background: rgba(10, 31, 58, .4); color: var(--ink); } .q-box.fixed { background: rgba(6, 182, 212, .3); border-color: var(--turkuaz); color: var(--turkuaz-bright); } .q-box.gap { border: none; background: transparent; width: 14px; min-height: 0; } [data-theme="light"] .q-box { background: rgba(255, 255, 255, .75); } .q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .q-options .opt { min-height: 54px; padding: 12px; font-size: 1rem; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(6, 182, 212, .09); cursor: pointer; font-weight: 600; transition: all .15s; } .q-options .opt:hover:not(:disabled) { border-color: var(--turkuaz); background: rgba(6, 182, 212, .2); } .q-options .opt.removed { opacity: .25; text-decoration: line-through; pointer-events: none; } .q-options .opt.correct { background: rgba(52, 211, 153, .3); border-color: var(--success); } .q-options .opt.wrong { background: rgba(248, 113, 113, .3); border-color: var(--danger); } .jokers { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } /* QZ-F22: soru kartinda TEK tetikleyici — yatay joker seridi kaldirildi (dar ekranda etiketleri kirpiyordu). Liste alt sheet'te aciliyor. */ .joker-trigger { width: 100%; min-height: 46px; font-size: .95rem; font-weight: 800; } .joker-trigger.empty { opacity: .55; } /* QZ-F23e G3: JOKER PANELI TAM EKRAN (onceki hali ekranin altina yapisik, %70 yukseklikli alt sheet idi). Beyhan istegi: panel sayfayi kaplasin, en ustte belirgin ✕ olsun. Liste duzeni ve tum jokerlerin gorunurlugu (F22) AYNEN korunur — degisen yalnizca katmanin kapladigi alan. */ .sheet-backdrop { position: fixed; inset: 0; z-index: 130; background: rgba(2, 6, 23, .82); backdrop-filter: blur(3px); display: flex; align-items: stretch; justify-content: center; } .sheet-backdrop[hidden] { display: none; } .sheet { width: 100%; max-width: 640px; height: 100%; max-height: none; display: flex; flex-direction: column; border-radius: 0; border-left: 1px solid var(--card-border); border-right: 1px solid var(--card-border); padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); animation: sheetUp .18s ease; } @keyframes sheetUp { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } } /* Baslik YAPISKAN: liste kaydirilsa da ✕ ekrandan cikmaz. Kendi opak zemini var — altindan kayan satirlar gorunmesin. */ .sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px; margin-bottom: 10px; background: var(--card-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--card-border); } .sheet-head h3 { margin: 0; font-size: 1.05rem; flex: 1; } /* ✕ dokunma hedefi >= 44px (WCAG 2.5.5 / iOS HIG) */ .icon-btn.sheet-close { width: 46px; height: 46px; min-width: 46px; font-size: 1.25rem; font-weight: 800; } /* Panel acikken sure DURMAZ (mevcut davranis korunur) — kalan sure burada */ .sheet-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .92rem; padding: 4px 10px; border-radius: 999px; background: rgba(6, 182, 212, .18); border: 1px solid var(--card-border); } .sheet-timer.warn { background: rgba(248, 113, 113, .18); border-color: rgba(248, 113, 113, .5); color: var(--danger); } .sheet-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; } .sheet-empty { opacity: .75; text-align: center; padding: 18px 6px; } .joker-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(6, 182, 212, .09); color: inherit; font: inherit; transition: background .15s, border-color .15s; } .joker-item:hover:not(:disabled) { border-color: var(--turkuaz); background: rgba(6, 182, 212, .2); } .joker-item.dim { opacity: .42; cursor: not-allowed; pointer-events: none; } .ji-emoji { font-size: 1.5rem; flex: 0 0 auto; } .ji-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .ji-name { font-weight: 800; } .ji-desc { font-size: .8rem; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .joker-item .badge { flex: 0 0 auto; min-width: 26px; height: 24px; border-radius: 999px; background: var(--gold); color: #1a1200; font-size: .78rem; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 7px; } /* QZ-F22 G8: sonuc ekrani kategori dokumu — 2 sutun (genis ekranda 3), uzun listede KART ICI kaydirma; sonuc karti hicbir zaman tasmaz. */ .catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0; max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; } .catgrid[hidden] { display: none; } .catgrid-head { grid-column: 1 / -1; font-size: .82rem; opacity: .7; } .catcell { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 9px; border-radius: var(--radius-sm); background: rgba(6, 182, 212, .08); border: 1px solid var(--card-border); font-size: .84rem; min-width: 0; } .catcell .cc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catcell .cc-score { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; } .catcell .cc-score.ok { color: var(--success); } @media (min-width: 640px) { .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .hint-msg { margin-top: 10px; font-weight: 600; color: var(--warning); } .q-feedback { margin-top: 14px; padding: 12px; border-radius: var(--radius-sm); font-weight: 800; font-size: 1.1rem; text-align: center; animation: modalIn .2s ease; } .q-feedback.ok { background: rgba(52, 211, 153, .2); color: var(--success); } .q-feedback.no { background: rgba(248, 113, 113, .2); color: var(--danger); } .q-explain { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(6, 182, 212, .1); border-left: 3px solid var(--turkuaz); font-size: .92rem; color: var(--ink-dim); text-align: left; } /* ============ SONUC EKRANI ============ */ .result-wrap { max-width: 540px; margin: 0 auto; padding-top: 6vh; display: flex; flex-direction: column; gap: 14px; } .result-card { text-align: center; } .consolation { font-size: 1.15rem; margin: 14px 0 20px; color: var(--ink-dim); } /* QZ-F22: sonuc ekrani bilgi notu (havuz tukendi vb.) — sakin, dikkat cekici degil */ .result-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .86rem; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35); color: var(--gold, #fbbf24); } .placements { list-style: none; margin: 18px 0; display: flex; flex-direction: column; gap: 8px; } .placements li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(6, 182, 212, .08); border: 1px solid var(--card-border); font-weight: 600; text-align: left; } .placements li.first { background: linear-gradient(90deg, rgba(251, 191, 36, .22), rgba(6, 182, 212, .1)); border-color: var(--gold); } .placements .pl-rank { font-size: 1.3rem; width: 40px; text-align: center; } .placements .pl-score { margin-left: auto; font-weight: 800; color: var(--turkuaz-bright); } /* ============ PROFIL ============ */ .profile-wrap { max-width: 560px; margin: 0 auto; padding-top: 3vh; } .profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .profile-avatar { font-size: 3rem; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .stat { text-align: center; padding: 14px; border-radius: var(--radius-sm); background: rgba(6, 182, 212, .1); border: 1px solid var(--card-border); } .stat b { display: block; font-size: 1.5rem; color: var(--turkuaz-bright); } .stat span { font-size: .8rem; color: var(--ink-dim); } .history { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; } .history .h-item { display: flex; justify-content: space-between; padding: 9px 14px; border-radius: 10px; background: rgba(6, 182, 212, .06); border: 1px solid var(--card-border); font-size: .9rem; } /* ============ JOKER MAGAZASI ============ */ .joker-modal { max-width: 580px; max-height: 88vh; overflow-y: auto; text-align: left; } /* Aksiyon bari: panel AKISINDA sticky blok — icerik altta serbest kayar, bar ortmez */ .joker-actionbar { position: sticky; top: -22px; z-index: 6; /* modal padding'ini telafi eder */ display: flex; gap: 10px; align-items: center; margin: 10px -22px 12px; padding: 10px 22px; background: var(--navy); border-bottom: 1px solid var(--card-border); } .joker-actionbar .btn { min-height: 44px; flex: 1; } #slots-dirty { color: var(--gold); font-size: 1.3rem; line-height: 0; } .joker-store { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; } .joker-card { padding: 10px; border-radius: var(--radius-sm); background: rgba(6, 182, 212, .07); border: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 6px; } .joker-card b { font-size: .92rem; } .joker-card .jk-desc { font-size: .76rem; color: var(--ink-dim); flex: 1; } .joker-card.owned { border-color: rgba(52, 211, 153, .45); } .joker-slots { display: flex; gap: 10px; justify-content: center; margin-top: 8px; } .joker-slot { width: 72px; height: 72px; border-radius: var(--radius-sm); border: 2px dashed var(--card-border); background: rgba(6, 182, 212, .08); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 1.5rem; transition: border-color .15s, transform .15s; } .joker-slot:hover { border-color: var(--turkuaz); transform: translateY(-2px); } .joker-slot small { font-size: .58rem; color: var(--ink-dim); } /* ============ ANTRENMAN BAR ============ */ /* KOKTEN COZUM (QZ-F9): bar overlay/fixed DEGIL — soru overlay'inin icinde, kartin USTUNDE normal document-flow blogu (kolon flex + gap). Flexbox geregi bar ile kartin dikdortgenleri KESISEMEZ; sticky yalniz kaydirmada ustte tutar. */ .practice-bar { position: sticky; top: 0; z-index: 5; /* yalniz overlay ICI kaydirmada */ width: 100%; max-width: 620px; display: flex; align-items: center; gap: 10px; justify-content: center; padding: 10px 16px; flex-wrap: wrap; } .practice-bar .btn { min-height: 44px; } /* mobil dokunma hedefi */ body.practice-mode #question-overlay { flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px; padding-top: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ============ BAGLANTI GOSTERGESI ============ */ .room-info { display: flex; align-items: center; gap: 8px; } .conn-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; transition: background .3s; } .conn-dot.ok { background: var(--success); box-shadow: 0 0 8px rgba(52, 211, 153, .7); } .conn-dot.warn { background: var(--warning); box-shadow: 0 0 8px rgba(251, 191, 36, .7); } .conn-dot.bad { background: var(--danger); box-shadow: 0 0 8px rgba(248, 113, 113, .7); } .reconnect-band { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: var(--warning); color: #241a00; text-align: center; font-weight: 700; font-size: .88rem; padding: 5px; } /* ============ QZ-F20: PWA / CEVRIMDISI GOSTERGELERI ============ */ /* QZ-F23b: SURUM BANDI KALDIRILDI (F22'de sticky yapilmisti ama PWA standalone modda hala telefonun durum cubugu/centigi ile cakisiyor ve dokunulamiyordu). Yerine header'da — zaten safe-area uyumlu olan satirda — ayarlarin SOLUNDA duran bir ikon var. YALNIZ bekleyen surum varken gorunur; yanip sonmez, yalnizca sakin bir nokta rozeti tasir. */ .update-btn { position: relative; border-color: rgba(6, 182, 212, .55); background: rgba(6, 182, 212, .16); } .update-btn::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--turkuaz, #06b6d4); box-shadow: 0 0 0 2px var(--topbar-bg, rgba(4, 18, 36, .9)); } .update-btn[hidden] { display: none; } .offline-badge { background: rgba(239, 68, 68, .18); color: #fca5a5; font-size: .72rem; } .sync-badge { background: rgba(245, 158, 11, .18); color: #fcd34d; font-size: .72rem; } #offline-notice .modal { text-align: center; } /* ============ COIN UCUS ANIMASYONU ============ */ .coin-fly { position: fixed; left: 50%; top: 40%; z-index: 130; font-size: 1.6rem; font-weight: 900; color: var(--gold); text-shadow: 0 2px 12px rgba(251, 191, 36, .5); pointer-events: none; animation: coinFly 1.8s cubic-bezier(.3, .7, .4, 1) forwards; /* transform+opacity: GPU dostu */ } @keyframes coinFly { 0% { transform: translate(-50%, 0) scale(.7); opacity: 0; } 18% { transform: translate(-50%, -18px) scale(1.15); opacity: 1; } 100% { transform: translate(30vw, -34vh) scale(.65); opacity: 0; } } /* ============ TOAST ============ */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 12px 22px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow); font-weight: 600; animation: bannerIn .25s ease; max-width: 92vw; text-align: center; } /* ============ MOBIL / LITE ============ */ @media (max-width: 767px) { .screen { padding: 10px; } /* QZ-F22: eski 2 sutunlu joker grid'i KALDIRILDI — tetikleyici tek satir, liste panelde. (Grid, yatay seridi kartin yarisina sikistirip etiketleri kirpan kok nedendi.) Panel satirlari zaten 56px yuksekliginde. QZ-F23e G3: buradaki 'max-height: 78vh' KALDIRILDI — panel artik tam ekran; dar ekranda tavan koymak tam ekran kuralini bozuyordu. */ /* 8 kisilik siralama tek ekrana sigsin */ .placements { gap: 5px; } .placements li { padding: 6px 10px; font-size: .84rem; gap: 8px; } .placements .pl-rank { width: 26px; font-size: .95rem; } .result-wrap { padding-top: 2vh; } .hero h1 { font-size: 2rem; } .q-options { grid-template-columns: 1fr; } .diff-btns { grid-template-columns: 1fr; } .table-area { height: 58vh; min-height: 430px; } .player-card { min-width: 74px; padding: 6px 8px; } .player-card .pc-avatar { font-size: 1.35rem; } .emoji-grid { grid-template-columns: repeat(6, 1fr); } .game-status { order: 3; width: 100%; } } /* ============ SORULARIMI INCELE (QZ-F13) ============ */ .review-card { width: min(560px, 94vw); max-height: 82vh; display: flex; flex-direction: column; gap: 10px; } .review-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .review-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; } .review-q { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; } .rv-right { color: #4ade80; font-weight: 600; } .rv-wrong { color: #f87171; font-weight: 700; } .rv-none { color: var(--muted, #94a3b8); font-style: italic; } .review-explain { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #22d3ee; background: rgba(34, 211, 238, .08); border-radius: 8px; font-size: .92rem; } .review-nav .btn { min-height: 44px; } .review-nav .btn:disabled { opacity: .35; cursor: default; } /* ============ YANLISLARIM LISTESI (QZ-F13) ============ */ .mistakes-card { width: min(600px, 94vw); max-height: 84vh; display: flex; flex-direction: column; gap: 10px; } .ml-list { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; } .ml-item { padding: 10px 12px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; } .ml-q { font-weight: 700; } .ml-explain { font-size: .88rem; opacity: .85; } .ml-meta { font-size: .8rem; } /* ============ SOHBET SATIRLARI (QZ-F13, QZ-F20'de tek yuzeye tasindi) ============ QZ-F20: ayri "tam panel" KALDIRILDI — tek yuzey kalici serit. Satir bicimleri (mute butonu dahil) serit listesinde kullanilmaya devam ediyor. */ .chat-msg { font-size: .88rem; line-height: 1.35; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .chat-msg .cm-who { font-weight: 700; white-space: nowrap; } .chat-msg .cm-text { word-break: break-word; } .chat-msg .cm-mute { border: none; background: none; cursor: pointer; font-size: .8rem; opacity: .6; } .chat-msg .cm-mute:hover { opacity: 1; } .chat-badge { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800; text-align: center; } /* ============ KALICI SOHBET SERIDI (QZ-F18) ============ Serit ekranin altinda sabit durur AMA hicbir seyi ortmez: yuksekligi --chat-strip-h degiskenine yazilir; #screen-game alt bosluğu ve #question-overlay'in alt kenari o kadar kisalir (asagidaki kurallar). Boylece soru karti serit alanina hic girmez — kart yuksekligi buna gore hesaplanir. Klavye acilinca --chat-kb ile klavyenin ustune tasinir. */ .chat-strip { position: fixed; left: 0; right: 0; bottom: var(--chat-kb, 0px); z-index: 90; /* .overlay z-index 80 */ display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 8px); background: rgba(6, 16, 30, .92); border-top: 1px solid rgba(148, 163, 184, .25); backdrop-filter: blur(8px); } [data-theme="light"] .chat-strip { background: rgba(248, 250, 252, .95); } .chat-strip .cs-close { flex-shrink: 0; min-width: 34px; min-height: 34px; border: 1px solid rgba(148, 163, 184, .35); border-radius: 8px; background: transparent; color: var(--ink-dim, #94a3b8); cursor: pointer; font-size: .85rem; line-height: 1; align-self: flex-start; } .chat-strip .cs-close:hover { color: var(--danger, #ef4444); } .chat-strip .cs-expand { flex-shrink: 0; min-width: 34px; min-height: 34px; border: 1px solid rgba(148, 163, 184, .35); border-radius: 8px; background: transparent; color: var(--ink, #e8eef7); cursor: pointer; font-size: .8rem; line-height: 1; } .chat-strip-list { flex: 1; min-width: 0; max-height: 4.4rem; /* kompakt: son 2-3 mesaj */ overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 2px; font-size: .82rem; line-height: 1.3; } .chat-strip.expanded .chat-strip-list { max-height: 40vh; } .chat-strip.expanded .cs-expand { transform: rotate(180deg); } .chat-strip-form { display: flex; gap: 6px; flex: 1 1 160px; min-width: 0; } .chat-strip-form input { flex: 1; min-width: 0; min-height: 40px; background: rgba(10, 20, 35, .55); color: var(--ink, #e8eef7); border: 1px solid rgba(148, 163, 184, .45); border-radius: 10px; padding: 8px 12px; } [data-theme="light"] .chat-strip-form input { background: rgba(255,255,255,.9); color: #0f172a; } .chat-strip-form input:focus { outline: none; border-color: var(--turkuaz, #06b6d4); box-shadow: 0 0 0 3px rgba(6, 182, 212, .3); } .chat-strip-form .btn { min-height: 40px; padding: 0 14px; } @media (max-width: 560px) { /* Dar ekran: mesajlar ustte, input altta — tek satir sikismasin */ .chat-strip { flex-wrap: wrap; } .chat-strip-list { flex: 1 1 100%; order: 1; max-height: 3.2rem; } .chat-strip .cs-expand { order: 2; } .chat-strip .cs-close { order: 4; } .chat-strip-form { order: 3; flex: 1 1 auto; } } /* Serit acikken alt bosluklar — ORTME YOK */ #screen-game { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--chat-strip-h, 0px)); } #question-overlay { bottom: calc(var(--chat-strip-h, 0px) + var(--chat-kb, 0px)); } /* QZ-F22: kartta uclu muhasebe rozeti — D / Y / cevapsiz */ .pc-tally { font-size: .64rem; font-weight: 700; margin-top: 2px; color: var(--ink-dim, #94a3b8); white-space: nowrap; } .player-card.compact .pc-tally { font-size: .58rem; } /* QZ-F22: cevapsiz geri bildirimi — yanlis DEGIL, notr */ .q-feedback.skip { background: rgba(148, 163, 184, .16); border: 1px solid rgba(148, 163, 184, .4); color: var(--ink-dim, #94a3b8); } /* QZ-F13: oyuncu kartinda kisisel tur sayaci (soru sayili mod) */ .pc-rounds { font-size: .68rem; font-weight: 700; color: #22d3ee; background: rgba(34, 211, 238, .12); border-radius: 999px; padding: 1px 7px; margin-top: 2px; } .player-card.compact .pc-rounds { font-size: .6rem; padding: 0 5px; } /* ============ DIL OGRENME (QZ-DIL1) ============ */ .lang-wrap { max-width: 760px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .lang-head { justify-content: space-between; align-items: center; } .lang-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .lang-card.lang-locked { cursor: default; opacity: .55; } .lang-due { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; } .lang-progressbar { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, .2); } .lang-bar-fill, #lang-unit-bar { height: 100%; border-radius: 999px; width: 0; background: linear-gradient(90deg, #06b6d4, #4ade80); } .lang-word { font-size: 1.6rem; font-weight: 800; margin: 8px 0; word-break: break-word; } .lang-flashcard { min-height: 240px; cursor: pointer; text-align: center; padding: 20px; } .lang-article { font-weight: 800; } .lang-de { background: rgba(6, 182, 212, .25); } .lang-het { background: rgba(251, 191, 36, .3); } .lang-mnemo { margin: 10px 0; padding: 10px 12px; text-align: left; border-left: 3px solid #a78bfa; background: rgba(167, 139, 250, .1); border-radius: 8px; } .lang-mnemo p { margin-top: 6px; font-size: .92rem; } .lang-note-label { display: block; text-align: left; font-size: .85rem; margin-top: 8px; } .lang-note-label textarea { width: 100%; margin-top: 4px; } .lang-card-actions .btn { min-height: 48px; flex: 1; max-width: 220px; } .lang-exercise { text-align: center; padding: 20px; } .lang-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .lang-opt { min-height: 48px; } .lang-opt.ok { border-color: #4ade80; background: rgba(74, 222, 128, .2); } .lang-opt.no { border-color: #f87171; background: rgba(248, 113, 113, .2); } .lang-feedback { margin-top: 12px; padding: 10px; border-radius: 10px; } .lang-feedback.ok { background: rgba(74, 222, 128, .15); } .lang-feedback.no { background: rgba(248, 113, 113, .15); } .lang-sum-wrong { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; text-align: left; } .lang-sum-item { padding: 6px 10px; border-radius: 8px; background: rgba(248, 113, 113, .12); } /* QZ-F25 G1 — YAZMALI CEVAP ALANI. KOK NEDEN (olculdu): form TEK SATIRLIK flex idi (nowrap) ve F23f'te ucuncu cocuk eklendi. Metin dugmeleri min-content'in altina inmedigi, input ise `flex: 1` (basis 0) ile YALNIZ ARTAN alani aldigi icin 360px'te: kart ici kullanilabilir 296px "Cevapla" ~97px + "⏭ Bilmiyorum / Geç" ~183px + 2x8px bosluk = 296px -> INPUT'A KALAN ~0px (pratikte min-content ~50px) Kullanici yazdigini goremiyordu; "Cevapla/Answer" da sikisip iki satira tasiyordu. Overlay/z-index yamasi YOK — LAYOUT AKISIYLA cozuldu: input KENDI SATIRINDA tam genislikte, dugmeler ALTINDA sarilabilir satirda. */ #lang-ex-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } #lang-ex-form input { width: 100%; min-height: 48px; /* iOS/Android 16px altinda otomatik yakinlastirir. F23e yazi boyutu ayarinda 'Kucuk' 1rem'i 14px yapabildigi icin taban SABITLENDI; buyuk kademelerde yine rem ile birlikte buyur. */ font-size: max(1rem, 16px); } /* Dugme satiri: dar ekranda sarar, her dugme okunabilir kalir */ .lang-ex-actions { display: flex; gap: 8px; flex-wrap: wrap; } .lang-ex-actions .btn { flex: 1 1 auto; min-width: 130px; } /* QZ-DIL3: dil modulu input'lari — tema uyumlu (beyaz kutu sorunu) */ .lang-input, #lang-ex-input, #lang-note { background: rgba(10, 20, 35, .55); color: var(--ink, #e8eef7); border: 1px solid rgba(148, 163, 184, .45); border-radius: 10px; padding: 12px 14px; font: inherit; width: 100%; } [data-theme="light"] .lang-input, [data-theme="light"] #lang-ex-input, [data-theme="light"] #lang-note { background: rgba(255, 255, 255, .9); color: #0f172a; border-color: rgba(15, 23, 42, .25); } .lang-input::placeholder, #lang-ex-input::placeholder, #lang-note::placeholder { color: var(--muted, #94a3b8); opacity: .8; } .lang-input:focus, #lang-ex-input:focus, #lang-note:focus { outline: none; border-color: var(--turkuaz, #06b6d4); box-shadow: 0 0 0 3px rgba(6, 182, 212, .3); } /* QZ-F17: cumle cozumleme sheet'i (mobilde alttan acilir) */ .lang-sheet { position: fixed; inset: 0; z-index: 90; background: rgba(2, 12, 27, .55); display: flex; align-items: flex-end; justify-content: center; } .lang-sheet-card { width: min(620px, 100%); max-height: 82vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius) var(--radius) 0 0; padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); box-shadow: var(--shadow); } @media (min-width: 720px) { .lang-sheet { align-items: center; } .lang-sheet-card { border-radius: var(--radius); } } .lang-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .lang-sheet-body { display: flex; flex-direction: column; gap: 10px; } .lang-analyze-line { font-size: 1.15rem; font-weight: 700; line-height: 2; } .lang-atok { padding: 2px 4px; border-radius: 6px; cursor: pointer; border-bottom: 4px solid transparent; } .lang-atok.rl-ozne { border-bottom-color: #60a5fa; } .lang-atok.rl-yuklem { border-bottom-color: #4ade80; } .lang-atok.rl-nesne { border-bottom-color: #fb923c; } .lang-atok.rl-tumlec { border-bottom-color: #c084fc; } .lang-atok.rl-zarf { border-bottom-color: #fbbf24; } .lang-atok.rl-diger { border-bottom-color: rgba(148,163,184,.7); } .lang-analyze-tr { font-style: italic; } .lang-analyze-roles { display: flex; flex-direction: column; gap: 6px; } .lang-analyze-role { padding: 8px 10px; border-radius: 8px; background: rgba(148, 163, 184, .12); border-left: 4px solid rgba(148,163,184,.7); font-size: .92rem; } .lang-analyze-role.rl-ozne { border-left-color: #60a5fa; } .lang-analyze-role.rl-yuklem { border-left-color: #4ade80; } .lang-analyze-role.rl-nesne { border-left-color: #fb923c; } .lang-analyze-role.rl-tumlec { border-left-color: #c084fc; } .lang-analyze-role.rl-zarf { border-left-color: #fbbf24; } .lang-analyzable { cursor: pointer; } /* QZ-F16: hikaye rafi + konusmaci etiketi */ .lang-shelf { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .lang-book { display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 12px; border-radius: var(--radius-sm); background: var(--card-bg); border: 1px solid var(--card-border); transition: transform .15s ease, border-color .15s ease; } .lang-book:hover { transform: translateY(-2px); border-color: var(--turkuaz); } .lang-book-cover { width: 62px; height: 82px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 4px 14px rgba(2, 12, 27, .45); } .lang-book-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .lang-book-body .row { gap: 6px; flex-wrap: wrap; margin-top: 2px; } .lang-book-body .pill { font-size: .7rem; } .lang-speaker { font-weight: 800; color: var(--turkuaz-bright); font-size: .9rem; margin-bottom: 2px; } /* QZ-F17: cift dokunma zoom engeli DIL MODULUNE de uygulanir (F9 kurali). manipulation: pinch-zoom ve kaydirma KORUNUR, yalnizca double-tap zoom kapanir; user-scalable=no KULLANILMAZ (erisilebilirlik). */ .lang-card, .lang-book, .lang-flashcard, .lang-token, .lang-opt, .lang-stoken, .lang-rw, .lang-read-sent, .lang-level-head, .lang-progressbar, #lang-view-langs, #lang-view-units, #lang-view-unit, #lang-view-cards, #lang-view-session, #lang-view-summary, #lang-view-read, #lang-view-sentdeck, #lang-view-topic, .lang-shelf, .lang-match, .lang-options, .lang-order-bank, .lang-topic-example, .lang-sent-tokens { touch-action: manipulation; } /* Kaydirma kartlari dikey sayfa kaydirmasini korur (yatay gesture kart icin) */ .lang-flashcard { touch-action: pan-y; } /* QZ-DIL4b: seviye gruplu unite haritasi */ .lang-level-head { grid-column: 1 / -1; margin: 14px 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.05rem; color: var(--turkuaz-bright); border-bottom: 1px solid rgba(34, 211, 238, .2); padding-bottom: 6px; } .lang-level-count { font-size: .72rem; font-weight: 700; } .lang-level-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } /* QZ-DIL4: kaydirma (swipe) karti + yon ipuclari */ .lang-flashcard { position: relative; touch-action: pan-y; user-select: none; } .lang-swipe-cue { position: absolute; top: 12px; font-size: 2rem; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .lang-swipe-cue.cue-know { right: 16px; color: #4ade80; } .lang-swipe-cue.cue-again { left: 16px; color: #fb923c; } .lang-swipe-hint { text-align: center; margin-top: 8px; font-size: .82rem; } .lang-card-actions { gap: 10px; flex-wrap: wrap; } .lang-card-actions .btn { min-height: 44px; } .lang-sent-text { font-size: 1.3rem; font-weight: 800; line-height: 1.5; margin: 10px 0; } .lang-sent-tokens { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; } .lang-stoken { font-size: .9rem; min-height: 38px; padding: 6px 10px; } /* QZ-DIL4: gramer konu ekrani */ .lang-topic-body { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .lang-topic-line { line-height: 1.6; } .lang-topic-ex { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .lang-topic-example { padding: 10px 12px; border-radius: 10px; background: rgba(6, 182, 212, .08); border-left: 3px solid var(--turkuaz); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* QZ-DIL3: dinle-yaz fark vurgusu */ .lang-diff { margin-top: 6px; font-size: 1.05rem; font-weight: 700; } .lang-diff .df-ok { color: var(--ink); } .lang-diff .df-no { color: #f87171; text-decoration: underline wavy #f87171; } /* QZ-DIL3: oge etiketleme renkleri (rol lejandi) */ .lang-token.rl-ozne { border-bottom: 4px solid #60a5fa; } .lang-token.rl-yuklem { border-bottom: 4px solid #4ade80; } .lang-token.rl-nesne { border-bottom: 4px solid #fb923c; } .lang-token.rl-tumlec { border-bottom: 4px solid #c084fc; } .lang-token.rl-zarf { border-bottom: 4px solid #fbbf24; } .lang-token.rl-diger { border-bottom: 4px solid rgba(148, 163, 184, .7); } .lang-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; } .lang-leg { font-size: .78rem; padding: 3px 8px; border-radius: 999px; background: rgba(148, 163, 184, .15); border-bottom-width: 3px; border-bottom-style: solid; } /* QZ-DIL3: karaoke okuma */ .lang-read-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .lang-read-sent { padding: 12px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, .18); transition: background .3s ease, border-color .3s ease; } .lang-read-sent.active { border-color: var(--turkuaz); background: rgba(6, 182, 212, .08); } .lang-read-line { font-size: 1.15rem; font-weight: 600; line-height: 1.7; } .lang-rw { padding: 1px 2px; border-radius: 5px; cursor: pointer; transition: background .12s ease; } .lang-rw.on { background: rgba(251, 191, 36, .45); } .lang-read-tr { margin-top: 6px; font-style: italic; } .lang-word-pop { position: absolute; z-index: 80; max-width: 220px; padding: 8px 12px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--turkuaz); backdrop-filter: blur(var(--glass-blur)); font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); } #lang-read-rate { max-width: 96px; } /* QZ-DIL2: cumle dizme + eslestirme */ .lang-order-built { min-height: 52px; padding: 12px; margin: 10px 0; border: 1px dashed rgba(148, 163, 184, .4); border-radius: 10px; font-size: 1.1rem; font-weight: 700; } .lang-order-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; } .lang-token { min-height: 44px; padding: 8px 14px; } .lang-token.sel { border-color: var(--turkuaz); background: rgba(6, 182, 212, .25); } .lang-token.ok { border-color: #4ade80; background: rgba(74, 222, 128, .2); opacity: .7; pointer-events: none; } /* Yanlis eslesme: YUMUSAK kirmizi arka plan gecisi — animasyon/titresim yok (F14 kurali) */ .lang-token.no { border-color: #f87171; background: rgba(248, 113, 113, .25); transition: background .25s ease; } .lang-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .lang-match-col { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 480px) { .lang-options { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============ SAFE-AREA ALT BOSLUK (QZ-F11) ============ */ /* iOS Safari'nin buyuyup kuculen alt adres cubugu alt-konumlu aksiyonlari (oda Baslat, sonuc ekrani, magaza) ortmesin. Dosya SONUNDA: yukaridaki medya sorgularindaki padding kisayollarini kaynak sirasiyla ezer. Tarayici modunda env() 0 doner — masaustunde etkisiz, zarar vermez. */ .screen { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); } .overlay { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } .joker-modal { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } /* ============ SAFE-AREA UST BOSLUK — PWA STANDALONE (QZ-F22 G4) ============ */ /* KOK NEDEN: guvenli alan yalniz ALTTA ele alinmisti. Ust bosluga sahip tek bilesen .topbar; ama tam ekran .overlay "position: fixed; inset: 0" oldugu icin topbar'in UZERINDE duruyor ve ust kenari ekranin 0. pikseline oturuyor. Tarayicida adres cubugu icerigi asagi ittiginden sorun gorunmuyor; ana ekrana eklenmis PWA'da (display-mode: standalone) tarayici kabugu olmadigi icin antrenman barinin ustu saat/pil satirinin ALTINA giriyordu. Cozum: standalone'da overlay'in ust dolgusuna guvenli alan eklenir. Tarayici modunda bu blok HIC uygulanmaz — mevcut yerlesim aynen korunur. */ @media (display-mode: standalone), (display-mode: fullscreen) { .overlay { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); } body.practice-mode #question-overlay { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); } /* QZ-F23e G3: guvenli alan payi artik YAPISKAN BASLIGIN icinde (.sheet-head). Burada ikinci kez eklemek tam ekran panelde cift bosluk uretiyordu. */ } /* ===== QZ-F27 G3: GERI BILDIRIM FORMU ===== Ayarlar panelinin AKISINDA acilir. Overlay/z-index YOK: form gorununce panel uzar, kapaninca eski haline doner. 360px'te alanlar tam genislik alir; yazi boyutu "Kucuk"te bile 16px altina inmez (iOS zoom tuzagi, F25'te dil modulunde ogrenildi). */ .fb-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .fb-form label { display: flex; flex-direction: column; gap: 4px; } .fb-form select, .fb-form textarea { width: 100%; font-size: max(1rem, 16px); font-family: inherit; } .fb-form textarea { min-height: 88px; resize: vertical; } .fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .fb-foot .btn { flex: 0 1 auto; min-width: 120px; } #fb-count { font-variant-numeric: tabular-nums; font-size: .85rem; } #fb-count.low { color: #f59e0b; } .fb-msg { margin: 4px 0 0; font-size: .88rem; }