.hsl-section {
  --hsl-accent:      #7c5cfc;
  --hsl-accent-lt:   #a78bfa;
  --hsl-accent-glow: rgba(124, 92, 252, 0.40);
  --hsl-h:           300px;
  --hsl-radius:      12px;
  --hsl-ease:        0.60s cubic-bezier(0.77, 0, 0.18, 1);
  --hsl-fast:        0.22s ease;
  --hsl-font:        -apple-system, "Inter", "Segoe UI", sans-serif;
}

.hsl-section {
  position:      relative;
  width:         100%;
  padding-top:   16px;
  margin-bottom: 28px;
  user-select:   none;
}

.hsl-track {
  position:      relative;
  width:         100%;
  height:        var(--hsl-h);
  border-radius: var(--hsl-radius);
  overflow:      hidden;
  background:    #0d0d0f;
  box-shadow:    0 20px 56px rgba(0, 0, 0, 0.60),
                 0 0 0 1px rgba(255, 255, 255, 0.04);
  contain:       layout paint;
}

.hsl-slide {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  opacity:     0;
  visibility:  hidden;
  transform:   scale(1.04);
  transition:  opacity    var(--hsl-ease),
               transform  var(--hsl-ease),
               visibility var(--hsl-ease);
}

.hsl-slide--active {
  opacity:     1;
  visibility:  visible;
  transform:   scale(1);
  z-index:     2;
  will-change: opacity, transform;
}

.hsl-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.hsl-bg img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
}

.hsl-ov {
  position:       absolute;
  z-index:        1;
  pointer-events: none;
}

.hsl-ov--left {
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 12, 16, 0.97)  0%,
    rgba(12, 12, 16, 0.84)  32%,
    rgba(12, 12, 16, 0.28)  56%,
    transparent              100%
  );
}

.hsl-ov--bottom {
  left: 0; right: 0; bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(12, 12, 16, 0.60) 0%, transparent 100%);
}

.hsl-ov--vignette {
  inset: 0;
  background: radial-gradient(ellipse at 72% 50%, transparent 30%, rgba(0, 0, 0, 0.28) 100%);
}

.hsl-idx-imdb {
  position:       absolute !important;
  top:            0 !important;
  right:          0 !important;
  z-index:        999 !important;
  display:        inline-block !important;
  background:     rgba(0, 0, 0, 0.75) !important;
  color:          #fff !important;
  padding:        6px 12px !important;
  font-weight:    700 !important;
  font-size:      12px !important;
  border-radius:  0 0 0 8px !important;
  font-family:    'Oswald', sans-serif !important;
  letter-spacing: 0.5px !important;
  margin:         0 !important;
  line-height:    1.4 !important;
}

.hsl-idx-quality {
  position:       absolute !important;
  bottom:         0 !important;
  right:          0 !important;
  z-index:        999 !important;
  display:        inline-block !important;
  background:     #e11d48 !important;
  color:          #fff !important;
  padding:        5px 12px !important;
  font-weight:    700 !important;
  font-size:      11px !important;
  border-radius:  8px 0 0 0 !important;
  font-family:    'Oswald', sans-serif !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  margin:         0 !important;
  line-height:    1.4 !important;
}

.hsl-content {
  position:       relative;
  z-index:        3;
  padding:        0 46px;
  max-width:      650px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  box-sizing: content-box !important;
}

.hsl-slide--active .hsl-content {
  animation: hslContentIn 0.60s 0.10s both ease-out;
}

@keyframes hslContentIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hsl-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         5px 13px 5px 9px;
  border-radius:   50px;
  font-family:     var(--hsl-font);
  font-size:       10.5px;
  font-weight:     700;
  letter-spacing:  0.09em;
  text-transform:  uppercase;
  width:           fit-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hsl-badge--movie  { background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(245, 158, 11, 0.42); color: #fbbf24; }
.hsl-badge--series { background: rgba(34, 211, 238, 0.14); border: 1px solid rgba(34, 211, 238, 0.38); color: #67e8f9; }
.hsl-badge--season { background: rgba(163, 230, 53, 0.14); border: 1px solid rgba(163, 230, 53, 0.38); color: #bef264; }

.hsl-title {
  font-family: var(--hsl-font);
  font-size:   34px;
  font-weight: 800;
  color:       #ffffff;
  line-height: 1.20;
  margin:      0;
}

.hsl-desc {
  font-family:         var(--hsl-font);
  font-size:           clamp(13px, 1.3vw, 15px);
  color:               rgba(255, 255, 255, 0.76);
  line-height:         1.65;
  display:             -webkit-box;
  -webkit-line-clamp:  3;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}
.hsl-desc p { margin: 0; }

.hsl-actions { display: flex; }

.hsl-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  font-family:     var(--hsl-font);
  font-weight:     700;
  font-size:       14px;
  color:           #ffffff;
  background:      #6d28d9;
  border-radius:   50px;
  padding:         12px 26px;
  transition:      background var(--hsl-fast), transform var(--hsl-fast);
}
.hsl-btn:hover {
  background:      #5b21b6;
  color:           #ffffff;
  transform:       translateY(-2px);
  text-decoration: none;
}
.hsl-btn__icon { width: 17px; height: 17px; }

.hsl-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      rgba(0, 0, 0, 0.50);
  border:          1px solid rgba(255, 255, 255, 0.14);
  color:           #ffffff;
  cursor:          pointer;
  opacity:         0.65;
  transition:      background var(--hsl-fast), opacity var(--hsl-fast), transform var(--hsl-fast);
}
.hsl-arrow:hover {
  background: rgba(124, 92, 252, 0.55);
  opacity:    1;
  transform:  translateY(-50%) scale(1.08);
}
.hsl-arrow--prev { left:  14px; }
.hsl-arrow--next { right: 14px; }

/* ── Dots — Touch target fix ── */
.hsl-dots {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             0;
  margin-top:      14px;
  overflow:        hidden;
  padding:         4px 0;
}

.hsl-dot {
  min-width:       48px;
  min-height:      48px;
  width:           48px;
  height:          48px;
  border-radius:   4px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  position:        relative;
  transition:      none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 -10px;
  clip-path:       inset(0 10px);
}

.hsl-dot::after {
  content:        '';
  display:        block;
  width:          8px;
  height:         8px;
  border-radius:  50px;
  background:     rgba(255, 255, 255, 0.25);
  transition:     width 0.32s ease, background 0.32s ease;
  pointer-events: none;
}

.hsl-dot--active::after {
  width:      30px;
  background: var(--hsl-accent);
}

.hsl-meta-row {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-family: var(--hsl-font);
  font-size:   13px;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.60);
  line-height: 1;
  margin-top:  -4px;
}
.hsl-meta-icon {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
  color:       var(--hsl-accent-lt);
}

@media (max-width: 992px) {
  .hsl-section { --hsl-h: 250px; }
  .hsl-content { padding: 0 26px; max-width: 100%; }
}

@media (max-width: 768px) {
  .hsl-section  { --hsl-h: 220px; }
  .hsl-slide    { align-items: flex-end; padding-bottom: 16px; }
  .hsl-ov--left {
    background: linear-gradient(to top,
      rgba(12, 12, 16, 0.96) 0%,
      rgba(12, 12, 16, 0.72) 52%,
      transparent 100%);
  }
  .hsl-content  { padding: 0 18px; gap: 8px; }
  .hsl-desc     { -webkit-line-clamp: 2; font-size: 13px; }
  .hsl-meta-row { font-size: 12px; }

  .hsl-idx-imdb    { padding: 4px 8px !important; font-size: 11px !important; }
  .hsl-idx-quality { padding: 4px 8px !important; font-size: 10px !important; }
}

@media (max-width: 480px) {
  .hsl-section  { --hsl-h: 180px; margin-bottom: 10px; }
  .hsl-content  { padding: 0 14px; gap: 7px; }
  .hsl-title    { font-size: 18px; }
  .hsl-badge    { font-size: 9.5px; }
  .hsl-btn      { font-size: 12px; padding: 9px 18px; }
  .hsl-arrow    { width: 30px; height: 30px; }
  .hsl-meta-row { font-size: 11px; gap: 5px; }
  .hsl-meta-icon{ width: 12px; height: 12px; }

  .hsl-idx-imdb    { padding: 5px 10px !important; font-size: 11px !important; }
  .hsl-idx-quality { padding: 5px 10px !important; font-size: 10px  !important; }
}