/* ============================================================
   Studio NRC — Önizleme bölümleri
   1) Sanal Çekim Seti  ·  2) Hizmete göre değişen sahne
   Değişkenler site.css'ten devralınır (siyah / kırmızı / beyaz).
   ============================================================ */

/* Önizleme uyarı bandı — siteye eklenirken kaldırılacak */
.pv-bar{
  position:sticky;top:var(--head-h);z-index:500;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  padding:.7rem clamp(1rem,3vw,2.4rem);
  background:rgba(12,12,15,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  font-size:.8rem;color:var(--dim);
}
.pv-bar strong{color:#fff;font-weight:600}
.pv-bar a{color:var(--red);font-weight:600;margin-left:auto}
.pv-bar a:hover{color:var(--red-soft)}
.pv-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  animation:pvPulse 2s var(--ease-in-out) infinite}
@keyframes pvPulse{50%{opacity:.35}}

/* ============================================================
   1) SANAL ÇEKİM SETİ
   ============================================================ */

.vs{position:relative;background:var(--black)}
/* Sabitlenmiş sahne için kaydırma mesafesi (JS ile de okunur) */
.vs-track{height:460vh;position:relative}
.vs-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;gap:clamp(1.5rem,4vw,4rem);
  padding:var(--head-h) var(--gut) 2rem;
}

/* ---- Sahne ---- */
.vs-stage{
  /* Satır da açıkça verilir — yoksa metin sütunu ikinci satıra kayar */
  position:relative;grid-column:2;grid-row:1;
  aspect-ratio:4/5;width:auto;height:min(78svh,100%);max-width:100%;
  justify-self:center;align-self:center;
  border-radius:var(--r);overflow:hidden;
  background:#050506;
  box-shadow:0 40px 120px -40px rgba(0,0,0,1);
}

/* Zemin — ışık geldiğinde beliren yansıma */
.vs-floor{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.055));
  opacity:calc(var(--p1,0) * .9);
}

.vs-layer{position:absolute;inset:0;z-index:2}
.vs-layer img{width:100%;height:100%;object-fit:cover}

/* Arka plan seti */
.vs-backdrop{
  opacity:calc(.1 + var(--p4,0) * .78);
  transform:scale(calc(1.14 - var(--p4,0) * .1));
  filter:blur(calc((1 - var(--p4,0)) * 7px)) brightness(calc(.4 + var(--p4,0) * .6));
}

/* ---- Işıklar ---- */
.vs-light{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen}
.vs-key{
  background:radial-gradient(52% 44% at 22% 26%,rgba(255,238,214,.85),transparent 70%);
  opacity:calc(var(--l1,0) * .92);
}
.vs-rim{
  background:radial-gradient(38% 58% at 88% 46%,rgba(230,0,18,.62),transparent 72%);
  opacity:calc(var(--l2,0) * .9);
}
.vs-fill{
  background:radial-gradient(70% 60% at 50% 88%,rgba(180,195,255,.3),transparent 74%);
  opacity:calc(var(--l3,0) * .75);
}

/* Softbox silüetleri */
.vs-box{position:absolute;z-index:4;pointer-events:none}
.vs-box i{
  display:block;border-radius:6px;
  background:linear-gradient(140deg,rgba(255,244,224,.96),rgba(255,228,190,.5));
  box-shadow:0 0 70px 26px rgba(255,232,196,.34);
}
.vs-box-l{left:3%;top:9%;transform:rotate(-11deg)}
.vs-box-l i{width:clamp(66px,11vw,128px);height:clamp(80px,13vw,152px)}
.vs-box-r{right:4%;top:18%;transform:rotate(9deg)}
.vs-box-r i{
  width:clamp(30px,4.6vw,54px);height:clamp(96px,15vw,180px);
  background:linear-gradient(180deg,rgba(255,110,110,.9),rgba(230,0,18,.55));
  box-shadow:0 0 56px 18px rgba(230,0,18,.34);
}
.vs-box-l{opacity:var(--l1,0);transform:rotate(-11deg) translateY(calc((1 - var(--l1,0)) * -22px))}
.vs-box-r{opacity:var(--l2,0);transform:rotate(9deg) translateY(calc((1 - var(--l2,0)) * 22px))}

/* ---- Konu ---- */
.vs-subject{
  z-index:5;
  opacity:var(--p2,0);
  transform:translateY(calc((1 - var(--p2,0)) * 9%)) scale(calc(1.06 - var(--p2,0) * .06));
  -webkit-mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);
}
.vs-subject img{object-position:center 22%}

/* ---- Vizör ---- */
.vs-finder{
  position:absolute;z-index:7;inset:0;display:grid;place-items:center;
  opacity:var(--p3,0);pointer-events:none;
}
.vs-finder-in{
  position:relative;width:62%;aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.32);border-radius:2px;
  overflow:hidden;color:rgba(255,255,255,.88);
  transform:scale(calc(.9 + var(--p3,0) * .1));
  box-shadow:0 0 0 2000px rgba(0,0,0,calc(var(--p3,0) * .5));
}
.vs-finder-img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(calc((1 - var(--f,0)) * 9px)) saturate(calc(.4 + var(--f,0) * .6));
  transform:scale(calc(1.08 - var(--f,0) * .08));
}
.vs-marks{position:absolute;inset:0;width:100%;height:100%;color:rgba(255,255,255,.9)}
.vs-focus{
  position:absolute;left:50%;top:44%;width:26%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(calc(1.5 - var(--f,0) * .5));
  border:1.5px solid var(--red);border-radius:2px;
  opacity:calc(var(--p3,0) * (1 - var(--p5,0)));
}
.vs-rec{
  position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.2em;font-weight:700;color:#fff;
}
.vs-rec i{width:6px;height:6px;border-radius:50%;background:var(--red);
  animation:vsRec 1.6s var(--ease-in-out) infinite}
@keyframes vsRec{50%{opacity:.25}}
.vs-meta{
  position:absolute;right:8px;bottom:8px;font-size:8.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}

/* ---- Final kare ---- */
.vs-final{
  z-index:8;opacity:var(--p5,0);
  transform:scale(calc(1.05 - var(--p5,0) * .05));
  -webkit-mask-image:linear-gradient(180deg,#000 0 100%);
}
.vs-final::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.8) 100%);
}

/* Film greni */
.vs-grain{
  position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.13;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---- Metin ---- */
.vs-copy{grid-column:1;grid-row:1;align-self:center;position:relative;max-width:46ch}
.vs-eyebrow{
  font-size:var(--t-eyebrow);letter-spacing:.32em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:1.5rem;
  display:flex;align-items:center;gap:.85rem;
}
.vs-eyebrow::before{content:"";width:26px;height:1px;background:var(--red)}

/* Aşama metinleri üst üste durur, aktif olan görünür */
.vs-copy{min-height:clamp(180px,26vh,250px)}
.vs-step{
  position:absolute;left:0;right:0;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.vs-step.on{opacity:1;transform:none;pointer-events:auto}
.vs-step h2{
  font-size:clamp(1.5rem,2.9vw,2.35rem);line-height:1.1;margin-bottom:.9rem;
}
.vs-step p{color:var(--dim);font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.75}

.vs-cta{
  position:absolute;left:0;bottom:-1rem;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.vs-cta.on{opacity:1;transform:none;pointer-events:auto}

/* ---- İlerleme göstergesi ---- */
.vs-nav{
  position:absolute;left:var(--gut);bottom:2.2rem;z-index:10;
  list-style:none;margin:0;padding:0;display:flex;gap:clamp(.8rem,1.8vw,1.6rem);
}
.vs-nav li{
  display:flex;flex-direction:column;gap:.45rem;min-width:62px;
  font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);transition:color .45s var(--ease);
}
.vs-nav li.on{color:#fff}
.vs-nav-n{font-weight:700;font-variant-numeric:tabular-nums}
.vs-nav-l{font-size:9.5px;letter-spacing:.18em}
.vs-nav-bar{display:block;height:1.5px;background:#26262e;overflow:hidden;border-radius:2px}
.vs-nav-bar i{
  display:block;height:100%;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .2s linear;
}

/* ---- Mobil: sabitleme yok, kısa ve akıcı ---- */
@media (max-width:980px){
  .vs-track{height:auto}
  .vs-pin{
    position:static;height:auto;grid-template-columns:1fr;
    padding:clamp(2.5rem,7vw,4rem) var(--gut);gap:1.8rem;
  }
  .vs-stage{grid-column:1;grid-row:auto;order:1;aspect-ratio:4/5;width:100%;height:auto}
  .vs-copy{grid-column:1;grid-row:auto;order:2;min-height:0;max-width:none}
  /* Aşamalar mobilde alt alta okunur */
  .vs-step{position:static;opacity:1;transform:none;pointer-events:auto;
    padding-top:1.5rem;border-top:1px solid var(--line-soft);margin-top:1.2rem}
  .vs-step:first-of-type{border-top:0;margin-top:0;padding-top:0}
  .vs-step h2{font-size:1.2rem}
  .vs-cta{position:static;opacity:1;transform:none;pointer-events:auto;margin-top:1.8rem}
  .vs-nav{position:static;margin-top:1.6rem;flex-wrap:wrap;gap:.7rem}
  .vs-nav li{min-width:54px}
}

/* ---- Hareket azaltma: tüm katmanlar sabit ve okunur ---- */
@media (prefers-reduced-motion:reduce){
  .vs-track{height:auto}
  .vs-pin{position:static;height:auto;padding-block:clamp(2.5rem,6vw,4rem)}
  .vs-stage{--p1:1;--p2:1;--p3:0;--p4:1;--p5:1;--l1:1;--l2:1;--l3:1;--f:1}
  .vs-finder{display:none}
  .vs-step{position:static;opacity:1;transform:none;padding-top:1.4rem}
  .vs-cta{position:static;opacity:1;transform:none;margin-top:1.6rem}
  .vs-rec i{animation:none}
  .vs-nav{position:static;margin-top:1.4rem}
}

/* ============================================================
   2) HİZMETE GÖRE DEĞİŞEN SAHNE
   ============================================================ */

.sc{padding-block:clamp(3.2rem,7vw,6rem);background:var(--ink)}
.sc-head{margin-bottom:clamp(2rem,4vw,3.2rem);max-width:52ch}
.sc-head h2{font-size:var(--t-h2);margin-top:1rem}

.sc-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:start;
}

/* ---- Sol liste ---- */
.sc-list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.sc-item{
  display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  padding:clamp(.9rem,1.7vw,1.25rem) .3rem;
  border-bottom:1px solid var(--line-soft);
  position:relative;isolation:isolate;color:inherit;
  transition:padding-left .5s var(--ease);
}
.sc-item::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(230,0,18,.12),transparent 72%);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.sc-item:hover::before,.sc-item.on::before{transform:scaleX(1)}
.sc-item:hover,.sc-item.on{padding-left:clamp(.6rem,1.8vw,1.2rem)}

.sc-n{
  font-size:var(--t-xs);font-weight:700;color:var(--dim-2);flex:none;width:2.2ch;
  font-variant-numeric:tabular-nums;transition:color .4s var(--ease);
}
.sc-item:hover .sc-n,.sc-item.on .sc-n{color:var(--red)}

.sc-t{
  flex:1;min-width:0;font-family:var(--f-display);
  font-size:clamp(1rem,1.6vw,1.24rem);font-weight:600;letter-spacing:-.024em;
  line-height:1.25;color:var(--dim);
  transition:color .4s var(--ease),transform .5s var(--ease);
}
.sc-item:hover .sc-t{color:#e6e6ec}
.sc-item.on .sc-t{color:#fff;transform:translateX(4px)}

.sc-ar{
  width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--line);display:grid;place-items:center;
  opacity:.35;transition:opacity .45s var(--ease),background .45s var(--ease),
             border-color .45s var(--ease),transform .45s var(--ease);
}
.sc-item.on .sc-ar{opacity:1;background:var(--red);border-color:var(--red);transform:translateX(3px)}
.sc-ar svg{width:12px;height:12px}

/* ---- Sağ sahne ---- */
.sc-stage{position:relative}
.sc-frame{
  position:relative;width:100%;aspect-ratio:4/3;
  background:#08080a;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;
}
.sc-shot{
  position:absolute;inset:0;margin:0;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .75s var(--ease),visibility .75s;
}
.sc-shot.on{opacity:1;visibility:visible}
.sc-shot img{
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  transition:transform 1.4s var(--ease),filter 1s var(--ease),clip-path 1s var(--ease);
}

/* Hareket imzaları — her hizmet farklı bir kamera hissi verir */
.sc-shot[data-motion="fashion"] img{transform:scale(1.06)}
.sc-shot[data-motion="fashion"].on img{transform:scale(1);filter:contrast(1.06) saturate(1.04)}

.sc-shot[data-motion="product"] img{transform:scale(1.22);filter:blur(3px)}
.sc-shot[data-motion="product"].on img{transform:scale(1.04);filter:none}

/* Yatay sahneden dikey kadraja geçiş */
.sc-shot[data-motion="vertical"] img{
  clip-path:inset(0 0 0 0);transform:scale(1.1);
}
.sc-shot[data-motion="vertical"].on img{
  clip-path:inset(0 26% 0 26%);transform:scale(1);
}

/* Yukarı yükselen kamera */
.sc-shot[data-motion="aerial"] img{transform:scale(1.18) translateY(7%);object-position:center 60%}
.sc-shot[data-motion="aerial"].on img{transform:scale(1) translateY(0);object-position:center 40%}

/* Kadraj genişler, set görünür */
.sc-shot[data-motion="widen"] img{transform:scale(1.32)}
.sc-shot[data-motion="widen"].on img{transform:scale(1)}

/* Stüdyodan marka sahnesine */
.sc-shot[data-motion="corporate"] img{transform:scale(1.12);filter:brightness(.6)}
.sc-shot[data-motion="corporate"].on img{transform:scale(1);filter:brightness(.95)}

/* Işık süpürmesi — geçişte bir kez geçer */
.sc-sweep{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  transform:translateX(-110%);
}
.sc-shot.on .sc-sweep{animation:scSweep 1.15s var(--ease) forwards}
@keyframes scSweep{to{transform:translateX(110%)}}

/* Geçici görsel işareti */
.sc-flag{
  position:absolute;left:.85rem;top:.85rem;z-index:3;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:650;
  padding:.32rem .6rem;border-radius:99px;
  background:rgba(230,0,18,.9);color:#fff;
}

/* Kadraj köşeleri */
.sc-corner{
  position:absolute;width:20px;height:20px;z-index:4;pointer-events:none;
  border:1.5px solid rgba(255,255,255,.34);
}
.sc-corner.tl{left:10px;top:10px;border-right:0;border-bottom:0}
.sc-corner.tr{right:10px;top:10px;border-left:0;border-bottom:0}
.sc-corner.bl{left:10px;bottom:10px;border-right:0;border-top:0}
.sc-corner.br{right:10px;bottom:10px;border-left:0;border-top:0}

/* ---- Sahne metni ---- */
.sc-info{position:relative;margin-top:1.5rem;min-height:132px}
.sc-panel{
  position:absolute;left:0;right:0;top:0;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.sc-panel.on{opacity:1;transform:none;pointer-events:auto}
.sc-panel h3{font-size:clamp(1.12rem,1.7vw,1.35rem);margin-bottom:.7rem}
.sc-panel p{color:var(--dim);font-size:.92rem;line-height:1.72;max-width:56ch}
.sc-panel .tlink{margin-top:1.05rem;color:#fff}
.sc-note{
  margin-top:.8rem!important;font-size:.78rem!important;color:var(--red-soft)!important;
}

/* ---- Duyarlı ---- */
@media (max-width:980px){
  .sc-grid{grid-template-columns:1fr;gap:1.4rem}
  .sc-stage{order:1}
  .sc-list{order:2;border-top:0}

  /* Mobilde hover yok — yatay kaydırmalı sekmeler */
  .sc-list{
    flex-direction:row;overflow-x:auto;gap:.5rem;padding-bottom:.4rem;
    scrollbar-width:none;
  }
  .sc-list::-webkit-scrollbar{display:none}
  .sc-item{
    width:auto;flex:none;border:1px solid var(--line);border-radius:99px;
    padding:.6rem 1rem!important;gap:.55rem;
  }
  .sc-item::before{display:none}
  .sc-item.on{background:var(--red);border-color:var(--red)}
  .sc-item.on .sc-n,.sc-item.on .sc-t{color:#fff}
  .sc-t{font-size:.83rem;white-space:nowrap}
  .sc-ar{display:none}
  .sc-frame{aspect-ratio:4/5}
  .sc-info{min-height:160px}
}

@media (prefers-reduced-motion:reduce){
  .sc-shot img,.sc-shot.on img{transform:none!important;filter:none!important;clip-path:none!important}
  .sc-shot.on .sc-sweep{animation:none}
}