/* esik-film.css · kesilen kapı ve devir anahtarı. Yalnız src/esik-film.js kurunca (html[data-film-esik], html[data-film-devir]) devreye girer; yoksa sayfa bugünkü hâlidir. Renk ve boşluk tokens.css'ten. */
.film-tuval {
  position: absolute;
  inset: var(--space-0);
  display: block;
  width: var(--size-full);
  height: var(--size-full);
}

/* ── 5 · Kesilen kapı: iz + yapışkan sahne. Sahne #work'ün üstünde durur; #work doğal yerinde (izin sonu) kalır, çapalar oraya iner. ── */
html[data-film-esik] .esik-oda {
  position: relative;
}

html[data-film-esik] .esik {
  position: relative;
  z-index: var(--layer-content);
  /* 100lvh: adres çubuğu kalkınca kâğıdın altından masa görünmesin. iz ile #work'ün doğal yeri aynı kalır. */
  height: calc(100lvh + var(--film-iz, 0px));
  margin-bottom: -100lvh;
  padding-block: var(--space-0);
  border-bottom: var(--space-0);
  background: var(--transparent);
  pointer-events: none;
}

/* Oda perdenin ardında: iz boyunca #work ekranın altına yapışık durur, kapı açıldığında deliğin ardında gerçek masa görünür.
   Sticky öğenin kaydırma hedefi doğal yeridir (CSS Positioned Layout, stickypos-scroll): #work ve #work-* çapaları izin sonuna iner. */
html[data-film-esik] #work {
  position: sticky;
  bottom: var(--space-0);
}

/* Sayfa açıkken telefon yana çevrilirse: masa ekrandan uzun, yapışıklık çapayı kaydırır. 38.75rem = --masa-gorunur-min. */
@media (max-height: 38.75rem) {
  html[data-film-esik] #work {
    position: relative;
  }
}

.kapi-sahne {
  position: sticky;
  top: var(--space-0);
  height: 100lvh;
  overflow: clip;
  background: var(--kagit);      /* kareler gelene dek kâğıt: masa erken görünmesin */
  pointer-events: auto;          /* iz boyunca kâğıda dokunmak alttaki "Vitrini aç"ı tetiklemesin */
}

.kapi-sahne.hazir {
  background: var(--transparent);
}

.kapi-sahne.bitti {
  visibility: hidden;
}

/* Kâğıt: deliğin çevresinde düz renk parçalar, yalnız dönüşümle ölçeklenir (esik-film.js). Kapalıyken orta parça da kâğıt. */
.kapi-kagit {
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
  width: 1px;
  height: 1px;
  background: var(--kagit);
  transform-origin: var(--space-0) var(--space-0);
  will-change: transform;
}

.kapi-kagit[hidden],
.kapi-karart[hidden],
.kapi-lento[hidden],
.kapi-kanat-golge[hidden] {
  display: none;
}

/* Deliğin içinde, karenin altında: oda ile kapı aynı dünyada. Yalnız dönüşüm ve saydamlık değişir, boyama yok. */
.kapi-karart,
.kapi-lento,
.kapi-kanat-golge {
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
  transform-origin: var(--space-0) var(--space-0);
  opacity: 0;
  will-change: transform, opacity;
}

.kapi-karart {
  width: 1px;
  height: 1px;
  background: var(--masa-oda);
}

.kapi-lento,
.kapi-kanat-golge {
  width: 100px;
  height: 100px;
}

.kapi-lento {
  /* Kör eleştirmen: "üst kenar gölgesi düz bant". Kısa ve çok duraklı: lentoda koyu, hızla sönen; düz bant okunmasın. */
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--masa-oda) 70%, var(--transparent)), color-mix(in srgb, var(--masa-oda) 34%, var(--transparent)) 5%, color-mix(in srgb, var(--masa-oda) 12%, var(--transparent)) 12%, var(--transparent) 22%),
    linear-gradient(to left, color-mix(in srgb, var(--masa-oda) 40%, var(--transparent)), color-mix(in srgb, var(--masa-oda) 12%, var(--transparent)) 5%, var(--transparent) 11%);
}

.kapi-kanat-golge {
  background: radial-gradient(closest-side, var(--masa-oda), var(--transparent));
}

html[data-film-esik] .kapi-sahne > .shell {
  position: absolute;
  top: var(--space-section);
  right: var(--space-0);
  left: var(--space-0);
}

html[data-film-esik] .esik-gir {
  transition: opacity var(--sure-mikro) linear;
}

html[data-film-esik] .esik-gir.sonuk {
  opacity: 0;
}

html[data-film-esik] .esik-gir.sonuk:focus-visible {
  opacity: 1;
}

/* ── 8 · Devir anahtarı: telefonda metin biter, sahne ondan sonra. Geniş ekranda metin solda sabit, kol sağdan girer. ── */
html[data-film-devir] .devir-iz {
  position: relative;
  margin-bottom: var(--space-9);
}

html[data-film-devir] .devir-metin {
  position: relative;
  z-index: var(--layer-content);
}

.devir-gecit {
  height: calc(100svh + var(--film-iz, 0px));
}

/* Dikey karede üst üçte bir boş: sahne metnin son satırlarının altına biner, boş ekran kalmaz, kol metin okunurken gelir. Nesne o bölgede bulunmaz (kol tepesi karenin %36'sı). */
@media (max-aspect-ratio: 21/20) {
  .devir-gecit {
    margin-top: -30svh;
  }
}

.devir-sahne {
  position: sticky;
  top: var(--space-0);
  height: 100svh;
  overflow: clip;
  pointer-events: none;
}

@media (min-width: 981px) and (min-aspect-ratio: 21/20) {
  html[data-film-devir] .devir-iz {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr);
  }

  html[data-film-devir] .devir-metin,
  html[data-film-devir] .devir-gecit {
    grid-area: 1 / 1;
  }

  html[data-film-devir] .devir-metin {
    position: sticky;
    top: calc(var(--header-height) + var(--space-9));
    align-self: start;
    pointer-events: none;
  }

  html[data-film-devir] .devir-metin .oda-bas {
    max-width: var(--measure-dunya);
    pointer-events: auto;
  }
}

/* ── 5b · Vektör mürekkep (esik-film.js vektorKur): raster yok; hareket yalnız transform ve opacity. Leke rengi İşler odasıyla aynı (--masa-oda): kaplayınca sahne söner, oda aynı renkten açılır. ── */
.vektor-kagit {
  position: absolute;
  inset: var(--space-0);
  width: 100%;
  height: 100%;
}

.vektor-damla,
.vektor-halka,
.vektor-sicrama,
.vektor-tarama {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.vektor-damla { fill: var(--murekkep); }
.vektor-halka { fill: none; stroke: var(--murekkep); opacity: 0; }
.vektor-sicrama { fill: var(--murekkep); opacity: 0; }
.vektor-tarama { fill: none; stroke: color-mix(in srgb, var(--murekkep) 55%, var(--transparent)); stroke-width: 1.1; stroke-linecap: round; opacity: 0; }

.vektor-leke {
  position: absolute;
  left: 50%;
  top: 56%;
  width: var(--space-0);
  height: var(--space-0);
  transform: scale(0);
  will-change: transform;
}

.vektor-leke i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--masa-oda);
}

@media print {
  .film-sahne { display: none; }
  html[data-film-esik] .esik { height: auto; margin-bottom: var(--space-0); }
  html[data-film-esik] #work { position: relative; }
  html[data-film-devir] .devir-gecit { height: var(--space-0); }
}