/* ========================================================================== Nextern — Mobil katman (mobil web + native app kalıpları) AYRIK TUTULUR: web stilleri components.css'te, mobil kurallar YALNIZ burada. İleride "mobil ayrı, web ayrı" istenirse bu dosya olduğu gibi taşınır (spec kararı — Expo/RN tarafı bu dosyayı kendi diline çevirecek). Bu dosya YENİ BİLEŞEN TANIMLAMAZ; yalnız var olanların mobil davranışını değiştirir. Yeni bir `.nx-*` sınıfı gerekiyorsa components.css'e yazılır. YÜKLEME SIRASI: tokens.css → ikon katmanları → components.css → mobile.css (en son yüklenir ki aynı özgüllükteki kuralları geçersiz kılabilsin) Kaynak: DESIGN.md → "Mobil App Dili" ========================================================================== */ @media (max-width: 599px) { /* --- Gezinme: yan menü gider, alt tab bar gelir -------------------------- Mobilde yan menü ekranın yarısını yiyor ve baş parmakla ulaşılamıyor. Native kalıp alt tab bar'dır; components.css'teki `.nx-tabbar` zaten safe-area gözetiyor. */ .nx-sidebar { display: none; } /* Tab bar EKRANA SABİTTİR (Efe bulgusu, 21 Tem 2026) ve YÜZEN HAP (pill) biçimindedir (Efe kararı, 21 Tem 2026): kenardan kenara şerit yerine kenarlardan ayrık, tam yuvarlak kapsül — iOS 26 "Liquid Glass" ve M3'ün ortaklaştığı güncel native biçim (araştırma raporu §A1). Zemin ve kenar token'dan. 🔴 *"cam/bulanıklık efekti YOK (marka dili düz ve keskin)"* — BU CÜMLE 13 Ağu 2026'da GEÇERSİZ OLDU. Efe: *"bu alt tab ve rail saydam değil de direkt blur'lu olsun; daha güzel ve daha trende uygun olur."* Cümle silinmedi, üstü çizildi: karar tersine döndü, gerekçesi buydu. Safe-area payı artık İÇ padding değil ALT OFSET olarak verilir — hap, home bar'ın üstünde yüzer. */ .nx-tabbar { /* ⭐ EŞİT SÜTUN — YAPISAL (Efe, 12 Ağu: "her 4 seçenek de eşit genişlikte olmalı, hiçbiri diğerinden geniş veya dar olmamalı"). ⛔ `flex: 1` YETMEZ: içerik farklıysa taban genişlikler ayrışır. `grid-auto-columns: 1fr` + `fit-content` ⇒ sütunlar EN GENİŞ öğeye oturur; "Başvurular" büyürse DÖRDÜ BİRDEN büyür. */ display: grid; /* masaüstünde components.css gizliyor */ grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; /* ⭐ HAP BİR KADEME DARALDI: 16 → 24px (Efe, 6 Ağu 2026) Efe: *"bunun genişliğini bir tık daraltalım, modern iPhone ve Samsung arayüzlerindeki pill tablarına uygun bir şey olsun."* ⇒ 375px'te hap 343 → 327. Uzam ölçeğinin bir sonraki adımı (8/16/24), uydurma bir değer değil. ⚠️ SINIR ÖLÇÜLDÜ, göz kararı seçilmedi: en uzun etiket "Başvurular" 66px. Dört hücre + yatay dolgu ⇒ hapın ASGARİSİ 296px. 24px ofsette pay 375'te 31px, 360'ta 16px. Daha fazla daraltmak 360px'lik yaygın Android ekranında payı sıfırlıyordu. */ /* ⭐ HAP İÇERİK KADAR DAR VE ORTADA (Efe, 12 Ağu — OneUI galeri gözlemi: "pill şeklinde ve gayet ufak, ortada kalıyor"). ⛔ ESKİ HÂL: `left/right: lg` ile kenardan kenara geriliyordu. Şimdi: genişlik içerikten gelir, `margin-inline:auto` ortalar. `min(...)` TAŞMA EMNİYETİ — tetiklenmese de koda girer: çok uzun bir etiket dört sütunu birden büyütüp hapı ekrandan taşırabilir. */ /* ⛔ `min(fit-content, …)` YAZILAMAZ — `fit-content` bir ANAHTAR KELİME, `min()` yalnız alır. Yazıldığında bildirim tümüyle geçersiz sayılır ve `left/right:0` hapı kenardan kenara gerer. Ölçümde yakalandı (12 Ağu): hap 320px'te 320px çıktı, kenar payı 0. Aynı geçersiz satır spec §4.5'e de yazılmıştı, orada da düzeltildi. */ left: 0; right: 0; inline-size: fit-content; max-inline-size: calc(100% - 2 * var(--nx-space-lg)); margin-inline: auto; padding-inline: var(--nx-space-xs); bottom: calc(var(--nx-space-md) + env(safe-area-inset-bottom, 0px)); z-index: var(--nx-z-sticky); border-radius: var(--nx-radius-full); border: 1px solid var(--nx-border); border-top-color: var(--nx-border); /* base'deki border-top ile uyum */ /* ⭐ CAM (Efe, 13 Ağu): yarı saydam zemin + arkayı bulanıklaştırma. ⚠️ İkisi BİRLİKTE olmak zorunda — opak zeminde `backdrop-filter`ın bulanıklaştıracağı bir şey kalmaz, kural sessizce hiçbir şey yapmaz. ⚠️ `-webkit-` öneki Safari için ŞART (iOS'ta öneksiz hâlâ tutmuyor) ve İLKE ① gereği birincil hedefimiz native/iOS. */ background: var(--nx-cam); backdrop-filter: blur(var(--nx-cam-blur)); -webkit-backdrop-filter: blur(var(--nx-cam-blur)); padding-bottom: 0; /* safe-area artık bottom ofsetinde */ /* ⛔ `overflow: hidden` KALDIRILDI — Efe, 16 Ağu 2026: *"dışa taşan TAM DAİRE olmalı, pilin dışında da o daireyi görmemiz lazım."* Bildirim noktası hapın dışına taşıyor; kırpma onu yarım daire yapıyordu. 📌 Eski gerekçe (*"uç sekmeler hapın köşesini takip eder"*) bugün KARŞILIKSIZ: sekme öğelerinin kendi zemini yok, aktif hâl kayan `::before` göstergesinden geliyor ve o zaten `--nx-radius-full`. Yani kırpacak bir köşe taşması kalmamış — ölçümle doğrulandı. */ /* ⛔ `transition: opacity` KALDIRILDI (13 Ağu): tek kullanıcısı kaydırma saydamlaşmasıydı, o da kalktı. Geçirilecek bir opaklık değişimi yok. */ } /* ⚠️ `[hidden]` ÖZNİTELİĞİNİ GERİ KAZANDIR (1 Ağu 2026, `universite` rolü eklenirken ölçüldü). Yukarıdaki `display: flex` bir YAZAR kuralıdır ve tarayıcının `[hidden] { display: none }` UA kuralını EZER — `tab.hidden = true` yazmak görsel olarak hiçbir şey yapmıyordu; kap yüksekliğini koruyup duruyordu. Yalnız-web roller (üniversite) alt tab bar basmaz ve kabı gizler; bu satır olmadan o gizleme sessizce çalışmaz. Emsaller: `.nx-modal[hidden]` · `.nx-dropdown__panel[hidden]` (components.css) · `.nx-icon-btn[hidden]` (ikon.css §118). Bu, projede aynı tuzağın 4. örneği. */ /* ⛔ GERİ DÜŞÜŞ — cam desteklenmiyorsa OPAK zemin. `backdrop-filter` yoksa geriye yalnız %72 saydam bir zemin kalır ve gezinme, altından kayan içeriğin üstünde OKUNMAZ olur — saydamlık tek başına kabul edilebilir bir hâl değil, camın yarısı. ⚠️ Bu blok mobile.css'te ve yukarıdaki kuraldan SONRA olmak zorunda: components.css'e konsaydı mobile.css daha sonra yüklenip `--nx-cam`i geri getirirdi (aynı özgüllük, sonra gelen kazanır). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nx-tabbar { background: var(--nx-surface-2); } } .nx-tabbar[hidden] { display: none; } /* D2 — ONAYLI (Efe, 22 Tem 2026: "kalsın güzel oldu"): kaydırma SIRASINDA hap hafif saydamlaşır (küçülme YOK), durunca geri gelir. Sınıfı sayfa mantığı ekler/çıkarır (scroll dinleyicisi). */ /* ⛔ `.nx-tabbar.is-kaydiriliyor { opacity: .8 }` KALDIRILDI (Efe, 13 Ağu 2026): *"kayarken saydam falan kalmasın, hep aynı olsun, blur'lu olsun."* D2 (22 Tem) tab bar OPAK'ken alınmıştı; cam yüzeyde opaklık düşürmek camın kendi etkisini dalgalandırıyordu. `kabuk.js`teki kaydırma dinleyicisi de birlikte kaldırıldı — biri kalsaydı öteki ölü kod olurdu. */ /* ⭐ DAR EKRANDA İÇ OBJELER UFALIR (Efe kuralı, 12 Ağu: "iç objeler ufaltılarak yer açılır — arka plan kartları hariç"). Ölçüldü: 320px'te bu kademeyle hap 266×57 ve kenar payı 27px; kademesiz 298px olup payı 6px'e düşürüyordu. ⛔ İKON BİLEREK KÜÇÜLMEZ (22px kalır): gösterge ve punto ufalınca gereken yer zaten açılıyor; ikonu da küçültmek gezinmenin tek görsel taşıyıcısını zayıflatırdı. Ufaltma gerektiği kadar, refleks olarak değil. ⛔ Bu 360, KABUK eşiği DEĞİL (o 600) — hapın kendi iç eşiği. */ @media (max-width: 359px) { .nx-tabbar { --nx-tab-gos-w: 56px; } /* ⛔ YALNIZ punto iner — `--nx-tab-etiket-lh` (satır kutusu) SABİT kalır. Onu da küçültmek `g + L = i` kısıtını bozar ve ikonun alt sınırı dolgunun merkezinden kayar (components.css §dolgu içi geometri). */ .nx-tabbar__etiket { font-size: 10px; } } /* (Menü düğmesi artık yan menünün içinde — menüyle birlikte gizleniyor, ayrı kural gerekmiyor. Eski `.nx-topbar__menu` kalıbı kaldırıldı.) */ .nx-topbar { /* ⭐ D43 (15 Ağu 2026): literal `min-height: 56px` KALKTI — taban artık `tokens.css`teki `--nx-ust-cubuk-taban` ve o zaten çentik payını İÇERİYOR (`calc(56px + env(...))`). Buradaki `padding-top` ile birlikte, global `border-box` sayesinde içerik alanı çentikten bağımsız 56px'te kalır. Eski kurgu (`56px` + ayrıca dolgu) gerçek kutuyu `max(56, içerik + çentik)` yapıyordu; token ise koşulsuz `56 + çentik` diyordu ⇒ çentikli cihazda sessizce ayrışırlardı. Edge'de `env()` sıfır olduğu için hiçbir ölçüm bunu göremedi (Codex, 15 Ağu). */ /* ⭐ D37 AÇIĞI KAPANDI (15 Ağu 2026): yatay dolgu `md`(16) → `sm`(8). D37 (14 Ağu) *"sayfa→arka plan hep 8px"* diyor ve `.nx-icerik` 13 Ağu'da 8'e inmişti; üst çubuk **16'da unutulmuştu** ⇒ başlık kenardan 16px, altındaki kartlar 8px başlıyordu. Ölçerken çıktı, hizasızlık gerçek. ⭐ Yan fayda ölçüldü: %200 yazıda 320px'te başlığa **16px** daha yer açıyor — `gorevlerim` başlığı tam bu sayede tek satıra sığıyor. */ padding: 0 var(--nx-space-sm); /* Boşluk da 8'e indi: ızgara varyantları (`tl-/eg-/il-/sr-topbar`) zaten `--nx-space-sm` kullanıyordu, taban 16'da kalıp onlardan ayrışıyordu. */ gap: var(--nx-space-sm); /* iPhone çentiği/durum çubuğu: başlık altına kaçmaz */ padding-top: env(safe-area-inset-top, 0px); } .nx-topbar__title { font-size: var(--nx-fs-body-lg); } /* --- Modal → ALT SAYFA (bottom sheet) ----------------------------------- Mobilde varsayılan kalıp budur: ortada yüzen kutu değil, alttan gelen yaprak. Üst köşeler yuvarlak, alt köşeler düz (ekrana yapışık). Tutamaç çizgisi burada görünür hale gelir — "aşağı sürükleyip kapat" duygusunu taşıyan görsel ipucu. */ .nx-modal { align-items: flex-end; padding: 0; } .nx-modal__panel { width: 100%; max-height: 90vh; border-radius: var(--nx-radius-xl) var(--nx-radius-xl) 0 0; /* home bar'ın üstünde nefes payı bırakır */ padding-bottom: calc(var(--nx-space-lg) + env(safe-area-inset-bottom, 0px)); animation: nx-sheet-in var(--nx-dur-base) var(--nx-ease); } @keyframes nx-sheet-in { from { transform: translateY(100%); } to { transform: none; } } .nx-modal__handle { display: block; width: 36px; height: 4px; flex: none; margin: 0 auto var(--nx-space-sm); background: var(--nx-border-strong); border-radius: var(--nx-radius-full); } /* --- Kart: iç boşluk daralır, satır uzunluğu korunur --------------------- ⭐ 13 Ağu 2026: `--nx-space-md` (16px) → `--nx-kart-dolgu` (12px). Efe: profil kartları da ilan kartıyla aynı kenar ölçüsünde olacak. ⚠️ Bu satır components.css'teki taban kuralla AYNI özgüllükte (0,1,0) ve SONRA yüklendiği için kazanır — ikisi birlikte değişmek zorundaydı, yalnız biri değişseydi sonuç sessizce eskisi olurdu. ⭐ 14 Ağu 2026 (D37): yatay eksen ayrı token'a bağlandı — 12 → 8. */ .nx-card { padding: var(--nx-kart-dolgu) var(--nx-kart-dolgu-yatay); } /* --- Tablo: yatay kaydırılır -------------------------------------------- Sütunları dar ekrana sıkıştırmak yerine kaydırtıyoruz — sıkıştırma hücreleri okunmaz hale getiriyor. `min-width` sütunların nefes payı. ⚠️ `min-width` YALNIZ sarmalayıcı İÇİNDEKİ tabloya verilir (marka denetçisi bulgusu, 21 Tem 2026). Genel `.nx-table` seçicisine verilince, sarmalayıcısı unutulmuş bir tablo 560px'i sayfaya dayatıp TÜM SAYFAYI yatay kaydırılabilir yapıyordu: üst çubuk butonu ve alt sayfadaki CTA ekran dışında kalıyordu. Bu haliyle sarmalayıcısız tablo bozulmuyor, yalnız sütunları daralıyor — yani hata sessizce sayfayı kırmak yerine kendi içinde kalıyor. */ .nx-table-sarmal { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nx-table-sarmal .nx-table { min-width: 560px; } /* --- Toast: ortalanmış hap yerine kenardan kenara şerit ------------------ Dar ekranda ortalanmış hap taşıyor; iki yandan boşluk bırakan şerit hem sığıyor hem uzun metni taşırmıyor. ⭐ 7 Ağu 2026 — YIĞIN KABINA GEÇİŞ, iki keyframe kopyası SİLİNDİ. Eskiden burada `nx-toast-in-mobil` ve `nx-toast-cik-mobil` diye MASAÜSTÜNÜN BİREBİR AYNISI iki keyframe duruyordu. Tek sebepleri şuydu: ortalama `translateX(-50%)` toast'ın kendi `transform`undaydı, mobilde `transform:none` ile eziliyordu ve masaüstü keyframe'i çıkışta o -50%'yi geri getirip toast'ı SOLA savuruyordu. Ortalama artık `.nx-toast-yigin`de ⇒ toast'ın `transform`u iki kırılımda da boşta ⇒ **tek keyframe seti yetiyor.** 📌 Ders: aynı animasyonun "mobil kopyası" gerekiyorsa sebep genelde animasyon değil, YERLEŞİMİN yanlış katmanda durmasıdır. */ .nx-toast-yigin { left: var(--nx-space-md); right: var(--nx-space-md); transform: none; width: auto; max-width: none; align-items: stretch; /* şerit iki kenara yayılsın */ /* ⚠️ DÜZELTME (Efe, 4 Ağu): eskiden `--nx-space-md` (16px) idi ve toast tam yüzen hapın ÜSTÜNE biniyordu — gezinmeyi kapatıyordu. Ölçüldü: hap 65px yüksekliğinde, alttan 16px'te → üst kenarı 81px, toast ise 16px'te. Pay artık `.nx-sayfa-govde`nin kendi formülünden (sistemin "tab bar'ın üstü" cevabı) + bir nefes: 44+16+24+16 = 100px → hapın 19px üstünde. Literal px YAZILMADI ki hap boyu değişirse toast da birlikte kaysın. */ bottom: calc(var(--nx-tap-min) + var(--nx-space-md) + var(--nx-space-lg) + var(--nx-space-md) + env(safe-area-inset-bottom, 0px)); } .nx-toast { justify-content: center; } /* --- Tab bar üstündeki içerik alanı -------------------------------------- Alt tab bar sabit duruyorsa sayfanın son satırı altında kalır. Bu sınıf içerik kabına verilir. Pay = hap yüksekliği (~tap-min) + hapın alt ofseti (space-md) + nefes (space-lg) + safe-area. */ .nx-sayfa-govde { padding-bottom: calc(var(--nx-tap-min) + var(--nx-space-md) + var(--nx-space-lg) + env(safe-area-inset-bottom, 0px)); } @media (prefers-reduced-motion: reduce) { .nx-modal__panel, .nx-toast { animation: none; } } }