/* ========================================================================== Nextern — İkon animasyonları: BÜTÜNLÜK katmanı SORUN (Efe bildirdi, 21 Tem 2026): bazı ikonlar tıklandığında KESİK başlıyor — önce ani bir sıçrama (kayboluş/kayma), sonra yumuşak bir bitiş. Ölçüm: 92 keyframe'in 12'sinde 0% durumu duruş halinden FARKLI. Bu 12 keyframe 10 ikonu etkiliyor: check, badge, checklist, shield, reference-seal, trend-up, location, match, pin, battery. NEDEN: Kaynak animasyonlar sonsuz DÖNGÜ (vitrin) için tasarlanmış. Döngüde 0%'a dönüş görünmez çünkü tekrar başlıyor. Tek sefer oynatınca 0%'daki "giriş" durumu ani bir sıçrama olarak görünür hale geliyor. İLKE (Apple HIG / SF Symbols — araştırma: 04_Strateji_ve_Analiz/_Taslaklar/Ikon_Mikroetkilesim_ARASTIRMA.md): Bir animasyon DURUM DEĞİŞTİRMİYORSA duruş halinden başlayıp duruş haline dönmelidir (round-trip). Kalıcı geçiş (çizilme, belirme) yalnız gerçek durum değişiminde kullanılır — bizim tıklama geri bildirimimiz durum değiştirmiyor. ÇÖZÜM: Bu 12 keyframe round-trip jestlere çevrildi. Kaynak dosyaya (`ikon-animasyon.css`) DOKUNULMADI; burada aynı adla yeniden tanımlandılar, CSS'te sonra gelen tanım kazanır. ÇİZİLME animasyonları (draw*) genel tıklama geri bildiriminden çıkarıldı — zaten çizili duran bir ikonu silip yeniden çizmek "blink" yaratıyor. Yerlerine ikona uygun jestler kondu; çizilme, Faz 1'de gerçek durum değişimleri için (işaretlenmedi → işaretlendi) saklanıyor. YÜKLEME SIRASI: ikon-animasyon.css → BU DOSYA → ikon-animasyon-tekseferlik.css → ikon.css ========================================================================== */ /* -------------------------------------------------------------------------- GİRİŞ TİPİ → ROUND-TRIP JEST -------------------------------------------------------------------------- */ /* match — iki chevron önce AYRILIR, sonra birleşir. Eski hali ±18px'ten görünmezden geliyordu. Yeni hali ikonun anlamını da güçlendiriyor: eşleşme, birbirine kavuşma. */ @keyframes mLeft { 0%, 100% { transform: translateX(0); } 38% { transform: translateX(-5px); } } @keyframes mRight { 0%, 100% { transform: translateX(0); } 38% { transform: translateX(5px); } } /* location — iğne kalkar ve yerine oturur (eskiden yukarıdan düşüyordu) */ @keyframes locdrop { 0%, 100% { transform: translateY(0); } 38% { transform: translateY(-4px); } } /* pin — aynı jest, hafif eğilmeyle */ @keyframes pindrop { 0%, 100% { transform: translateY(0) rotate(0); } 38% { transform: translateY(-4px) rotate(-7deg); } } /* trend-up ok başı — eskiden görünmezden beliriyordu. Yeni: trend yönünde (sağ-yukarı) bir adım atıp döner. */ @keyframes trendhead { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(2px, -2px); } } /* battery — dolum önce azalır sonra dolar (eskiden %15'ten doluyordu). Şarj olma hissini korur, sıçramaz. */ @keyframes batfill { 0%, 100% { transform: scaleX(1); } 40% { transform: scaleX(.5); } } /* -------------------------------------------------------------------------- ÇİZİLME TİPİ → İKONA UYGUN ROUND-TRIP JEST Beşi de aynı jesti almasın diye her birine karakterine uygun hareket verildi. -------------------------------------------------------------------------- */ /* check — kararlı bir onay vuruşu. (İkon zaten `.i-check.play svg` kuralıyla lime'a dönüyor; jest onu tamamlıyor.) */ @keyframes draw { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } } /* badge / shield — mühür basma hissi: hafif dönerek bastırır */ @keyframes draw12 { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.14) rotate(-5deg); } } /* checklist — iki tik sırayla onaylanır (gecikme aşağıda) */ @keyframes cldraw { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } } .nx-ico.i-checklist.play .t2 { animation-delay: .06s; } /* reference-seal — mühür oturur */ @keyframes refdraw { 0%, 100% { transform: scale(1); } 42% { transform: scale(1.2); } } /* trend-up çizgisi — ok başıyla aynı yöne, ondan biraz önce hareket eder */ @keyframes trenddraw { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(1.5px, -1.5px); } } /* -------------------------------------------------------------------------- Çizilme artık kullanılmadığı için dash özellikleri duruş halinde SABİTLENİR. Aksi halde kaynak dosyadaki `stroke-dashoffset` başlangıç değerleri ikonu yarı çizili bırakabilirdi. -------------------------------------------------------------------------- */ .nx-ico .draw, .nx-ico .tick, .nx-ico .t1, .nx-ico .t2, .nx-ico .nx-accent { stroke-dashoffset: 0; } /* -------------------------------------------------------------------------- GÖZ İKONLARI (Efe bildirdi, 21 Tem 2026) -------------------------------------------------------------------------- */ /* eye — eski hali iki ayrı şekli opaklıkla değiştiriyordu; şekiller çok farklı olduğu için göz "ışınlanarak" blinkliyordu. Yeni: açık göz dikey olarak KAPANIR (göz kapağı gibi), tam kapandığı anda kapalı göz belirir. İki şekil o anda birbirine benzediği için geçiş sürekli görünür — ışınlanma kaybolur. */ @keyframes eOpen { 0%, 100% { transform: scaleY(1); opacity: 1; } 46%, 54% { transform: scaleY(.06); opacity: 0; } } @keyframes eClosed { 0%, 100% { transform: scaleY(.4); opacity: 0; } 46%, 54% { transform: scaleY(1); opacity: 1; } } /* eye-off — eski hali eğik çizgiyi silip yeniden çiziyor, sonra tekrar siliyordu ("bi siliniyor geliyor siliniyor"). Eğik çizgi bu ikonun KİMLİĞİ, kaybolmamalı. Yeni: çizgi hep çizili durur; göz kısılır, çizgi hafifçe vurgulanır. */ .nx-ico.i-eye-off .slash { stroke-dashoffset: 0; } @keyframes blinkdraw { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } } .nx-ico.i-eye-off.play .lid, .nx-ico.i-eye-off.play .iris { animation: nx-goz-kis .5s var(--nx-ease) 1; } @keyframes nx-goz-kis { 0%, 100% { transform: scaleY(1); opacity: 1; } 45% { transform: scaleY(.55); opacity: .55; } } /* ========================================================================== DURUM KALICILIĞI — `.is-on` (Efe isteği, 21 Tem 2026) "Bir şeyi yıldızladıysam o hep yeşil kalabilecek mi?" Evet. Sarmalayıcıya `.is-on` sınıfı eklendiğinde ikon KALICI olarak dolu/ aktif görünür. Bu, Apple HIG'in ayrımına da uyuyor: geçici geri bildirim round-trip'tir (duruş haline döner), DURUM DEĞİŞİMİ ise kalıcıdır. Renk `--nx-accent-on` üzerinden gelir: koyu temada lime, açık temada ink (marka kuralı gereği açık zeminde lime geniş alan olamaz). ========================================================================== */ .nx-ico.is-on { color: var(--nx-accent-on); } /* Dolabilen şekiller gerçekten dolar */ /* Sınıf adları ikon SVG'lerinden doğrulandı: star→.star · bookmark→.bm · heart→.hrt · thumbs-up→.thumb · flag→.wave */ .nx-ico.is-on .star, .nx-ico.is-on .bm, .nx-ico.is-on .hrt, .nx-ico.is-on .thumb, .nx-ico.is-on .wave { fill: var(--nx-accent-on); stroke: var(--nx-accent-on); } /* Durum değişimi ANINDA bir kez vurgulanır, sonra kalıcı halde kalır */ .nx-ico.is-on.play { animation: nx-durum-onay .35s var(--nx-ease) 1; } @keyframes nx-durum-onay { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } } /* ÖNEMLİ: `.is-on` iken ikonun KENDİ dolgu animasyonu susturulur. Aksi halde (örn. `starfill`) round-trip olduğu için yıldızı doldurup tekrar BOŞALTIYOR, animasyon bitince `.is-on` kuralı devreye girip yeniden dolduruyordu — gözle bir yanıp sönme oluşuyordu. Durum değişiminde geri bildirimi sarmalayıcının onay vuruşu taşır. */ .nx-ico.is-on.play .star, .nx-ico.is-on.play .bm, .nx-ico.is-on.play .hrt, .nx-ico.is-on.play .thumb, .nx-ico.is-on.play .wave { animation: none !important; } @media (prefers-reduced-motion: reduce) { .nx-ico.is-on.play { animation: none; } } /* ========================================================================== YAN PANEL İKONU (`sidebar`) — DURUMA DUYARLI MENÜ DÜĞMESİ 🔴 KABUKTA ARTIK KULLANILMIYOR (13 Ağu 2026). Yan menü daraltma düğmesi kaldırıldı (Efe kararı, A şıkkı: rail tek biçimli) ⇒ `kabuk.js` bu ikonu `data-nx-durum` ile basmıyor. Aşağıdaki kurallar SİLİNMEDİ çünkü ölü değiller: bileşen kataloğu (`components.html`) ve doğrulama sayfaları hâlâ bu düğmeyi gösteriyor ve kurallar `[data-nx-durum]` ile korumalı — öznitelik yoksa hiç devreye girmiyorlar. ⚠️ Yani burada bir davranış görüyorsan kaynağı KABUK DEĞİL, katalogtur; gerçek ekranlarda böyle bir düğme yok. (Efe istekleri, 21 Tem 2026 — önce hamburger'di, sonra Efe kararıyla sete eklenen `sidebar` (panel) ikonuna geçildi: kapalıyken panel ikonu, açıkken MARKA X'İ görünür.) Mekanik: sarmalayıcı `data-nx-durum` taşır → ikon.js pointerdown'da `.is-on`u açar/kapar. Açık halde panel ikonu söner (sahneyi `--nx-logo-x` / .nx-menu-x'e bırakır — components.css); kapatınca geri gelir. Geçiş iki yönde de transition ile oynar. Round-trip çakışması (yıldız dolgusu dersi): ikonun kendi `.play` animasyonu duruma bağlı düğmede SUSTURULUR; geçişi transition taşır. (Durumsuz sidebar ikonu — vitrindeki — set animasyonunda kalır.) */ .i-sidebar[data-nx-durum] svg { transition: transform var(--nx-dur-slow) var(--nx-ease), opacity var(--nx-dur-slow) var(--nx-ease); } .i-sidebar[data-nx-durum].play .bolme { animation: none !important; } .i-sidebar.is-on svg { opacity: 0; transform: scale(.6); } /* Menü açıkken sarmalayıcının aksana boyanması (genel .is-on kuralı) BURADA İSTENMEZ: bu bir "beğendim/yıldızladım" durumu değil, geçici panel hali — ve görünen şey zaten kendi renklerini taşıyan marka X'i. */ .nx-ico.is-on.i-sidebar { color: inherit; }