/* ============================================================
   Baso Laswi — Stylesheet
   HTML + CSS + JavaScript (vanilla, tanpa framework)
   ============================================================ */

/* ---------- 1. Font lokal ---------- */
@font-face {
  font-family: "Gagalin";
  src: url("../assets/fonts/Gagalin-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lilita One";
  src: url("../assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Design token ---------- */
:root {
  --red: #bb3528;
  --red-dark: #8e2419;
  --red-soft: #c34e42;
  --orange: #e85310;
  --orange-light: #f2761c;
  --cream: #fffaf5;
  --white: #ffffff;
  --ink: #2c1410;

  --font-display: "Gagalin", "Arial Black", sans-serif;
  --font-heading: "Lilita One", "Gagalin", "Arial Black", sans-serif;
  --font-body: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;

  --nav-h: 60px;
  --container: 1240px;
  --radius: 18px;
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 3. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* FIX: anchor tidak lagi tertutup navbar fixed */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden; /* FIX: hilangkan horizontal scroll di mobile */
}

img {
  max-width: 100%;
  display: block;
  /* FIX PENTING: atribut height="..." di HTML dihitung browser sebagai
     tinggi pasti, sehingga aspect-ratio diabaikan dan foto bulat berubah
     jadi lonjong. height:auto mengembalikan proporsinya. */
  height: auto;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Aksesibilitas: fokus keyboard terlihat */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--red);
  color: #fff;
  border-radius: 0 0 10px 10px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 0;
}

.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;
}

/* ---------- 4. Layout util ---------- */
.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

.section {
  padding-block: clamp(48px, 7vw, 96px);
}

.section--tight {
  padding-top: 0;
}

.section-title {
  font-family: var(--font-heading);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.05;
  text-align: center;
}

.section-title--rounded {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   5. NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--white);
  display: flex;
  align-items: center;
  transition: box-shadow 0.25s var(--ease);
}

.navbar.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
}

.navbar__inner {
  width: min(100% - 40px, 1360px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand__badge {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.brand__name {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.2px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4.5vw, 76px);
}

.nav__link {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 17px;
  position: relative;
  padding: 6px 2px;
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

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

.nav__link.is-active {
  color: var(--orange);
}

/* Tombol hamburger (muncul di mobile) */
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  place-items: center;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  position: relative;
  transition: background 0.2s var(--ease);
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  transition: transform 0.3s var(--ease);
}
.nav__toggle span::before {
  top: -8px;
}
.nav__toggle span::after {
  top: 8px;
}

.nav__toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav__toggle[aria-expanded="true"] span::before {
  transform: translateY(8px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--nav-h); /* FIX: konten tidak tertimpa navbar */
  min-height: clamp(320px, 47vw, 760px);
  background: linear-gradient(100deg, var(--orange-light), var(--red));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero--beranda {
  background-image: url("../assets/img/hero-beranda.jpg");
  justify-content: flex-end;
}
.hero--profil {
  background-image: url("../assets/img/hero-profil.jpg");
  justify-content: flex-end;
}
.hero--produk {
  background-image: url("../assets/img/hero-produk.jpg");
  align-items: flex-start;
}
.hero--kontak {
  background-image: url("../assets/img/hero-kontak.jpg");
  /* FIX: teks yang menyatu di gambar berada di bawah, jangan sampai terpotong */
  background-position: center bottom;
}

.hero__inner {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  padding-block: clamp(28px, 5vw, 64px);
}

/* Beranda */
.hero__headline {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(46px, 8.6vw, 116px);
  line-height: 0.98;
  text-align: right;
  letter-spacing: 1px;
  text-shadow: 5px 6px 0 rgba(120, 25, 12, 0.45);
  max-width: 62%;
  margin-left: auto;
}

.hero__signature {
  margin-top: clamp(22px, 6vw, 96px);
  text-align: right;
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(12px, 1.1vw, 15px);
}

/* Profil */
.hero__note {
  max-width: 460px;
  margin-left: auto;
  color: #fff;
  text-align: center;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.65;
  text-shadow: 0 2px 6px rgba(90, 25, 10, 0.35);
}

/* Produk */
.hero__title-top {
  text-align: center;
}
.hero__title-top h1 {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 62px);
  line-height: 1.05;
  text-shadow: 3px 4px 0 rgba(120, 25, 12, 0.4);
}
.hero__title-top p {
  color: #fff;
  margin-top: 10px;
  font-size: clamp(12px, 1.15vw, 16px);
}

/* ============================================================
   7. BERANDA — intro
   ============================================================ */
/* FIX: minmax(0, 1fr) — tanpa ini kolom grid tidak boleh menyusut di bawah
   lebar kontennya, sehingga gambar mangkuk meluber keluar kolom dan
   memotong paragraf di sebelahnya pada layar ~900–1100px. */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}

.intro__text {
  color: var(--red);
  text-align: center;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.75;
  max-width: 520px;
  margin-inline: auto;
}

.intro__figure {
  margin: 0;
  justify-self: center;
  /* FIX: ikut menyusut mengikuti lebar kolom, tidak lagi 420px kaku */
  width: 100%;
  max-width: 500px;
}

.intro__figure img {
  width: 100%;
  height: auto;
}

/* Ombak dekoratif */
.wave {
  display: block;
  width: 100%;
  height: auto;
  color: var(--red-soft);
}

/* ============================================================
   8. PROFIL
   ============================================================ */
.history {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(28px, 4vw, 56px);
}

.history__text {
  color: var(--red);
  text-align: center;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.8;
}

.history__img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vision {
  position: relative;
  overflow: hidden;
}

.vision__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--red-soft);
  opacity: 0.85;
  pointer-events: none;
}

.vision__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 56px);
}

.vm-card {
  background: var(--red);
  color: #fff;
  border-radius: 26px;
  padding: clamp(26px, 3vw, 44px);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.vm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}

.vm-card__title {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 1px;
}

.vm-card__body {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.75;
  margin: auto 0;
}

/* ============================================================
   9. PRODUK
   ============================================================ */
/* Blok full-bleed: kartu merah menempel ke tepi kiri layar.
   FIX: dulu memakai calc(50% - 50vw) di dalam .container, yang membuat
   elemen keluar viewport karena persentase margin dihitung dari lebar kolom,
   bukan lebar layar. Sekarang .feature langsung selebar layar. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  align-items: center;
}

/* Satu gambar utuh: blok merah, sudut membulat, dan foto tangan
   sudah menyatu di dalam file gambarnya.

   Sisa merah di kiri lengan sudah dipangkas dari file gambarnya, jadi
   lengan menempel tepat di tepi kiri layar dan terlihat seolah lanjut
   ke luar layar — bukan terpotong rata di tengah blok merah. */
.feature__media {
  width: 100%;
  height: auto;
}

.feature__body {
  padding-inline: clamp(24px, 4.5vw, 78px);
}

.feature__title {
  font-family: var(--font-heading);
  color: var(--red);
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.06;
}

.feature__text {
  color: var(--red);
  margin-top: 14px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.7;
  max-width: 460px;
}

/* Tiga keunggulan + dua mangkuk */
.usp {
  padding-top: clamp(40px, 6vw, 80px);
}

.usp__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 48px);
  align-items: end;
}

.usp__item {
  text-align: center;
  color: var(--red);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.6;
}

.usp__arrow {
  display: block;
  width: 46px;
  height: 62px;
  margin: 14px auto 0;
  color: var(--red-dark);
}

.usp__bowls {
  position: relative;
  margin-top: -18px;
}

/* Pita merah memotong mangkuk kira-kira di 45% tingginya
   dan menjorok sedikit ke bawah, persis seperti desain. */
.usp__band {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 45%;
  height: 68%;
  background: var(--red);
  z-index: 0;
}

.usp__bowls-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 56px);
  flex-wrap: wrap;
}

/* Gambar sudah berupa potongan bundar dengan latar transparan,
   jadi tidak perlu border-radius / object-fit lagi. */
.usp__bowl {
  width: clamp(220px, 29vw, 400px);
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18));
}

/* Produk terlaris */
.best {
  background: var(--red);
  border-radius: 26px;
  padding: clamp(26px, 3.4vw, 48px);
  margin-top: clamp(26px, 3.6vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  box-shadow: var(--shadow-card);
}

.best__item {
  color: #fff;
  text-align: left;
}

.best__item img {
  width: clamp(120px, 13vw, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}

.best__item:hover img {
  transform: scale(1.06) rotate(-3deg);
}

.best__name {
  font-family: var(--font-body);
  font-weight: 700;
  margin-top: 22px;
  font-size: clamp(14px, 1.2vw, 17px);
}

/* Desain memakai sans tebal untuk harga, bukan font display
   (Gagalin adalah font kapital, "Rp" jadi tercetak "RP"). */
.best__price {
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px);
  margin-top: 4px;
}

.best__desc {
  margin-top: 10px;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.55;
  opacity: 0.95;
}

/* Menu lainnya */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* seperti desain: kartu tanpa deskripsi lebih pendek dan
     ditempatkan di tengah barisnya, bukan diregangkan */
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 3vw, 40px);
}

.menu-card {
  background: var(--red);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #fff;
  min-height: 92px;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* FIX: display:flex mengalahkan [hidden], jadi filter JS tidak bekerja */
.menu-card[hidden] {
  display: none;
}

.menu-card__name {
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
}

.menu-card__price {
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 17px);
  margin-top: 3px;
}

.menu-card__desc {
  font-size: 11px;
  line-height: 1.45;
  margin-top: 6px;
  opacity: 0.92;
}

.menu-card img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Filter menu (JavaScript) */
.menu-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.menu-filter__btn {
  border: 2px solid var(--red);
  color: var(--red);
  background: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.menu-filter__btn:hover {
  background: rgba(187, 53, 40, 0.1);
}

.menu-filter__btn[aria-pressed="true"] {
  background: var(--red);
  color: #fff;
}

.menu-empty {
  text-align: center;
  color: var(--red);
  margin-top: 24px;
}

/* ============================================================
   10. KONTAK
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 3.4vw, 44px);
}

.contact-card {
  background: var(--red);
  border-radius: 12px;
  color: #fff;
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  min-height: 150px;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

a.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.contact-card__icon {
  width: clamp(38px, 3.4vw, 52px);
  height: clamp(38px, 3.4vw, 52px);
  flex-shrink: 0;
}

.contact-card__text {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.55;
}

.map {
  margin-top: clamp(20px, 2.6vw, 34px);
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.map img {
  width: 100%;
  height: clamp(180px, 22vw, 300px);
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.map:hover img {
  transform: scale(1.03);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(16px, 2vw, 26px);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}

.gallery button {
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}

.gallery button:hover img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(30, 8, 4, 0.88);
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(92vw, 1000px);
  max-height: 84vh;
  border-radius: 12px;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer {
  background: var(--red-soft);
  color: #fff;
  padding: 18px 0;
}

.footer__inner {
  width: min(100% - 40px, 1360px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__copy {
  font-family: var(--font-display);
  font-size: 16px;
}

.footer__social {
  width: 32px;
  height: 32px;
  color: #fff;
  transition: transform 0.25s var(--ease);
}

.footer__social:hover {
  transform: scale(1.12);
}

/* ---------- 12. Animasi reveal (JS) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Tombol back-to-top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .best,
  .menu-grid,
  .usp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .hero__headline {
    max-width: 100%;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-h: 56px;
  }

  .nav__toggle {
    display: grid;
  }

  .nav__list {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 18px;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(-140%);
    transition: transform 0.35s var(--ease);
  }

  .nav__list.is-open {
    transform: none;
  }

  .nav__link {
    display: block;
    padding: 14px 24px;
    font-size: 19px;
  }

  .nav__link::after {
    display: none;
  }

  .intro,
  .history,
  .feature {
    grid-template-columns: 1fr;
  }

  .intro__figure {
    order: -1;
  }

  .feature__body {
    padding-block: 26px;
    text-align: center;
  }

  .feature__text {
    margin-inline: auto;
  }

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

  .hero__headline {
    text-align: center;
    margin-inline: auto;
  }

  .hero--beranda,
  .hero--profil {
    justify-content: center;
  }

  .hero__note {
    margin-inline: auto;
  }

  .hero__signature {
    text-align: center;
  }
}

@media (max-width: 620px) {
  .best,
  .menu-grid,
  .usp__grid,
  .gallery {
    grid-template-columns: 1fr;
  }

  .usp__band {
    display: none;
  }

  .usp__arrow {
    transform: rotate(90deg);
  }

  .brand__name {
    font-size: 19px;
  }

  .menu-card {
    min-height: 0;
  }
}

/* Hormati preferensi pengguna */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Cetak */
@media print {
  .navbar,
  .to-top,
  .lightbox {
    display: none !important;
  }
  .hero {
    margin-top: 0;
  }
}