/* ==========================================================================
   Grey Enerji — sahne katmanı
   Atmosfer derinliği, 3B ürün medyası, başlık/altbilgi ayrışması.
   cinema.css'ten SONRA yüklenir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ATMOSFER — düz lacivert blokları kıran derinlik
   Dekoratif gradyan değil: ölçü ızgarası + tek bir yönlü ışık havuzu.
   -------------------------------------------------------------------------- */
.atmo { position: relative; isolation: isolate; }
.atmo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(to right, rgba(140, 170, 190, 0.05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(140, 170, 190, 0.05) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 12%, transparent 76%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 12%, transparent 76%);
  pointer-events: none;
}
.atmo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(64% 52% at var(--ax, 22%) var(--ay, 38%), rgba(31, 127, 212, 0.14), transparent 70%);
  pointer-events: none;
}
.atmo--sag::after { --ax: 78%; }
.atmo--earth::after { background: radial-gradient(60% 50% at var(--ax, 24%) 44%, rgba(103, 180, 69, 0.11), transparent 70%); }
.atmo--fault::after { background: radial-gradient(62% 52% at var(--ax, 74%) 40%, rgba(232, 88, 74, 0.13), transparent 70%); }

/* --------------------------------------------------------------------------
   TİPOGRAFİK DURAK — arkasında sahne var, boş lacivert değil
   -------------------------------------------------------------------------- */
.statement { overflow: clip; padding-block: clamp(84px, 9.5vw, 148px); }

.statement__bg { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.statement__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: grayscale(0.3) contrast(1.06);
  transform: scale(1.05);
}
.statement__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--void) 4%, rgba(4, 18, 29, 0.88) 32%, rgba(4, 18, 29, 0.52) 64%, rgba(4, 18, 29, 0.74) 100%);
}
.statement--right .statement__bg::after {
  background: linear-gradient(265deg, var(--void) 4%, rgba(4, 18, 29, 0.88) 32%, rgba(4, 18, 29, 0.52) 64%, rgba(4, 18, 29, 0.74) 100%);
}

/* --- markalı zemin -------------------------------------------------------
   Montaj makrosunda Grey Group logosu iki yerde: göğüste ve eldivende, ikisi
   de karenin sol yarısında. Kare burada "atmosfer" olmaktan çıkıp markalı bir
   görsele dönüşüyor: opaklık yükseliyor, perde tamamen sağa çekiliyor ve sol
   yarı hem yazıdan hem koyu katmandan arınıyor. */
.statement--marka .statement__bg img {
  opacity: 0.46;
  filter: grayscale(0.12) contrast(1.05);
}
.statement--marka .statement__bg::after {
  background: linear-gradient(to left,
    rgba(4, 18, 29, 0.94) 0%,
    rgba(4, 18, 29, 0.82) 26%,
    rgba(4, 18, 29, 0.36) 50%,
    rgba(4, 18, 29, 0.08) 68%,
    transparent 80%);
}
/* Metin kutuları da sola taşmıyor: hizalama değil, kutunun kendisi sağda
   duruyor, böylece logonun üstünde saydam bir blok bile kalmıyor. */
.statement--marka .statement__text { max-width: 15ch; margin-left: auto; }
.statement--marka .statement__note { max-width: 40ch; margin-left: auto; }

/* Dar ekranda metni sağa itecek yer yok; kare markalı bir görsel olarak
   duramayacağı için tamamen kaldırılıyor — yarı görünür bir logo, görünmeyen
   logodan daha kötü. */
@media (max-width: 900px) {
  .statement--marka .statement__bg { display: none; }
  .statement--marka { display: block; }
  .statement--marka .statement__in { text-align: left; }
  .statement--marka .statement__text,
  .statement--marka .statement__note { margin-left: 0; max-width: none; }
}

/* --------------------------------------------------------------------------
   BAŞLIK — zeminden net ayrışır
   -------------------------------------------------------------------------- */
/* Sayfa en üstteyken bile: üstten inen ince karartma, logoyu ve gezinmeyi
   hangi video karesi gelirse gelsin okunur tutar. */
.site-head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(3, 14, 23, 0.86) 0%, rgba(3, 14, 23, 0.42) 48%, transparent 100%);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.site-head[data-stuck='true']::before { opacity: 0; }

.site-head[data-stuck='true'] {
  background: linear-gradient(to bottom, rgba(3, 14, 23, 0.94), rgba(3, 14, 23, 0.84));
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(140, 170, 190, 0.18), 0 16px 44px -26px rgba(0, 0, 0, 0.95);
}

/* --------------------------------------------------------------------------
   ALTBİLGİ — kesilmiş değil, kapatılmış
   -------------------------------------------------------------------------- */
.site-foot {
  position: relative;
  background: linear-gradient(to bottom, #030e17 0%, #02090f 100%);
  border-top: 1px solid var(--hair-2);
}
.site-foot::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 168, 240, 0.55) 26%, rgba(103, 180, 69, 0.42) 70%, transparent);
}
.foot__brand .brand__mark { height: 44px; }
.foot__brand .brand__word { height: 24px; }
.foot__grid { padding-block: clamp(52px, 7vw, 84px) 34px; }

/* --------------------------------------------------------------------------
   ÜRÜN MEDYASI — fotoğraf ⇄ 3B model, aynı alanda
   -------------------------------------------------------------------------- */
.media3d {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  height: clamp(320px, 54vh, 580px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.media3d::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(44% 40% at 50% 50%, rgba(31, 127, 212, 0.16), transparent 74%);
}
/* Ürün ışığın önünde: gerçek rengi perdelenmiyor. */
.media3d__foto,
.media3d__yuva { z-index: 1; }

.media3d__foto,
.media3d__yuva {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: grid;
  /* İç ızgara satırı da içeriğe göre büyümemeli; aksi hâlde uzun ürün
     fotoğrafları kadrajı aşıyor ve max-height çözülemiyor. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-snap);
}
.media3d__foto img {
  max-height: 100%;
  width: auto;
  max-width: 86%;
  object-fit: contain;
  object-fit: contain;
  filter: drop-shadow(0 34px 56px rgba(0, 0, 0, 0.6));
}
.media3d__yuva { opacity: 0; transform: scale(0.97); pointer-events: none; }
.media3d[data-durum='model'] .media3d__foto { opacity: 0; transform: scale(1.03); pointer-events: none; }
.media3d[data-durum='model'] .media3d__yuva { opacity: 1; transform: none; pointer-events: auto; }
.media3d[data-durum='yukleniyor'] .media3d__foto { opacity: 0.22; }

.media3d .mv {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
  outline: none;
}

/* Yükleme: teknik ölçüm hissi, jenerik spinner değil. */
.media3d__yuk {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 3;
}
.media3d[data-durum='yukleniyor'] .media3d__yuk { opacity: 1; visibility: visible; }
.media3d__yuk span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--chalk-2);
}
.media3d__bar {
  width: 128px;
  height: 2px;
  background: var(--hair-2);
  overflow: hidden;
  position: relative;
}
.media3d__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, var(--live-bright), transparent);
  transform: translateX(-100%);
  animation: yuk-tara 1.15s linear infinite;
}
@keyframes yuk-tara { to { transform: translateX(100%); } }

/* Modeli olmayan ürün (portföyde seçilince data-model boşalır): 3B tuşu
   işe yaramayacağı için hiç görünmez. */
.media3d[data-model=''] .media3d__acts { display: none; }

/* Aksiyon tuşları — cihaz tuşu gibi, küçük ve mono */
.media3d__acts {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.mbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: rgba(3, 14, 23, 0.74);
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-2);
  cursor: pointer;
  transition: border-color 0.24s var(--ease), color 0.24s var(--ease), background 0.24s var(--ease);
}
.mbtn:hover { border-color: var(--live-bright); color: var(--white); background: rgba(3, 14, 23, 0.9); }
.mbtn i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-bright);
  box-shadow: 0 0 8px var(--live-bright);
}
.media3d[data-durum='model'] [data-3d-ac],
.media3d[data-durum='yukleniyor'] [data-3d-ac] { display: none; }
[data-3d-kapat] { display: none; }
.media3d[data-durum='model'] [data-3d-kapat] { display: inline-flex; }

.media3d__hata {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border: 1px solid rgba(232, 88, 74, 0.5);
  background: rgba(3, 14, 23, 0.92);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--fault-bright);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.media3d[data-durum='hata'] .media3d__hata { opacity: 1; }

/* --------------------------------------------------------------------------
   ÜRÜN SAYFASI — teknik yoğunluk
   -------------------------------------------------------------------------- */
.urun-hero { min-height: clamp(420px, 62vh, 700px); }
/* Ürünler uzun ve ince; medya kutusu yatay olursa 3B model üstten/alttan
   kırpılıyor. Ürün sayfasında kutuyu dikine büyütüyoruz. */
.urun-hero .media3d { height: clamp(380px, 62vh, 640px); }
.urun-hero__stage { display: none; }

.urun-bilgi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: var(--rule);
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
  background: var(--hair);
}
.urun-bilgi__k {
  background: var(--ground);
  padding: clamp(20px, 2.6vw, 30px);
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.urun-bilgi__k h3 { margin-bottom: 10px; }
.urun-bilgi__k .t-label { display: block; margin-bottom: 14px; color: var(--live-bright); }

.urun-liste { display: grid; gap: 11px; }
.urun-liste li { display: flex; gap: 12px; align-items: baseline; }
.urun-liste li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 0.7em;
  background: var(--live-bright);
  opacity: 0.7;
}

/* İlgili ürünler — küçük, yatay, katalog kartı değil */
.iliskili { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--rule); background: var(--hair); border: 1px solid var(--hair); }
.iliskili__k {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--ground);
  transition: background 0.3s var(--ease);
}
.iliskili__k:hover { background: var(--plate); }
.iliskili__k img { height: 76px; width: auto; flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
.iliskili__k b { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--white); line-height: 1.3; margin-bottom: 5px; }
.iliskili__k span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--steel-2); }
.iliskili__k a { position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   BİLGİ (SEO) SAYFALARI
   -------------------------------------------------------------------------- */
.bilgi-gövde { max-width: 68ch; }
.bilgi-gövde h2 {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--white);
  margin-top: clamp(38px, 5vw, 62px);
  margin-bottom: 14px;
}
.bilgi-gövde h2:first-child { margin-top: 0; }
.bilgi-gövde p { margin-bottom: 16px; line-height: 1.72; color: var(--chalk); }
.bilgi-gövde ul { display: grid; gap: 10px; margin-bottom: 16px; }
.bilgi-gövde li { display: flex; gap: 12px; align-items: baseline; color: var(--chalk); }
.bilgi-gövde li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 0.72em;
  background: var(--live-bright);
  opacity: 0.7;
}
.bilgi-gövde strong { color: var(--white); font-weight: 600; }

/* Soru-cevap. Açılır-kapanır yapılmadı: cevabın sayfada açık durması hem
   okuyucu hem de sayfayı tarayan motorlar için daha iyi. */
.sss { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.sss__q { padding-left: 18px; border-left: 1px solid var(--hair-2); }
.sss__q h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 8px;
}
.sss__q p { margin-bottom: 0; color: var(--chalk); }

.bilgi-yan { display: grid; gap: clamp(22px, 3vw, 34px); align-content: start; }
.bilgi-kutu {
  border: 1px solid var(--hair-2);
  border-left: 2px solid var(--live);
  border-radius: 2px;
  padding: clamp(18px, 2.2vw, 24px);
  background: rgba(31, 127, 212, 0.05);
}
.bilgi-kutu h3 { margin-bottom: 10px; }
.bilgi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 940px) { .bilgi-grid { grid-template-columns: 1fr; } }

.bilgi-liste { display: grid; gap: var(--rule); background: var(--hair); border: 1px solid var(--hair); }
.bilgi-liste a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ground);
  transition: background 0.26s var(--ease), padding-left 0.3s var(--ease-snap);
}
.bilgi-liste a:hover { background: var(--plate); padding-left: 24px; }
.bilgi-liste i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--live-bright);
  flex: none;
}
.bilgi-liste b { font-size: 0.9375rem; font-weight: 600; color: var(--chalk-2); }
.bilgi-liste a:hover b { color: var(--white); }

/* --------------------------------------------------------------------------
   LABORATUVAR — tek ekranda bağlam + kontrol
   -------------------------------------------------------------------------- */
.lab-sec { border-top: 1px solid var(--hair); }
.lab-sec__head { margin-bottom: clamp(22px, 3vw, 38px); }

/* Şema ve osiloskopu yan yana getir: kullanıcı aynı anda hem devreyi hem
   sonucu görsün, alt alta uzayıp ekrandan taşmasın. */
@media (min-width: 1100px) {
  .lab { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lab__grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .scope canvas { height: clamp(260px, 30vh, 330px); }
  .stage svg { max-height: 190px; }
}
.stage { padding-block: clamp(10px, 1.6vw, 18px); }
.verdict { padding-block: clamp(14px, 2vw, 22px); }

/* "Darbe gönder" her zaman görünür ve birincil olsun. */
.panel { padding: 16px; gap: 14px; }
.panel .btn--live { position: sticky; bottom: 0; }

/* --------------------------------------------------------------------------
   KAÇAK YOLU — dikey yayılmayı kıs
   -------------------------------------------------------------------------- */
.creep__view { min-height: clamp(340px, 52vh, 560px); }
.creep__view svg { max-width: min(380px, 100%); }

/* --------------------------------------------------------------------------
   MOBİL / TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .statement__bg img { opacity: 0.16; }
  .media3d { height: clamp(240px, 36vh, 340px); }
  /* Ürün sayfasındaki dikine büyütme masaüstü içindi; telefonda başlık,
     değerler ve iki aksiyon da aynı ekrana sığmalı. */
  .urun-hero .media3d { height: clamp(220px, 34vh, 320px); }
  .media3d__acts { bottom: 0; }
  .mbtn { padding: 8px 12px; font-size: 0.5625rem; letter-spacing: 0.12em; }
  .iliskili__k img { height: 60px; }
  .lab__bar { gap: 8px; padding: 11px 14px; }
  .lab__bar .t-label:last-child { display: none; }
}

/* --------------------------------------------------------------------------
   LABORATUVAR — tek ekranda bağlam + sonuç + kontrol
   Şema max-height ile küçültülünce kendi bandının ortasında asılı kalıyordu;
   doğal oranında bırakıp bandı ona göre sıkıyoruz.
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .stage svg { max-height: none; }
  .scope canvas { height: clamp(250px, 27vh, 300px); }
  .lab-sec { padding-block: clamp(52px, 7vw, 92px); }
  .lab-sec__head { margin-bottom: clamp(20px, 2.4vw, 30px); }
}
.stage { padding-block: clamp(6px, 1vw, 12px); }

/* "Darbe gönder" ikincil kontrollerin altında kaybolmasın: panelde birincil
   eylem her zaman üstte ve tam genişlikte. */
.panel { display: grid; }
.panel .btn--live { order: -1; justify-content: center; position: static; }
.panel .switch { order: -2; }
.ctl-more { order: 10; }

/* --------------------------------------------------------------------------
   MOBİLDE İNTERAKTİF ALANLAR — kontrollü
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .scope canvas { height: clamp(210px, 32vh, 260px); }
  .verdict { grid-template-columns: 1fr auto; gap: 12px; padding: 14px 15px; }
  .verdict__num { font-size: clamp(2.2rem, 12vw, 3rem); }
  .verdict__side { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .stage svg { max-height: 150px; }
  .creep__view { min-height: clamp(280px, 40vh, 380px); }
  .creep__view svg { max-width: min(260px, 74%); }
  .creep__num { font-size: clamp(2.2rem, 11vw, 3rem); }
  .showcase__side { gap: 18px; }
  .spec__amac { min-height: 0; }
  .statement__text { font-size: clamp(2.1rem, 10.5vw, 3.4rem); }
  .bleed { min-height: clamp(400px, 64vh, 620px); }
  .urun-hero__ad { font-size: clamp(1.8rem, 8.4vw, 2.6rem); }
}

/* --------------------------------------------------------------------------
   PORTFÖY MEDYASI — aynı alan: yedi ürün fotoğrafı ⇄ seçili ürünün 3B modeli
   Ürün sayfasındaki media3d ile aynı bileşen; burada kaynak ürün seçimiyle
   değişiyor (js/showcase.js). Alanın yüksekliği durumdan bağımsız sabit.
   -------------------------------------------------------------------------- */
.media3d--sahne {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 38vh, 430px);
}
/* Ürün fotoğrafı kadrajı asla taşmaz; küçük ürünler de gereğinden fazla
   büyütülmez, gerçek ölçek farkı korunur. */
.media3d__foto img { max-height: 100%; }
.media3d--sahne .showcase__shot { grid-area: 1 / 1; }
.media3d--sahne .media3d__acts { bottom: 0; }

/* model-viewer kendi belge düzeyi stilinde `display: block` tanımlıyor ve bu,
   tarayıcının `[hidden] { display: none }` kuralını yeniyor. Önbellekte
   bekleyen modeller bu yüzden ızgarada yer kaplayıp görünen modeli
   küçültüyordu. */
.media3d__yuva model-viewer[hidden] { display: none; }