/* css/hero.css */

.hero-slider-section {
   position: relative;
   width: 100%;
   height: 650px;
   overflow: hidden;
}

/* --- KOTAK MERAH STATIS DI KIRI --- */
.hero-overlay-slant {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 45%; /* Proporsi kotak merah diperlebar sedikit agar teks lega */
   background-color: var(--color-maroon);
   z-index: 10;
   clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
   display: flex;
   align-items: center;
   padding-left: 5%;
   padding-right: 5%;
   pointer-events: none;
}

.hero-content-inner {
   width: 90%;
   color: var(--color-white);
   pointer-events: auto;
}

.hero-content-inner h4 {
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 10px;
   letter-spacing: 2px;
}

.hero-content-inner h1 {
   font-size: var(--size-hero-title);
   font-weight: 900;
   line-height: 1.1;
   margin-bottom: 20px;
}

.hero-content-inner p {
   font-size: 16px;
   line-height: 1.6;
}

/* --- SLIDER GAMBAR DI KANAN --- */
.heroSwiper {
   width: 100%;
   height: 100%;
   z-index: 1;
}

.hero-bg {
   width: 100%;
   height: 100%;
   background-size: cover;
   /* Menggeser fokus gambar ke KANAN agar tidak tertutup blok merah */
   background-position: center right;
}

/* --- RESPONSIVE HP --- */
@media (max-width: 992px) {
   .hero-slider-section {
      height: 500px;
   }

   .hero-overlay-slant {
      width: 100%;
      clip-path: none;
      background: linear-gradient(
         to right,
         rgba(156, 0, 4, 0.95) 40%,
         rgba(156, 0, 4, 0.6)
      );
      padding-right: 20px;
   }

   .hero-content-inner h1 {
      font-size: 2.2rem;
   }

   /* Mengembalikan fokus gambar ke tengah saat di HP */
   .hero-bg {
      background-position: center;
   }
}