/* ======================================================================== aboqe — 3D KATMANI Lenis smooth scroll destek stilleri · 3D kartlar · scroll tabanlı 3D ------------------------------------------------------------------------ Bu dosya YALNIZCA 3D/hareket katmanı yüklenen sayfalarda bağlanır (index.html, referanslar.html, biz-kimiz.html, projelerimiz.html). Renkler style.css'teki değişkenlerden gelir; iki temada da çalışır. MOBİL POLİTİKASI: 3D efektler yalnızca ince işaretçili geniş ekranlarda açılır. Anahtar, üzerindeki .has-3d sınıfıdır — motion.js ekler. Sınıf yoksa aşağıdaki kuralların hiçbiri devreye girmez. ======================================================================== */ /* ======================================================================== LENIS — kütüphanenin gerektirdiği temel stiller (CDN'den ayrı CSS çekmemek için buraya gömüldü; lenis.css ile birebir aynı) ======================================================================== */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ======================================================================== 3D KARTLAR JS yalnızca --c3d-* değişkenlerini günceller; tüm transform CSS'te kurulur. Böylece :hover geri dönüşü de yumuşak bir CSS geçişi olarak çalışır. ======================================================================== */ .has-3d .card3d { --c3d-rx: 0deg; /* X ekseni eğim */ --c3d-ry: 0deg; /* Y ekseni eğim */ --c3d-lift: 0px; /* hover'da kalkma */ --c3d-persp: 1100px; transform-style: preserve-3d; transition: transform .55s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out), background .45s var(--ease-out); } /* Tek transform kaynağı. İkinci ve üçüncü seçiciler, mevcut .card-hover / .ref-card :hover transformlarını özgüllükte geçmek için var. */ .has-3d .card3d, .has-3d .card-hover.card3d:hover, .has-3d .ref-card.card3d:hover, .has-3d .case-card.card3d:hover { transform: perspective(var(--c3d-persp)) rotateX(var(--c3d-rx)) rotateY(var(--c3d-ry)) translate3d(0, var(--c3d-lift), 0); } .has-3d .card3d:hover { --c3d-lift: -7px; } /* İşaretçi kartın üzerindeyken takip hızlı, ayrılınca yumuşak geri dönüş */ .has-3d .card3d.is-tilting { transition: transform .09s linear; } /* Katman derinliği — JS, data-depth değerini --depth olarak yazar */ .has-3d .card3d [data-depth] { transform: translateZ(calc(var(--depth, 0) * 1px)); transition: transform .55s var(--ease-out); } /* preserve-3d, overflow:hidden ile düzleşir → 3D kartlarda taşma serbest. .spotlight::before zaten border-radius:inherit taşıdığı için kırpma gerekmiyor (bkz. style.css). */ .has-3d .card3d.spotlight, .has-3d .card3d.case-card { overflow: visible; } /* Vaka kartının üst bandı kendi köşesini korumalı */ .has-3d .case-card.card3d .case-card__head { border-radius: 20px 20px 0 0; overflow: hidden; } /* Parlama (glare) — JS işaretçi konumunu --c3d-gx/--c3d-gy olarak yazar */ .card3d__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out); transform: translateZ(2px); background: radial-gradient( 420px circle at var(--c3d-gx, 50%) var(--c3d-gy, 50%), rgb(var(--c-neon-blue) / .22), transparent 58% ); } .has-3d .card3d:hover .card3d__glare { opacity: 1; } /* Aydınlık zeminde mavi parlama çok soluk kalıyor → biraz güçlendir */ :root[data-theme="light"] .card3d__glare { background: radial-gradient( 420px circle at var(--c3d-gx, 50%) var(--c3d-gy, 50%), rgb(var(--c-neon-blue) / .16), rgb(var(--c-neon-green) / .05) 40%, transparent 62% ); } /* ======================================================================== SCROLL TABANLI 3D ScrollTrigger, [data-scroll3d] öğelerinin --s3d-* değişkenlerini scrub eder. GSAP yüklenmezse öğeler nötr değerlerde kalır (görünüm bozulmaz). ======================================================================== */ .has-3d [data-scroll3d] { --s3d-rx: 0deg; --s3d-z: 0px; transform: perspective(1400px) rotateX(var(--s3d-rx)) translate3d(0, 0, var(--s3d-z)); transform-origin: 50% 100%; will-change: transform; } /* Parallax katmanı — sadece Y ötelemesi, ScrollTrigger scrub eder */ .has-3d [data-parallax] { transform: translate3d(0, var(--px-y, 0px), 0); will-change: transform; } /* ======================================================================== 3D SAHNE KAPSAYICILARI (Three.js canvas'ları buraya monte edilir) ======================================================================== */ .scene3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .scene3d canvas { display: block; width: 100%; height: 100%; } /* WebGL intro sahnesi — preloader'ın içinde tam ekran */ #introCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease-out); } #preloader.is-webgl #introCanvas { opacity: 1; } /* CSS güvenlik ağı (preAuto) WebGL intro'dan önce devreye girmesin: klasik intro 5.4sn'de kapatır, WebGL zaman çizelgesi ~4.4sn sürer. */ #preloader.is-webgl { animation-delay: 8s; } /* WebGL intro devredeyken CSS logo/daktilo animasyonu gizlenir */ #preloader.is-webgl .preloader-logo, #preloader.is-webgl .preloader-cap { opacity: 0; transition: opacity .3s; } /* ======================================================================== HAREKET AZALTMA — 3D tamamen devre dışı ======================================================================== */ @media (prefers-reduced-motion: reduce) { .has-3d .card3d, .has-3d .card3d [data-depth], .has-3d [data-scroll3d], .has-3d [data-parallax] { transform: none !important; } .card3d__glare { display: none; } }