/* Bileşen: Hareket ve efektler Ortak animasyon katmanı — ana sayfa, hakkımızda ve iletişim bunu paylaşır. TEMEL KURAL: Hiçbir animasyon içeriği GİZLEMEZ. JavaScript çalışmasa ya da kullanıcı hareketi kapatmış olsa bile her şey görünür kalır. Bu yüzden başlangıç durumu "görünür", animasyon ise ona eklenen bir katman. */ /* --- Görünüme girince beliren öğeler ---------------------------------- */ /* JS yüklendiğinde üzerine ar-hareket eklenir. Sınıf yoksa hiçbir şey gizlenmez — bozuk JS boş sayfa bırakmaz. */ .ar-hareket [data-ar-belir] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ar-hareket [data-ar-belir].is-gorunur { opacity: 1; transform: none; } /* Sıralı gecikme — kartlar peş peşe belirsin. */ .ar-hareket [data-ar-gecikme="1"] { transition-delay: 0.08s; } .ar-hareket [data-ar-gecikme="2"] { transition-delay: 0.16s; } .ar-hareket [data-ar-gecikme="3"] { transition-delay: 0.24s; } .ar-hareket [data-ar-gecikme="4"] { transition-delay: 0.32s; } .ar-hareket [data-ar-gecikme="5"] { transition-delay: 0.40s; } /* --- Arka plan ışık kümeleri ------------------------------------------ */ .ar-sahne { position: relative; isolation: isolate; overflow: hidden; } .ar-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; will-change: transform; } .ar-orb--1 { top: -140px; left: -100px; width: 460px; height: 460px; background: radial-gradient(circle, var(--ar-midnight) 0%, transparent 68%); animation: ar-suzul 22s ease-in-out infinite; } .ar-orb--2 { right: -120px; bottom: -160px; width: 520px; height: 520px; background: radial-gradient(circle, #2f8f6b 0%, transparent 68%); animation: ar-suzul 28s ease-in-out infinite reverse; } .ar-orb--3 { top: 30%; right: 18%; width: 300px; height: 300px; background: radial-gradient(circle, var(--ar-sky) 0%, transparent 70%); opacity: 0.28; animation: ar-suzul 34s ease-in-out infinite; } @keyframes ar-suzul { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(42px, -28px) scale(1.08); } 66% { transform: translate(-30px, 24px) scale(0.94); } } /* --- Sayaç ------------------------------------------------------------ */ .ar-sayac { font-variant-numeric: tabular-nums; } /* --- Sonsuz şerit ----------------------------------------------------- */ .ar-serit { display: flex; gap: var(--ar-space-lg); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ar-serit__ray { display: flex; flex-shrink: 0; gap: var(--ar-space-lg); align-items: center; animation: ar-kaydir 38s linear infinite; } .ar-serit:hover .ar-serit__ray { animation-play-state: paused; } @keyframes ar-kaydir { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* --- Kart parlaması --------------------------------------------------- */ .ar-parlak { position: relative; overflow: hidden; } .ar-parlak::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 26%) 50%, transparent 62%); transform: translateX(-100%); transition: transform 0.75s ease; pointer-events: none; } .ar-parlak:hover::after { transform: translateX(100%); } /* --- Yazı vurgusu ----------------------------------------------------- */ .ar-vurgu-metin { background: linear-gradient(120deg, var(--ar-sky) 0%, #2f8f6b 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } /* --- Erişilebilirlik -------------------------------------------------- Hareketi azalt tercihi AÇIKSA: süslemeler tamamen durur, içerik anında ve tam görünür olur. Bu bir "incelik" değil, vestibüler rahatsızlığı olan kullanıcılar için gerekliliktir. */ @media (prefers-reduced-motion: reduce) { .ar-hareket [data-ar-belir] { opacity: 1; transform: none; transition: none; } .ar-orb, .ar-serit__ray { animation: none; } .ar-parlak::after { display: none; } } /* ========================================================================= GENİŞLETİLMİŞ HAREKET KATMANI Aynı kural geçerli: hiçbir efekt içeriği kalıcı olarak gizlemez. ========================================================================= */ /* --- Kelime kelime açılan başlık ------------------------------------- */ .ar-kelimeler { /* Kelimeler satır kutusundan taşarken kırpılsın — aşağıdan yükselme etkisi ancak taşan kısım gizlenirse okunur. */ display: inline; } .ar-kelime { display: inline-block; overflow: hidden; vertical-align: bottom; } .ar-kelime > span { display: inline-block; will-change: transform; } /* Gradyanla boyanan öğe tek parça sarıldığında da yükselmeli. */ .ar-hareket .ar-kelime > .ar-vurgu-metin, .ar-hareket .ar-kelime > [data-ar-butun] { display: inline-block; transform: translateY(105%); transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--ar-sira, 0) * 55ms); } .ar-hareket .is-gorunur .ar-kelime > .ar-vurgu-metin, .ar-hareket .ar-kelime.is-gorunur > .ar-vurgu-metin, .ar-hareket .is-gorunur .ar-kelime > [data-ar-butun], .ar-hareket .ar-kelime.is-gorunur > [data-ar-butun] { transform: none; } .ar-hareket .ar-kelime > span { transform: translateY(105%); transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--ar-sira, 0) * 55ms); } .ar-hareket .is-gorunur .ar-kelime > span, .ar-hareket .ar-kelime.is-gorunur > span { transform: none; } /* --- Kaydırmaya bağlı yumuşak kayma ---------------------------------- */ .ar-parallax { will-change: transform; } /* --- İşaretçiyi takip eden eğim (yalnız fare) ------------------------- */ .ar-egim { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ar-egim__ic { transform: translateZ(38px); } /* --- Sayfa kaydırma ilerlemesi --------------------------------------- */ .ar-ilerleme { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--ar-oran, 0)); background: linear-gradient(90deg, var(--ar-sky), #2f8f6b); pointer-events: none; } /* --- Manyetik düğme --------------------------------------------------- */ .ar-manyetik { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* --- Hareketli renk ağı ---------------------------------------------- */ .ar-ag { position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: 0.55; background: radial-gradient(38% 46% at 22% 28%, #2f8f6b55 0%, transparent 62%), radial-gradient(42% 44% at 78% 34%, #4c5bd455 0%, transparent 62%), radial-gradient(46% 50% at 46% 82%, #7aa7ff44 0%, transparent 64%); filter: blur(38px); animation: ar-ag-kay 26s ease-in-out infinite alternate; } @keyframes ar-ag-kay { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -3%, 0) scale(1.07); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.03); } } /* --- Kenardan giren blok --------------------------------------------- */ .ar-hareket [data-ar-kaydir] { opacity: 0; transform: translateX(var(--ar-yon, 40px)); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--ar-sira, 0) * 70ms); } .ar-hareket [data-ar-kaydir].is-gorunur { opacity: 1; transform: none; } /* --- Ölçek ile beliren kart ------------------------------------------ */ .ar-hareket [data-ar-buyu] { opacity: 0; transform: scale(0.94) translateY(16px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--ar-sira, 0) * 70ms); } .ar-hareket [data-ar-buyu].is-gorunur { opacity: 1; transform: none; } /* --- Yapışkan bölüm --------------------------------------------------- */ .ar-yapiskan { position: sticky; top: 96px; } /* ========================================================================= MOBİL VE ERİŞİLEBİLİRLİK ========================================================================= */ /* Dokunmatik cihazda eğim ve parallax KAPALI: ikisi de işaretçi konumuna dayanıyor ve dokunmatikte ya hiç çalışmıyor ya da kaydırmayı takılmalı hale getiriyor. */ @media (hover: none), (width <= 780px) { .ar-egim { transform: none !important; } .ar-egim__ic { transform: none; } .ar-parallax { transform: none !important; } .ar-ag { /* Blur mobil GPU'da pahalı; yarıya indiriliyor. */ filter: blur(24px); animation-duration: 40s; } } @media (prefers-reduced-motion: reduce) { .ar-hareket .ar-kelime > span, .ar-hareket [data-ar-kaydir], .ar-hareket [data-ar-buyu] { opacity: 1; transform: none; transition: none; } .ar-ag, .ar-egim, .ar-manyetik { animation: none; transition: none; } .ar-ilerleme { display: none; } }