/* ===================================================================== ALIŞTIRMA EKRANI — TELEFON DÜZENİ · "Fildişi / Mürekkep vitrin" ailesi Beşinci katman; yükleme sırası: style.css → telefon-bugun.css → telefon-kesfet.css → telefon-ilerleme.css → telefon-alistirma.css. TAMAMI genişlik bloğunda; masaüstünün iki sütunlu düzeni KIPIRDAMAZ. Gereken yama (3 nokta): 1) index.html · telefon-ilerleme.css'ten SONRA bu dosyanın bağı. 2) views.js/dragdrop.js · alıştırma çizilirken odakModu(true) çağrılır (mevcut mekanizma; .layout.odak) — telefonda alt yuva ve footer gizlenir, buton sabitlenir. Tur bitince render() zaten sıfırlıyor. 3) Doğru/yanlış anında jetona `dogru` / `yanlis` sınıfı ve ✓/✗ (tipografik) eklenir — örnek: demo/js/demo.js alxKontrol(). SINIF ADLARI DEĞİŞMEZ: .ex-card/.ex-main/.ex-side/.ex-kelime/.chip/ .blank/.chip/.zone/.ex-actions/.fb-solution. YENİ RENK YOK. Gradyan yok. Jeton/cümle puntosu --fs-base'te SABİT. ===================================================================== */ @media (max-width: 940px) { /* ------------------------------------------------------------------ 1 · TEK EKRAN, SIFIR KAYDIRMA — soru önde, bilgi paneli tek satır. .ex-side'ın order:-1'i (soruyu aşağı iten panel) geri alınır; panelden yalnız kelime şeridi kalır, o da SORUNUN ALTINDA. ------------------------------------------------------------------ */ .ex-card { display: flex; flex-direction: column; gap: var(--sp-3); } /* ALT DOLGU SABIT CUBUGUN BOYU KADAR. Cubuk `position: fixed` — akistan cikmis, yani altindaki icerigi ORTER. Olculdu: kelime havuzunun ikinci sirasi cubugun altinda kaliyordu. 52 (birincil) + 8 + 42 (ikincil sira) + 12 alt bosluk + 16 pay. */ .ex-main { order: 1; padding: var(--sp-4); padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); } .ex-side { order: 2; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); } /* Panel tek satıra iner: yalnız kelime şeridi görünür (kutu durumu, ilerleme vb. ayrıntı zaten tur sonunda ve İlerleme'de). */ .ex-side > *:not(.ex-kelime) { display: none; } /* AYRINTI KAYBOLMAZ — bir dokunus arkasinda. Handoff panelden yalnizca kelime seridini birakiyor; gerekcesi "ayrinti zaten tur sonunda ve Ilerleme'de". Dogru ama kutu durumu, aralik ve cumle gecmisi TUR SIRASINDA da isine yariyor (bir kelimeye neden yine dustugunu orada goruyorsun). Katlanir baslik ayakta kalir; acilinca panelin geri kalani gorunur, kapali halde ekran handoff'un istedigi gibi tek satir. */ .ex-side > .yp-bas { display: flex; } .ex-side:not(.yp-katli) > * { display: block; } .ex-side:not(.yp-katli) > .yp-bas { display: flex; } .ex-side:not(.yp-katli) > .ex-kelime { display: flex; } .ex-kelime { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; overflow: hidden; margin: 0; } .ex-kelime > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Türkçe istem: başlık değil, soru gövdesi — büyümez. */ .ex-main .ex-tr-prompt { font-size: var(--fs-lg); line-height: var(--lh-sik); } /* ------------------------------------------------------------------ 2 · CEVAP SATIRI + HAVUZ — dokunarak yerleştirme birincil. ------------------------------------------------------------------ */ .ex-main .zone { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-2); /* TEK SIRA REZERVE — 104px (iki sira) DEGIL. Handoff iki sira ayirtiyordu ki alan sonradan buyumesin; ama dragdrop.js'te `.zone-wrap` BUYUYEN KILIT var (kap asla kuculmez), yani kayma zaten yapisal olarak engelli. Iki sira ayirtmak 40px bosa gidiyor ve sabit eylem cubugu kelime havuzunun son sirasini ORTUYORDU (olculdu: havuz alti 798, cubuk ustu 730). */ min-height: 64px; margin-top: var(--sp-4); padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card2); } .ex-main .pool-zone { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } /* Jetonlar: ≥40px, --card yüzey, --chip-line çerçeve (--line ölçüldü: 1.46:1 — görünmüyor). Punto --fs-base, SABİT. */ .ex-main .chip, .ex-main .chip, .ex-main .blank { min-height: var(--icon-box); display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); border: 1px solid var(--chip-line); border-radius: var(--r-md); background: var(--card); color: var(--text); font-family: inherit; font-size: var(--fs-base); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-1); transition: border-color var(--mo-hizli) var(--mo-cikis), transform var(--mo-hizli) var(--mo-cikis), background var(--mo-hizli) var(--mo-cikis); } .ex-main .chip:hover { border-color: var(--accent); } .ex-main .chip:active { transform: translateY(1px); box-shadow: none; } .ex-main .chip:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* Havuzdan alınan jetonun yeri boş kalır — sıçrama olmaz. */ .ex-main .chip.alindi { opacity: 0.25; pointer-events: none; box-shadow: none; } /* Doğru / yanlış: renk + tipografik işaret birlikte (renk tek başına bırakılmaz). Kırmızı yalnız GERÇEK yanlış cevapta. */ .ex-main .chip.dogru { background: var(--ok-soft); border-color: var(--ok-strong); color: var(--ok-strong); } .ex-main .chip.yanlis { background: var(--bad-soft); border-color: var(--bad-strong); color: var(--bad-strong); } /* ------------------------------------------------------------------ 3 · GERİ BİLDİRİM — buton yerinden OYNAMAZ: alan önceden ayrılır. ------------------------------------------------------------------ */ .ex-main .fb-alan { min-height: 84px; margin-top: var(--sp-3); } .ex-main .fb-solution { margin: var(--sp-2) 0 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--muted); } .ex-main .fb-solution b { color: var(--text); } /* ------------------------------------------------------------------ 4 · EYLEM — ekranın TEK ana eylemi; sabitlenir, göz 50 kez aynı yere döner. Alıştırma odak modunda çizilir (.layout.odak): alt yuva ve footer kapalı — buton güvenli alanın hemen üstünde. ------------------------------------------------------------------ */ /* Repoda tur bayragi `.layout.tur` (views.js render icinde her cizimde sifirlanir). `.layout.odak` karsilama akisina ait — ikisi de kabul edilir ki hangi mekanizma acilirsa acilsin yuva gizlensin. */ .layout.odak .mobil-nav, .layout.tur .mobil-nav { display: none; } .layout.tur .app-foot { display: none; } .ex-actions { position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); z-index: 60; /* SUTUN DEGIL SARAN SATIR. Handoff tek birincil + tek ikincil varsaymisti; gercek turda UC dugme var (Kontrol Et · Temizle · Ipucu) ve `flex-direction: column` ucunu de tam genislikte alt alta diziyordu: sabit blok 3 sira olup KELIME HAVUZUNU ORTUYORDU (olculdu, ekran goruntusuyle gorüldü). Birincil tam genislik (tek ana eylem), ikinciller tek sirada payslasir. */ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; } .ex-actions > .btn:not(.btn-primary):not(.btn-next) { flex: 1 1 0; min-width: 0; min-height: var(--ctrl-h); } .ex-actions .btn-primary, .ex-actions .btn-next { flex: 1 1 100%; width: 100%; height: var(--ctrl-h-lg); min-height: var(--ctrl-h-lg); font-size: var(--fs-base); border-radius: var(--r-md); } .ex-actions .btn-ghost, .ex-actions .btn-sm { width: 100%; min-height: var(--ctrl-h); background: var(--page-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Sabit eylem bloğunun kapladığı yer içerikten düşülür. */ .ex-main { padding-bottom: calc(var(--ctrl-h-lg) + var(--ctrl-h) + var(--sp-8) + env(safe-area-inset-bottom, 0px)); } } /* Koyu tema: soru kartı vitrin — üst kenar ışığı. Token dışı değer yok. */ @media (max-width: 940px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ex-card { box-shadow: var(--shadow-card), var(--kenar-isik); } } @media (max-width: 940px) { :root[data-theme="dark"] .ex-card { box-shadow: var(--shadow-card), var(--kenar-isik); } /* ODAK HALKASI — dosyanın SONUNDA ve :where() OLMADAN. */ .ex-main .chip:focus-visible, .ex-main .chip:focus-visible, .ex-main .blank:focus-visible, .ex-actions .btn:focus-visible { outline: none; box-shadow: var(--odak); border-color: var(--accent); } }