/* ===================== CARD CAROUSEL ===================== */
.carousel-wrapper { position: relative; overflow: hidden; }
.card-track {
  display: flex; gap: 18px;
  transition: transform 0.4s ease;
  padding-bottom: 8px;
}
.movie-card {
  flex: 0 0 calc(20% - 15px);
  background: var(--dark2); border-radius: 4px;
  overflow: hidden; position: relative; cursor: pointer;
  transition: transform 0.3s; group: true;
}
.movie-card:hover { transform: translateY(-6px); }
.movie-card:hover .card-overlay { opacity: 1; }
.card-thumb { position: relative; aspect-ratio: 2/3; overflow: hidden; }
.card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.movie-card:hover .card-thumb img { transform: scale(1.08); }
.card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.card-play {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transform: scale(0.8); transition: transform 0.3s;
}
.movie-card:hover .card-play { transform: scale(1); }
.card-playlist {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.7); color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; opacity: 0; transition: opacity 0.3s;
}
.movie-card:hover .card-playlist { opacity: 1; }
.card-info { padding: 12px; }
.card-title {
  font-family: var(--font-main); font-size: 14px; font-weight: 500;
  margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-meta { font-size: 12px; color: var(--gray2); }
.card-meta span { color: var(--red); }
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-60%);
  z-index: 10; display: flex; justify-content: space-between;
  width: 100%; pointer-events: none; padding: 0 4px;
}
.c-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--red); color: #fff; border: none;
  font-size: 14px; cursor: pointer; pointer-events: all;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.c-btn:hover { background: #014a8a; }