/* Bilah atas = bilah situs (.site-header di /assets/genz.css): tinggi 76px supaya tombol menu samping
   dan stiker Tutup di dinding jatuh di titik yang sama. Blok "Menu tamu" di bawah disalin dari
   /assets/genz.css oleh _work/menu-b/navigasi/bangun.py; ubah menu samping situs = bangun dan pasang ulang. */
:root {
  --bar: 76px;
}

.bar {
  gap: var(--sp-12);
  padding: 0 var(--sp-16);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 2.75rem;
  height: 3.125rem;
  fill: currentColor;
}

.brand-label {
  margin-left: var(--sp-8);
  font-size: var(--fs-16);
  font-weight: 800;
  white-space: nowrap;
}

.bar .judul {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (min-width: 40rem) {
  .brand {
    margin-right: var(--sp-20);
  }

  .bar .judul {
    position: static;
    width: auto;
    height: auto;
    margin-right: auto;
    padding-left: var(--sp-20);
    border-left: 2px solid var(--ink);
    overflow: visible;
    clip-path: none;
  }
}

/* Menu tamu "Dinding Mural ONZE" (Irdat 27 Sep 2026): halaman (body) berayun seperti pintu 3D engsel kiri,
   di baliknya dinding bata mural: lampu gantung turun lalu menyala, papan kayu jatuh dan berayun di talinya.
   Ayunan pendulum di sini pengecualian dari larangan bounce, atas pilihan Irdat 27 Sep 2026. */
.menu-tombol {
  display: inline-grid;
  flex: 0 0 auto;
  gap: var(--sp-8);
  place-content: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: var(--garis);
  border-radius: var(--radius-md);
  background: var(--kertas);
  box-shadow: 3px 3px 0 var(--terracotta);
  color: var(--tinta);
  cursor: pointer;
}

.menu-tombol span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: var(--radius-2);
  background: currentColor;
  transition:
    translate var(--gerak-ms) var(--gerak-ease),
    rotate var(--gerak-ms) var(--gerak-ease);
}

.menu-tombol:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

html.menu-buka .menu-tombol span:first-child {
  translate: 0 5px;
  rotate: 45deg;
}

html.menu-buka .menu-tombol span:last-child {
  translate: 0 -5px;
  rotate: -45deg;
}

.site-header:has(> .menu-tombol) {
  flex-direction: row;
  align-items: center;
}

html.menu-kunci {
  overflow: hidden;
}

/* daun pintu: body jadi kotak seukuran layar di atas dinding; transform + scrollTop dipasang menu.js */
html.menu-pintu body {
  position: fixed;
  inset: 0;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
  background: var(--kertas);
  transform-origin: 0 50%;
  will-change: transform;
}

html.menu-pintu body::before {
  position: absolute;
  top: var(--menu-sy);
  bottom: auto;
  height: 100vh;
}

html.menu-pintu body::after {
  position: absolute;
  top: var(--menu-sy);
  left: 0;
  right: 0;
  z-index: 2147483000;
  height: 100vh;
  background:
    linear-gradient(90deg, transparent 94%, var(--arang-a35)),
    linear-gradient(90deg, var(--hijau-gelap-a12), var(--tirai));
  pointer-events: none;
  content: "";
  animation: menu-redup 900ms cubic-bezier(0.7, 0, 0.2, 1) both;
}

html.menu-pintu:not(.menu-buka) body::after {
  animation: menu-terangkan 700ms ease-in 140ms both;
}

@keyframes menu-redup {
  from {
    opacity: 0;
  }
}

@keyframes menu-terangkan {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* dinding bata mural: pola sama dengan mading beranda (cokelat + terracotta 42%, garis charcoal 50%) */
.menu-dinding {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5.75rem var(--sp-20) var(--sp-24) 33vw;
  background-color: var(--cokelat-deck);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2788%27 height=%2744%27%3E%3Cg fill=%27none%27 stroke=%27%2324231f%27 stroke-opacity=%27.5%27 stroke-width=%272%27%3E%3Cpath d=%27M0 1H88M0 23H88M1 1V23M45 23V44%27/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(color-mix(in srgb, var(--terracotta) 42%, transparent), color-mix(in srgb, var(--terracotta) 42%, transparent));
  background-size: 88px 44px, 100% 100%;
  color: var(--tinta-terbalik);
  font-family: var(--font-text);
  visibility: hidden;
}

html:has(.sambutan) .menu-dinding {
  padding-top: 8.15rem;
}

html.menu-buka .menu-dinding,
html.menu-pintu .menu-dinding {
  visibility: visible;
}

/* gelap sebelum lampu menyala */
.menu-dinding::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--charcoal-deck);
  opacity: 0.8;
  pointer-events: none;
  content: "";
}

html.menu-buka .menu-dinding::after {
  animation: dinding-terang 1300ms linear 560ms both;
}

@keyframes dinding-terang {
  0% {
    opacity: 0.8;
  }
  14% {
    opacity: 0.38;
  }
  22% {
    opacity: 0.72;
  }
  36% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.16;
  }
}

.menu-tutup {
  position: fixed;
  /* Subhalaman tanpa pita: pusat .menu-tombol di .site-header (tinggi minimal 76px, padding 12px, tombol 48px) = 38px. Stiker tutup 56px. */
  top: 10px;
  right: var(--sp-16);
  z-index: 3;
  display: inline-flex;
  gap: var(--sp-4);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 56px;
  min-height: 56px;
  padding: 0 var(--sp-14) 0 var(--sp-10);
  border: 2px solid var(--charcoal-deck);
  border-radius: var(--radius-pil);
  background: var(--kertas);
  box-shadow: 3px 3px 0 var(--charcoal-deck);
  color: var(--tinta);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  rotate: -8deg;
  cursor: pointer;
}

/* Beranda: pita .sambutan 44px, lalu .home-header (padding 12px + tombol 48px). Pusat tombol 80px, stiker 56px. */
html:has(.sambutan) .menu-tutup {
  top: 52px;
}

.menu-tutup span {
  font-family: var(--font-text);
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: 0.8;
}

.menu-tutup:active {
  translate: var(--gerak-tekan) var(--gerak-tekan);
  box-shadow: none;
}

/* ketebalan daun pintu: sisi tepi bebas (kertas tebal, gelap ke arah dinding) */
.menu-tebal {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--aksen) 80%, var(--kertas)), var(--aksen) 25%, color-mix(in srgb, var(--aksen) 40%, var(--cokelat-deck)));
  clip-path: polygon(0 0, 0 0, 0 0);
  pointer-events: none;
}

/* bayangan pintu di dinding: pekat di tepi, memudar 6rem ke kanan */
.menu-bayang {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent var(--tepi, 0px), var(--sepia-a72) var(--tepi, 0px), var(--sepia-a32) calc(var(--tepi, 0px) + 1.5rem), var(--sepia-a10) calc(var(--tepi, 0px) + 3.5rem), transparent calc(var(--tepi, 0px) + 6rem));
  opacity: 0;
  pointer-events: none;
}

html.menu-tenang .menu-tebal,
html.menu-tenang .menu-bayang {
  display: none;
}

/* lampu gantung */
.menu-lampu {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1;
  height: 0;
}

.lampu {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 3.25rem;
  height: calc(var(--tali) + 2.4rem);
  transform-origin: 50% 0;
  translate: -50% -110%;
}

.lampu::before {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: var(--tali);
  background: var(--charcoal-deck);
  content: "";
}

.lampu::after {
  position: absolute;
  top: var(--tali);
  left: 0;
  right: 0;
  z-index: 1;
  height: 1.6rem;
  border: 2px solid var(--charcoal-deck);
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 100% 100% var(--radius-sm) var(--radius-sm);
  background: var(--kap);
  content: "";
}

.lampu-cahaya {
  position: absolute;
  top: calc(var(--tali) + 1.2rem);
  left: 50%;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--kertas);
  box-shadow: 0 0 1.2rem 0.4rem var(--tan-a75);
  opacity: 0.12;
  translate: -50% 0;
}

/* genangan cahaya hangat di dinding */
.lampu-cahaya::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17rem;
  height: 24rem;
  background: radial-gradient(ellipse 50% 55% at 50% 0, var(--krem-a26), var(--tan-a10) 45%, transparent 72%);
  pointer-events: none;
  translate: -50% 0;
  content: "";
}

html.menu-buka .lampu {
  animation:
    lampu-turun 720ms cubic-bezier(0.16, 1, 0.3, 1) calc(140ms + var(--i) * 110ms) both,
    lampu-ayun 2300ms ease-out calc(140ms + var(--i) * 110ms) both,
    lampu-diam 6s ease-in-out calc(2600ms + var(--i) * 400ms) infinite;
}

html.menu-buka .lampu-cahaya {
  animation: lampu-nyala 1000ms linear calc(620ms + var(--i) * 170ms) both;
}

html.menu-pintu:not(.menu-buka) .lampu {
  animation: lampu-naik 320ms ease-in both;
}

@keyframes lampu-turun {
  from {
    translate: -50% -110%;
  }
  to {
    translate: -50% 0;
  }
}

@keyframes lampu-naik {
  from {
    translate: -50% 0;
  }
  to {
    translate: -50% -110%;
  }
}

@keyframes lampu-ayun {
  0% {
    rotate: 14deg;
  }
  22% {
    rotate: -9deg;
  }
  42% {
    rotate: 5deg;
  }
  62% {
    rotate: -2.5deg;
  }
  80% {
    rotate: 1deg;
  }
  100% {
    rotate: 0deg;
  }
}

@keyframes lampu-diam {
  0%,
  100% {
    rotate: 0deg;
  }
  25% {
    rotate: 1.4deg;
  }
  75% {
    rotate: -1.4deg;
  }
}

@keyframes lampu-nyala {
  0% {
    opacity: 0.12;
  }
  16% {
    opacity: 1;
  }
  24% {
    opacity: 0.2;
  }
  38% {
    opacity: 1;
  }
  46% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}

/* papan kayu bergantung di tali */
.menu-daftar {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: var(--sp-18);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-daftar li {
  transform-origin: 50% -1.15rem;
  rotate: var(--miring);
  translate: 0 -110vh;
}

html.menu-buka .menu-daftar li {
  animation:
    papan-jatuh 640ms cubic-bezier(0.2, 0.9, 0.3, 1) calc(360ms + var(--i) * 90ms) both,
    papan-ayun 1700ms ease-out calc(700ms + var(--i) * 90ms) both;
}

html.menu-pintu:not(.menu-buka) .menu-daftar li {
  animation: papan-naik 300ms ease-in calc((4 - var(--i)) * 30ms) both;
}

@keyframes papan-jatuh {
  from {
    translate: 0 -110vh;
  }
  to {
    translate: 0 0;
  }
}

@keyframes papan-naik {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -110vh;
  }
}

@keyframes papan-ayun {
  0% {
    rotate: calc(var(--miring) + 9deg);
  }
  28% {
    rotate: calc(var(--miring) - 6deg);
  }
  52% {
    rotate: calc(var(--miring) + 3deg);
  }
  76% {
    rotate: calc(var(--miring) - 1.2deg);
  }
  100% {
    rotate: var(--miring);
  }
}

.papan {
  position: relative;
  display: inline-flex;
  gap: var(--sp-10);
  align-items: baseline;
  min-height: 44px;
  padding: var(--sp-8) var(--sp-18) var(--sp-8);
  border: 2px solid var(--charcoal-deck);
  border-radius: var(--radius-6);
  background: var(--aksen) url("/assets/tekstur/kayu-laminasi.webp") center / 18rem;
  background-blend-mode: multiply;
  box-shadow: 4px 5px 0 var(--arang-a55);
  color: var(--tinta);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 8.2vw, 2.9rem);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transform-origin: 50% -1.15rem;
  transition:
    translate var(--gerak-cepat-ms) var(--gerak-ease),
    box-shadow var(--gerak-cepat-ms) var(--gerak-ease);
}

/* dua tali + paku di atas papan */
.papan::before {
  position: absolute;
  bottom: 100%;
  left: 16%;
  right: 16%;
  height: 1.15rem;
  border-inline: 2px solid color-mix(in srgb, var(--batas-terbalik) 75%, transparent);
  content: "";
}

.papan::after {
  position: absolute;
  bottom: calc(100% + 1.15rem - 4px);
  left: calc(16% - 3px);
  right: calc(16% - 3px);
  height: 8px;
  background:
    radial-gradient(circle, var(--charcoal-deck) 3px, transparent 3.5px) left / 8px 8px no-repeat,
    radial-gradient(circle, var(--charcoal-deck) 3px, transparent 3.5px) right / 8px 8px no-repeat;
  content: "";
}

.papan small {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 500;
}

.papan em {
  position: absolute;
  top: -0.95rem;
  left: -1.1rem;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-sm);
  background: var(--permukaan-gelap);
  color: var(--tinta-terbalik);
  font-family: var(--font-hand);
  font-size: var(--fs-16);
  font-style: normal;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  rotate: -7deg;
}

@media (hover: hover) {
  .papan:hover {
    animation: papan-goyang 900ms ease-out;
  }
}

@keyframes papan-goyang {
  0%,
  100% {
    rotate: 0deg;
  }
  25% {
    rotate: 4deg;
  }
  50% {
    rotate: -3deg;
  }
  75% {
    rotate: 1.5deg;
  }
}

.papan:active {
  translate: var(--gerak-tekan) var(--gerak-tekan);
  box-shadow: 0 0 0 transparent;
}

.papan:focus-visible,
.menu-saklar:focus-visible,
.menu-tutup:focus-visible,
.menu-cus:focus-visible {
  outline: 3px solid var(--batas-terbalik);
  outline-offset: 4px;
}

/* saklar lampu = mode gerak */
.menu-saklar {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--sp-12);
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-26);
  color: var(--tinta-terbalik);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-cus {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--sp-12);
  align-items: center;
  align-self: stretch;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 4.25rem;
  margin-top: auto;
  margin-bottom: var(--sp-6);
  padding: var(--sp-12) var(--sp-16);
  overflow: hidden;
  border: 2px solid var(--charcoal-deck);
  border-radius: var(--radius-14) var(--radius-18) var(--radius-12) var(--radius-16);
  background: var(--kertas);
  box-shadow: 5px 5px 0 var(--terracotta);
  color: var(--tinta);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.2vw, 1.9rem);
  font-variant-ligatures: none;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
  rotate: -1.25deg;
}

.menu-cus::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 32%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--aksen) 75%, white), transparent);
  opacity: 0;
  pointer-events: none;
  content: "";
  translate: -140% 0;
}

html.menu-buka .menu-cus::after {
  animation: menu-cus-kilau 3.2s ease-in-out infinite;
}

html.menu-buka .menu-cus-pin {
  animation: menu-cus-pin 3.2s ease-in-out infinite;
}

@keyframes menu-cus-kilau {
  0%,
  58% {
    opacity: 0;
    translate: -140% 0;
  }

  70% {
    opacity: 0.85;
  }

  88%,
  100% {
    opacity: 0;
    translate: 380% 0;
  }
}

@keyframes menu-cus-pin {
  0%,
  58% {
    translate: 0 0;
  }

  70% {
    translate: 0 -4px;
  }

  82% {
    translate: 0 0;
  }

  90% {
    translate: 0 -1.5px;
  }

  100% {
    translate: 0 0;
  }
}

.menu-cus-pin {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 2px solid var(--charcoal-deck);
  border-radius: 50%;
  background: var(--permukaan);
  color: var(--tinta-terbalik);
}

.menu-cus-pin svg {
  display: block;
  width: 0.95rem;
  height: 1.4rem;
}

.menu-cus:active {
  translate: var(--gerak-tekan) var(--gerak-tekan);
  box-shadow: none;
}

.saklar-pelat {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 3.5rem;
  border: 2px solid var(--charcoal-deck);
  border-radius: var(--radius-6);
  background: var(--kertas);
  box-shadow: 3px 3px 0 var(--arang-a55);
}

.saklar-pelat i {
  position: relative;
  width: 0.85rem;
  height: 1.8rem;
  border-radius: var(--radius-sm);
  background: var(--permukaan-gelap);
}

.saklar-pelat i::after {
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  height: 55%;
  border-radius: var(--radius-sm);
  background: var(--terracotta);
  content: "";
  transition: top var(--gerak-cepat-ms) var(--gerak-ease);
}

html.menu-tenang .saklar-pelat i::after,
.menu-saklar:active .saklar-pelat i::after {
  top: 45%;
}

html.menu-tenang .menu-saklar:active .saklar-pelat i::after {
  top: 0;
}

@media (min-width: 48rem) {
  .menu-dinding {
    /* 55vw: tepi daun ±50%, kotak isi tetap muat papan satu baris. */
    padding: 8rem max(3rem, calc((100% - var(--lebar-halaman)) / 2 + var(--sp-32))) var(--sp-48) 55vw;
  }

  .lampu:nth-child(1) {
    left: 62%;
  }

  .lampu:nth-child(2) {
    left: 74%;
  }

  .lampu:nth-child(3) {
    left: 86%;
  }

  .menu-tutup {
    right: max(var(--sp-32), calc((100% - var(--lebar-halaman)) / 2 + var(--sp-32)));
  }

  .papan {
    font-size: clamp(1.65rem, 3.95vw, 2.9rem);
  }

  .menu-daftar {
    gap: var(--sp-22);
  }
}

/* Layar pendek (≤700px, termasuk browser dalam aplikasi 393×662): semua muat, CTA tetap di bawah. */
@media (max-height: 45rem) {
  html:not(:has(.sambutan)) .menu-dinding {
    padding-top: var(--sp-80);
    padding-bottom: var(--sp-14);
  }

  html:has(.sambutan) .menu-dinding {
    padding-top: 7.35rem;
    padding-bottom: var(--sp-14);
  }

  .menu-daftar {
    gap: var(--sp-12);
  }

  .papan {
    padding-block: var(--sp-4) var(--sp-4);
    font-size: clamp(1.28rem, 6.4vw, 1.85rem);
  }

  .menu-saklar {
    margin-top: var(--sp-10);
  }

  .menu-cus {
    min-height: 3.35rem;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-20);
  }
}

/* ?tenang=1: tanpa pintu dan tanpa ayunan, dinding muncul memudar di atas halaman */
html.menu-tenang .menu-dinding {
  z-index: 1003;
  opacity: 0;
  transition:
    opacity var(--gerak-cepat-ms) linear,
    visibility 0s linear var(--gerak-cepat-ms);
}

html.menu-tenang.menu-buka .menu-dinding {
  opacity: 1;
  transition-delay: 0s;
}

html.menu-tenang .menu-dinding *,
html.menu-tenang .menu-dinding::after,
html.menu-tenang .menu-cus::after {
  animation: none !important;
}

html.menu-tenang .menu-dinding::after {
  opacity: 0.16;
}

html.menu-tenang .lampu {
  translate: -50% 0;
}

html.menu-tenang .lampu-cahaya {
  opacity: 1;
}

html.menu-tenang .menu-daftar li {
  translate: none;
}

html.menu-tenang .menu-tombol span {
  transition: none;
}

.bar .menu-tombol {
  margin-left: 0;
}

/* body::after di denah.css = lapisan noise 5%; saat pintu terbuka lapisan itu jadi peredup daun pintu */
html.menu-pintu body::after {
  opacity: 1;
}

/* Pil navigasi bawah: aturan .floating-nav disalin dari /assets/genz.css. Denah selayar penuh, jadi .app
   berhenti di atas pil supaya pil tidak menutup peta, tombol kamera, maupun panel pilih kursi. */
.app {
  bottom: calc(88px + env(safe-area-inset-bottom));
  border-bottom: 2px solid var(--ink);
}

/* tablet: peta 62vh tetap (denah.css) membuat jalur pil memakan panel sampai filter terpotong di layar pendek;
   jalur pil diambil dari peta, tinggi panel kembali seperti sebelum ada pil */
@media (min-width: 768px) and (max-width: 1023px) {
  .peta {
    height: calc(62vh - 88px - env(safe-area-inset-bottom));
  }

  .panel {
    top: calc(var(--bar) + 62vh - 88px - env(safe-area-inset-bottom));
  }
}

@media print {
  .floating-nav {
    display: none;
  }
}

.floating-nav {
  position: fixed;
  z-index: 20;
  right: var(--sp-16);
  bottom: calc(var(--sp-16) + env(safe-area-inset-bottom));
  left: var(--sp-16);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
  gap: var(--sp-8);
  width: min(calc(100% - 2rem), 31rem);
  min-height: 60px;
  padding: var(--sp-6);
  margin-inline: auto;
  border: 2px solid var(--tinta);
  border-radius: var(--radius-pil);
  background: linear-gradient(105deg, var(--permukaan), var(--terracotta), var(--aksen));
  box-shadow: 5px 5px 0 var(--tinta);
  transition: transform var(--gerak-ms) var(--gerak-ease);
}

.floating-nav.nav-tersembunyi {
  transform: translateY(150%);
}

.floating-nav:has(> a:nth-child(4)) {
  grid-auto-columns: minmax(max-content, 1fr);
}

/* Lima tautan: min-width 64px + gap tidak muat di 375px. */
.floating-nav:has(> a:nth-child(5)) {
  gap: var(--sp-4);
}

.floating-nav:has(> a:nth-child(5)) a {
  min-width: 0;
  padding-inline: var(--sp-8);
}

.floating-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-pil);
  background: var(--tinta);
  color: var(--kertas);
  font-size: var(--fs-14);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.floating-nav a[aria-current="page"] {
  background: var(--kertas);
  color: var(--tinta);
}

@media (max-width: 24rem) {
  .floating-nav a {
    padding-inline: var(--sp-4);
    font-size: var(--fs-12);
  }

  .floating-nav:has(> a:nth-child(5)) a {
    padding-inline: var(--sp-4);
  }
}