/* ============================================================
   ImageSequenceStory — sticky frame cross-fade hikâye
   ============================================================ */

.iss {
  width: 100%;
  /* not: position:sticky için overflow:clip KULLANILMAZ */
}

/* ─── Sticky kapsayıcı (yükseklik inline: frameCount × 100vh) ─── */
.iss__pin-wrap {
  position: relative;
}

/* ─── Sticky sahne (CSS sticky — Lenis ile uyumlu) ─────────── */
.iss__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ─── Görsel yığını ──────────────────────────────────────── */
.iss__visual {
  position: relative;
  height: 70vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.iss__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  /* Üst üste yığılmış katmanlar */
}

.iss__frame.is-first {
  opacity: 1;
}

/* ─── İlerleme şeridi ───────────────────────────────────── */
.iss__visual-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
}

.iss__visual-progress-fill {
  height: 100%;
  background: var(--color-green-accent);
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
}

/* Frame sayacı */
.iss__frame-counter {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(14, 40, 24, 0.4);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
}

/* ─── Metin tarafı ───────────────────────────────────────── */
.iss__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.iss__eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
}

.iss__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--color-text);
  line-height: 1.1;
}

.iss__body {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 38ch;
}

/* Animasyonlu tik işaretleri — frame ilerleyince belirginleşir */
.iss__ticks {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.iss__tick {
  width: 28px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  transition: background 0.3s var(--ease-smooth);
}

.iss__tick.is-done {
  background: var(--color-green);
}

/* ============================================================
   Mobil — tek statik görsel + metin
   ============================================================ */
@media (max-width: 768px) {
  .iss__pin-wrap {
    height: auto !important;
    display: none;
  }

  .iss__mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: var(--section-y);
  }

  .iss__mobile-visual {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .iss__mobile-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .iss__mobile-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .iss__mobile-eyebrow {
    font-size: var(--fs-small);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-green);
  }

  .iss__mobile-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-text);
    line-height: 1.15;
  }

  .iss__mobile-body {
    font-size: var(--fs-body);
    color: var(--color-muted);
    line-height: 1.65;
  }
}

@media (min-width: 769px) {
  .iss__mobile {
    display: none;
  }
}