/* ============================================================ MOBİL TEMEL — her sayfa bunu yükler (index, paneller, 56 oyun) Felsefe: mobil önce. Telefon varsayılan, masaüstü genişleme. Burada SAYFAYA ÖZEL hiçbir şey yok; yalnızca her yerde doğru olan davranışlar: güvenli alan, gerçek viewport yüksekliği, taşma kilidi, dokunma hedefleri. ============================================================ */ :root { /* Güvenli alan (çentik / ana ekran çubuğu). PWA standalone modda ŞART. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); /* Dokunma hedefi alt sınırı (WCAG 2.5.8 / Apple HIG) */ --tap: 44px; /* Kabuk ölçüleri — sticky/fixed hesapları BU değişkenlerden okunur, sihirli piksel yok. Eski "top:49px" hatası böyle bir daha oluşmaz. */ --appbar-h: 56px; --tabbar-h: 62px; } /* iOS yatay çevirmede metni büyütmesin (düzen kayar) */ html { -webkit-text-size-adjust: 100%; } /* Yatay taşma kilidi: mobilde en sık "üst üste" görüntüsünün sebebi ekrandan taşan tek bir elemandır. BİLEREK clip — hidden DEĞİL: overflow-x:hidden, overflow-y'yi auto'ya çevirip body'yi kaydırma kabına dönüştürür; height:100% olan panellerde içeriği kırpar ve sticky başlığı bozar. clip bu yan etkiyi yapmaz. */ html, body { max-width: 100%; } @supports (overflow: clip) { body { overflow-x: clip; } } /* Uzun kelime/e-posta/URL kutuyu patlatmasın */ body { overflow-wrap: break-word; } /* Medya asla kabından taşmaz. :where() ile 0 özgüllük — sayfa kendi ölçüsünü verdiyse HER ZAMAN o kazanır. (Ör. surus.html'deki canvas#view{height:100%} bu kuralla çakışmaz.) */ :where(img, svg, video, canvas) { max-width: 100%; } :where(img, video) { height: auto; } /* NOT: Buraya genel bir `button{min-height:44px}` KOYULMAZ. min-height, belirtilmiş height'i ezer; ör. index.html'deki 34x34 yuvarlak .mini düğmeleri 34x44 ovale dönerdi. Dokunma hedefi büyütmesi, düzenini bildiğimiz yerlerde yapılır (app.css, home.css). iOS 16px altı girdilere odaklanınca sayfayı ZOOMLAR ve düzeni kaydırır. Girdileri 16px tabanına çekiyoruz — oyunlar hariç (kendi ölçekleri var). */ @media (max-width: 900px) { html:not([data-page="game"]) :where(input, select, textarea) { font-size: 16px; } } /* ============================================================ OYUN SAYFALARI — ============================================================ */ /* Oyunlar tam ekran ister; 100vh mobil tarayıcıda adres çubuğunu saymaz ve içerik alta taşar. dvh gerçek görünür yüksekliktir. */ html[data-page="game"], html[data-page="game"] body { min-height: 100dvh; } /* "Ana sayfa" bağlantısı çentiğin altına iner ve oyun alanını ezmez */ html[data-page="game"] .home-link { top: calc(10px + var(--safe-t)); left: calc(12px + var(--safe-l)); min-height: var(--tap); padding: 10px 16px; } /* NOT: Oyun gövdesinin padding'ine BURADAN dokunulmaz. 18 oyun tam ekrandır (body{padding:0;overflow:hidden}) ve genel bir üst dolgu onları bozardı. Güvenli alan payı, her oyunun KENDİ padding değerine calc() ile eklenir (bkz. games klasoru ve edu.css); böylece her oyunun ayarlanmış ölçüsü korunur. Sabit boyutlu tuval (ör. 480x480) dar ekranda taşıyordu; oranını koruyarak sığsın — yine 0 özgüllükle, oyun kendi ölçüsünü verirse o kazanır. */ :where(html[data-page="game"] canvas) { height: auto; } /* ============================================================ YÜKLEME DÜĞMESİ (pwa.js) — konumu artık CSS'in işi. Eskiden sağ-altta toast'larla ÜST ÜSTE biniyordu; artık güvenli alanı ve alt sekme çubuğunu hesaba katar. ============================================================ */ #mobInstall { position: fixed; z-index: 300; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b) + var(--install-lift, 0px)); min-height: var(--tap); border: none; cursor: pointer; color: #fff; font-family: var(--font-display, var(--font, system-ui, sans-serif)); font-weight: 700; font-size: 0.95rem; padding: 12px 20px; border-radius: 999px; background: linear-gradient(120deg, #46b96a, #2f9c52); box-shadow: 0 6px 18px rgba(20, 80, 45, 0.45); } /* Telefonda tam metinli düğme içeriğin üstünü kapatıyordu — simgeye küçülür. (Eşik 420px'ti; çoğu telefon 390-430px arası olduğu için tutmuyordu.) */ @media (max-width: 860px) { #mobInstall { font-size: 0; padding: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; } #mobInstall::after { content: "📲"; font-size: 22px; } } /* Hareketi azalt tercihi */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }