/* ============================================================
   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.
   ============================================================ */

.home,
.home * {
  box-sizing: border-box;
}
.home {
  background: #ffffff;
  width: var(--page-width);
  height: calc(2087 * var(--u));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.bg-home {
  width: calc(1920.05 * var(--u));
  height: calc(1058 * var(--u));
  position: absolute;
  left: 0;
  top: calc(1 * var(--u));
  overflow: visible;
}
.tahu-sotong-home {
  width: calc(2121 * var(--u));
  height: calc(1161.35 * var(--u));
  position: absolute;
  left: calc(-101 * var(--u));
  top: calc(1 * var(--u));
  overflow: hidden;
}
.group {
  width: 13.23%;
  height: 55.73%;
  position: absolute;
  right: 88.54%;
  left: -1.78%;
  bottom: 32.23%;
  top: 12.04%;
  overflow: visible;
}
.group2 {
  width: 16.15%;
  height: 53.35%;
  position: absolute;
  right: 85.69%;
  left: -1.84%;
  bottom: 6.98%;
  top: 39.67%;
  overflow: visible;
}
.group3 {
  width: 10.73%;
  height: 19.72%;
  position: absolute;
  right: 85.39%;
  left: 3.88%;
  bottom: 22.94%;
  top: 57.35%;
  overflow: visible;
}
.group4 {
  width: 10.8%;
  height: 19.55%;
  position: absolute;
  right: 40.07%;
  left: 49.13%;
  bottom: 60.48%;
  top: 19.98%;
  overflow: visible;
}
.group5 {
  width: 5.65%;
  height: 69.19%;
  position: absolute;
  right: 22.41%;
  left: 71.95%;
  bottom: 15.97%;
  top: 14.84%;
  overflow: visible;
}
.group6 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 34.14%;
  left: 52.76%;
  bottom: 23.25%;
  top: 53.04%;
  overflow: visible;
}
.group7 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 24.28%;
  left: 62.62%;
  bottom: 34.96%;
  top: 41.33%;
  overflow: visible;
}
.group8 {
  width: 13.23%;
  height: 55.73%;
  position: absolute;
  right: 2.26%;
  left: 84.5%;
  bottom: 8.12%;
  top: 36.15%;
  overflow: visible;
}
.group9 {
  width: 5.44%;
  height: 69.11%;
  position: absolute;
  right: 17.09%;
  left: 77.47%;
  bottom: 24.14%;
  top: 6.75%;
  overflow: visible;
}
.group10 {
  width: 12.45%;
  height: 79.59%;
  position: absolute;
  right: 3.34%;
  left: 84.21%;
  bottom: 15.91%;
  top: 4.51%;
  overflow: visible;
}
.group11 {
  width: 8.48%;
  height: 81.36%;
  position: absolute;
  right: 10.04%;
  left: 81.48%;
  bottom: 18.64%;
  top: 0%;
  overflow: visible;
}
.group12 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 24.71%;
  left: 62.19%;
  bottom: 14.9%;
  top: 61.39%;
  overflow: visible;
}
.group13 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 11.79%;
  left: 75.11%;
  bottom: 38.06%;
  top: 38.23%;
  overflow: visible;
}
.group14 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 3.16%;
  left: 83.74%;
  bottom: 23.08%;
  top: 53.21%;
  overflow: visible;
}
.group15 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 1.84%;
  left: 85.06%;
  bottom: 6.97%;
  top: 69.31%;
  overflow: visible;
}
.group16 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 14.71%;
  left: 72.19%;
  bottom: 19.46%;
  top: 56.83%;
  overflow: visible;
}
.group17 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 42.39%;
  left: 44.51%;
  bottom: 5.51%;
  top: 70.78%;
  overflow: visible;
}
.group18 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 34.28%;
  left: 52.62%;
  bottom: 0.86%;
  top: 75.43%;
  overflow: visible;
}
.group19 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 22.73%;
  left: 64.17%;
  bottom: 0%;
  top: 76.29%;
  overflow: visible;
}
.group20 {
  width: 13.1%;
  height: 23.71%;
  position: absolute;
  right: 11.27%;
  left: 75.63%;
  bottom: 6.2%;
  top: 70.09%;
  overflow: visible;
}
.selamat-datang-di {
  color: #71340f;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(45 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 67.85%;
  left: 15.75%;
  width: 16.41%;
  bottom: 69.69%;
  top: 26.69%;
  height: 3.62%;
}
.gurihnya-nyatu {
  color: #71340f;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 65.44%;
  left: 15.75%;
  width: 18.81%;
  bottom: 44.29%;
  top: 50.89%;
  height: 4.82%;
}
.sothu-adalah-brand-camilan-gurih-yang-menghadirkan-perpaduan-unik-antara-sotong-dan-tahu-dalam-satu-sajian-yang-renyah-lezat-dan-memuaskan {
  color: #71340f;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 57.52%;
  left: 15.75%;
  width: 26.73%;
  bottom: 27.07%;
  top: 58.81%;
  height: 14.12%;
}
.sothu {
  color: #fdeed0;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(200 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 59.26%;
  left: 15.04%;
  width: 25.7%;
  bottom: 51.26%;
  top: 32.63%;
  height: 16.1%;
  display: inline-block;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: visible;
}

.sothu .char {
  display: inline-block;
  will-change: transform;
  animation: sothuLoop 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes sothuLoop {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translateY(calc(-44 * var(--u))) rotate(-8deg);
    opacity: 1;
  }
  38% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  54% {
    transform: translateY(calc(-8 * var(--u))) rotate(2deg);
    opacity: 1;
  }
}

/* Interactive emphasis keeps the original composition while making key copy feel tactile. */
.hero-kicker,
.hero-title,
.hero-brand,
.feature-item {
  cursor: default;
  transition: transform 220ms ease, filter 220ms ease, text-shadow 220ms ease;
}

.hero-kicker:hover,
.hero-kicker:focus-visible {
  transform: translateX(calc(8 * var(--u)));
  filter: brightness(1.08);
  outline: none;
}

.hero-title:hover,
.hero-title:focus-visible {
  transform: translateX(calc(10 * var(--u)));
  text-shadow: calc(5 * var(--u)) calc(5 * var(--u)) 0 rgb(231 165 43 / 22%);
  outline: none;
}

.hero-brand:hover,
.hero-brand:focus-visible {
  transform: translateY(calc(-8 * var(--u))) scale(1.025);
  text-shadow: 0 calc(8 * var(--u)) calc(14 * var(--u)) rgb(113 52 15 / 20%);
  outline: none;
}

.feature-item {
  z-index: 2;
  border-radius: calc(18 * var(--u));
  cursor: pointer;
  transition: color 220ms ease, filter 220ms ease;
  outline: none;
}

.feature-item > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: transform 220ms ease, color 220ms ease;
}

.feature-item:hover > span,
.feature-item:focus-visible > span {
  transform: translateY(calc(-4 * var(--u)));
}

.feature-item:hover .bahan-pilihan-berkualitas-span,
.feature-item:hover .rasa-autentik-khas-span,
.feature-item:hover .harga-terjangkau-span,
.feature-item:focus-visible .bahan-pilihan-berkualitas-span,
.feature-item:focus-visible .rasa-autentik-khas-span,
.feature-item:focus-visible .harga-terjangkau-span {
  color: #a64d19;
}

.home-panel {
  position: absolute;
  z-index: 0;
  border-radius: calc(26 * var(--u));
  transition: transform 240ms ease, filter 240ms ease, box-shadow 240ms ease;
  cursor: pointer;
  outline: none;
}

.home-panel-left {
  width: 52.86%;
  height: 43.06%;
  left: 3.29%;
  top: 14.44%;
}

.home-panel-right {
  width: 36.25%;
  height: 43.06%;
  left: 60.16%;
  top: 14.44%;
}

.home-panel .vector4,
.home-panel .vector5 {
  width: 100%;
  height: 100%;
  right: auto;
  left: 0;
  top: 0;
  bottom: auto;
  transition: filter 260ms ease;
}

.kenapa-sothu-home .ornamen {
  z-index: 2;
}

.kenapa-sothu-home:has(.home-panel-left:hover, .home-panel-left:focus-visible) .vector4,
.kenapa-sothu-home:has(.home-panel-right:hover, .home-panel-right:focus-visible) .vector5,
.kenapa-sothu-home:has(.feature-item:hover, .feature-item:focus-visible) .vector4,
.kenapa-sothu-home:has(.feature-item:hover, .feature-item:focus-visible) .vector5 {
  filter: brightness(1.08) saturate(1.1);
}

.kenapa-sothu-home:has(.home-panel-left:hover, .home-panel-left:focus-visible) .home-panel-left,
.kenapa-sothu-home:has(.home-panel-right:hover, .home-panel-right:focus-visible) .home-panel-right,
.kenapa-sothu-home:has(.feature-item:hover, .feature-item:focus-visible) .home-panel-left,
.kenapa-sothu-home:has(.feature-item:hover, .feature-item:focus-visible) .home-panel-right {
  transform: translateY(calc(-2 * var(--u))) scale(1.01);
}

.kenapa-sothu-home:has(.home-panel-left:hover, .home-panel-left:focus-visible) .feature-item,
.kenapa-sothu-home:has(.home-panel-right:hover, .home-panel-right:focus-visible) .feature-item,
.kenapa-sothu-home:has(.feature-item:hover, .feature-item:focus-visible) .feature-item {
  filter: drop-shadow(0 calc(7 * var(--u)) calc(8 * var(--u)) rgb(113 52 15 / 12%));
}

.home-panel-left:hover,
.home-panel-right:hover,
.home-panel-left:focus-visible,
.home-panel-right:focus-visible {
  transform: translateY(calc(-2 * var(--u))) scale(1.01);
}

.panel-copy {
  cursor: default;
  transition: transform 260ms ease, filter 260ms ease, color 260ms ease;
}

.panel-copy:hover,
.panel-copy:focus-visible,
.kenapa-sothu-home:has(.home-panel-right:hover, .home-panel-right:focus-visible) .panel-copy {
  transform: translateY(calc(-6 * var(--u)));
  filter: drop-shadow(0 calc(8 * var(--u)) calc(9 * var(--u)) rgb(113 52 15 / 14%));
  color: #a64d19;
  outline: none;
}

.kenapa-sothu-home:has(.panel-copy:hover, .panel-copy:focus-visible) .vector5 {
  filter: brightness(1.06) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .hero-kicker,
  .hero-title,
  .hero-brand,
  .feature-item,
  .panel-copy {
    transition: none;
  }

  .home-panel,
  .home-panel .vector4,
  .home-panel .vector5 {
    transition: none;
  }
}
.kenapa-sothu-home {
  width: calc(1922.51 * var(--u));
  height: calc(1097.46 * var(--u));
  position: absolute;
  left: 0;
  top: calc(983 * var(--u));
  overflow: hidden;
}
.vector {
  width: 99.97%;
  height: 100%;
  position: absolute;
  right: 0.03%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.vector2 {
  width: 21.05%;
  height: 53.83%;
  position: absolute;
  right: 0%;
  left: 78.95%;
  bottom: 34.79%;
  top: 11.38%;
  overflow: visible;
}
.vector3 {
  width: 21.05%;
  height: 53.83%;
  position: absolute;
  right: 78.85%;
  left: 0.09%;
  bottom: 34.79%;
  top: 11.38%;
  overflow: visible;
}
.vector4 {
  width: 52.86%;
  height: 43.06%;
  position: absolute;
  right: 43.85%;
  left: 3.29%;
  bottom: 42.5%;
  top: 14.44%;
  overflow: visible;
}
.vector5 {
  width: 36.25%;
  height: 43.06%;
  position: absolute;
  right: 3.59%;
  left: 60.16%;
  bottom: 42.5%;
  top: 14.44%;
  overflow: visible;
}
.ornamen {
  width: 82.98%;
  height: 31.06%;
  position: absolute;
  right: 6.62%;
  left: 10.4%;
  bottom: 49.08%;
  top: 19.86%;
  overflow: hidden;
}
.group21 {
  height: auto;
  position: absolute;
  left: calc(305.95 * var(--u));
  top: calc(125.12 * var(--u));
  overflow: visible;
  animation: homeOrnamentFloat 4.8s ease-in-out infinite;
}
.group22 {
  width: 6.91%;
  height: 32.35%;
  position: absolute;
  right: 93.09%;
  left: 0%;
  bottom: 30.95%;
  top: 36.71%;
  overflow: visible;
  animation: homeOrnamentFloat 4.8s ease-in-out -1.6s infinite;
}
.group23 {
  height: auto;
  position: absolute;
  left: calc(608.86 * var(--u));
  top: calc(125.12 * var(--u));
  overflow: visible;
  animation: homeOrnamentFloat 4.8s ease-in-out -3.2s infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .group21,
  .group22,
  .group23 {
    animation: none;
  }
}

.group24 {
  width: 3.89%;
  height: 43.18%;
  position: absolute;
  right: 0.88%;
  left: 95.24%;
  bottom: 56.83%;
  top: 0%;
  overflow: visible;
}
.bahan-pilihan-berkualitas {
  color: #71340f;
  text-align: center;
  font-family: "Poppins-Regular", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 81.69%;
  left: 8.27%;
  width: 10.04%;
  bottom: 48.06%;
  top: 44.47%;
  height: 7.47%;
}
.bahan-pilihan-berkualitas-span {
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.bahan-pilihan-berkualitas-span2 {
  font-family: "Poppins-Medium", sans-serif;
  font-weight: 500;
}
.rasa-autentik-khas {
  color: #71340f;
  text-align: center;
  font-family: "Poppins-Regular", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 65.77%;
  left: 24.08%;
  width: 10.14%;
  bottom: 48.06%;
  top: 44.47%;
  height: 7.47%;
}
.rasa-autentik-khas-span {
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.rasa-autentik-khas-span2 {
  font-family: "Poppins-Medium", sans-serif;
  font-weight: 500;
}
.harga-terjangkau {
  color: #71340f;
  text-align: center;
  font-family: "Poppins-Regular", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 51.05%;
  left: 40.88%;
  width: 8.06%;
  bottom: 48.06%;
  top: 44.47%;
  height: 7.47%;
}
.harga-terjangkau-span {
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.harga-terjangkau-span2 {
  font-family: "Poppins-Medium", sans-serif;
  font-weight: 500;
}
.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: 6.94%;
  left: 65.96%;
  width: 27.1%;
  bottom: 49.06%;
  top: 35.99%;
  height: 14.94%;
}
.kenapa-sothu {
  color: #71340f;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 71.96%;
  left: 8.43%;
  width: 19.61%;
  bottom: 73.67%;
  top: 21.23%;
  height: 5.1%;
}
.sedikit-tentang-sothu {
  color: #71340f;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 15.11%;
  left: 65.96%;
  width: 18.93%;
  bottom: 67.83%;
  top: 21.05%;
  height: 11.12%;
}
.bar-bawah-home {
  width: calc(1921.98 * var(--u));
  height: calc(371.46 * var(--u));
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(1717 * var(--u));
  overflow: hidden;
}
.vector6 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.vector7 {
  width: 19.82%;
  height: 70.27%;
  position: absolute;
  right: 79.27%;
  left: 0.91%;
  bottom: 0.54%;
  top: 29.19%;
  overflow: visible;
}
.vector8 {
  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;
}
.vector9 {
  width: 11.25%;
  height: 24.5%;
  position: absolute;
  right: 62.6%;
  left: 26.15%;
  bottom: 0.26%;
  top: 75.24%;
  overflow: visible;
}
.vector10 {
  width: 17.62%;
  height: 51.42%;
  position: absolute;
  right: 38.97%;
  left: 43.42%;
  bottom: 0.27%;
  top: 48.31%;
  overflow: visible;
}
.vector11 {
  width: 11.25%;
  height: 24.5%;
  position: absolute;
  right: 21.92%;
  left: 66.83%;
  bottom: 0.26%;
  top: 75.24%;
  overflow: visible;
}
.gurihnya-nyatu2 {
  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-home {
  width: calc(1919.96 * var(--u));
  height: calc(150.46 * var(--u));
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.vector12 {
  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;
}
.group25 {
  width: 99.99%;
  height: 99.98%;
  position: absolute;
  right: 0.01%;
  left: 0%;
  bottom: 0.01%;
  top: 0.01%;
  overflow: visible;
}
.home2 {
  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%;
}
.product {
  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%;
}
.frame {
  width: 8.49%;
  height: 5.98%;
  position: absolute;
  right: 55.26%;
  left: 36.25%;
  bottom: 19.58%;
  top: 74.44%;
  overflow: visible;
}