﻿/* Verterra · v10 · PARALAKS (cadde → Konum). Osmo "Parallax" kurgusu: katmanlar farklı hızda yukarı kayar,
   başlık iki katmanın arasındadır, en öndeki zemin katmanı ekranı örter, ardından sonraki bölüm gelir.
   Katmanlar sahneyle aynı 2202×1440 kaynak kutusunda; geometri A sayfasının sahnesinden (window.__a.geo).
   Telefon/dokunmatikte katmanlar ekran boyunda (aşağıda KUTU KİPİ). */

.px-pay{height:var(--px-pay,120vh);pointer-events:none}
.px-sahne{position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;contain:strict}
.px-sahne.px-var{visibility:visible}
.px-kat{position:absolute;left:0;top:0;width:2202px;height:1440px;transform-origin:0 0;will-change:transform}
.px-kat img{position:absolute;left:0;top:0;width:2202px;height:1440px;max-width:none;display:block}
.px-yol img{top:938px;height:502px}
/* asfalt: yolun alt kenarından aşağı uzanır (ekranı tamamen örtsün); üst 60 px yumuşak birleşim */
.px-asfalt{position:absolute;left:0;top:1380px;width:2202px;height:5200px;
  background:linear-gradient(180deg,rgba(22,30,38,0) 0,rgb(22,30,38) 60px,rgb(19,26,33) 1400px,rgb(16,22,28) 100%)}
.px-gizle{visibility:hidden}

/* KUTU KİPİ (telefon ve dokunmatik ekran; paralaks.js .px-kutu verir): iPhone'da 2202×1440 ve 2202×6580'lik ölçekli katmanlar
   sekmeyi çökertiyordu. Kutu ekran genişliğinde, resim içinde konumlu (left/top/width/height JS'ten), ölçek yok; asfaltın
   gradyanı kaynak pikselinde (--px-s ile) aynı. will-change yalnız sahne etkinken (px-var) → kapalıyken birleşik katman yok. */
.px-sahne.px-kutu .px-kat{width:100%;overflow:hidden;will-change:auto}
.px-sahne.px-kutu.px-var .px-kat{will-change:transform}
.px-sahne.px-kutu .px-baslik{will-change:auto}
.px-sahne.px-kutu.px-var .px-baslik{will-change:transform,opacity}
.px-sahne.px-kutu .px-asfalt{background:linear-gradient(180deg,rgba(22,30,38,0) 0,rgb(22,30,38) calc(60px * var(--px-s,.586)),
  rgb(19,26,33) calc(1400px * var(--px-s,.586)),rgb(16,22,28) calc(5200px * var(--px-s,.586)))}

/* başlık: gökle yapıların arasında; sahnedeki "VİLLA VERTERRA" ile aynı harf ve renk */
.px-baslik{position:absolute;left:0;top:0;width:100%;text-align:center;white-space:nowrap;will-change:transform,opacity;
  font-family:var(--f-dev);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.01em;font-size:var(--px-boy,180px)}
.px-baslik .h{display:inline-block;padding-top:.16em;margin-top:-.16em;
  background:linear-gradient(180deg,var(--harf-ust) 18%,var(--harf-orta) 52%,var(--harf-alt) 86%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* paralaks sürerken: zeminin üst bandı (perde) görünmez; caddenin arayüzü (liste, plan, ipucu, telefon şeridi) çekilir */
html.px-aktif .alt-perde{opacity:0!important}
html.px-aktif .sol,html.px-aktif .ipucu,html.px-aktif .tel-cubuk,html.px-aktif .tel-serit,html.px-aktif .sahne-yazi,html.px-aktif .sayfa-kap{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .45s var(--yumusak),visibility 0s linear .45s!important}

@media (prefers-reduced-motion:reduce){
  .px-pay{height:0}
  .px-sahne{display:none}
}
