/* Hikâyeyi okumak için üst gökyüzü bandında, binaları ve sahneyi kapatmayan tek odak kartı */
.pin .scene-copy {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 17.5%;
  bottom: auto;
  width: min(650px, 92vw);
  padding: clamp(13px, 1.8vw, 18px) clamp(18px, 2.8vw, 28px);
  text-align: left;
  transform: translate(-50%, -50%) translateZ(0);
  background: rgba(14, 13, 24, 0.94);
  border: 1px solid rgba(255, 224, 148, 0.56);
  box-shadow: 6px 6px 0 rgba(10, 9, 18, 0.58);
  pointer-events: none;
}

.pin .scene-copy p {
  margin: 0;
}

.pin .scene-copy .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 224, 148, 0.2);
}

.pin .scene-copy #eyebrow {
  font: 500 11px/1.2 var(--sans);
  letter-spacing: 0.12em;
  color: #ffcf72;
  text-transform: uppercase;
}

.pin .scene-copy h2 {
  font: 700 clamp(18px, 2.3vw, 24px)/1.24 var(--read);
  margin: 2px 0 6px;
  letter-spacing: -0.015em;
  color: #fffaf0;
  text-shadow: 0 1px 2px rgba(8, 7, 15, 0.8);
}

.pin .scene-copy #body {
  max-width: 64ch;
  color: #f6ebd4;
  font: 500 clamp(13.5px, 1.35vw, 15.5px)/1.52 var(--read);
  text-shadow: 0 1px 2px rgba(8, 7, 15, 0.75);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.pin .scene-copy.is-scrolling-fast #body {
  opacity: 0.20;
  transform: translateY(-2px);
}

.pin .scene-copy .step-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.pin .scene-copy .step-bars i {
  display: block;
  position: relative;
  height: 4px;
  background: rgba(255, 230, 173, 0.16);
  overflow: hidden;
}

.pin .scene-copy .step-bars i.is-active {
  background: rgba(255, 230, 173, 0.26);
  box-shadow: 0 0 6px rgba(255, 207, 114, 0.25);
}

.pin .scene-copy .step-bars i > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #e8b354 0%, #ffcf72 70%, #fff0b8 100%);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

@media (max-width: 680px) {
  .pin .scene-copy {
    top: calc(58px + env(safe-area-inset-top));
    width: calc(100vw - 20px);
    padding: 10px 12px;
    transform: translate(-50%, 0) translateZ(0);
    box-shadow: 4px 4px 0 rgba(10, 9, 18, 0.58);
  }
  .pin .scene-copy .card-meta {
    flex-wrap: wrap;
    gap: 4px;
  }
  .pin .scene-copy #eyebrow {
    font-size: 9.5px;
  }
  .pin .scene-copy .step-badge {
    font-size: 9px;
  }
  .pin .scene-copy h2 {
    font-size: clamp(16.5px, 4.8vw, 20px);
  }
  .pin .scene-copy #body {
    font-size: 12px;
    line-height: 1.42;
  }
  .pin .scene-copy .step-bars { margin-top: 7px; gap: 4px; }
}