/* ========================================================================== Nextern — Tasarım Token'ları TEK DOĞRULUK KAYNAĞI. Bileşen dosyaları sabit renk/ölçü YAZMAZ, buradan alır. Kaynak: DESIGN.md (marka kuralları normatif — CLAUDE.md) ========================================================================== */ /* ⭐ KASKAD KATMAN SIRASI (ölçeklenme göçü, Görev 2 — 12 Ağu 2026) Spec: _Taslaklar/olceklenme_gocu_SPEC.md §1.2 ⚠️ BU BİLDİRİM TEK BAŞINA İNERTTİR: hiçbir kural bu katmanlara taşınmadığı sürece görsel fark ÜRETMEZ. Fark çıkarsa bu adım geri alınır. ⛔ YERİ ŞART: `@import`'tan ÖNCE. Sonra konsaydı `@import` GEÇERSİZ olur ve Raleway sessizce yüklenmezdi — font fallback'e düşer, tüm ölçüler kayardı. (Codex denetimi, 12 Ağu.) 📌 KATMANSIZ KURAL, KATMANLI KURALI HER ZAMAN YENER. Bugün 8 CSS dosyasının hiçbiri katmanlı değil ⇒ yeni bir kuralı `@layer components`'a koymak onu eski kuralın sessizce ezmesine yol açar. Göçte her adımda ya kural geçici katmansız yazılır ya çakışan legacy aynı commit'te kaldırılır (spec §2). 📌 `!important` deklarasyonlarda katman sırası TERSİNE döner. */ @layer reset, tokens, layout, components, utilities, invariants; @import url("fonts/fonts.css"); :root { /* --- Marka renkleri (asla değişmez) --- */ --nx-lime: #39FF14; --nx-lime-hover: #2FE00F; /* hover'da hafif koyulaşan lime */ --nx-ink: #0A0A0A; --nx-offwhite: #F0EDE6; /* saf beyaz YOK */ /* ⭐ BİLDİRİM RENGİ — Efe kararı, 16 Ağu 2026. *"Bildirimin rengi turuncu olsun; yeşil gizli kalıyor. Her temada aynı turuncu olsun o DOT."* 🔴 Bu, marka paletine (ink · lime · kırık beyaz) **bilerek eklenen dördüncü renktir** ve yalnız TEK İŞ için: okunmamış bildirim işareti. Gerekçe ölçülebilir — lime hem koyu temada hem alt tab'ın lime dolgusunun üstünde eriyordu; bildirim işaretinin tek işi FARK EDİLMEK. ⛔ Renk SIFIRDAN İCAT EDİLMEDİ: `#FF7A45` sistemde zaten var (`--nx-match-2`, %uyum skalası). Oradan ödünç alınmadı, ayrı bir token'a kopyalandı — skalanın anlamı (uyum yüzdesi) bildirime bulaşmasın diye. ⚠️ TEMA BLOKLARINDA DEĞİL, `:root`ta — Efe *"her temada aynı"* dedi. ⚠️ Dolgu kuralının *"dolgunun üstündeki her şey ink"* maddesi bu öğede UYGULANMAZ: aktif sekmenin lime dolgusunun üstünde de turuncu kalır. Bilinçli istisna, gerekçesi yukarıdaki cümlenin ta kendisi. */ --nx-bildirim: #FF7A45; --nx-bildirim-glow: 0 0 4px rgba(255, 122, 69, .70); /* --- Glow YARIÇAPLARI (tema-bağımsız; renk tema tarafında) --- `--nx-glow-lg/md/sm` hazır box-shadow'lardır ve rengi içlerinde taşır. Bazı öğelerin glow'u KENDİ rengiyle olmalı (örn. %match pill'i, skala rengiyle ışır — Efe kararı 31 Tem). Onlar `currentColor` ile kendi gölgesini kurar ve yarıçapı buradan alır. */ --nx-glow-r-lg: 8px; --nx-glow-r-md: 4px; --nx-glow-r-sm: 2px; /* --- Uzam (8'lik ölçek) --- */ --nx-space-xs: 4px; --nx-space-sm: 8px; --nx-space-md: 16px; --nx-space-lg: 24px; --nx-space-xl: 32px; --nx-space-2xl: 64px; /* --- Radius (yuvarlak, samimi geometri) --- `xs` küçük denetimler içindir (onay kutusu gibi ~20px öğeler). Ölçek kart/buton gibi büyük yüzeyler için kurulmuştu; 20px'lik bir kutuda `sm` (8px) yarıçap %40 oranına denk gelip DAİRE gibi okunuyor ve checkbox radyo düğmesiyle karışıyor (21 Tem 2026). */ --nx-radius-xs: 6px; --nx-radius-sm: 8px; --nx-radius-md: 12px; --nx-radius-lg: 16px; --nx-radius-xl: 24px; --nx-radius-full: 999px; /* --- Tipografi --- */ --nx-font: "Raleway", system-ui, sans-serif; /* ══ PUNTO SİSTEMİ — ÜÇ ROL (Efe kararı, 13 Ağu 2026) ═══════════════════ *"Tüm sistemde 3 farklı punto: ① ana başlık puntoları ② okunması gereken kısımlar için normal bir punto ③ ufak tefek gösterge ve bilgi araçları için küçük puntolar."* NEDEN: ölçüldü — 350 `font-size` kullanımının **254'ü 13-14px arasında** sıkışmıştı. 13/14/15/16/18: beş ayrı punto, toplam 5px'lik bir aralıkta. Bu hiyerarşi değil GÜRÜLTÜ; kullanıcı 13 ile 14'ü ayırt edemez. ⚠️ BAŞLIKLARA DOKUNULMADI — orada gürültü yoktu. Ölçüldü: üç kademe de ayrı iş yapıyor (40 = kimlik ekranındaki ad + puan sayısı · 28 = sayfa hero başlığı · 20 = kart/bölüm başlığı), aralarındaki oran ~1.4. ⚠️ `body-lg` (18px) GÖVDE DEĞİLDİ, küçük başlıktı — üst çubuk başlığı, profil adı, kart başlığı. Gövdeye katılsaydı üst çubuk başlığı normal metinle aynı boya inerdi. Bu yüzden 20'ye (h3) katıldı, 14'e değil. ⚠️ 3. kademe 13'te BIRAKILMADI: gövde 14'te birleşince 14/13 farkı görülmez olurdu — eleştirilen gürültünün aynısı. 12, gövdeyle gerçek bir basamak yapar (Material'ın gövde-14 / etiket-12 eşleşmesi). ⛔ ALT TAB ETİKETİ (11px) BU MERDİVENDE DEĞİL — `g + L = i` geometrik kısıtına bağlı, `components.css`te literal kalır. Satır yüksekliği (`--nx-tab-etiket-lh`) px sabittir; oransal olsaydı bu reform onu sessizce kaydırıp kısıtı bozardı. ═══════════════════════════════════════════════════════════════════════ */ /* ⭐ KANONİK ADLAR — yeni kod bunları kullanır */ --nx-fs-baslik-lg: 2.5rem; /* 40px — ad, büyük sayı */ --nx-fs-baslik-md: 1.75rem; /* 28px — sayfa hero başlığı */ --nx-fs-baslik-sm: 1.25rem; /* 20px — kart / bölüm başlığı */ --nx-fs-govde: .875rem; /* 14px — OKUNAN her metin */ --nx-fs-kucuk: .75rem; /* 12px — gösterge, meta, etiket */ /* ESKİ ADLAR — 350 kullanım yerinde duruyor, değerleri kanoniğe bağlandı. Tek tek düzenlemek 350 dokunuş + 350 hata riski demekti; token değeri değiştirmek aynı sonucu tek yerden verir ve geri alınabilir. 📌 Artık eşitler: body-lg == h3 · body-md == body-sm == label. */ --nx-fs-h1: var(--nx-fs-baslik-lg); --nx-fs-h2: var(--nx-fs-baslik-md); --nx-fs-h3: var(--nx-fs-baslik-sm); --nx-fs-body-lg: var(--nx-fs-baslik-sm); /* 18 → 20 (küçük başlıktı) */ --nx-fs-body-md: var(--nx-fs-govde); /* 16 → 14 */ --nx-fs-label: var(--nx-fs-govde); /* 15 → 14 */ --nx-fs-body-sm: var(--nx-fs-govde); /* 14 → 14 (değişmedi) */ --nx-fs-caption: var(--nx-fs-kucuk); /* 13 → 12 */ /* ⛔ KULLANIMDA DEĞİL (iskelette 0 yer). Silinmedi — dışarıdan referans verilmiş olabilir; kanonik merdivene de bağlanmadı, çünkü 64px hiçbir role karşılık gelmiyor. Yeni kod bunu KULLANMAZ. */ --nx-fs-display: 4rem; --nx-fw-light: 300; --nx-fw-regular: 400; --nx-fw-semibold: 600; --nx-fw-bold: 700; --nx-lh-tight: 1.15; --nx-lh-body: 1.6; --nx-ls-display: -0.04em; /* negatif letter-spacing tabanı ≥ -0.04em */ /* --- Hareket --- */ --nx-ease: cubic-bezier(.2,0,0,1); --nx-dur-fast: 150ms; --nx-dur-base: 250ms; --nx-dur-slow: 300ms; /* NOT: ikon rehberi bir "pop/overshoot" eğrisi tanımlıyor ama DESIGN.md "bounce/elastik yok" diyor — ÇELİŞKİ, Efe kararı bekliyor. Karar verilene kadar pop token'ı YOK; her şey --nx-ease (ease-out) kullanır. */ /* ⚡ ÇIKIŞ HAREKETİ (Efe kuralı, 25 Tem 2026 — TÜM APP) Açılır-kapanır her şey animasyonlu: menü, akordeon, çekmece, modal, toast. Giriş YAVAŞLAYARAK yerleşir, çıkış HIZLANARAK kaybolur ve girişten KISADIR (~2/3). Çıkışın yavaş olması "sistem takıldı" hissi verir. Rutin harekette >400ms gecikme sayılır. Detay: Notes/karar-animasyon-sistemi.md */ --nx-dur-exit: 180ms; /* çıkış: girişin ~2/3'ü */ --nx-dur-sheet: 320ms; /* alt sayfa girişi (büyük yüzey) */ --nx-ease-out: cubic-bezier(0, 0, .2, 1); /* giriş: yavaşlayarak yerleşir */ --nx-ease-in: cubic-bezier(.4, 0, 1, 1); /* çıkış: hızlanarak kaybolur */ /* 📊 GRAFİK SERİSİ RENGİ — WCAG 1.4.11 (denetim bulgusu, 26 Tem 2026) Veri taşıyan grafik çizgileri genel kenar token'larını KULLANAMAZ: `--nx-border-strong` ile ölçülen kontrast 2.49:1 (koyu) / 2.24:1 (açık) idi, grafik nesneleri için eşik 3:1. Opaklıklar eşit değil, KONTRASTLARI eşitlendi (koyu zeminde açık renk daha hızlı ayrışır): koyu ≈4.2:1, açık ≈4.1:1. Daha yükseği eşiği geçer ama "Pazar" serisi "Sen" ile yarışır — pazar bir REFERANS eğrisidir, ikincil kalmalı. */ --nx-chart-pazar: rgba(240, 237, 230, .48); /* --- Katman (keyfi 999 yok) --- */ --nx-z-dropdown: 100; --nx-z-sticky: 200; --nx-z-modal: 300; --nx-z-toast: 400; --nx-z-tooltip: 500; /* --- Dokunma hedefi (native min 44pt) --- */ --nx-tap-min: 44px; /* ⭐ KART İÇİ YATAY İÇ BOŞLUK — TEK KAYNAK (Efe, 13 Ağu 2026) *"transkript, CV vs. kısmının kartlar içindeki sınırlarını da ilanlardaki gibi yap; yani yatay mesafeleri eşitle hepsi için."* ⚠️ MERDİVEN DIŞI DEĞER (12px) — uzam merdiveninde 4·8·16·24·32 var, 12 yok. 8 kenar boşluğunu fazla daraltıyor, 16 kazanılan yeri geri veriyordu (Efe, 4 Ağu). Bu, o gün ölçülerek seçilmiş bilinçli bir ara değer. 🔴 ÖNCEDEN `.nx-ilan-kart` İÇİNE GÖMÜLÜYDÜ: ilan kartı 12px kullanırken `profil.html`in belge satırları 16px kullanıyordu ve ikisi birbirinden habersizdi. Buraya çıkarıldı ki "hepsi için eşit" tek yerden yönetilsin; ilan kartındaki yerel bildirim kaldırıldı, yoksa biri değişince öteki sessizce kayardı. */ --nx-kart-dolgu: 12px; /* ⭐⭐ YATAY KENAR SÖZLEŞMESİ — ÖZYİNELEMELİ 8px (Efe kararı, 14 Ağu 2026) Efe: *"yatay ölçülerde sayfa sınırıyla, arka planı olmayan kartların veya arka plan üzerinde duran kartlar olduğu durumda da arka planların sayfa bitişine olan mesafeleri hep aynı olsun. Mümkün olduğunca yatayda alan kazanmaya çalışıyorum."* + *"Baz alınacak yatay genişlik şu an ilanlar sayfasındakiler."* ⭐⭐ 16 AĞU 2026 — EFE ADIMI YARIYA İNDİRDİ (8 → 4px). *"Önceki kuralımız arka plan yanıyla kart yanı aynı mesafe olsun idi, evet hatırlıyorum; o kural artık kart ile arka plan arasındaki mesafeyi yarı yarıya düşürecek şekilde ayarla."* + *"tüm iç kartları bir tık daha genişlet."* ⇒ Kuralın KENDİSİ değişmedi (hâlâ tek ölçü, hâlâ özyinelemeli); değişen yalnız adımın büyüklüğü. Sayfa kenarı 8'de KALIR (`.nx-icerik`), içeri doğru her kademe artık 4. ⇒ TEK ÖLÇÜ, HER KADEMEDE AYNI: sayfa kenarı → arka plan/kart = 4px (`.nx-icerik`, 16 Ağu'da 8'den indi) arka plan kenarı → üstündeki kart = 4px ⇒ sayfadan 8px bir kademe daha = 4px ⇒ sayfadan 12px Mekaniği BU token: her kademe onu okur, içteki arka plan kendiliğinden 4+4 = 8'e oturur. Kural bir sayı listesi değil, tek bir yineleme — yeni bir kademe eklendiğinde de kendiliğinden doğru çıkar. 📏 Kazanç: her kademede iç kart iki yandan 4'er px genişler (toplam +8px). ⚠️ BEDELİ BİLİNEREK: bu token kartın KENDİ metin dolgusu da olduğu için metin kart kenarına 4px yaklaşır. Tek-token mekaniğinin doğrudan sonucu; ayrı bir "iç metin dolgusu" token'ı açmak D37'nin özyinelemesini bozardı. ⛔ DİKEY DOLGU 12'DE KALIR (`--nx-kart-dolgu`). Efe'nin kararı açıkça *yatay* içindi; dikeyi de 8'e çekmek kartları sıkıştırırdı ve 4 Ağu'da ölçülerek seçilen 12'yi gerekçesiz bozardı. 📌 Bu değer merdivenin İÇİNDE (8px = `--nx-space-sm`), 12'nin aksine. Yani yatay eksen artık merdivene oturuyor; ara değer yalnız dikeyde kaldı. ⚠️ `mobile.css`teki `.nx-card { padding }` kuralı da AYNI ANDA değişmek zorunda — o dosya sonra yükleniyor ve aynı özgüllükte (0,1,0) kazanır. */ --nx-kart-dolgu-yatay: 4px; /* ══ NESNE BOYU MERDİVENLERİ (Efe kuralı, 31 Tem 2026) ══════════════════════ *"Tüm ikonlarımız, objelerimiz scalable olmalı — native app için CTO küçültmesi gerekebilir."* Bu değerler eskiden 14 ayrı CSS kuralında LİTERAL px olarak yazılıydı (ikon.css 112/116/117/122 · components.css 193/352/364/365/366/431/902/ 941/978/1003). Yarısı bileşen-yerel EZMEYDİ — yani bir knob eklense bile çip/segment/dropdown ikonları ondan kaçardı ve küçültme kısmi kalırdı. Artık her biri buradan besleniyor: CTO tek yerden küçültür. ⚠️ KURAL: ikon · avatar · denetim boyu bir daha LİTERAL px yazılmaz, bu merdivenlerden gelir. Yeni bir kademe gerekiyorsa buraya eklenir. ⚠️ NATIVE UYARISI — `--nx-olcek` BU MERDİVENLERİ ETKİLEMEZ. O knob `body { zoom }` ile uygulanıyor (§ÖLÇEK) ve `zoom` React Native'de YOKTUR. Native tarafta ölçek, bu token DEĞERLERİNİN kendisinden gelmelidir (RN'de bir ölçek çarpanı × taban değer). `inset` glow uyarısıyla aynı sınıf bir sorun — ikisi de CTO teslim paketinde. */ /* ⭐ CTO'NUN TEK KNOB'U — bütün nesne boylarını birlikte ölçekler. `.9` → her şey %10 küçülür; merdivenler de, ekran-yerel boylar da. Ekran dosyalarındaki boylar `calc(17px * var(--nx-nesne-olcek))` biçiminde yazılır (Efe kararı 31 Tem: B seçeneği — merdivene çekmek 13/15/17/19/22 gibi ara boyları kaydırıp üç ekranın görünümünü değiştirirdi; çarpan bugünkü hiçbir pikseli değiştirmeden aynı knob'u verir). ⚠️ `--nx-tap-min` (44px dokunma tabanı) bu çarpana BAĞLANMAZ — o bir erişilebilirlik tabanıdır, estetik ölçek değil; küçülmemesi gerekir. */ --nx-nesne-olcek: 1; /* İkon — 24px varsayılan/gezinme (Material 24dp), 18px metin-içi, 16px çip/dropdown, 32px vurgu. Boy ölçeği kararı: Efe, 21 Tem 2026. */ --nx-ikon-xs: calc(16px * var(--nx-nesne-olcek)); --nx-ikon-sm: calc(18px * var(--nx-nesne-olcek)); --nx-ikon-md: calc(24px * var(--nx-nesne-olcek)); --nx-ikon-lg: calc(32px * var(--nx-nesne-olcek)); /* Avatar — `xs` gezinmedeki profil görseli (gezinme ikonuyla aynı boy). */ --nx-avatar-xs: calc(24px * var(--nx-nesne-olcek)); --nx-avatar-sm: calc(32px * var(--nx-nesne-olcek)); --nx-avatar-md: calc(48px * var(--nx-nesne-olcek)); --nx-avatar-lg: calc(72px * var(--nx-nesne-olcek)); /* Denetim yüksekliği — buton merdiveni 36/48/56 (Efe, 21 Tem: canlı app uyum oturumu B2). `--kutu` onay kutusu/radyo, `--cip` çip (Efe, 23 Tem: 36→32 daraltıldı). ⚠️ Bunlar GÖRSEL boydur; dokunma tabanı ayrı bir kavramdır ve `--nx-tap-min` ile korunur (36'lık buton bilinen istisna). */ --nx-kontrol-sm: calc(36px * var(--nx-nesne-olcek)); --nx-kontrol-md: calc(48px * var(--nx-nesne-olcek)); --nx-kontrol-lg: calc(56px * var(--nx-nesne-olcek)); --nx-kontrol-cip: calc(32px * var(--nx-nesne-olcek)); --nx-kontrol-kutu: calc(20px * var(--nx-nesne-olcek)); /* --- ⭐ STANDART ÖLÇEK — HER TARAF %100 (Efe kararı, 23 Ağu 2026) --- Efe: "%80 ölçeğini unut, %100 ölçek olacak; yazı boyutu vs'yi küçültürüz gerekirse. Bundan sonra ŞİRKET DAHİL her şey %100 ölçek olacak, sadece küçültmeler OBJELERE/ÖĞELERE yapılacak." ⇒ Küçültmenin tek yolu artık `--nx-nesne-olcek` (obje/ikon/kontrol merdiveni). Sayfa zoom'u bir küçültme aracı DEĞİLDİR ve bu değerle fiilen emeklidir. Karar: Notes/karar-olcek-yuzde-yuz.md ⛔ ESKİ KARAR GEÇERSİZ: Notes/karar-olcek-standardi.md (%80 masaüstü, 24 Tem) ve onun 4 Ağu'daki "yalnız öğrenci %100" istisnası — artık istisna yok, hepsi 1. 📌 `:root[data-taraf="ogrenci"] { --nx-olcek: 1 }` satırı aşağıda DURUYOR ama artık gereksiz (aynı değeri tekrar ediyor). Bilerek silinmedi: öğrenci dosyalarına gereksiz dokunulmaz — bkz. Notes/karar-universite-sistem-ayrimi §K1. ⚠️ Bu değer 1'den farklı bir şeye ÇEKİLİRSE `body { zoom }` yeniden canlanır ve aşağıdaki `--nx-ekran-y` / `--nx-hedef-min` bölmeleri yeniden anlam kazanır. Ölçüldü (23 Ağu): 1'e çekilince öğrenci tarafı DEĞİŞMEZ (zaten 1'di), yalnız ekranlar/sirket/adaylar.html ve sablonlar/panel.html %80 → %100 olur; üç pencerede (1280/1440/1920) yatay taşma sınandı, taşma YOK. */ --nx-olcek: 1; /* --- EKRAN YÜKSEKLİĞİ — ölçeğe duyarlı --- ⚠️ `zoom` altında `vh/dvh` ÖLÇEKLENMEZ: `zoom:.8` içinde `100dvh` ekranın yalnız %80'ini kaplar, altta boş bir bant bırakır (yan menü ve kanban bu yüzden zemine inmiyordu). Tam ekran yüksekliği isteyen HER YER bu token'ı kullanır — `100dvh` doğrudan yazılmaz. Ölçek yokken 100dvh'ye eşittir. */ --nx-ekran-y: 100dvh; /* --- ÜST ÇUBUK YÜKSEKLİĞİ (sisteme alındı, 6 Ağu 2026) --- Ekranın tepesinden ne kadar yer kapladığı; üstüne binen katmanların (çekmece tavanı, yapışkan denetim satırı, çıpa kaydırma ofseti) hepsi buna göre hesaplanır. Değeri `.nx-topbar`ın kendi ölçüsüdür: masaüstü 64px, mobilde 56px + çentik payı. ⚠️ NEDEN TOKEN OLDU: dört alt sayfa bu ölçüyü `--tl-ust` / `--il-ust` / `--sr-ust` adlarıyla AYRI AYRI tanımlıyordu — dördü de aynı iki satır. Çekmecenin "üst çubuğun 2/3'ü açıkta kalır" tavanı (Efe, 6 Ağu) buna bağlı; ekran-yerel kalsaydı bir ekranda üst çubuk değişince çekmece tavanı sessizce yanlış yere oturacaktı. ⚠️ NESNE MERDİVENİNE BAĞLANMAZ: `CLAUDE.md` §Ölçeklenebilirlik, üst çubuğu açıkça "merdivene çekilmeyenler" arasında sayıyor (kabuk/düzen ölçüsü; native'de düzen yeniden yazılır). `--nx-nesne-olcek` çarpanı bu yüzden YOK. ⭐⭐ İKİ DEĞİŞKEN — D43 (Efe, 15 Ağu 2026). Eskiden tek token vardı ve `.nx-topbar`ın gerçek yüksekliğiyle **bağlı değildi**; ölçüldü, üç ayrı yoldan ayrışıyordu (%200'de +9 · +37 · %125'te +2,5px). Artık ikiye ayrıldı: · `--nx-ust-cubuk-taban` = TASARIM tabanı. Yalnız `.nx-topbar`ın kendi `min-height`ini besler. Statiktir, medya sorgusuyla değişir. · `--nx-ust-cubuk` = KULLANILAN boy. Üstüne binen her katman bunu okur. `kabuk.js` çubuğu `ResizeObserver` ile ölçüp buraya yazar; JS koşmadan önceki değeri tabanın kendisidir (güvenli geri düşüş). ⛔ İKİSİ BİRLEŞTİRİLEMEZ — Codex'in geri besleme uyarısı: tek değişken kalsaydı çubuk kendi ölçtüğü yüksekliği `min-height` olarak geri yer, küçülme kilitlenirdi. "Tasarım tabanı" ile "kullanılan boy" ayrı kalmak ZORUNDA. React Native karşılığı: taban sabit, kullanılan boy `onLayout`. ⭐ ÇENTİK PAYI DÜZELDİ (aynı turda): eskiden `.nx-topbar` mobilde `min-height: 56px` + AYRICA `padding-top: env(safe-area…)` alıyordu. Global `box-sizing: border-box` yüzünden dolgu 56'ya koşulsuz EKLENMİYOR, içinde sayılıyor ⇒ gerçek kutu `max(56, içerik + çentik)`, token ise koşulsuz `56 + çentik`. Edge'de `env()` sıfır olduğu için hiç görünmedi (Codex yakaladı). `min-height` artık tabanın KENDİSİ olduğu için içerik alanı çentikten bağımsız 56'da kalıyor. 📌 Taban MOBİL değerdir, masaüstü aşağıda @media (min-width: 600px) ile ezilir — ekranlardaki kopyalar tersini yapıyordu (taban 64, mobil ezme). Bu dosyanın kalanı mobil-önce yazılmış; İLKE ① de (öncelik native app) tabanın telefon olmasını söylüyor. */ /* ⭐ D56 (Efe, 16 Ağu 2026) — ÜST ÇUBUK DİKEYDE DARALDI: 56 → 44. Efe: *"bu arama çubuğu kısımları ve üst çubuk kısmını dikeyde daralt, objeler ufak olsun; fazla şiş durmasın, modern minimalist ve ufak kalmalı."* Üç seçenek ÖNCE/SONRA görüntüsüyle sunuldu (52 · 48 · 44); Efe **C**'yi seçti. ⚠️ Bedeli yazılı ve bilinçli: bu kademede arama pili ve kebab `--nx-tap-min` (44px) tabanının ALTINA iner — bkz. `.nx-arama`/`.nx-topbar .nx-icon-btn` (components.css). WCAG 2.5.8 (24px, AA) hâlâ geçiliyor; delinen, projenin kendi 44px kuralı. Efe seçeneği bu not ekrandayken seçti. */ --nx-ust-cubuk-taban: calc(44px + env(safe-area-inset-top, 0px)); --nx-ust-cubuk: var(--nx-ust-cubuk-taban); /* --- DENETİM ÖĞESİ ASGARİ BOYUTU (WCAG 2.2 AA · 2.5.8 Target Size Minimum) --- Taban EKRANDA 24×24px'tir. ⚠️ Ölçek devredeyken ham 24/26/28px yazmak bu tabanı deler (24 × .8 = 19.2px). Token, tabanı ölçeğe BÖLER ki ekranda yine 24px çıksın (30 × .8 = 24). Küçük ikon düğmeleri, çipler ve pill'ler bunu kullanır — 44px'lik `--nx-tap-min` DOKUNMA hedefi içindir, bu ise fare ile kullanılan küçük denetimlerin ALT SINIRI. */ --nx-hedef-min: 24px; /* --- Onay tiki maskesi --- Marka ikon setinin `check` yolu birebir (2px strok, yuvarlak uç, 24×24). Kaynak: 02_Kurumsal_Kimlik/Ikon_Sistemi/Ikon_Seti_v1/svg/check.svg Maske olarak kullanılır; rengi kullanan öğe token'dan verir. NOT: Bu, "ikonu koddan çizmek" DEĞİLDİR — setteki yolun aynısıdır. Yol değişirse buradaki de güncellenmelidir. */ --nx-tik-maske: url('data:image/svg+xml;utf8,\ \ '); } /* ========================================================================== SEMANTİK RENK KURALI — "E1" (Efe kararı, 20 Tem 2026) Kaynak: 8 tasarım sistemi taraması + GitHub Primer canlı ölçümü → 04_Strateji_ve_Analiz/_Taslaklar/Semantik_Renk_*.md KURAL: Semantik renk (tehlike/uyarı/başarı) bir İŞARET rengidir. Yaşadığı yerler: ikon · kenarlık · soluk zemin tinti YASAK olduğu yer: METİN. Hata/uyarı metni HER ZAMAN nötr renktedir (--nx-text başlık, --nx-muted açıklama). Gerekçe: renkli metin, okunur olmak için koyulaştırıldığında renk kimliğini kaybeder (parlak sarı → hardal). Rengi işarete taşıyınca hem kimlik korunur hem metin kusursuz okunur. İncelenen 8 sistemin tamamı böyle yapıyor. Efe'nin ilkesi: "Temamız lime/ink/kırık beyaz olabilir ama uyarı renkleri EVRENSELDİR" — kırmızı=tehlike, sarı=dikkat kullanıcının bildiği kodlardır, markaya tabi değildir. İki temada hue korunur, parlaklık zemine göre çevrilir. Koyu temada evrensel parlak tonlar birebir kullanılır; açık temada ikon/kenar 3:1'i geçecek kadar koyulaşır ama TİNT parlak kalır. ========================================================================== */ /* --- KOYU TEMA (varsayılan) --- */ :root, [data-theme="dark"] { --nx-surface: #0A0A0A; --nx-surface-2: #141414; /* tonal yükseltme — ağır gölge yerine */ --nx-surface-3: #1E1E1E; /* ⭐ ALAN DERİNLİĞİ — Efe, 16 Ağu 2026 *"arama çubuğunu biraz daha modernize etmek lazım; iç gölgeli bir tarzımız vardı sanki onu kullanalım açıkta, koyuda da dış gölge yapalım ki arka planın birinde üstünde birinde içindeymiş gibi görünsün, derinlik katsın."* ⇒ KOYU TEMA: DIŞA gölge — alan yüzeyin ÜSTÜNDE yüzer. 📌 Yön aynalaması dolgu/glow kuralının aynı ekseni: koyuda dışa, açıkta içe. Renk lime DEĞİL — bu bir marka aksanı değil, yüzey derinliği (nötr). */ --nx-alan-derinlik: 0 2px 6px rgba(0, 0, 0, .55); /* ⭐ CAM YÜZEY — GEZİNME BULANIK (Efe kararı, 13 Ağu 2026) *"bu alt tab ve rail saydam değil de direkt blur'lu olsun; daha güzel ve daha trende uygun olur."* 🔴 21 TEM 2026 KARARINI TERSİNE ÇEVİRİR: `mobile.css`te *"cam/bulanıklık efekti YOK (marka dili düz ve keskin)"* yazıyordu. Efe bilerek değiştirdi. ⚠️ `backdrop-filter` YALNIZ yarı saydam zeminle görünür — opak bir zeminin arkasında bulanıklaştıracak bir şey kalmaz. Bu yüzden ayrı bir token. ⚠️ Değer `--nx-surface-2`nin rgba karşılığıdır (#141414). Token'a bağlanamadı çünkü hex'ten alfa üretmek `color-mix` gerektirir ve bu depoda emsali yok; renk değişirse BU SATIR DA elle güncellenir. */ --nx-cam: rgba(20, 20, 20, .72); --nx-cam-blur: 16px; --nx-text: #F0EDE6; --nx-muted: #A6A29A; /* #0A0A0A üzerinde ≥ 4.5:1 */ /* Kenarlıklar NÖTR'dür (kırık beyaz tonlu) — Efe kararı, 21 Tem 2026. Önce lime denendi (20 Tem), ama bileşenler bir araya gelince sayfa yeşile çaldı ve iki sorun çıktı: 1. Lime ≤%10 aksan dengesi bozuldu; lime sıradanlaştı. 2. ANLAM KARIŞTI — kırmızı bir uyarının yanındaki lime kenarlık, "olumlu" bir sinyalmiş gibi okunuyordu. Oysa lime bizde marka aksanı, semantik "başarı" işareti değil. Lime artık yalnız gerçekten hak ettiği yerde: odak halkası, vurgulu buton, doğrulama rozeti, durum (`.is-on`). */ --nx-border-soft: rgba(240, 237, 230, .08); /* iç ayırıcı, satır çizgisi */ --nx-border: rgba(240, 237, 230, .14); /* varsayılan: kart/panel kenarı */ --nx-border-strong: rgba(240, 237, 230, .30); /* vurgulu kenar, seçili durum */ /* WCAG 2.2 AA (1.4.11): bir DENETİM ÖĞESİNİN sınırı (girdi kutusu, seçim kutusu, tıklanabilir kart) 3:1 kontrast ister. Yukarıdaki kademeler dekoratif çizgiler için yeterli ama girdi kenarı olarak KALIR. Girdi kenarlarında bu token kullanılır (doğrulama sayfası ölçüyor). */ --nx-border-field: rgba(240, 237, 230, .42); /* YÜZEN YÜZEY kenarı (toast). Toast'ın kendi dolgusu ile sayfa arasındaki fark 1.5:1 — yani yüzeyi tanımlayan şey DOLGU değil KENARDIR, dolayısıyla WCAG 1.4.11 gereği ≥3:1 olmalı. (Modal paneli bu token'ı kullanmaz: onun dolgusu perdenin üstünde zaten yüksek kontrastla ayrışıyor.) */ --nx-border-float: rgba(240, 237, 230, .46); /* T3 UYARISI: TIKLANABİLİR kart da bir denetim öğesidir → --nx-border-field kullanır. Salt dekoratif kart --nx-border ile kalabilir. */ /* Semantik renkler — İŞARET rengidir, METİN rengi DEĞİL (bkz. aşağıdaki kural). Koyu temada evrensel parlak tonlar olduğu gibi kullanılır. */ --nx-danger: #FF6B5A; --nx-warning: #FFC44D; --nx-success: var(--nx-lime); --nx-danger-tint: rgba(255, 107, 90, .10); --nx-warning-tint: rgba(255, 196, 77, .14); --nx-success-tint: rgba(57, 255, 20, .12); /* Kategorik paletin tek tema-bağımlı slotu: sarı (gerekçe aşağıdaki palet bloğunda). Koyu zeminde parlak sarı serbest — kontrast 10.98:1. */ --nx-chart-2: #FFD400; /* sarı — koyu tema (açık: #B8860B) */ --nx-accent-on: var(--nx-lime); /* koyu zeminde lime SERBEST */ /* Aksan dolgu üstündeki metin. Koyu temada ilişki: LİME dolgu + İNK yazı. */ --nx-on-accent: var(--nx-ink); /* Buton metni koyu temada hep ink: dolgu lime olduğu için okunabilir tek seçenek bu (ink 14.60:1 · kırık beyaz 1.16:1 = okunmaz). Koyu temanın hover cevabı metinde değil DOLGUDA verilir → --nx-accent-hover */ --nx-on-accent-idle: var(--nx-ink); --nx-on-accent-hover: var(--nx-ink); --nx-accent-hover: var(--nx-lime-hover); /* hover'da dolgu koyulaşır */ --nx-accent-soft: rgba(57, 255, 20, .12); /* doğrulama rozeti dolgusu */ /* Modal perdesi. Her iki temada da İNK tabanlıdır: perde, arkasındaki içeriği bastırmak için vardır — açık temada kırık beyaz perde hiçbir şeyi bastırmaz. Koyu temada zemin zaten ink olduğu için daha opak olmalı, yoksa panel "yüzüyor" hissi vermiyor. */ --nx-scrim: rgba(10, 10, 10, .72); /* Lime dolgulu buton (NADİR — yalnız yönlendirme eylemleri) koyu temada glow alır. Efe kararı, 20 Tem 2026. Diğer her şey halka kullanır. ⚠️ 31 Tem 2026: aşağıdaki DOLGU KURALI bunun yerine geçiyor; Faz 2'de `.nx-btn--accent` `--nx-glow-lg`'ye taşınınca bu token ölür. */ --nx-glow-accent: 0 6px 22px -6px rgba(57, 255, 20, .50); /* ══════════════════════════════════════════════════════════════════════════ DOLGU KURALI — Efe kararı, 31 Tem 2026 · Notes/karar-dolgu-glow-kurali.md ══════════════════════════════════════════════════════════════════════════ Dolgu HER İKİ TEMADA DA LİME, üstündeki yazı ink. Kenar/derinlik yalnız glow'dan gelir; halka/kontur yok. Aynalanan şey artık DOLGU RENGİ değil GLOW YÖNÜ: koyuda dışa lime, açıkta içe ink. ⚠️ `--nx-accent-on` BU KURALA GİRMEZ ve DEĞİŞMEZ. O token dolgunun yanı sıra odak halkalarını (:focus-visible, 7 yer) ve aktif sekme metnini/ikonunu (4 yer) da besliyor; lime'a çevrilseydi açık temada bunlar krem üstünde 1.16:1 ile GÖRÜNMEZ olurdu. Dolgu bu yüzden ayrı bir aileye alındı. ⚠️ "HALKA/KONTUR YOK" MADDESİNİN İSTİSNASI — KNOCKOUT (Efe kararı, 1 Ağu 2026) Kural aksan konturunu yasaklar. YÜZEY RENGİNDE bir kenar ise kontur değil KNOCKOUT'tur: dolguyu arkasındaki başka bir şekilden ayırır, kendisi bir sınır çizmez. İki yerleşik örnek — `.pv-yuzde` (`border: 2px solid var(--nx-surface-kart)`, % adasını avatar halkasından ayırır) ve `.nx-avatar--verified::after` (`box-shadow: 0 0 0 2px var(--nx-surface-2)`). İkisi de KALIR. Ayırt edici soru: kenarın rengi aksan mı, yüzey mi? Aksan → yasak. Yüzey → knockout, serbest. (Final denetimde Codex bunu ihlal olarak işaretledi; kuralda yazılı olmadığı için haklıydı — bu satır o boşluğu kapatıyor.) */ --nx-dolgu: var(--nx-lime); --nx-dolgu-yazi: var(--nx-ink); --nx-dolgu-tint: rgba(57, 255, 20, .12); /* saydam dolgu — radar poligonu, venn kümesi */ /* Hover: KOYUDA dolgu sabit kalır, cevap glow'da verilir (aşağı bkz.) */ --nx-dolgu-hover: var(--nx-lime); /* Glow KADEMELİ — şiddet öğe boyuna bağlı (sabit 8px envanterde 6 yerde kırıldı: 8px şeritte glow kendi boyuna eşit, 4px şeritte iki katı, segmented kabın dışına taşıyor, yan yana çipler karışıyor). lg → ≥40px buton · oynat düğmesi · patika adası · venn kesişimi md → 16-40px çip · segment · onay kutusu · sayaç rozeti · avatar noktası sm → <16px ilerleme şeridi · huni şeridi · radar çift-şeridi */ --nx-glow-lg: 0 0 8px rgba(57, 255, 20, .55); --nx-glow-md: 0 0 4px rgba(57, 255, 20, .55); --nx-glow-sm: 0 0 2px rgba(57, 255, 20, .55); /* `overflow:hidden` kap İÇİNDE dış glow KARE görünür → orada hep inset. Emsal: `.nx-match[data-match=8]` tam bu yüzden zaten inset'e çevrilmişti. */ --nx-glow-lg-ic: inset 0 0 8px rgba(57, 255, 20, .55); --nx-glow-md-ic: inset 0 0 4px rgba(57, 255, 20, .55); --nx-glow-sm-ic: inset 0 0 2px rgba(57, 255, 20, .55); /* HOVER (Efe, 31 Tem): koyuda GLOW GÜÇLENİR. Yarıçap DEĞİL opaklık artar (.55 → .85) — yarıçabı büyütmek yukarıdaki taşma/çakışma sorunlarını geri getirirdi. */ --nx-glow-lg-hover: 0 0 8px rgba(57, 255, 20, .85); --nx-glow-md-hover: 0 0 4px rgba(57, 255, 20, .85); /* Lime dolgu üstündeki yazı KALIN olur (Efe kararı) — ince yazı lime üstünde eziliyor, kalın yazı dolguyu taşıyor. */ --nx-fw-on-accent: var(--nx-fw-bold); /* --- Marka X'i (menü-açık göstergesi, Efe isteği 21 Tem 2026) --- İçerik, onaylı kaynak dosyanın BİREBİR kopyasıdır (yalnız data-URI için `#`→`%23` kodlandı): 12_UI_UX_Tasarim/_Taslaklar/iskelet/logo/ ikon_koyu_seffaf.svg (koyu tema) / ikon_beyaz_seffaf.svg (açık tema). Bu, "X'i koddan çizme" DEĞİLDİR — hazır vektörün gömülmesidir (tik maskesi emsali). Kaynak dosya değişirse burası da güncellenmelidir. */ --nx-logo-x: url('data:image/svg+xml;utf8,\ \ \ \ '); } /* --- AÇIK TEMA --- */ [data-theme="light"] { --nx-surface: #F0EDE6; --nx-surface-2: #E7E3DA; --nx-surface-3: #DCD7CC; /* ⭐ ALAN DERİNLİĞİ — AÇIK TEMA: İÇE gölge (Efe, 16 Ağu 2026). Alan yüzeyin İÇİNE oyulmuş görünür — koyu temanın aynası. ⚠️ Koyu temadaki gölgeden daha yumuşak: kırık beyaz üstünde sert bir iç gölge kir gibi durur, ton farkı zaten küçük. */ --nx-alan-derinlik: inset 0 2px 5px rgba(10, 10, 10, .16); /* Cam yüzey — açık temanın `--nx-surface-2` karşılığı (#E7E3DA). Bulanıklık yarıçapı temaya göre değişmez, o yüzden yalnız renk burada. */ --nx-cam: rgba(231, 227, 218, .72); --nx-text: #0A0A0A; --nx-muted: #55534D; /* #F0EDE6 üzerinde ≥ 4.5:1 */ /* Açık temada kenarlık ink'tir — lime çizgi yalnız koyu zeminde yaşar */ --nx-border-soft: rgba(10, 10, 10, .08); --nx-border: rgba(10, 10, 10, .16); --nx-border-strong: rgba(10, 10, 10, .34); --nx-border-field: rgba(10, 10, 10, .50); /* girdi kenarı: AA 3:1 (.45 kıl payı kalıyordu) */ --nx-border-float: rgba(10, 10, 10, .58); /* yüzen yüzey (toast) — .34 iken 2.23:1 kalıyordu */ --nx-chart-pazar: rgba(10, 10, 10, .54); /* grafik referans serisi — ≈4.1:1 (bkz. :root notu) */ /* Kategorik paletin TEK tema-bağımlı slotu: sarı. Parlak sarı (#FFD400, OKLCH L .881) açık yüzeyde 1.6:1'e düşer; bandın içinde kalan sarı ise `--nx-warning` ochre'ının kendisi olurdu. Bu yüzden altın tona iner — warning'den ΔE 8.0 uzak, kontrast 2.78 (etiket zorunlu). Diğer beş slot iki temada da aynı, ezilmez. */ --nx-chart-2: #B8860B; /* sarı — açık tema (koyu: #FFD400) */ /* Açık temada aynı hue, WCAG 1.4.11 (UI bileşeni, 3:1) geçecek kadar koyu. Ölçüm: #CC3B2E → 3.46:1 · #9E6E00 → 3.12:1 (en koyu açık yüzeyde). Not: #9E6E00, GitHub Primer'ın açık tema uyarı rengiyle (#9a6700) neredeyse birebir aynı — bağımsız iki yoldan aynı değere varıldı. TİNT'ler parlak hue'yu korur (zeminin kontrast şartı yoktur) — açık temada "sarı hissi" buradan gelir. */ --nx-danger: #CC3B2E; --nx-warning: #9E6E00; /* Başarı (açık tema) — ink+lime ADA kalıbı (Efe değerlendirmesinde, 22 Tem 2026): yeşil #1A7F37 kaldırıldı; kenar/çizgi INK, ikon ink ada üstünde lime (components.css'te ada kuralı). Palet saf kalır, lime açık zemine değmez. */ --nx-success: var(--nx-ink); --nx-danger-tint: rgba(255, 107, 90, .14); --nx-warning-tint: rgba(255, 196, 77, .30); --nx-success-tint: rgba(10, 10, 10, .06); /* yeşil tint yerine nötr (ada kalıbı) */ /* MARKA KURALI: açık zeminde lime metin/geniş alan YASAK. Aksan rolü ink'e devredilir; lime yalnız koyu ada içinde yaşar. */ /* KOYU ADA (Efe kararı, 20 Tem 2026 — "varyant 4"): Açık temada lime, kendi küçük koyu adasında yaşar. Vurgulu dolgu ink'tir; üstündeki metin durağan halde kırık beyaz, HOVER'DA LİME'A DÖNER. Böylece marka kuralı ("lime yalnız koyu zeminde") ihlal edilmeden lime açık temada da görünür olur. Ölçüm: kırık beyaz/ink 16.93:1 · lime/ink 14.60:1 — ikisi de AA geçer. */ --nx-accent-on: var(--nx-ink); /* Koyu temanın AYNASI (Efe kararı, 20 Tem 2026): koyuda lime dolgu + ink yazı ise, açıkta ink dolgu + LİME yazı olmalı. Aksan yüzeyinin varsayılan metni budur. */ --nx-on-accent: var(--nx-lime); /* YAZILI BUTON İSTİSNASI (Efe kararı, 21 Tem 2026 — "B"): Açık temada buton metni durağan halde kırık beyaz, HOVER'DA lime'a döner. Bu, ayna kuralında delik değil, kuralın ETKİLEŞİM boyutudur: koyu tema → dolgu lime, metin ink; hover'da DOLGU koyulaşır açık tema → dolgu ink, metin kırık beyaz; hover'da METİN lime olur Yani her iki temada hover bir cevap verir, yalnız farklı katmanda — çünkü lime dolgu üstünde ink dışında okunabilir metin rengi yok. Durağan (yazısız) aksan yüzeylerinde ayna kuralı aynen geçerli: `--nx-on-accent` açık temada lime'dır. */ /* ⚠️ 31 Tem 2026 — YUKARIDAKİ "YAZILI BUTON İSTİSNASI" ARTIK GEÇERSİZ. Dolgu kuralıyla buton dolgusu açık temada da LİME oldu; lime dolgu üstünde kırık beyaz 1.16:1, lime ise 1:1 — ikisi de okunmaz. Tek okunur renk ink. Hover cevabı metinden DOLGUYA taşındı (--nx-dolgu-hover). Bu üç satır artık koyu temayla aynı; geçiş bitince sadeleştirilebilir. */ --nx-on-accent-idle: var(--nx-ink); --nx-on-accent-hover: var(--nx-ink); --nx-accent-hover: var(--nx-accent-on); /* açıkta dolgu sabit kalır */ /* Yumuşak aksan da ink'e döner: açık zeminde lime tint bile geniş alan sayılır */ --nx-accent-soft: rgba(10, 10, 10, .08); /* Açık temada perde daha az opak: arkadaki içerik kırık beyaz olduğu için %55 ink zaten yeterli bastırma sağlıyor, %72 gereksiz "kararma" hissi veriyordu. Hue aynı (ink), yalnız yoğunluk zemine göre çevrildi. */ --nx-scrim: rgba(10, 10, 10, .55); --nx-fw-on-accent: var(--nx-fw-bold); /* Açık temada glow yok — lime bulut kırık beyaz üstünde marka dışı durur. ⚠️ 31 Tem 2026: aşağıdaki DOLGU KURALI bunun yerine geçiyor (açık temada artık İÇE ink glow var); Faz 2 geçişi bitince bu token ölür. */ --nx-glow-accent: none; /* ══════════════════════════════════════════════════════════════════════════ DOLGU KURALI — açık tema dalı · Efe kararı, 31 Tem 2026 ══════════════════════════════════════════════════════════════════════════ Dolgu KOYU TEMAYLA AYNI: lime. Değişen tek şey glow'un YÖNÜ ve RENGİ — açıkta İÇE (inset) ve ink. Ayna kuralı ölmedi, ekseni değişti. ⚠️ Bu, "YAZILI BUTON İSTİSNASI"nı (21 Tem 2026, yukarıda) GEÇERSİZ KILAR: hover cevabı artık metinde değil DOLGUDA veriliyor. */ --nx-dolgu: var(--nx-lime); /* koyuyla AYNI — kuralın özü bu */ --nx-dolgu-yazi: var(--nx-ink); /* lime dolgu üstünde tek okunur renk (14.60:1) */ --nx-dolgu-tint: rgba(57, 255, 20, .12); /* saydam dolgu — koyuyla aynı */ /* HOVER (Efe, 31 Tem): AÇIKTA dolgu KOYULAŞIR. `--nx-lime-hover` böylece ölü kod olmaktan çıkıp açık temanın hover motoru oluyor. */ --nx-dolgu-hover: var(--nx-lime-hover); /* Glow açık temada HER ZAMAN inset ve ink; kademeler koyuyla birebir aynı boyda. */ --nx-glow-lg: inset 0 0 8px rgba(10, 10, 10, .55); --nx-glow-md: inset 0 0 4px rgba(10, 10, 10, .55); --nx-glow-sm: inset 0 0 2px rgba(10, 10, 10, .55); /* Açıkta glow zaten inset → kırpılan kap varyantı normaliyle aynı. */ --nx-glow-lg-ic: var(--nx-glow-lg); --nx-glow-md-ic: var(--nx-glow-md); --nx-glow-sm-ic: var(--nx-glow-sm); /* Açıkta hover cevabı DOLGUDA verildiği için glow hover'da değişmez. */ --nx-glow-lg-hover: var(--nx-glow-lg); --nx-glow-md-hover: var(--nx-glow-md); /* Marka X'i — açık tema: ikon_beyaz_seffaf.svg birebir (sol chevron ink). Kural korunur: lime yalnız sağ chevron'da, metin/geniş alan değil. */ --nx-logo-x: url('data:image/svg+xml;utf8,\ \ \ \ '); } /* ========================================================================== ⛔⛔ AKSAN AYNA KURALI — GEÇERSİZ (Efe kararı, 31 Tem 2026) ⛔⛔ Aşağıdaki metin TARİHSEL KAYITTIR, uygulanmaz. Yerine geçen: §DOLGU KURALI (bu dosyada, yukarıda ~253. satır) · `Notes/karar-dolgu-glow-kurali.md`. Özet: dolgu HER İKİ TEMADA DA lime, üstündeki yazı ink; aynalanan şey dolgu rengi değil GLOW YÖNÜ. ⚠️ Bu iptal notu final denetimde eklendi (bulgu İ3): blok tam normatif dille ("sistem çapında") ve bir TABLOYLA yazılmıştı, hiçbir geçersizlik işareti taşımıyordu. Aynı dosyanın 246-249 ve 379-391. satırlarına not düşülmüş, burası atlanmıştı. CTO paketinde tek başına okunursa yanlış yönlendirirdi — tablo hâlâ "açık tema: ink dolgu, LİME yazı" diyor. ── AŞAĞISI ESKİ METİN (21 Tem 2026), UYGULANMAZ ──────────────────────────── "Koyu temada lime dolgulu + ink yazılı olan HER ŞEY, açık temada ink dolgulu olsun; yazısı varsa yazı rengi lime olsun. Yazı yoksa dolgu yine bu kuralı takip etsin." | Öğe türü | Koyu tema | Açık tema | |---------------------|--------------------|---------------------| | Dolgu + yazı | lime dolgu, ink yazı | ink dolgu, LİME yazı | | Yalnız dolgu | lime | ink | Token karşılığı: --nx-accent-on → dolgu (koyu: lime · açık: ink) --nx-on-accent → üstündeki yazı (koyu: ink · açık: lime) Gerekçe: lime her iki temada da GÖRÜNÜR kalır ve marka kuralı ihlal edilmez (lime yine koyu zeminde yaşar, yalnız o koyu zemin küçük bir "ada"dır). Açık temada lime'ı soluk tint üzerine koymak rozeti/butonu silikleştiriyordu. Bu kuralı kullanan yerler: vurgulu buton, doğrulama rozeti, işaretli onay kutusu, avatar doğrulama noktası, ilerleme çubuğu, `.is-on` durumu. ========================================================================== */ /* ========================================================================== YÜKSELTİ KURALI — Varyant F (Efe kararı, 20 Tem 2026) Kart ve butonlarda derinlik HALKA ile verilir; blur'lu gölge kullanılmaz. Hover'da halka güçlenir + öğe 2px yükselir. Tek istisna: lime dolgulu buton koyu temada --nx-glow-accent alır. Ölçüm dayanağı: Linear ve Vercel koyu temada gölge kullanmıyor (04_Strateji_ve_Analiz/_Taslaklar/Kart_Buton_GERCEK_OLCUM_*.md). ========================================================================== */ /* ========================================================================== YÜZEN KART (Efe kararı, 23 Tem 2026) — Varyant F'in REVİZYONU Varyant F "derinlik halka ile verilir, blur gölge yok" diyordu. Uygulamada (Adaylar panosu) şu ortaya çıktı: her kartın çevresinde tam bir kenarlık olunca kart YÜZMÜYOR, çerçevelenmiş/oyuk görünüyor ve göz yoruyor (Efe bulgusu). Kural şöyle inceltildi: · Kartın KENARI zayıflar (soft), derinlik TON FARKI + YUMUŞAK GÖLGE ile verilir. · Kart kendi kabından (sütun/panel) DAHA AÇIK bir yüzeyde durur → yükselti önce tonla okunur, gölge yalnız onu pekiştirir. · Gölge dekoratiftir, bilgi taşımaz; hover'da biraz güçlenir. Varyant F'in geçerli kaldığı yer: BUTONLAR ve tıklanabilir denetim öğeleri — onlar hâlâ halka kullanır (odak halkası, lime buton glow'u). Yani "gölge yasak" değil, "gölge yalnız yüzen yüzeylerde" oldu. ========================================================================== */ :root, [data-theme="dark"] { --nx-surface-kart: #232323; /* sütun/panel yüzeyinin ÜSTÜ */ /* ⭐ KART KENARI — TEK KAYNAK (Efe, 6 Ağu 2026) Efe: "kartların kenar çizgilerini koyuda ve açıkta daha silik yapalım, arka plan üstünde yüzüyor gibi olsun." Önceden tıklanabilir kartın halkası `--nx-border-field` idi (koyu .42 / açık .50) — sistemin EN GÜÇLÜ kenar token'ı. Kart "yüzmüyor, çerçeveli" görünüyordu; 23 Tem'de zaten teşhis edilen sorunun kalan yarısı buydu. ⚠️ AYRI TOKEN olarak açıldı, `--nx-border`e bağlanmadı: o token satır çizgisi/panel kenarı gibi başka işler de görüyor; kart kenarını incelt dediğimizde onların da incelmesi istenmiyor. Tek yerden yönetilir. */ --nx-kart-kenar: rgba(240, 237, 230, .10); /* Kenar zayıfladığı için YÜKSELTİ artık ağırlıklı olarak gölgeden okunuyor — gölge bir tık güçlendirildi ki kart zeminden kopmaya devam etsin. */ --nx-yuzen: 0 1px 2px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.44); --nx-yuzen-hover: 0 2px 4px rgba(0,0,0,.38), 0 10px 24px rgba(0,0,0,.52); /* Alttan açılan sayfa (native sheet) gölgesi: YUKARI doğru ve geniş — panel ekranın altından geliyor, gölgesi de üstte olmalı. Kart gölgesinden ayrı bir token, çünkü yönü ve yayılımı farklı. Elle yazılmıştı (gorevlerim.html), 27 Tem 2026'da sisteme alındı — gölgeyi token'dan almayan tek dosya oydu. */ --nx-yuzen-sheet: 0 -16px 48px rgba(0,0,0,.55); } [data-theme="light"] { /* Kart yüzeyi MARKA KIRIK BEYAZIDIR — yeni bir "daha beyaz" ton üretilmez (denetçi bulgusu: #F7F5F0 saf beyaza F0EDE6'dan daha yakındı). Yükselti zaten kabından gelir: kart #F0EDE6, sütun/panel #E7E3DA (daha koyu). */ --nx-surface-kart: var(--nx-offwhite); /* ⭐ Kart kenarı — koyu temanın aynısı, ink tarafından (Efe, 6 Ağu). */ --nx-kart-kenar: rgba(10, 10, 10, .12); /* Açık temada gölge doğası gereği daha zayıf okunur; kenar da inceldiği için burada oran biraz daha yükseltildi — yoksa kart kremin içinde kayboluyor. */ --nx-yuzen: 0 1px 2px rgba(10,10,10,.08), 0 6px 16px rgba(10,10,10,.14); --nx-yuzen-hover: 0 2px 4px rgba(10,10,10,.10), 0 10px 24px rgba(10,10,10,.20); } /* ========================================================================== EŞLEŞME SKALASI (Efe kararı, 23 Tem 2026) — app geneli %match bir DURUM değil, bir DEĞER ölçeğidir: kendi renk dili vardır ve uygulamanın her yerinde (aday kartı, liste, panel, ilan eşleşmesi) AYNI skalayı kullanır. Envanterdeki B14 bulgusu ("iki farklı veri-görselleştirme dili") bununla kapanır — veri renkleri tek yerden gelir. KADEME: 0-29 kırmızı · 30-39 kızıl-turuncu · 40-49 turuncu · 50-59 amber · 60-69 sarı-yeşil · 70-79 yeşil · 80-90 lime · 91-100 mor (EPIC) SUNUM: renk YAZIDA yaşar ama çıplak değil — yazı her zaman KOYU BİR ADANIN (ink pill) üstündedir. Nedeni (Efe): açık temada yeşil/lime çıplak zeminde hem okunmuyor hem marka kuralına aykırı; ada ile lime yine koyu zeminde yaşar (doğrulama rozeti emsali) ve renk İKİ TEMADA DA AYNI kalır — kullanıcı temayı değiştirince aynı adayın rengi değişmez. ÖLÇÜM (ink #0A0A0A üstünde, WCAG AA ≥4.5): 5.45 · 7.66 · 9.14 · 12.50 · 14.38 · 8.73 · 14.60 · 5.02 — hepsi geçer. ERİŞİLEBİLİRLİK: renk TEK BAŞINA taşıyıcı değildir — yüzde sayısı her zaman pill'in içinde yazılıdır (yedekli kodlama), ayrıca `title` ile kademe adı verilir. ========================================================================== */ :root { --nx-match-1: #F04A4A; /* 0-29 */ --nx-match-2: #FF7A45; /* 30-39 */ --nx-match-3: #FF9642; /* 40-49 */ --nx-match-4: #FFC44D; /* 50-59 */ --nx-match-5: #D7E62F; /* 60-69 */ --nx-match-6: #35C46A; /* 70-79 */ --nx-match-7: var(--nx-lime); /* 80-90 — marka rengi */ --nx-match-8: #B14BFF; /* 91-100 EPIC */ --nx-match-ada: var(--nx-ink); /* pill zemini: İKİ TEMADA DA ink */ } /* ========================================================================== KATEGORİK GRAFİK PALETİ (Efe kararı, 29 Tem 2026) 21 Tem 2026'da onaylanan iki katmanlı sistemin eksik yarısı: nicel/yoğunluk → lime skalası · kategorik (donut, çok seri) → AYRI palet. Somut rampa "Faz 1'in ilk çok-kategorili ekranında tanımlanacak" diye ertelenmişti; CTO'nun 27 Tem ikon/grafik sorusu o ekranı getirdi. LİME PALETE GİRMEZ. Ölçüldü: #39FF14 OKLCH açıklığı 0.871 — kategorik bandın (açık .43-.77 · koyu .48-.67) dışında, kırık beyaz üstünde kontrast 1.16:1. Lime bir SERİ rengi değil, VURGU rengidir: "sen/vurgulanan" seriyi işaretler (ayna kuralı: koyuda lime, açıkta ink). Aynı sebeple mor #B14BFF de girmez — o EPIC'e ayrılmıştır; buradaki mor #7B5BD6 ondan ΔE 13.3 uzak, farklı ton. SIRA BİR GÜVENLİK MEKANİZMASIDIR, kozmetik değil — İLK ÜÇ SLOT donut-güvenli seçildi. Renkler cycle EDİLMEZ; 7. kategori yeni renk almaz, gri "Diğer"e katlanır. FORM KURALI (ölçümle): donut/pasta gibi efsane üzerinden her dilimin her dilimle eşleştiği formlarda güvenilir tavan 3 KATEGORİDİR (slot 1-2-3; 4'lü düşüyor). 6 kategori yalnız komşuluk yeten formlarda geçerli: yatay yığılı çubuk, çok-çizgi. Uzun Türkçe kategori adları da yatay çubuğu istiyor. ÖLÇÜM (açık #F0EDE6 / koyu #232323 kart yüzeyi, WCAG 1.4.11 grafik eşiği 3:1): 3.06/4.40 · 2.78/10.98 · 4.17/3.23 · 3.35/4.01 · 3.06/4.39 · 5.02/2.68 En zayıf komşu: renk körlüğü ΔE 21.0 (hedef 8) · normal görüş ΔE 24.7 (taban 15). Sarı açıkta 2.78, kırmızı koyuda 2.68 → 3:1'in hemen altında: GÖRÜNÜR DOĞRUDAN ETİKET veya tablo görünümü ZORUNLU (rahatlama kuralı, pazarlık konusu değil). SARI TEK İSTİSNA — iki değerli. Parlak sarı iki temada tek hex olamaz: bandın içinde kalan tek sarı, `--nx-warning` ochre'ının kendisidir. Bu yüzden sarı [[karar-semantik-renk]] desenini izler (hue korunur, parlaklık zemine göre çevrilir). Diğer beş slot iki temada da AYNI kalır — veri renginin anlamı temaya göre değişemez ([[karar-eslesme-renk-skalasi]] ile aynı ilke). SEMANTİKLE ÇAKIŞMA: sarı ↔ warning ΔE 5.6 kaçınılmaz (uyarı rengi zaten sarı). Ayrım BAĞLAMDAN gelir — E1 kuralı gereği semantik renk ikon/kenarlıkta yaşar, grafik rengi dolguda. Kırmızı, danger'ın tuğla tonundan (h29) ahududuya (h6) kaydırıldı: ΔE 2.9 → 8.8. ========================================================================== */ :root { --nx-chart-1: #0092C0; /* camgöbeği — donut-güvenli */ /* --nx-chart-2 (sarı) BURADA DEĞİL, tema bloklarında tanımlıdır: koyu #FFD400 (satır ~163) · açık #B8860B (satır ~215). Düz `:root` bu dosyada tema bloklarından SONRA geldiği için buraya yazılsaydı eşit özgüllük + kaynak sırası yüzünden açık tema ezmesini ölü bırakırdı. */ --nx-chart-3: #7B5BD6; /* mor — EPIC'ten ΔE 13.3 */ --nx-chart-4: #289426; /* yeşil */ --nx-chart-5: #2C88EE; /* mavi */ --nx-chart-6: #C2185B; /* kırmızı (ahududu) — danger'dan ΔE 8.8 */ --nx-chart-diger: var(--nx-muted); /* 7+ kategori buraya katlanır */ } :root { --nx-ring: 0 0 0 1px var(--nx-border); --nx-ring-hover: 0 0 0 1px var(--nx-border-field); /* Hover/basma geri bildirimi ÖLÇEK ile verilir, yükselme ile DEĞİL (Efe kararı, 20 Tem 2026): hover'da hafif büyür, basınca küçülür. Yükselme (translateY) kullanılmaz. */ --nx-scale-hover: 1.06; --nx-scale-active: 0.94; } /* Ölçeklenen etkileşimli öğeler: katmana terfi (Efe kararı — "varyant E"). Gerekçe: ölçek sırasında tarayıcı yazıyı ara boyutlarda yeniden raster'lıyor, bu da harflerde titreme/oynama hissi yaratıyordu. will-change öğeyi kendi katmanına alıp bitmap olarak ölçekliyor, titreme kayboluyor. ⚠️ MALİYET: will-change kalıcı bir katman ayırır (bellek). Ekran başına ~20-30 etkileşimli öğede sorun yok; UZUN LİSTELERDE (feed, aday listesi, 100+ kart) tüm kartlara verilmemeli — o durumda yalnız görünür alandaki kartlara veya liste kabının hover'ında açılacak şekilde sınırlanmalı. */ /* ⭐ YAYILIM (Efe bildirdi, 31 Tem 2026: "hoverladığımda butonlar şişmiyor"). Ölçek geri bildirimi 20 Tem'de KARARA bağlanmıştı ama `.nx-scalable` opt-in bir sınıftı ve ekranlara neredeyse hiç uygulanmamıştı — ölçüldü: profil.html 46 butonun 0'ı, kabuk.js 0, adaylar 2, gorevlerim 3; yalnız components.html katalogunda 21. Yani karar vardı, davranış yoktu. Artık sözleşme SINIFA DEĞİL BİLEŞENE bağlı: her denetim öğesi ölçek alır. ⚠️ KART HARİÇ (`.nx-card--tiklanabilir`): kararın kendi maliyet notu uzun listeleri (feed, aday listesi, 100+ kart) dışarıda tutuyor — `will-change` kalıcı katman ayırır. Kartlarda `.nx-scalable` opt-in KALIR. Ölçülen yük (ekran başına aday öğe): profil 28 · gorevlerim 13 · kimlik-hub 10 · adaylar 5 — hepsi kararın belirttiği ~20-30 bandının içinde. ⚠️ `transition`: aşağıdaki liste yalnız `.nx-btn` için yeterlidir (onun kendi transition'ı YOK). `.nx-icon-btn` (ikon.css) · `.nx-chip` · doğrulama rozeti kendi `transition`'larını yazıyor ve bu dosya ONLARDAN ÖNCE yükleniyor — o yüzden `transform` oraya, kendi bildirimlerinin içine eklendi. */ .nx-scalable, .nx-btn, .nx-icon-btn, .nx-chip, button.nx-badge--verify { will-change: transform; transition: transform var(--nx-dur-fast) var(--nx-ease), color var(--nx-dur-fast) var(--nx-ease); } @media (hover: hover) and (pointer: fine) { .nx-scalable:hover, .nx-btn:hover, .nx-icon-btn:hover, .nx-chip:hover, button.nx-badge--verify:hover { transform: scale(var(--nx-scale-hover)); } } .nx-scalable:active, .nx-btn:active, .nx-icon-btn:active, .nx-chip:active, button.nx-badge--verify:active { transform: scale(var(--nx-scale-active)); } /* ⚠️⚠️ GENİŞ ÖĞE SINIRI (Efe kararı, 4 Ağu 2026) — bu sözleşmenin kapsamı ================================================================================ Yukarıdaki `--nx-scale-hover` (1.06) 20 Tem'de kararlaştırıldığında sistemdeki EN BÜYÜK öğe bir BUTONDU. `scale` ORANSALDIR: aynı %6, öğe büyüdükçe mutlak büyümeyi de büyütür. Keşfet hub'ında ilk kez tam genişlik kart çıktı ve sorun ölçüldü (375px ekran, 343px kart): 343 × 1.06 = 363,6 → HER YANDAN 10,3px kartın sol kenarı 16px'lik kenar payından 5,7px'e düşüyor = pay yeniyor, öğe app sınırından taşmış gibi görünüyor. Karşılaştırma: 160px'lik dar kartta aynı %6 = her yandan 4,8px, ekran kenarına 11,2px kalıyor → SORUN YOK. ⭐ KURAL (Efe): "Bu animasyon tipi SADECE ekran genişliğine YAKIN büyüklükteki animasyonlu objeler için — aşırı geniş butonlar, tam genişlik kartlar vs." ÖLÇÜT BOYUT DEĞİL ORAN: öğe içerik genişliğinin ~%80'inden genişse, büyüme YÜZDE değil SABİT PİKSEL hedeflenir ve ölçek ondan türetilir: scale = 1 + (hedef_büyüme_px / öğe_genişliği_px) Emsal (Keşfet ilan kartı, 343px, hedef 4px): 1 + 4/343 = 1.0117 → her yandan 2px. ⚠️ Bu bir SINIF olarak sisteme alınmadı çünkü değeri öğe genişliğine bağlı ve CSS tek bir `scale` değeriyle her genişlikte sabit piksel veremez. Geniş öğesi olan ekran bu oranı KENDİ hesaplar ve ekran-yerel yazar; buraya yazılan bu not sonraki ekranın aynı keşfi baştan yapmasını engellemek içindir. ⚠️ Butonlar/çipler/ikon butonları bu kuralın DIŞINDA — %6 aynen korunur (Efe: "butonlara dokunma, onlar kalsın"). ================================================================================ */ /* Devre dışı öğe ölçeklenmez — "basılabilir" yalanı söylemesin. */ .nx-btn:disabled:hover, .nx-btn:disabled:active, .nx-icon-btn:disabled:hover, .nx-icon-btn:disabled:active, .nx-chip:disabled:hover, .nx-chip:disabled:active { transform: none; } @media (prefers-reduced-motion: reduce) { .nx-scalable, .nx-btn, .nx-icon-btn, .nx-chip, button.nx-badge--verify { will-change: auto; } .nx-scalable:hover, .nx-scalable:active, .nx-btn:hover, .nx-btn:active, .nx-icon-btn:hover, .nx-icon-btn:active, .nx-chip:hover, .nx-chip:active, button.nx-badge--verify:hover, button.nx-badge--verify:active { transform: none; } } /* ========================================================================== ETKİLEŞİM DURUMU KURALI (Efe kararı, 20 Tem 2026 — madde 7) Bir öğenin zemini hover/active/focus'ta değişiyorsa, YAZI RENGİ DE tanımlanmak ZORUNDA. Açık zeminden koyuya (veya lime'a) geçen bir buton, metin rengini de çevirmezse okunmaz hale gelir. Kural: her :hover/:active kuralında background yazıldıysa color da yazılır. Doğrulama: her durum çifti için kontrast ≥ 4.5:1 (T3'te sınanır). ========================================================================== */ /* --- Taban --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ══ ÖLÇEK — masaüstünde %80 (Efe kararı, 24 Tem 2026) ══════════════════════ NEDEN `zoom`: tipografimiz `rem`, boşluk/yarıçap/dokunma hedefi `px`. Yalnız kök font'u küçültmek yazıyı küçültüp boşlukları yerinde bırakır — düzen bozulur. `zoom` gerçek tarayıcı zoom'u gibi HER ŞEYİ (kabuk dahil) birlikte ölçekler; medya sorguları gerçek piksele bakmaya devam ettiği için ekran "büyümüş" gibi davranır. Amaç tam olarak budur: her şeyden uzaklaşmak. (`transform: scale` elendi — yazıyı bulanıklaştırır, düzen yeniden akmaz.) KAPSAM: yalnız ≥1024px, yani FARE ile kullanılan geniş ekran. Telefon/tablet %100 kalır: 375px'te %80 gövde yazısını 12.8px'e indirir, iOS'ta 16px altı girdiler otomatik zoom tetikler, dokunma hedefleri 44px'in altına düşer. STANDARTLARIN YENİ TABANI (Efe: "WCAG 2.2 gibi tüm her şeyimizi buna göre ayarla"): · Hedef boyutu — 44px token, ekranda 44 × .8 = 35.2px. WCAG 2.2 AA (2.5.8 Target Size Minimum) tabanı 24×24px → KARŞILANIYOR. Dokunmanın gerçekten kullanıldığı yerde (<1024px) ölçek yok, 44px aynen durur. · Metin — ekranda görünen en küçük değer `--nx-fs-caption`. ✅ **BU AÇIK KALEM KAPANDI — Efe kararı, 23 Ağu 2026.** Eskiden burada şu yazıyordu: 13 Ağu punto reformundan sonra caption 13 → 12 olmuş, ölçekli ekranda **12 × .8 = 9.6px**'e düşüyordu ve bu YALNIZ ≥1024px'te ŞİRKET ile ÜNİVERSİTE'yi vuruyordu (öğrenci %100'de olduğu için 12px kalıyordu). Not, iki çıkış yolu sayıp *"kendiliğinden çözülmez"* diyordu. ⇒ Efe birinci yolu seçti ve genelleştirdi: **ölçek HER TARAFTA 1** (`--nx-olcek: 1`, bkz. yukarıdaki STANDART ÖLÇEK bloğu). Caption artık her tarafta **12px** — düşme yok, istisna yok. ⚠️ Kural DURUYOR: tip rampasının ALTINA inen sabit değer (10px/9px gibi) YASAK; hepsi rampaya çekilir. Küçültme gerekirse `--nx-nesne-olcek` merdiveninden yapılır, punto elle kırpılmaz. Karar: Notes/karar-olcek-yuzde-yuz.md WCAG'ın asgari punto şartı yoktur; 1.4.4 (%200 büyütme) ölçekten bağımsız çalışmaya devam eder. · Kenar/çizgi — 1px kenarlar 0.8px'e iner; RENK tokenları değişmediği için WCAG 1.4.11 (denetim öğesi sınırı ≥3:1) etkilenmez. Ölçeği kapatmak/değiştirmek TEK YERDEN: `--nx-olcek`. */ /* ⭐ TARAF İSTİSNASI — ÖĞRENCİ MASAÜSTÜ %100 (Efe kararı, 4 Ağu 2026) Efe: "Öğrenci kısmına özel olarak masaüstü %80 olarak ölçeklenmesin, %100 olarak devam etmeli." ⇒ 24 Tem'in "%80, iskeletin TAMAMI" kararı artık TARAFA GÖRE bölünür: · öğrenci → %100 (bu kural) · şirket → %80 (adaylar.html) · üniversite → %80 Ekranlar yazarak katılır; öğrenci şablonu (sablonlar/ogrenci.html) zaten taşıyor, yeni ekranlar otomatik alır. ⭐ KNOB ÇEVRİLİR, zoom ELLE YAZILMAZ: aşağıdaki blok --nx-ekran-y ve --nx-hedef-min’i de aynı değişkenden türetiyor. Yalnız zoom: 1 yazılsaydı o iki token .8’e bölünmeye devam eder, ekran yüksekliği ve WCAG denetim tabanı sessizce şişerdi. ⛔ ÖZNİTELİK ADI data-rol DEĞİL: ekranlar/ogrenci/kimlik.html sayfa genelinde closest("[data-rol]") dinliyor; e data-rol konsaydı kart dışındaki HER tıklama rol diyaloğunu açardı. ✅ WCAG etkisi olumlu: hedef ekranda 35,2 → 44px, en küçük metin 10,4 → 13px. */ :root[data-taraf="ogrenci"] { --nx-olcek: 1; } /* ⭐ ÖĞRENCİ MASAÜSTÜ = ORTADA MOBİL SÜTUN (Efe kararı, 4 Ağu 2026) Efe: "Ortada mobil ile benzer bir görünüm olsun … ortada bir sütunda kayar gibi kaysın, bire bir mobil gibi olmuş olur." + "En geniş mobil genişliğine çek." ⇒ 430px = projede belgelenmiş EN GENİŞ telefon (kesfet_TASARIM_SPEC §3a-A: 360 · 375 kanonik · 414 · 430). 📌 İçerik genişliği 13 Ağu 2026'da **398 → 414px** oldu: kenar payı `md`(16) yerine `sm`(8) olunca 430 − 2×8 = 414. Eski "398px" sayısı bu satırda ve aşağıdaki container notunda güncellendi (Codex çapraz kontrolü yakaladı — çalışma zamanı hatası değil, sonraki `@container` kararlarını yanıltacak belge borcuydu). Bu kural §TARAF İSTİSNASI (%100 ölçek) ile BİRLİKTE çalışır: ölçek 1 olduğu için 430px düzen px’i ekranda da 430px’tir — yani gerçek bir telefon genişliği. ⚠️ Özgüllük: (0,2,0). Ekranların kendi `.nx-icerik` kuralı (0,1,0) olduğu için kaynak sırasından bağımsız kazanır; dikey dolgu ekranın kendi kuralından gelmeye devam eder (yalnız padding-inline ezilir). ⚠️ ŞİRKET/ÜNİVERSİTE KAPSAM DIŞI — onlar tam genişlik + %80 ölçekte kalır. ⚠️ BİLİNEN SINIR: ekranların mobil düzen kuralları VIEWPORT’a bağlı (@media max-width: 560/599/620 — 🔴 buradaki 768 rakamı 13 Ağu 2026'da 599'a indi, bu yorum o gün güncellendi; kod ile yorumun ayrışmaması ŞART, sonraki oturum yorumu kaynak sanıp eşiği geri çekebilir). ⚠️ 620 artık 600-768 bandının İÇİNE düşüyor: sütun 600'de açılıyor, o kural 620'de hâlâ viewport'a bakıyor ⇒ 600-620 arası viewport ile kap (430px) ayrışıyor. Görev 6'nın (@container) konusu. Masaüstünde viewport geniş olduğu için o kurallar TETİKLENMEZ, ama kap **414px**’tir (13 Ağu: kenar payı 16→8 olunca 398→414). Geniş düzen varsayan öğeler burada sıkışabilir; kalıcı çözümü `@container` sorgularına geçmektir. Ekran ekran ölçüldü — bkz. Notes/DEVIR-kesfet.md §üç ekranın sütuna alınması. */ /* ══ İÇERİK KABI DOLGUSU — SİSTEME TAŞINDI (Efe onayı, 13 Ağu 2026) ════════ *"sisteme taşı, ekranlardaki tekrarları temizle."* ÖNCE: aynı dört kademe **13 ekranda birebir tekrarlıyordu** (48 kural). Biri değişirse ötekiler sessizce ayrışırdı — 13 Ağu'da tam bu yaşandı: ilan ekranları 8px'e inmiş, profil/kimlik/görevlerim 16px'te kalmıştı. ⛔ NEDEN BURASI — üç aday elendi, gerekçeleri ölçüldü: · `layout.css` OLMAZ: dosya `@layer` içinde. Katmansız kural katmanlıyı HER ZAMAN yener (V5) ⇒ ekranlarda bırakılan her katmansız `.nx-icerik` kuralı bunu ezerdi ve bugünkü garanti TERSİNE dönerdi. · `mobile.css` OLMAZ: gövdesi baştan sona tek bir `@media (max-width:599px)` bloğunun içinde; dört kademeden yalnız biri sığar, merdiven bölünürdü. · `tokens.css` ⇒ katmansız + tüm stylesheet'lerin İLKİ. Ekranlar sonra yüklendiği için kendi istisnalarını hâlâ ezebilir. Doğru yer burası. ⛔ SEÇİCİ ÇIPLAK `.nx-icerik` (0,1,0) — `[data-taraf="ogrenci"]` ÖNEKİ YOK. İki sebep, ikisi de sessiz kırılma: ① Önek (0,2,0) yapardı ve ekranlarda KORUNAN `padding-top: 0` kuralları (0,1,0) artık ezemezdi ⇒ yapışkan arama/denetim satırı olan BEŞ ekranda üstte çift boşluk. Özgüllük sırayı yener; kural sonra gelse bile kaybeder. ② `panel.html`den türeyen şirket/üniversite ekranları o kapsamın DIŞINDA kalır ve dolguları SIFIRLANIRDI. 📌 EKRANLARDA BİLEREK BIRAKILANLAR (silinmedi, ekran-özel): · `padding-top: 0` → kesfet · tum_ilanlar · tum_sirketler · tum_egitimler · tum_sertifikalar (yapışkan üst satır dolguyu devralıyor) · `.nx-icerik.is-duzenle …` dört kural → profil (düzenleme kipi) · `body.nx-native .nx-icerik` → gorevlerim (native tam ekran kipi) · `panel.html`in kendi `<=599px { padding: md }` kuralı → ŞİRKET/ÜNİVERSİTE 16px'te KALIR; 8px kararı yalnız öğrenci içindi. */ .nx-icerik { flex: 1; /* ⚠️ `min-width: 0` BURADAN GİDEMEZ — `layout.css` başlığındaki BEŞ kez düşülen `min-width:auto` tuzağının kabuk seviyesindeki karşılığı. */ min-width: 0; padding: var(--nx-space-lg) var(--nx-space-2xl); } @media (max-width: 1024px) { .nx-icerik { padding: var(--nx-space-lg) var(--nx-space-xl); } } /* Kenar payı yarıya: kart ↔ app sınırı 16 → 8 (Efe, boşluk turu + 13 Ağu hizalama) */ /* ⭐ 16 Ağu 2026 — Efe: *"aynı şeyi arka plana da uygula, sınıra yakınlıkları yarıya insin; bu kuralı uyguladığımız her şeyde o sınır aynı olacak."* ⇒ Sayfa kenarı da 8 → 4. Artık ÜÇ kademe de aynı: sayfa→arka plan 4 · arka plan→kart 4 · kart→içerik 4. ⚠️ Kısayol EKSENE AYRILDI: dikey dolgu 8'de KALIR (D37 açıkça yataydı; dikeyi de 4'e çekmek içeriği üst çubuğa yapıştırırdı). */ @media (max-width: 599px) { .nx-icerik { padding-block: var(--nx-space-sm); padding-inline: var(--nx-kart-dolgu-yatay); } } /* ══ SORGU CONTAINER'I — `.nx-icerik` (Görev 6, 13 Ağu 2026) ═══════════════ D13: içerik → `@container` · kabuk → `@media` viewport. Bileşenlerin GERÇEK ölçüm kaynağı buradan gelir: masaüstünde viewport 1270 ama kap 430 ⇒ `@media` orada yanlış cevap veriyordu. 🔴 PLANDAN SAPMA — bilerek, gerekçesi burada: Plan bu satırı `@media (min-width: 600px)` bloğunun İÇİNE koyuyordu, yani container YALNIZ masaüstünde var olacaktı. İki sebeple dışarı alındı: ① İLKE ①: öncelik NATIVE APP (öğrenci telefonu). Container'ı yalnız masaüstünde kurmak mimariyi ters yönden inşa etmek olurdu. ② DETERMİNİZM: bir bileşen `@container` yazdığında, ekranda geçerli bir container ATASI yoksa sorgunun neye göre çözüleceği tarayıcı davranışına kalır. Telefon ve masaüstünde AYNI kaynağa bakması, tahmin gerektirmeyen tek kurulum. (Telefonda viewport ≈ kap olduğu için sayı zaten aynı çıkar; kazanç sayıda değil, belirsizliğin kalkmasında.) ⛔ `container-type` İNERT DEĞİL — bu adımda "fark sıfır" ŞARTI YOKTUR (D18). Bağımsız biçimlendirme bağlamı kurar: margin collapse durur ve kap, `position: absolute` torunları için kapsayıcı blok hâline gelir. ✅ Ölçüldü (12 Ağu, V3): hiçbir `position: fixed` öğe `.nx-icerik` içinde değil — tab bar · rail · toast · üst çubuk hepsi kabuk seviyesinde. ⚠️ KATMANSIZ yazıldı (D19): `@layer` içine konsaydı katmansız legacy kurallar onu ezebilirdi. Çakışan legacy kural yok, bu yüzden kaldırma gerekmedi. ⚠️ Şirket/üniversite KAPSAM DIŞI — seçici `[data-taraf="ogrenci"]`. */ [data-taraf="ogrenci"] .nx-icerik { container: ekran / inline-size; } @media (min-width: 600px) { [data-taraf="ogrenci"] .nx-icerik { max-width: calc(398px + 2 * var(--nx-space-md)); /* = 430px — SÜTUN GENİŞLİĞİ */ margin-inline: auto; /* ⭐ 13 Ağu 2026: `md` (16) → `sm` (8). Kenar payı kararı sisteme taşındı; önceden ekranların her biri bu satırı kendi