/* ============================================================
   SANASALZ WEBSITE — Home page
   Design tokens extracted from Figma (LJTV6GLkGN7UEH94cbYrDG)
   ============================================================ */

:root {
  --color-navy: #023566;
  --color-navy-85: rgba(2, 53, 102, 0.85);
  --color-navy-50: rgba(2, 53, 102, 0.5);
  --color-yellow: #FFC300;
  --color-yellow-95: rgba(255, 195, 0, 0.95);
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-grey: #D9D9D9;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --radius-lg: 20px;
  --container-width: 1440px;
  --container-padding: 152px;

  --max-content-width: 1136px; /* 1440 - 152*2 */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
}

/* Sistem typography: seluruh heading memakai Montserrat, sedangkan teks
   isi dan komponen antarmuka tetap mewarisi Poppins dari body. */
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 900;
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 500;
}

img {
  max-width: 100%;
  display: block;
}

/* Elemen ber-atribut hidden harus benar-benar tersembunyi, meski kelasnya
   menetapkan display sendiri (grid/flex/block). */
[hidden] {
  display: none !important;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Full-bleed page wrapper: coloured sections span the whole viewport while
   their inner content stays capped at the 1440px design width. */
.home {
  width: 100%;
  overflow-x: hidden;
}

/* Caps a section's content to the design width and keeps it centred, so
   sections can paint their background edge to edge. */
.section-hero,
.section-about,
.section-retailers,
.section-recipes,
.section-blog,
.footer {
  padding-left: max(var(--container-padding), calc(50% - var(--max-content-width) / 2));
  padding-right: max(var(--container-padding), calc(50% - var(--max-content-width) / 2));
}

/* The "why choose" section runs its own column geometry (the pack mockup
   bleeds past the gutter), so it only caps its overall width. */
.section-why {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 5.625%;  /* 81 / 1440 */
  padding-right: 5.625%;
}

/* ---------- Reusable buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 24px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

/* Tombol merespons kursor: sedikit terangkat dengan bayangan kuning hangat,
   lalu menekan saat diklik. Gerakannya kecil supaya terasa rapi, bukan ramai. */
.btn {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    transform 0.2s ease, box-shadow 0.25s ease, font-weight 0.2s ease;
}

/* Teks menebal saat disentuh kursor. Aman dilakukan karena setiap tombol
   sudah punya lebar tetap, jadi huruf yang menebal tidak menggeser apa pun. */
.btn:hover {
  font-weight: 700;
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--primary {
  background: var(--color-yellow-95);
  color: var(--color-black);
}

.btn--primary:hover {
  background: var(--color-yellow);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(255, 195, 0, 0.3);
}

.btn--primary:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

/* Tombol garis berubah jadi solid saat disentuh kursor */
.btn--outline-white:hover {
  background: var(--color-white);
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.18);
}

.btn--outline-navy:hover {
  background: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(2, 53, 102, 0.22);
}

.btn--outline-white:focus-visible,
.btn--outline-navy:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 3px;
}

.btn--outline-white {
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  background: transparent;
}

.btn--outline-navy {
  border: 1.5px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
}

/* ============================================================
   TOPBAR — shared header for every page
   Figma: navy band h=186, logo at y=61, links at y=84.
   On the home page it overlays the hero instead of stacking above it.
   ============================================================ */

.topbar {
  background: var(--color-navy);
  height: 186px;
}

/* Same gutter maths as the footer and the content sections, so the logo
   lines up with the one below it at every width. */
.topbar__inner {
  padding: 61px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Home page: the hero already paints the navy band, so the bar floats on top. */
.topbar--overlay {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  background: transparent;
}

.topbar--overlay .topbar__inner {
  padding-bottom: 0;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

/* The hero paints navy edge to edge; the stage inside it is capped at the
   1440px design width, so no white gutters appear on wide screens. */
.section-hero {
  position: relative;
  background: var(--color-navy);
  padding: 0;
  overflow: hidden;
}

/* Hero carousel. Slide pertama tetap memakai kanvas produk lama; dua slide
   berikutnya memakai foto penuh dengan scrim navy agar copy selalu terbaca. */
.hero-slider {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  aspect-ratio: 1440 / 708;
  background: var(--color-navy);
}

.hero-slider__viewport,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slider__viewport {
  overflow: hidden;
}

.hero-slide {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 560ms ease,
    visibility 0s linear 560ms;
}

.hero-slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.hero-slide--product .hero-stage {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.hero-slide--visual {
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-navy);
}

.hero-slide__image,
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide__image {
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

.hero-slide__overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 35, 70, 0.58) 0%, rgba(2, 35, 70, 0) 34%),
    linear-gradient(90deg, rgba(2, 35, 70, 0.98) 0%, rgba(2, 35, 70, 0.84) 36%, rgba(2, 35, 70, 0.24) 64%, rgba(2, 35, 70, 0.08) 100%);
}

.hero-slide__content {
  position: absolute;
  z-index: 2;
  top: 51%;
  left: max(78px, 7.6%);
  width: min(45%, 610px);
  transform: translateY(-36%);
}

.hero-slide__eyebrow {
  margin: 0 0 12px;
  color: var(--color-yellow);
  font-family: var(--font-heading);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  letter-spacing: 0.17em;
}

.hero-slide__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.35vw, 52px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.015em;
  text-wrap: balance;
}

.hero-slide__title span {
  display: block;
  margin-top: 8px;
  color: var(--color-yellow);
}

.hero-slide__text {
  max-width: 530px;
  margin: 18px 0 24px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
}

.hero-slide__cta {
  width: auto;
  min-width: 176px;
  height: 44px;
  padding: 0 24px;
}

/* Kontrol baru disingkap sesudah JavaScript siap. Tanpa JavaScript, hero
   pertama tetap tampil utuh dan tidak menyisakan tombol yang tidak bekerja. */
.hero-slider__arrow,
.hero-slider__dots {
  visibility: hidden;
  opacity: 0;
}

.hero-slider.is-ready .hero-slider__arrow,
.hero-slider.is-ready .hero-slider__dots {
  visibility: visible;
  opacity: 1;
}

.hero-slider__arrow {
  position: absolute;
  z-index: 3;
  top: 54%;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  color: var(--color-white);
  background: rgba(2, 53, 102, 0.62);
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(2, 23, 48, 0.24);
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(6px);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.hero-slider__arrow--prev {
  left: 24px;
}

.hero-slider__arrow--next {
  right: 24px;
}

.hero-slider__arrow svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-slider__arrow:hover {
  color: var(--color-navy);
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  transform: translateY(-50%) scale(1.06);
}

.hero-slider__arrow:focus-visible,
.hero-slider__dot:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}

.hero-slider__dots {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 18px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 9px;
  transition: opacity 180ms ease;
}

.hero-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  cursor: pointer;
  transition: width 180ms ease, background-color 180ms ease;
}

.hero-slider__dot.is-active {
  width: 30px;
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slider__arrow,
  .hero-slider__dots,
  .hero-slider__dot {
    transition: none;
  }

  .hero-slide__image {
    transform: none;
  }
}

.logo img {
  width: 139px;
  height: 68px;
}

.nav-menu {
  display: flex;
  gap: 32px;
}

/* Pada desktop lebar, enam tautan utama dipusatkan terhadap sumbu konten.
   Padding kanan menyetarakan lebar logo di kiri, sementara pilihan bahasa
   dikeluarkan dari alur flex dan tetap menempel di sisi kanan. */
@media (min-width: 1280px) {
  .nav-menu {
    position: relative;
    flex: 1;
    justify-content: center;
    margin-left: 0;
    padding-right: 139px;
  }

  .nav-menu__lang {
    position: absolute;
    top: 50%;
    right: 0;
    margin-left: 0;
    transform: translateY(-50%);
  }
}

.nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
}

.nav-link--active {
  font-weight: 700;
}

/* Secara markup, "ID | EN" adalah tautan terakhir di dalam .nav-menu supaya
   ikut masuk panel mobile; di desktop didorong ke ujung kanan topbar dengan
   margin-left: auto sehingga tampilannya identik seperti sebelumnya.
   Bahasa yang sedang aktif ditandai kuning + bold (meniru nav-link--active),
   yang tidak aktif tetap putih dengan berat normal. */
.nav-menu__lang {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
  margin-left: auto;
}

.nav-menu__lang-sep {
  margin: 0 2px;
  opacity: 0.6;
}

.nav-menu__lang span.is-active {
  color: var(--color-yellow);
  font-weight: 700;
}

/* Hero stage — mirrors the Figma frame (1440 x 708). Every child is placed
   with percentage coordinates derived from the design, so the composition
   scales with the viewport while keeping the exact same proportions.
   Stacking order (back to front): salt pile -> mockup -> headline. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  aspect-ratio: 1440 / 708;
}

/* Salinan cermin gundukan hanya dipakai di layar sempit: sisi kanan PNG
   adalah sisi bayangan yang tenggelam di latar biru, jadi versi mobile
   menumpuk salinan terbalik di belakangnya agar kedua sisi botol
   sama-sama terang. Di desktop disembunyikan. */
.hero-salt--cermin {
  display: none;
}

/* Pile of Salt: x=251 y=375 w=885 h=333 */
.hero-salt {
  position: absolute;
  z-index: 1;
  left: 17.431%;   /* 251 / 1440 */
  top: 52.966%;    /* 375 / 708 */
  width: 61.458%;  /* 885 / 1440 */
  height: 47.034%; /* 333 / 708 */
  object-fit: contain;
  object-position: bottom;
}

/* Flying Mockup: x=494.96 y=160.29 w=405.09 h=536.42, rotated -2.71deg.
   The PNG's transparent top padding is intentional — it lands the visible
   cap at y=244, exactly touching the underside of the "BIJAK" line. */
.hero-mockup {
  position: absolute;
  z-index: 2;
  left: 34.372%;   /* 494.96 / 1440 */
  top: 20.170%;    /* cap meets the baseline of line 1 (y=227.7) */
  width: 28.131%;  /* 405.09 / 1440 */
  height: 75.766%; /* 536.42 / 708 */
  object-fit: contain;
  transform: rotate(-2.71deg);
  pointer-events: none;
}

/* Headline. Sengaja tanpa z-index sendiri supaya tiap baris memilih
   lapisannya masing-masing: baris 1-2 di depan botol, baris 3 di belakang. */
.hero-heading {
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;        /* 177 / 708 */
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(28px, 3.82vw, 55px); /* 55 / 1440 */
  line-height: 1.127;                   /* 62px step between baselines */
  letter-spacing: 0.04em;
  color: var(--color-white);
  pointer-events: none;
}

.hero-heading p {
  margin: 0;
}

/* Baris 1-2 tetap di depan botol (z 3 > botol z 2). */
.hero-heading__line1,
.hero-heading__line2 {
  position: relative;
  z-index: 3;
}

/* "LEBIH SEHAT" duduk di BELAKANG botol (z 1 > gundukan garam z 1 karena
   urutan DOM, tapi < botol z 2). Pada pita setinggi huruf baris ini
   siluet botol membentang x=603..842 dari 1440; celah antar kata dibuat
   sedikit lebih sempit dari itu sehingga botol hanya memakan ~20% sisi
   dalam huruf H dan S — keduanya tetap terbaca. `left` menggeser baris
   supaya celahnya terpusat pada botol, bukan pada bingkai (kata kanan
   lebih lebar dari kata kiri, jadi teks yang rata tengah meleset ~15px). */
.hero-heading__line3 {
  position: relative;
  z-index: 1;
  left: var(--hero-line3-shift, 1.03%); /* 14.9 / 1440 */
}

.hero-heading__accent {
  color: var(--color-yellow);
}

/* "LEBIH" and "SEHAT" flank the bottle: 202px dari 1440, yaitu lebar
   siluet botol (239px) dikurangi tumpang tindih 20% pada H dan S. */
.hero-heading__accent--left {
  margin-right: 14.05%;
}

/* Celah untuk bahasa Inggris ("EAT WELL," / "LIVE WELL") dihitung dengan
   cara yang sama; hurufnya lebih lebar, jadi angkanya sedikit beda dan
   pergeseran barisnya nyaris nol karena kedua kata hampir sama panjang.
   Total baris 910px dari 1440, masih muat satu baris. */
html[lang="en"] .hero-heading__accent--left {
  margin-right: 14.46%;
}

html[lang="en"] {
  --hero-line3-shift: 0.12%;
}

/* Lihat Produk: x=616 y=611 w=155 h=42 */
.hero-cta {
  position: absolute;
  z-index: 3;
  left: 42.778%;   /* 616 / 1440 */
  top: 86.299%;    /* 611 / 708 */
  width: 10.764%;  /* 155 / 1440 */
  min-width: 120px;
  padding: 0;
}

/* Denyut lembut menarik perhatian ke ajakan utama halaman */
.hero-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 3px 10px rgba(255, 195, 0, 0.35);
}

.hero-cta:active {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .hero-cta {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .btn:hover,
  .hero-cta:hover,
  .btn:active,
  .hero-cta:active {
    transform: none;
  }
}

/* ============================================================
   APA ITU GARAM SANASALZ
   ============================================================ */

.section-about {
  padding-top: 90px;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 40px;
}

.about-copy__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 12px;
}

.about-copy__title strong {
  font-weight: 900;
}

.about-copy__text {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-black);
  margin: 0 0 16px;
}

.about-copy__text--bold {
  font-weight: 700;
}

.about-image img {
  width: 100%;
  height: 233px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-grey);
}

.about-stat {
  grid-column: 1 / -1;
  max-width: 863px;
  margin: 60px auto 0;
  text-align: center;
}

.about-stat__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.3;
  color: var(--color-navy);
  margin: 0 0 30px;
}

.about-stat__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0 0 20px;
}

.about-stat__highlight {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 90px;
}

/* ============================================================
   BANNER: NATRIUMARMES SALZ
   ============================================================ */

.section-banner {
  position: relative;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.section-banner__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 721px;
  padding: 0 24px;
}

.section-banner__eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 19px;
}

.section-banner__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0;
}

/* ============================================================
   KENAPA MEMILIH GARAM SANASALZ
   ============================================================ */

/* Figma: mockup x=81 w=542, copy column starts x=623 w=653 (no gutter
   between them). The section is edge-to-edge, so it opts out of the shared
   content-width padding and places its columns proportionally instead. */
.section-why {
  padding-top: 70px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: 42.41% 1fr; /* 542 / 1278 content width */
  column-gap: 0;
  align-items: center;
}

.why-visual img {
  width: 100%;
}

.why-copy__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 24px;
  max-width: 502px;
}

.why-copy__text {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-black);
  margin: 0 0 30px;
  max-width: 652px;
}

/* Badges keep their individual Figma heights rather than one shared size:
   Halal 126, BPOM 123, SNI 95, ISO 108. */
.why-certs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 78px;
  margin: 0;
  padding: 0;
}

/* Badge membesar dan terangkat saat kursor mendekat — murni gerakan,
   tanpa bayangan. */
.why-certs__item {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.why-certs__item:hover {
  transform: translateY(-8px) scale(1.08);
}

/* max-width global (img { max-width: 100% }) menyusutkan lebar sementara
   height tetap, sehingga badge tampak gepeng saat ruang menyempit.
   Lebar dibiarkan mengikuti rasio aslinya. */
.why-certs__item img {
  width: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .why-certs__item {
    transition: none;
  }

  .why-certs__item:hover {
    transform: none;
  }
}

.why-certs__item--halal img { height: 126px; }
.why-certs__item--bpom  img { height: 123px; }
.why-certs__item--sni   img { height: 95px; }
.why-certs__item--iso   img { height: 108px; }

/* Logo sertifikasi tambahan tidak memiliki ukuran khusus seperti empat badge
   bawaan. Batasi kedua sumbunya agar rasio logo tetap utuh dan baris dinamis
   tidak terdorong keluar dari kolom. */
.why-certs__item--custom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-certs__item--custom img {
  width: auto;
  height: auto;
  max-width: 128px;
  max-height: 108px;
  object-fit: contain;
}

/* ============================================================
   MANFAAT KALIUM KLORIDA | MAGNESIUM
   ============================================================ */

.section-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.benefit-card {
  padding-top: 80px;
  padding-bottom: 80px;
  min-height: 420px;
}

/* Outer edges align with the page gutter; inner edges keep the Figma gap. */
.benefit-card--navy {
  background: var(--color-navy);
  padding-left: max(var(--container-padding), calc(100% - var(--max-content-width) / 2));
  padding-right: 40px;
}

.benefit-card--yellow {
  background: var(--color-yellow);
  padding-left: 52px;
  padding-right: max(var(--container-padding), calc(100% - var(--max-content-width) / 2));
}

.benefit-card__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 26px;
  margin: 0 0 40px;
}

.benefit-card--navy .benefit-card__title {
  color: var(--color-white);
}

.benefit-card--yellow .benefit-card__title {
  color: var(--color-navy);
}

.benefit-card__text {
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 40px;
  max-width: 484px;
}

.benefit-card--navy .benefit-card__text {
  color: var(--color-white);
}

.benefit-card--yellow .benefit-card__text {
  color: var(--color-black);
}

/* ============================================================
   BELI SANASALZ DI
   ============================================================ */

.section-retailers {
  padding-top: 90px;
  padding-bottom: 90px;
  text-align: center;
}

.section-retailers__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 26px;
  color: var(--color-navy);
  margin: 0 0 26px;
}

/* Deretan logo bergerak menyamping tanpa henti. Tiap baris memuat dua
   salinan gambar yang sama; begitu salinan pertama keluar layar, salinan
   kedua sudah menempati posisinya, jadi peralihannya tak terlihat. */
.retailers-row {
  overflow: hidden;
  /* tepi memudar supaya logo tidak terpotong mendadak */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.retailers-row--bottom {
  margin-top: 40px;
}

.retailers-track {
  display: flex;
  width: max-content;
}

.retailers-row--top .retailers-track {
  animation: retailers-left 32s linear infinite;
}

.retailers-row--bottom .retailers-track {
  animation: retailers-right 28s linear infinite;
}

/* Berhenti saat kursor menyentuh, supaya logo bisa diamati */
.retailers-row:hover .retailers-track {
  animation-play-state: paused;
}

/* Jarak antar salinan dibuat lewat padding, bukan gap — supaya kedua unit
   di dalam track lebarnya persis sama dan geseran -50% jatuh tepat. */
.retailers-track img {
  height: auto;
  flex-shrink: 0;
  padding-right: 60px;
  box-sizing: content-box;
}

.retailers-row--top img {
  width: 837px;
}

.retailers-row--bottom img {
  width: 532px;
}

/* Track berisi dua salinan, jadi bergeser separuh lebarnya sama dengan
   bergeser tepat satu salinan — berlaku di ukuran layar mana pun. */
@keyframes retailers-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes retailers-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .retailers-track {
    animation: none !important;
    justify-content: center;
  }

  /* tanpa gerakan, salinan kedua tidak diperlukan */
  .retailers-track img:nth-child(2) {
    display: none;
  }
}

/* ============================================================
   #GANTIGARAMMU / RESEP
   ============================================================ */

/* Figma: band y=3136 h=403; copy column x=152 w=327; cards start x=538,
   each 232x274 with a 27px gutter, top-aligned at y=3202. */
.section-recipes {
  background: var(--color-yellow);
  padding-top: 66px;
  padding-bottom: 66px;
  display: grid;
  grid-template-columns: minmax(0, 327fr) minmax(0, 750fr); /* 327 : 232*3+27*2 */
  column-gap: 59px;
  align-items: start;
}

.recipes-copy__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 25px;
}

.recipes-copy__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0 0 46px;
}

/* Figma: 211 x 42 outlined button */
.recipes-copy .btn {
  width: min(211px, 100%);
}

/* Three equal cards that shrink to fit the column instead of overflowing;
   the Figma 232x274 proportion is preserved via aspect-ratio. */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 27px;
}

.recipe-card {
  position: relative;
  aspect-ratio: 232 / 274;
  max-height: 274px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-grey);
}

.recipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark scrim across the TOP of the card so the name stays legible
   (Figma: 232x84 gradient anchored to the top edge). */
.recipe-card__scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 84px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(4, 106, 204, 0) 100%);
}

/* Card name sits at the TOP of the card (Figma y=3217, 15px inset). */
.recipe-card__name {
  position: absolute;
  left: 24px;
  right: 16px;
  top: 15px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
}

/* Navy action bar (Figma: Rect 14). The design shows it on the first card
   only — that is the hover state, so every card slides it up on hover. */
.recipe-card__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 63px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--color-navy-85);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 14px;
  color: var(--color-white);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.recipe-card:hover .recipe-card__cta,
.recipe-card:focus-within .recipe-card__cta {
  transform: translateY(0);
  opacity: 1;
}

.recipe-card__arrow {
  flex-shrink: 0;
  transition: transform 0.28s ease;
}

.recipe-card:hover .recipe-card__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .recipe-card__cta,
  .recipe-card__arrow {
    transition: none;
  }
}

/* ============================================================
   BLOG
   ============================================================ */

.section-blog {
  padding-top: 90px;
  padding-bottom: 90px;
}

.blog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
}

.blog-header__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 26px;
  color: var(--color-navy);
  margin: 0;
}

.blog-header__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--color-navy);
  transition: gap 0.2s ease;
}

.blog-header__link:hover {
  gap: 20px;
}

/* Figma: dua kartu 552px dengan jarak 32px, tanpa kotak pembungkus */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.blog-card img {
  width: 100%;
  aspect-ratio: 552 / 276;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-grey);
}

/* Jarak mengikuti Figma: gambar -> judul 22px, judul -> teks 9px */
.blog-card__body {
  padding-top: 22px;
}

.blog-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-black);
  margin: 0 0 9px;
}

.blog-card__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--color-navy);
  padding-top: 90px;
  padding-bottom: 30px;
}

/* Lebar kolom mengikuti proporsi Figma (diukur dari Home.png: jarak antar
   awal kolom 288/199/273, kapsul subscribe 314px) — bukan 1fr seragam,
   yang membuat kolom subscribe terlalu sempit.
   minmax(0, ...) supaya kolom tetap bisa menyusut: grid tidak mengecil di
   bawah min-content anaknya secara default, dan itu dulu membuat kotak
   subscribe mendorong seluruh grid melebihi lebar layar. */
.footer-top {
  display: grid;
  grid-template-columns:
    minmax(0, 248fr) minmax(0, 159fr) minmax(0, 233fr) minmax(0, 314fr);
  gap: 40px;
}

.footer-logo img {
  width: 139px;
  height: 68px;
}

.footer-col__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-white);
  margin: 0 0 20px;
}

.footer-col--follow .footer-col__title,
.footer-col--subscribe .footer-col__title {
  font-weight: 500;
}

.footer-col__link {
  display: block;
  font-size: 16px;
  color: var(--color-white);
  margin-bottom: 14px;
}

/* Menandai halaman yang sedang dibuka, sama seperti nav-link--active
   di header. */
.footer-col__link--active {
  font-weight: 700;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.footer-social__icon {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social__icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.footer-col__email,
.footer-col__phone {
  font-size: 16px;
  color: var(--color-white);
}

.footer-col__email:hover,
.footer-col__phone:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Figma: kapsul putih pill penuh (314x40), tombol kuning 93px menempel
   flush ke tepi kanan — sisi kiri tombol lurus, sisi kanannya melengkung
   karena dipotong overflow:hidden milik kapsul, tingginya penuh.
   min-height (bukan height tetap) supaya konten tetap muat kalau skala
   teks perangkat diperbesar. */
.footer-subscribe {
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-white);
  min-height: 42px;
}

/* font-size di bawah 16px membuat Android auto-zoom saat fokus, dan pada
   perangkat dengan pengaturan skala teks besar butuh tinggi baris lebih
   dari 42px — height tetap + overflow:hidden dulu memotong kontennya
   secara vertikal. min-height + padding memberi ruang untuk itu. */
.footer-subscribe__input {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  padding: 9px 18px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-navy-50);
  background: transparent;
}

/* Chrome Android draws a built-in clear/reveal icon inside type="email"
   fields on some versions, adding internal width the CSS box model never
   accounts for — hide it so the input never claims more space than its
   flex-basis. */
.footer-subscribe__input::-webkit-search-cancel-button,
.footer-subscribe__input::-webkit-clear-button {
  display: none;
}

/* Figma: tombol pill penuh — sisi KIRI juga melengkung — tapi menempel
   flush ke tepi kanan kapsul (tanpa margin), jadi lengkung kanannya
   berimpit dengan lengkung kapsul. */
.footer-subscribe__btn {
  border: none;
  border-radius: 999px;
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 0 12px;  /* teks 69px + 24px = 93px, sama dengan Figma */
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
}

.footer-bottom {
  display: flex;
  gap: 8px;
  margin-top: 70px;
  font-size: 14px;
  color: var(--color-white);
}

/* Yellow "Lebih Lanjut" button on blog cards (Figma: Rect 16/17, 156x42) */
.blog-card__btn {
  width: 156px;
  margin-top: 30px;
}

/* ============================================================
   PRODUK PAGE
   ============================================================ */

/* Plain kitchen banner — no copy sits on it; the pouch below rises into it.
   Figma: y=186 h=278. Kept at z-index 0 so the overlapping pack shot,
   which lives in the next section, paints on top of it. */
.produk-hero {
  position: relative;
  z-index: 0;
  height: 278px;
  overflow: hidden;
}

.produk-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product block: pack shot on the left, copy + nutrition tables on the right.
   Figma: pouch x=122 w=432 starting at y=253 — it rises 211px into the banner
   above — while the copy column runs x=561..1259. */
.produk-item {
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 12.569% 66px 8.472%; /* right 181px, left 122px of 1440 */
  display: grid;
  grid-template-columns: minmax(0, 37.995fr) minmax(0, 61.39fr);
  column-gap: 0.616%;
  align-items: start;
}

/* The first pack shot rises 211px into the banner above it (Figma: banner
   ends at y=464, the pouch starts at y=253). The second one sits normally. */
.produk-item--overlap .produk-item__visual {
  margin-top: -211px;
}

.produk-item__visual {
  position: relative;
  z-index: 1;
  align-self: start;
}

.produk-item__visual img {
  width: 100%;
}

.produk-item__main-image {
  display: block;
  width: 100%;
}

.produk-item__main-image--cms {
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.produk-item__gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.produk-item__gallery-button {
  width: 62px;
  height: 62px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.footer-subscribe:focus-within {
  outline: 2px solid var(--color-yellow);
  outline-offset: 3px;
}

.footer-subscribe__input.is-invalid,
.aside-subscribe__input.is-invalid {
  box-shadow: inset 0 0 0 2px #c0392b;
}

.footer-subscribe__btn:disabled,
.aside-subscribe__btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.subscribe-form__status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
}

.subscribe-form__status.is-info {
  background: #eef5fb;
  border-color: #9db9d0;
  color: #073b66;
}

.subscribe-form__status.is-success {
  background: #edf9f1;
  border-color: #25a95a;
  color: #126c37;
}

.subscribe-form__status.is-error {
  background: #fff1f1;
  border-color: #c0392b;
  color: #8f2118;
}

.produk-item__gallery-button.is-active {
  border-color: var(--color-navy);
}

.produk-item__gallery-button img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.produk-item__nutrition-basis {
  font-family: var(--font-body);
  font-size: .72em;
  font-weight: 400;
  text-transform: none;
}

.produk-item__nutrition-pending {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-yellow);
  background: #fff8dc;
  color: var(--color-navy);
  font-size: 14px;
  line-height: 1.55;
}

.produk-item__nutrition-note {
  max-width: 698px;
  margin: 7px 0 0;
  color: var(--color-black);
  font-size: 13px;
  font-style: italic;
  line-height: 26px;
}

.produk-item__detail {
  padding-top: 66px;
}

/* Figma: title box is 280px wide, so it wraps onto two lines */
.produk-item__name {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 24px;
}

.produk-item__desc {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0;
}

.produk-item__subtitle {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 36px 0 12px;
}

/* Two nutrition tables side by side (Figma: 340px each, 18px apart).
   align-items: start supaya tabel kanan (3 baris) tidak meregang mengikuti
   tinggi tabel kiri (4 baris) — default grid stretch membuat baris-barisnya
   jadi gemuk dan tidak sejajar dengan baris tabel kiri. */
.nutrition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340fr));
  gap: 18px;
  justify-content: start;
  align-items: start;
  max-width: 698px;
}

/* table-layout: auto (bukan fixed) supaya kolom "Zat Gizi" mengecil
   mengikuti kata terpanjang di tabelnya SENDIRI — dengan fixed, kedua
   tabel dipaksa 1/3-1/3-1/3 walau tabel kanan isinya kata pendek
   (Natrium, Kalium), sehingga terlihat lowong/timpang dibanding tabel
   kiri yang punya "Karbohidrat Total". */
.nutrition__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 26px;
  table-layout: auto;
}

.nutrition__table th,
.nutrition__table td {
  padding: 6px 10px;
  text-align: left;
  font-weight: 400;
}

.nutrition__table thead th {
  background: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
}

.nutrition__table tbody td {
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

.nutrition__table .is-num {
  text-align: right;
}

.produk-divider {
  max-width: var(--max-content-width);
  margin: 0 auto;
  border: none;
  border-top: 1.5px solid var(--color-navy);
}

/* Navy certification banner (Figma: Banner 3, y=1786 h=290) */
.produk-cert {
  position: relative;
  min-height: 290px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.produk-cert__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produk-cert__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 40px max(var(--container-padding), calc(50% - var(--max-content-width) / 2));
}

.produk-cert__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
  margin: 0 0 26px;
  max-width: 548px;
}

/* Empat badge sejajar (Figma: Group 9, total 484px). Tingginya mengikuti
   proporsi masing-masing seperti di desain. */
.produk-cert__badges {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin: 0;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.produk-cert__badges li {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.produk-cert__badges li:hover {
  transform: translateY(-8px) scale(1.08);
}

.produk-cert__badges img {
  width: auto;
  max-width: 150px;
  height: 84px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .produk-cert__badges li {
    transition: none;
  }

  .produk-cert__badges li:hover {
    transform: none;
  }
}

/* The product page sets its shared section headings two points larger than
   the home page (Figma: 28px vs 26px) and drops the italic on the wordmark. */
.page-produk .recipes-copy__title,
.page-produk .blog-header__title {
  font-size: 28px;
}

.page-produk .recipes-copy__title {
  font-style: normal;
}

/* "Dapatkan SANASALZ di" is 25px in the product frame */
.page-produk .section-retailers__title {
  font-size: 25px;
}

/* ============================================================
   TOKO & RESELLER PAGE
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hero banner with a 50% black scrim (Figma: Rect 46/47, y=186 h=278) */
.toko-hero {
  position: relative;
  height: 278px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.toko-hero__bg,
.toko-hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.toko-hero__bg {
  object-fit: cover;
}

.toko-hero__scrim {
  background: rgba(0, 0, 0, 0.5);
}

.toko-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 815px;
  max-width: calc(100% - 48px);
  padding-top: 92px; /* title at y=278, banner starts at 186 */
}

.toko-hero__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 14px;
}

.toko-hero__text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0;
}

/* Segmented OFFLINE / ONLINE control (Figma: two 176x42 halves at y=502) */
.toko-switch {
  display: flex;
  justify-content: center;
  padding: 38px 24px 0;
}

.toko-switch__group {
  display: flex;
}

.toko-switch__btn {
  width: 176px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-black);
  border: 1px solid var(--color-navy);
  background: transparent;
}

.toko-switch__btn:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border-right-width: 0;
}

.toko-switch__btn:last-child {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.toko-switch__btn--active {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  font-weight: 700;
}

/* Logo retailer menjadi shortcut visual untuk filter toko offline. */
.store-brand-filters {
  width: 100%;
  padding: 52px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
}

.store-brand-filters__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}

.store-brand-filters__button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 162px;
  width: 162px;
  aspect-ratio: 1;
  padding: 22px 18px;
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.68);
  border-radius: 17px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 59, 105, 0);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.store-brand-filters__logo {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: contain;
}

.store-brand-filters__name {
  color: var(--color-navy);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.store-brand-filters__button:hover {
  border-color: var(--color-navy);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 59, 105, 0.14);
}

.store-brand-filters__button.is-active {
  background: #fffdf2;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 4px var(--color-yellow), 0 12px 26px rgba(0, 59, 105, 0.18);
}

.store-brand-filters__button:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 4px;
}

/* Two-column finder: scrollable store list + map (Figma: list x=152 w=371,
   map x=604 w=684 h=717) */
/* Figma: panel 371px, scroll track 19px terpisah, lalu peta 684px */
.toko-finder {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 62px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 90px;
  display: grid;
  grid-template-columns: minmax(0, 371fr) minmax(0, 684fr);
  column-gap: 6.2%; /* 604 - (152 + 371) = 81px dari 1136 */
  align-items: start;
}

/* Retailer picker styled as the Figma dropdown (371 x 50, navy outline) */
.store-select {
  position: relative;
}

.store-select__input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 22px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
  background: var(--color-white);
  text-transform: uppercase;
}

.store-select__input::placeholder {
  color: rgba(0, 0, 0, 0.45);
  text-transform: none;
}

.store-select__input:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 1px;
}

/* Daftar saran dibuat sendiri agar mengikuti gaya situs — <datalist>
   bawaan browser tampilannya ditentukan sistem operasi. */
.store-options {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-white);
  border: 1.5px solid var(--color-navy);
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(2, 53, 102, 0.16);
  scrollbar-width: thin;
  scrollbar-color: var(--color-navy) #EFEFEF;
}

.store-options__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.store-options__item:hover,
.store-options__item.is-highlighted {
  background: var(--color-navy);
}

.store-options__name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-black);
  text-transform: uppercase;
}

.store-options__count {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.store-options__item:hover .store-options__name,
.store-options__item.is-highlighted .store-options__name {
  color: var(--color-white);
}

.store-options__item:hover .store-options__count,
.store-options__item.is-highlighted .store-options__count {
  color: var(--color-yellow);
}

.store-select__caret {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-black);
  pointer-events: none;
}

/* Daftar menggulir sendiri; batangnya digambar terpisah di kanan panel
   seperti di desain, bukan menempel di dalam daftar. */
/* Tinggi disamakan dengan peta di sebelahnya. Saat cabang yang tampil
   lebih panjang dari ini, batang gulir muncul di kanan daftar. */
.store-list {
  list-style: none;
  margin: 31px 0 0;
  padding: 0;
  height: 660px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-navy) #EFEFEF;
}

.store-list::-webkit-scrollbar {
  width: 19px;
}

.store-list::-webkit-scrollbar-track {
  background: #EFEFEF;
  border-radius: var(--radius-lg);
}

.store-list::-webkit-scrollbar-thumb {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  border: 5px solid #EFEFEF;
}

@keyframes store-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.store-list[aria-busy="true"] {
  overflow: hidden;
}

.store-list__loading {
  display: grid;
  gap: 15px;
  margin-right: 15px;
}

.store-skeleton {
  display: block;
  background: linear-gradient(105deg, #e2e2e2 28%, #f5f5f5 42%, #e2e2e2 58%);
  background-size: 220% 100%;
  animation: store-skeleton-shimmer 1.4s ease-in-out infinite;
}

.store-skeleton--heading {
  width: 46%;
  height: 24px;
  margin: 3px 0 1px;
  border-radius: 8px;
}

.store-skeleton--card {
  width: 100%;
  height: 72px;
  border-radius: 15px;
}

/* City heading with a map-pin glyph, outside the cards */
.store-list__city {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 14px;
  color: var(--color-black);
  margin: 26px 0 14px;
}

.store-list__city:first-child {
  margin-top: 0;
}

.store-list__pin {
  flex-shrink: 0;
}

.store-list__empty {
  padding: 24px 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}

/* Grey by default; the selected branch turns navy, reveals its address and
   grows an arrow pointing towards the map. */
.store-card {
  position: relative;
  padding: 16px 22px;
  margin-bottom: 15px;
  margin-right: 15px; /* ruang agar ekor kartu aktif tidak terpotong */
  border-radius: 15px;
  background: var(--color-grey);
  cursor: pointer;
  transition: background 0.2s ease;
}

.store-card:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.store-card.is-active {
  background: var(--color-navy);
}

.store-card.is-active::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 14px solid transparent;
  border-left-color: var(--color-navy);
  border-right-width: 0;
}

.store-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-black);
  margin: 0;
}

/* Address is only revealed on the active card */
.store-card__address {
  display: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-white);
  margin: 2px 0 0;
}

.store-card.is-active .store-card__name {
  color: var(--color-white);
}

.store-card.is-active .store-card__address {
  display: block;
}

.toko-finder__map {
  position: relative;
  min-width: 0;
}

.store-map {
  height: 717px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-grey);
}

.store-map__loading {
  position: absolute;
  z-index: 1200;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(28deg, transparent 47%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.62) 52%, transparent 53%) 0 0 / 150px 150px,
    linear-gradient(116deg, transparent 46%, rgba(195, 201, 207, 0.75) 47%, rgba(195, 201, 207, 0.75) 51%, transparent 52%) 30px 20px / 190px 190px,
    #e3e6e9;
}

.store-map__loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.58) 44%, transparent 58%);
  background-size: 220% 100%;
  animation: store-skeleton-shimmer 1.4s ease-in-out infinite;
}

.store-map__loading-pin {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-navy);
  transform: rotate(-45deg);
  box-shadow: 0 8px 20px rgba(2, 53, 102, 0.22);
}

.store-map__loading-pin::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-yellow);
}

.store-map__loading-label {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(2, 53, 102, 0.12);
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
}

.store-map__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Peta ringkasan Leaflet (keadaan awal sebelum pencarian) mengisi
   kontainer yang sama dengan iframe Google Maps. */
.store-map__overview {
  width: 100%;
  height: 100%;
}

.store-map__fallback {
  padding: 24px;
  font-size: 14px;
}

.store-map__fallback--runtime {
  position: absolute;
  z-index: 1300;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px;
  border: 1px solid rgba(2, 53, 102, 0.16);
  border-radius: var(--radius-lg);
  background: #f7f8fa;
  color: var(--color-navy);
  text-align: center;
}

.store-map__fallback--runtime[hidden] {
  display: none;
}

.store-map__fallback-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.2);
  color: var(--color-navy);
  font-size: 28px;
  font-weight: 700;
}

.store-map__fallback-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
}

.store-map__fallback-text {
  max-width: 390px;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: rgba(2, 53, 102, 0.78);
}

.store-map__fallback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.store-map__fallback-action {
  min-width: 132px;
  padding: 10px 18px;
  border: 1.5px solid var(--color-navy);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.store-map__fallback-action--primary {
  border-color: var(--color-yellow);
  background: var(--color-yellow);
}

.store-map__fallback-action:hover,
.store-map__fallback-action:focus-visible {
  box-shadow: 0 5px 14px rgba(2, 53, 102, 0.16);
  transform: translateY(-1px);
}

.store-list__empty--error {
  padding: 22px;
  border: 1px solid rgba(192, 57, 43, 0.28);
  border-radius: 15px;
  background: rgba(192, 57, 43, 0.06);
  color: #8d2319;
  line-height: 22px;
}

/* Leaflet pin uses a bare SVG, so strip the default icon chrome */
.store-pin {
  background: none;
  border: none;
}

/* Google-Maps-like chrome: soft rounded cards and shadowed controls */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  padding: 2px;
}

.leaflet-popup-content {
  margin: 12px 14px;
  font-family: var(--font-body);
}

/* Popup content is shared by the Leaflet popup and the Google InfoWindow */
.store-popup {
  max-width: 260px;
  font-family: var(--font-body);
}

.store-popup__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-navy);
  margin: 0 0 4px;
}

.store-popup__address {
  font-size: 12px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 8px;
}

.store-popup__link {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
}

.store-popup__link:hover {
  text-decoration: underline;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 12px 24px 0 !important;
}

.leaflet-control-zoom a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: #666;
  border-bottom-color: #e6e6e6;
}

.leaflet-control-attribution {
  font-size: 10px;
}

/* ============================================================
   TOKO ONLINE — marketplace grid
   Figma: 182x182 cards on a 212px pitch (30px gutters), 5 per row,
   first card at x=205 y=604.
   ============================================================ */

.marketplace {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 62px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 90px;
}

.marketplace__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1030px; /* 5 * 182 + 4 * 30 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.marketplace__cell {
  flex: 0 1 182px;
  width: 100%;
  min-width: 0;
}

.marketplace__card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 18px;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Only the filled cards react to the pointer */
a.marketplace__card:hover {
  box-shadow: 0 6px 18px rgba(2, 53, 102, 0.18);
  transform: translateY(-2px);
}

a.marketplace__card:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

.marketplace__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.marketplace__name {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Each logo is drawn at a different size in the design */
.marketplace__logo--tokopedia {
  width: 76%; /* 138 / 182 */
}

.marketplace__logo--shopee {
  width: 51%; /* 92 / 182 */
}

.marketplace__logo--blibli {
  width: 68%; /* 123 / 182 */
}

/* ============================================================
   HUBUNGI KAMI
   Figma: field 442x50 dua kolom (gap 38px), textarea 922x200,
   tombol kirim 198x42.
   ============================================================ */

.kontak-hero__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 14px;
}

.kontak {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 44px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
}

.kontak-form {
  width: 922px;
  max-width: 100%;
  margin: 0 auto;
}

.kontak-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 38px;
  margin-bottom: 26px;
}

.kontak-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-navy);
  margin-bottom: 11px;
}

.kontak-field input,
.kontak-field textarea {
  width: 100%;
  padding: 0 22px;
  border: 1.5px solid var(--color-navy);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
  background: var(--color-white);
}

.kontak-field input {
  height: 50px;
}

.kontak-field textarea {
  min-height: 200px;
  padding: 16px 22px;
  line-height: 24px;
  resize: vertical;
}

.kontak-field input:focus,
.kontak-field textarea:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 1px;
}

.kontak-field input.is-invalid,
.kontak-field textarea.is-invalid {
  border-color: #C0392B;
}

.kontak-field__error {
  font-size: 13px;
  line-height: 20px;
  color: #C0392B;
  margin: 6px 0 0;
}

.kontak-field--pesan {
  margin-bottom: 26px;
}

/* Perangkap bot — tersembunyi dari pengguna, terlihat oleh skrip otomatis */
.kontak-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontak-form__status {
  margin: 0 0 20px;
  padding: 14px 20px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 22px;
}

.kontak-form__status.is-sukses {
  background: rgba(37, 210, 102, 0.12);
  border: 1px solid #25D266;
  color: #14803c;
}

.kontak-form__status.is-gagal {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid #C0392B;
  color: #A5281B;
}

.kontak-form__aksi {
  display: flex;
  justify-content: center;
  padding: 18px 0 90px;
}

.kontak-form__btn {
  width: 198px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kontak-form__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.kontak-form__btn.is-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(2, 53, 102, 0.3);
  border-top-color: var(--color-navy);
  border-radius: 50%;
  animation: kontak-button-spin 0.75s linear infinite;
}

@keyframes kontak-button-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .store-skeleton,
  .store-map__loading::before,
  .kontak-form__btn.is-loading::before {
    animation: none;
  }

  .store-map__fallback-action {
    transition: none;
  }
}

/* ============================================================
   RESEP — halaman detail
   Figma: foto utama 1136x506; kolom kiri 583px; panel nutrisi navy
   429x336; kartu "Resep Lainnya" 242x159.
   ============================================================ */

.rd {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 59px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
}

.rd__breadcrumb {
  font-size: 14px;
  line-height: 26px;
  color: var(--color-black);
}

.rd__breadcrumb a:hover {
  text-decoration: underline;
}

.rd__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-black);
  margin: 8px 0 0;
}

.rd__intro {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 21px 0 0;
  max-width: 1004px;
}

.rd__hero {
  width: 100%;
  aspect-ratio: 1136 / 506;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-grey);
  margin-top: 21px;
}

/* Baris meta + tombol berbagi */
.rd__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 31px;
}

.rd-stats {
  display: flex;
  margin: 0;
}

.rd-stats__item {
  padding: 0 28px;
  border-right: 1px solid var(--color-black);
}

.rd-stats__item:first-child {
  padding-left: 0;
}

.rd-stats__item:last-child {
  border-right: none;
  padding-right: 0;
}

.rd-stats dt {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
}

.rd-stats dd {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0;
}

.rd__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 17px;
}

.rd__like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--color-white);
  color: #111111;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.rd__like svg {
  width: 32px;
  height: 34px;
  fill: var(--color-white);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.rd__like:hover {
  transform: scale(1.08);
  color: #111111;
  background: var(--color-white);
}

.rd__like.is-liked,
.rd__like[aria-pressed="true"] {
  color: var(--color-navy);
  background: var(--color-white);
}

.rd__like.is-liked svg,
.rd__like[aria-pressed="true"] svg {
  fill: currentColor;
  stroke: currentColor;
}

.rd__like.is-liked:hover,
.rd__like[aria-pressed="true"]:hover {
  color: var(--color-navy);
}

.rd__like:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

.rd__like:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.rd__like-status {
  flex: 1 1 100%;
  color: #b42318;
  font-size: 12px;
  line-height: 1.45;
}

.rd__like-status:empty {
  display: none;
}

/* Dua kolom: langkah resep di kiri, nutrisi + resep lain di kanan */
.rd__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 429fr);
  column-gap: 5.9%;
  align-items: start;
  padding-bottom: 90px;
}

.rd__heading {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 20px;
}

.rd__heading--tight {
  letter-spacing: -0.03em;
  margin-top: 60px;
}

.rd__heading--saran {
  font-size: 28px;
  color: var(--color-navy);
  margin-top: 60px;
  margin-bottom: 14px;
}

.rd__heading--lainnya {
  margin: 58px 0 22px;
}

.rd__subheading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 26px 0 6px;
}

.rd__subheading:first-of-type {
  margin-top: 0;
}

/* Daftar bahan — penanda lingkaran kosong seperti di Figma */
.rd-bahan {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rd-bahan li {
  position: relative;
  padding-left: 23px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin-bottom: 3px;
}

.rd-bahan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--color-black);
  border-radius: 50%;
}

/* Langkah memasak — nomor dalam lingkaran navy */
.rd-langkah {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: langkah;
}

.rd-langkah li {
  position: relative;
  counter-increment: langkah;
  padding-left: 53px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
}

.rd-langkah li::before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: 2px;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
}

.rd-langkah strong {
  display: block;
  font-weight: 700;
}

.rd__saran {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0;
  max-width: 618px;
}

/* Panel nutrisi navy */
.rd-nutrisi {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 31px 33px 26px;
}

.rd-nutrisi__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 26px;
}

.rd-nutrisi__title span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
}

.rd-nutrisi__list {
  margin: 0;
}

.rd-nutrisi__list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 0.25px solid var(--color-white);
}

.rd-nutrisi__list > div:last-child {
  border-bottom: none;
}

.rd-nutrisi__list dt,
.rd-nutrisi__list dd {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
  margin: 0;
}

.rd-nutrisi__list dd {
  text-align: right;
}

.rd-nutrisi__note {
  font-style: italic;
  font-size: 13px;
  line-height: 26px;
  color: var(--color-black);
  margin: 7px 0 0;
}

/* Daftar resep lain — thumbnail kiri, nama kanan */
.rd-lainnya {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rd-lainnya li {
  margin-bottom: 26px;
}

.rd-lainnya__item {
  display: grid;
  grid-template-columns: minmax(0, 242fr) minmax(0, 187fr);
  column-gap: 5%;
  align-items: center;
}

.rd-lainnya__item img {
  width: 100%;
  aspect-ratio: 242 / 159;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-grey);
  transition: transform 0.2s ease;
}

.rd-lainnya__item:hover img {
  transform: scale(1.03);
}

.rd-lainnya__item span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 23px;
  color: var(--color-black);
}

/* ============================================================
   RESEP
   Figma: search 900x50 di y=524; unggulan 1138x382 (569 foto + 569 panel
   navy); grid 3 kolom kartu 359x233 dengan gap 30px.
   ============================================================ */

.resep-hero__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 14px;
}

.resep-search {
  display: flex;
  justify-content: center;
  padding: 60px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
}

.resep-search__form {
  position: relative;
  width: 900px;
  max-width: 100%;
}

.resep-search__input {
  width: 100%;
  height: 50px;
  padding: 0 56px 0 26px;
  border: 1.5px solid var(--color-navy);
  border-radius: 25px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-navy);
  background: var(--color-white);
}

.resep-search__input::placeholder {
  color: var(--color-navy);
  opacity: 0.75;
}

.resep-search__input:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 1px;
}

/* Tombol sungguhan, bukan ikon hiasan — bisa diklik dan dijangkau keyboard */
.resep-search__icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
  transition: background 0.2s ease;
}

.resep-search__icon:hover {
  background: rgba(2, 53, 102, 0.08);
}

.resep-search__icon:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

/* Kartu unggulan: foto separuh kiri, panel navy separuh kanan */
.resep-featured {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 60px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resep-featured__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 569 / 382;
  object-fit: cover;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--color-grey);
}

.resep-featured__panel {
  background: var(--color-navy);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 74px 60px 40px 44px;
  display: flex;
  flex-direction: column;
}

.resep-featured__likes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 13px;
  line-height: 26px;
  color: var(--color-white);
  margin: 0 0 6px;
}

.resep-featured__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 18px;
}

.resep-featured__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
  margin: 0 0 26px;
  max-width: 448px;
}

.resep-featured__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-top: auto;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  transition: transform 0.2s ease;
}

.resep-featured__arrow:hover {
  transform: translateX(4px);
}

/* Grid resep — nama melayang di pita putih transparan di dasar kartu */
.resep-grid {
  width: 100%;
  max-width: none;
  margin: 0 auto clamp(64px, 7vw, 104px);
  padding: 57px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.resep-kartu {
  flex: 0 1 calc((100% - 60px) / 3);
  position: relative;
  display: block;
  aspect-ratio: 359 / 233;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-grey);
}

.resep-kartu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.resep-kartu:hover img {
  transform: scale(1.04);
}

.resep-kartu__nama {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25.3%; /* 59 / 233 */
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  color: var(--color-black);
}

.resep-empty {
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin: 40px 0 0;
}

.resep-more {
  display: flex;
  justify-content: center;
  padding: 60px 24px 90px;
}

.resep-more__btn {
  width: 156px;
}

/* ============================================================
   BLOG — halaman daftar artikel
   Figma: unggulan 647x500 + 2x (468x240); daftar 2x2 kartu 557x587.
   ============================================================ */

.blog-hero__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0;
}

/* Baris unggulan: kartu besar + dua kartu kecil bertumpuk */
.blog-featured {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 max(var(--container-padding), calc(50% - var(--max-content-width) / 2));
  margin-top: -102px; /* naik menimpa banner, seperti di Figma */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 647fr) minmax(0, 468fr);
  column-gap: 1.85%; /* 21px dari 1136 */
  align-items: stretch;
}

/* Kartu besar: foto penuh, panel teks melayang di atasnya */
.blog-lead {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 500px;
  background: var(--color-grey);
}

.blog-lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: panel 458px pada kartu 647px — berhenti sebelum tepi kanan,
   bukan melebar penuh. */
.blog-lead__panel {
  position: absolute;
  left: 4.17%;
  right: 25.04%;
  bottom: 5.6%;
  padding: 20px 24px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}

.blog-lead__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  margin: 0 0 6px;
}

.blog-lead__text {
  font-size: 14px;
  line-height: 19px;
  color: var(--color-black);
  margin: 0;
}

.blog-lead__kaki,
.blog-mini__kaki,
.blog-card__kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.blog-date {
  font-size: 12px;
  line-height: 26px;
  color: var(--color-black);
}

/* Panah bundar — tiga varian sesuai latar tempatnya berada */
.blog-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  transition: background 0.2s ease, color 0.2s ease;
}

.blog-arrow--solid {
  background: var(--color-white);
  border-color: var(--color-white);
}

.blog-arrow--plain {
  border-color: transparent;
}

.blog-arrow:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

/* Kartu kecil: foto di kiri, teks di kanan */
.blog-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Dua kartu membagi tinggi kolom sama rata, sejajar dengan kartu besar.

   flex-basis auto dan flex-shrink 0 dipakai bersama supaya kartu boleh
   MELAR mengikuti isinya, tetapi tidak pernah MENYUSUT di bawahnya.
   Dengan `flex: 1` sebelumnya, basis-nya 0 dan kartu dipaksa masuk ke
   separuh tinggi kolom; teks yang agak panjang lalu terpotong oleh
   overflow: hidden milik .blog-mini — persis yang membuat tanggal dan
   panah tampak tenggelam.

   Kolom kanan yang ikut memanjang tidak merusak kesejajaran, karena
   .blog-featured memakai align-items: stretch sehingga kartu besar di
   kiri ikut mengambil tinggi baris yang sama. */
.blog-side .blog-mini {
  flex: 1 0 auto;
}

/* Tinggi mengikuti isi teks, dengan dasar 240px dari Figma. Mengunci
   rasio membuat tanggal dan panah terpotong saat teksnya agak panjang. */
.blog-mini {
  display: grid;
  grid-template-columns: minmax(0, 253fr) minmax(0, 215fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(239, 239, 239, 0.7);
  min-height: 240px;
}

.blog-mini__img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.blog-mini__body {
  padding: 22px 20px 16px;
  display: flex;
  flex-direction: column;
}

.blog-mini__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--color-black);
  margin: 0 0 8px;
}

/* min-height: 0 membuat teks menjadi bagian yang mengalah bila ruangnya
   kurang, bukan baris tanggal di bawahnya. */
.blog-mini__text {
  font-size: 14px;
  line-height: 19px;
  color: var(--color-black);
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

/* flex-shrink: 0 mengunci baris tanggal dan panah pada tinggi aslinya, jadi
   ia tetap utuh walaupun kartu berada dalam wadah yang sempit. */
.blog-mini__kaki {
  margin-top: auto;
  padding-top: 10px;
  flex-shrink: 0;
}

/* Daftar artikel responsif; baris yang belum penuh tetap berada di tengah */
.blog-list {
  width: 100%;
  max-width: none;
  margin: 0 auto clamp(64px, 7vw, 104px);
  padding: 54px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 33px 23px;
}

.blog-list > .blog-card {
  flex: 0 1 calc((100% - 23px) / 2);
}

.blog-list--paginated {
  margin-bottom: 24px;
}

.blog-pagination {
  width: min(100% - 48px, 1136px);
  margin: 24px auto 72px;
}

.blog-pagination > .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid #063f70;
  border-radius: 999px;
  color: #063f70;
  font-weight: 700;
  text-decoration: none;
}

.blog-pagination .current,
.blog-pagination a:hover,
.blog-pagination a:focus-visible {
  border-color: #ffc400;
  background: #ffc400;
  color: #063f70;
}

.blog-pagination a:focus-visible {
  outline: 3px solid rgba(6, 63, 112, .24);
  outline-offset: 2px;
}

/* Kartu berkotak abu-abu hanya di halaman daftar blog. Di beranda kartunya
   polos di atas latar putih, sesuai desainnya masing-masing. */
.page-blog .blog-card {
  background: #EFEFEF;
  border-radius: var(--radius-lg);
  padding: 33px 52px 30px;
  display: flex;
  flex-direction: column;
}

.page-blog .blog-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-black);
  margin: 0 0 20px;
}

.blog-card__img {
  width: 100%;
  aspect-ratio: 454 / 301;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-grey);
}

.page-blog .blog-card__text {
  font-size: 14px;
  line-height: 19px;
  color: var(--color-black);
  margin: 24px 0 0;
}

.blog-card__kaki {
  margin-top: auto;
  padding-top: 16px;
}

.blog-more {
  display: flex;
  justify-content: center;
  padding: 60px 24px 90px;
}

.blog-more__btn {
  width: 156px;
}

/* ============================================================
   BLOG — halaman detail artikel
   Figma: konten x=152..1288; gambar utama 746x424, sidebar 361 lebar.
   ============================================================ */

.artikel {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 59px max(var(--container-padding), calc(50% - var(--max-content-width) / 2)) 90px;
}

.artikel__breadcrumb {
  font-size: 14px;
  line-height: 26px;
  color: var(--color-black);
}

.artikel__breadcrumb a:hover {
  text-decoration: underline;
}

.artikel__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-black);
  margin: 8px 0 0;
  max-width: 602px;
}

.artikel__meta {
  font-size: 14px;
  line-height: 26px;
  color: var(--color-black);
  margin: 13px 0 0;
}

/* Gambar utama + sidebar (Figma: 746 / 361 dengan gutter 29px) */
.artikel__lead {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 746fr) minmax(0, 361fr);
  column-gap: 2.55%;
  align-items: start;
}

.artikel__figure {
  margin: 0;
}

.artikel__figure img {
  width: 100%;
  aspect-ratio: 746 / 424;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-grey);
}

.artikel__aside {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Kartu navy "Untuk siapakah..." */
.aside-card {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 31px 35px 36px;
}

.aside-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-white);
  margin: 0 0 14px;
}

.aside-card__text {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-white);
  margin: 0 0 24px;
}

.aside-card__label {
  font-weight: 700;
  font-size: 14px;
  line-height: 25px;
  color: var(--color-white);
  margin: 0 0 17px;
}

.aside-card__btn {
  width: 100%;
  max-width: 244px;
}

/* Blok berlangganan di bawah kartu navy */
.aside-subscribe__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-black);
  margin: 0 0 20px;
}

.aside-subscribe__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.aside-subscribe__input {
  width: 100%;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
  background: var(--color-white);
}

.aside-subscribe__input::placeholder {
  color: rgba(0, 0, 0, 0.2);
}

.aside-subscribe__btn {
  width: 152px;
}

/* Tombol berbagi (Figma: 169x47, radius 20, jarak 17px) */
/* Tombol berbagi ikut kolom gambar, jadi menempel di bawahnya alih-alih
   menunggu sidebar yang jauh lebih tinggi selesai. */
.artikel__share {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 22px;
}

/* Figma: ikon dalam lingkaran putih di kiri, label dua baris di kanan */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 169px;
  min-height: 47px;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  line-height: 16px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-btn:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

.share-btn svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--color-white);
  box-sizing: content-box;
}

@media (prefers-reduced-motion: reduce) {
  .share-btn {
    transition: opacity 0.2s ease;
  }

  .share-btn:hover {
    transform: none;
  }
}

.share-btn--wa {
  background: #25D266;
  color: var(--color-black);
}

.share-btn--wa svg {
  color: #25D266;
}

.share-btn--fb svg {
  color: #1877F1;
}

.share-btn--ig svg {
  color: #E7407B;
}

.share-btn--fb {
  background: #1877F1;
  color: var(--color-white);
}

.share-btn--ig {
  background: radial-gradient(
    168.86% 168.86% at 0.13% 99.62%,
    #F9ED41 0%,
    #FF833D 24%,
    #EE5468 40%,
    #E7407B 49%,
    #0028FF 100%
  );
  color: var(--color-white);
}

/* Isi artikel */
/* Lebar sudah dibatasi kolom kiri, jadi tidak perlu max-width lagi */
.artikel__body {
  margin-top: 36px;
}

/* Jarak antar blok mengikuti Figma: rapat, bukan berjauhan. Blok teks di
   sana hampir bersambung — hanya heading yang diberi ruang di atasnya. */
.artikel__body p {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-black);
  margin: 0;
}

.artikel__body h2 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-black);
  margin: 13px 0 0;
}

.artikel__list {
  margin: 4px 0 0;
  padding-left: 20px;
}

.artikel__list li {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-black);
  margin-bottom: 4px;
  padding-left: 8px;
}

/* Judul tiap langkah dipisah barisnya, tapi bobotnya sama dengan isi —
   hanya heading section yang tebal. */
.artikel__list-judul {
  display: block;
}

/* Artikel lain — tiga kartu dengan panel teks melayang di atas foto */
.artikel-lain {
  margin: 58px 0 0;
}

.artikel-lain__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-black);
  margin: 0 0 18px;
}

.artikel-lain__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 23px;
}

.artikel-kartu {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 365 / 200;
  background: var(--color-grey);
}

.artikel-kartu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Panel teks melayang di bawah foto dan berhenti sebelum tepi kanan,
   menyisakan sebagian gambar tetap terlihat. */
.artikel-kartu__panel {
  position: absolute;
  left: 7%;
  right: 14%;
  bottom: 11%;
  padding: 14px 18px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(6px);
}

.artikel-kartu__nama {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-black);
  margin: 0;
}

.artikel-kartu__kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.artikel-kartu__tanggal {
  font-size: 12px;
  line-height: 26px;
  color: var(--color-black);
}

.artikel-kartu__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border: 1px solid var(--color-navy);
  border-radius: 50%;
  color: var(--color-navy);
  background: rgba(255, 255, 255, 0.65);
  transition: background 0.2s ease, color 0.2s ease;
}

.artikel-kartu__arrow:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- Tombol menu mobile ----------
   Disembunyikan di desktop; muncul di bawah 900px bersama menu geser. */

/* Posisi diatur dengan koordinat absolut, bukan flex + translateY: dengan
   flex, tiap garis mendapat titik jangkar rotasi yang sedikit berbeda akibat
   pembulatan subpixel, sehingga X hasilnya tidak berpotongan tepat di
   tengah. Absolute + top yang sama persis untuk garis 1 & 3 (berjarak sama
   dari pusat) menjamin kedua garis berputar dari titik yang identik. */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  position: absolute;
  left: 9px;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }

/* Garis 1 dan 3 berjarak sama (6px) dari garis tengah, jadi keduanya
   berputar mengelilingi titik yang sama saat menu terbuka. */
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span {
    transition: none;
  }
}

@media (max-width: 1100px) {
  :root {
    --container-padding: 60px;
  }

  .section-about,
  .section-why,
  .section-recipes,
  .section-benefits,
  .produk-item,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked layout: both cards align to the same left edge. Desktop's
     .benefit-card--yellow keeps a fixed 52px so its text lines up with
     the navy card's gutter-based padding at that width — once stacked,
     both need the same --container-padding on the left instead. */
  .benefit-card--navy,
  .benefit-card--yellow {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Tombol "Lihat Semua Resep" dipindah ke bawah kartu-kartu resep, bukan
     menempel di atasnya, dan diberi jarak dari teks maupun dari kartu.
     Berlaku dari sini (bukan cuma di layar HP) karena .section-recipes
     sudah ditumpuk jadi satu kolom sejak breakpoint ini. */
  .recipes-copy {
    display: flex;
    flex-direction: column;
  }

  .recipes-copy .btn {
    order: 2;
    margin-top: 32px;
    align-self: flex-start;
  }

  .recipes-grid {
    margin-top: 32px;
  }

  .produk-item {
    row-gap: 40px;
    justify-items: center;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Store finder stacks: list first, then a shorter map */
  .toko-finder {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .marketplace {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Artikel: sidebar turun ke bawah gambar utama */
  .artikel__lead {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  /* Blog: unggulan menumpuk, tapi kartu pertama tetap menimpa banner
     seperti desktop — hanya jaraknya dikecilkan proporsional karena
     hero mobile jauh lebih pendek. */
  .blog-featured {
    grid-template-columns: 1fr;
    row-gap: 24px;
    margin-top: -96px;
  }

  /* Resep detail: nutrisi & resep lain turun ke bawah langkah memasak */
  .rd__grid {
    grid-template-columns: 1fr;
    row-gap: 50px;
    margin-top: 50px;
  }

  .rd__heading--lainnya {
    margin-top: 40px;
  }

  /* Resep: unggulan menumpuk, sudut membulat menyesuaikan */
  .resep-featured {
    grid-template-columns: 1fr;
  }

  .resep-featured__img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .resep-featured__panel {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 34px 34px 30px;
  }

  .resep-featured__arrow {
    margin-top: 24px;
  }

  .blog-side {
    gap: 24px;
  }

  .aside-card__btn,
  .aside-subscribe__form {
    max-width: 361px;
  }

  .store-list {
    max-height: 420px;
  }

  .store-map {
    height: 420px;
  }

  /* Banner masih 278px di rentang ini (sama seperti desktop), jadi overlap
     yang sama persis (-211px) dipertahankan — bukan dikecilkan. */
  .produk-item--overlap .produk-item__visual {
    margin-top: -211px;
  }

  .produk-item__detail {
    padding-top: 0;
  }

  .produk-item__visual img {
    width: 100%;
    max-width: 432px;
  }

  .recipes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   TABLET — menu berubah jadi panel geser
   ============================================================ */

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    order: 3;
  }

  /* Menu turun jadi panel yang menutupi layar dari atas */
  .nav-menu {
    order: 4;
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  body.nav-open .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu .nav-link {
    font-size: 18px;
    padding: 14px 24px;
  }

  /* Di dalam panel, "ID | ENG" berpindah dari ujung kanan topbar menjadi
     item terakhir menu — dipisahkan garis tipis dan jarak ekstra supaya
     terlihat sebagai pilihan tersendiri, bukan tautan menu biasa. */
  .nav-menu__lang {
    margin-left: 0;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 16px;
  }

  /* Tombol menu harus tetap di atas panel supaya bisa ditutup */
  .nav-toggle {
    position: relative;
    z-index: 50;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Navbar lebih ringkas supaya tidak memakan ruang hero */
  .topbar__inner {
    padding-top: 24px;
  }

  .logo img {
    width: 104px;
    height: auto;
  }

  /* Hero beranda TIDAK di-override di sini: pada 769-900px font judul
     masih 3.82vw persis seperti frame Figma, jadi seluruh komposisi
     desktop (botol, garam, tombol) menskalakan dirinya sendiri secara
     proporsional. Penyesuaian khusus layar sempit ada di blok 768px. */

  /* Logo mengecil di layar sempit; animasi memakai persentase lebar
     salinan sendiri, jadi tetap sinkron berapa pun ukurannya. */
  .retailers-row--top img {
    width: 620px;
  }

  .retailers-row--bottom img {
    width: 420px;
  }


  /* Peta setinggi layar penuh terasa berlebihan di tablet */
  .store-map {
    height: 460px;
  }

  .store-list {
    max-height: 460px;
  }

  /* Tabel gizi produk: dua kolom jadi satu */
  .nutrition {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 24px;
  }

  .section-banner__title {
    font-size: 22px;
  }

  .recipes-grid,
  .blog-grid,
  .nutrition {
    grid-template-columns: 1fr;
  }

  .retailers-track img {
    padding-right: 34px;
  }

  .topbar {
    height: auto;
  }

  .topbar__inner {
    padding-bottom: 24px;
  }

  .produk-hero {
    height: 180px;
  }

  .toko-hero__content {
    padding-top: 56px;
  }

  .toko-hero__title {
    font-size: 22px;
  }

  .toko-hero__text {
    font-size: 16px;
  }

  .toko-switch__btn {
    width: 140px;
  }

  .store-brand-filters {
    padding-top: 38px;
  }

  .store-brand-filters__grid {
    max-width: 500px;
    gap: 18px;
  }

  .store-brand-filters__button {
    flex-basis: calc((100% - 36px) / 3);
    max-width: 150px;
    padding: 18px 14px;
  }

  .store-brand-filters__logo {
    height: 82px;
  }

  .marketplace__grid {
    gap: 18px;
  }

  .artikel__title {
    font-size: 24px;
  }

  .artikel {
    padding-bottom: 60px;
  }

  .artikel-lain__grid {
    grid-template-columns: 1fr;
  }

  .blog-list > .blog-card {
    flex-basis: 100%;
  }

  .resep-grid {
    gap: 18px;
  }

  .resep-grid > .resep-kartu {
    flex-basis: calc((100% - 18px) / 2);
  }

  .resep-kartu__nama {
    font-size: 17px;
    padding: 0 14px;
  }

  .resep-featured__title {
    font-size: 24px;
  }

  /* Resep detail di layar sempit */
  .rd__title,
  .rd__heading {
    font-size: 24px;
  }

  .rd-stats {
    flex-wrap: wrap;
    gap: 12px 0;
  }

  /* Kontak: dua kolom jadi satu */
  .kontak-form__row {
    grid-template-columns: 1fr;
    row-gap: 26px;
    margin-bottom: 26px;
  }

  .kontak-hero__title {
    font-size: 22px;
  }

  .rd-stats__item {
    padding: 0 16px;
  }

  .rd__share {
    width: 100%;
  }

  .page-blog .blog-card {
    padding: 24px;
  }

  .blog-mini {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .blog-mini__img {
    aspect-ratio: 16 / 9;
  }

  .share-btn {
    width: 100%;
    max-width: 260px;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Hero beranda mobile memakai kanvas 4:5 agar komposisinya lebih dekat
     ke desktop: botol tidak lagi mendominasi lebar layar, headline tetap
     tiga baris, dan gundukan garam menjadi alas di bagian bawah. */
  .hero-slider {
    aspect-ratio: 4 / 5;
  }

  .hero-slider__arrow {
    top: 52%;
    width: 40px;
    height: 40px;
  }

  .hero-slider__arrow--prev {
    left: 12px;
  }

  .hero-slider__arrow--next {
    right: 12px;
  }

  .hero-slider__arrow svg {
    width: 22px;
    height: 22px;
  }

  .hero-slider__dots {
    bottom: 14px;
    gap: 8px;
  }

  .hero-slider__dot {
    width: 9px;
    height: 9px;
  }

  .hero-slider__dot.is-active {
    width: 26px;
  }

  .hero-slide__image {
    object-position: 57% center;
    transform: none;
  }

  .hero-slide--family .hero-slide__image {
    object-position: 60% center;
  }

  /* Teks slide berada di tengah bingkai, jadi bagian tengah gradien ikut
     digelapkan. Tanpa itu, teks putih jatuh di area foto paling terang. */
  .hero-slide__overlay {
    background:
      linear-gradient(180deg, rgba(2, 35, 70, 0.82) 0%, rgba(2, 35, 70, 0.3) 26%, rgba(2, 35, 70, 0.62) 50%, rgba(2, 35, 70, 0.76) 74%, rgba(2, 35, 70, 0.96) 100%),
      linear-gradient(90deg, rgba(2, 35, 70, 0.5) 0%, rgba(2, 35, 70, 0.16) 50%, rgba(2, 35, 70, 0.5) 100%);
  }

  /* Rata tengah pada kedua sumbu. Jarak 58px di kiri dan kanan dipertahankan
     karena tombol panah slider berada di x=12px dengan lebar 40px — kotak teks
     harus mulai setelah 52px agar keduanya tidak bertumpuk. */
  .hero-slide__content {
    top: 50%;
    right: 58px;
    bottom: auto;
    left: 58px;
    width: auto;
    transform: translateY(-50%);
    text-align: center;
  }

  /* Ukuran huruf dibuat ikut lebar layar dengan perbandingan tetap:
     judul terhadap teks isi selalu sekitar 1,9-2,0 kali pada rentang
     360px sampai 768px. Sebelumnya hanya judul yang lentur, sedangkan
     eyebrow dan teks isi terkunci di piksel tetap sehingga proporsinya
     berubah-ubah mengikuti lebar layar. Jarak antarbaris memakai em agar
     ikut menyesuaikan sendiri saat ukuran hurufnya berubah. */
  .hero-slide__eyebrow {
    margin-bottom: 0.7em;
    font-size: clamp(10px, 2.9vw, 13px);
  }

  .hero-slide__title {
    font-size: clamp(23px, 6.7vw, 30px);
    line-height: 1.08;
  }

  .hero-slide__title span {
    margin-top: 0.17em;
  }

  .hero-slide__text {
    max-width: 34ch;
    margin: 0.95em auto 1.25em;
    font-size: clamp(12px, 3.5vw, 15px);
    line-height: 1.55;
  }

  .hero-slide__cta {
    min-width: 154px;
    height: 40px;
    padding: 0 18px;
    font-size: clamp(11px, 3.2vw, 13px);
  }

  .hero-stage {
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .hero-heading {
    top: 26%;
    letter-spacing: 0.02em;
  }

  /* Seperti desktop, baris aksen berada di belakang botol. Tiga kolom
     menjaga sisi dalam LEBIH dan SEHAT selalu sama jauhnya dari titik
     tengah, walaupun lebar kedua katanya berbeda. */
  .hero-heading__line3 {
    z-index: 1;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30vw minmax(0, 1fr);
    align-items: baseline;
  }

  .hero-heading__accent--left {
    grid-column: 1;
    justify-self: end;
    margin-right: 0;
    position: relative;
    left: clamp(22px, 6vw, 32px);
    transform: none;
  }

  .hero-heading__accent--right {
    grid-column: 3;
    justify-self: start;
    position: relative;
    left: clamp(10px, 3vw, 16px);
  }

  /* Tutup botol bertemu area headline seperti pada desktop. Lebar 54vw
     menyisakan ruang yang cukup untuk kata LEBIH dan SEHAT.
     Suku vw dikurangi 2vw dari 11.3vw agar botol turun sedikit mendekati
     gundukan; sisa jaraknya ditutup dengan meninggikan gundukan di bawah. */
  .hero-mockup {
    top: calc(26% + 25.8px - 9.3vw);
    left: 50%;
    width: 54%;
    height: auto;
    aspect-ratio: 406 / 537;
    transform: translateX(-50%) rotate(-2.71deg);
  }

  /* Rasio gundukan mengikuti komposisi desktop. Salinan cermin menjaga
     lereng kiri dan kanan tetap terang pada layar sempit.

     Lebar dinaikkan 118% -> 130% supaya gundukan ikut meninggi dan
     permukaannya menyentuh dasar botol. PNG-nya berbentuk kerucut: puncak
     yang terlihat berada sekitar 40% dari tepi atas kotak, bukan di tepi
     atasnya, jadi menambah tinggi kotak adalah satu-satunya cara menaikkan
     permukaan. `left` wajib ikut berubah menjadi (100 - lebar) / 2 agar
     gundukan tetap terpusat. Sisi yang melewati layar dipotong oleh
     overflow: hidden milik .section-hero. */
  .hero-salt {
    left: -15%;
    top: auto;
    bottom: 0;
    width: 130%;
    /* aturan global img { max-width: 100% } diam-diam memotong lebar
       ke 100% sementara left minus tetap berlaku — inilah penyebab
       gundukan selama ini tampak "geser ke kiri" alih-alih membesar. */
    max-width: none;
    height: auto;
    aspect-ratio: 885 / 333;
  }

  .hero-salt--cermin {
    display: block;
    transform: scaleX(-1);
  }

  /* Tombol tetap dipusatkan dan lebarnya dikunci agar tidak bergeser saat
     teks menebal pada hover. */
  .hero-cta {
    top: 86%;
    bottom: auto;
    left: 50%;
    width: 132px;
    height: 38px;
    font-size: 13px;
    transform: translateX(-50%);
    padding: 0;
  }

  /* Hover/active desktop menimpa transform, padahal di sini translateX
     dipakai untuk memusatkan tombol — tanpa ini tombol melompat ke kanan
     setengah lebarnya saat disentuh. */
  .hero-cta:hover {
    transform: translateX(-50%) translateY(-2px) scale(1.02);
  }

  .hero-cta:active {
    transform: translateX(-50%);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-cta:hover,
    .hero-cta:active {
      transform: translateX(-50%);
    }
  }

  html[lang="en"] .hero-heading__line3 {
    z-index: 3;
    grid-template-columns: minmax(0, 1fr) 8vw minmax(0, 1fr);
  }

  html[lang="en"] .hero-heading__accent--left {
    left: 0;
    transform: none;
  }

  /* Badge sertifikat ditata 2 x 2 di layar ponsel agar kedua baris
     seimbang dan pusat setiap logo tetap sejajar. */
  .why-certs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    gap: 24px 32px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .why-certs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 96px;
  }

  .why-certs__item--iso {
    grid-column: auto;
  }

  .why-certs__item--halal img { height: 88px; }
  .why-certs__item--bpom  img { height: 86px; }
  .why-certs__item--sni   img { height: 66px; }
  .why-certs__item--iso   img { height: 76px; }
  .why-certs__item--custom img {
    max-width: 112px;
    max-height: 76px;
  }

  /* Panel produk dua kolom jadi satu, gutter mengecil */
  .produk-item {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Banner lebih pendek di HP (180px vs 278px di tablet), jadi overlap-nya
     dikecilkan proporsional dengan rasio yang sama seperti desktop: tepi
     atas pouch tetap di ~24% tinggi banner, bukan overlap penuh -211px. */
  .produk-item--overlap .produk-item__visual {
    margin-top: -137px;
  }

  .produk-cert__content {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Jumlah sertifikasi berasal dari CMS; flex-wrap menjaga jumlah ganjil
     maupun genap tetap berada di tengah. */
  .produk-cert__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 24px 16px;
  }

  .produk-cert__badges li {
    display: flex;
    flex: 0 1 112px;
    justify-content: center;
  }

  .produk-cert__badges img {
    max-width: 112px;
    height: 62px;
  }

  /* Kartu resep unggulan */
  .resep-featured__panel {
    padding: 26px 24px 24px;
  }

  /* Panel toko: daftar dan peta lebih ringkas */
  .store-map,
  .store-list {
    height: 380px;
    max-height: 380px;
  }

  .store-card.is-active::after {
    display: none; /* ekor segitiga tak berguna saat peta ada di bawah */
  }

  /* Formulir kontak */
  .kontak-field textarea {
    min-height: 160px;
  }

  .kontak-form__btn {
    width: 100%;
    max-width: 260px;
  }

  .kontak-form__aksi {
    padding-bottom: 60px;
  }

  /* Langkah resep: nomor lebih rapat ke teks */
  .rd-langkah li {
    padding-left: 44px;
  }

  .rd__hero {
    aspect-ratio: 4 / 3;
  }

  /* Kartu resep lain jadi satu baris penuh */
  .rd-lainnya__item {
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
    column-gap: 16px;
  }

  .rd-lainnya__item span {
    font-size: 16px;
  }
}

/* ============================================================
   PONSEL KECIL — di bawah 480px
   ============================================================ */

@media (max-width: 480px) {
  .hero-heading {
    font-size: clamp(22px, 6.5vw, 28px);
  }

  .resep-grid > .resep-kartu,
  .marketplace__cell {
    flex-basis: 100%;
  }

  .marketplace__card {
    width: 100%;
    max-width: 182px;
    margin: 0 auto;
  }

  .recipes-grid {
    grid-template-columns: 1fr;
  }

  .toko-switch__btn {
    width: 50%;
  }

  .toko-switch__group {
    width: 100%;
  }

  .store-brand-filters {
    padding-right: 18px;
    padding-left: 18px;
  }

  .store-brand-filters__grid {
    max-width: 340px;
    gap: 14px;
  }

  .store-brand-filters__button {
    flex-basis: calc((100% - 14px) / 2);
    max-width: 150px;
  }

  .store-map__fallback--runtime {
    padding: 24px 18px;
  }

  .store-map__fallback-actions {
    width: 100%;
    max-width: 220px;
    flex-direction: column;
  }

  .store-map__fallback-action {
    width: 100%;
  }

  .rd-stats {
    gap: 10px 0;
  }

  .rd-stats__item {
    flex: 1 1 45%;
    border-right: none;
    padding: 0;
  }

  .blog-lead__panel {
    left: 4%;
    right: 4%;
    bottom: 4%;
    padding: 14px 16px 10px;
  }

  .blog-lead__text {
    display: none; /* judul dan tanggal cukup di kartu sekecil ini */
  }
}

/* ============================================================
   TOMBOL WHATSAPP MELAYANG
   ============================================================ */

.whatsapp-float {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1000;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  background: #25d366;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(2, 53, 102, 0.28);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.whatsapp-float:hover {
  color: #fff;
  background: #1fbd5a;
  box-shadow: 0 10px 28px rgba(2, 53, 102, 0.36);
  transform: translateY(-3px) scale(1.04);
}

.whatsapp-float:focus-visible {
  outline: 3px solid #f7c900;
  outline-offset: 4px;
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .whatsapp-float {
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
  }

  .whatsapp-float svg {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }
}

/* ============================================================
   GLOBAL REVEAL MOTION
   ============================================================ */

html.sanasalz-motion .sanasalz-reveal {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 560ms ease,
    translate 560ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sanasalz-reveal-delay, 0ms);
  will-change: opacity, translate;
}

html.sanasalz-motion .sanasalz-reveal--fade {
  translate: 0 0;
}

html.sanasalz-motion .sanasalz-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.sanasalz-motion .sanasalz-reveal,
  html.sanasalz-motion .sanasalz-reveal--fade {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Headline hero: animasinya dipindahkan dari .hero-heading ke tiap barisnya.
   Kalau .hero-heading sendiri yang dianimasikan, opacity < 1 maupun
   `translate` membentuk stacking context, sehingga z-index anak-anaknya
   terkunci di dalam dan baris 3 tidak bisa turun ke belakang botol —
   selama transisi seluruh headline ikut tenggelam, lalu melompat ke depan
   begitu animasi selesai. Dianimasikan per baris, urutan lapisannya benar
   sejak frame pertama. */
html.sanasalz-motion .hero-heading.sanasalz-reveal {
  opacity: 1;
  translate: none;
  transition: none;
  will-change: auto;
}

html.sanasalz-motion .hero-heading.sanasalz-reveal > p {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 560ms ease,
    translate 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.sanasalz-motion .hero-heading.sanasalz-reveal.is-visible > p {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html.sanasalz-motion .hero-heading.sanasalz-reveal > p {
    opacity: 1;
    translate: none;
    transition: none;
  }
}