/* ==========================================================================
   TEMA 2 · SİNEMATİK SESSİZ LÜKS — filmic one-shot
   Tek duygusal yay, dikişsiz. Görünür sıra numarası yok, sayfa bir araç gibi
   davranmaz, tek giriş noktası vardır. Zemin drift ile sürekli akar.
   NOT: .sc-stage'in position/height/overflow'una dokunulmaz — ezilirse
   pinlenen her act kayıp gider.
   ========================================================================== */

:root{
  --sc-canvas:#07090A;  --sc-surface:#0E1211;
  --sc-ink:#F2F4F1;     --sc-ink-soft:#98A29B;
  --sc-accent:#C7B79C;  --sc-accent-ink:#07090A;
  --sc-font-display:"Sora",system-ui,sans-serif;
  --sc-font-text:"Manrope",system-ui,sans-serif;
  --bar:72px;
  --gut:clamp(1.2rem,5vw,5.5rem);
}
@media (max-width:900px){ :root{ --bar:58px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--sc-canvas);color:var(--sc-ink);
  font-family:var(--sc-font-text);-webkit-font-smoothing:antialiased;overflow-x:clip}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--sc-accent);color:#07090A;padding:.7rem 1.1rem}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--sc-accent);outline-offset:4px}

/* ---------- tipografi: sessiz, geniş, yavaş ---------- */
.d{font-family:var(--sc-font-display);margin:0;letter-spacing:-.035em;
   line-height:1.02;font-weight:200;text-wrap:balance}
.d--xl{font-size:clamp(2.5rem,6.6vw,6.6rem)}
.d--lg{font-size:clamp(1.9rem,4.4vw,4.2rem)}
.d--md{font-size:clamp(1.6rem,3vw,2.9rem);font-weight:300}
.accent{color:var(--sc-accent)}
.eyebrow{font:500 .7rem/1 var(--sc-font-text);letter-spacing:.24em;text-transform:uppercase;
  color:#EFE6D5;margin:0 0 1.2rem}
/* Klibin üstündeki ipucu bloğu kendi scrim'ini taşır: karartma tam kadraja
   değil, yalnızca metnin oturduğu şeride. .sc-copy'nin position'ına
   DOKUNULMAZ; motor onu absolute + alttan hizalı kuruyor. */
.sc-copy--lead::before,.sc-copy--trail::before{content:"";position:absolute;
  left:-30vw;right:-30vw;top:-18rem;bottom:-14rem;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 62% at 30% 62%,rgba(5,7,8,.95),rgba(5,7,8,.62) 46%,rgba(5,7,8,.22) 68%,rgba(5,7,8,0) 84%)}
.sc-copy--trail::before{background:radial-gradient(46% 62% at 70% 62%,rgba(5,7,8,.95),rgba(5,7,8,.62) 46%,rgba(5,7,8,.22) 68%,rgba(5,7,8,0) 84%)}
.lede{font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.62;color:#C4CCC6;
  max-width:36ch;margin:0;font-weight:400}
.body{font-size:.98rem;line-height:1.68;color:var(--sc-ink-soft);max-width:38ch;margin:0}
/* Dikey ritim: boşluk BAŞLIĞIN em'i üzerinden, sabit rem değil. Satır
   yüksekliği 1.02 olduğu için alt boşluk cömert olmalı. */
.d--xl{margin-bottom:.68em}
.d--lg{margin-bottom:.76em}
.d--md{margin-bottom:.86em}
.eyebrow + .d{margin-top:0}
.d + .lede,.d + .body,.d + .facts,.d + p{margin-top:0}
.lede + .body,.body + .body{margin-top:1.2rem}

/* Sabit bar artık site.css'te (.hd): ana sayfa ve alt sayfalar aynı
   header'ı paylaşıyor, ikisinde de aynı menü var. */

/* ---------- İMZA: kilometre direği ---------- */
.km{position:fixed;left:var(--gut);bottom:clamp(1.4rem,4vh,3rem);z-index:48;
  display:flex;flex-direction:column;gap:.35rem;pointer-events:none;
  font-family:var(--sc-font-display);color:var(--sc-ink);
  opacity:0;transition:opacity .6s var(--sc-ease-out)}
.km.is-on{opacity:1}
.km__n{font-size:clamp(1.5rem,2.6vw,2.4rem);font-weight:200;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 18px rgba(0,0,0,.85)}
.km__n i{font-style:normal;color:var(--sc-accent)}
.km__u{font:500 .6rem/1 var(--sc-font-text);letter-spacing:.28em;text-transform:uppercase;
  color:var(--sc-accent);text-shadow:0 2px 14px rgba(0,0,0,.9)}
.km__tick{width:1px;height:clamp(28px,5vh,54px);margin:.35rem 0 .1rem;
  background:linear-gradient(180deg,var(--sc-accent),transparent);opacity:.55}
.km__place{font:400 .64rem/1.2 var(--sc-font-text);letter-spacing:.16em;text-transform:uppercase;
  color:#B9C2BB;max-width:9rem;text-shadow:0 2px 14px rgba(0,0,0,.95)}
@media (max-width:900px){ .km{display:none} }   /* dar ekranda kadraja izinsiz girer */

/* ---------- ipucu blokları: köşeye yaslı, ortalanmaz ---------- */
.sc-copy{padding:0 var(--gut)}
.sc-copy--lead{max-width:min(52rem,86vw)}
.sc-copy--trail{max-width:min(50rem,86vw)}
/* Sağa hizalı blokta paragrafın max-width'i var ama yan boşlukları 0 olduğu
   için blok kabın SOLUNA yapışıyor; metin sağa hizalı olsa da sağ kenarı
   başlığın sağ kenarıyla buluşmuyordu. Bloğu sağa it.
   860 px altında motor bu bloğu sola çeviriyor, orada geri al. */
.sc-copy--trail .lede,
.sc-copy--trail .body{margin-inline-start:auto;margin-inline-end:0}
@media (max-width:860px){
  .sc-copy--trail .lede,
  .sc-copy--trail .body{margin-inline-start:0}
}

/* ---------- 2 · gerilim ---------- */
.argue{display:grid;place-items:center}
.argue__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  filter:grayscale(.7) brightness(.3) contrast(1.1)}
.argue::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 30% 50%,rgba(7,9,10,.95),rgba(7,9,10,.75))}
.argue__wrap{position:relative;z-index:2;width:min(62rem,88vw);padding:0 var(--gut);
  display:grid}
.argue__wrap > p{grid-area:1/1;margin:0;font-weight:200}

/* ---------- 3 · madde ---------- */
.sec{padding:clamp(4.5rem,10vh,8rem) 0}
.wrap{width:min(1240px,92vw);margin:0 auto;padding:0 var(--gut)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.stack > *{margin-top:0}
.facts{margin:2.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem}
.facts dt{font:500 .64rem/1 var(--sc-font-text);letter-spacing:.18em;text-transform:uppercase;
  color:#8E988F;margin-bottom:.45rem}
.facts dd{margin:0;font-family:var(--sc-font-display);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--sc-ink)}
.shot{margin:0}
.shot img{width:100%;height:clamp(320px,54vh,560px);object-fit:cover;display:block;filter:contrast(1.04)}
.shot figcaption{margin-top:1rem;font-size:.82rem;line-height:1.5;color:var(--sc-ink-soft)}

/* ---------- 4 · zirve ---------- */
/* Son kare varsayılanda gizli. Aşağıdaki reduced-motion bloğu onu gösteriyor;
   ayrıca motor kademe 3'e düştüğünde .sc-tier-3 .sc-stage__end kuralı (daha
   özgül, scrollcraft.css) aynı görseli poster üzerine çapraz geçirerek açıyor.
   Yani bu görsel artık iki farklı yoldan sahneye çıkabiliyor. */
.reduced-end{display:none}

/* Katalog pini: ahşap / kompozit yan yana. Filtre yok — çatlama ve
   yüzey bütünlüğü bu karede okunmak zorunda. */
.catalog{display:grid;place-items:end}
.catalog__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:28% center}

/* ---------- 5 · kapsam: yatay ray ---------- */
.rail{transition:none;gap:clamp(1.2rem,2.6vw,2.6rem);align-items:center;padding:0 var(--gut);height:100%}
.rail__lead,.rail__end{flex:0 0 auto;width:min(24rem,72vw)}
.rail__end{display:flex;flex-direction:column;justify-content:center}
.card{flex:0 0 auto;width:clamp(15rem,23vw,20rem);margin:0}
.card img,.card__3d{width:100%;height:clamp(230px,34vh,330px);display:block;
  object-fit:cover;background:#141A18}
.card__3d{position:relative}
.card__3d canvas{position:absolute;inset:0;width:100%;height:100%}
.card__tag{display:block;margin:1.1rem 0 .4rem;
  font:500 .62rem/1 var(--sc-font-text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sc-accent)}
.card__tag + h3{margin-top:0}
.card h3{font-family:var(--sc-font-display);font-weight:300;letter-spacing:-.02em;
  font-size:1.35rem;margin:1.1rem 0 .5rem}
.card__spec{margin:0;font-size:.82rem;line-height:1.65;color:#C0C9C2}
.link{display:inline-block;margin-top:1.4rem;color:#F6F1E6;text-decoration:none;
  font:500 .76rem/1 var(--sc-font-text);letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(199,183,156,.7);padding-bottom:.4rem}

/* ---------- 6 · kapanış ---------- */
.close{display:grid;place-items:center}
.close__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  filter:grayscale(.5) brightness(.3);
  /* zeminin üst kenarı görünür bir dikiş bırakıyordu; bu gramerde kesme yok */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%);
  mask-image:linear-gradient(180deg,transparent,#000 26%)}
.close::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(80% 70% at 34% 52%,rgba(7,9,10,.95),rgba(7,9,10,.82))}
.close__in{position:relative;z-index:2;width:min(58rem,90vw);padding:0 var(--gut)}
.btn{display:inline-block;margin-top:2.4rem;background:var(--sc-accent);color:var(--sc-accent-ink);
  text-decoration:none;font:500 .8rem/1 var(--sc-font-text);letter-spacing:.16em;text-transform:uppercase;
  padding:1.15rem 2.1rem;transition:background .25s}
.btn:hover{background:#DACBB0}
.close__addr{margin-top:2.8rem;font-style:normal;font-size:.85rem;color:var(--sc-ink-soft);letter-spacing:.02em}

/* ---------- dar ekran ---------- */
@media (max-width:900px){
  .two{grid-template-columns:1fr;gap:2.6rem}
  .facts{grid-template-columns:1fr 1fr}
  .rail__lead,.rail__end{width:min(20rem,80vw)}
  .card{width:min(17rem,72vw)}
}

/* ---------- hareket kapalı ---------- */
@media (prefers-reduced-motion:reduce){
  /* klip ilk karesinde donuyor; dönüşümün sonucu statik olarak gösterilsin */
  [data-sc-act="scrub"] video[data-sc-scrub]{display:none}
  .reduced-end{display:block;position:absolute;inset:0;width:100%;height:100%;
    max-width:none;object-fit:cover}
}