/* K1 · Afiş duvarı: gece bir beton duvar, üstünde afişler. Ortaya gelen afişin kâğıdı soyulur, altından video oynar. */
.wall {
  position: absolute; inset: -4% -8%;
  background: #1a1714 url("../media/wall.webp") center / cover no-repeat;
  will-change: transform;
}
.wall-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(34% 46% at 50% 56%, rgba(255, 196, 92, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.25) 26%, rgba(8, 8, 10, 0.1) 60%, rgba(8, 8, 10, 0.85) 100%);
}
.intro { left: max(24px, 4vw); top: calc(var(--head) + 18px); max-width: 520px; }
.intro p { color: #d6d2cc; }

.strip { position: absolute; z-index: 5; left: 50%; top: 57%; width: 0; height: 0; cursor: grab; }
.strip:active { cursor: grabbing; }
.poster {
  position: absolute; left: 0; top: 0; width: var(--w); height: var(--h);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2);
  border-radius: 3px; cursor: pointer; background: #222;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 18px 34px -14px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.4s, filter 0.4s;
  will-change: transform;
}
.poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; pointer-events: none; }

/* kâğıt: videonun ilk karesinin basılı hâli + gren + kırışık + tutkal parlaklığı */
.paper { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; pointer-events: none; }
.paper img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5) sepia(0.22) contrast(1.04) brightness(0.9); } /* basılı, soluk: canlanınca fark görünsün */
.paper::before {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.75;
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(0, 0, 0, 0.16) 49.8%, rgba(255, 255, 255, 0.18) 50.4%, transparent 51%),
    linear-gradient(180deg, transparent 32.6%, rgba(0, 0, 0, 0.12) 33.2%, rgba(255, 255, 255, 0.14) 33.8%, transparent 34.4%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paper::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.22));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

/* canlanma: kâğıt sağ üst köşeden soyulur (k1.js kesik çizgiyi her karede hesaplar), katlanan arka yüz görünür */
.poster.is-live { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 80px -24px rgba(0, 0, 0, 0.9); }
.poster.is-back .paper { animation: repaste 0.35s ease-out; }
@keyframes repaste { from { opacity: 0; } to { opacity: 1; } }
.flap-wrap { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(-6px 8px 10px rgba(0, 0, 0, 0.45)); z-index: 2; }
.flap { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, 0 0); background: linear-gradient(225deg, #fbf8f1 0%, #e6dfd0 45%, #bfb5a1 100%); }

/* bilgi afişleri: fiyat listesi ve "sıradaki sizin" — onlar da duvarda */
.poster-info { overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--w) * 0.1) calc(var(--w) * 0.09) calc(var(--w) * 0.08); color: var(--ink); } /* % iç boşluk .strip genişliğinden (0) hesaplanıyordu */
.poster-info .paper { display: none; }
.poster-info::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.poster-price { background: var(--sun); }
.poster-price small { font-weight: 800; font-size: calc(var(--w) * 0.06); letter-spacing: 0.08em; }
.poster-price h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: calc(var(--w) * 0.2); line-height: 0.98; margin-top: 4%; }
.price-rows { margin-top: auto; display: grid; gap: calc(var(--w) * 0.03); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); padding-top: calc(var(--w) * 0.025); }
.price-row span { font-weight: 800; font-size: calc(var(--w) * 0.075); }
.price-row b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: calc(var(--w) * 0.12); letter-spacing: 0.01em; }
.poster-price p { font-weight: 700; font-size: calc(var(--w) * 0.058); margin-top: calc(var(--w) * 0.05); }
.poster-price.is-live .price-row { animation: row-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.poster-price.is-live .price-row:nth-child(2) { animation-delay: 0.1s; }
.poster-price.is-live .price-row:nth-child(3) { animation-delay: 0.2s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-14%); } }
.poster-next { background: #f3efe6; }
.poster-next h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: calc(var(--w) * 0.22); line-height: 0.98; }
.poster-next h3 em { font-style: normal; background: var(--sun); padding: 0 0.08em; }
.poster-next p { margin-top: auto; font-weight: 700; font-size: calc(var(--w) * 0.06); }
.poster-next .go { margin-top: calc(var(--w) * 0.05); display: inline-flex; align-self: flex-start; align-items: center; height: calc(var(--w) * 0.16); padding: 0 calc(var(--w) * 0.07); border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: calc(var(--w) * 0.065); }
.poster-next.is-live h3 em { animation: mark 0.6s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes mark { from { background-size: 0 100%; } }
.poster-next h3 em { background: linear-gradient(var(--sun), var(--sun)) left / 100% 100% no-repeat; }

/* tutkal bandı: afişin üst kenarında iki küçük bant */
.tape { position: absolute; top: -9px; width: 46px; height: 18px; background: rgba(236, 228, 210, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); z-index: 3; pointer-events: none; }
.tape.l { left: 12%; transform: rotate(-6deg); }
.tape.r { right: 12%; transform: rotate(5deg); }
.poster.is-live .tape { opacity: 0; transition: opacity 0.3s 0.7s; }

/* masaüstü okları */
.nav-btn { position: absolute; z-index: 18; top: 57%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-prev { left: 24px; }
.nav-next { right: 24px; }
.nav-btn[disabled] { opacity: 0.3; cursor: default; }

.hint { position: absolute; z-index: 15; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: #d6d2cc; font-size: 13px; pointer-events: none; transition: opacity 0.4s; }
.hint svg { width: 34px; height: 14px; animation: swipe 1.8s ease-in-out infinite; }
@keyframes swipe { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
body.moved .hint { opacity: 0; }

@media (max-width: 1100px) and (orientation: portrait) { .strip, .nav-btn { top: 60%; } }
@media (max-width: 700px) {
  .intro { left: 18px; right: 18px; top: calc(var(--head) + 6px); }
  .strip { top: 60%; }
  .nav-btn { display: none; }
  .tape { width: 34px; height: 14px; top: -7px; }
  .hint { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .wall-shade { background: radial-gradient(60% 34% at 50% 60%, rgba(255, 196, 92, 0.16), transparent 70%), linear-gradient(180deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.3) 30%, rgba(8, 8, 10, 0.1) 60%, rgba(8, 8, 10, 0.88) 100%); }
}

/* telefonda duvar dokusu küçük sürümden: ekran 900 pikselden geniş değil */
@media (max-width: 700px) {
  .wall { background-image: url("../media/wall-phone.webp"); }
}