/* ==========================================================================
   Grey Enerji — sinematik katman
   Hero filmi, tipografik duraklar, tam-genişlik anlar, ürün sahnesi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
  background: var(--void);
  padding-left: 0;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  --fade: 900ms;
}

/* İki video üst üste; hiçbiri DOM'dan çıkmaz, yalnızca opaklık çaprazlanır. */
.hero__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 0;
  transition: opacity var(--fade) linear;
  will-change: opacity;
}
.hero__v[data-on='true'] { opacity: 1; }

/* Film başlayana kadar (ve otomatik oynatma reddinde) poster görünür. */
.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 1;
  transition: opacity 600ms linear;
}
.hero[data-film='oynuyor'] .hero__still { opacity: 0; }

/*  Renk derecelendirme -----------------------------------------------------
    Üç klip üç ayrı çekim; tek bir film gibi dursunlar diye ortak bir soğuk
    derecelendirme uygulanır. soft-light, görüntüyü öldürmeden marka lacivertine
    çeker — düz siyah overlay'in aksine detay ve kontrast korunur.            */
.hero__grade {
  position: absolute;
  inset: 0;
  background: var(--live-deep);
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--fade) linear;
}

/*  Okunabilirlik perdesi ---------------------------------------------------
    Her klibin pozlaması farklı, bu yüzden perde de farklı. 2. klipte (gün
    batımı) sol %40'ın ortalama parlaklığı ~120; orada beyaz metin okunmaz.
    3. klipte ~52, 1. klipte ~25 — daha hafif perde yetiyor.                  */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--fade) linear, background var(--fade) linear;
  background:
    linear-gradient(100deg,
      rgba(4, 18, 29, 0.92) 0%,
      rgba(4, 18, 29, 0.74) 26%,
      rgba(4, 18, 29, 0.30) 52%,
      rgba(4, 18, 29, 0.05) 74%,
      transparent 100%),
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(7, 26, 41, 0.45) 18%,
      transparent 46%);
}
.hero__stage[data-grade='parlak'] .hero__scrim {
  background:
    linear-gradient(100deg,
      rgba(4, 18, 29, 0.96) 0%,
      rgba(4, 18, 29, 0.88) 30%,
      rgba(4, 18, 29, 0.52) 56%,
      rgba(4, 18, 29, 0.16) 78%,
      transparent 100%),
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(7, 26, 41, 0.55) 20%,
      transparent 50%);
}
.hero__stage[data-grade='parlak'] .hero__v { filter: brightness(0.64) contrast(1.08) saturate(0.78); }
.hero__stage[data-grade='koyu'] .hero__v { filter: brightness(1.06) contrast(1.04) saturate(0.86); }
.hero__stage[data-grade='gece'] .hero__v { filter: brightness(0.96) contrast(1.1) saturate(0.82); }
.hero__v { transition: opacity var(--fade) linear, filter var(--fade) linear; }

/*  İçerik ------------------------------------------------------------------ */
.hero__body {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
  padding-block: clamp(120px, 18vh, 200px) clamp(40px, 8vh, 90px);
}

.hero__title .hero__kicker,
.hero__kicker {
  display: flex;
  line-height: 1.4;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3.4vw, 34px);
  color: var(--chalk-2);
}
.hero__kicker::before {
  content: '';
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: var(--live-bright);
  flex: none;
}

/*  Başlık: kompozisyonun ana elemanı. Ekran genişledikçe agresif büyür,
    satır yüksekliği sıkışır. max-width karakterle sınırlanır ki sağdaki
    ürün görüntüsünün üstüne taşmasın.                                        */
.hero__title {
  font-size: clamp(3rem, 8.6vw, 9rem);
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--white);
  max-width: 13ch;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title .ln2 {
  color: transparent;
  background: linear-gradient(98deg, var(--live-glow) 0%, var(--live-bright) 44%, var(--live) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.06em; /* g/ç sarkmaları kırpılmasın */
}

.hero__sub {
  margin-top: clamp(22px, 3.2vw, 36px);
  max-width: 40ch;
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.62;
  color: var(--chalk);
}

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 46px);
}

/* Hero'da ikincil düğme videonun üstünde duruyor: ince bir koyu dolgu,
   hangi kare gelirse gelsin kenarı ve yazısı okunur kalsın. */
.hero__ikincil {
  background: rgba(4, 18, 29, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(205, 220, 230, 0.32);
  color: var(--white);
}
.hero__ikincil:hover { background: rgba(4, 18, 29, 0.6); }

/*  Metin bağlantısı: SaaS düğmesi değil, sinematik altyazı gibi. */
.link-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--chalk-2);
  border-bottom: 1px solid var(--hair-2);
  transition: color 0.26s var(--ease), border-color 0.26s var(--ease);
}
.link-line:hover { color: var(--white); border-bottom-color: var(--live-bright); }
.link-line span { transition: transform 0.3s var(--ease-snap); }
.link-line:hover span { transform: translateX(5px); }

/*  Alt şerit: filmin üç perdesi ------------------------------------------- */
.hero__foot {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hair);
  background: linear-gradient(to top, rgba(4, 18, 29, 0.72), transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hero__foot-in {
  display: flex;
  align-items: center;
  padding-block: 16px 18px;
  flex-wrap: wrap;
}

/* Üç segment: filmin üç perdesi. */
.film-bar { display: flex; gap: 7px; flex: none; }
.film-seg {
  width: 34px;
  height: 2px;
  background: var(--hair-2);
  position: relative;
  overflow: hidden;
}
.film-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--live-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.film-seg[data-aktif='true']::after { transform: scaleX(1); }

@media (max-width: 860px) {
  .hero__v, .hero__still { object-position: 58% 46%; }
  .hero__title { max-width: 11ch; }
}

/* --------------------------------------------------------------------------
   TİPOGRAFİK DURAK — ekranın neredeyse tamamen boşaldığı an
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  padding-block: clamp(110px, 010vw, 200px);
  background: var(--void);
}
.statement--edge { border-block: 1px solid var(--hair); }

.statement__text {
  font-size: clamp(2.4rem, 6.6vw, 6.4rem);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.042em;
  color: var(--white);
  max-width: 17ch;
}
.statement__text em {
  font-style: normal;
  color: var(--steel);
}
.statement__text .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  color: var(--live-bright);
}
.statement__text .fault { color: var(--fault); }
.statement__note {
  margin-top: clamp(26px, 3.6vw, 44px);
  max-width: 44ch;
  color: var(--steel-2);
  font-size: 0.9375rem;
  line-height: 1.7;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.statement--right { display: flex; justify-content: flex-end; }
.statement--right .statement__in { text-align: right; }
.statement--right .statement__text { margin-left: auto; }
.statement--right .statement__note { margin-left: auto; }

/* --------------------------------------------------------------------------
   TAM GENİŞLİK GÖRSEL AN — UI azalır, malzeme konuşur
   -------------------------------------------------------------------------- */
.bleed {
  position: relative;
  min-height: clamp(460px, 76vh, 860px);
  display: grid;
  align-items: end;
  overflow: clip;
  background: var(--void);
}
.bleed__media { position: absolute; inset: 0; z-index: 0; }
.bleed__media img,
.bleed__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bleed__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--void) 0%, rgba(4, 18, 29, 0.42) 34%, rgba(4, 18, 29, 0.12) 68%, transparent 100%),
    linear-gradient(to right, rgba(4, 18, 29, 0.78) 0%, rgba(4, 18, 29, 0.18) 44%, transparent 72%);
}

/* --- markalı kareler: metin sağda ---------------------------------------
   Perde soldan başlamıyor; karenin sol yarısı — personelin sırtındaki Grey
   Group logosunun durduğu yer — hem yazıdan hem koyu katmandan tamamen
   arınmış kalıyor. Alt perde de yukarı çekildi, logo bandına değmesin diye. */
.bleed--sag .bleed__in { text-align: right; }
.bleed--sag .bleed__title,
.bleed--sag .bleed__sub { margin-left: auto; }
.bleed--sag .bleed__media::after {
  background:
    linear-gradient(to top, rgba(4, 18, 29, 0.9) 0%, rgba(4, 18, 29, 0.42) 14%, rgba(4, 18, 29, 0.08) 28%, transparent 40%),
    linear-gradient(to left, rgba(4, 18, 29, 0.88) 0%, rgba(4, 18, 29, 0.58) 26%, rgba(4, 18, 29, 0.16) 44%, transparent 56%);
}

/* Dar ekranda kare ile metin üst üste binmiyor: telefon kadrajında yatay
   kırpma o kadar sert ki bir başlık kaçınılmaz olarak logonun üstüne düşüyor.
   Bu yüzden görsel yukarı, metin altına geçiyor — markalama hiç örtülmüyor. */
@media (max-width: 820px) {
  .bleed {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .bleed__media {
    position: relative;
    height: clamp(280px, 46vh, 420px);
    flex: none;
  }
  .bleed__media img { object-position: 24% 50%; }
  .bleed__media::after,
  .bleed--sag .bleed__media::after {
    background: linear-gradient(to top, rgba(4, 18, 29, 0.6) 0%, transparent 32%);
  }
  .bleed__in { padding-block: clamp(32px, 7vw, 56px); }
  .bleed--sag .bleed__in { text-align: left; }
  .bleed--sag .bleed__title,
  .bleed--sag .bleed__sub { margin-left: 0; }
}
.bleed__in {
  position: relative;
  z-index: 1;
  padding-block: clamp(44px, 7vw, 92px);
}
.bleed__title {
  font-size: clamp(1.9rem, 4.4vw, 4.2rem);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.036em;
  color: var(--white);
  max-width: 16ch;
}
.bleed__sub {
  margin-top: 18px;
  max-width: 48ch;
  color: var(--chalk);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.66;
}

/* --------------------------------------------------------------------------
   ÜRÜN SAHNESİ — katalog ızgarası değil, editoryal keşif
   -------------------------------------------------------------------------- */
.showcase {
  position: relative;
  background: var(--void);
  border-top: 1px solid var(--hair);
  overflow: clip;
  /* Bölüm kendi nefesini iç sütunlardan alıyor; .section'ın genel dikey
     boşluğu burada gereksiz yükseklik yapıyordu. */
  padding-block: clamp(32px, 3.8vh, 52px);
}
.showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 3.4vw, 60px);
  align-items: stretch;
  min-height: clamp(420px, 52vh, 620px);
}
@media (max-width: 1000px) { .showcase__grid { grid-template-columns: 1fr; min-height: 0; } }

/*  Sol: seçili ürün, büyük ölçekte  */
.showcase__stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* Ürünün arkasındaki hafif ışık havuzu — stüdyo lambası gibi. */
.showcase__stage::before {
  content: '';
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  background: radial-gradient(52% 44% at 50% 48%, rgba(31, 127, 212, 0.20), transparent 72%);
  transition: opacity 0.6s var(--ease);
}
.showcase__shot {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
/* Ürün kadraja SIĞAR; kadrajı doldurmak için büyütülmez. Kaynak çözünürlüğü
   aşan büyütme ürünü bulanıklaştırıyor, küçük aksesuarlar ise boş bir alan
   gibi görünüyordu. Ürün başına büyütme tavanı işaretlemede (max 1,6×). */
.showcase__shot img {
  position: absolute;
  max-height: 100%;
  width: auto;
  max-width: 84%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(26px) scale(0.965);
  transition: opacity 0.62s var(--ease), transform 0.72s var(--ease-snap);
  filter: drop-shadow(0 38px 60px rgba(0, 0, 0, 0.62));
  will-change: opacity, transform;
}
.showcase__shot img[data-on='true'] { opacity: 1; transform: none; }


/*  Sağ: ürün listesi + seçili ürünün künyesi  */
.showcase__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 18px);
}

.pick { display: grid; }
.pick__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.4ch 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  /* 8 ürünle liste bir satır uzadı; bölüm tek ekranda kalsın diye satır
     dolgusu biraz daraldı (9 → 7 px). */
  padding: clamp(5px, 0.6vw, 7px) 0;
  border-bottom: 1px solid var(--hair);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
  cursor: pointer;
  color: var(--steel-2);
  transition: color 0.3s var(--ease), padding-left 0.4s var(--ease-snap);
}
.pick__row:first-child { border-top: 1px solid var(--hair); }
.pick__row:hover { color: var(--chalk-2); }
.pick__row[aria-selected='true'] { color: var(--white); padding-left: 12px; }

/* Seçili satırın solundaki enerjili işaret. */
.pick__row::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--live-bright);
  transform: translateY(-50%);
  transition: height 0.4s var(--ease-snap);
}
.pick__row[aria-selected='true']::before { height: 62%; }
.pick__row--koruma[aria-selected='true']::before { background: var(--earth); }

.pick__no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--steel);
}
.pick__row[aria-selected='true'] .pick__no { color: var(--live-bright); }
.pick__ad {
  font-size: clamp(0.94rem, 1.15vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.pick__deg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--steel);
  white-space: nowrap;
}
.pick__row[aria-selected='true'] .pick__deg { color: var(--chalk-2); }

/*  Seçili ürünün künyesi  */
.spec { display: grid; gap: 10px; }
.spec__rol {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.spec__rol i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.spec__amac {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.58;
  color: var(--chalk);
  max-width: 46ch;
  /* Ürün değişince künye zıplamasın diye sabit yükseklik; en uzun metne göre. */
  min-height: 4.74em;
}
.spec__vals {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.2vw, 34px);
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.spec__val dt { margin-bottom: 4px; }
.spec__val dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
}
.spec__val dd small { font-size: 0.6875rem; color: var(--steel-2); margin-left: 3px; letter-spacing: 0; }

/* Geçişte künye içeriği yumuşak değişsin. */
.spec[data-swap='true'] .spec__amac,
.spec[data-swap='true'] .spec__vals,
.spec[data-swap='true'] .spec__rol { opacity: 0; transform: translateY(7px); }
.spec__amac, .spec__vals, .spec__rol {
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}

/* --------------------------------------------------------------------------
   SÜREÇ — kart dizisi değil, ilerleyen bir hat
   -------------------------------------------------------------------------- */
.flow { position: relative; }
.flow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 30px);
  padding-top: 52px;
}
@media (max-width: 900px) { .flow__track { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; } }

/* Adımların üstünden geçen hat; kaydırmayla dolar. */
.flow__line {
  position: absolute;
  top: 17px; left: 0; right: 0;
  height: 1px;
  background: var(--hair-2);
}
.flow__line::after {
  content: '';
  position: absolute; inset: 0;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(to right, var(--live), var(--live-bright));
  box-shadow: 0 0 14px rgba(74, 168, 240, 0.55);
  transition: transform 0.7s var(--ease);
}
@media (max-width: 900px) {
  .flow__line { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .flow__line::after { transform-origin: top; transform: scaleY(var(--p, 0)); }
}

.flow__step { position: relative; }
.flow__dot {
  position: absolute;
  top: -42px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: var(--void);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.flow__step[data-reached='true'] .flow__dot {
  background: var(--live-bright);
  border-color: var(--live-bright);
  box-shadow: 0 0 0 4px rgba(74, 168, 240, 0.16);
}
@media (max-width: 900px) {
  .flow__step { padding-bottom: 30px; }
  .flow__dot { top: 6px; left: -34px; }
}
.flow__no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--steel);
  display: block;
  margin-bottom: 10px;
}
.flow__step[data-reached='true'] .flow__no { color: var(--live-bright); }
.flow__ad {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--chalk-2);
  line-height: 1.28;
}
.flow__step[data-reached='true'] .flow__ad { color: var(--white); }

/* --------------------------------------------------------------------------
   AÇIK YÜZEY — koyu tonal frekansı kıran teknik gri bölüm
   -------------------------------------------------------------------------- */
.pale {
  background: linear-gradient(176deg, #dfe6ea 0%, #cdd7dd 100%);
  color: #16242e;
  position: relative;
}
.pale .t-label { color: #5c7080; }
.pale .t-h2, .pale h2, .pale h3 { color: #0c1a24; }
.pale .t-body, .pale .t-small, .pale p { color: #35505f; }
.pale .sec-head { border-bottom-color: rgba(22, 36, 46, 0.18); }
.pale .sec-head__no { color: #1f6fb8; }
.pale .statement__text { color: #0c1a24; }
.pale .statement__text em { color: #7e929e; }
.pale .statement__note { color: #43606f; border-top-color: rgba(22, 36, 46, 0.18); }
.pale .link-line { color: #2c4655; border-bottom-color: rgba(22, 36, 46, 0.26); }
.pale .link-line:hover { color: #0c1a24; border-bottom-color: #1f6fb8; }

/* --------------------------------------------------------------------------
   LABORATUVAR BÖLÜMÜ — sinematik çerçeve
   -------------------------------------------------------------------------- */
.lab-sec { background: var(--void); border-top: 1px solid var(--hair); }
.lab-sec__head,
.creep-sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(30px, 4.6vw, 60px);
}
@media (max-width: 900px) {
  .lab-sec__head, .creep-sec__head { grid-template-columns: 1fr; }
}
.lab-sec__lead, .creep-sec__lead {
  color: var(--chalk);
  font-size: clamp(0.95rem, 1.12vw, 1.08rem);
  line-height: 1.68;
  max-width: 46ch;
  padding-left: clamp(0px, 2vw, 26px);
  border-left: 1px solid var(--hair);
}
@media (max-width: 900px) { .lab-sec__lead, .creep-sec__lead { border-left: 0; padding-left: 0; } }

/*  ANA SONUÇ — grafikten önce, büyük. Debug paneli değil, manşet.  */
.verdict {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
  padding: clamp(18px, 2.6vw, 30px) clamp(16px, 2.4vw, 28px);
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(to right, rgba(31, 127, 212, 0.07), transparent 62%);
  transition: background 0.5s var(--ease);
}
.verdict[data-state='fault'] { background: linear-gradient(to right, rgba(232, 88, 74, 0.10), transparent 62%); }

.verdict__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--white);
  margin-top: 6px;
  transition: color 0.4s var(--ease);
}
.verdict[data-state='fault'] .verdict__num { color: var(--fault-bright); }
.verdict__num small { font-size: 0.22em; letter-spacing: 0.02em; color: var(--steel-2); margin-left: 6px; }

.verdict__mark {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  letter-spacing: 0.18em;
  padding: 9px 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  color: var(--earth-bright);
  transition: color 0.4s var(--ease);
}
.verdict[data-state='fault'] .verdict__mark { color: var(--fault-bright); }

.verdict__side { justify-self: end; text-align: right; }
.verdict__sub {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--earth);
  margin-top: 6px;
}
.verdict__sub small { font-size: 0.46em; color: var(--steel-2); margin-left: 4px; letter-spacing: 0; }
@media (max-width: 760px) {
  .verdict { grid-template-columns: 1fr auto; gap: 14px; }
  .verdict__side { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/*  İkincil kontroller sessizleşir  */
.ctl-more { border-top: 1px solid var(--hair); padding-top: 12px; }
.ctl-more summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  color: var(--steel-2);
  transition: color 0.2s var(--ease);
}
.ctl-more summary::-webkit-details-marker { display: none; }
.ctl-more summary::before { content: '+ '; color: var(--live-bright); }
.ctl-more[open] summary::before { content: '− '; }
.ctl-more summary:hover { color: var(--chalk-2); }
.ctl-more .ctl { margin-top: 14px; }

/*  Devre sahnesi — daha büyük, enerji akışı görünür  */
.stage { padding: clamp(14px, 2.4vw, 26px) clamp(12px, 2vw, 24px); border-top: none; }
.stage .wire { stroke: var(--steel); stroke-width: 2; fill: none; }
.stage .wire--in { stroke: var(--live); }
.stage .node { fill: var(--live-bright); }
.stage .lbl { font-size: 10px; }
.stage .lbl--eq { font-size: 11px; letter-spacing: 0.16em; fill: var(--chalk-2); }
.stage .pulse { transition: opacity 0.2s linear; }
.stage[data-arr-on='false'] [data-arr] { opacity: 0.18; }
.stage[data-state='ok'] .wire--arr,
.stage[data-state='ok'] .earth-sym { stroke: var(--earth); }
.stage[data-state='ok'] .arr-body { stroke: var(--earth); fill: rgba(103, 180, 69, 0.12); }
.stage[data-state='ok'] .arr-x { fill: none; }
.stage[data-state='ok'] .eq-body { stroke: var(--earth-deep); }

/* --------------------------------------------------------------------------
   KAÇAK YOLU BÖLÜMÜ — izolatör ekranı domine eder
   -------------------------------------------------------------------------- */
.creep-sec { background: var(--void); border-top: 1px solid var(--hair); }
.creep { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); border-radius: 4px; }
.creep__view {
  min-height: clamp(420px, 68vh, 760px);
  padding: clamp(24px, 3vw, 44px);
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(31, 127, 212, 0.10), transparent 72%),
    var(--void);
}
.creep__view svg { max-width: min(460px, 100%); }
.creep__panel { gap: clamp(20px, 2.6vw, 30px); justify-content: center; }

.creep__big { }
.creep__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  color: var(--white);
  margin-top: 8px;
}
.creep__num small { font-size: 0.24em; color: var(--steel-2); margin-left: 6px; letter-spacing: 0; }
.creep__cmp {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--steel-2);
  line-height: 1.6;
}
.creep__cmp .t-num { color: var(--chalk-2); }
.creep__state { padding-top: 16px; border-top: 1px solid var(--hair); }
.creep__state p {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   İLKELER (açık zeminde) + KAPANIŞ
   -------------------------------------------------------------------------- */
.ilke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(28px, 4vw, 46px);
  border-top: 1px solid rgba(22, 36, 46, 0.18);
}
.ilke__item .t-label { display: block; margin-bottom: 12px; color: #1f6fb8; }
.ilke__item h3 { margin-bottom: 8px; }

.cta-son { background: var(--void); border-top: 1px solid var(--hair); }
.cta-son__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 5vw, 80px);
  margin-top: clamp(38px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .cta-son__grid { grid-template-columns: 1fr; } }
.cta-son__list { counter-reset: c; }
.cta-son__list li {
  counter-increment: c;
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--chalk-2);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}
.cta-son__list li::before {
  content: counter(c, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--live-bright);
  flex: none;
}

/* --------------------------------------------------------------------------
   AÇIK ZEMİNDE SÜREÇ HATTI
   Koyu zemin için yazılmış durum renkleri açık zeminde ters çalışıyordu:
   ulaşılmamış nokta koyu (dolu gibi), ulaşılmış başlık beyaz (görünmez).
   -------------------------------------------------------------------------- */
.pale .flow__line { background: rgba(22, 36, 46, 0.18); }
.pale .flow__line::after {
  background: linear-gradient(to right, #1f6fb8, #4aa8f0);
  box-shadow: 0 0 12px rgba(31, 111, 184, 0.4);
}
@media (max-width: 900px) {
  .pale .flow__line::after { background: linear-gradient(to bottom, #1f6fb8, #4aa8f0); }
}
.pale .flow__dot {
  background: #e7edf0;
  border-color: rgba(22, 36, 46, 0.3);
}
.pale .flow__step[data-reached='true'] .flow__dot {
  background: #1f6fb8;
  border-color: #1f6fb8;
  box-shadow: 0 0 0 4px rgba(31, 111, 184, 0.16);
}
.pale .flow__no { color: #7e929e; }
.pale .flow__step[data-reached='true'] .flow__no { color: #1f6fb8; }
.pale .flow__ad { color: #46616f; transition: color 0.4s var(--ease); }
.pale .flow__step[data-reached='true'] .flow__ad { color: #0c1a24; }

/* --------------------------------------------------------------------------
   ÜRÜN SAHNESİ — ışık havuzunun kenarı görünmesin
   -------------------------------------------------------------------------- */
.showcase__stage::before {
  inset: 0;
  background: radial-gradient(44% 38% at 48% 50%, rgba(31, 127, 212, 0.17), transparent 78%);
}

/* --------------------------------------------------------------------------
   ÖLÇEK ŞERİDİ — sinematik hero'nun üstünde durmasın
   -------------------------------------------------------------------------- */

/* ==========================================================================
   İKİNCİ SANAT YÖNETİMİ TURU
   1920 / 1440 / tablet / mobil incelemesinden çıkan düzeltmeler.
   ========================================================================== */

/* --- 1. Kaçak yolu mobilde iki sütunda kalıyordu -------------------------
   cinema.css, lab.css'ten sonra yükleniyor; buradaki koşulsuz .creep kuralı
   lab.css'teki medya sorgusunu eziyordu. Sonuç: 390px'te 219px'lik bir
   izolatör görünümü ve 131px'lik bir panel. Kırılım burada tekrar tanımlanır. */
@media (max-width: 1040px) {
  .creep { grid-template-columns: minmax(0, 1fr); }
  .creep__view {
    min-height: clamp(360px, 52vh, 520px);
    border-right: none;
    border-bottom: 1px solid var(--hair);
  }
  .creep__view svg { max-width: min(340px, 74%); }
}

/* --- 2. Tipografi ölçeği -------------------------------------------------
   Başlık 1920'de 144px'de takılıyor, 834'te 72px'e düşüyordu: ikisi de
   kompozisyona göre küçük kalıyor. Eğri dikleşti, tavan yükseldi.          */
.hero__title {
  font-size: clamp(3.1rem, 10vw, 10.5rem);
  line-height: 0.84;
  letter-spacing: -0.048em;
}
@media (min-width: 1700px) { .hero__title { max-width: 12ch; } }

.statement__text { font-size: clamp(2.5rem, 7.4vw, 7.2rem); line-height: 0.92; }
.bleed__title { font-size: clamp(2rem, 5vw, 5rem); line-height: 0.96; }

/* --- 3. Koyu klipte perde fazla ağırdı -----------------------------------
   1. klip zaten karanlık; üstüne 0.92 opaklıkta perde binince sol üçte bir
   düz siyaha dönüyor ve ıslak silikon dokusu kayboluyordu.                  */
.hero__stage[data-grade='koyu'] .hero__scrim {
  background:
    linear-gradient(100deg,
      rgba(4, 18, 29, 0.80) 0%,
      rgba(4, 18, 29, 0.58) 28%,
      rgba(4, 18, 29, 0.20) 54%,
      rgba(4, 18, 29, 0.02) 76%,
      transparent 100%),
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(7, 26, 41, 0.42) 18%,
      transparent 46%);
}
.hero__stage[data-grade='gece'] .hero__scrim {
  background:
    linear-gradient(100deg,
      rgba(4, 18, 29, 0.88) 0%,
      rgba(4, 18, 29, 0.68) 28%,
      rgba(4, 18, 29, 0.26) 55%,
      rgba(4, 18, 29, 0.04) 76%,
      transparent 100%),
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(7, 26, 41, 0.45) 18%,
      transparent 46%);
}

/* --- 4. Hero dikey kompozisyonu -----------------------------------------
   İçerik hem ortalanıp hem büyük üst dolgu alınca blok aşağı kayıyor ve
   üstte ölü bir bant kalıyordu. Dolgu azaldı, blok optik merkeze oturdu.   */
.hero__body { padding-block: clamp(96px, 12vh, 140px) clamp(30px, 5vh, 62px); }

/* --- 5. Ürün sahnesi -----------------------------------------------------
   Başlık, seçili ürün, liste, açıklama, teknik değerler ve aksiyonlar tek
   masaüstü ekranında birlikte okunmalı. Yükseklik içerikten geliyor; alt
   sınır yalnızca dar içerikte sahnenin çökmesini engelliyor.               */
.showcase__grid { min-height: clamp(420px, 52vh, 620px); }
@media (max-width: 1000px) {
  .showcase__grid { min-height: 0; }
  .showcase__stage { padding-block: clamp(16px, 3vw, 30px); }
}

/* --- 6. Tablet: kompozisyon sıkışmasın ---------------------------------- */
@media (min-width: 760px) and (max-width: 1100px) {
  .hero__body { padding-block: clamp(110px, 15vh, 160px) clamp(30px, 5vh, 56px); }
  .hero__sub { max-width: 34ch; }
  .statement { padding-block: clamp(90px, 12vw, 150px); }
}


/* --------------------------------------------------------------------------
   KONTRAST DÜZELTMELERİ (denetim bulguları)
   -------------------------------------------------------------------------- */

/* Açık bölüm gradyanının altına düz bir renk koyuyoruz: hem gradyan
   desteklenmediğinde yedek oluyor, hem de kontrast ölçümü doğru çözülüyor. */
.pale { background-color: #d6dfe4; }

/* Açık zeminde küçük etiketler AA'nın altında kalıyordu (3,4:1). */
.pale .t-label { color: #46606f; }
.pale .ilke__item .t-label,
.pale .flow__step[data-reached='true'] .flow__no { color: #14548f; }
.pale .flow__no { color: #47596a; }

/* Koyu zeminde 11–12px mono etiketler --steel ile 4,19:1 veriyordu. */
.pick__no, .pick__deg { color: var(--steel-2); }
.flow__no { color: var(--steel-2); }

/* --------------------------------------------------------------------------
   ÜRÜN SAYFASI — ana sayfadaki sahne diliyle aynı ölçek
   -------------------------------------------------------------------------- */
.urun-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: center;
  min-height: clamp(460px, 68vh, 760px);
}
@media (max-width: 900px) { .urun-hero { grid-template-columns: 1fr; min-height: 0; } }

.urun-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  height: clamp(340px, 58vh, 640px);
}
.urun-hero__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(44% 40% at 50% 50%, rgba(31, 127, 212, 0.18), transparent 78%);
}
.urun-hero__stage img {
  height: 100%;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  filter: drop-shadow(0 34px 56px rgba(0, 0, 0, 0.6));
}
@media (max-width: 900px) { .urun-hero__stage { height: clamp(280px, 44vh, 400px); } }

.urun-hero__ad {
  font-size: clamp(2.1rem, 4.6vw, 4.4rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.038em;
  color: var(--white);
  max-width: 14ch;
  text-wrap: balance;
}

/* Portföy sayfası başlıkları da sinematik ölçekte olsun. */
.portfoy-bas {
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.042em;
  color: var(--white);
  max-width: 14ch;
}
.kategori-bas {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--white);
}