/* ============================================================
   RESPONSIVE SCALE - perbaikan ukuran / resolusi seluruh halaman
   ------------------------------------------------------------
   Semua halaman (home, about, product, review, contact) berasal
   dari desain Figma dengan frame lebar 1920px dan memakai nilai px
   yang absolut, sehingga halaman tidak menyesuaikan resolusi layar
   (di layar kecil terpotong, di layar besar hanya sebagian).

   Cara kerja:
   - --page-width : lebar halaman aktif (fluid mengikuti lebar layar,
                    minimal 768px supaya tulisan tetap terbaca).
   - --u          : nilai "1px desain" dalam satuan CSS.
                    Di style.css tiap halaman, semua nilai px desain
                    sudah dikonversi menjadi calc(N * var(--u)),
                    sehingga seluruh elemen + ukuran huruf
                    menskalakan proporsional dan tidak pernah
                    terpotong di resolusi mana pun.
   - Semua ilustrasi memakai SVG (vektor) sehingga tetap tajam pada
     layar resolusi tinggi (HiDPI / retina).

   Untuk menyesuaikan, cukup ubah angka pada --page-width di bawah.
   ============================================================ */

:root {
  /* Lebar frame desain Figma (px) */
  --design-width: 1920;
  /* Lebar halaman aktif: fluid mengikuti layar, minimal 768px */
  --page-width: max(768px, 100vw);
  /* 1px desain Figma dalam satuan CSS */
  --u: calc(var(--page-width) / var(--design-width));
}

html,
body {
  background: #ffffff;
  /* halaman selalu pas: tidak ada scroll samping di layar normal */
  overflow-x: hidden;
}

/* Layar lebih kecil dari lebar minimum halaman: izinkan digeser
   supaya seluruh isi tetap bisa dijangkau (tulisan tidak mengecil
   sampai tidak terbaca). */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: auto;
  }
}

/* Shared navigation UX */
.site-nav {
  z-index: 20;
  overflow: visible;
}

.site-nav .nav-bg {
  z-index: -1;
  pointer-events: none;
}

.nav-logo {
  position: absolute;
  z-index: 2;
  left: 4.38%;
  top: 17.28%;
  width: 5.44%;
  height: 64.56%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(12 * var(--u));
  transition: transform 180ms ease, background-color 180ms ease;
}

.nav-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-logo:hover,
.nav-logo:focus-visible {
  transform: translateY(calc(-3 * var(--u)));
  background: rgb(255 255 255 / 28%);
  outline: none;
}

.nav-links {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 3.23%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(14px, calc(22 * var(--u)), 42px);
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: calc(64 * var(--u));
  padding: 0 calc(10 * var(--u));
  color: #78310b;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: clamp(18px, calc(50 * var(--u)), 50px);
  line-height: 1;
  white-space: nowrap;
  border-radius: calc(10 * var(--u));
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: calc(10 * var(--u));
  right: calc(10 * var(--u));
  bottom: calc(4 * var(--u));
  height: calc(5 * var(--u));
  background: #e7a52b;
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: #a64d19;
  background: rgb(255 255 255 / 22%);
  outline: none;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  transform: translateY(calc(-2 * var(--u)));
}

.nav-links a.is-active::after,
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
}

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

@media (max-width: 767px) {
  .site-nav {
    height: max(64px, calc(150.46 * var(--u))) !important;
    padding: 0 20px;
  }

  .site-nav .nav-bg {
    object-fit: cover;
  }

  .nav-logo {
    left: 20px;
    top: 12px;
    width: 54px;
    height: 40px;
  }

  .nav-toggle {
    position: absolute;
    z-index: 4;
    top: 12px;
    right: 20px;
    display: flex;
    width: 44px;
    height: 40px;
    padding: 9px 8px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgb(120 49 11 / 35%);
    border-radius: 8px;
    background: rgb(255 255 255 / 55%);
    cursor: pointer;
  }

  .nav-toggle span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 2px;
    background: #78310b;
    border-radius: 99px;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .nav-toggle:focus-visible {
    outline: 3px solid #e7a52b;
    outline-offset: 3px;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .nav-links {
    top: 60px;
    right: 20px;
    left: 20px;
    height: auto;
    display: none;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border: 1px solid rgb(120 49 11 / 18%);
    border-radius: 12px;
    background: #fff8e9;
    box-shadow: 0 12px 28px rgb(86 37 12 / 18%);
  }

  .site-nav:has(.nav-toggle[aria-expanded="true"]) .nav-links {
    display: flex;
  }

  .nav-links a {
    min-height: 44px;
    padding: 0 14px;
    font-size: 22px;
  }

  .nav-links a::after {
    left: 14px;
    right: auto;
    width: 34px;
    bottom: 5px;
    height: 3px;
  }

  .nav-accent {
    display: none;
  }
}

/* Home-only utility layer: adds orientation without touching the artwork. */
.home .skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #fff8e9;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  background: #78310b;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.home .skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #e7a52b;
  outline-offset: 2px;
}

.home-scroll-progress {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100vw;
  height: 4px;
  background: rgb(120 49 11 / 12%);
  pointer-events: none;
}

.home-scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #e7a52b;
  box-shadow: 0 0 10px rgb(231 165 43 / 55%);
  transition: width 100ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .home .skip-link,
  .home-scroll-progress span {
    transition: none;
  }
}