/* motion.css — v2: sahne ARKA PLANDA akar, içerik glass kartlarda okunur.
   Kural: canvas dekoratiftir, LCP olamaz; metin her zaman canvas'ın üstünde okunur kalır. */

:root {
  --mo-ink: #1a1a1a;
  --mo-mute: #5a6472;
  --mo-line: rgba(26, 26, 26, .12);
  --mo-accent: #1663d8;
  --mo-plate: #f6f3ee;
  --mo-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mo-card-radius: clamp(18px, 2vw, 28px);
}

/* Tek paylaşımlı WebGL canvas — sabit, tıklanamaz, tüm içeriğin arkasında */
.motion-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
  transition: opacity .3s linear;
}

/* --------------------------------------------------- Sahne = içeriği saran kap
   Yükseklik içerikten gelir; kaydırma ilerlemesi tüm bölüm boyunca sürer.
   ARKA PLAN KOYMA: sitede #main z-index:1, canvas z-index:0 — buraya konan
   herhangi bir arka plan sahneyi ÖRTER. */
.motion-stage {
  position: relative;
  isolation: isolate;
  background: transparent;
}

/* Poster kabı. STICKY KULLANILMIYOR:
   sitenin body'sinde `overflow-x: hidden` var; bu, overflow-y'yi auto yapıp
   position:sticky'yi tamamen bozuyor (ölçüldü — pencere hiç sabitlenmiyordu).
   Sahne zaten sabit (fixed) canvas'a çiziliyor; bu eleman yalnız WebGL YOKKEN
   posteri akışta göstermek için var. Canlıyken yer kaplamaz. */
.motion-stage__view {
  position: relative;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Motor yüklenecekse poster kutusu daha ilk karede akıştan çıkar.
   `is-live` anında yapılırsa altındaki içerik yukarı zıplar → CLS. */
html.motion-pending .motion-stage__view,
.motion-stage.is-live .motion-stage__view {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  overflow: hidden;
}

.motion-stage__flow {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------- Poster (WebGL yok / mobil / context kaybı) */
.motion-poster {
  display: block;
  width: 100%;
  height: auto;
  max-width: min(100%, 1180px);
  opacity: 1;
  transition: opacity .5s ease;
}

@media (min-width: 768px) {
  .motion-poster { max-height: 78%; width: auto; object-fit: contain; }
}

@media (min-width: 1600px) {
  .motion-stage__flow .section > .container { max-width: min(680px, 46%); }
}

.motion-stage.is-live .motion-poster { opacity: 0; }

/* --------------------------------------------------- GLASS KARTLAR
   Sahne arka planda aktığı için metin blokları cam panellere alınır:
   yuvarlak köşe, yarı saydam beyaz, blur. Site zaten .glass kullanıyor;
   burada aynı dil, sahnenin üstünde okunurluk için biraz daha opak. */
.motion-stage__flow .section > .container {
  position: relative;
  border-radius: var(--mo-card-radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .64));
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow:
    0 24px 60px -28px rgba(16, 24, 40, .30),
    0 2px 6px -2px rgba(16, 24, 40, .12),
    inset 0 1.5px rgba(255, 255, 255, .95);
  padding: clamp(1.4rem, 3.2vw, 3rem) clamp(1.2rem, 3vw, 3rem);
  max-width: min(940px, 100% - 3rem);
}

/* ≥1180 px: içerik SOLA, sahne SAĞ banda. Model artık kartın arkasında kaybolmaz. */
@media (min-width: 1180px) {
  .motion-stage__flow .section > .container {
    max-width: min(620px, 52%);
    margin-inline: 0 auto;
    margin-left: clamp(1.5rem, 5vw, 5.5rem);
  }
}

/* Bölüm aralıkları kart düzenine göre sıkılaşır */
.motion-stage__flow .section {
  padding-block: clamp(1.2rem, 2.6vw, 2.4rem);
}

.motion-stage__flow .section:first-child { padding-top: clamp(1.6rem, 3vw, 3rem); }
.motion-stage__flow .section:last-child { padding-bottom: clamp(2.4rem, 5vw, 5rem); }

/* Zaten koyu/renkli olan bölümler cam KART OLMAZ — kendi kimlikleri korunur */
.motion-stage__flow .section--dark > .container,
.motion-stage__flow .cta-band > .container,
.motion-stage__flow .section--tint > .container {
  background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .66));
}

.motion-stage__flow .section--dark > .container {
  background: linear-gradient(160deg, rgba(12, 18, 28, .88), rgba(12, 18, 28, .74));
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

/* Dar kart içindeki çok sütunlu ızgaralar sıkışıyordu (3 sütun × 620 px).
   Bölünmüş düzende ızgaralar tek/çift sütuna düşer. */
@media (min-width: 1180px) {
  .motion-stage__flow .grid--3,
  .motion-stage__flow .grid--4 { grid-template-columns: 1fr 1fr; }
  .motion-stage__flow .grid--2 { grid-template-columns: 1fr; }
}

@media (min-width: 1180px) and (max-width: 1400px) {
  .motion-stage__flow .grid--3,
  .motion-stage__flow .grid--4 { grid-template-columns: 1fr; }
}

/* Kart içindeki tablolar taşmasın */
.motion-stage__flow .container table { width: 100%; }
.motion-stage__flow .fact-table th { width: 40%; }

/* Bölünmüş düzen yoksa (< 1180 px) sahne bandı tüm ekranı kaplar; HUD mikro
   metni içerik kartlarının üstüne biner. Bu genişliklerde yalnız ilerleme
   çubuğu ve köşe işaretleri gösterilir. */
@media (max-width: 1179px) {
  .motion-hud__cell { display: none; }
}

/* --------------------------------------------------- Teknik HUD (ANALIZ §2①) */

.motion-hud {
  position: fixed;
  /* Sahne bandı core.js tarafından yazılır; HUD metni içeriğin üstüne binmez. */
  left: var(--mo-band-x, 0px);
  top: var(--mo-band-y, 0px);
  width: var(--mo-band-w, 100vw);
  height: var(--mo-band-h, 100vh);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease .15s;
}

.motion-stage.is-live .motion-hud { opacity: 1; }

.motion-hud__cell {
  position: absolute;
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mo-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .85);
}

.motion-hud__cell--tl { top: 14px; left: 16px; }
.motion-hud__cell--tr { top: 14px; right: 16px; }
.motion-hud__cell--bl { bottom: 14px; left: 16px; }
.motion-hud__cell--br { bottom: 14px; right: 16px; }

.motion-hud__bar {
  position: absolute;
  top: 26%;
  right: 8px;
  width: 2px;
  height: 48%;
  background: var(--mo-accent);
  transform-origin: top center;
  transform: scaleY(.02);
  opacity: .5;
}

.motion-hud::before,
.motion-hud::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--mo-line);
}

.motion-hud::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.motion-hud::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* --------------------------------------------------- 3D → DOM callout */

.motion-callouts {
  position: fixed;
  left: var(--mo-band-x, 0px);
  top: var(--mo-band-y, 0px);
  width: var(--mo-band-w, 100vw);
  height: var(--mo-band-h, 100vh);
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.motion-callout {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px 4px 7px;
  margin: -12px 0 0 10px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 8px 24px -12px rgba(16, 24, 40, .35);
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--mo-ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform, opacity;
}

.motion-callout b { font-weight: 700; }
.motion-callout em { font-style: normal; color: var(--mo-mute); }

.motion-callout__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mo-accent);
  flex: 0 0 auto;
  align-self: center;
}

/* --------------------------------------------------- OKUNURLUK DÜZELTMELERİ
   Eklenen bloklardaki etiketler (kicker/eyebrow) sitenin camgöbeği tonunda;
   açık cam kart üstünde kontrastı 2,4'e düşüyordu → FÜME'ye çekildi.
   Ayrıca "Kısa cevap" kutusu koyu hero üstünde açık kalıyordu → koyu varyant. */
:root { --mo-smoke: #4b5563; --mo-smoke-soft: #6b7280; }

[data-aeo] .kicker,
[data-aeo] .eyebrow,
.aeo-facts .kicker,
.aeo-facts .eyebrow,
.answer-box[data-aeo="answer"] .kicker {
  color: var(--mo-smoke) !important;
  letter-spacing: .12em;
}

[data-aeo] .kicker__tick,
.answer-box[data-aeo="answer"] .kicker__tick { background: var(--mo-smoke) !important; }

/* Açık cam kart içindeki beyaz metin okunmaz → füme.
   Düğmeler ve kendi koyu zemini olan bileşenler HARİÇ. */
.motion-stage__flow .section:not(.section--dark) > .container
  :is(h2, h3, h4, p, li, span, b, strong, em):not(.btn):not(.btn *):not(.cta-band *):not(.aside-card *):not(.card--dark *) {
  color: inherit;
}

/* KOYU HERO üstündeki "Kısa cevap" kutusu: koyu cam + açık metin */
.chero .answer-box[data-aeo="answer"],
.hero .answer-box[data-aeo="answer"] {
  background: linear-gradient(160deg, rgba(12, 18, 28, .72), rgba(12, 18, 28, .52)) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-left: 3px solid var(--mo-accent) !important;
  color: #e8ecf4 !important;
}

.chero .answer-box[data-aeo="answer"] p,
.hero .answer-box[data-aeo="answer"] p { color: #dfe5ef !important; }

.chero .answer-box[data-aeo="answer"] .kicker,
.hero .answer-box[data-aeo="answer"] .kicker { color: #9fb2c8 !important; }

.chero .answer-box[data-aeo="answer"] .kicker__tick,
.hero .answer-box[data-aeo="answer"] .kicker__tick { background: #9fb2c8 !important; }

/* "Kısaca" madde listesi — cevap motorları için yapısal pasaj */
.keypoints {
  margin: 1.1rem 0 0;
  padding: 1.05rem 1.25rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(20, 30, 45, .10);
  border-left: 3px solid var(--mo-accent);
  background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(246, 249, 253, .72));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  color: #1d2532;
}

.keypoints ul { margin: .55rem 0 0; padding-left: 1.05rem; }

.keypoints li {
  margin: .42rem 0;
  line-height: 1.55;
  font-size: .95rem;
  color: #38414f;
}

.keypoints li strong { color: #131a25; }

/* Koyu hero üstünde koyu cam varyantı — açık kutu hero'yu deliyordu */
.chero .keypoints,
.hero .keypoints {
  background: linear-gradient(160deg, rgba(12, 18, 28, .72), rgba(12, 18, 28, .52));
  border-color: rgba(255, 255, 255, .16);
  color: #e8ecf4;
}

.chero .keypoints li,
.hero .keypoints li { color: #cfd7e4; }

.chero .keypoints li strong,
.hero .keypoints li strong { color: #f2f5fa; }

.chero .keypoints .kicker,
.hero .keypoints .kicker { color: #9fb2c8 !important; }

.chero .keypoints .kicker__tick,
.hero .keypoints .kicker__tick { background: #9fb2c8 !important; }

/* HUD mikro metni de füme — beyaz zeminde daha okunur */
.motion-hud__cell { color: var(--mo-smoke-soft); }

/* --------------------------------------------------- Kaydırma ipucu
   Sahne canlıyken ziyaretçiye "kaydır, model canlı çalışıyor" der. */
.motion-hint {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vh, 34px);
  transform: translate(-50%, 14px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 16px 40px -18px rgba(16, 24, 40, .45), 0 2px 6px -2px rgba(16, 24, 40, .16);
  color: var(--mo-ink);
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.motion-hint.is-on { opacity: 1; transform: translate(-50%, 0); }

.motion-hint__txt { display: flex; align-items: baseline; gap: 6px; }
.motion-hint__txt b { font-weight: 700; text-transform: uppercase; }
.motion-hint__txt em { font-style: normal; color: var(--mo-mute); }

/* Fare gövdesi + içinde inip çıkan tekerlek */
.motion-hint__mouse {
  position: relative;
  width: 17px;
  height: 26px;
  border: 1.5px solid var(--mo-accent);
  border-radius: 9px;
  flex: 0 0 auto;
}

.motion-hint__mouse i {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--mo-accent);
  animation: mo-wheel 1.7s ease-in-out infinite;
}

.motion-hint__arrow {
  color: var(--mo-accent);
  font-size: 14px;
  line-height: 1;
  animation: mo-arrow 1.7s ease-in-out infinite;
}

@keyframes mo-wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(9px); opacity: .25; }
}

@keyframes mo-arrow {
  0%, 100% { transform: translateY(0); opacity: .55; }
  55% { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 520px) {
  .motion-hint { font-size: 10px; padding: 8px 13px 8px 10px; gap: 8px; }
  .motion-hint__txt em { display: none; }
}

/* --------------------------------------------------- DOM reveal */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .6s cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-i, 0) * 60ms),
    transform .6s cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-i, 0) * 60ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------- Erişilebilirlik */

@media (prefers-reduced-motion: reduce) {
  .motion-callout,
  .motion-poster,
  [data-reveal] { transition: opacity .2s linear; }

  [data-reveal] { transform: none; }
  .motion-hud__bar { display: none; }
  .motion-hint__mouse i,
  .motion-hint__arrow { animation: none; }
  .motion-hint { transition: opacity .2s linear; transform: translate(-50%, 0); }
}

/* --------------------------------------------------- Dar/orta ekran (< 1180 px)
   Bölünmüş düzen yok → sahne tüm ekrana çizilir. Bu genişliklerde HERO metni de
   sahnenin üstüne geldiği için o da cam karta alınır; ayrıca sahne biraz
   söndürülür ki kart dışındaki metin de rahat okunsun. */
@media (max-width: 1179px) {
  html.motion-live .motion-canvas { opacity: .62; }

  html.motion-live .page-hero > .container,
  html.motion-live .chero > .container,
  html.motion-live .page-hero > .container--narrow {
    position: relative;
    border-radius: var(--mo-card-radius);
    background: linear-gradient(160deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .78));
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 20px 50px -26px rgba(16, 24, 40, .28), inset 0 1.5px rgba(255, 255, 255, .95);
    padding: clamp(1.2rem, 4vw, 2rem) clamp(1rem, 4vw, 1.6rem);
    max-width: min(100% - 1.6rem, 940px);
    margin-inline: auto;
  }
}

/* --------------------------------------------------- Mobil (< 768 px)
   3D mobilde de çalışır; yalnız ölçüler küçülür. Cihaz zayıfsa veya WebGL
   yoksa boot.js motoru hiç yüklemez → poster akışta kalır. */
@media (max-width: 767px) {

  /* Poster mobilde H1'den KÜÇÜK kalmalı; aksi hâlde LCP elemanı metin yerine
     görsel olur (Bölüm 4.4: canvas/poster LCP olmayacak). */
  .motion-poster { max-width: 56%; }

  .motion-stage__flow .section > .container {
    border-radius: clamp(14px, 4vw, 20px);
    padding: clamp(1.1rem, 5vw, 1.6rem) clamp(1rem, 4.5vw, 1.4rem);
    background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88));
    max-width: calc(100% - 1.4rem);
  }

  .motion-stage__flow .section { padding-block: clamp(.7rem, 2.4vw, 1.2rem); }

  .motion-hud__cell { font-size: 9px; letter-spacing: .1em; }
  .motion-hud__cell--tl { top: 8px; left: 10px; }
  .motion-hud__cell--tr { top: 8px; right: 10px; }
  .motion-hud__cell--bl { bottom: 8px; left: 10px; }
  .motion-hud__cell--br { bottom: 8px; right: 10px; }
  .motion-hud__bar { right: 5px; }
  .motion-hud::before { top: 6px; left: 6px; width: 10px; height: 10px; }
  .motion-hud::after { bottom: 8px; right: 8px; width: 10px; height: 10px; }

  .motion-callout { font-size: 9px; padding: 3px 8px 3px 5px; }
  .motion-callout em { display: none; }
}

/* Sahne canlı değilse (WebGL yok / zayıf cihaz): yapışkan pencere akışa döner,
   poster normal içerik olarak görünür, kartlar sadeleşir. */
.motion-stage:not(.is-live) .motion-stage__view {
  position: static;
  height: auto;
  margin-bottom: 0;
  overflow: visible;
  display: block;
  max-width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.2rem);
}

.motion-stage:not(.is-live) .motion-stage__flow .section > .container {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding-inline: var(--gutter, 1.2rem);
}

.motion-stage:not(.is-live) .motion-stage__flow .section {
  padding-block: clamp(4rem, 9vw, 8rem);
}