/* =========================================================== BENGİ KÜLTÜR: Hareket Katmanı style.css'teki --egri / --sure değişkenlerini kullanır. İki kural: 1. Hareket her zaman OPSİYONELDİR. prefers-reduced-motion açıksa dosyanın tamamı devre dışı kalır (en altta). 2. Hiçbir animasyon içeriği gizli bırakmaz. JS çalışmazsa .canlan sınıfı hiç eklenmese bile içerik görünür kalır (html.js olmadan görünürlük varsayılan). =========================================================== */ /* ---------- 1. Sayfa girişi ---------- */ @keyframes bgSayfaGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } html.js body { animation: bgSayfaGir var(--sure-yavas) var(--egri) both; } /* ---------- 2. Kaydırınca ortaya çıkma (scroll reveal) ---------- */ /* JS yoksa hiçbir şey gizlenmez; .js sınıfı 'e JS tarafından eklenir */ html.js [data-canlan] { opacity: 0; transform: translateY(18px); transition: opacity var(--sure-yavas) var(--egri), transform var(--sure-yavas) var(--egri); will-change: opacity, transform; } html.js [data-canlan="soldan"] { transform: translateX(-22px); } html.js [data-canlan="sagdan"] { transform: translateX(22px); } html.js [data-canlan="olcek"] { transform: scale(.965); } html.js [data-canlan].gorundu { opacity: 1; transform: none; } /* Kart ızgaralarında sıralı gecikme (stagger) */ html.js [data-canlan-grup] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--sure-yavas) var(--egri), transform var(--sure-yavas) var(--egri); } html.js [data-canlan-grup].gorundu > * { opacity: 1; transform: none; } html.js [data-canlan-grup].gorundu > *:nth-child(1) { transition-delay: 0ms; } html.js [data-canlan-grup].gorundu > *:nth-child(2) { transition-delay: 70ms; } html.js [data-canlan-grup].gorundu > *:nth-child(3) { transition-delay: 140ms; } html.js [data-canlan-grup].gorundu > *:nth-child(4) { transition-delay: 210ms; } html.js [data-canlan-grup].gorundu > *:nth-child(5) { transition-delay: 280ms; } html.js [data-canlan-grup].gorundu > *:nth-child(6) { transition-delay: 350ms; } html.js [data-canlan-grup].gorundu > *:nth-child(7) { transition-delay: 420ms; } html.js [data-canlan-grup].gorundu > *:nth-child(8) { transition-delay: 490ms; } html.js [data-canlan-grup].gorundu > *:nth-child(n+9) { transition-delay: 540ms; } /* Tablo satırlarında transform tarayıcılar arasında güvenilir değil (bazı motorlar üzerinde yok sayıyor), o yüzden burada sadece opaklık kullanıyoruz. */ html.js tbody[data-canlan-grup] > tr { transform: none; transition: opacity var(--sure) var(--egri); } html.js tbody[data-canlan-grup].gorundu > tr { transform: none; } /* ---------- 3. Kartlar ---------- */ .etkinlik-listesi { display: block; } .issue-card, .post-card, .author-card, .panel-card, .referans-kart, .eser-kart, .uye-kart, .etkinlik-kart, .ist-kart, .rozet-kart, .kural-kart, .mesaj-liste-item { transition: transform var(--sure) var(--egri), box-shadow var(--sure) var(--egri), border-color var(--sure) var(--egri); } @media (hover: hover) { .issue-card:hover, .post-card:hover, .author-card:hover, .panel-card:hover, .eser-kart:hover, .uye-kart:hover, .etkinlik-kart:hover, .ist-kart:hover, .mesaj-liste-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--adaci-300); } } /* Kapak görselleri hafifçe yakınlaşsın */ .eser-kart img, .post-card img, .issue-card img { transition: transform var(--sure-yavas) var(--egri); } @media (hover: hover) { .post-card:hover img, .issue-card:hover img, .eser-kart:hover img { transform: scale(1.035); } } .post-card, .issue-card, .eser-kart { overflow: hidden; } /* ---------- 4. Butonlar ---------- */ .btn { position: relative; overflow: hidden; transition: background var(--sure-hizli) var(--egri-yumusak), border-color var(--sure-hizli) var(--egri-yumusak), color var(--sure-hizli) var(--egri-yumusak), transform var(--sure-hizli) var(--egri), box-shadow var(--sure) var(--egri); } @media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(47,52,36,.55); } } .btn:active { transform: translateY(1px); box-shadow: none; transition-duration: .05s; } /* Tıklamada dalga (ripple): JS konumu ayarlar */ .btn .dalga { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .28; pointer-events: none; animation: bgDalga .55s var(--egri) forwards; } @keyframes bgDalga { to { transform: scale(2.6); opacity: 0; } } /* ---------- 5. Navigasyon ---------- */ .main-nav a, .uye-nav a.sekme { position: relative; transition: color var(--sure-hizli) var(--egri-yumusak), background var(--sure-hizli) var(--egri-yumusak); } .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform var(--sure) var(--egri); } .main-nav a.active::after { transform: scaleX(1); transform-origin: left; } @media (hover: hover) { .main-nav a:hover::after { transform: scaleX(1); transform-origin: left; } } /* Buton görünümlü nav öğelerinde alt çizgi istemiyoruz */ .main-nav a.btn::after, .main-nav a.nav-user::after { display: none; } .uye-nav a.sekme { transition: background var(--sure-hizli) var(--egri-yumusak), color var(--sure-hizli) var(--egri-yumusak), transform var(--sure-hizli) var(--egri); } @media (hover: hover) { .uye-nav a.sekme:hover { transform: translateY(-1px); } } /* Üst bar kaydırınca inceleşsin */ .site-header, .uye-nav { transition: padding var(--sure) var(--egri), box-shadow var(--sure) var(--egri), background var(--sure) var(--egri); } .site-header.kaydirildi, .uye-nav.kaydirildi { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(47,52,36,.5); } .site-header .brand-mark, .uye-nav .brand img { transition: height var(--sure) var(--egri), transform var(--sure) var(--egri); } .site-header.kaydirildi .brand-mark { height: 36px; } @media (hover: hover) { .brand:hover .brand-mark img, .uye-nav .brand:hover img { transform: rotate(-3deg) scale(1.06); } } /* ---------- 6. Formlar ---------- */ input, textarea, select { transition: border-color var(--sure-hizli) var(--egri-yumusak), box-shadow var(--sure-hizli) var(--egri-yumusak), background var(--sure-hizli) var(--egri-yumusak); } input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px var(--blue-50); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); } /* ---------- 7. Bildirim / uyarı şeritleri ---------- */ @keyframes bgKay { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .uyari, .bilgi, .hata, .basari, .flash, .devam-serit, .mesaj-kutu { animation: bgKay var(--sure) var(--egri) both; } /* Rozet belirişi */ @keyframes bgPat { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } .rozet, .rozet-kart, .etiket-pill, .eser-tur-rozet, .karsilikli-rozet { animation: bgPat .45s var(--egri) both; } .etiket-pill { transition: transform var(--sure-hizli) var(--egri); } @media (hover: hover) { .etiket-pill:hover { transform: translateY(-2px); } } /* ---------- 8. Avatar ve profil ---------- */ .uye-kart img, .referans-kart img, .mesaj-liste-item img { transition: transform var(--sure) var(--egri), box-shadow var(--sure) var(--egri); } @media (hover: hover) { .uye-kart:hover img { transform: scale(1.07); } } /* ---------- 9. Yükleniyor durumları ---------- */ @keyframes bgParilti { from { background-position: -420px 0; } to { background-position: 420px 0; } } .iskelet { background: linear-gradient(90deg, var(--blue-50) 0%, var(--adaci-100) 45%, var(--blue-50) 90%); background-size: 420px 100%; animation: bgParilti 1.25s linear infinite; border-radius: var(--radius-sm); min-height: 14px; } @keyframes bgDon { to { transform: rotate(360deg); } } .donen { width: 18px; height: 18px; border: 2px solid var(--blue-100); border: 2px solid color-mix(in srgb, var(--blue) 30%, transparent); border-top-color: var(--blue); border-radius: 50%; animation: bgDon .7s linear infinite; display: inline-block; } /* Yükleme çubuğu (parçalı dosya yüklemede kullanılıyor) */ .yukleme-cubugu > span { transition: width var(--sure) var(--egri-yumusak); } /* ---------- 10. Modal / açılır pencere ---------- */ @keyframes bgModalGir { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .gorunum-panel { animation: bgModalGir var(--sure) var(--egri) both; } /* ---------- 10b. Boş durum ---------- */ /* İçerik yokken gösterilen satırlar da sessizce belirsin, ekrana aniden düşmesin. */ @keyframes bgBosDurum { from { opacity: 0; } to { opacity: .95; } } .bos-durum { animation: bgBosDurum .5s var(--egri-yumusak) .1s both; } /* =========================================================== FAZ 1: Kütüphane hareket katmanı Buradaki animasyonlar Faz 1'de TANIMLANIYOR ama çoğu henüz hiçbir sayfada KULLANILMIYOR. Kullanacakları bileşenler (fiş kartı, mühürler, raflar) sonraki fazlarda geliyor. Şimdiden yazılmalarının sebebi: her faz kendi versiyonunu uydurmasın, tek kaynak olsun. =========================================================== */ /* ---------- Mürekkep beliriş ---------- Mürekkebin kağıda oturması hissi. DİKKAT: filter:blur pahalı bir özellik, her karede yeniden çizim tetikliyor. Bu yüzden SADECE tek seferlik giriş animasyonu olarak kullanılacak: - asla transition ile sürekli - asla hover'da - asla döngüde - aynı anda birkaç elementten fazlasında değil Bittiğinde filter kalmıyor (forwards yerine both + son kare temiz), kalıcı katman oluşmuyor. */ @keyframes bgMurekkep { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } } .murekkep-belir { animation: bgMurekkep var(--sure-yavas) var(--egri-yumusak) both; } /* ---------- Damga basılma ---------- Mühür kazanıldığında ve kayıt tarihi damgası ilk göründüğünde. Konfetinin yerini alıyor (konfeti kütüphane temasına yabancı). */ @keyframes bgDamga { 0% { opacity: 0; transform: scale(1.6) rotate(-24deg); } 60% { opacity: .9; transform: scale(.96) rotate(-6deg); } 100% { opacity: .82; transform: scale(1) rotate(-8deg); } } .damga-bas { animation: bgDamga .45s var(--eg-yayli) both; } /* Eğik durmayan damga varyantı için ayrı kare seti */ @keyframes bgDamgaDuz { 0% { opacity: 0; transform: scale(1.6) rotate(-16deg); } 60% { opacity: .9; transform: scale(.96) rotate(4deg); } 100% { opacity: .82; transform: scale(1) rotate(0deg); } } .damga-bas.malzeme-damga-duz { animation: bgDamgaDuz .45s var(--eg-yayli) both; } /* ---------- Fiş öne kayma ---------- Masadaki eser fişleri normalde hafif eğik duruyor. Hover'da düzleşip öne geliyor: "fişi çekip önüne aldın". */ .fis-kart { transition: transform var(--sure) var(--egri), box-shadow var(--sure) var(--egri); } @media (hover: hover) { .fis-kart:hover { transform: translateY(-6px) rotate(0deg) scale(1.03); z-index: 2; } } /* ---------- Raf çekme ---------- Bir etikete tıklanınca içerik yandan kayarak geliyor, sanki rafı çekmişsin. */ @keyframes bgRafCek { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } .raf-cek { animation: bgRafCek var(--sure) var(--egri) both; } /* ---------- Kağıt düşme ---------- Yeni not, yorum ya da hikaye sayfası eklendiğinde yukarıdan hafif dönerek yerine oturuyor. */ @keyframes bgKagitDus { from { opacity: 0; transform: translateY(-22px) rotate(5deg); } to { opacity: 1; transform: none; } } .kagit-dus { animation: bgKagitDus .5s var(--eg-yayli) both; } /* ---------- 11. Sayfa içi yumuşak kaydırma ---------- */ html { scroll-behavior: smooth; } /* ---------- 12. Erişilebilirlik: hareketi azalt ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.js [data-canlan], html.js [data-canlan-grup] > * { opacity: 1 !important; transform: none !important; } /* Faz 1 katmani: evrensel kural sureleri sifirliyor ama blur ve donmus transform kalabiliyor, acikca temizliyoruz. */ .murekkep-belir { filter: none !important; opacity: 1 !important; } .damga-bas, .kagit-dus, .raf-cek { opacity: 1 !important; transform: none !important; } .fis-kart:hover { transform: none !important; } }