.tt-home-new .tt-new-hero {
  background: #080c0f;
}

.tt-hero-film {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #080c0f;
}

.tt-hero-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tt-hero-film__video {
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 48.01rem) {
  .tt-hero-film {
    background-image: url("../images/tokmak-hero-poster.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

.tt-hero-film__video {
  opacity: 0;
  transition: opacity 480ms ease;
}

.tt-new-hero.is-film-playing .tt-hero-film__video {
  opacity: 1;
}

.tt-home-new .tt-new-hero .tt-final-hero__overlay {
  background:
    linear-gradient(180deg, rgba(5, 8, 10, 0.18), transparent 42%, rgba(5, 8, 10, 0.24)),
    linear-gradient(90deg, rgba(5, 8, 10, 0.2), transparent 52%);
}

@media (max-width: 48rem) {
  .tt-home-new .tt-new-hero {
    display: block;
    padding: clamp(22rem, 95vw, 24rem) 0 42px;
    background-color: #0b0e12;
    background-image: url("../images/hero-taxi-tokmak.webp");
    background-repeat: no-repeat;
    background-position: center 7.125rem;
    background-size: calc(100% + 5rem) auto;
  }

  .tt-hero-film {
    display: none;
  }

  .tt-home-new .tt-new-hero .tt-final-hero__overlay {
    display: block;
    background: linear-gradient(
      180deg,
      rgba(5, 8, 10, 0.05) 7.125rem,
      rgba(5, 8, 10, 0.08) 15rem,
      rgba(5, 8, 10, 0.72) 20rem,
      #0b0e12 24rem,
      #0b0e12 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-hero-film__video {
    display: none;
  }
}