/* ============================================================
   Seluruh nilai px di file ini adalah px DESAIN Figma (frame
   lebar 1920px) yang sudah dikonversi menjadi
   calc(N * var(--u)), dengan --u = 1px desain
   (lihat ../responsive.css). Dengan cara ini seluruh halaman
   menskalakan proporsional mengikuti resolusi layar: isi tidak
   terpotong dan tidak ada scroll samping.
   ============================================================ */

.product,
.product * {
  box-sizing: border-box;
}
.product {
  background: #ffffff;
  width: var(--page-width);
  height: calc(1845 * var(--u));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.bg-product {
  width: calc(2147 * var(--u));
  height: calc(1773 * var(--u));
  position: absolute;
  left: calc(-132 * var(--u));
  top: calc(7 * var(--u));
  overflow: hidden;
}
.vector {
  width: 90.29%;
  height: 100%;
  position: absolute;
  right: 3.82%;
  left: 5.89%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.vector2 {
  width: 33.08%;
  height: 27.16%;
  position: absolute;
  right: 48.97%;
  left: 17.95%;
  bottom: 65.06%;
  top: 7.78%;
  overflow: visible;
}
.vector3 {
  width: 18.26%;
  height: 14.99%;
  position: absolute;
  right: 14.04%;
  left: 67.7%;
  bottom: 77.23%;
  top: 7.78%;
  overflow: visible;
}
.vector4 {
  width: 12.51%;
  height: 21.88%;
  position: absolute;
  right: 81.37%;
  left: 6.13%;
  bottom: 28.1%;
  top: 50.02%;
  overflow: visible;
}
.vector5 {
  width: 23.83%;
  height: 41.67%;
  position: absolute;
  right: 3.83%;
  left: 72.34%;
  bottom: 31.14%;
  top: 27.19%;
  overflow: visible;
}
.group {
  width: 13.21%;
  height: 36.5%;
  position: absolute;
  right: 86.79%;
  left: 0%;
  bottom: 41.73%;
  top: 21.76%;
  overflow: visible;
}
.group2 {
  width: 17.88%;
  height: 54.12%;
  position: absolute;
  right: 0%;
  left: 82.12%;
  bottom: 36.83%;
  top: 9.05%;
  overflow: visible;
}
.group3 {
  width: 31.54%;
  height: 13.99%;
  position: absolute;
  right: 62.08%;
  left: 6.38%;
  bottom: 9.92%;
  top: 76.09%;
  overflow: visible;
}
.group4 {
  width: 23%;
  height: 12.63%;
  position: absolute;
  right: 0.67%;
  left: 76.32%;
  bottom: 11.9%;
  top: 75.47%;
  overflow: visible;
}
.group5 {
  width: 31.54%;
  height: 13.99%;
  position: absolute;
  right: 20.38%;
  left: 48.08%;
  bottom: 8.45%;
  top: 77.56%;
  overflow: visible;
}
.vector6 {
  width: 33.62%;
  height: 46.87%;
  position: absolute;
  right: 51.51%;
  left: 14.87%;
  bottom: 22.17%;
  top: 30.96%;
  overflow: visible;
}
.vector7 {
  width: 33.62%;
  height: 46.87%;
  position: absolute;
  right: 12.54%;
  left: 53.84%;
  bottom: 22.17%;
  top: 30.96%;
  overflow: visible;
}
.produk-kami {
  color: #7f3814;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(122 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 53.47%;
  left: 15.65%;
  width: 30.88%;
  bottom: 79.92%;
  top: 13.65%;
  height: 6.43%;
  animation: productHeadlineFloat 3.2s ease-in-out infinite;
}

@keyframes productHeadlineFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(calc(-8 * var(--u))) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .produk-kami {
    animation: none;
  }
}

.cemilan-sederhana-dengan-rasa-luar-biasa-tahu-bulat-yang-gurih-dan-sotong-yang-renyah-selalu-jadi-pilihan-di-setiap-kesempatan {
  color: #71340f;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 52.4%;
  left: 15.65%;
  width: 31.95%;
  bottom: 71.12%;
  top: 21.38%;
  height: 7.5%;
}
.tahu-dengan-tekstur-renyah-diluar-dan-lembut-di-dalam-cocok-untuk-segala-suasana {
  color: #71340f;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 55.47%;
  left: 19.33%;
  width: 25.2%;
  bottom: 32.77%;
  top: 59.73%;
  height: 7.5%;
}
.cemilan-dengan-rasa-yang-autentik-dan-tekstur-yang-renyah {
  color: #71340f;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 17.84%;
  left: 58.83%;
  width: 23.33%;
  bottom: 35.36%;
  top: 59.73%;
  height: 4.91%;
}
.tahu-bulat {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 68.14%;
  left: 19.33%;
  width: 12.53%;
  bottom: 41.34%;
  top: 55.5%;
  height: 3.16%;
}
.sotong {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 32.98%;
  left: 58.83%;
  width: 8.2%;
  bottom: 41.34%;
  top: 55.5%;
  height: 3.16%;
}
.bar-bawah-product {
  width: calc(1921.98 * var(--u));
  height: calc(371.46 * var(--u));
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(1474 * var(--u));
  overflow: hidden;
}
.vector8 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.vector9 {
  width: 19.82%;
  height: 70.27%;
  position: absolute;
  right: 79.27%;
  left: 0.91%;
  bottom: 0.54%;
  top: 29.19%;
  overflow: visible;
}
.vector10 {
  width: 15.95%;
  height: 56.53%;
  position: absolute;
  right: 1.53%;
  left: 82.52%;
  bottom: 0.54%;
  top: 42.93%;
  overflow: visible;
}
.logo-putih {
  width: 11.03%;
  height: 53.14%;
  position: absolute;
  right: 83.32%;
  left: 5.64%;
  bottom: 15.32%;
  top: 31.55%;
  overflow: visible;
}
.vector11 {
  width: 11.25%;
  height: 24.5%;
  position: absolute;
  right: 62.6%;
  left: 26.15%;
  bottom: 0.26%;
  top: 75.24%;
  overflow: visible;
}
.vector12 {
  width: 17.62%;
  height: 51.42%;
  position: absolute;
  right: 38.97%;
  left: 43.42%;
  bottom: 0.27%;
  top: 48.31%;
  overflow: visible;
}
.vector13 {
  width: 11.25%;
  height: 24.5%;
  position: absolute;
  right: 21.92%;
  left: 66.83%;
  bottom: 0.26%;
  top: 75.24%;
  overflow: visible;
}
.gurihnya-nyatu {
  color: #ffffff;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 4.94%;
  left: 74.3%;
  width: 20.76%;
  bottom: 29.74%;
  top: 55.19%;
  height: 15.08%;
}
.bar-product {
  width: calc(1919.96 * var(--u));
  height: calc(150.46 * var(--u));
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.vector14 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.logo-warna {
  width: 5.44%;
  height: 64.56%;
  position: absolute;
  right: 90.19%;
  left: 4.38%;
  bottom: 18.16%;
  top: 17.28%;
  overflow: hidden;
}
.group6 {
  width: 99.99%;
  height: 99.98%;
  position: absolute;
  right: 0.01%;
  left: 0%;
  bottom: 0.01%;
  top: 0.01%;
  overflow: visible;
}
.home {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 56.72%;
  left: 37.71%;
  width: 5.57%;
  bottom: 34.2%;
  top: 34.56%;
  height: 31.24%;
}
.about-us {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 42.03%;
  left: 47.97%;
  width: 10%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.product2 {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 28.33%;
  left: 62.66%;
  width: 9.01%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.review {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 16.51%;
  left: 76.36%;
  width: 7.14%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.contact {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 3.23%;
  left: 88.18%;
  width: 8.59%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.vector15 {
  width: 8.49%;
  height: 5.98%;
  position: absolute;
  right: 28.59%;
  left: 62.92%;
  bottom: 19.58%;
  top: 74.44%;
  overflow: visible;
}
.tool-produk-1 {
  width: calc(664.43 * var(--u));
  height: calc(118 * var(--u));
  position: absolute;
  left: calc(216 * var(--u));
  top: calc(750 * var(--u));
  overflow: visible;
  z-index: 3;
}
.product-gallery {
  position: absolute;
  left: calc(156 * var(--u));
  top: calc(-120 * var(--u));
  width: calc(350 * var(--u));
  height: calc(350 * var(--u));
  overflow: hidden;
  border-radius: calc(28 * var(--u));
  background: #f4e8d5;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgb(113 52 15 / 14%);
  z-index: 0;
}
.product-gallery-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 220ms ease;
}
.product-gallery-control {
  position: absolute;
  top: 0;
  width: calc(118 * var(--u));
  height: calc(118 * var(--u));
  padding: 0;
  display: block;
  cursor: pointer;
  z-index: 2;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: transform 180ms ease, filter 180ms ease;
}
.product-gallery-control:focus-visible {
  outline: calc(4 * var(--u)) solid #e7a52b;
  outline-offset: calc(4 * var(--u));
  border-radius: 50%;
}
.product-gallery-control:hover,
.product-gallery-control:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.08);
  outline: none;
}
.product-gallery-control .group7,
.product-gallery-control .group8,
.product-gallery-control .group9,
.product-gallery-control .group10 {
  width: 100%;
  height: 100%;
  right: auto;
  left: 0;
  bottom: auto;
  top: 0;
}
.product-gallery-prev {
  left: 0;
  right: auto;
}
.product-gallery-next {
  left: calc(546 * var(--u));
  right: auto;
}
.group7 {
  width: 17.76%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 82.24%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.group8 {
  width: 17.76%;
  height: 100%;
  position: absolute;
  right: 82.24%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.tool-produk-2 {
  width: 34.61%;
  height: 6.4%;
  position: absolute;
  right: 9.87%;
  left: 55.52%;
  bottom: 52.95%;
  top: 40.65%;
  overflow: visible;
  z-index: 3;
  isolation: isolate;
}
.product-gallery-2 {
  left: calc(156 * var(--u));
  top: calc(-120 * var(--u));
  z-index: 1;
}
.tool-produk-2 .product-gallery-2-prev {
  left: 0;
  z-index: 10;
}
.tool-produk-2 .product-gallery-2-next {
  left: calc(546 * var(--u));
  z-index: 10;
}
.group9 {
  width: 17.76%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 82.24%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.group10 {
  width: 17.76%;
  height: 100%;
  position: absolute;
  right: 82.24%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.button-pesan-1 {
  width: 15.73%;
  height: 4.17%;
  position: absolute;
  right: 69.74%;
  left: 14.53%;
  bottom: 29.27%;
  top: 66.56%;
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}
.vector16 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.pesan-sekarang {
  color: #fdeed0;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 13.58%;
  left: 13.25%;
  width: 73.18%;
  bottom: 22.08%;
  top: 24.68%;
  height: 53.25%;
}
.button-pesan-2 {
  width: 15.73%;
  height: 4.17%;
  position: absolute;
  right: 25.47%;
  left: 58.8%;
  bottom: 29.27%;
  top: 66.56%;
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.button-pesan-1:hover,
.button-pesan-2:hover,
.button-pesan-1:focus-visible,
.button-pesan-2:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.08);
  outline: none;
}

.button-pesan-1:active,
.button-pesan-2:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.vector17 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.pesan-sekarang2 {
  color: #fdeed0;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 13.25%;
  left: 13.58%;
  width: 73.18%;
  bottom: 22.08%;
  top: 24.68%;
  height: 53.25%;
}