/* ========================================================================== Nextern — İkon katmanı Bu dosya ikonların BOYUT/KAP/ETKİLEŞİM katmanıdır. İkona ÖZEL animasyonlar `ikon-animasyon.css`ten gelir — o dosya marka setinin orijinal üreticisinden (02_Kurumsal_Kimlik/Ikon_Sistemi/Ikon_Seti_v1/ react/nextern-icons.css) birebir kopyadır ve DEĞİŞTİRİLMEZ. 92 keyframe: hamburger X'e döner, zil sallanır, tik çizilir, çöp kapağı kalkar, match chevronları birbirine kayar… YÜKLEME SIRASI: tokens.css → ikon-animasyon.css → ikon-animasyon-butunluk.css → ikon-animasyon-zamanlama.css → ikon-animasyon-tekseferlik.css → ikon.css (index.html'deki gerçek sıra; beş animasyon katmanı) MARKUP: … (animasyon sınıfları SARMALAYICIDA yaşar) Pratikte `nxIkon("bell")` bunu üretir (ikonlar.js). KURAL (Efe kararı, 21 Tem 2026): ikonlar varsayılan olarak DURAĞANDIR. · HOVER → sakin pop (yalnız CSS, aşağıda) · TIKLAMA → ikonun kendi özel animasyonu, BİR KEZ (ikon.js bağlar) KURAL: sette olmayan ikon EL İLE ÇİZİLMEZ; build_icon_set.py ile sete eklenir. KURAL — AKSAN İŞARETİ (CTO isteği, 27 Tem 2026 · Efe onayı 29 Tem 2026): YENİ İKONDA AKSAN VARSA `nx-accent` SINIFI ZORUNLUDUR — `stroke` ile verilene de, `fill` ile verilene de. Sınıf renk taşımaz; makinenin (mobil/RN kod üretimi ve testler) aksan parçasını GÜVENLE BULMASI için gereken tutamaktır: ayrıştırılan bir `var()` dizesine değil, tasarımcının KASTINA bağlı bir işaret. Uygulaması `build_icon_set.py` → `fix_fills()` içinde, iki yönlü ve otomatik: sınıf yazarsan aksan strogu eklenir, aksan yazarsan sınıf eklenir. Bu dosyada veya SVG'de ELLE düzeltme YAPILMAZ — 95 SVG ve ikon-animasyon.css üretilen dosyalardır, elle değişiklik ilk yeniden üretimde silinir. Fallback `currentColor`: değişken çözülemezse ham lime yerine metin rengine düşer, böylece açık zeminde marka ihlali YAPISAL olarak imkânsızdır. ========================================================================== */ /* -------------------------------------------------------------------------- Boyut ve kap -------------------------------------------------------------------------- */ .nx-ico { display: inline-flex; align-items: center; justify-content: center; color: inherit; /* currentColor buradan gelir */ /* ⚠️ AYNA KURALI DÜZELTMESİ (denetim bulgusu, Efe onayı 27 Tem 2026) Eskiden `var(--nx-lime)` idi: ikonun aksan parçası TEMADAN BAĞIMSIZ lime çiziliyordu, yani açık/kırık-beyaz zeminde çıplak lime kalıyordu — marka kuralının doğrudan ihlali. `--nx-accent-on` ayna kuralını taşır: koyu zeminde lime, açık zeminde ink. İSTİSNA — LİME DOLGU İÇİNDEKİ İKON: dolgunun üstündeki ikon bu satırı EZMEK ZORUNDADIR, çünkü `--nx-accent-on` KOYU TEMADA LİME'dır ve dolgu da lime → aksan yolu görünmez olur (ölçüldü: 1.00:1, final denetim bulgusu İ1). ⚠️ Ezme `--nx-on-accent` DEĞİL **`currentColor`** ile yapılır: o token açık temada lime'dır, yani aynı hatayı öbür temada tekrarlardı. `currentColor` bileşenin kendi `--nx-dolgu-yazi` rengini izler ve kendini onarır. Liste: components.css §LİME DOLGU İÇİNDEKİ İKONUN AKSAN YOLU + ekran dosyaları. */ --nx-accent: var(--nx-accent-on); transition: transform var(--nx-dur-fast) var(--nx-ease); } /* -------------------------------------------------------------------------- İKİ KADEMELİ GERİ BİLDİRİM (Efe kararı, 21 Tem 2026) HOVER → sakin pop. Yalnız "buraya dokunulabilir" sinyali; ikonun kimliğini harcamaz, uzun listelerde yormaz. TIKLAMA → ikonun KENDİ özel animasyonu (zil sallanır, tik çizilir…). Kişilik burada ortaya çıkar, yani kullanıcı eylemi karşılığında. Pop SARMALAYICIDA uygulanır, SVG'de değil — çünkü bazı özel animasyonlar doğrudan `svg` öğesini ölçekliyor (`.i-close.play svg` gibi). İki farklı DOM katmanında oldukları için transform'lar ÇARPIŞMAZ, iç içe geçerek birleşir (kompozit olur): sarmalayıcı 1.12'de sabit durur, ikon kendi jestini onun içinde yapar. ⚠️ Burada bir hata yapılmıştı: pop kuralına `:not(.play)` konmuştu, yani tıklama anında sarmalayıcı 1.12'den 1.0'a çekiliyordu — tam da özel animasyon başlarken. İki hareket birbirini iptal ediyor, "zıplama" hissi veriyordu (Efe bildirdi, 21 Tem 2026). `:not(.play)` kaldırıldı; artık pop, animasyon boyunca sabit kalır ve hareketler birbirini TAMAMLAR. -------------------------------------------------------------------------- */ /* Pop, İÇİNDE BULUNDUĞU etkileşimli kabın hover'ıyla da tetiklenir — yalnız ikonun 24px'lik alanıyla değil (Efe bildirdi, 21 Tem 2026: tıklama kap genelinden tetikleniyordu ama hover hâlâ ikona nişan istiyordu; tutarsızdı). Kap listesi ikon.js'teki ETKILESIMLI ile AYNI tutulur — biri değişirse öbürü de değişmeli. Kapta birden çok ikon varsa hepsi poplar: kap tek bir eylemdir, ikonları birlikte "dokunulabilir" sinyali verir. */ /* AVATAR DA POPLAR (Efe kararı, 21 Tem 2026): gezinmede profil sekmesi ikon değil fotoğraf taşıyor — üç ikon poplarken dördüncünün sabit durması eksiklik hissettiriyordu. Görsel taşıyan her öğe (ikon VE avatar) kabın hover'ında aynı popu alır. (Rail'deki etiket-gizleme istisnasıyla aynı mantık: .nx-ico ve .nx-avatar "görsel" sınıfıdır, birlikte davranır.) */ @media (hover: hover) and (pointer: fine) { .nx-ico:hover, :is(button, a, [role="button"], label, summary, .nx-icon-btn, .nx-card--tiklanabilir):hover :is(.nx-ico, .nx-avatar) { transform: scale(1.12); } } /* Basma anında hafif küçülme; bırakınca hover ölçeğine döner */ .nx-ico:active, :is(button, a, [role="button"], label, summary, .nx-icon-btn, .nx-card--tiklanabilir):active :is(.nx-ico, .nx-avatar) { transform: scale(0.94); } /* Avatar'ın pop geçişi — yalnız etkileşimli kap içindeyken (global avatar'a transition bulaştırılmaz) */ :is(button, a, [role="button"], label, summary, .nx-icon-btn, .nx-card--tiklanabilir) .nx-avatar { transition: transform var(--nx-dur-fast) var(--nx-ease); } /* BOYUT ÖLÇEĞİ (Efe kararı, 21 Tem 2026: "ikonlar genel olarak ufak, büyüt"): `--sm` 16→18px'e çıkarıldı (rozet/ipucu gibi metin-içi yerler); GEZİNME (yan menü, tab bar) küçük boy KULLANMAZ, varsayılan 24px alır — Material navigasyon ikonunu 24dp ister, 16px orada gerçekten siliniyordu. ⚠️ Boylar token'dan gelir (`--nx-ikon-*`, tokens.css §NESNE BOYU MERDİVENLERİ) — literal px YAZILMAZ. Efe kuralı, 31 Tem 2026: her ikon/obje ölçeklenebilir olmalı, CTO native için tek yerden küçültebilmeli. ⚠️⚠️ SVG'ler `width="24" height="24"` ÖZNİTELİĞİ taşır (ikonlar.js üretiyor). Bu kural düşerse ikonlar sessizce o özniteliğe geri düşer ve 24px'te göründükleri için hata FARK EDİLMEZ — token'a bağlılık ise kopar. Ölçüldü (31 Tem): bu blok bir kez kapanmamış yorumla yutulmuştu, 33 ikonun 22'si knob'a tepkisiz kalmıştı. Kuralın canlı olduğunu sınamanın yolu boy ölçmek DEĞİL, token'ı değiştirip tepki veriyor mu bakmaktır. */ .nx-icon { width: var(--nx-ikon-md); height: var(--nx-ikon-md); flex: none; vertical-align: middle; } .nx-icon--sm { width: var(--nx-ikon-sm); height: var(--nx-ikon-sm); } .nx-icon--lg { width: var(--nx-ikon-lg); height: var(--nx-ikon-lg); } /* Eksik ikon göstergesi — sessizce kaybolmasın, görünür hata versin */ .nx-ico-yok { display: inline-grid; place-items: center; width: var(--nx-ikon-md); height: var(--nx-ikon-md); border: 1px dashed var(--nx-danger); border-radius: var(--nx-radius-sm); color: var(--nx-danger); font-size: 14px; font-weight: 700; } /* -------------------------------------------------------------------------- Tıklanabilir ikon düğmesi — native dokunma hedefi en az 44px -------------------------------------------------------------------------- */ /* ⚠️ `hidden` özniteliğini geri kazan (denetim bulgusu, Efe onayı 27 Tem 2026) Aşağıdaki `display: inline-flex` bir YAZAR kuralıdır ve tarayıcının `[hidden] { display: none }` UA kuralını ezer → gizlenmesi gereken ikon düğmeleri görünür kalır (hub'da geri oku duruyordu). Bu satır olmadan `btn.hidden = true` sessizce çalışmaz. */ .nx-icon-btn[hidden] { display: none; } .nx-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--nx-tap-min); min-height: var(--nx-tap-min); background: none; border: 0; padding: 0; cursor: pointer; color: var(--nx-text); border-radius: var(--nx-radius-full); /* `transform` BU LİSTEDE OLMAK ZORUNDA: ölçek sözleşmesi tokens.css'te tanımlı ama bu dosya ondan SONRA yükleniyor; buradaki `transition` oradakini ezer ve transform'suz bırakırsa hover ölçeği zıplar. */ transition: background var(--nx-dur-fast) var(--nx-ease), color var(--nx-dur-fast) var(--nx-ease), transform var(--nx-dur-fast) var(--nx-ease); } @media (hover: hover) and (pointer: fine) { /* Zemin değişiyorsa metin/ikon rengi de tanımlanır (Efe kuralı) */ .nx-icon-btn:hover { background: var(--nx-surface-2); color: var(--nx-text); } } .nx-icon-btn:active { background: var(--nx-surface-3); } .nx-icon-btn:focus-visible { outline: 2px solid var(--nx-accent-on); outline-offset: 2px; } /* -------------------------------------------------------------------------- TEK SEFER OYNATMA Kaynak animasyon dosyası `infinite` döngü kullanır (vitrin için tasarlanmış). Üründe ikon hover/dokunma ile BİR KEZ oynamalı. Bu dönüşüm `ikon-animasyon-tekseferlik.css` dosyasında yapılır — süreler ORANTILI kısaltılır, böylece kaynağın kasıtlı süre farkları (2.4s vs 3s vs 2.6s) ve stagger kademeleri korunur. Toptan tek-süre dayatmak bu ilişkileri bozuyordu (marka denetçisi 21 Tem 2026'da yakaladı). İSTİSNA: `spinner` bir yükleniyor göstergesidir, sürekli döner. -------------------------------------------------------------------------- */ .nx-ico.play * { animation-fill-mode: both; } @media (prefers-reduced-motion: reduce) { .nx-ico, .nx-ico * { animation: none !important; transition: none !important; } /* `transform` bir geçiş değil durum stilidir — yukarıdaki `transition:none` onu KAPATMAZ, yalnız yumuşatmayı alır ve hareket ani sıçramaya döner. Bu yüzden ölçek durumları ayrıca sıfırlanır. `!important` taban kuralı, kap-hover dahil TÜM durum seçicilerini bastırır. Avatar da pop aldığı için aynı sıfırlamaya dahildir. */ .nx-ico, .nx-avatar { transform: none !important; } }