/* ═══════════════════════════════════════════════════════════════
   Parallax Scrolling — Osmo düzeni

   Verilen bileşen yalnızca JSX + JS içeriyordu, CSS'i yoktu
   (Osmo tarafında Webflow'da tanımlı). Sınıf adları ve DOM yapısı
   bileşendekiyle birebir aynı; aşağıdaki kurallar o yapının
   çalışması için yazıldı.

   GSAP katmanlara `transform` yazıyor — bu yüzden .parallax__layer-img
   ve .parallax__layer-title üzerinde CSS'ten transform TANIMLANMIYOR.
   Tanımlansaydı GSAP onu ilk karede ezerdi (ortalama kayardı).
   ═══════════════════════════════════════════════════════════════ */

.parallax {
  position: relative;
  background: #0A0A0A;
}

/* Kaydırma mesafesi. ScrollTrigger start "0% 0%" → end "100% 0%",
   yani animasyon katman kutusunun KENDİ yüksekliği kadar kaydırmada
   tamamlanıyor. Kutu 100svh olduğu için efekt ilk bir ekran boyunca akıyor. */
.parallax__header {
  position: relative;
  height: 100svh;
  min-height: 560px;
}

.parallax__visuals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Katmanların üstünde kalan boşluğu kapatan siyah şerit.
   Katmanlar aşağı kaydıkça üstte açılan alanı örtüyor; olmadığında
   sahnenin tepesinde kesik bir kenar görünüyor. */
.parallax__black-line-overflow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #0A0A0A;
  z-index: 5;
  pointer-events: none;
}

.parallax__layers {
  position: absolute;
  inset: 0;
  /* AKŞAMÜSTÜ GRADE'İ, 1/2 — hafif canlandırma.
     Filtre KATMANLARIN ÜSTÜNDE değil kapsayıcıda: üçü de aynı ışığı
     alsın, ayrı ayrı boyanmış gibi durmasın. */
  filter: saturate(1.4) contrast(1.08) brightness(0.95);
}

/* AKŞAMÜSTÜ GRADE'İ, 2/2 — asıl renk buradan geliyor.
   mix-blend-mode: color, altındaki pikselin PARLAKLIĞINI aynen bırakıp
   yalnızca renk tonunu değiştiriyor. Sinemada renk düzeltme tam olarak
   bu işlem; dağın dokusu, karın kontrastı, gölgeler hiç bozulmuyor.

   Denenip BIRAKILAN iki yol:
     sepia() + hue-rotate() → her şeyi tek tona ezdiği için hardal/haki
       bir çamur veriyordu, turuncu olmuyordu
     mix-blend-mode: overlay → gökyüzünün koyu mavi köşeleri YEŞİLE
       kaçıyordu; overlay koyu piksellerde tonu öngörülemez çeviriyor */
.parallax__grade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: color;
  /* Alfa değerleri = turuncunun ŞİDDETİ. "color" harmanında ton ve
     doygunluk üstteki katmandan geldiği için alfa yükseldikçe sahne
     daha canlı turuncu oluyor.
     Üç kademe denendi; bu ortadaki:
       düşük  → küllü, akşamüstünden çok tozlu bir kahve
       ORTA   → canlı turuncu, karın ve kayanın dokusu duruyor  ← seçilen
       yüksek → tam #FF5E00 ama duotone poster; fotoğraf hissi kayboluyor
     Daha canlı istenirse ilk üç alfayı .88/.78/.62'den 1/.92/.75'e çek. */
  background: linear-gradient(to bottom,
    rgba(255, 105, 0, 0.88) 0%,
    rgba(255, 94, 0, 0.78) 42%,
    rgba(230, 85, 5, 0.62) 72%,
    rgba(90, 38, 10, 0.45) 100%);
}

/* Güneşin çevresine sıcak parlama. Ayrı bir katman, çünkü yukarıdaki
   "color" harmanı yalnızca ton taşıyor, ışık taşımıyor.
   Yarıçap ve opaklık bilerek küçük: büyütülünce başlığın arkasını
   yıkayıp kontrastı düşürüyor. */
.parallax__visuals::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(28% 20% at 50% 5%, rgba(255, 150, 60, 0.34), transparent 72%);
}

/* Katmanlar kutuyu kaplıyor.

   ÖNEMLİ — burası bir kez yanlış yapıldı: `height:auto` + `bottom:0`
   ile katmanlar kaynak oranını koruyup tabana yaslanıyordu. Kaynaklar
   2000×1906, yani neredeyse KARE. Geniş ve alçak bir pencerede
   (ölçüldü: 1470×613, oran 2.40) görsel 1470×1401'e ölçekleniyor ve
   tepesinden 788px taşıyordu — ekranda yalnızca en alt şerit, yani ön
   plandaki tepe kalıyor, dağ da başlık da kadrajın dışına çıkıyordu.

   object-fit: cover + dikeyde konumlandırma: kırpma kompozisyona göre
   yapılıyor, kutu oranı ne olursa olsun dağ, figür ve tepe çizgisi
   kadrajda kalıyor.

   %50 DENEYEREK seçildi. Kaynak kare olduğu için geniş bir kutuda
   tepesi de tabanı da aynı anda gösterilemiyor, bir şey kırpılmak
   zorunda:
     %72 → gökyüzündeki güneş kadrajın üstünde kalıyordu
     %42 → güneş çok net ama ön plandaki tepe tamamen kadraj dışına
            çıkıyor; katman 4 hiç görünmediği için başlığı yutma
            etkisi kayboluyor
     %50 → güneş görünür, tepe alt kenarda duruyor, etki korunuyor */
.parallax__layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* %55 — %50'den %58'e kadar denendi.
       %50 → güneş net ama tepe çizgisinin altında ~64px kalıyor,
              zemin şerit gibi duruyor
       %58 → zemin bol ama güneş menünün arkasına kaçıyor
       %55 → ikisi de kadrajda  ← seçilen */
  object-position: center 55%;
  /* will-change SAHNE GORUNURKEN veriliyor (.parallax.is-live),
     kalici degil -- bkz. dosya sonundaki blok. */
}

/* Başlık katmanı: 1 ve 2'nin önünde, 4'ün arkasında. Bileşendeki
   DOM sırası bunu zaten sağlıyor, z-index'e gerek yok. */
.parallax__layer-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Yazı dikeyde tam ortada durunca ön plandaki tepe çizgisi harflerin
     tam ortasından geçiyor ve isim okunmuyor. Alçak pencerelerde
     (ör. 1470×613) kelimenin yarısı gömülü kalıyordu. Yukarı alındı;
     kaydırıldıkça yine tepenin arkasına giriyor, sadece BAŞLANGIÇTA
     okunur durumda. */
  padding-bottom: clamp(80px, 24vh, 240px);
  /* will-change SAHNE GORUNURKEN veriliyor (.parallax.is-live),
     kalici degil -- bkz. dosya sonundaki blok. */
}

.parallax__title {
  margin: 0;
  /* Archivo Black — tek ağırlıklı bir aile, weight tanımlamaya gerek yok.
     Bebas Neue'dan çok daha GENİŞ olduğu için punto tavanı düşürüldü:
     aynı 13vw ile "ARKUN" dar ekranlarda kadraja sığmıyordu. */
  font-family: 'Archivo Black', Impact, sans-serif;
  /* Genişliğe göre büyürken YÜKSEKLİĞE göre de sınırlanıyor: alçak
     pencerede sadece yukarı taşımak yetmiyor, harfler de küçülmeli. */
  /* Ölçüldü: 9.4vw'de kelime ekranın yalnızca %29'unu kaplıyordu —
     "ARKUN" beş harf, geniş bir fontta bile küçük duruyor.
     13.5vw ile beş kırılma noktasında da ~%50 genişlikte oturuyor. */
  font-size: min(clamp(2.8rem, 13.5vw, 17rem), 28vh);
  line-height: 0.95;
  /* Geniş bir yüzde ağır harflerde hafif negatif aralık kelimeyi
     toparlıyor; pozitif aralıkta harfler dağılıyor. */
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #F4F1EE;
  text-align: center;
  user-select: none;
}

/* GÖLGE KALDIRMA — zemin dokusunu görünür kılan katman.
   Kaynak görselin toprağı neredeyse siyah (ölçüldü: 16,18,17 / 255).
   screen harmanı siyahları yukarı çekiyor; çim ve taş dokusu ancak
   böyle çıkıyor. Perdeyi kısaltmak TEK BAŞINA yetmedi — perde tamamen
   kaldırıldığında da zemin siyah kalıyordu, sorun kaynakta. */
.parallax__lift {
  position: absolute;
  inset: 0;
  z-index: 2;              /* renk katmanının ALTINDA: kaldırılan bölge de boyansın */
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(to top,
    rgba(120, 58, 20, 0.95) 0%,
    rgba(88, 40, 12, 0.60) 14%,
    transparent 34%);
}

/* Alt geçiş: sahne sayfanın zeminine karışsın, kesik bitmesin.
   %30'dan %20'ye indirildi — kaldırılan zemin dokusunu tekrar
   yutuyordu. */
.parallax__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, #0A0A0A 0%, rgba(10, 10, 10, 0.5) 48%, transparent 100%);
}

/* Bileşenin ikinci bölümü — sitenin asıl mesajı.
   Sahne bittiği yerde metin başlıyor; sola yaslı, çünkü uzun bir
   paragraf ve iki düğme ortalanınca okuma hattı kırılıyor. */
.parallax__content {
  background: #0A0A0A;
  padding-block: clamp(56px, 10vh, 130px) clamp(64px, 11vh, 150px);
}
.parallax__content-inner { max-width: 780px; }
.parallax__content .eyebrow { margin-bottom: var(--s-5); }
.parallax__content h2.display {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  margin-bottom: var(--s-5);
}
.parallax__content .lead { margin-bottom: var(--s-7); }
.parallax__content .hero__telemetry { margin-top: var(--s-7); }

/* ── GPU KATMANLARINI SAHNE GECINCE BIRAK ──────────────────────────
   Katmanlar 2000x1906; cozulmus halde her biri ~14,5 MB. will-change
   KALICI verildiginde dordu de sayfa acik oldugu surece ayri birer GPU
   katmani olarak tutuluyordu -- ustlerinde bir filter ve iki tam ekran
   mix-blend-mode katmani da var. Sayfa 10.000px; sahne ilk ekrandan
   sonra bir daha gorunmuyor ama bellek kalan 9.000px boyunca dolu
   kaliyordu. GPU bellegi kisitli telefonlarda kaydirmanin takilmasinin
   sebebi bu.

   Ayni desen arkun.css icinde zaten var: is bitince will-change: auto.
   .is-live sinifini parallax.js bir IntersectionObserver ile koyup
   kaldiriyor. */
.parallax__layer-img,
.parallax__layer-title { will-change: auto; }

.parallax.is-live .parallax__layer-img,
.parallax.is-live .parallax__layer-title { will-change: transform; }