/* ==========================================================================
   Lotus Heykel · filmic one-shot
   --------------------------------------------------------------------------
   Motor temalanır, yeniden yazılmaz. .sc-stage, .sc-copy, .sc-scrim ve her
   [data-sc-*] mekanizmadır; burada yeniden biçimlendirilmez.

   Zemin: altı aktın altısı da pinlenmiş ve uzun, yani aynı anda yalnızca biri
   0 ile 1 arasında. Drift'in doğru çalıştığı durum tam olarak bu, dolayısıyla
   bölüm başına opak zemin değil drift kullanılıyor. Filmic zaten zeminler arası
   sert kesmeyi yasaklıyor.
   ========================================================================== */

:root {
  /* Altı renk rolü. Gece zemin, taş mürekkep, logonun altını aksan.
     Krem olan OBJE, zemin değil: krem-ve-pirinç tuzağı böyle atlanıyor. */
  --sc-canvas:     #0B0D12;
  --sc-surface:    #141821;
  --sc-ink:        #F2EADC;
  /* Bir kademe açıldı (#A79B88 idi). İkincil metin koyu zeminde küçük punto ile
     birleşince eziyet oluyordu; tinti korunup parlaklık yükseltildi. */
  --sc-ink-soft:   #BCAF9A;
  --sc-accent:     #D8AC5C;
  --sc-accent-ink: #14100A;

  /* İki aile. Mono da metin ailesine bağlandı; üçüncü aile kostüm olurdu.

     Display, Bodoni Moda'dan FRAUNCES'a geçti. Bodoni bir didone: kalın ile
     ince arasındaki fark uçuk yüksek. Koyu zeminde açık yazı zaten optik olarak
     inceliyor, dolayısıyla o saç gibi inceler ekranda kayboluyordu. Fraunces
     aynı klasik havayı taşıyor ama gövdesi sağlam ve optik boyut ekseni var,
     yani büyük punto ile küçük punto ayrı çizimler. */
  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "Archivo", system-ui, sans-serif;

  --gate-w: clamp(7rem, 12vw, 16rem);
  --gate-open: 0;
  --gate-in: 0;
  --pad-x: calc(var(--gate-w) + var(--sc-gutter));
  --bar-h: 3.5rem;
}

/* Koyu üstünde açık yazı üç eksende telafi ister: bir tık daha satır
   yüksekliği, bir tık daha tracking, bir kademe daha ağırlık. Ağırlık 400'de
   duruyordu, yani üçüncü eksen uygulanmamıştı; Archivo değişken eksenli olarak
   yüklendiği için 450 gerçek bir ara ağırlık, sahte kalınlaştırma değil. */
body { font-weight: 450; line-height: 1.68; letter-spacing: 0.004em; }

/* Display ayrı: Fraunces'ın optik boyut ekseni büyük puntoda daha ince,
   küçük puntoda daha kalın çizim veriyor. Başlıklarda ekseni açıkça sür,
   yoksa tarayıcı tek bir orta değeri kullanır ve iki uçta da yanlış olur. */
.banner__line, .atolye__name, .peak__name, .close__name,
.act__title, .piece__name, .bar__mark {
  font-optical-sizing: auto;
}

/* ==================================================================== EŞİK ==
   Signature move. Banner'da yok: giriş temiz kalır, eşik siz banner'ı terk
   ederken oluşur (--gate-in). Aktif objeye göre kimlik değiştirir. Sayfada tam
   olarak bir kez açılır (--gate-open), peak'te.

   Katman sahnenin üstünde (z 2) ama kopyanın altında (z 20): tam ekran
   görselleri çerçeveler, hiçbir yazıyı örtmez. */
.gate {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex; justify-content: space-between;
  /* Geçiş YOK: iki çarpan da her karede scroll'dan yazılıyor, bir CSS
     transition ikisini de gecikmeli hale getirir ve eşik elin arkasında kalır. */
  opacity: calc(var(--gate-in) * var(--gate-dim, 1));
}
.gate__side {
  position: relative;
  width: var(--gate-w);
  height: 100%;
  will-change: transform;
}
.gate__side--l { transform: translate3d(calc(var(--gate-open) * -104%), 0, 0); }
.gate__side--r { transform: translate3d(calc(var(--gate-open) *  104%), 0, 0); }

.gate__fig {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--sc-ease-out);
}
/* Artık gerçek fotoğraf var ve sağdaki melek zaten sağdaki melek: aynalamaya
   gerek yok. Heykel kırpımın ortasında, o yüzden merkez konumlama. */
.gate__fig { object-position: 50% 42%; }
.gate__fig.is-on { opacity: 1; }

/* Heykel kenardan doğar, kutu gibi bitmez: içe doğru zemine karışır. */
.gate__side--l { mask-image: linear-gradient(to right, #000 40%, transparent 100%); }
.gate__side--r { mask-image: linear-gradient(to left,  #000 40%, transparent 100%); }

/* ===================================================================== BAR ==
   Filmic: sabit, minimal. Marka ve TEK CTA. Atlanabilir indeks yok, çünkü
   atlanabiliyorsa tek çekim değildir. */
.bar {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-hairline);
}
/* Tam amblem 40px'lik bir barda okunmaz bir lekeye döner. Barda yalnızca
   yatay yazı sürümü, amblemin tamamı hero'da. */
.bar__mark { display: flex; align-items: center; flex: 0 0 auto; }
.bar__mark img { height: 1.5rem; width: auto; }

/* ---- site navigasyonu ----------------------------------------------------
   Çok sayfaya geçince ana sayfa artık saf bir filmic one-shot değil: o gramer
   "atlanabiliyorsa tek çekim değildir" diyor ve gerçek bir site menüsü tam da
   atlamaktır. Bilinçli takas, bkz. BRIEF.md. */
.bar__nav { margin-inline: auto; }
.bar__nav ul {
  display: flex; align-items: center; gap: clamp(var(--sc-4), 2.2vw, var(--sc-6));
  margin: 0; padding: 0; list-style: none;
}
.bar__nav a {
  display: inline-block;
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--sc-2);
  border-bottom: 1px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { color: var(--sc-ink); } }
.bar__nav a[aria-current="page"] { color: var(--sc-accent); border-bottom-color: var(--sc-accent); }

/* Menü düğmesi yalnızca JS varsa görünür: JS yoksa menü açık kalır ve yatay
   kaydırılır, yani hiçbir durumda erişilemez olmaz. */
.bar__toggle { display: none; }

@media (max-width: 860px) {
  .bar { gap: var(--sc-3); }
  .bar__nav { margin-inline: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .bar__nav::-webkit-scrollbar { display: none; }

  /* DOM sırası: marka, düğme, menü, sepet. Düğme kontrol ettiği şeyden ÖNCE
     geliyor (klavye ve ekran okuyucu için doğru sıra), görsel yeri order ile
     sağa alınıyor. */
  .js .bar__toggle {
    order: 4;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    margin-left: var(--sc-2);
    background: none; border: 1px solid var(--sc-hairline-strong);
    border-radius: var(--sc-r-sm);
    color: var(--sc-ink);
    cursor: pointer;
  }
  .js .bar__toggle svg { width: 1.15rem; height: 1.15rem; }
  .js .bar__nav {
    position: fixed; inset: var(--bar-h) 0 auto 0;
    margin: 0; overflow: visible;
    background: color-mix(in oklab, var(--sc-canvas) 96%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sc-hairline);
    padding: var(--sc-4) var(--sc-gutter) var(--sc-5);
    display: none;
  }
  .js .bar__nav[data-open="true"] { display: block; }
  .js .bar__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .bar__nav a {
    padding-block: var(--sc-4);
    border-bottom: 1px solid var(--sc-hairline);
    font-size: var(--sc-t-sm);
  }
  .js .bar__nav li:last-child a { border-bottom: 0; }
}

/* ---- sepet simgesi -------------------------------------------------------
   Sayaç sepet.js'den; sepet boşken gizli. Filmic barın "tek CTA" kuralı
   burada ikinci kez bükülüyor: mağaza olan bir sitede sepet CTA değil, yer. */
.bar__cart {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  color: var(--sc-ink-soft); text-decoration: none;
  border-radius: var(--sc-r-sm);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.bar__cart svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .bar__cart:hover { color: var(--sc-ink); } }
.bar__cart.is-dolu { color: var(--sc-ink); }
.bar__cart-n {
  position: absolute; top: 0.15rem; right: 0.05rem;
  min-width: 1.1rem; height: 1.1rem; padding-inline: 0.3rem;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 500; line-height: 1;
  border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
}
.bar__cart-n[hidden] { display: none; }
@media (max-width: 860px) {
  /* Teklif iste düğmesi bardan kalktı; sağa yaslayan şey artık sepet simgesi. */
  .js .bar__cart { order: 3; margin-left: auto; }
  .js .bar__toggle { order: 4; margin-left: var(--sc-2); }
}

/* ================================================================== KÜNYE ==
   Tek şema, istisnasız. */
.label { margin: 0; display: grid; gap: 0; }
.label > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sc-4);
  padding-block: var(--sc-2);
  border-top: 1px solid var(--sc-hairline);
}
.label > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.label dt {
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  line-height: 1.5;
}
.label dd { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); line-height: 1.5; }
.label--peak > div { border-color: color-mix(in oklab, var(--sc-ink) 18%, transparent); }

/* Doldurulmamış alan uydurulmuş bir sayı değil, açıkça boş bir alandır. */
.label__pending { color: var(--sc-ink-soft); }
.label__pending::before {
  content: "";
  display: inline-block;
  width: 3.2em; margin-right: 0.45em;
  border-bottom: 1px dashed color-mix(in oklab, var(--sc-accent) 60%, transparent);
  transform: translateY(-0.18em);
}

/* ============================================================ ORTAK METİN == */
.act__title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  text-wrap: balance;
  margin: 0 0 var(--sc-4);
}
/* Art arda iki gövde paragrafı ilk kez Hakkımızda aktında var ve aralarında
   hiç boşluk yoktu: margin sıfır olduğu için iki paragraf tek blok gibi
   okunuyordu. */
.act__body + .act__body { margin-top: var(--sc-4); }
/* Firma adi ikincil metin renginde kaybolurdu: tam mürekkep ve bir kademe
   daha agirlik. Renk degil agirlik vurguluyor, cunku sayfada tek aksan var. */
.act__body strong { color: var(--sc-ink); font-weight: 600; }
.act__body {
  max-width: 52ch;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-base);
  text-wrap: pretty;
  margin: 0;
}

/* ================================================== 1 · KARŞILAMA · banner ==
   Ürün tanıtımı yok. Amblem, tek satır, tek alt satır, tek CTA: dört metin
   öğesi, taban kuralının sınırı. Hero viewport'u taşmaz. */
.banner { display: grid; place-items: center start; }
.banner__bed {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Kopya sola alınınca yoğunluk da sola geçti. Ortalanmış bant yazının
   olmadığı sağ yarıyı bedavaya karartıyor ve fotoğrafı orada düzleştiriyordu;
   taban kuralı "yoğunluğu yazının olduğu yere koy" diyor.
   Daha önce ölçülen hata bunun tersiydi: alta bakan bant, ortadaki yazıyı
   korumuyordu ve en parlak karede 1.61:1'e düşüyordu. */
.banner__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 93%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 80%, transparent) 36%,
      color-mix(in oklab, var(--sc-canvas) 32%, transparent) 64%,
      transparent 86%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 0%,
      transparent 22%);
}

/* Peak künyesi ve başlığı heykelin en parlak yerinin üstünden geçiyor;
   ölçülen 3.62:1 büyük display tipi için geçerli ama incecik. Bant yalnızca
   kopyanın oturduğu şeritte sıkılaştırıldı. */
.act--peak .sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 48%,
    transparent 68%);
}

/* Raf panlarken kartlar eşiğin altına kayıyor ve künyeleri örtülüyordu:
   statik padding hareket eden bir rafı koruyamaz. Bu aktın sahnesi eşiğin
   üstüne çıkıyor; sahne saydam olduğu için eşik kartların arasından
   görünmeye devam ediyor. */
.act--rail [data-sc-stage] { z-index: 3; }

.banner__copy {
  position: relative;
  z-index: var(--sc-z-copy);
  display: grid; justify-items: start;
  text-align: left;
  padding-inline: var(--pad-x) var(--sc-gutter);
  max-width: min(56rem, 100%);
}
.banner__logo {
  width: clamp(7rem, 15vh, 11rem);
  height: auto;
  margin-bottom: var(--sc-5);
}
/* Üst başlık: sayfada tek eyebrow, hero'da. Taban kuralı üç bölümde bir
   taneye izin veriyor, bu o tek tane. */
.banner__kicker {
  font-size: var(--sc-t-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-4);
}
.banner__line {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-5);
}
/* Blok: satır sonunu <br> ile değil yapıyla veriyor, yani metin kopyalanınca
   da iki satır kalıyor. */
.banner__accent { display: block; color: var(--sc-accent); }
.banner__sub {
  max-width: 42ch;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-base);
  text-wrap: pretty;
  margin: 0 0 var(--sc-6);
}
/* Çerçeveli CTA. Videonun üstünde duran bir hayalet düğme kontrast riskidir,
   o yüzden içi tamamen saydam değil: perdeyle birlikte ölçülüp doğrulandı. */
.banner__cta {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent);
  text-decoration: none;
  padding: var(--sc-3) var(--sc-6);
  border-radius: var(--sc-r-sm);
  white-space: nowrap;
  transition: background 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out),
              color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.banner__cta-ok { transition: transform 200ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .banner__cta:hover {
    background: var(--sc-accent); color: var(--sc-accent-ink);
    border-color: var(--sc-accent);
  }
  .banner__cta:hover .banner__cta-ok { transform: translateX(4px); }
}
.banner__cta:active { transform: translateY(1px); }

/* ===================================================== 3 · İŞÇİLİK · scrub ==
   Sayfadaki ikinci ve son video. Banner ile aynı cihaz, kasten başka bir
   kompozisyon: orada kopya ortalanmış ve amblemli, burada sola dayalı ve
   amblemsiz. Yoğunluk da bant değil sütun, çünkü karenin sağ yarısı objenin
   kendisi ve karartılırsa video izlenmeye değer olmaktan çıkar. */
.atolye { display: grid; place-items: center; }

/* Ortalanmış kopya için ortalanmış bant. Üst ve alt açık kalıyor, obje
   kontrastını orada koruyor: tam kare karartma videoyu izlenmeye değer
   olmaktan çıkarırdı. */
.atolye__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 6%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 24%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 44%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 60%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 80%,
    transparent 96%);
}

/* Ortada ve GENİŞ. Dar bir sütun, kelime kelime gelen bir metni kelime başına
   bir satıra indiriyordu: kinetic'in her birimi ayrı bir satır kutusu değil,
   satır içi bir maske, dolayısıyla darlık doğrudan alt alta dizilme demek. */
.atolye__copy {
  position: relative;
  z-index: var(--sc-z-copy);
  text-align: center;
  padding-inline: var(--sc-gutter);
  max-width: min(44rem, 88vw);
}
.atolye__name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-4);
}
.atolye__body {
  max-width: 40ch;
  margin-inline: auto;
  color: var(--sc-ink);
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  margin-block: 0;
}

/* İNİŞ ÇIKINTISI TELAFİSİ, ve bu şart.
   Motorun metin bölücüsü her birimi `overflow: hidden` bir maskeye sarıyor.
   `lines` modunda maskeye descender payı veriyor, ama `words` modunda
   VERMİYOR. Türkçede ğ, ş, ç, y, p bu maskede kuyruğundan kesilirdi ve
   devices.md'nin kendi ifadesiyle "bu efektin bozuk görünmesinin en yaygın
   yolu" tam olarak budur.

   Motor değiştirilmiyor: pay yalnızca bu aktın kelimelerine, kendi
   seçicimizin altında veriliyor. */
.atolye__body .sc-split {
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

/* ==================================================== 2 · GENİŞLİK · pan == */
.rail {
  align-items: center;
  gap: var(--sc-6);
  height: 100%;
  padding-inline: var(--pad-x);
}
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(28rem, 76vw); }
.rail__note { width: min(22rem, 70vw); }

.piece { width: clamp(17rem, 27vw, 23rem); margin: 0; }
/* Kırpımlar farklı oranlarda (sütun kare, korkuluk yatay, aslan neredeyse
   kare). Kare çerçeve artı cover, rafı hizada tutan ve hiçbirini kötü kırpmayan
   tek ortak payda: 4:5'e zorlamak korkuluğun dizilişini dar bir dilime indirirdi. */
.piece__frame {
  aspect-ratio: 1 / 1;
  border-radius: var(--sc-r-md);
  overflow: clip;
  box-shadow: var(--sc-e2);
  background: var(--sc-surface);
}
.piece__frame img { width: 100%; height: 100%; object-fit: cover; }
.piece__name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 400;
  letter-spacing: var(--sc-track-snug);
  margin: var(--sc-4) 0 var(--sc-3);
}

/* Yanal hareket tek başına slayt gösterisi gibi okunur; sıra ile oturan
   objeler çekmece gibi okunur. İlk obje muaf: pan aktının açılış içeriği
   zaten yerinde olmalı. Taban opaklık 0.55, yani oturmamış obje yüklenmiyor
   gibi değil geliyor gibi görünür. */
@media (prefers-reduced-motion: no-preference) {
  .rail .piece {
    opacity: clamp(0.55, calc((var(--sc-p, 0) - 0.04) * 4.5), 1);
    transform: translate3d(0, calc((1 - clamp(0, calc((var(--sc-p, 0) - 0.04) * 4.5), 1)) * 18px), 0);
  }
  .rail .piece:first-of-type { opacity: 1; transform: none; }
}

/* ================================================== 4 · YAKINLIK · reveal ==
   Iris sayfada bir kez ve büyük bir öğede: küçük öğede olsaydı tik olurdu.
   Sınıf adı .material değil .about: bölüm artık malzemeyi değil firmayı
   anlatıyor ve eskimiş bir sınıf adı sonradan bakanı yanıltır. */
/* `height: 100%` BURAYA KONMAZ. Bu eleman sahnenin KENDİSİ (data-sc-stage), bir
   çocuğu değil; %100 vermek sahneyi aktın tamamı kadar (1.8 ekran) yükseltiyor
   ve o boyda bir sticky eleman hiç yapışmıyor. Ölçüldü: sahne 1200px, viewport
   667px, akt pinlenmek yerine akıp gidiyordu. Yükseklik .sc-stage'den gelir. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sc-6), 5vw, var(--sc-9));
  align-items: center;
  padding-inline: var(--pad-x);
}
/* İki katman: çerçeve kısık tabanı taşır, iris üstteki figürde. clip-path
   border box'a görelidir: silme figürde, görselin kendi kutusunda değil. */
.about__frame {
  position: relative;
  border-radius: var(--sc-r-md);
  overflow: clip;
  max-height: 68vh;
  background: var(--sc-surface);
}
.about__base {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  filter: brightness(0.42) saturate(0.65);
}
.about__figure { position: relative; margin: 0; will-change: clip-path; }
.about__figure img { display: block; width: 100%; height: auto; }

/* ============================================== 4 · HAYRANLIK · PEAK ======= */
.peak { display: grid; place-items: end start; }
.peak__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Eşik açılırken obje hafifçe yaklaşır. Tek sürücü aktın kendi ilerlemesi. */
  transform: scale(calc(1.06 - var(--sc-p, 0) * 0.06));
  transform-origin: 50% 55%;
}
/* Ölçü kopyanın kendisinde, kapsayıcının padding'inde değil: dört kenara
   birden verilen --pad-x max-width'in içinden yenir ve künyeyi sarmalar. */
.peak__copy {
  position: relative;
  z-index: var(--sc-z-copy);
  width: 100%;
  padding-inline: var(--pad-x) var(--sc-gutter);
  padding-bottom: clamp(var(--sc-6), 8vh, var(--sc-8));
}
.peak__name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-4);
  max-width: 16ch;
}
.label--peak { max-width: 32rem; }

/* ======================================================= 6 · AÇILIŞ · reveal ==
   İki katman: altta kısık taban, üstünde tam güçlü olan yukarı doğru siliniyor.
   Taban, pinlenmiş aktın ilk karesinde zemin olsun diye var; tek katman olsaydı
   akt boş bir sahneyle açılırdı. */
.arch { display: grid; place-items: end center; }
.arch__base, .arch__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.arch__base { filter: brightness(0.42) saturate(0.65); }
/* clip-path border box'a görelidir; silme görselin kendi kutusunda. */
.arch__img { will-change: clip-path; }
.arch__copy {
  position: relative;
  z-index: var(--sc-z-copy);
  text-align: center;
  padding-inline: var(--sc-gutter);
  padding-bottom: clamp(var(--sc-7), 10vh, var(--sc-9));
  max-width: min(44rem, 88vw);
}
.arch__copy .act__body { margin-inline: auto; max-width: 42ch; }

/* ======================================================= 6 · DAVET · pin ==
   Filmic kapanışı: spotlight ve magnetik CTA (gallery ikisini de yasaklıyordu,
   bu gramer ikisini de istiyor). Footer sahnenin içinde: ölü kuyruk yok. */
.close {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding-inline: var(--pad-x);
}
.close__plate {
  position: relative;
  z-index: var(--sc-z-copy);
  width: min(38rem, 100%);
  align-self: center;
  padding-block: var(--sc-7);
}
.close__name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-5);
}
.close__cta {
  display: inline-block;
  margin-top: var(--sc-6);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent-ink);
  background: var(--sc-accent);
  text-decoration: none;
  padding: var(--sc-3) var(--sc-6);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2);
}
.close__cta:active { transform: translateY(1px); }

.foot {
  position: relative;
  z-index: var(--sc-z-copy);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4);
  padding-block: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.foot__mark { height: 1.15rem; width: auto; opacity: 0.75; }

/* ================================================================= MOBİL ==
   Eşik telefonda içerik genişliği yemez: ince dilime iner, kopyanın arkasına
   geçer ve gutter zaten onu temizler. */
@media (max-width: 860px) {
  :root {
    --gate-w: 9vw;
    --pad-x: max(var(--sc-gutter), 13vw);
    --bar-h: 3.25rem;
  }
  .gate { opacity: calc(var(--gate-in) * 0.4); }
  /* Hero tipografisi telefonda bir kademe iner: --sc-t-4xl'in tabanı bir
     MASAÜSTÜ tabanı ve 390px'te başlığı altı satıra sarar. */
  /* Telefonda kopya tam genişliğe yayılıyor, dolayısıyla sola bakan sütun
     yoğunluğu yazının sağ ucunu korumaz. Orada doğru şekil banttır. */
  .banner__veil {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 46%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 34%,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 72%,
      color-mix(in oklab, var(--sc-canvas) 60%, transparent) 100%);
  }
  .banner__kicker { letter-spacing: 0.24em; }
  .banner__line { font-size: var(--sc-t-2xl); }
  .banner__logo { width: clamp(7rem, 16vh, 10rem); }
  .banner__sub { font-size: var(--sc-t-sm); }
  .peak__name, .close__name { font-size: var(--sc-t-2xl); }
  /* Telefonda sahne barın altından başlar: içerik ortalanınca görselin üstü
     barın arkasına giriyordu. Üstten hizala, bar kadar boşluk bırak. */
  .about { grid-template-columns: 1fr; gap: var(--sc-4); align-content: start; padding-top: calc(var(--bar-h) + var(--sc-4)); }
  .about__frame { max-height: 28vh; }
  .about .act__body { font-size: var(--sc-t-sm); }
  .label > div { grid-template-columns: 5.5rem 1fr; }
}

/* ======================================================= AZALTILMIŞ HAREKET ==
   Daha az ve daha yumuşak, sıfır değil. Eşik yerinde kalır ve kimlik geçişini
   opaklıkla sürdürür: anlamı taşıyan şey o. Açılma bir konum değişimi olduğu
   için düşer. */
@media (prefers-reduced-motion: reduce) {
  .gate__side--l, .gate__side--r { transform: none !important; }
  .peak__img { transform: none !important; }
  .rail .piece { opacity: 1 !important; transform: none !important; }
}

/* Raf kartları artık ürün sayfasına bağlantı. Altı çizili görünmesin, ama
   odak halkası kalsın: motorun :focus-visible kuralı zaten aksanla çiziyor. */
.piece { text-decoration: none; color: inherit; }
/* Kapanışta ikinci, sessiz yol: ürün listesi. Düğme değil, çizgisiz bağlantı;
   tek CTA magnetli olan. */
.close__alt {
  display: inline-block;
  margin: var(--sc-4) 0 0 var(--sc-2);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) { .close__alt:hover { color: var(--sc-ink); border-color: var(--sc-ink); } }