/* "Inside the panel" 3 yaprak (2026-10-16, sahip): ortada TOPLU baslar, sayfa kaydikca yana ACILIR.
   --p (0..1) deck-spread.js tarafindan kaydirmaya gore yazilir. JS yoksa / hareket azaltilmissa --p:1 = eski acik hal.
   Ana sayfa stilleri (inline) `.shot.s1`; burada `.deck .shot.s1` ile daha spesifik -> bu dosya kazanir. */
.deck { --p: 1; --dx: 235px; }
.deck .shot.s1 { transform: rotate(calc(-9deg * var(--p))) translateX(calc(var(--dx) * var(--p) * -1)); }
.deck .shot.s2 { transform: translateY(calc(-16px * var(--p))); }
.deck .shot.s3 { transform: rotate(calc(9deg * var(--p))) translateX(calc(var(--dx) * var(--p))); }
.deck .shot.s1:hover { transform: rotate(calc(-9deg * var(--p))) translateX(calc(var(--dx) * var(--p) * -1)) translateY(-26px) scale(1.06); }
.deck .shot.s2:hover { transform: translateY(calc(-16px * var(--p) - 26px)) scale(1.06); }
.deck .shot.s3:hover { transform: rotate(calc(9deg * var(--p))) translateX(calc(var(--dx) * var(--p))) translateY(-26px) scale(1.06); }
@media (max-width: 800px) {
  .deck { --dx: var(--fan); }
  .deck .shot.s2 { transform: translateY(calc(-10px * var(--p))); }
  .deck .shot.s1:hover { transform: rotate(calc(-9deg * var(--p))) translateX(calc(var(--dx) * var(--p) * -1)) translateY(-14px) scale(1.04); }
  .deck .shot.s3:hover { transform: rotate(calc(9deg * var(--p))) translateX(calc(var(--dx) * var(--p))) translateY(-14px) scale(1.04); }
  .deck .shot.s2:hover { transform: translateY(calc(-10px * var(--p) - 12px)) scale(1.04); }
}
/* kaydirmayla surulurken yumusak takip: kisa gecis (hover'in .5s'i yerine) */
.deck.deckJs .shot { transition: transform .25s ease-out, box-shadow .5s; }