/* ==========================================================================
   sahne.css: "nasıl çalışır" sahneleri (site/sahne/dizin.mjs, site/betik/sahne.js). SAHNE (demo) paketi.
   site.css'e girmez (60 KB bütçesi): sahne taşıyan sayfa ekStil ile yükler (dizin.mjs → SAHNE_STILI).
   Üç hâl:
   1) Betik yok: bitmiş, numaralı durağan şema + bütün adım metinleri, parça açıklamaları, kullanım seçenekleri.
   2) .sahne--duragan (hareket azaltma): aynı şema; adım ve parça düğmeleri yalnız vurguyu değiştirir, yakınlaşma yok.
   3) .sahne--canli: sahne oynar; tek adım metni görünür, denetimler açılır, kamera ve parça yakınlaşması çalışır.
   Gizli başlangıç durumu burada kurulmaz; onu sahne.js kurar. Yalnız transform ve opacity canlanır.
   Dar ekran (640 pikselin altı): durağan hâlde şema iki yarım pencereye bölünür; canlı hâlde kare pencere
   işlenen şeyi izler (kamera, sahne.js).
   ========================================================================== */

/* Sahne renkleri. Isı ve soğuk tonu yalnız şemada: ısıtma (pas turuncusu; sinyal mandalinası DEĞİL, o yalnız teklif
   dolgusunda) ve soğutma (camgöbeği). Belirteçler 00-token.css'te (--color-sahne-isi #C8501E, --color-sahne-soguk
   #087F91; tema-ust paketi, palet-karsitlik.mjs). Pencere zemininde (--color-bg-surface) 3,72 / 3,86, sayfa zemininde
   4,29 / 4,45 (arayüz ögesi ≥3:1); üstündeki beyaz çizgi 4,54 / 4,71. Sinyal turuncusu bu zeminde 1,77: ikisi karışmaz.
   Kobalt bantta kullanılmaz (3:1 tutmaz). 3D görünüm aynı iki belirteci okur (makine-3d.css → --m3d-isi, --m3d-soguk). */
.sahne {
  --sahne-isi: var(--color-sahne-isi);
  --sahne-soguk: var(--color-sahne-soguk);
  --sahne-olcum: var(--color-accent-solid);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.sahne__sahne {
  position: relative;
  display: grid;
  gap: var(--space-2);
}
/* Görünüm yığını: kesit penceresi ve (ürün sayfasında) 3D paneli aynı ızgara hücresinde üst üste durur; sekmeler
   köşede (makine-3d.css). 3D açıkken kesit görünmez olur ama yerini korur (sahne.js'in kamera ölçüsü bozulmaz). */
.sahne__gorunumler {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.sahne__gorunumler > .sahne__pencere {
  grid-area: 2 / 1;
}
.sahne--3d .sahne__gorunumler > .sahne__pencere:not(.m3d) {
  visibility: hidden;
}
.sahne--3d .sahne__pencere--es {
  display: none !important;
}
/* Pencere: şemanın plakası. 16:9 yer ayırır; düzen kayması olmaz. */
.sahne__pencere {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-plate);
  background: var(--color-bg-surface);
}
/* Aşamaya göre sahne tonu: pencerenin zemininde yumuşak ışık (ısıtma sıcak, soğutma camgöbeği, ölçüm kobalt).
   Yalnız opaklık değişir. */
.sahne__pencere::before,
.sahne__pencere::after {
  position: absolute;
  inset: 0;
  opacity: 0;
  content: "";
  pointer-events: none;
  transition: opacity var(--sure-blok) var(--ease-out);
}
.sahne__pencere::before {
  background: radial-gradient(55% 75% at 62% 38%, color-mix(in srgb, var(--sahne-isi) 22%, transparent), transparent 72%);
}
.sahne__pencere::after {
  background: radial-gradient(55% 75% at 42% 38%, color-mix(in srgb, var(--sahne-soguk) 22%, transparent), transparent 72%);
}
.sahne[data-asama='isi'] .sahne__pencere::before,
.sahne[data-asama='soguk'] .sahne__pencere::after {
  opacity: 1;
}
.sahne[data-sahne='rutubet-olcer'] .sahne__pencere::after {
  background: radial-gradient(60% 80% at 30% 50%, color-mix(in srgb, var(--sahne-olcum) 18%, transparent), transparent 75%);
}
.sahne[data-asama='olcum'] .sahne__pencere::after {
  opacity: 1;
}
.sahne__pencere--es {
  display: none;
}
/* Odak katmanı: parça seçilince sahne.js translate + scale verir */
.sahne__odak {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform var(--sure-cekmece) var(--ease-out);
}
.sahne__cizim {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  transform-origin: 0 0;
}

/* "Temsili kesit": pencerenin sol üst köşesinde (iki şemada da orası boş) */
.sahne__temsili {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  margin: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-plate);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-raised);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-dense);
}
/* Geniş pencerede kamera yakınlaşınca sol üst köşeye etkin adımın rozeti düşüyor (FRB 2–4, PM 2/3/5/6. adım);
   sağ alt köşe bütün adımlarda rozetsiz kalıyor (dogrula-gorsel ölçümü). Dar ekranda sol üst daha az çakışıyor. */
@media (min-width: 640px) {
  .sahne__temsili {
    top: auto;
    bottom: var(--space-2);
    left: auto;
    right: var(--space-2);
  }
}
/* Durum satırı: pencerenin hemen altında; yeri hep ayrılır (adım değişince düzen kaymaz) */
.sahne__durum {
  min-height: 1.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity var(--sure-acilir) var(--ease-out);
}
.sahne__durum li {
  display: none;
}
.sahne__durum li.etkin {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: baseline;
  animation: sahne-durum var(--sure-acilir) var(--ease-out);
}
/* Aşama noktası: ısıtmada sıcak, soğutmada camgöbeği, ölçümde kobalt */
.sahne__durum li.etkin::before {
  flex: none;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-line);
  content: "";
}
.sahne[data-asama='isi'] .sahne__durum li.etkin::before {
  background: var(--sahne-isi);
}
.sahne[data-asama='soguk'] .sahne__durum li.etkin::before {
  background: var(--sahne-soguk);
}
.sahne__durum span {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-dense);
}
.sahne__durum strong {
  color: var(--color-text-heading);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: var(--leading-dense);
}
.sahne[data-parca-secili] .sahne__durum {
  opacity: 0;
}
@keyframes sahne-durum {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------- Çizim dili (istasyon şeridiyle aynı aile) ----------
   Makine: vurgu çizgisi. İşlenen şey ve sonucu: mürekkep. Sıcak ya da etkin bölge: koyu dolgu. */
.sc-kok {
  fill: none;
  stroke: var(--color-accent-line);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-g {
  fill: var(--color-accent-subtle);
}
.sc-z {
  fill: var(--color-bg-page);
}
.sc-t {
  fill: var(--color-accent-selected);
}
.sc-k {
  fill: var(--color-accent-line);
}
.sc-m {
  stroke: var(--color-text-heading);
}
.sc-b {
  stroke: var(--color-text-on-accent);
}
.sc-isi {
  fill: var(--sahne-isi);
}
.sc-soguk {
  fill: var(--sahne-soguk);
}
.sc-isi-c {
  stroke: var(--sahne-isi);
}
.sc-soguk-c {
  stroke: var(--sahne-soguk);
}
.sc-y {
  stroke: none;
}
.sc-i {
  stroke-width: 1.4;
}
.sc-q {
  stroke-width: 4;
}
.sc-n {
  stroke-dasharray: 3 7;
}
/* Kendi ekseninde dönen parça */
.sc-d {
  transform-box: fill-box;
  transform-origin: center;
}
.sc-rozet circle {
  fill: var(--color-bg-page);
}
.sc-rozet text {
  fill: var(--color-accent-text);
  stroke: none;
  font: 700 17px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

/* Etkin adım: parçası tam görünür, rozeti dolar; diğer istasyonlar geri çekilir */
.sc-kok > * {
  transition: opacity var(--sure-acilir) var(--ease-out);
}
.sahne[data-etkin] .sahne__parca:not(.etkin) {
  opacity: 0.4;
}
.sahne__parca.etkin .sc-rozet circle,
.sahne .parca-secili .sc-rozet circle {
  fill: var(--color-accent-solid);
  stroke: var(--color-accent-solid);
}
.sahne__parca.etkin .sc-rozet text,
.sahne .parca-secili .sc-rozet text {
  fill: var(--color-text-on-accent);
}
/* Parça seçimi (Hilo tarzı): seçilen parça tam, geri kalan her şey geri çekilir; ön izleme daha hafif */
.sahne--hazir .sc-kok [data-parca] {
  cursor: pointer;
}
.sahne[data-parca-on] .sc-kok > [data-parca]:not(.parca-on) {
  opacity: 0.45;
}
.sahne[data-parca-secili] .sc-kok > :not(.parca-secili) {
  opacity: 0.18;
}
.sahne[data-parca-secili] .sc-kok > .parca-secili,
.sahne[data-parca-on] .sc-kok > .parca-on {
  opacity: 1;
}

/* ---------- Çubuk: adım düğmeleri ve denetimler (şemanın hemen altında) ---------- */
.sahne__cubuk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
}
.sahne__adimlar .suzgec {
  justify-content: center;
  min-width: 44px;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  /* Etkin adım üzerine gelince de seçili görünür */
  .sahne__adimlar .suzgec[aria-current='true']:hover {
    border-color: var(--color-accent-selected);
    background: var(--color-accent-selected);
    color: var(--color-accent-text-strong);
  }
}
.sahne__denetim {
  display: flex;
  gap: var(--space-5);
}
.sahne__dugme[data-durum='oynuyor'] .sahne__ikon-oynat,
.sahne__dugme:not([data-durum='oynuyor']) .sahne__ikon-duraklat {
  display: none;
}

/* ---------- Ara başlık (Parçalar, kullanım sorusu): h4 rolü ---------- */
.sahne__alt-baslik {
  margin: 0;
  padding: 0;
  color: var(--color-text-heading);
  font-family: var(--font-sans); /* Science Gothic 20 pikselin altında kullanılmaz */
  font-stretch: 100%;
  letter-spacing: normal;
  font-size: var(--text-h4);
  font-weight: 650;
  line-height: var(--leading-heading);
}

/* ---------- Parçalar ---------- */
.sahne__parcalar {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.sahne__ipucu {
  max-width: 62ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.sahne__parca-liste {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.sahne__parca-oge {
  display: grid;
  gap: 2px;
}
.sahne__parca-oge dt {
  color: var(--color-text-heading);
  font-weight: 650;
}
.sahne__parca-oge dd {
  max-width: 62ch;
  margin: 0;
  color: var(--color-text-secondary);
}
/* Betik açınca: adlar hap düğme olur, açıklama seçilince altta tek satır kutuda görünür */
.sahne__parcalar--hazir .sahne__parca-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sahne__parcalar--hazir .sahne__parca-oge {
  display: block;
}
.sahne__parcalar--hazir .sahne__parca-oge dd {
  display: none;
}
.sahne__parca-dugme {
  font-size: var(--text-small);
}
.sahne__parca-aciklama {
  max-width: 62ch;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-plate);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}
.sahne__parca-aciklama strong {
  color: var(--color-text-heading);
}

/* ---------- Anlatım: adım metinleri, değer etiketi, kullanım ---------- */
.sahne__anlatim,
.sahne__metinler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
}
.sahne__anlatim {
  gap: var(--space-6);
}
.sahne__metin {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.sahne__metin > p {
  max-width: 62ch;
  color: var(--color-text-secondary);
}
/* Adım adı: h3 rolü (Science Gothic, 20px) */
.sahne__metin > .sahne__metin-ad {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-heading);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-stretch: 110%;
  font-weight: 650;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}
/* Numara rozeti: şemadaki rozetin HTML karşılığı */
.sahne__no {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--border-frame) solid var(--color-accent-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg-page);
  color: var(--color-accent-text);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}
.sahne__metin.etkin .sahne__no {
  border-color: var(--color-accent-solid);
  background: var(--color-accent-solid);
  color: var(--color-text-on-accent);
}
[data-sahne-secim] {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Canlı hâl: metinler üst üste durur (en uzunu kadar yer ayrılır), yalnız etkin olan görünür */
.sahne--canli .sahne__metin {
  grid-area: 1 / 1;
  transition: opacity var(--sure-acilir) var(--ease-out);
}
.sahne--canli .sahne__metin:not(.etkin) {
  visibility: hidden;
  opacity: 0;
}
.sahne--canli .sahne__no {
  display: none;
}

/* Kullanım seçimi: süzgeç hapları (30-bilesen: input:checked + .suzgec) */
.sahne__kullanim {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sahne__kullanim > legend {
  float: left; /* legend fieldset ızgarasına girsin */
  width: 100%;
  margin-bottom: 0;
}
.sahne__secenekler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sahne__secenek .suzgec {
  cursor: pointer;
}
.sahne__secenek .sayi {
  font-variant-numeric: tabular-nums;
}
.sahne__kullanim-not {
  max-width: 62ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-dense);
}
.sahne .sahne__teklif {
  justify-self: start;
}

.sahne__not {
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-dense);
}

@media (max-width: 639px) {
  /* Durağan: iki yarım pencere alt alta; şema iki kat büyük okunur */
  .sahne:not(.sahne--canli) .sahne__pencere:not([hidden]) {
    display: block;
    aspect-ratio: 8 / 9;
  }
  .sahne:not(.sahne--canli) .sahne__gorunumler > .sahne__pencere:not(.m3d) .sahne__cizim {
    width: 200%;
  }
  .sahne--sagdan:not(.sahne--canli) .sahne__gorunumler > .sahne__pencere:not(.m3d) .sahne__cizim {
    transform: translateX(-50%);
  }
  /* Canlı: kare pencere; şemanın tamamı pencereden geniştir, kamera kaydırır */
  .sahne--canli .sahne__pencere {
    aspect-ratio: 1;
  }
  .sahne--canli .sahne__cizim {
    width: 177.78%;
  }
  /* Düğmeler küçülür: adımda yalnız numara, denetimde yalnız simge (adlar ekran okuyucuya kalır) */
  .sahne__cubuk {
    column-gap: var(--space-2);
  }
  .sahne__adimlar {
    gap: var(--space-1);
  }
  .sahne__adimlar .suzgec {
    width: 44px;
    padding: 0;
  }
  .sahne__adim-yazi,
  .sahne__dugme > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sahne__denetim {
    gap: 0;
  }
  .sahne .sahne__denetim .dugme.sahne__dugme {
    width: 44px;
    padding-inline: 0;
  }
}
/* Tek sütun: anlatımın parçaları sahne ızgarasına katılır; sıra: şema, çubuk, adım metni, kullanım, parçalar,
   değer etiketi, not. Değer etiketi her adımda görünür: canlı hâlde özet adımına kadar gizli kalsaydı boş yer
   dururdu; önemli bildirim WAAPI canlandırmasını geçersiz kılar. */
@media (max-width: 899px) {
  .sahne__anlatim {
    display: contents;
  }
  .sahne__metinler {
    order: 1;
  }
  .sahne__kullanim {
    order: 2;
  }
  .sahne__parcalar {
    order: 3;
  }
  .sahne__degerler {
    order: 4;
    opacity: 1 !important;
    transform: none !important;
  }
  .sahne__not {
    order: 5;
  }
}
/* Geniş ekran: şema, çubuk, parçalar ve not solda yedi sütun; anlatım sağda beş sütun. Bölünme ve aralık
   .bolum-iki--medya (20-duzen.css, S-8) ile aynı: anlatım ürün sayfasındaki tip etiketiyle aynı x'ten başlar. */
@media (min-width: 900px) {
  .sahne {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* Son satır esner: anlatım şemadan uzunsa fazlası soldaki satırları açmaz */
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--gutter);
    align-items: start;
  }
  .sahne__sahne,
  .sahne__cubuk,
  .sahne__parcalar,
  .sahne__not {
    grid-column: 1 / span 7;
  }
  .sahne__anlatim {
    grid-area: 1 / 8 / span 4 / -1;
  }
  .sahne__parcalar {
    padding-top: var(--space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sahne__odak,
  .sahne__pencere::before,
  .sahne__pencere::after,
  .sc-kok > *,
  .sahne--canli .sahne__metin {
    transition: none;
  }
  .sahne__durum li.etkin {
    animation: none;
  }
}
@media print {
  .sahne__adimlar,
  .sahne__denetim,
  .sahne__durum,
  .sahne__ipucu,
  .sahne__parca-aciklama,
  .sahne__teklif {
    display: none;
  }
  .sahne__parcalar--hazir .sahne__parca-liste {
    display: grid;
  }
  .sahne__parcalar--hazir .sahne__parca-oge dd {
    display: block;
  }
}