/* ============================================================================ Site davranış stilleri — Tailwind utility'lerinin kapsamadığı animasyon, nav durumu ve ikon düzeltmeleri. Süre/easing değerleri tokens.css'ten gelir (magic number yok). Tailwind sınıf isimleriyle çakışmaz. ============================================================================ */ /* --- Hero giriş animasyonu (PARITY madde B: y:20 → 0, 0.7s, kademeli) ------ */ @keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-rise { animation: hero-rise var(--dur-hero) var(--ease-reveal) both; } /* --- Reveal-on-scroll (PARITY madde D) ------------------------------------- Başlangıç gizliliği yalnızca html.js iken uygulanır: JS yoksa içerik daima görünür. Gecikme/y/süre değişkenleri reveal.js tarafından data-* özniteliklerinden set edilir. Animasyon bitince reveal.js data-reveal özniteliğini kaldırır → tema renk geçişi kuralı geri gelir. */ html.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y, 16px)); transition: opacity var(--reveal-dur, var(--dur-reveal)) var(--ease-reveal), transform var(--reveal-dur, var(--dur-reveal)) var(--ease-reveal); transition-delay: var(--reveal-delay, 0s); } html.js [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* --- Nav link durumları (aktif section vurgusu nav.js'ten) ----------------- */ .nav-link { color: var(--text-muted); } .nav-link:hover { color: var(--text); } .nav-link[aria-current="location"] { color: var(--signal); } /* --- İkon düzeltmesi: FA6 Free'de arrow-up-right yok — arrow-right −45°. (Adım 4 onaylı ikon sapması; dönüş Lucide ArrowUpRight yönünü verir.) ----- */ .icon-up-right { transform: rotate(-45deg); } /* --- FA display çakışması --------------------------------------------------- FA, ikon display'ini KATMANSIZ kuralla set eder; Tailwind v4 utility'leri @layer içinde kaldığından .hidden FA ikonlarında etkisiz kalıyordu. Bu iki blok FA CSS'inden SONRA yüklendiği için kazanır. */ .fa-solid.hidden { display: none; } /* Tema toggle ikonları: koyu temada Güneş (açığa geç), açık temada Ay görünür. Görünürlük JS state'i değil 'e bağlı (Next paritesi). */ [data-theme-toggle] .icon-sun { display: none; } [data-theme="dark"] [data-theme-toggle] .icon-sun { display: inline-block; } [data-theme="dark"] [data-theme-toggle] .icon-moon { display: none; }