/* =========================================================
   Anlatı — 35 mm film şeridi (seçilen: anlati-ornekleri-2.html #06)
   Başlık şeridin karelerine yazılı; kaydırdıkça şerit projektör kapısından geçer,
   kapıdaki kare aydınlanıp netleşir. Hareket ve ölçüm: assets/js/story-film.js
   (.js-film sınıfını o ekler; JS yoksa şerit durağan, bölüm normal akışta).
   ========================================================= */

.story {
  --hero-ink: #1d1a2e; /* .hero__btn burada da aynı renkte */
  --story-sub: #4a4460;
  color: var(--hero-ink);
}

/* Sabitlenen sahne: 360vh boyunca şerit sekiz kare ilerler */
.story__scene { position: relative; }
.js-film .story__scene { height: 360vh; }
.story__pin {
  display: grid; align-content: center; gap: clamp(18px, 3.4vh, 36px);
  padding: clamp(72px, 10vh, 120px) 0 clamp(40px, 6vh, 72px);
}
.js-film .story__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  padding: var(--header-h) 0 0;
}

.story__head { padding: 0 var(--gutter); text-align: center; }
.story__eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6b6480; }
html[dir="rtl"] .story__eyebrow { letter-spacing: 0; font-size: 15px; }
/* Başlık karelerde okunur; h2 ekran okuyucu ve arama için burada (hareket azaltılmışsa görünür, aşağıda) */
.story__title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.story__lead {
  margin: 0 auto; padding: 0 var(--gutter); max-width: calc(36ch + 2 * var(--gutter)); text-align: center;
  font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; letter-spacing: -.012em; font-weight: 500;
  color: var(--story-sub); text-wrap: balance;
}

/* ---------- Şerit ---------- */
.film {
  --fh: clamp(200px, min(46vh, 64vw), 440px); /* dar ekranda da komşu kareler kenardan görünsün */
  position: relative; height: var(--fh); overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.film__strip {
  position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; will-change: transform;
  background: linear-gradient(180deg, #1c1a23, #131118 50%, #1c1a23);
}
/* Delik bandı: desen karo boyu JS'te kare aralığına göre üretilir (kare başına dört delik) */
.film__band { flex: none; height: 13%; background-repeat: repeat-x; background-position: 0 50%; }
.film__row { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 0 7px; }
html[dir="rtl"] .film__row { flex-direction: row-reverse; } /* sağdan sola okunur: sıradaki kare soldan gelir */
.film__fr {
  --lit: 0; position: relative; flex: none; width: calc(var(--fh) * .74 * 1.33); height: 100%; overflow: hidden;
  display: grid; place-items: center; border-radius: 4px; background: #221f2b;
}
/* Kapıya yaklaşan kare pastel ışıkla pozlanır */
.film__fr::before {
  content: ""; position: absolute; inset: 0; opacity: calc(.08 + var(--lit) * .5);
  background: radial-gradient(90% 100% at 28% 18%, var(--c), transparent 70%);
}
.film__fr span {
  position: relative; white-space: nowrap; color: #fff; font-weight: 700; letter-spacing: -.045em;
  font-size: calc(var(--fh) * .145 * var(--fit, 1));
  opacity: calc(.16 + var(--lit) * .84); filter: blur(calc((1 - var(--lit)) * 3px));
}
html[dir="rtl"] .film__fr span { letter-spacing: 0; }
.film__fr--s span { font-size: calc(var(--fh) * .11 * var(--fit, 1)); }
.film__fr img { position: relative; width: auto; height: calc(var(--fh) * .075); opacity: calc(.16 + var(--lit) * .84); }
.film__fr small { position: absolute; left: 12px; bottom: 10px; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: var(--accent); opacity: .7; }
/* Projektör kapısı: ortadaki karenin köşe işaretleri */
.film__gate {
  position: absolute; top: calc(13% - 10px); bottom: calc(13% - 10px); left: 50%; aspect-ratio: 1.33; transform: translateX(-50%); pointer-events: none;
  --k: rgba(255, 255, 255, .85);
  background:
    linear-gradient(var(--k), var(--k)) left top / 24px 2px no-repeat, linear-gradient(var(--k), var(--k)) left top / 2px 24px no-repeat,
    linear-gradient(var(--k), var(--k)) right top / 24px 2px no-repeat, linear-gradient(var(--k), var(--k)) right top / 2px 24px no-repeat,
    linear-gradient(var(--k), var(--k)) left bottom / 24px 2px no-repeat, linear-gradient(var(--k), var(--k)) left bottom / 2px 24px no-repeat,
    linear-gradient(var(--k), var(--k)) right bottom / 24px 2px no-repeat, linear-gradient(var(--k), var(--k)) right bottom / 2px 24px no-repeat;
}

/* Hareket azaltılmışsa: sahne sabitlenmez, şerit durur (kareler aydınlık), başlık yazı olarak görünür */
@media (prefers-reduced-motion: reduce) {
  .js-film .story__scene { height: auto; }
  .js-film .story__pin { position: relative; height: auto; overflow: visible; padding: clamp(72px, 10vh, 120px) 0 clamp(40px, 6vh, 72px); }
  .story__title {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    max-width: 1000px; margin: 14px auto 0; font-size: clamp(40px, 5.8vw, 92px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; text-wrap: balance;
  }
  html[dir="rtl"] .story__title { letter-spacing: 0; line-height: 1.3; }
}