/* ============ HERO ============
   Struktur dari Figma "Dosetest Project" node 149:1590. Yang diambil
   layout dan angkanya, bukan isinya.

   KONVERSI ANGKA. Frame Figma 1440 lebar. Di lebar itu mesin root
   font-size project ini menghasilkan min(0.694vw, 10.69px) = 9,99px.
   Jadi tiap px Figma dibagi 10 jadi rem, dan hero ikut menskala
   bersama sistem token alih alih terkunci di satu lebar.

   Semua slot gambar .u-placeholder. Diminta begitu. */

/* --- Kerangka -------------------------------------------------
   Frame Figma tingginya 1110px di lebar 1440, yaitu 111rem. Dibungkus
   min() dengan 100svh supaya di layar yang lebih pendek hero tidak
   memaksa scroll sebelum satu layar pun terlihat. svh, bukan vh,
   supaya tidak melompat saat toolbar browser mobile muncul dan hilang.

   Tidak ada padding-top untuk header, dan itu disengaja seperti versi
   sebelumnya: .site-header position absolute alias di luar alur, jadi
   hero memang sudah berada di belakangnya. Isi hero berlabuh di BAWAH,
   jadi tidak ada tabrakan dengan header sama sekali. */
.section-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(111rem, 100svh);
  overflow: clip;
}

.section-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section-hero__ph {
  width: 100%;
  height: 100%;
}
.section-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradien Figma disalin apa adanya: transparan sampai 46,062 persen,
   lalu hitam 0,8 di 79,388 persen.

   PERINGATAN KONTRAS, dan ini terukur bukan dikira kira. Di atas
   .u-placeholder abu #d9d9d9, baris rating berada di sekitar 62 persen
   tinggi hero, tempat alfa gradiennya baru 0,38. Latar efektifnya jadi
   #868686 dan teks putih 14px di atasnya cuma 3,65:1, di bawah ambang
   AA yang 4,5:1. Judul dan body aman karena lebih ke bawah dan lebih
   besar.

   Dibiarkan persis seperti Figma sesuai permintaan. Kalau mau
   dibetulkan, naikkan stop pertama ke sekitar 30 persen atau beri
   lantai alfa 0,25; satu nilai, satu tempat. */
.section-hero__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 46.062%,
    rgba(0, 0, 0, 0.8) 79.388%
  );
}

/* --- Isi ------------------------------------------------------
   Figma: left 25,69px, bottom 50,22px, lebar 1388,31px, gap 40px. */
.section-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 0 2.569rem 5.022rem;
  color: var(--white);
}

.section-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
}

/* Kolom kiri: lebar 620px, gap 30px. */
.section-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 62rem;
  max-width: 100%;
}

.section-hero__rating {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
/* Bintang 95 x 14,778px. Lebar dan tinggi DUA DUANYA ditulis, bukan
   height auto, supaya kotaknya tidak bergantung pada bagaimana browser
   membulatkan rasio viewBox. */
.section-hero__stars {
  width: 9.5rem;
  height: 1.4778rem;
  flex: none;
  color: var(--white);
}
.section-hero__rating-text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--weight-light);
}

/* Judul 52px, tracking -1,04px yaitu -0.02em, leading 1,2.
   Ukuran ini TIDAK ada di skala token, dan itu disengaja: skala token
   milik Coterie, hero ini milik Figma. Menariknya ke lg-t-56 akan
   menggeser titik patah barisnya. */
.section-hero__heading {
  margin: 0;
  font-size: min(5.2rem, 52px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--weight-light);
}

.section-hero__body {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: var(--weight-light);
}

/* Tiga fitur, gap 30px antar item, 10px antara ikon dan teks. */
.section-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-hero__feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: var(--weight-light);
}
.section-hero__check {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  color: var(--white);
}

/* --- Kartu produk ---------------------------------------------
   Figma: bg putih, radius 10px, padding kanan 18px dan atas bawah 14px,
   TANPA padding kiri, lalu overflow clip.

   Padding kiri nol itu bukan kelalaian. Gambarnya 167,556px sementara
   baris isinya cuma 140px, jadi gambar sengaja meluber ke atas dan ke
   bawah lalu dipotong tepat di tepi kartu. Tinggi kartu 140 + 14 + 14
   = 168, dan gambarnya 167,556. Angkanya memang dibuat pas. */
.section-hero__card {
  display: flex;
  align-items: center;
  flex: none;
  background: var(--white);
  border-radius: 1rem;
  padding: 1.4rem 1.8rem 1.4rem 0;
  overflow: clip;
  height: 16.8rem;
}
.section-hero__card-media {
  width: 16.7556rem;
  height: 16.7556rem;
  flex: none;
  box-shadow: 0.4409rem 0.4409rem 1.1023rem rgba(0, 0, 0, 0.15);
}
.section-hero__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  width: 20.5rem;
  flex: none;
  align-self: stretch;
}
.section-hero__card-title {
  margin: 0;
  color: var(--onyx);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: var(--weight-light);
}
.section-hero__card-desc {
  margin: 0;
  color: var(--black7);
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: var(--weight-light);
}
/* Tombol kartu: tinggi 32px, radius 80px, teks 12px. Radius 80px lebih
   besar daripada setengah tingginya, jadi hasilnya pil. --radius-pill
   token ini 6rem dan menghasilkan pil yang sama. */
.section-hero__card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding-inline: 4rem;
  border-radius: var(--radius-pill);
  background: var(--onyx);
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.6s var(--ease-media);
}
.section-hero__card-cta:active {
  background: var(--slate-dark);
}

/* --- Bilah bawah ----------------------------------------------
   Grid tiga kolom 1fr auto 1fr, BUKAN space-between. Di Figma
   indikatornya duduk tepat di tengah kontainer (624,81 + 69 = 693,8
   lawan titik tengah 694,15). Dengan space-between posisinya akan
   ditarik oleh lebar kedua sisi yang tidak sama dan meleset.

   Di Figma "Scroll Down" duduk sekitar 14px lebih rendah daripada
   tombol dan indikator. Itu terbaca sebagai geseran tata letak, bukan
   niat, jadi ketiganya di sini disejajarkan di tengah. */
.section-hero__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-top: 2.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.section-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 21.8rem;
  height: 4.8rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--onyx);
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: opacity 0.6s var(--ease-media);
}
.section-hero__cta:active { opacity: 0.82; }
.section-hero__arrow {
  width: 1.1484rem;
  height: 1rem;
  flex: none;
}

/* Indikator 138 x 10px: dua titik lalu batang membulat. */
.section-hero__progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 1rem;
}
.section-hero__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.section-hero__track {
  width: 11rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--white);
}

.section-hero__scroll {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.5;
}
.section-hero__scroll-icon {
  width: 2rem;
  height: 2rem;
  flex: none;
}

/* --- Di bawah 1024 --------------------------------------------
   Figma TIDAK punya frame mobile untuk hero ini, jadi bagian ini
   keputusan sendiri dan ditandai begitu, bukan hasil ukur.

   Aturannya: kolom teks melebar penuh, kartu turun ke bawahnya, dan
   indikator plus Scroll Down disembunyikan. Keduanya kontrol sekunder
   yang di lebar sempit cuma merebut ruang dari tombol utama. */
@media (max-width: 1023.98px) {
  .section-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }
  .section-hero__copy { width: 100%; }
  .section-hero__heading { font-size: max(3.4rem, 30.6px); }
  .section-hero__features { gap: 1.6rem 2.4rem; }
  .section-hero__card { width: 100%; }
  .section-hero__card-body { width: auto; flex: 1; }
  .section-hero__bar { grid-template-columns: 1fr; }
  .section-hero__progress,
  .section-hero__scroll { display: none; }
  .section-hero__cta { width: 100%; }
}