/* ============================================================================ * mobile.css — Mektepa mobil deneyim katmanı * ============================================================================ * AMAÇ: Tarayıcıda açılan bir web sayfası gibi değil, YERLEŞİK (native) bir * uygulama gibi hissettirmek. * * ⚠️ MASAÜSTÜ KURALI — BU DOSYADAKİ HER KURAL `lg` KIRILIMININ (1024px) ALTINA * KAPSANMIŞTIR. 1024px ve üzerinde HİÇBİR ŞEY DEĞİŞMEZ. Kapsam dışına * kural yazmayın; masaüstü düzeni bu projede referans tasarımdır. * * Kapsanan sorunlar (mobile-audit.js ile ÖLÇÜLDÜ): * • 212 sayfada 32px altı dokunma hedefi * • iOS'ta 16px altı input'a dokununca sayfanın otomatik yakınlaşması * • Dokununca çıkan gri flaş (native uygulamada yoktur) * • Yatay kaydırılabilir şeritlerde "devamı var" ipucunun olmaması * • Çentikli cihazlarda alt/üst güvenli alanın yok sayılması * ========================================================================= */ @media (max-width: 1023.98px) { /* ── 1) Temel dokunma davranışı ───────────────────────────────────────── tap-highlight: Android/iOS'ta dokununca beliren gri dikdörtgen web hissiyatının en belirgin işaretidir; kaldırılıp yerine gerçek bir :active durumu verilir. touch-action: manipulation → çift dokunma ile yakınlaştırmayı kapatır, böylece 300ms tıklama gecikmesi de ortadan kalkar. */ a, button, [role="button"], label, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Cihaz yatay-dikey döndüğünde iOS yazı boyutunu kendiliğinden büyütür; düzen kayar. Kapat. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Basılı tutunca çıkan metin seçimi/mavi vurgu — düğmelerde istenmez. */ button, [role="button"], .no-select { -webkit-user-select: none; user-select: none; } /* Dokununca anlık geri bildirim (native "press" hissi). */ button:active, a:active, [role="button"]:active { opacity: .72; } /* ── 2) iOS otomatik yakınlaştırma ───────────────────────────────────── Safari, yazı boyutu 16px'ten KÜÇÜK bir alana odaklanınca sayfayı zorla yakınlaştırır ve geri çıkmaz — uygulamanın "web sitesi" gibi hissettiren en büyük tek sebebi budur. Tailwind'in text-sm/text-xs sınıfları 14px/12px olduğu için tüm form alanları etkileniyordu. Görsel boyutu korumak için transform DEĞİL, doğrudan 16px veriyoruz — mobilde zaten daha okunaklı. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; line-height: 1.4; } /* ── 3) Dokunma hedefi büyütme ───────────────────────────────────────── WCAG 2.5.8 (AA) asgari 24×24px ister; Apple 44pt, Google 48dp önerir. Görsel büyüklüğü şişirmeden hedefi büyütmek için ::after ile görünmez bir "dokunma zarfı" serilir — düzen HİÇ kaymaz. */ .tap-pad { position: relative; } .tap-pad::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px); } /* İkon-yalnız düğme/bağlantılar → en az 40px. ⚠️ YALNIZ KARE olanlar (h-7 VE w-7 / h-8 VE w-8). Sadece `h-8`e bakmak metinli sekmeleri de yakalıyordu; min-width:40px onları şişirip sarmayan bir flex satırında taşırıyor ve üst üste bindiriyordu (/admin/product sekmeleri 5-8px çakışma). */ main a[class*="h-7"][class*="w-7"], main button[class*="h-7"][class*="w-7"], main a[class*="h-8"][class*="w-8"], main button[class*="h-8"][class*="w-8"], main a[class*="h-9"][class*="w-9"], main button[class*="h-9"][class*="w-9"] { min-width: 40px; min-height: 40px; } /* Chip "×" gibi çok küçük düğmelerde görünmez dokunma zarfı (düzen kaymaz). */ main button[class*="h-4"], main button[class*="h-5"], main a[class*="h-4"], main a[class*="h-5"] { position: relative; } main button[class*="h-4"]::after, main button[class*="h-5"]::after, main a[class*="h-4"]::after, main a[class*="h-5"]::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, 40px); height: max(100%, 40px); } /* Onay kutusu / radyo: GÖRSEL BOYUT DEĞİŞTİRİLMEZ, yalnız dokunma zarfı büyür. DENENDI VE GERİ ALINDI: 16px → 20px yapmak sıkışık listelerde (mesaj alıcı ağacı, ders dağıtım seçimi) komşu öğelerle ÇAKIŞMA yarattı — ölçüm: çakışan sayfa 8 → 14. Görünmez ::after zarfı ise düzeni hiç bozmadan dokunma alanını 44px'e çıkarır; asıl kullanılabilirlik kazancı zaten odur. */ input[type="checkbox"], input[type="radio"] { position: relative; } input[type="checkbox"]::after, input[type="radio"]::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } /* Onay kutusunu saran