.dv-carousel {
  max-width: 1100px; margin: 18px auto 6px; position: relative;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #0c0c0c;
}

/* Show first image before JS initializes to avoid blank start */
.dv-carousel:not(.dv-ready) .dv-carousel-track img:first-child { opacity: 1; }

.dv-carousel-track img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1);
  transition: opacity 800ms ease, transform 800ms ease; will-change: opacity, transform;
  user-select: none; -webkit-user-drag: none;
}
/* Put EXIT first so ACTIVE wins if both ever collide */
.dv-carousel-track img.dv-slide-exit { opacity: 0; transform: translateX(-6%) scale(1.01); }
.dv-carousel-track img.dv-slide-active { opacity: 1; transform: scale(1.02); }

.dv-dots {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  pointer-events: none; margin-top: 10px;
}
.dv-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset; pointer-events: auto; cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.dv-dot.dv-active { background: #00ffff; transform: scale(1.1); }
.dv-dot:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
}
body.light .dv-carousel { background: #f5f5f7; }