/* 18.10.2026 (operator: like React Bits' "Gradient Carousel", "background farben unserer seite … ohne kasten
   drumherum"): the slideshow on the start page below the film and on the collection page. The cards stand in depth on
   the page's own paper across the whole width, the middle one in front, its neighbours turned towards it and softer.
   vitrin.js gives each card its place as --konum (0 in the middle, negative to the left, a real number while the cards
   move) and reads --aralik-orani to let a held card follow the pointer. Only the sides are cut: overflow: hidden cut
   the shadows below in a straight line. */
.vitrin {
  padding: 8px 0 24px;
  background: var(--paper);
  color: var(--ink);
}
.vitrin-sahne {
  --kart: clamp(220px, 32vw, 460px);
  --aralik-orani: 0.7;
  --aralik: calc(var(--kart) * var(--aralik-orani));
  position: relative;
  height: calc(var(--kart) + 64px);
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
}
.vitrin-slayt {
  --uzak: max(var(--konum), -1 * var(--konum));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--kart);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border-radius: 22px;
  background: var(--light);
  box-shadow: 0 28px 56px -28px rgb(34 38 65 / 45%);
  transform: translate(-50%, -50%) translateX(calc(var(--konum) * var(--aralik)))
    translateZ(calc(var(--uzak) * -150px)) rotateY(clamp(-26deg, var(--konum) * -26deg, 26deg));
  opacity: clamp(0, 3.5 - var(--uzak), 1);
  filter: blur(calc(var(--uzak) * 1.5px));
  z-index: calc(30 - var(--uzak));
}
.vitrin-slayt.is-aktif {
  cursor: zoom-in;
}
.vitrin-slayt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vitrin-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.vitrin-ad {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  text-align: center;
}
.vitrin-alt button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: inherit;
  font-size: 22px;
}
.vitrin-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: min(920px, calc(100dvh - 24px));
}
.vitrin-lightbox img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
@media (max-width: 700px), (pointer: coarse) and (max-width: 1000px) {
  .vitrin-lightbox[open] {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
}
@media (max-width: 600px) {
  .vitrin-sahne {
    --kart: 62vw;
  }
}