/* ============================================================================
   NASTEC — "Teknolojimiz" proses sahnesi (technology.html)

   Yalnızca .proc* bileşenleri. Tokenlar, tipografi ve .page-hero styles.css /
   sections.css'ten geliyor — burada yeniden tanımlanmaz. Başlık üstü etiketler
   sitenin .section-eyebrow sınıfını kullanır.
   ========================================================================= */

/* ════════════════════════════════════════════════════════════════════════
   SAHNE KATMANI
   ═════════════════════════════════════════════════════════════════════ */
.proc{
  position:relative;background:var(--bg-black);
  /* js/boot.js sabit başlığın gerçek yüksekliğini buraya yazar. Başlık
     kaydırınca küçülüyor ve kırılım noktasında değişiyor; sabit bir tahmin
     dar ekranda kontrollerin başlığın altında kalmasına yol açıyordu. */
  --proc-chrome:0px;
}

/* ── sahne ekrandayken başlık geri çekilir ───────────────────────────────
   Gövdedeki .proc-active işaretini boot.js koyuyor. Tamamen şeffaf yapmıyoruz:
   videonun üst bandı gökyüzü ve ortalama parlaklığı ~136, tepeleri ~237 —
   menü yazısı orada kaybolurdu. Onun yerine örtüyü inceltip bulanıklığı
   artırıyoruz: blur parlak detayı ortalayıp yazının altını sakinleştiriyor. */
body.proc-active #topbar{
  background:linear-gradient(180deg,
    rgb(var(--c-scrim) / .66) 0%, rgb(var(--c-scrim) / .40) 55%, rgb(var(--c-scrim) / .18) 100%);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
body.proc-active #topbar.is-scrolled{
  background:rgb(var(--c-scrim) / .52);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:rgb(var(--c-line) / .07);
  box-shadow:none;
}
/* İnce örtünün altında kalan yazılar için son güvence. */
body.proc-active #topbar .nav__link,
body.proc-active #topbar .brand,
body.proc-active #topbar .lang-switch__btn{
  text-shadow:0 1px 3px rgb(var(--c-shadow) / .8);
}

/* 9 beat (7 aşama + geri çekilme + gövdeye dönüşüm) × 100vh + sticky'nin 100vh'si */
.proc__stage{position:relative;height:1000svh}

.proc__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:
    radial-gradient(75% 60% at 50% 42%, var(--bg-navy) 0%, var(--bg-deep) 55%, var(--bg-black) 100%);
}
/* Kaynak video 16:9 (1920×1080); sahne geniş ekranda da ~1.78:1, yani "cover"
   pratikte hiç kırpmıyor. Kare ve dikey ekranlarda kırpma makineyi kesecek
   kadar büyür, orada "contain". */
.proc__video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  background:transparent;
}
@media (max-aspect-ratio:1/1){
  .proc__video{object-fit:contain}
}

/* Vinyet üç katman:
   1) panel perdesi — sol alt köşe, metnin oturduğu yer. Video gündüz çekimi
      olduğu için (panel bölgesinde ortalama parlaklık ~105, tepeler ~245)
      yalnızca alttaki ince kararma yetmiyordu; başlık kararmanın bittiği
      yükseklikte kalıp okunmaz hâle geliyordu.
   2) klasik merkez vinyeti — kadrajı toplar
   3) alt kararma — kontroller ve kaydırma ipucu için  */
.proc__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(125% 82% at 0% 100%,
      rgb(var(--c-scrim) / .94) 0%, rgb(var(--c-scrim) / .86) 26%,
      rgb(var(--c-scrim) / .60) 50%, rgb(var(--c-scrim) / .24) 70%, transparent 84%),
    radial-gradient(115% 85% at 50% 45%,transparent 42%,rgb(var(--c-scrim) / .55) 78%,rgb(var(--c-scrim) / .9) 100%),
    linear-gradient(to top,rgb(var(--c-scrim) / .82) 0%,transparent 38%);
}
/* RTL'de panel sağa geçiyor; perde de onunla gitmeli. */
[dir="rtl"] .proc__vignette{
  background:
    radial-gradient(125% 82% at 100% 100%,
      rgb(var(--c-scrim) / .94) 0%, rgb(var(--c-scrim) / .86) 26%,
      rgb(var(--c-scrim) / .60) 50%, rgb(var(--c-scrim) / .24) 70%, transparent 84%),
    radial-gradient(115% 85% at 50% 45%,transparent 42%,rgb(var(--c-scrim) / .55) 78%,rgb(var(--c-scrim) / .9) 100%),
    linear-gradient(to top,rgb(var(--c-scrim) / .82) 0%,transparent 38%);
}

/* ── aşama metin paneli ─────────────────────────────────────────────────── */
.proc__panel{
  position:absolute;left:var(--gutter);bottom:clamp(3rem,7vh,5.5rem);
  width:min(460px,calc(100vw - 2*var(--gutter)));
  z-index:3;
}
.proc__panel-item{
  position:absolute;left:0;bottom:0;width:100%;
  opacity:0;transform:translateY(26px);pointer-events:none;
  transition:opacity .55s var(--ease-io),transform .55s var(--ease-io);
}
.proc__panel-item.is-active{opacity:1;transform:none;pointer-events:auto}

/* Perde ortalamayı düşürüyor ama videodaki tekil parlak noktaları (su sıçraması,
   metal parlaması) yakalamıyor. Gölge tam da onlara karşı: metnin kendi kenarını
   taşıması, arkasında ne olursa olsun harf sınırını korur. */
.proc__panel-item{
  text-shadow:0 1px 2px rgb(var(--c-shadow) / .85), 0 2px 14px rgb(var(--c-shadow) / .55);
}

.proc__panel-num{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgb(var(--c-cyan) / .42);
  margin-bottom:.35rem;
}
.proc__panel-title{font-size:clamp(1.55rem,3vw,2.25rem);font-weight:700;margin-bottom:.55rem}
.proc__panel-lead{
  color:var(--cyan-soft);font-weight:500;font-size:clamp(.92rem,1.2vw,1.02rem);
  margin-bottom:.7rem;
}
.proc__panel-desc{color:var(--muted);font-size:clamp(.88rem,1.1vw,.97rem);line-height:1.68}

/* list-style sıfırlaması eksikti; masaüstünde panel kırpıldığı için madde
   imleri görünmüyordu, akış modunda kap kırpmayınca ortaya çıktılar. */
.proc__panel-facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem;list-style:none}
.proc__panel-facts li{
  font-size:.71rem;letter-spacing:.03em;color:var(--silver);
  padding:.36rem .68rem;border:1px solid var(--glass-border);border-radius:999px;
  background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.proc__panel-facts li[data-todo]{
  border-color:rgba(240,196,80,.34);color:#f0d489;
}

/* ── aşama göstergesi (sağ dikey ray) ───────────────────────────────────── */
.proc__hud{
  position:absolute;right:calc(var(--gutter) * .62);top:50%;translate:0 -50%;
  z-index:4;display:flex;flex-direction:column;gap:.15rem;
}
.proc__hud-dot{
  appearance:none;background:none;border:0;padding:.42rem 0 .42rem .9rem;
  display:flex;align-items:center;gap:.7rem;cursor:pointer;
  font:inherit;color:var(--faint);text-align:right;
  transition:color .35s var(--ease);
}
.proc__hud-dot span{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  opacity:0;translate:8px 0;transition:opacity .35s var(--ease),translate .35s var(--ease);
  text-shadow:0 1px 3px rgb(var(--c-shadow) / .9);
}
.proc__hud-dot i{box-shadow:0 0 0 3px rgb(var(--c-scrim) / .45)}
.proc__hud-dot i{
  width:9px;height:9px;border-radius:50%;flex:none;
  border:1.5px solid currentColor;background:transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),scale .35s var(--ease);
}
.proc__hud-dot:hover{color:var(--silver)}
.proc__hud-dot:hover span{opacity:.85;translate:0 0}
.proc__hud-dot.is-active{color:var(--cyan)}
.proc__hud-dot.is-active span{opacity:1;translate:0 0}
.proc__hud-dot.is-active i{background:var(--cyan);box-shadow:0 0 0 3px rgb(var(--c-scrim) / .45),0 0 14px rgb(var(--c-cyan) / .85);scale:1.15}
.proc__hud-dot.is-done{color:rgb(var(--c-cyan) / .5)}
.proc__hud-dot.is-done i{background:rgb(var(--c-cyan) / .4)}
.proc__hud-dot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ── kontroller ─────────────────────────────────────────────────────────── */
/* Başlığın gerçek yüksekliğinin altından başlar — sabit bir değer kullanınca
   dar masaüstünde düğme başlığın arkasında kalıp tıklanamaz hâle geliyordu. */
.proc__controls{
  position:absolute;left:var(--gutter);top:calc(var(--proc-chrome) + 1.1rem);z-index:4;
  display:flex;align-items:center;gap:1rem;
}
.proc__btn{
  appearance:none;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--white);
  padding:.55rem 1.05rem;border-radius:999px;
  border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.proc__btn:hover{border-color:rgb(var(--c-cyan) / .5);color:var(--cyan-soft)}
.proc__btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* Düğme iki etiket taşır; hangisinin görüneceğini sahne durumu belirler.
   Metin JS'ten yazılmaz, i18n sözlüğü tek doğruluk kaynağı olarak kalır. */
.proc__btn-off{display:none}
.proc.is-cinematic .proc__btn-on{display:none}
.proc.is-cinematic .proc__btn-off{display:inline}
.proc__scrollhint{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  transition:opacity .4s var(--ease);
}
.proc.is-cinematic .proc__scrollhint{opacity:0}

/* ── yükleme durumu ─────────────────────────────────────────────────────── */
.proc__loader{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:var(--bg-black);transition:opacity .7s var(--ease-io);
}
.proc__loader.is-gone{opacity:0;pointer-events:none}
.proc__loader-bar{
  width:min(200px,40vw);height:2px;border-radius:2px;overflow:hidden;
  background:var(--silver-line);
}
.proc__loader-bar::after{
  content:'';display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:loaderSweep 1.15s linear infinite;
}
@keyframes loaderSweep{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* ════════════════════════════════════════════════════════════════════════
   STATİK / YEDEK KATMAN
   JS yokken, WebGL yokken ve arama motorları için görünen sürüm.
   ═════════════════════════════════════════════════════════════════════ */
.proc__static{padding:6rem var(--gutter) 7rem;max-width:var(--maxw);margin-inline:auto}
.proc__static-head{text-align:center;margin-bottom:3.4rem}
.proc__static-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:700}

.proc__schema-wrap{overflow-x:auto;margin-bottom:4rem;padding-bottom:.5rem}
.proc__schema{width:100%;min-width:900px;height:auto;display:block}
.proc__schema-node{fill:var(--bg-navy);stroke:rgb(var(--c-cyan) / .55);stroke-width:1.5}
.proc__schema-num{
  fill:var(--cyan);font-family:var(--font-head);font-weight:700;font-size:15px;
  text-anchor:middle;dominant-baseline:central;
}
.proc__schema-label{
  fill:var(--silver);font-family:var(--font);font-size:13px;text-anchor:middle;
}

.proc__steps{display:grid;gap:1.1rem}
.proc__step{
  position:relative;padding:1.9rem 2rem 1.7rem 4.6rem;
  border:1px solid var(--glass-border);border-radius:16px;background:var(--glass-bg);
}
.proc__step-num{
  position:absolute;left:1.6rem;top:1.85rem;
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;
  color:transparent;-webkit-text-stroke:1.2px rgb(var(--c-cyan) / .5);
}
.proc__step-title{font-size:1.3rem;font-weight:700;margin-bottom:.4rem}
.proc__step-lead{color:var(--cyan-soft);font-weight:500;margin-bottom:.55rem;font-size:.95rem}
.proc__step-desc{color:var(--muted);font-size:.93rem}
.proc__facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;list-style:none}
.proc__facts li{
  font-size:.71rem;color:var(--silver);padding:.34rem .66rem;border-radius:999px;
  border:1px solid var(--silver-line);
}
.proc__facts li[data-todo]{border-color:rgba(240,196,80,.34);color:#f0d489}

/* ── kapanış bloğu (statik görünüm) ─────────────────────────────────────── */
.proc__finale{
  margin-top:2.6rem;padding:2.6rem 2rem;text-align:center;
  border:1px solid var(--glass-border);border-radius:18px;
  background:
    radial-gradient(80% 120% at 50% 0%,rgb(var(--c-cyan) / .10),transparent 70%),
    var(--glass-bg);
}
.proc__finale-title{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:700;margin-bottom:.7rem}
.proc__finale-lead{color:var(--cyan-soft);font-weight:500;margin-bottom:.6rem}
.proc__finale-desc{color:var(--muted);font-size:.95rem;max-width:56ch;margin-inline:auto}
.proc__finale .proc__facts{justify-content:center}

/* ── ürün kartı (statik görünüm) ────────────────────────────────────────── */
.proc__product{
  margin-top:1.1rem;padding:2.4rem 2rem;text-align:center;
  border:1px solid var(--glass-border);border-radius:18px;background:var(--glass-bg);
}
.proc__product-title{
  font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;letter-spacing:.02em;
  margin-bottom:.4rem;
}
.proc__product-lead{
  color:var(--cyan-soft);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;font-size:.78rem;margin-bottom:.8rem;
}
.proc__product-lead[data-todo]{color:#f0d489}
.proc__product-desc{color:var(--muted);font-size:.95rem;max-width:54ch;margin-inline:auto}
.proc__product .proc__facts{justify-content:center}

/* panelde ürün adı büyük ve markalı dursun */
.proc__panel-item--finale .proc__panel-lead[data-todo]{color:#f0d489}

/* 3D katman devredeyken statik katman gizlenir (metin JS ile klonlanmış olur) */
.proc.is-3d .proc__static{display:none}

/* ── final beat'i: gösterge söner, panel öne çıkar ──────────────────────── */
.proc__panel-item--finale .proc__panel-title{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.proc.is-finale .proc__hud{opacity:.28;transition:opacity .8s var(--ease-io)}
.proc__hud{transition:opacity .8s var(--ease-io)}

/* ── ürün adındaki marka vurgusu ────────────────────────────────────────── */
/* Sitede .grad yalnızca .section-title ve .page-hero__title altında tanımlı. */
.proc__product-title .grad,
.proc__panel-title .grad{
  background:linear-gradient(100deg,var(--cyan-soft),var(--blue-soft) 55%,var(--blue));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── RTL (Arapça) ───────────────────────────────────────────────────────── */
/* Panel ve gösterge mutlak konumlu; dir=rtl bunları kendiliğinden aynalamaz. */
[dir="rtl"] .proc__panel{left:auto;right:var(--gutter)}
[dir="rtl"] .proc__hud{right:auto;left:calc(var(--gutter) * .62)}
[dir="rtl"] .proc__hud-dot{flex-direction:row-reverse;text-align:left;padding:.42rem .9rem .42rem 0}
[dir="rtl"] .proc__controls{left:auto;right:var(--gutter)}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   — --gutter'ı ezmiyoruz: styles.css onu kırılım noktalarında zaten ayarlıyor.
   ═════════════════════════════════════════════════════════════════════ */
/* Dar masaüstünde dikey ray makinenin üstüne biniyor — kadraj daraldıkça
   ürün ortaya kayıyor, 180px'lik etiket tam onun üzerine düşüyor. Ray kalsın,
   etiketler gitsin. Görsel olarak gizlenir ama erişilebilirlik ağacında kalır:
   düğmenin adı o span. */
@media (max-width:1400px){
  .proc__hud-dot span{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .proc__hud-dot{padding:.42rem 0}
}

@media (max-width:1024px){
  .proc__hud{right:auto;left:var(--gutter);top:auto;bottom:auto;
    top:calc(var(--proc-chrome) + 1.1rem);translate:0 0;flex-direction:row;gap:.55rem}
  .proc__hud-dot{padding:.5rem .1rem}
  .proc__controls{left:auto;right:var(--gutter);top:calc(var(--proc-chrome) + 1.1rem)}
  .proc__scrollhint{display:none}
  /* Yatay rayda taraflar da aynalanmalı. */
  [dir="rtl"] .proc__hud{left:auto;right:var(--gutter)}
  [dir="rtl"] .proc__controls{right:auto;left:var(--gutter)}
}
@media (max-width:720px){
  .proc__stage{height:760svh}
  .proc__panel{
    left:var(--gutter);right:var(--gutter);width:auto;
    bottom:clamp(1.6rem,4vh,3rem);
  }
  .proc__panel-desc{font-size:.88rem;line-height:1.6}
  .proc__panel-facts li{font-size:.66rem;padding:.3rem .55rem}
  .proc__step{padding:1.5rem 1.3rem 1.4rem 1.3rem}
  .proc__step-num{position:static;display:block;margin-bottom:.5rem}
}

/* ════════════════════════════════════════════════════════════════════════
   ERİŞİLEBİLİRLİK
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .proc__loader-bar::after{animation:none;width:100%}
  .proc__panel-item{transition-duration:.01ms;transform:none}
}

/* ════════════════════════════════════════════════════════════════════════
   AKIŞ MODU — dokunmatik cihazlar (.proc.is-flow, sınıfı boot.js koyar)

   Masaüstünde sahne tam ekran sabitlenir ve kaydırma videoyu kare kare sürer.
   Dokunmatikte bu iki sebeple çalışmıyordu:
     1) iOS Safari'de kare kare seek tamponlanmıyor, görüntü donuyor — bu yüzden
        video zaten kendi başına döngüde oynatılıyordu.
     2) Dikey telefonda (en-boy ~0,46) 16:9 video `object-fit:contain` ile
        375×211'lik bir banda sığıyor, 812px'lik sabit sahnenin %75'i boş
        kalıyor ve panel metni ekranın dibine çapalandığı için videodan kopuk,
        üstüne binmiş görünüyordu.

   Çözüm: sabitlemeyi tamamen bırak. Video normal akan bir 16:9 blok olur,
   metin onun ALTINA geçer. Böylece boşluk da çakışma da ortadan kalkar.
   Metni artık videonun currentTime'ı sürüyor (bkz. boot.js cineTick).
   ═════════════════════════════════════════════════════════════════════ */
.proc.is-flow .proc__stage{ height:auto; }
.proc.is-flow .proc__sticky{
  position:static; height:auto; overflow:visible;
  padding-bottom:1.6rem;
}
.proc.is-flow .proc__video{
  position:relative; inset:auto;
  width:100%; height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;                    /* contain kuralını ezer: bant yok */
  border-radius:16px;
}
/* Perde ve vinyet metin videonun üstündeyken gerekliydi; artık altında. */
.proc.is-flow .proc__vignette{ display:none; }
.proc.is-flow .proc__panel-item{ text-shadow:none; }

/* Panel videonun altında, akışın içinde. Öğeler çapraz geçiş için üst üste
   durmak zorunda; bunu mutlak konumla yapmak kabı yüksekliksiz bırakıyordu ve
   sabit bir min-height tahmini gerekiyordu. Ölçüldü: öğeler 208–329px arasında
   değişiyor, 15rem'lik tahmin en uzununu 89px taşırıp alttaki göstergelerin
   üstüne bindiriyordu.

   Izgara yığını bunu tahmine gerek bırakmadan çözer: hepsi aynı hücrede
   (grid-area 1/1), satır yüksekliği en uzun öğeye göre oluşur. Çapraz geçiş
   aynen çalışır ve aşama değişirken yükseklik zıplamaz. */
.proc.is-flow .proc__panel{
  position:relative; inset:auto; left:auto; bottom:auto;
  width:auto; margin:1.4rem var(--gutter) 0;
  display:grid; min-height:0;
}
.proc.is-flow .proc__panel-item{
  position:relative; grid-area:1 / 1;
  top:auto; bottom:auto; left:auto; right:auto; width:auto;
}

/* Sinematik düğmesi mutlak konumluydu ve akış modunda videonun üstüne biniyordu.
   Akışa alınıp göstergeyle aynı satıra, videonun altına taşındı. */
.proc.is-flow .proc__controls{
  position:relative; inset:auto; top:auto; left:auto;
  justify-content:center; margin:1rem var(--gutter) 0;
}

/* Aşama göstergesi dikey sütundan yatay noktalara döner, videonun altına. */
.proc.is-flow .proc__hud{
  position:relative; inset:auto; translate:none;
  flex-direction:row; justify-content:center; gap:.55rem;
  margin-top:1rem; padding:0 var(--gutter);
}
.proc.is-flow .proc__hud-dot{ padding:.42rem .2rem; }
.proc.is-flow .proc__hud-dot span:not(.proc__hud-mark){ display:none; }

/* En-boy kuralı yalnızca sabitlenmiş sahne için anlamlıydı. */
@media (max-aspect-ratio:1/1){
  .proc.is-flow .proc__video{ object-fit:cover; }
}

/* Panel rozetleri mobilde 2+1 kırılıyordu — daha sıkı paketlensin. */
@media (max-width:680px){
  .proc__panel-facts{ gap:.35rem; margin-top:.9rem; }
  .proc__panel-facts li{ font-size:.62rem; padding:.26rem .5rem; }
}