/* hero-scroll.css — Proje Referansları ANA SAYFASININ (/referanslar) açılış bölümü; sayfanın düz başlık bloğunun (.ref-hero) yerini alır. Mekanik: scroll = film şeridi. Her adımda A→B karesi arasında önceden render edilmiş klip oynar ve hedef karede kilitlenir; kesme (cut) yoktur. Yalnızca config.js içinde HERO_SCROLL varsa açılır; devir, config.js'in içinde koyduğu html.has-hero-scroll anahtarıyla olur. */ /* Kilit açılıp kapanırken kaydırma çubuğu kaybolunca sayfa yatayda sıçrıyordu; gutter sabitlenince sıçrama kalkar. */ /* Hero ve sayfanın düz başlık bloğu tek anahtarla yer değiştirir. Anahtarı config.js içinde koyar; böylece siyah banner bir kare bile boyanmadan yerini hero'ya bırakır (önce banner çıkıp sonra hero belirince kesiklik hissediliyordu). Anahtar yoksa ya da hero-scroll.js yüklenemediyse sayfa düz başlıkla açılır. */ .hero-scroll { display: none; } html.has-hero-scroll .hero-scroll { display: block; } html.has-hero-scroll .ref-hero { display: none; } html.has-hero-scroll { scrollbar-gutter: stable; } /* Kilitliyken sayfa hiç kaymaz; overscroll-behavior mobildeki aşağı çekip yenileme ve kenar parlamasını da kapatır. Kilit açıkken ikisi de kalkar. */ html.hero-locked, html.hero-locked body { overflow: hidden; overscroll-behavior: none; } .hero-scroll { position: relative; /* Başlık akışta duruyor (sticky değil); hero tam olarak kalan ekranı doldurur. svh: mobilde adres çubuğu açılıp kapanırken yükseklik zıplamasın. */ height: calc(100vh - var(--hero-head, 88px)); height: calc(100svh - var(--hero-head, 88px)); overflow: hidden; background: #000; contain: layout paint; /* Buraya overscroll-behavior YAZMA: overflow:hidden bu bölümü kaydırma kabı yapıyor, none dendiğinde kilit açıldıktan sonra imleç hero üzerindeyken tekerlek sayfaya hiç geçmiyor ve ziyaretçi yukarı dönemiyor. */ } .hero-scroll__stage { position: absolute; inset: 0; } .hero-scroll__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); display: block; } /* Durağan kare üstte durur; klip oynarken soldurulur. Geçiş süresi JS'teki CROSSFADE ile aynı: klip son karesi ile JPEG/WebP arasındaki milimetrik piksel farkı bu 160 ms'te kaybolur, dikiş hissi oluşmaz. */ .hero-scroll__layer--still { z-index: 2; opacity: 1; transition: opacity 160ms linear; } .hero-scroll.is-playing .hero-scroll__layer--still { opacity: 0; } .hero-scroll__videos { position: absolute; inset: 0; z-index: 1; } .hero-scroll__layer--video { opacity: 0; } .hero-scroll__layer--video.is-on { opacity: 1; } /* Alt kenarda hafif karartma: ipucu, atla düğmesi ve noktalar parlak karelerde de okunur. */ .hero-scroll__scrim { position: absolute; inset: auto 0 0 0; height: 38%; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); } /* ---------- sayfa başlığı ---------- */ /* Sayfanın h1'i hero'nun içinde durur (düz .ref-hero bloğunun yerini aldı). Ölçüler .ref-hero__label / __title ile aynı; yalnızca kare üstünde okunsun diye gölge bindirilir. Film başlayınca çekilir, ilk durağa dönünce geri gelir. */ .hero-scroll__intro { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; /* Alt boşluk kaydırma ipucunu ve atla düğmesini boşta bırakacak kadar geniş; 64 px (.ref-hero'nun değeri) ile başlık ipucunun üstüne biniyordu. */ padding: 0 var(--ref-gutter, 75px) 108px; color: #fff; pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ref-ease, cubic-bezier(.22,1,.36,1)), transform .6s var(--ref-ease, cubic-bezier(.22,1,.36,1)); } .hero-scroll.is-intro .hero-scroll__intro { opacity: 1; transform: none; } .hero-scroll__label { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 1.4; text-shadow: 0 2px 18px rgba(0,0,0,.55); } .hero-scroll__title { margin: 0; font-size: 100px; font-weight: 500; letter-spacing: -2px; line-height: 1; text-shadow: 0 2px 30px rgba(0,0,0,.5); } /* Durak metni: başlıkla aynı yerde, bir tık küçük. Klip oynarken kareyi kapatmasın diye çekilir, kare yerleşince belirir — geçişi CSS yapar, JS yalnızca metni yazar. */ .hero-scroll__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 var(--ref-gutter, 75px) 108px; color: #fff; pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ref-ease, cubic-bezier(.22,1,.36,1)), transform .5s var(--ref-ease, cubic-bezier(.22,1,.36,1)); } .hero-scroll:not(.is-playing):not(.is-intro) .hero-scroll__caption { opacity: 1; transform: none; } .hero-scroll__line { margin: 0; font-size: 44px; font-weight: 500; letter-spacing: -.6px; line-height: 1.1; max-width: 18ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); } /* ---------- ilerleme noktaları ---------- */ .hero-scroll__progress { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 4; pointer-events: none; } /* Nokta 6 px'lik kutusunda kalır, görünen çubuk ::before ile taşar: aktif kare yükseklik yerine transform ile büyür. Yükseklik animasyonu her adımda kolonu yeniden yerleştiriyordu; transform yalnızca bileştirme katmanında çalışır ve noktaların arasındaki ritim de sabit kalır. */ .hero-scroll__progress span { position: relative; width: 6px; height: 6px; } .hero-scroll__progress span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 18px; margin-top: -9px; border-radius: 3px; background: rgba(255,255,255,.34); box-shadow: 0 0 0 1px rgba(0,0,0,.18); transform: scaleY(.3333); transition: background .3s ease, transform .3s ease; } .hero-scroll__progress span.is-active::before { background: #fff; transform: none; } /* ---------- kaydırma ipucu ---------- */ .hero-scroll__hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); margin: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.5); transition: opacity .5s ease; } .hero-scroll__hint svg { width: 20px; height: 20px; animation: hero-nudge 1.9s var(--ref-ease, cubic-bezier(.22,1,.36,1)) infinite; } .hero-scroll.is-started .hero-scroll__hint { opacity: 0; } @keyframes hero-nudge { 0%,100% { transform: translateY(0); opacity: .75 } 50% { transform: translateY(6px); opacity: 1 } } /* ---------- atla ---------- */ /* Scroll ele geçirildiği için klavye ve ekran okuyucu kullanıcısına her zaman görünür bir çıkış lazım; Esc ve End tuşları da aynı işi yapar. */ .hero-scroll__skip { position: absolute; right: 22px; bottom: 26px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.28); color: #fff; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .3s ease, color .3s ease, border-color .3s ease; } .hero-scroll__skip:hover { background: #fff; color: #111; border-color: #fff; } .hero-scroll__skip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Tanıtım atlandıktan sonra aynı düğme "Yeniden izle"ye döner: ziyaretçi yukarı döndüğünde donmuş karede kalıp sayfayı yenilemek zorunda kalmasın. */ .hero-scroll__skip [data-replay] { display: none; } .hero-scroll.is-skipped .hero-scroll__skip [data-skip] { display: none; } .hero-scroll.is-skipped .hero-scroll__skip [data-replay] { display: inline; } /* ---------- bekleme (klip henüz hazır değil) ---------- */ .hero-scroll__wait { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .3s ease; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; } .hero-scroll.is-waiting .hero-scroll__wait { opacity: 1; animation: hero-spin .9s linear infinite; } @keyframes hero-spin { to { transform: rotate(360deg) } } /* ---------- küçük ekran ---------- */ @media (max-width: 991px) { .hero-scroll { height: calc(100svh - var(--hero-head, 72px)); } } @media (max-width: 1199px) { /* .ref-hero__title ile aynı ölçek. */ .hero-scroll__title { font-size: clamp(44px, 11vw, 100px); } .hero-scroll__line { font-size: clamp(26px, 5vw, 44px); } .hero-scroll__intro, .hero-scroll__caption { padding-bottom: 96px; } } @media (max-width: 767px) { /* Başlık, ipucu ve atla düğmesiyle çakışmasın diye yukarı alınır (16 alt boşluk + 44 düğme + ipucu yüksekliği + pay). */ .hero-scroll__intro, .hero-scroll__caption { padding-bottom: 150px; } .hero-scroll__label { font-size: 16px; margin-bottom: 8px; } .hero-scroll__line { max-width: none; } .hero-scroll__progress { right: 14px; gap: 7px; } .hero-scroll__progress span { width: 5px; height: 5px; } .hero-scroll__progress span.is-active { height: 14px; } /* 44 px: sitenin dokunma hedefi alt sınırı. */ .hero-scroll__skip { right: 14px; bottom: 16px; height: 44px; padding: 0 14px; font-size: 11px; } /* İpucu dar ekranda ortalanınca atla düğmesinin üstüne biniyordu; düğmenin üstüne alınır (16 alt boşluk + 44 düğme + pay). */ .hero-scroll__hint { bottom: 76px; font-size: 11px; } } /* ---------- hareket azaltma ---------- */ /* Tercih açıksa JS ele geçirmeyi hiç kurmaz: hero tek bir durağan kare olarak kalır ve sayfa normal akar. Burada yalnızca artakalan animasyonlar susturulur. */ @media (prefers-reduced-motion: reduce) { .hero-scroll__layer--still { transition: none; } .hero-scroll__hint svg, .hero-scroll__wait { animation: none; } .hero-scroll__hint { display: none; } /* Film hiç oynamayacağı için başlık kalıcı olarak açık kalır. */ .hero-scroll__intro { opacity: 1; transform: none; transition: none; } }