.hero-carousel { overflow: hidden; width: 100%; aspect-ratio: 4 / 5; background: #0d0f11; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s ease; pointer-events: none; }
.carousel-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.hero-media .carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-slide:first-child img { object-position: center; }
.carousel-arrow { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.38); background: rgba(7,8,9,.66); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
.carousel-arrow:hover { background: var(--gold); color: #0b0904; }
.carousel-arrow.previous { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel-dots { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 9px; }
.carousel-dot { width: 9px; height: 9px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; }
.carousel-dot.active { width: 27px; border-radius: 8px; border-color: var(--gold-light); background: var(--gold-light); }
@media (max-width: 900px) { .hero-carousel { aspect-ratio: 4 / 5; } }
@media (max-width: 560px) { .carousel-arrow { width: 40px; height: 40px; } }