.carousel-container { width: 100vw; max-width: 100vw; margin: 10px 0 162px 0; position: relative; left: 50%; right: 50%; transform: translateX(-50%); }
.carousel { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); background: var(--theme-black, #111); width: 100vw; max-width: 100vw; }
.carousel-slide { display: none; position: absolute; width: 100%; height: 600px; top: 0; left: 0; justify-content: center; align-items: center; flex-direction: column; }
.carousel-slide.active { display: flex; position: relative; animation: slideInRight 0.7s; }
.carousel-slide img { width: 100vw; height: 600px; object-fit: cover; border-radius: 12px 12px 0 0; }
.carousel-caption { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--theme-primary, #ff7d0d); color: #fff; padding: 12px 32px; border-radius: 24px; font-size: 1.3rem; font-weight: 500; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--theme-secondary, #01ae3b); color: #fff; border: none; font-size: 2.2rem; padding: 8px 18px; border-radius: 50%; cursor: pointer; z-index: 2; transition: background 0.2s; }
.carousel-btn:hover { background: var(--theme-primary, #ff7d0d); }
.carousel-btn.prev { left: 18px; }
.carousel-btn.next { right: 18px; }
@media (max-width: 600px) {
  .carousel-slide img, .carousel-slide { height: 330px; }
  .carousel-caption { font-size: 1rem; padding: 8px 16px; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100vw); }
  to { opacity: 1; transform: translateX(0); }
}