/* ========================================================================== arka-robot.css — imleci gecikmeli takip eden, jet itkisiyle uçan yoldaş NE Sayfanın İÇERİĞİNİN ARKASINDA uçan küçük bir robot. İmleci takip ediyor ama ona yapışmıyor. Gövdesinin altındaki motordan sürekli mavi/cyan bir jet alevi çıkıyor; alev robotun hızıyla uzayıp kısalıyor ve robot yattığında onunla birlikte yatıyor. Süs; hiçbir bilgi taşımıyor, hiçbir şeye tıklanmıyor. BU 3B DEĞİL Sitede Three.js yok ve çalışma zamanında model de yok: robot, Blender'da önceden render edilmiş 21 pozluk bir sprite (194 KB). Uzuv düzeyinde animasyon (kol, omuz, gövde burulması) düz bir sprite'ta ayrıştırılamaz. Gövde düzeyindeki hareketlerin tamamı ise dönüşümle yapılıyor ve aşağıdaki katman ayrımı bunun için var. DÖNÜŞÜMLERİN SAHİPLERİ AYRI — çakışmasınlar diye - `.arobot` : KONUM. `arka-robot.js` her karede `transform` yazıyor. - `.arobot-govde` : UÇUŞ (saf CSS, `translate`/`rotate` ÖZELLİKLERİ) + YATIŞ/EĞİM/ÇÖKME (betik, `transform`). Ayrı özellikler olduğu için ikisi üst üste biniyor, biri diğerini ezmiyor. - `.arobot-kare` : DÖNÜŞÜM YOK. Yalnızca `background-position` (poz) ve saf CSS parlaklık nabzı. Sprite eğrilmiyor, kırpılmıyor, bozulmuyor. İtki gövdenin İÇİNDE ve sprite'ın ARKASINDA: robot yattığında, ölçeği değiştiğinde ve süzüldüğünde alev onunla birlikte gidiyor; arkada olduğu için de bacakların arasından, motorun içinden çıkıyormuş gibi görünüyor — önde olsaydı ayakların üstünü boyardı. NEREDE ÇALIŞMAZ - Kaba işaretçi (dokunmatik): takip edilecek imleç yok, `arka-robot.js` hiç başlamıyor ve 194 KB'lık ızgara İNMİYOR. - `prefers-reduced-motion: reduce`: aynı şekilde hiç başlamıyor. - Betik yüklenmezse: öğe `opacity: 0` kalıyor, yani görünmüyor. ========================================================================== */ .arobot { position: fixed; left: 0; top: 0; /* Hücre 150x222; 104 px'te dpr 2 için 208 aygıt pikseli. */ width: 104px; aspect-ratio: 150 / 222; /* İÇERİĞİN ARKASINDA. Neden bunun tek başına yetmediği ve neyin eşlik ettiği dosyanın sonundaki KATMAN başlığında yazılı. */ z-index: -1; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease-out, ease); will-change: transform; /* Betik yokken de ekranın dışında dursun. */ transform: translate3d(-999px, -999px, 0); /* İTKİNİN DURUMA GÖRE ÖLÇÜSÜ. Değişkenle veriliyor çünkü alevin kendi kıpırtısı `scale`i sürekli oynatıyor; ölçüyü de oradan verseydim durum geçişi kıpırtıyı ezerdi. Böylece ölçü yumuşak geçiyor, kıpırtı bağımsız sürüyor. `arka-robot.js` uyanıkken bunları hıza göre her karede yeniden yazıyor; uykuda yazmayı bırakıyor ve aşağıdaki durum değerleri geçerli kalıyor. */ --itki-boy: .28; /* gövde yüksekliğinin katı */ --itki-en: 1; /* enin çarpanı */ --itki-parlak: 1; /* parlaklık çarpanı */ --itki-op: .95; } /* Betik ızgarayı indirip ilk konumu yazınca açılıyor. Doğrudan görünür yapsaydım, ızgara inene kadar boş bir kutu ekranda gezerdi. */ .arobot.is-acik { opacity: .86; } /* -------------------------------------------------------------------------- GÖVDE — uçuş İki ayrı ritim: dikey süzülme (4,7 sn) ve yalpa (6,3 sn). Süreler bilerek birbirinin katı DEĞİL; ortak katları dakikaları bulduğu için döngü gözle yakalanmıyor ve hareket "mekanik" değil "canlı" okunuyor. -------------------------------------------------------------------------- */ .arobot-govde { position: absolute; inset: 0; animation: arobot-suzul 4.7s ease-in-out infinite, arobot-yalpa 6.3s ease-in-out infinite; } @keyframes arobot-suzul { 0% { translate: 0 0; } 27% { translate: .8% -4.6%; } 52% { translate: -.5% -1.4%; } 78% { translate: -1% -5.4%; } 100% { translate: 0 0; } } @keyframes arobot-yalpa { 0% { rotate: -2.2deg; } 50% { rotate: 2.6deg; } 100% { rotate: -2.2deg; } } /* Uykuda nefes yavaşlıyor ve derinleşiyor. */ .arobot.is-uyku .arobot-govde { animation-duration: 7.6s, 10.4s; } .arobot-kare { position: absolute; inset: 0; background-repeat: no-repeat; /* IZGARA: 7 sütun (sağ-sol bakış) x 3 satır (yukarı-aşağı). Sitedeki 35 pozluk 564 KB'lık ızgaranın küçültülmüş ve seyreltilmiş hâli: yoldaş 104 px'te göründüğü için o çözünürlük gereksizdi. */ background-size: 700% 300%; background-position: 50% 50%; /* EMISSIVE NABIZ: robotun KENDİ ışıkları nefes alıyor. Arkasına ayrı bir hale koymadım — "robotun etrafında ekstra efekt" istenmiyor. Parlaklık çarpanı gövdedeki mavi/mor emissive parçaları öne çıkarıyor, beyaz kabuğu ise gözle fark edilmeyecek kadar. */ animation: arobot-nabiz 3.9s ease-in-out infinite; /* `transform` YOK: sprite'a artık dönüşüm yazılmıyor (hepsi gövdede), listede tutmak boşuna bir derleme katmanı ayırıyordu. */ will-change: background-position, filter; } @keyframes arobot-nabiz { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.07) saturate(1.1); } } .arobot-serit .arobot-kare { background-image: url("assets/robot/robot-yoldas.webp"); } /* -------------------------------------------------------------------------- VİZÖR SÖNMESİ — uyku Gözleri kapatmayı denemedim: gözler hücrenin yalnızca %7'si, 104 px'lik yoldaşta 7 piksel eder ve kapalı göz yayı görünmezdi (ölçüldü). Vizörün tamamı ise %44,7 x %27,5, yani ~46x38 px — okunur bir alan. Uykuda onu söndürüyorum: gözlerin parıltısı kayboluyor, robot "kapanmış" görünüyor. Konum hücrede ölçüldü (orta sütun, alt satır — aşağı bakan poz). -------------------------------------------------------------------------- */ .arobot-goz { position: absolute; left: 24.7%; top: 14.4%; width: 44.7%; height: 27.5%; border-radius: 46% 46% 54% 54% / 52% 52% 48% 48%; background: radial-gradient(ellipse at 50% 44%, rgba(9, 11, 26, .97) 0%, rgba(9, 11, 26, .90) 56%, rgba(9, 11, 26, 0) 100%); opacity: 0; transition: opacity 900ms var(--ease-out, ease); pointer-events: none; } .arobot.is-uyku .arobot-goz { opacity: 1; } /* ========================================================================== JET İTKİSİ ÇAPA ÖLÇÜLDÜ, TAHMİN EDİLMEDİ 21 pozun hepsinde bacakların merkezi ve alt ucu ölçüldü: yatayda hücrenin %49,8'i, dikeyde %94,7'si. Çapa %93,4'e konuyor — bir tık yukarı, çünkü alevle gövde arasında BOŞLUK kalmamalı; alev motorun içinden çıkıyormuş gibi görünmeli. ÜÇ KATMAN, ÜÇ AYRI RİTİM Tek katmanlı bir alev periyodik görünür. Burada üç katman var ve üçünün süresi birbirinin katı DEĞİL (0,52 / 0,67 / 0,83 sn). Bileşke, ortak katları dakikalara varan bir örüntü — yani gözle tekrar yakalanmıyor. Üstüne `arka-robot.js` uyanıkken boyu ve parlaklığı hıza göre modüle ediyor, dolayısıyla hareket ederken alev hiç aynı görünmüyor. BİÇİM — SİVRİLME GRADYANDAN, KIRPMADAN DEĞİL İki yol denedim ve ikisini de attım. `border-radius`: en ile boy birbirine yakın olduğu için alev damla değil YUVARLAK bir leke gibi çıkıyordu. `clip-path` ile konik bir çokgen: bu sefer sivriliyordu ama `filter: blur()` ÖNCE uygulanıp kırpma SONRA geldiği için yumuşak kenarlar düz çizgi hâlinde kesiliyordu — istenmeyen "keskin katı koni" tam olarak buydu. Şimdi biçim gradyanın kendisinden geliyor: tepeye oturtulmuş dar bir elips merkezli radyal gradyan. Genişlik yukarıda en fazla; aşağı ve yanlara doğru saydama gidiyor. Hiçbir yerde kenar YOK, dolayısıyla kesilecek kenar da yok. Üstüne `blur`, `scale` ve `skew` ile sürekli kıvrılıyor. KARIŞIM Hale `screen` ile karışıyor: gerçek bir alevin çevresine vurduğu ışık toplamsaldır. Çekirdek ve dış alev normal karışımda; toplamsal olsalardı açık temada beyaza doyup kaybolurlardı. ========================================================================== */ .arobot-itki { position: absolute; left: 49.8%; top: 93.4%; /* Dar ve uzun: en ile boy birbirine yakın olunca alev leke gibi duruyordu. 24% + daha uzun boy aralığı jet gibi okunuyor. */ width: 24%; /* Boy değişkenden: hız arttıkça uzuyor. Gövde yüksekliğinin katı. */ height: calc(var(--itki-boy) * 100%); translate: -50% 0; /* Uzama AŞAĞI doğru olsun: alev motorda sabit kalıyor, ucu uzuyor. */ transform-origin: 50% 0; scale: var(--itki-en) 1; opacity: var(--itki-op); pointer-events: none; /* Ani açılıp kapanma olmasın: betik değeri sıçratsa bile geçiş yumuşak. Betik zaten sönümlüyor; bu ikinci güvenlik. */ transition: height 260ms linear, scale 260ms linear, opacity 320ms linear; } .arobot-itki-hale, .arobot-itki-dis, .arobot-itki-ic { position: absolute; left: 50%; top: 0; translate: -50% 0; transform-origin: 50% 0; } /* Çevreye vuran ışık. Kenarı yok, tamamen sönerek bitiyor. */ .arobot-itki-hale { width: 300%; height: 128%; top: -22%; border-radius: 50%; background: radial-gradient(ellipse at 50% 26%, rgba(110, 190, 255, calc(.30 * var(--itki-parlak))) 0%, rgba(80, 150, 255, calc(.11 * var(--itki-parlak))) 40%, rgba(70, 130, 255, 0) 74%); mix-blend-mode: screen; animation: arobot-itki-hale .83s ease-in-out infinite alternate; } /* Dış alev: koyu mavi, geniş, yumuşak. */ .arobot-itki-dis { width: 100%; height: 100%; background: radial-gradient(ellipse 66% 104% at 50% 1%, rgba(150, 214, 255, calc(.95 * var(--itki-parlak))) 0%, rgba(84, 156, 255, calc(.80 * var(--itki-parlak))) 24%, rgba(52, 104, 240, calc(.52 * var(--itki-parlak))) 52%, rgba(40, 74, 220, calc(.22 * var(--itki-parlak))) 74%, rgba(38, 70, 214, 0) 100%); animation: arobot-itki-dis .67s ease-in-out infinite alternate; } /* Çekirdek: beyaza yakın mavi, dar, kısa. */ .arobot-itki-ic { width: 52%; height: 66%; background: radial-gradient(ellipse 58% 100% at 50% 0%, rgba(246, 252, 255, calc(.98 * var(--itki-parlak))) 0%, rgba(206, 236, 255, calc(.90 * var(--itki-parlak))) 26%, rgba(146, 206, 255, calc(.56 * var(--itki-parlak))) 58%, rgba(118, 186, 255, calc(.18 * var(--itki-parlak))) 80%, rgba(110, 180, 255, 0) 100%); animation: arobot-itki-ic .52s ease-in-out infinite alternate; } /* Deformasyon: boy, en ve hafif eğrilme. Üçü ayrı genlikte, o yüzden katmanlar birbirinin içinde kayıyor ve alev "akıyor". */ @keyframes arobot-itki-ic { 0% { scale: .88 .86; transform: skewX(-3.5deg); } 100% { scale: 1.1 1.14; transform: skewX(3deg); } } /* Katmanlar kendi derleme katmanlarında kalsın: `scale`/`skew` her karede değişiyor, promosyon olmadan her karede yeniden rasterleşiyorlardı. `filter: blur()` de bu yüzden kaldırıldı — gradyan zaten kenarsız, blur ölçülebilir bir kazanç vermeden kare bütçesini yiyordu (ölçüldü: 16,7 ms'yi aşan kare 95 -> 140). */ .arobot-itki-hale, .arobot-itki-dis, .arobot-itki-ic { will-change: transform; } @keyframes arobot-itki-dis { 0% { scale: .93 .9; transform: skewX(2.6deg); } 100% { scale: 1.07 1.12; transform: skewX(-2.2deg); } } @keyframes arobot-itki-hale { 0% { scale: .9 .88; opacity: .78; } 100% { scale: 1.12 1.1; opacity: 1; } } /* SIKILMA: motor rölantiye düşüyor ama SÖNMÜYOR. */ .arobot.is-sikilmis { --itki-boy: .19; --itki-en: .86; --itki-parlak: .8; --itki-op: .82; } /* UYKU: yalnızca pilot alevi kalıyor — motor yine kapanmıyor. */ .arobot.is-uyku { --itki-boy: .12; --itki-en: .66; --itki-parlak: .58; --itki-op: .66; opacity: .68; } /* ========================================================================== KATMAN — YOLDAŞ İÇERİĞİN ARKASINDA İSTEK "İmleci takip eden model mesajların ve görsellerin ARKASINDA dursun, önünde değil." Önceki hâl `z-index: 2` idi: yoldaş kartların, balonların ve metnin ÜSTÜNE boyanıyordu. NEDEN TEK BAŞINA `z-index: -1` YETMİYOR — İKİ AYRI ENGEL 1) BODY'NİN KENDİ ZEMİNİ. Bir yığma bağlamında boyama sırası (CSS 2.1 Ek E): (a) bağlamı açan öğenin kendi zemini (b) NEGATİF z-index'li çocuk bağlamlar (c) akıştaki, konumlandırılmamış blok düzeyi soyların zemini ... Kök bağlamı `html` açar. `html` ile `body`nin ikisi de ölçüldü ve İKİSİ DE opak `--bg` taşıyor: koyu rgb(9,12,24), açık rgb(255,255,255) (`html:has(body.ds)` ve `body.ds`, `design-system.css`). `html`in zemini saydam OLMADIĞI için `body`nin zemini tuvale terfi etmiyor; `body` kendi zeminini sıradan bir blok gibi (c) adımında boyuyor. `body`nin çocuğu olan yoldaş ise `z-index: -1` ile (b) adımına düşüyor — yani `body`nin zemini onun ÜSTÜNE geliyor ve robot tamamen kayboluyor. Çözüm: `body`ye `isolation: isolate`. `body` artık KENDİ yığma bağlamını açıyor, dolayısıyla kendi zemini o bağlamın (a) adımı oluyor, yoldaş (b), sayfanın geri kalanı (c) ve sonrası. Hiçbir renk değeri elle yazılmadı; `body` zeminini yine `--bg`den alıyor. `body`nin yığma bağlamı açması sayfadaki sıralamayı bozmuyor: gezinme bandı, açılır katmanlar, çerez bandı ve `.parilti-kat` zaten `body`nin İÇİNDE, yani göreli sıraları değişmiyor. `isolation` konumlandırma kabı da yaratmaz (`transform`/`filter` yaratır), o yüzden `position: fixed` öğeler ve `position: sticky` etkilenmiyor. 2) BÖLÜMLERİN GEREKSİZ ZEMİNİ. Aşağıdaki sekiz bant `styles.css`te `background: var(--bg)` taşıyor — yani `body` ile BİREBİR AYNI renk; iki temada da ölçüldü ve zemin görüntüsü (`background-image`) hiçbirinde yok. Görsel olarak hiçbir şey yapmıyorlar; sadece opak oldukları için arkalarındaki yoldaşı örtüyorlardı. Zeminleri kaldırıldı, renk yine `body`den geliyor. ÖLÇÜLDÜ — robot kapalıyken, iki temada, sayfanın tamamı boyunca sabit kaydırma noktalarında, değişiklik öncesi ve sonrası piksel piksel: 1440x900, azaltılmış hareket .......... 0 / 33.696.000 1440x900, normal hareket .............. 0 / 44.064.000 1024x768 (yatay `clip` eşiği) ......... 0 / 34.603.008 390x844, dokunmatik ................... 0 / 15.141.360 Yani hiçbir bölümün görünümü değişmedi. Seçiciler `section.` ile yazıldı: `styles.css`teki kural (0,1,0) spesifikliğinde, bu (0,1,1) — yani dosya yükleme sırasından BAĞIMSIZ olarak kazanıyor. `.pricing`, `.faq` gibi adlar sayfada başka öğelerde de geçiyor (`.faq-item`, `.pricing-card`); `section.` hem doğru öğeyi seçiyor hem de yanlışlıkla bir kartı saydamlaştırma ihtimalini kapatıyor. KENDİ ZEMİNİ OLAN BANTLARA DOKUNULMADI `.sintro` (rgb(14,17,36)), `.hero` (degrade), `.cta` (degrade) ve `footer.sfoot` gerçekten `body`den FARKLI bir zemin taşıyor. Yoldaş onların arkasından geçerken gizleniyor — "arkada durmak" zaten budur. Onları da saydamlaştırmak istenen tasarımı bozardı. `.parilti-kat` (`z-index: 5`) İÇERİDE ve hâlâ yoldaşın ÜSTÜNDE. Bu kasıtlı: parıltı içeriğin üstündeki ışık katmanı, yoldaş ise arkadaki figür. `styles.css`teki kendi başlığında neden üstte olduğu yazılı. ========================================================================== */ body { isolation: isolate; } section.capabilities, section.channels, section.faq, section.flow, section.industries, section.pricing, section.splits, section.trust { background-color: transparent; } /* Dar ekranda hiç yok: dokunmatikte takip edilecek imleç yok ve küçük ekranda gezinen bir öğe içeriği örter. */ @media (max-width: 900px) { .arobot { display: none; } } @media (prefers-reduced-motion: reduce) { .arobot { display: none; } } /* -------------------------------------------------------------------------- HERO DE AYNI YUZEY — ayri bir sablon degil Olculdu (1440x900, koyu tema): body rgb(9,12,24), acilis videosu rgb(11,14,30), hero ust seridi rgb(16,20,42). Hero iki komsusundan da ACIK oldugu icin ust kenarinda gorunur bir yatay kesik birakiyordu. Kaynagi `--hero-taban`: serit ALTTA tam olarak var(--bg) ile bitiyor ama USTTE var(--bg-band) ile basliyor. Hero sayfanin ilk bandiyken bu gezinme altindaki bir parlama gibi okunuyordu; ustune kaydirmali acilis geldiginde komsusuna dayanan sert bir basamaga donustu. Taban tamamen dusuyor: hero artik sayfanin kendi zeminini kullaniyor, yani basamak da kesik de yok. Marka lekeleri (`--hero-tente`) duruyor, ama `.hero-aurora`ya (z-index: -3) taşindi — yani yoldas robotun ALTINDA. Robot artik bandin icinden geciyor ve metnin, telefonun arkasinda kaliyor. `isolation` NEDEN KALKIYOR `.hero { isolation: isolate }` kendi yigma baglamini aciyordu, bu yuzden robot bandin icine HIC giremiyordu. O bildirim eskiden gerekliydi: hero un -1/-2/-3 lu katmanlari disari kacsaydi body nin opak zemininin ALTINA duserdi. Yukaridaki `body { isolation: isolate }` onlara body zemininin USTUNDE bir yer actigi icin artik gerekli degil. NEDEN BURADA, styles.css TE DEGIL `.hero` yedi sayfada var, ama `body { isolation: isolate }` yalnizca bu dosyada ve bu dosyayi yalnizca index.html yukluyor. Ayni bildirimi paylasilan tabakaya yazsaydik diger alti sayfada hero nun parlama ve izgara katmanlari body zemininin altina duser ve GORUNMEZ olurdu. `.hero-aurora` da yalnizca index.html te var. -------------------------------------------------------------------------- */ section.hero { isolation: auto; background: none; } .hero-aurora { background: var(--hero-tente); /* Tente UST KENARDA en gucludur (odagi kutunun ustunde: at 6% -12%), yani tabani dusurmek basamagi kucultuyor ama bitirmiyordu: olculdu, 5,6,12 -> 3,4,8. Maske lekeyi ilk 180 pikselde sifirdan aciyor, boylece hero un ust kenari TAM OLARAK var(--bg) — sayfanin geri kalaniyla ayni — ve leke asagida oldugu gibi duruyor. Bulaniklastirilmis aurora lekeleri de ayni maskeden geciyor; 90px blur zaten yumusak oldugu icin gecis gorunmuyor. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 180px); mask-image: linear-gradient(to bottom, transparent 0, #000 180px); }