* {
  box-sizing: border-box;
}

/* HERO MENU EMOJI - FINAL OVERRIDE */
#beranda .orbit .orbit-item .orbit-icon > .hero-menu-emoji {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 34px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
}

@media (max-width: 760px) {
  #beranda .orbit .orbit-item .orbit-icon > .hero-menu-emoji {
    font-size: clamp(23px, 6.5vw, 30px) !important;
  }
}

@media (min-width: 1024px) and (min-height: 650px) {
  #beranda .orbit .orbit-item .orbit-icon > .hero-menu-emoji {
    font-size: 27px !important;
  }
}

/* Lingkaran Belajar mengikuti efek hover lingkaran edukasi lainnya */
#edukasi .edu-center {
  transition: transform .35s ease, box-shadow .35s ease !important;
}

#edukasi .edu-center:hover {
  transform: translate(-50%, calc(-50% - 7px)) scale(1.08) !important;
  box-shadow: 0 24px 55px rgba(30,70,40,.25) !important;
}

/* Wisata Edukasi di HP: orbit ringkas tanpa lingkaran bertabrakan */
@media (max-width: 760px) {
  #edukasi .education-visual {
    --edu-mobile-orbit: clamp(104px, 33vw, 126px);
    width: min(100%, 340px) !important;
    height: 500px !important;
    min-height: 500px !important;
    aspect-ratio: auto !important;
    margin: 24px auto 28px !important;
  }

  #edukasi .edu-circle {
    width: 88px !important;
    height: 88px !important;
  }

  #edukasi .edu-center {
    width: 136px !important;
    height: 136px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #edukasi .circle-one {
    left: 50% !important;
    top: calc(50% - var(--edu-mobile-orbit)) !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  #edukasi .circle-two {
    left: calc(50% - var(--edu-mobile-orbit)) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  #edukasi .circle-three {
    right: auto !important;
    left: calc(50% + var(--edu-mobile-orbit)) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  #edukasi .circle-four {
    left: 50% !important;
    right: auto !important;
    top: calc(50% + var(--edu-mobile-orbit)) !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  #edukasi .edu-circle small {
    bottom: 7px !important;
    padding: 5px 9px !important;
    font-size: 9px !important;
  }

  #edukasi .edu-center:hover {
    transform: translate(-50%, calc(-50% - 5px)) scale(1.06) !important;
  }

  #edukasi .circle-one:hover,
  #edukasi .circle-four:hover {
    transform: translate(-50%, calc(-50% - 5px)) scale(1.06) !important;
  }

  #edukasi .circle-two:hover,
  #edukasi .circle-three:hover {
    transform: translate(-50%, calc(-50% - 5px)) scale(1.06) !important;
  }
}

@media (max-width: 340px) {
  #edukasi .edu-center {
    width: 120px !important;
    height: 120px !important;
  }
}

/* Galeri berjalan otomatis dan berhenti saat disorot */
#galeri .gallery-marquee {
  width: 100%;
  overflow: hidden;
  padding: 8px 0 22px;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

#galeri .gallery-track {
  display: flex !important;
  width: max-content !important;
  gap: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
  animation: galleryMoveLeft 42s linear infinite;
  will-change: transform;
}

#galeri .gallery-marquee-group {
  display: flex;
  flex-shrink: 0;
  gap: 22px;
  padding-right: 22px;
}

#galeri .gallery-marquee:hover .gallery-track,
#galeri .gallery-marquee:focus-within .gallery-track {
  animation-play-state: paused;
}

#galeri .gallery-card {
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  background-image:
    linear-gradient(180deg, transparent 35%, rgba(7,31,12,.88) 100%),
    var(--gallery-image) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  transition: transform .3s ease, box-shadow .3s ease;
}

#galeri .gallery-card:hover,
#galeri .gallery-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 28px 65px rgba(20,45,24,.28);
  outline: 3px solid rgba(190,218,94,.9);
  outline-offset: 3px;
}

@keyframes galleryMoveLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4,18,10,.88);
  backdrop-filter: blur(10px);
  animation: galleryFadeIn .22s ease both;
}

.gallery-lightbox-content {
  position: relative;
  width: min(1040px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background: #102619;
  box-shadow: 0 35px 100px rgba(0,0,0,.5);
}

.gallery-lightbox-content img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #0b1d12;
}

.gallery-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(7,35,20,.82);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.gallery-lightbox-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  color: #fff;
}

.gallery-lightbox-caption span {
  color: #cbe36c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.gallery-lightbox-caption strong {
  font-family: Georgia, serif;
  font-size: clamp(20px, 3vw, 30px);
}

@keyframes galleryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  #galeri .gallery-marquee {
    width: calc(100vw - 20px);
    margin-left: calc(50% - 50vw + 10px);
  }

  #galeri .gallery-marquee-group {
    gap: 14px;
    padding-right: 14px;
  }

  #galeri .gallery-card {
    flex-basis: min(78vw, 300px) !important;
    height: 410px !important;
  }

  .gallery-lightbox {
    padding: 12px;
  }

  .gallery-lightbox-content {
    width: 100%;
    border-width: 3px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #galeri .gallery-track {
    animation: none;
  }
}

/* Prioritas akhir untuk blok slogan dan CTA Hero */
#beranda .hero-title .hero-slogan {
  display: block !important;
  margin: 16px 0 0 !important;
  color: #b9d85b !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(20px, 1.7vw, 27px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: .015em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.82) !important;
}

#beranda .hero-title .hero-slogan-description {
  display: block !important;
  max-width: 350px !important;
  margin: 10px 0 0 !important;
  color: rgba(255,255,255,.94) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

#beranda .hero-title .hero-explore-button {
  pointer-events: auto !important;
  display: inline-flex !important;
}

#beranda .hero-title .hero-explore-button > span {
  display: inline !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  #beranda .hero-title .hero-slogan {
    margin-top: 8px !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  #beranda .hero-title .hero-slogan-description {
    display: none !important;
  }

  #beranda .hero-title .hero-explore-button {
    display: none !important;
  }
}

/* Kartu Wahana HP: foto bersih, seluruh informasi berada di bawah foto. */
@media (max-width: 760px) {
  #wahana .wahana-card {
    min-height: 0 !important;
    padding: 202px 17px 18px !important;
    justify-content: flex-start !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #39784a 0%, #195536 50%, #073522 100%) !important;
  }

  #wahana .wahana-card::before {
    inset: 0 0 auto !important;
    width: 100% !important;
    height: 184px !important;
    background-size: cover !important;
    background-position: center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
  }

  #wahana .wahana-card::after {
    content: none !important;
  }

  #wahana .wahana-card .wahana-card-heading {
    align-items: center !important;
    gap: 11px !important;
    margin: 0 0 10px !important;
  }

  #wahana .wahana-card .wahana-card-icon {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 24px !important;
  }

  #wahana .wahana-card .wahana-card-number {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }

  #wahana .wahana-card .wahana-card-title > span {
    font-size: 9px !important;
  }

  #wahana .wahana-card .wahana-card-title h3 {
    margin: 3px 0 0 !important;
    font-size: 22px !important;
  }

  #wahana .wahana-card .wahana-card-body p {
    margin: 0 0 13px !important;
  }
}

/* Proporsi ringkas blok tulisan Hero */
@media (min-width: 761px) {
  #beranda .hero-title > span {
    margin-bottom: 5px !important;
    font-size: clamp(17px, 1.55vw, 23px) !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(46px, 5.15vw, 76px) !important;
    line-height: .86 !important;
  }

  #beranda .hero-title .hero-slogan {
    margin-top: 11px !important;
    font-size: clamp(17px, 1.35vw, 22px) !important;
  }

  #beranda .hero-title .hero-slogan-description {
    max-width: 325px !important;
    margin-top: 7px !important;
    font-size: clamp(12px, .88vw, 14px) !important;
    line-height: 1.4 !important;
  }

  #beranda .hero-title .hero-explore-button {
    margin-top: 9px !important;
    padding: 9px 17px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  #beranda .hero-title > span {
    font-size: clamp(14px, 4.2vw, 18px) !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(29px, 8.8vw, 40px) !important;
  }

  #beranda .hero-title .hero-slogan {
    margin-top: 6px !important;
    font-size: clamp(14px, 4vw, 18px) !important;
  }
}

/* Konten slogan Hero — dapat diubah melalui CMS */
#beranda .hero-slogan {
  margin-top: 16px;
  color: #b9d85b;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(17px, 1.45vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .75);
}

#beranda .hero-slogan-description {
  max-width: 350px;
  margin: 10px 0 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

#beranda .hero-explore-button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 19px;
  border: 1px solid rgba(232,211,111,.58);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(105,151,48,.96), rgba(35,91,31,.96));
  box-shadow: 0 9px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

#beranda .hero-explore-button b {
  font-size: 22px;
  line-height: .7;
}

#beranda .hero-explore-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 30px rgba(0,0,0,.38), 0 0 18px rgba(190,216,91,.28);
}

@media (max-width: 760px) and (orientation: portrait) {
  #beranda .hero-slogan {
    margin-top: 8px;
    font-size: clamp(13px, 3.7vw, 16px);
  }

  #beranda .hero-slogan-description {
    display: none;
  }

  #beranda .hero-explore-button {
    gap: 7px;
    margin-top: 9px;
    padding: 7px 13px;
    font-size: 11px;
  }
}

/* Wahana: dasar dan lapisan hijau bergradasi */
#wahana .wahana-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(171,211,92,.28), transparent 34%),
    linear-gradient(145deg, #3f7d4f 0%, #1d5a3a 48%, #0b3825 100%) !important;
}

#wahana .wahana-card::after {
  background:
    radial-gradient(circle at 88% 84%, rgba(129,174,61,.24), transparent 34%),
    linear-gradient(
      to top,
      rgba(4,35,22,.98) 0%,
      rgba(10,63,38,.91) 25%,
      rgba(29,91,51,.58) 47%,
      rgba(24,73,43,.16) 67%,
      transparent 82%
    ) !important;
}

@media (max-width: 760px) {
  #wahana .wahana-card::after {
    background:
      radial-gradient(circle at 86% 88%, rgba(145,190,70,.25), transparent 36%),
      linear-gradient(
        to top,
        rgba(4,32,20,.99) 0%,
        rgba(9,60,36,.95) 30%,
        rgba(26,86,49,.70) 51%,
        rgba(19,64,38,.22) 69%,
        transparent 84%
      ) !important;
  }
}

/* WAHANA - HEADER IKON, NOMOR, DAN JUDUL */
.wahana-card .wahana-card-heading {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}

.wahana-card .wahana-card-icon {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  border-radius: 18px !important;
}

.wahana-card .wahana-card-title {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.wahana-card .wahana-card-number {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}

.wahana-card .wahana-card-title > span {
  color: #dce99e !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.wahana-card .wahana-card-title h3 {
  margin: 4px 0 0 !important;
  color: #fff !important;
  font-family: Georgia, serif !important;
  font-size: clamp(24px, 2.5vw, 34px) !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.55) !important;
}

.wahana-card .wahana-card-body {
  position: relative !important;
  z-index: 3 !important;
}

.wahana-card .wahana-card-body p {
  margin-top: 1px !important;
}

@media (max-width: 760px) {
  .wahana-card .wahana-card-heading {
    gap: 12px !important;
  }

  .wahana-card .wahana-card-icon {
    flex-basis: 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    font-size: 27px !important;
  }

  .wahana-card .wahana-card-title h3 {
    font-size: 25px !important;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f3f0e5;
  color: white;
  overflow-x: hidden;
}

.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 20, 7, .42),
      rgba(3, 20, 7, .08),
      rgba(3, 20, 7, .30)
    ),
    url("../../images/bg-ngrembel.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 45%,
      transparent 0 25%,
      rgba(0,0,0,.22) 80%
    );
}

header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.brand-name {
  font-family: Georgia, serif;
  font-size: clamp(25px, 3vw, 46px);
  letter-spacing: 2px;
  text-shadow: 0 3px 15px #000;
}

.brand-red {
  background: #e31b23;
  padding: 4px 13px;
  letter-spacing: 6px;
  font-size: 11px;
  font-weight: 800;
  margin-top: 4px;
}

.contact {
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(24,75,26,.72);
  backdrop-filter: blur(10px);
  color: white;
  border-radius: 30px;
  padding: 12px 20px;
}

.intro {
  position: absolute;
  z-index: 10;
  left: 5%;
  top: 31%;
  width: min(340px, 27vw);
}

.intro > span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 25px;
}

.intro h1 {
  margin: 8px 0;
  line-height: .87;
  font-size: clamp(42px, 5vw, 82px);
}

.intro h1 strong {
  display: block;
  color: #9ec451;
}

.intro p {
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}

.experience {
  position: absolute;
  z-index: 5;
  width: min(690px, 57vw);
  aspect-ratio: 1;
  left: 55%;
  top: 54%;
  transform: translate(-50%, -50%);
}

.orbit-ring {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(255,215,80,.45);
  border-radius: 50%;
  box-shadow:
    0 0 25px rgba(255,210,70,.22),
    inset 0 0 25px rgba(255,210,70,.12);
}

.orbit {
  position: absolute;
  inset: 0;
}

.orbit-item {
  position: absolute;
  width: 130px;
  text-decoration: none;
  color: white;
  text-align: center;
  z-index: 10;
}

.icon-circle {
  width: 76px;
  height: 76px;
  margin: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #365b1c;
  background: rgba(255,255,240,.95);
  border: 3px solid #e4d46a;
  box-shadow:
    0 0 15px #fff4a5,
    0 0 35px rgba(255,210,60,.8);
  transition: .3s;
}

.menu-name {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 13px;
  background: rgba(24,68,16,.9);
  border-radius: 20px;
  white-space: nowrap;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
}

.orbit-item:hover .icon-circle {
  transform: scale(1.15);
  box-shadow:
    0 0 20px white,
    0 0 55px #f6d84a;
}

.item-1 {
  top: 1%;
  left: 19%;
}

.item-2 {
  top: 1%;
  right: 13%;
}

.item-3 {
  top: 42%;
  left: -2%;
}

.item-4 {
  top: 42%;
  right: -2%;
}

.item-5 {
  bottom: 2%;
  left: 20%;
}

.item-6 {
  bottom: 2%;
  right: 13%;
}

.guide {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  height: 69%;
  width: 30%;
}

.guide-placeholder {
  height: 100%;
  border-radius: 100px 100px 30px 30px;
  border: 1px dashed rgba(255,255,255,.6);
  background:
    linear-gradient(
      rgba(84,108,49,.9),
      rgba(50,70,33,.95)
    );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 25px 50px rgba(0,0,0,.35);
}

.guide-placeholder span {
  font-weight: 900;
  letter-spacing: 4px;
}

.guide-placeholder small {
  opacity: .7;
  margin-top: 8px;
}

.bird {
  position: absolute;
  left: -10%;
  top: 18%;
  font-size: 45px;
  z-index: 4;
}

.animals {
  position: absolute;
  bottom: 5%;
  left: 3%;
  right: 3%;
  display: flex;
  justify-content: space-between;
  font-size: clamp(40px, 6vw, 85px);
  z-index: 3;
  pointer-events: none;
}

.scroll-hint {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.scroll-hint b {
  font-size: 28px;
  animation: down 1.4s infinite;
}

@keyframes down {
  50% {
    transform: translateY(7px);
  }
}

.content-section {
  min-height: 80vh;
  padding: 120px 10%;
  background: #f7f2e6;
  color: #19351a;
}

.content-section.alt {
  background: #e4ead7;
}

.content-section h2 {
  font-size: clamp(38px, 6vw, 75px);
  margin: 5px 0 20px;
}

.content-section p {
  max-width: 700px;
  line-height: 1.8;
}

.eyebrow {
  color: #78933e;
  font-weight: 900;
  letter-spacing: 4px;
}

@media (max-width: 760px) {
  header {
    padding: 15px;
  }

  .brand-name {
    font-size: 21px;
  }

  .brand-red {
    letter-spacing: 3px;
    font-size: 7px;
  }

  .contact {
    font-size: 11px;
    padding: 9px 12px;
  }

  .intro {
    top: 15%;
    left: 6%;
    width: 88%;
    text-align: center;
  }

  .intro > span {
    font-size: 18px;
  }

  .intro h1 {
    font-size: 43px;
  }

  .intro p {
    display: none;
  }

  .experience {
    width: 94vw;
    left: 50%;
    top: 62%;
  }

  .orbit-item {
    width: 92px;
  }

  .icon-circle {
    width: 57px;
    height: 57px;
  }

  .icon-circle svg {
    width: 26px;
  }

  .menu-name {
    font-size: 10px;
    padding: 5px 8px;
  }

  .guide {
    height: 58%;
    width: 28%;
    bottom: 14%;
  }

  .animals {
    bottom: 2%;
    font-size: 37px;
  }

  .scroll-hint {
    display: none;
  }
}


.brand-logo {
  display: block;
  width: min(390px, 34vw);
  height: auto;
  object-fit: contain;
}


/* TEMPORARY CLEAN HERO — menggunakan mockup sebagai visual utama */
.hero .intro,
.hero .experience,
.hero .bird,
.hero .animals,
.hero .scroll-hint {
  display: none !important;
}

.hero {
  min-height: 100svh;
  background-image: url("../../images/bg-ngrembel.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.hero .overlay {
  display: none !important;
}

.brand-logo {
  width: min(310px, 45vw) !important;
}

@media (max-width: 760px) {
  .hero {
    min-height: 100svh;
    background-size: cover !important;
    background-position: center center !important;
  }

  header {
    padding: 18px 4%;
  }

  .brand-logo {
    width: 210px !important;
  }

  .contact {
    font-size: 12px;
    padding: 10px 14px;
  }
}

/* TAMPILKAN MOCKUP HERO UTUH DI MOBILE */
@media (max-width: 760px) {
  .hero {
    min-height: auto !important;
    height: calc(100vw * 1024 / 1536) !important;
    background-size: 100% 100% !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .hero header {
    display: none !important;
  }
}


/* HERO MOBILE FINAL */
.hero {
  min-height: 100svh !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(
      180deg,
      rgba(5, 20, 8, .15),
      rgba(5, 20, 8, .35)
    ),
    url("../../images/bg-ngrembel.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.hero .overlay {
  display: block !important;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(4, 15, 6, .18) 0%,
      rgba(4, 15, 6, .05) 45%,
      rgba(4, 15, 6, .45) 100%
    );
  z-index: 1;
}

.site-header {
  display: flex !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  padding: 18px 4%;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  width: 210px !important;
  max-width: 48vw;
  height: auto;
}

.contact {
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(28, 91, 44, .82);
  backdrop-filter: blur(10px);
  color: white;
  border-radius: 30px;
  padding: 10px 15px;
  font-size: 12px;
}

.mobile-title {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
  z-index: 20;
  text-shadow: 0 3px 18px rgba(0,0,0,.5);
}

.mobile-title span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
}

.mobile-title h1 {
  margin: 4px 0 0;
  font-size: clamp(44px, 12vw, 72px);
  line-height: .86;
  letter-spacing: -2px;
}

.mobile-title strong {
  display: block;
  color: #a8cd48;
}

.hero-stage {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 59%;
  transform: translate(-50%, -50%);
  width: min(95vw, 520px);
  aspect-ratio: .78;
}

.guide-cutout {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 48%;
  height: 78%;
  background-image: url("../../images/guide-ngrembel.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: 0;
  filter: drop-shadow(0 18px 25px rgba(0,0,0,.38));
  z-index: 5;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,223,90,.75);
  box-shadow:
    0 0 18px rgba(255,220,90,.45),
    inset 0 0 16px rgba(255,220,90,.2);
  z-index: 2;
}

.orbit {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.orbit-item {
  position: absolute;
  width: 104px;
  text-decoration: none;
  color: white;
  text-align: center;
}

.icon-circle {
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,245,.96);
  color: #315f25;
  border: 3px solid #ead66e;
  box-shadow:
    0 0 15px rgba(255,255,210,.95),
    0 0 34px rgba(255,213,70,.8);
}

.menu-name {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 9px;
  background: rgba(21,79,27,.9);
  border-radius: 20px;
  white-space: nowrap;
  font-size: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.item-1 {
  top: 3%;
  left: 14%;
}

.item-2 {
  top: 3%;
  right: 14%;
}

.item-3 {
  top: 42%;
  left: -3%;
}

.item-4 {
  top: 42%;
  right: -3%;
}

.item-5 {
  bottom: 2%;
  left: 13%;
}

.item-6 {
  bottom: 2%;
  right: 13%;
}

.scroll-hint {
  display: flex !important;
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.scroll-hint b {
  font-size: 28px;
}

@media (min-width: 761px) {
  .mobile-title {
    left: 7%;
    top: 30%;
    transform: none;
    width: 320px;
    text-align: left;
  }

  .hero-stage {
    left: 59%;
    top: 53%;
    width: min(56vw, 760px);
  }

  .guide-cutout {
    width: 32%;
    height: 76%;
  }

  .orbit-item {
    width: 125px;
  }

  .icon-circle {
    width: 76px;
    height: 76px;
  }

  .menu-name {
    font-size: 13px;
  }

  .brand-logo {
    width: 310px !important;
  }
}


/* ASET HERO TERPISAH */
.hero {
  background-image:
    linear-gradient(
      180deg,
      rgba(4,20,7,.12),
      rgba(4,20,7,.18),
      rgba(3,15,5,.42)
    ),
    url("../../images/bg-ngrembel.webp") !important;
}

.guide-cutout {
  background-image: url("../../images/guide-ngrembel.webp") !important;
  background-size: contain !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
}

/* PENYEMPURNAAN HERO MOBILE */
@media (max-width: 760px) {

  .mobile-title {
    top: 14% !important;
    width: 94% !important;
  }

  .mobile-title span {
    font-size: 20px !important;
  }

  .mobile-title h1 {
    font-size: 48px !important;
    line-height: .88 !important;
  }

  .hero-stage {
    width: 88vw !important;
    max-width: 430px !important;
    top: 61% !important;
    aspect-ratio: .72 !important;
  }

  .guide-cutout {
    width: 43% !important;
    height: 72% !important;
    bottom: 7% !important;
  }

  .orbit-ring {
    inset: 10% 8% !important;
  }

  .orbit-item {
    width: 90px !important;
  }

  .icon-circle {
    width: 58px !important;
    height: 58px !important;
  }

  .icon-circle svg {
    width: 27px !important;
    height: 27px !important;
  }

  .menu-name {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  .item-1 {
    top: 7% !important;
    left: 7% !important;
  }

  .item-2 {
    top: 7% !important;
    right: 7% !important;
  }

  .item-3 {
    top: 43% !important;
    left: 0 !important;
  }

  .item-4 {
    top: 43% !important;
    right: 0 !important;
  }

  .item-5 {
    bottom: 5% !important;
    left: 8% !important;
  }

  .item-6 {
    bottom: 5% !important;
    right: 8% !important;
  }

  .scroll-hint {
    bottom: 7px !important;
  }
}

/* PENYEMPURNAAN HERO MOBILE */
@media (max-width: 760px) {

  .mobile-title {
    top: 14% !important;
    width: 94% !important;
  }

  .mobile-title span {
    font-size: 20px !important;
  }

  .mobile-title h1 {
    font-size: 48px !important;
    line-height: .88 !important;
  }

  .hero-stage {
    width: 88vw !important;
    max-width: 430px !important;
    top: 61% !important;
    aspect-ratio: .72 !important;
  }

  .guide-cutout {
    width: 43% !important;
    height: 72% !important;
    bottom: 7% !important;
  }

  .orbit-ring {
    inset: 10% 8% !important;
  }

  .orbit-item {
    width: 90px !important;
  }

  .icon-circle {
    width: 58px !important;
    height: 58px !important;
  }

  .icon-circle svg {
    width: 27px !important;
    height: 27px !important;
  }

  .menu-name {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  .item-1 {
    top: 7% !important;
    left: 7% !important;
  }

  .item-2 {
    top: 7% !important;
    right: 7% !important;
  }

  .item-3 {
    top: 43% !important;
    left: 0 !important;
  }

  .item-4 {
    top: 43% !important;
    right: 0 !important;
  }

  .item-5 {
    bottom: 5% !important;
    left: 8% !important;
  }

  .item-6 {
    bottom: 5% !important;
    right: 8% !important;
  }

  .scroll-hint {
    bottom: 7px !important;
  }
}

/* PENYEMPURNAAN HERO MOBILE */
@media (max-width: 760px) {

  .mobile-title {
    top: 14% !important;
    width: 94% !important;
  }

  .mobile-title span {
    font-size: 20px !important;
  }

  .mobile-title h1 {
    font-size: 48px !important;
    line-height: .88 !important;
  }

  .hero-stage {
    width: 88vw !important;
    max-width: 430px !important;
    top: 61% !important;
    aspect-ratio: .72 !important;
  }

  .guide-cutout {
    width: 43% !important;
    height: 72% !important;
    bottom: 7% !important;
  }

  .orbit-ring {
    inset: 10% 8% !important;
  }

  .orbit-item {
    width: 90px !important;
  }

  .icon-circle {
    width: 58px !important;
    height: 58px !important;
  }

  .icon-circle svg {
    width: 27px !important;
    height: 27px !important;
  }

  .menu-name {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  .item-1 {
    top: 7% !important;
    left: 7% !important;
  }

  .item-2 {
    top: 7% !important;
    right: 7% !important;
  }

  .item-3 {
    top: 43% !important;
    left: 0 !important;
  }

  .item-4 {
    top: 43% !important;
    right: 0 !important;
  }

  .item-5 {
    bottom: 5% !important;
    left: 8% !important;
  }

  .item-6 {
    bottom: 5% !important;
    right: 8% !important;
  }

  .scroll-hint {
    bottom: 7px !important;
  }
}

/* FINAL MOBILE ORBIT FIX */
@media (max-width: 760px) {

  .hero-stage {
    width: 76vw !important;
    max-width: 360px !important;
    height: 62vh !important;
    top: 64% !important;
  }

  .orbit-ring {
    inset: 7% 4% !important;
  }

  .guide-cutout {
    width: 48% !important;
    height: 70% !important;
    bottom: 5% !important;
  }

  .orbit-item {
    width: 76px !important;
  }

  .icon-circle {
    width: 54px !important;
    height: 54px !important;
  }

  .icon-circle svg {
    width: 25px !important;
    height: 25px !important;
  }

  .menu-name {
    font-size: 9px !important;
    white-space: nowrap !important;
    padding: 4px 7px !important;
  }

  .mobile-title {
    top: 13% !important;
    z-index: 20 !important;
  }

  .mobile-title h1 {
    font-size: 44px !important;
  }
}

/* MOBILE - ORBIT AMAN DI DALAM LAYAR */
@media (max-width: 760px) {
  .hero-stage {
    width: 82vw !important;
    max-width: 370px !important;
    height: 62vh !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .orbit-ring {
    left: 10% !important;
    right: 10% !important;
    top: 5% !important;
    bottom: 5% !important;
  }

  .orbit-item {
    width: 72px !important;
  }

  .icon-circle {
    width: 52px !important;
    height: 52px !important;
  }

  .menu-name {
    font-size: 9px !important;
    white-space: nowrap !important;
  }
}

/* === POSISI FINAL 6 MENU MOBILE === */
@media (max-width: 760px) {

  .hero-stage {
    width: 92vw !important;
    max-width: 390px !important;
    height: 62vh !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .orbit-ring {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  /* ATAS KIRI */
  .item-1 {
    left: 10% !important;
    top: 10% !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* ATAS KANAN */
  .item-2 {
    right: 10% !important;
    top: 10% !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* TENGAH KIRI */
  .item-3 {
    left: 3% !important;
    top: 44% !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* TENGAH KANAN */
  .item-4 {
    right: 3% !important;
    top: 44% !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* BAWAH KIRI */
  .item-5 {
    left: 12% !important;
    bottom: 3% !important;
    right: auto !important;
    top: auto !important;
  }

  /* BAWAH KANAN */
  .item-6 {
    right: 12% !important;
    bottom: 3% !important;
    left: auto !important;
    top: auto !important;
  }

  .orbit-item {
    width: 82px !important;
    transform: none;
  }

  .icon-circle {
    width: 55px !important;
    height: 55px !important;
    margin: auto !important;
  }

  .menu-name {
    font-size: 9px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* === LEBARKAN POSISI WAHANA & GALERI MOBILE === */
@media (max-width: 760px) {

  /* Wahana - tengah kiri */
  .item-3 {
    left: -2% !important;
    top: 44% !important;
    right: auto !important;
  }

  /* Galeri - tengah kanan */
  .item-4 {
    right: -2% !important;
    top: 44% !important;
    left: auto !important;
  }

}

/* GUIDE DIPERBESAR */
@media (max-width: 760px) {
  .guide-cutout {
    width: 54% !important;
    height: 78% !important;
    bottom: 3% !important;
    transform: translateX(-50%) scale(1.12) !important;
    transform-origin: bottom center !important;
  }
}


/* ===== WAHANA PREMIUM SECTION ===== */

.wahana-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(164, 197, 79, .22),
      transparent 32%
    ),
    linear-gradient(180deg, #f8f4e8 0%, #eef2df 100%);
  color: #18371f;
  padding: 105px 0 90px;
}

.wahana-wrap {
  width: min(1180px, 90%);
  margin: auto;
  position: relative;
  z-index: 2;
}

.wahana-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.wahana-bg-orb.orb-a {
  width: 440px;
  height: 440px;
  top: -170px;
  right: -180px;
  background: rgba(141, 178, 68, .13);
}

.wahana-bg-orb.orb-b {
  width: 330px;
  height: 330px;
  left: -170px;
  bottom: 80px;
  background: rgba(218, 190, 89, .12);
}

.wahana-heading {
  max-width: 750px;
  margin-bottom: 34px;
}

.wahana-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #799944;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 4px;
}

.wahana-kicker::before {
  content: "";
  width: 37px;
  height: 1px;
  background: #91aa55;
}

.wahana-heading h2 {
  margin: 13px 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(43px, 6vw, 82px);
  line-height: .95;
}

.wahana-heading h2 strong {
  color: #587a2d;
  font-weight: 700;
}

.wahana-heading p {
  margin: 20px 0 0;
  max-width: 620px;
  color: #59705d;
  line-height: 1.8;
  font-size: 16px;
}

.wahana-tabs {
  display: inline-flex;
  padding: 5px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(71, 105, 57, .12);
  border-radius: 40px;
  box-shadow: 0 12px 40px rgba(39, 71, 33, .08);
  margin-bottom: 34px;
}

.wahana-tab {
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: #35543a;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s ease;
}

.wahana-tab span {
  margin-right: 5px;
}

.wahana-tab.active {
  color: white;
  background: linear-gradient(135deg, #315e2b, #60833c);
  box-shadow: 0 8px 20px rgba(55, 93, 43, .24);
}

.wahana-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wahana-panel.active {
  display: grid;
}

.wahana-card {
  min-height: 310px;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  box-shadow: 0 20px 50px rgba(35, 65, 31, .13);
  border: 1px solid rgba(255,255,255,.75);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.wahana-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 65px rgba(35, 65, 31, .19);
}

.wahana-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform .5s ease;
}

.wahana-card.has-dynamic-image::before {
  background-image: var(--wahana-image) !important;
}

.wahana-card:hover::before {
  transform: scale(1.04);
}

.wahana-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 10%,
      rgba(10,39,16,.15) 45%,
      rgba(8,33,14,.90) 100%
    );
}

.card-pool::before {
  background:
    radial-gradient(circle at 70% 20%, rgba(115,213,230,.85), transparent 28%),
    linear-gradient(145deg, #499d91, #1d6b59);
}

.card-bucket::before {
  background:
    radial-gradient(circle at 80% 17%, rgba(191,232,255,.8), transparent 25%),
    linear-gradient(145deg, #2e9cc1, #246663);
}

.card-zoo::before {
  background:
    radial-gradient(circle at 75% 23%, rgba(214,185,100,.55), transparent 28%),
    linear-gradient(145deg, #78944c, #365d33);
}

.card-play::before {
  background:
    radial-gradient(circle at 78% 20%, rgba(245,200,90,.55), transparent 28%),
    linear-gradient(145deg, #77964b, #447137);
}

.card-boat::before {
  background:
    radial-gradient(circle at 75% 20%, rgba(126,218,220,.65), transparent 30%),
    linear-gradient(145deg, #348f8a, #285c64);
}

.card-paint::before {
  background:
    radial-gradient(circle at 78% 20%, rgba(202,177,87,.45), transparent 27%),
    linear-gradient(145deg, #616b42, #263c2e);
}

.card-atv::before {
  background:
    radial-gradient(circle at 75% 20%, rgba(208,166,96,.42), transparent 30%),
    linear-gradient(145deg, #7e6747, #314634);
}

.card-flying::before {
  background:
    radial-gradient(circle at 75% 20%, rgba(176,212,112,.45), transparent 30%),
    linear-gradient(145deg, #668744, #27492f);
}

.wahana-card-number {
  position: absolute;
  top: 23px;
  left: 24px;
  color: rgba(255,255,255,.72);
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 12px;
}

.wahana-card-icon {
  position: absolute;
  right: 24px;
  top: 20px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  font-size: 34px;
  border-radius: 21px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 9px 26px rgba(0,0,0,.14);
}

.wahana-card-content {
  position: relative;
  color: white;
}

.wahana-card-content > span {
  display: inline-block;
  margin-bottom: 7px;
  color: #d9eca8;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 9px;
  font-weight: 900;
}

.wahana-card-content h3 {
  margin: 0 0 9px;
  font-size: clamp(26px, 3vw, 39px);
  font-family: Georgia, serif;
}

.wahana-card-content p {
  color: rgba(255,255,255,.80);
  line-height: 1.55;
  max-width: 500px;
  font-size: 13px;
  margin: 0 0 18px;
}

.wahana-card-content button {
  background: transparent;
  border: 0;
  color: white;
  padding: 0;
  font-weight: 700;
  cursor: pointer;
}

.wahana-card-content button b {
  display: inline-block;
  margin-left: 7px;
  transition: transform .25s ease;
}

.wahana-card:hover button b {
  transform: translateX(5px);
}

.wahana-bottom {
  margin-top: 38px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(51, 85, 47, .16);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wahana-bottom div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wahana-bottom small {
  color: #789448;
  letter-spacing: 3px;
  font-weight: 800;
}

.wahana-bottom strong {
  font-family: Georgia, serif;
  font-size: 20px;
}

.wahana-bottom a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  background: #315d31;
  padding: 13px 19px;
  border-radius: 30px;
  font-weight: 700;
}

.wahana-bottom a span {
  font-size: 20px;
}

@media (max-width: 760px) {

  .wahana-section {
    padding: 78px 0 65px;
  }

  .wahana-wrap {
    width: 88%;
  }

  .wahana-heading {
    margin-bottom: 25px;
  }

  .wahana-heading h2 {
    font-size: 46px;
  }

  .wahana-heading p {
    font-size: 14px;
    line-height: 1.7;
  }

  .wahana-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .wahana-tab {
    padding: 12px 7px;
    font-size: 11px;
  }

  .wahana-panel,
  .wahana-panel.active {
    grid-template-columns: 1fr;
  }

  .wahana-card {
    min-height: 300px;
    border-radius: 24px;
  }

  .wahana-card-icon {
    width: 58px;
    height: 58px;
    font-size: 29px;
  }

  .wahana-card-content h3 {
    font-size: 31px;
  }

  .wahana-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
}


/* ===== ALL FINAL SECTIONS ===== */

.section-shell {
  width: min(1180px, 90%);
  margin: auto;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #789747;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 4px;
}

.section-kicker::before {
  content: "";
  width: 35px;
  height: 1px;
  background: currentColor;
}

.section-kicker.light {
  color: #d6e8a5;
}

/* =========================
   MENU MASAKAN
========================= */

.food-section {
  padding: 105px 0;
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(210, 180, 93, .17),
      transparent 28%
    ),
    #fffaf0;
  color: #1d3921;
}

.food-head {
  max-width: 720px;
  margin-bottom: 42px;
}

.food-head h2 {
  margin: 12px 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .95;
  font-weight: 400;
}

.food-head h2 strong {
  color: #6c833d;
}

.food-head p {
  max-width: 610px;
  color: #607064;
  line-height: 1.8;
}

.food-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}

.food-card {
  position: relative;
  min-height: 285px;
  border-radius: 27px;
  padding: 28px;
  overflow: hidden;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 222, 121, .25),
      transparent 25%
    ),
    linear-gradient(145deg, #6d7d3d, #263c25);
  box-shadow: 0 20px 50px rgba(54, 70, 35, .13);
}

.food-card:nth-child(3) {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(185, 239, 204, .25),
      transparent 28%
    ),
    linear-gradient(145deg, #517b55, #1f4b3d);
}

.food-card:nth-child(4) {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(247, 199, 104, .25),
      transparent 28%
    ),
    linear-gradient(145deg, #8b6639, #463522);
}

.food-main {
  grid-row: span 2;
  min-height: 590px;
  background:
    radial-gradient(
      circle at 72% 25%,
      rgba(235, 194, 102, .30),
      transparent 28%
    ),
    linear-gradient(145deg, #77854b, #263924);
}

.food-emoji {
  position: absolute;
  right: 25px;
  top: 24px;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 38px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.food-card > span {
  color: #e3efa8;
  letter-spacing: 2px;
  font-weight: 900;
  font-size: 9px;
}

.food-card h3 {
  font-family: Georgia, serif;
  font-size: clamp(27px, 4vw, 42px);
  margin: 7px 0 10px;
}

.food-card p {
  max-width: 500px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.food-card button {
  border: 0;
  background: transparent;
  color: white;
  padding: 0;
  margin-top: 10px;
  text-align: left;
  font-weight: 800;
}

/* =========================
   EDUKASI
========================= */

.education-section {
  min-height: 90vh;
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  color: white;
  background:
    linear-gradient(
      110deg,
      rgba(17,58,26,.98),
      rgba(38,83,40,.91)
    ),
    url("../../images/bg-ngrembel.webp");
  background-size: cover;
  background-position: center;
}

.education-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 76% 50%,
      rgba(184,214,99,.18),
      transparent 35%
    );
}

.education-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px;
}

.education-copy h2 {
  margin: 13px 0 20px;
  font-family: Georgia, serif;
  font-size: clamp(47px, 7vw, 84px);
  line-height: .95;
  font-weight: 400;
}

.education-copy h2 strong {
  color: #b4d265;
}

.education-copy > p {
  color: rgba(255,255,255,.78);
  max-width: 570px;
  line-height: 1.8;
}

.education-points {
  margin-top: 35px;
  display: grid;
  gap: 14px;
}

.education-points > div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px;
  border-radius: 19px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.education-points b {
  font-size: 29px;
}

.education-points span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

.education-points strong {
  color: white;
  font-size: 15px;
}

.education-visual {
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  border: 0;
}

.edu-center {
  position: absolute;
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(248,249,222,.95);
  color: #315526;
  box-shadow: 0 0 50px rgba(218,212,97,.38);
}

.edu-center span {
  font-size: 48px;
}

.edu-center strong {
  font-family: Georgia, serif;
  font-size: 25px;
}

.edu-center small {
  opacity: .7;
}

.edu-circle {
  position: absolute;
  width: 105px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: rgba(255,255,245,.95);
  color: #315526;
  box-shadow: 0 0 35px rgba(231,216,92,.36);
}

.edu-circle span {
  font-size: 34px;
}

.edu-circle small {
  font-size: 10px;
}

.circle-one {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.circle-two {
  left: 1%;
  bottom: 18%;
}

.circle-three {
  right: 1%;
  bottom: 18%;
}

/* =========================
   GALERI
========================= */

.gallery-section {
  padding: 110px 0;
  overflow: hidden;
  background: #f1eee2;
  color: #17351d;
}

.gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 40px;
}

.gallery-heading h2 {
  margin: 13px 0 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 80px);
  line-height: .95;
}

.gallery-heading h2 strong {
  color: #718944;
}

.gallery-heading > p {
  width: 360px;
  max-width: 100%;
  color: #677368;
  line-height: 1.7;
}

.gallery-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-card {
  flex: 0 0 min(390px, 80vw);
  height: 490px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  color: white;
  box-shadow: 0 20px 50px rgba(33,54,29,.14);
}

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(7,31,12,.86) 100%
    );
}

.gallery-card > div {
  position: relative;
  z-index: 2;
}

.gallery-icon {
  position: absolute !important;
  right: 23px;
  top: 22px;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 35px;
  background: rgba(255,255,255,.92);
}

.gallery-card span {
  color: #dceca9;
  letter-spacing: 3px;
  font-size: 9px;
  font-weight: 900;
}

.gallery-card h3 {
  font-family: Georgia, serif;
  margin: 7px 0 0;
  font-size: 34px;
}

.gallery-nature {
  background: linear-gradient(135deg, #6d9449, #1d5032);
}

.gallery-water {
  background: linear-gradient(135deg, #3b9da2, #234b4a);
}

.gallery-animal {
  background: linear-gradient(135deg, #9a824c, #3a5533);
}

.gallery-food {
  background: linear-gradient(135deg, #926641, #4b3723);
}

.gallery-family {
  background: linear-gradient(135deg, #78904c, #304833);
}

.gallery-tip {
  margin-top: 15px;
  color: #788079;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
}

/* =========================
   ABOUT
========================= */

.about-section {
  padding: 115px 0;
  background: #f9f5e9;
  color: #1c3820;
}

.about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 75px;
  align-items: center;
}

.about-frame {
  min-height: 580px;
  border-radius: 200px 200px 35px 35px;
  padding: 45px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(17,64,29,.26),
      rgba(10,49,22,.94)
    ),
    url("../../images/bg-ngrembel.webp");
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 70px rgba(42,65,34,.18);
}

.about-leaf {
  position: absolute;
  right: 35px;
  top: 30px;
  font-size: 55px;
}

.about-logo-text {
  position: absolute;
  left: 35px;
  bottom: 35px;
  display: flex;
  flex-direction: column;
}

.about-logo-text strong {
  color: white;
  font-family: Georgia, serif;
  font-size: 32px;
}

.about-logo-text small {
  color: #f6d34f;
  letter-spacing: 4px;
  font-size: 8px;
}

.about-badge {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,240,.93);
  color: #31572a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 45px rgba(238,215,99,.38);
}

.about-badge b {
  font-size: 38px;
}

.about-badge span {
  font-size: 22px;
}

.about-badge small {
  font-size: 7px;
  letter-spacing: 2px;
}

.about-copy h2 {
  margin: 13px 0 25px;
  font-family: Georgia, serif;
  font-size: clamp(43px, 6vw, 72px);
  font-weight: 400;
  line-height: .98;
}

.about-copy h2 strong {
  display: block;
  color: #708842;
}

.about-copy > p {
  color: #637166;
  line-height: 1.8;
  max-width: 620px;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-top: 32px;
}

.about-values > div {
  padding: 17px;
  background: white;
  border-radius: 19px;
  box-shadow: 0 12px 35px rgba(43,66,34,.07);
}

.about-values b {
  font-size: 26px;
}

.about-values span {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  color: #7a837b;
  font-size: 10px;
}

.about-values strong {
  color: #294a2e;
  font-size: 13px;
}

/* =========================
   CTA
========================= */

.final-cta {
  min-height: 75vh;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  background:
    url("../../images/bg-ngrembel.webp") center / cover no-repeat;
}

.final-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,37,15,.73);
}

.final-cta-content {
  width: min(800px, 88%);
  position: relative;
  z-index: 2;
}

.final-cta-content > span {
  letter-spacing: 4px;
  color: #d6e89b;
  font-size: 10px;
  font-weight: 900;
}

.final-cta h2 {
  margin: 15px 0 22px;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(45px, 7vw, 86px);
  line-height: .95;
}

.final-cta h2 strong {
  display: block;
  color: #bdd867;
}

.final-cta p {
  max-width: 580px;
  margin: auto;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.final-buttons {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.final-buttons a {
  text-decoration: none;
  color: #28522e;
  background: white;
  padding: 14px 21px;
  border-radius: 30px;
  font-weight: 800;
}

.final-buttons .wa-button {
  background: #3c743a;
  color: white;
}

/* =========================
   FOOTER
========================= */

.site-footer {
  background: #102b18;
  color: white;
  padding: 70px 6% 24px;
}

.footer-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
}

.footer-brand img {
  width: min(320px, 100%);
}

.footer-brand p {
  max-width: 410px;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links strong {
  color: #c4dc7d;
  margin-bottom: 7px;
}

.footer-links a {
  text-decoration: none;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

.footer-bottom {
  margin-top: 55px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.45);
  font-size: 11px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 760px) {

  .section-shell {
    width: 88%;
  }

  .food-section,
  .gallery-section,
  .about-section,
  .education-section {
    padding: 78px 0;
  }

  .food-head h2,
  .gallery-heading h2,
  .about-copy h2,
  .education-copy h2 {
    font-size: 45px;
  }

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

  .food-main {
    min-height: 360px;
    grid-row: auto;
  }

  .food-card {
    min-height: 285px;
  }

  .education-wrap {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .education-visual {
    width: 90%;
  }

  .edu-center {
    width: 145px;
  }

  .edu-circle {
    width: 85px;
  }

  .gallery-heading {
    display: block;
  }

  .gallery-heading > p {
    width: auto;
    margin-top: 20px;
  }

  .gallery-card {
    height: 430px;
    flex-basis: 82vw;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .about-frame {
    min-height: 470px;
  }

  .about-values {
    grid-template-columns: 1fr;
  }

  .final-cta {
    min-height: 75vh;
  }

  .final-buttons {
    flex-direction: column;
  }

  .final-buttons a {
    width: 100%;
  }

  .footer-wrap {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 7px;
  }
}

/* GUIDE DESKTOP DIPERBESAR */
@media (min-width: 761px) {
  .guide-cutout {
    width: 39% !important;
    height: 82% !important;
    bottom: 2% !important;
    transform: translateX(-50%) scale(1.16) !important;
    transform-origin: bottom center !important;
  }
}

/* GUIDE DESKTOP - UKURAN FINAL LEBIH BESAR */
@media (min-width: 761px) {
  .guide-cutout {
    width: 43% !important;
    height: 88% !important;
    bottom: 0% !important;
    transform: translateX(-50%) scale(1.22) !important;
    transform-origin: bottom center !important;
  }
}
/* ===== FOTO ASLI NGREMBEL ASRI AUTO ===== */

.card-pool::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/kolam-renang.jpg") center / cover no-repeat !important;
}


.card-bucket::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/ember-tumpah.jpg") center / cover no-repeat !important;
}


.card-zoo::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/kampung-satwa.jpg") center / cover no-repeat !important;
}


.card-play::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/omah-playon.jpg") center / cover no-repeat !important;
}


.card-boat::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/mini-boat.jpg") center / cover no-repeat !important;
}


.card-paint::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/paintball.jpg") center / cover no-repeat !important;
}


.card-atv::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/atv.jpg") center / cover no-repeat !important;
}


.card-flying::before {
  background:
    linear-gradient(
      180deg,
      rgba(7,30,12,.02) 5%,
      rgba(8,35,15,.20) 48%,
      rgba(5,28,12,.92) 100%
    ),
    url("../../images/content/flying-fox.jpg") center / cover no-repeat !important;
}


.food-card:nth-child(1) {
  background:
    linear-gradient(
      180deg,
      rgba(20,35,18,.05),
      rgba(17,38,19,.88)
    ),
    url("../../images/content/bakar-klasik.jpg") center / cover no-repeat !important;
}


.food-card:nth-child(2) {
  background:
    linear-gradient(
      180deg,
      rgba(20,35,18,.05),
      rgba(17,38,19,.88)
    ),
    url("../../images/content/lombok-ijo.jpg") center / cover no-repeat !important;
}


.food-card:nth-child(3) {
  background:
    linear-gradient(
      180deg,
      rgba(20,35,18,.05),
      rgba(17,38,19,.88)
    ),
    url("../../images/content/minuman.jpg") center / cover no-repeat !important;
}


.food-card:nth-child(4) {
  background:
    linear-gradient(
      180deg,
      rgba(20,35,18,.05),
      rgba(17,38,19,.88)
    ),
    url("../../images/content/bakar-pedas.jpg") center / cover no-repeat !important;
}


.education-section {
  background:
    linear-gradient(
      110deg,
      rgba(14,55,24,.94),
      rgba(27,69,32,.78)
    ),
    url("../../images/content/fieldtrip.webp") center / cover no-repeat !important;
}


.about-frame {
  background:
    linear-gradient(
      180deg,
      rgba(17,64,29,.12),
      rgba(10,49,22,.88)
    ),
    url("../../images/content/peta.jpg") center / cover no-repeat !important;
}


.gallery-nature {
  background:
    linear-gradient(
      180deg,
      rgba(10,25,12,.02) 30%,
      rgba(8,30,13,.86) 100%
    ),
    url("../../images/content/bird-aviary.jpg") center / cover no-repeat !important;
}


.gallery-water {
  background:
    linear-gradient(
      180deg,
      rgba(10,25,12,.02) 30%,
      rgba(8,30,13,.86) 100%
    ),
    url("../../images/content/kolam-renang.jpg") center / cover no-repeat !important;
}


.gallery-animal {
  background:
    linear-gradient(
      180deg,
      rgba(10,25,12,.02) 30%,
      rgba(8,30,13,.86) 100%
    ),
    url("../../images/content/kura-kura.jpg") center / cover no-repeat !important;
}


.gallery-food {
  background:
    linear-gradient(
      180deg,
      rgba(10,25,12,.02) 30%,
      rgba(8,30,13,.86) 100%
    ),
    url("../../images/content/bakar-original.jpg") center / cover no-repeat !important;
}


.gallery-family {
  background:
    linear-gradient(
      180deg,
      rgba(10,25,12,.02) 30%,
      rgba(8,30,13,.86) 100%
    ),
    url("../../images/content/fieldtrip.webp") center / cover no-repeat !important;
}



/* Tampilan foto kartu lebih premium */
.wahana-card::before {
  background-position: center !important;
}

.wahana-card {
  min-height: 360px;
}

.wahana-card-icon {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
}

.gallery-card {
  background-position: center !important;
  background-size: cover !important;
}

.food-card {
  background-position: center !important;
  background-size: cover !important;
}

/* desktop */
@media (min-width: 761px) {
  .wahana-card {
    min-height: 410px;
  }

  .food-main {
    min-height: 620px;
  }

  .gallery-card {
    height: 520px;
  }
}

/* mobile */
@media (max-width: 760px) {
  .wahana-card {
    min-height: 360px;
  }

  .gallery-card {
    height: 440px;
  }

  .food-card {
    min-height: 330px;
  }

  .food-main {
    min-height: 390px;
  }
}

/* =====================================================
   NGREMBEL ASRI — WAHANA PHOTO CROP V2
   Fokus pada FOTO bagian atas brosur
   ===================================================== */

.wahana-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #173f22;
}

/* Foto brosur */
.wahana-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;

  transform: scale(1.02);
  transform-origin: center top;
}

/* Overlay supaya teks website tetap terbaca */
.wahana-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      to bottom,
      rgba(3, 28, 12, 0.02) 0%,
      rgba(3, 28, 12, 0.02) 31%,
      rgba(3, 28, 12, 0.28) 43%,
      rgba(3, 28, 12, 0.82) 66%,
      rgba(3, 28, 12, 0.97) 100%
    );
}

/* Konten kartu berada di depan foto */
.wahana-card > * {
  position: relative;
  z-index: 2;
}

/* Icon */
.wahana-card-icon {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 760px) {

  .wahana-card {
    min-height: 520px !important;
    border-radius: 28px !important;
  }

  /*
   Brosur portrait:
   diperbesar sehingga bagian foto atas memenuhi
   visual kartu dan bagian bawah brosur terdorong keluar.
  */
  .wahana-card::before {
    background-size: 145% auto !important;
    background-position: center top !important;
  }

  .wahana-card::after {
    background:
      linear-gradient(
        to bottom,
        rgba(2,25,10,.00) 0%,
        rgba(2,25,10,.02) 28%,
        rgba(2,25,10,.18) 39%,
        rgba(2,25,10,.72) 57%,
        rgba(2,25,10,.94) 72%,
        rgba(2,25,10,.99) 100%
      ) !important;
  }

  /* Mini Boat */
  .card-boat::before {
    background-size: 150% auto !important;
    background-position: center top !important;
  }

  /* Flying Fox */
  .card-flying::before {
    background-size: 150% auto !important;
    background-position: center top !important;
  }

  /* Paintball */
  .card-paint::before {
    background-size: 150% auto !important;
    background-position: center top !important;
  }

  /* Kolam */
  .card-pool::before,
  .card-bucket::before {
    background-size: 148% auto !important;
    background-position: center top !important;
  }

  /* Satwa */
  .card-zoo::before {
    background-size: 148% auto !important;
    background-position: center top !important;
  }

  /* Omah Playon */
  .card-play::before {
    background-size: 148% auto !important;
    background-position: center top !important;
  }

  /* ATV */
  .card-atv::before {
    background-size: 148% auto !important;
    background-position: center top !important;
  }
}

/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 761px) {

  .wahana-card {
    min-height: 500px !important;
  }

  .wahana-card::before {
    background-size: 125% auto !important;
    background-position: center top !important;
    transition:
      transform .8s cubic-bezier(.2,.7,.2,1),
      filter .8s ease;
  }

  .wahana-card:hover::before {
    transform: scale(1.10);
    filter: saturate(1.08);
  }

  .wahana-card:hover {
    transform: translateY(-6px);
  }
}


/* FINAL CROP MINI BOAT - hilangkan judul brosur bagian atas */
@media (max-width: 760px) {
  .card-boat::before {
    background-size: 165% auto !important;
    background-position: center -45px !important;
  }
}

/* FINAL CROP PAINTBALL */
@media (max-width: 760px) {
  .card-paintball::before {
    background-size: 165% auto !important;
    background-position: center -48px !important;
  }
}

/* =====================================================
   FINAL CROP - SEMUA KARTU WAHANA GRATIS
   Fokus hanya pada FOTO UTAMA brosur
===================================================== */

@media (max-width: 760px) {

  /* Kolam Renang Anak */
  .card-kolam::before,
  .card-kolam-renang::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Kolam Ember Tumpah */
  .card-ember::before,
  .card-ember-tumpah::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Kolam Djeguria */
  .card-djeguria::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Omah Kayu */
  .card-omah-kayu::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Omah Playon */
  .card-omah-playon::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Bird Aviary */
  .card-bird::before,
  .card-bird-aviary::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Kampung Satwa */
  .card-satwa::before,
  .card-kampung-satwa::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }

  /* Kura-kura Raksasa */
  .card-kura::before,
  .card-kura-raksasa::before {
    background-size: 170% auto !important;
    background-position: center -72px !important;
  }
}

/* =====================================================
   FINAL FIX WAHANA GRATIS - CLASS ASLI PROJECT
   Hilangkan tulisan WAHANA GRATIS dari bagian atas poster
===================================================== */

@media (max-width: 760px) {

  /* Kolam Renang Anak */
  .card-pool::before {
    background-size: 170% auto !important;
    background-position: center -165px !important;
  }

  /* Ember Tumpah */
  .card-bucket::before {
    background-size: 170% auto !important;
    background-position: center -165px !important;
  }

  /* Kampung Satwa */
  .card-zoo::before {
    background-size: 170% auto !important;
    background-position: center -165px !important;
  }

  /* Omah Playon */
  .card-play::before {
    background-size: 170% auto !important;
    background-position: center -165px !important;
  }
}

/* Desktop juga dibuat bersih */
@media (min-width: 761px) {

  .card-pool::before,
  .card-bucket::before,
  .card-zoo::before,
  .card-play::before {
    background-size: 145% auto !important;
    background-position: center -135px !important;
  }
}


/* KOLAM RENANG - fokus penuh ke area foto */
@media (max-width: 760px) {
  .card-pool::before {
    background-size: 210% auto !important;
    background-position: center -175px !important;
  }
}

/* =====================================================
   FINAL WAHANA CARD DESIGN
   FOTO HANYA DI BAGIAN ATAS
   KONTEN BERSIH DI BAGIAN BAWAH
===================================================== */

@media (max-width: 760px) {

  .wahana-card {
    min-height: 540px !important;
    background:
      linear-gradient(
        180deg,
        #174526 0%,
        #082c17 100%
      ) !important;
  }

  /* Area foto */
  .wahana-card::before {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    height: 55% !important;

    background-repeat: no-repeat !important;
    background-size: 155% auto !important;
    background-position: center -85px !important;

    transform: none !important;
    border-radius: 28px 28px 0 0;
  }

  /* Gradient transisi foto -> konten */
  .wahana-card::after {
    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 37%,
        rgba(7,38,19,.15) 45%,
        rgba(7,38,19,.82) 53%,
        rgba(5,32,16,.98) 64%,
        rgba(5,32,16,1) 100%
      ) !important;
  }

  /* Konten ditaruh di bagian bawah */
  .wahana-card-content {
    margin-top: auto !important;
    padding-top: 210px !important;
  }

  .wahana-card-number {
    top: 275px !important;
  }

  .wahana-card-icon {
    top: 292px !important;
  }

  /* -----------------------------
     GRATIS
  ----------------------------- */

  .card-pool::before {
    background-size: 205% auto !important;
    background-position: center -175px !important;
  }

  .card-bucket::before {
    background-size: 195% auto !important;
    background-position: center -165px !important;
  }

  .card-zoo::before {
    background-size: 190% auto !important;
    background-position: center -160px !important;
  }

  .card-play::before {
    background-size: 190% auto !important;
    background-position: center -160px !important;
  }

  /* -----------------------------
     BERBAYAR
  ----------------------------- */

  .card-boat::before {
    background-size: 165% auto !important;
    background-position: center -45px !important;
  }

  .card-paint::before {
    background-size: 170% auto !important;
    background-position: center -75px !important;
  }

  .card-atv::before {
    background-size: 170% auto !important;
    background-position: center -75px !important;
  }

  .card-flying::before {
    background-size: 170% auto !important;
    background-position: center -75px !important;
  }
}

/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 761px) {

  .wahana-card {
    min-height: 500px !important;
    background: #082d17 !important;
  }

  .wahana-card::before {
    top: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 62% !important;

    background-repeat: no-repeat !important;
    background-size: 145% auto !important;
    background-position: center -90px !important;

    border-radius: 28px 28px 0 0;
  }

  .wahana-card::after {
    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 38%,
        rgba(5,32,16,.15) 48%,
        rgba(5,32,16,.88) 65%,
        rgba(5,32,16,1) 100%
      ) !important;
  }
}


/* =====================================================
   FIX FINAL POSISI ICON + TEXT WAHANA MOBILE
   GAMBAR TIDAK DIURUS DULU
===================================================== */

@media (max-width: 760px) {

  .wahana-card {
    position: relative !important;
    min-height: 540px !important;
    padding: 0 28px 30px !important;
    overflow: hidden !important;
  }

  /* nomor kembali ke bagian foto */
  .wahana-card-number {
    top: 22px !important;
    left: 24px !important;
    right: auto !important;
    bottom: auto !important;

    font-size: 13px !important;
    color: white !important;
    z-index: 10 !important;

    text-shadow: 0 2px 8px rgba(0,0,0,.55);
  }

  /* icon pindah ke pojok kanan atas */
  .wahana-card-icon {
    top: 22px !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;

    width: 62px !important;
    height: 62px !important;

    border-radius: 19px !important;

    display: grid !important;
    place-items: center !important;

    font-size: 30px !important;

    background: rgba(255,255,255,.94) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,.18) !important;

    z-index: 10 !important;
  }

  /* area tulisan dibuat bersih */
  .wahana-card-content {
    position: relative !important;
    z-index: 5 !important;

    margin: 0 !important;
    padding: 315px 18px 0 !important;

    width: 100% !important;
  }

  .wahana-card-content > span {
    display: block !important;

    margin: 0 0 10px !important;

    font-size: 10px !important;
    letter-spacing: 3px !important;
    line-height: 1.4 !important;

    color: #dcec9e !important;
  }

  .wahana-card-content h3 {
    margin: 0 0 15px !important;

    font-size: 38px !important;
    line-height: 1.02 !important;

    color: white !important;
  }

  .wahana-card-content p {
    margin: 0 0 24px !important;

    font-size: 15px !important;
    line-height: 1.65 !important;

    color: rgba(255,255,255,.78) !important;
  }

  .wahana-card-content button {
    margin-top: 0 !important;

    font-size: 15px !important;
    color: white !important;
  }
}


/* =====================================================
   MENU MASAKAN - FINAL LAYOUT POLISH
===================================================== */

.food-section {
  position: relative;
  overflow: hidden;
}

.food-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(208, 176, 85, .14),
      transparent 26%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(92, 125, 62, .10),
      transparent 28%
    );
}

.food-section .section-shell {
  position: relative;
  z-index: 2;
}

/* heading */
.food-head {
  max-width: 760px !important;
}

.food-head h2 {
  letter-spacing: -2px;
}

.food-head p {
  max-width: 640px !important;
}

/* category pills */
.food-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 34px;
}

.food-category {
  border: 1px solid rgba(70, 98, 48, .12);
  background: rgba(255,255,255,.75);
  color: #315330;
  border-radius: 999px;
  padding: 11px 17px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(47, 69, 35, .06);
}

.food-category.active {
  background: linear-gradient(135deg, #315e2f, #6c8740);
  color: white;
  border-color: transparent;
}

/* cards */
.food-grid {
  align-items: stretch;
}

.food-card {
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.72);
}

.food-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(7, 24, 11, .00) 12%,
      rgba(7, 24, 11, .18) 44%,
      rgba(7, 24, 11, .88) 100%
    );
}

.food-card > * {
  position: relative;
  z-index: 2;
}

.food-card h3 {
  max-width: 85%;
}

.food-card p {
  max-width: 90%;
}

.food-card button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
}

/* chips */
.food-card .food-chip {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.14);
  color: #f2f7dd;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 900;
}

/* menu highlight bar */
.food-highlight {
  margin-top: 28px;
  padding: 19px 22px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 14px 35px rgba(46, 65, 34, .08);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.food-highlight div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.food-highlight small {
  color: #819058;
  letter-spacing: 2px;
  font-weight: 800;
}

.food-highlight strong {
  color: #29492d;
  font-family: Georgia, serif;
  font-size: 19px;
}

.food-highlight a {
  text-decoration: none;
  color: white;
  background: #315d31;
  padding: 12px 17px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

/* MOBILE */
@media (max-width: 760px) {

  .food-section {
    padding: 82px 0 !important;
  }

  .food-head h2 {
    font-size: 46px !important;
    line-height: .96 !important;
  }

  .food-head p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .food-categories {
    gap: 8px;
    margin-top: 24px;
  }

  .food-category {
    padding: 10px 13px;
    font-size: 11px;
  }

  .food-grid {
    gap: 16px !important;
  }

  .food-main,
  .food-card {
    min-height: 340px !important;
  }

  .food-card {
    padding: 24px !important;
    border-radius: 26px !important;
  }

  .food-emoji {
    width: 58px !important;
    height: 58px !important;
    font-size: 28px !important;
    border-radius: 18px !important;
  }

  .food-card h3 {
    max-width: 100%;
    font-size: 32px !important;
    line-height: 1.04 !important;
  }

  .food-card p {
    max-width: 100%;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .food-highlight {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .food-highlight a {
    width: 100%;
    text-align: center;
  }
}

/* DESKTOP */
@media (min-width: 761px) {

  .food-card {
    transition:
      transform .35s ease,
      box-shadow .35s ease;
  }

  .food-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 70px rgba(43, 65, 31, .18);
  }
}



/* =====================================================
   NGREMBEL ASRI - FOTO BERSIH FINAL
   WAHANA + MENU MASAKAN
   ===================================================== */

/* ---------- WAHANA GRATIS ---------- */

/* Kolam Renang Anak */
.card-pool {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/kolam-renang.jpg') !important;
}

/* Ember Tumpah */
.card-bucket {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/ember-tumpah.jpg') !important;
}

/* Kampung Satwa */
.card-zoo {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/kampung-satwa.jpg') !important;
}

/* Area Bermain */
.card-play {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/kereta-mini.jpg') !important;
}


/* ---------- WAHANA BERBAYAR ---------- */

/* Mini Boat */
.card-boat {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/mini-boat.jpg') !important;
}

/* Paintball */
.card-paint {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/paintball.jpg') !important;
}

/* ATV */
.card-atv {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/atv.jpg') !important;
}

/* Flying Fox */
.card-flying {
  background-image:
    linear-gradient(to top,
      rgba(8,35,23,.96) 0%,
      rgba(8,35,23,.82) 34%,
      rgba(8,35,23,.15) 65%,
      transparent 100%
    ),
    url('../../images/content/flying-fox.jpg') !important;
}


/* =====================================================
   MENU MASAKAN
   ===================================================== */

.food-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 460px !important;
  padding: 26px !important;
}

/* Ikan Goreng / menu utama */
.food-card:nth-child(1) {
  background-image:
    linear-gradient(to top,
      rgba(15,28,18,.98) 0%,
      rgba(15,28,18,.90) 35%,
      rgba(15,28,18,.15) 70%,
      transparent 100%
    ),
    url('../../images/content/ikan-goreng.jpg') !important;
}

/* Masakan Tradisional */
.food-card:nth-child(2) {
  background-image:
    linear-gradient(to top,
      rgba(15,28,18,.98) 0%,
      rgba(15,28,18,.90) 35%,
      rgba(15,28,18,.15) 70%,
      transparent 100%
    ),
    url('../../images/content/bakar-klasik.jpg') !important;
}

/* Ikan Bakar */
.food-card:nth-child(3) {
  background-image:
    linear-gradient(to top,
      rgba(15,28,18,.98) 0%,
      rgba(15,28,18,.90) 35%,
      rgba(15,28,18,.15) 70%,
      transparent 100%
    ),
    url('../../images/content/bakar-original.jpg') !important;
}

/* Pedas / menu pendamping */
.food-card:nth-child(4) {
  background-image:
    linear-gradient(to top,
      rgba(15,28,18,.98) 0%,
      rgba(15,28,18,.90) 35%,
      rgba(15,28,18,.15) 70%,
      transparent 100%
    ),
    url('../../images/content/bakar-pedas.jpg') !important;
}


/* ---------- RAPINKAN ISI MENU ---------- */

.food-emoji {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  margin: 0 !important;

  width: 54px !important;
  height: 54px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;

  font-size: 28px !important;
  z-index: 3 !important;

  box-shadow: 0 8px 25px rgba(0,0,0,.18);
}

.food-card .food-chip,
.food-card h3,
.food-card p,
.food-card button {
  position: relative;
  z-index: 2;
}

.food-chip {
  align-self: flex-start;
  margin: 0 0 8px !important;
}

.food-card h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
}

.food-card p {
  margin: 0 0 18px !important;
  color: rgba(255,255,255,.86) !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

  .wahana-card {
    background-size: cover !important;
    background-position: center !important;
  }

  .food-card {
    min-height: 480px !important;
    padding: 24px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .food-card h3 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  .food-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .food-emoji {
    top: 18px !important;
    right: 18px !important;
  }
}


/* =====================================================
   FINAL OVERRIDE FOTO WAHANA BARU
   Jangan tambah aturan gambar setelah blok ini
   ===================================================== */

/* Matikan background lama pada card utama */
.wahana-card {
  background-image: none !important;
}

/* Layer foto */
.wahana-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;

  opacity: 1 !important;
  transform: none !important;
}

/* Gradient hanya sebagai layer terpisah */
.wahana-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background:
    linear-gradient(
      to top,
      rgba(5,35,22,.96) 0%,
      rgba(5,35,22,.70) 28%,
      rgba(5,35,22,.08) 60%,
      transparent 78%
    ) !important;

  pointer-events: none !important;
}


/* ========== GRATIS ========== */

.card-pool::before {
  background-image:
    url('../../images/content/kolam-renang.jpg') !important;
}

.card-bucket::before {
  background-image:
    url('../../images/content/ember-tumpah.jpg') !important;
}

.card-zoo::before {
  background-image:
    url('../../images/content/kampung-satwa.jpg') !important;
}

.card-play::before {
  background-image:
    url('../../images/content/kereta-mini.jpg') !important;
}


/* ========== BERBAYAR ========== */

.card-boat::before {
  background-image:
    url('../../images/content/mini-boat.jpg') !important;
}

.card-paint::before {
  background-image:
    url('../../images/content/paintball.jpg') !important;
}

.card-atv::before {
  background-image:
    url('../../images/content/atv.jpg') !important;
}

.card-flying::before {
  background-image:
    url('../../images/content/flying-fox.jpg') !important;
}


/* Pastikan isi kartu berada di atas foto */
.wahana-card-number,
.wahana-card-icon,
.wahana-card-content {
  position: relative;
  z-index: 3 !important;
}


/* =====================================================
   GALERI PENGALAMAN - FOTO BARU FINAL
   ===================================================== */

.gallery-nature {
  background-image:
    linear-gradient(
      to top,
      rgba(5,35,22,.92) 0%,
      rgba(5,35,22,.35) 40%,
      transparent 70%
    ),
    url('../../images/content/omah-playon.jpg') !important;
}

.gallery-water {
  background-image:
    linear-gradient(
      to top,
      rgba(5,35,22,.92) 0%,
      rgba(5,35,22,.35) 40%,
      transparent 70%
    ),
    url('../../images/content/kolam-renang.jpg') !important;
}

.gallery-animal {
  background-image:
    linear-gradient(
      to top,
      rgba(5,35,22,.92) 0%,
      rgba(5,35,22,.35) 40%,
      transparent 70%
    ),
    url('../../images/content/bird-aviary.jpg') !important;
}

.gallery-food {
  background-image:
    linear-gradient(
      to top,
      rgba(5,35,22,.92) 0%,
      rgba(5,35,22,.35) 40%,
      transparent 70%
    ),
    url('../../images/content/asam-manis.jpg') !important;
}

.gallery-family {
  background-image:
    linear-gradient(
      to top,
      rgba(5,35,22,.92) 0%,
      rgba(5,35,22,.35) 40%,
      transparent 70%
    ),
    url('../../images/content/fieldtrip.webp') !important;
}

/* Matikan foto lama jika sebelumnya dipasang lewat pseudo-element */
.gallery-card::before {
  background-image: none !important;
}

/* Foto memenuhi kartu */
.gallery-card {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* =====================================================
   EDUKASI / MINI ZOO - NGREMBEL ASRI
   FOTO ASLI + VISUAL INTERAKTIF
   ===================================================== */

.education-section {
  position: relative;
  overflow: hidden;
}

/* Foto Satwa */
.edu-circle.circle-one {
  background:
    linear-gradient(to top, rgba(8,45,27,.72), transparent 55%),
    url('../../images/content/kampung-satwa.jpg')
    center / cover no-repeat !important;
}

/* Foto Interaksi Ikan */
.edu-circle.circle-two {
  background:
    linear-gradient(to top, rgba(8,45,27,.72), transparent 55%),
    url('../../images/content/tangkap-ikan.jpg')
    center / cover no-repeat !important;
}

/* Foto Bird Aviary */
.edu-circle.circle-three {
  background:
    linear-gradient(to top, rgba(8,45,27,.72), transparent 55%),
    url('../../images/content/bird-aviary.jpg')
    center / cover no-repeat !important;
}

/* Foto kegiatan rombongan untuk Fieldtrip */
.edu-circle.circle-four {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background:
    linear-gradient(to top, rgba(8,45,27,.72), transparent 55%),
    url('../../images/content/fieldtrip.webp')
    center top / cover no-repeat !important;
}

.edu-circle.circle-four:hover {
  transform: translateX(-50%) translateY(-7px) scale(1.08) !important;
}

/* Hilangkan emoji lama dari tiga lingkaran */
.edu-circle > span {
  display: none !important;
}

.edu-circle {
  overflow: hidden !important;
  border: 5px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 18px 45px rgba(30,70,40,.18),
    0 0 0 1px rgba(82,125,54,.10) !important;

  transition:
    transform .35s ease,
    box-shadow .35s ease !important;
}

.edu-circle small {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;

  padding: 7px 13px !important;
  border-radius: 999px !important;

  background: rgba(14,67,39,.88) !important;
  backdrop-filter: blur(8px);

  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}

.edu-circle:hover {
  transform: translateY(-7px) scale(1.08) !important;
  box-shadow: 0 24px 55px rgba(30,70,40,.25) !important;
}


/* PUSAT EDUKASI */
.edu-center {
  background:
    linear-gradient(
      to top,
      rgba(5,45,26,.90),
      rgba(5,45,26,.15)
    ),
    url('../../images/content/omah-playon.jpg')
    center / cover no-repeat !important;

  border: 6px solid rgba(255,255,255,.96) !important;

  box-shadow:
    0 25px 65px rgba(26,65,38,.25) !important;

  overflow: hidden !important;
}

/* Emoji pohon lama */
.edu-center > span {
  display: none !important;
}

.edu-center strong,
.edu-center small {
  position: relative;
  z-index: 3;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.edu-center strong {
  font-size: clamp(25px, 4vw, 40px) !important;
}

.edu-center small {
  font-size: 13px !important;
  letter-spacing: .08em !important;
}


/* Efek dekoratif lembut */
.education-visual::before {
  content: "";
  position: absolute;
  width: 72%;
  height: 72%;
  left: 14%;
  top: 14%;

  border: 1px dashed rgba(91,130,58,.28);
  border-radius: 50%;

  animation: eduOrbit 35s linear infinite;
  pointer-events: none;
}

@keyframes eduOrbit {
  to {
    transform: rotate(360deg);
  }
}


/* ================= MOBILE ================= */

@media (max-width: 760px) {

  .education-visual {
    min-height: 480px !important;
    margin-top: 38px !important;
  }

  .edu-circle {
    width: 125px !important;
    height: 125px !important;
  }

  .edu-center {
    width: 190px !important;
    height: 190px !important;
  }

  .edu-circle small {
    bottom: 10px !important;
    font-size: 10px !important;
  }

  .edu-center strong {
    font-size: 25px !important;
  }

  .edu-center small {
    font-size: 11px !important;
  }
}


/* ================= DESKTOP ================= */

@media (min-width: 761px) {

  .edu-circle {
    width: 165px !important;
    height: 165px !important;
  }

  .edu-center {
    width: 250px !important;
    height: 250px !important;
  }
}

/* === EDU EXPERIENCE FINAL START === */

.edu-experience {
  position: relative;
  z-index: 5;
  width: min(1180px, calc(100% - 40px));
  margin: 90px auto 0;
}

.edu-experience-head {
  max-width: 680px;
  margin-bottom: 36px;
}

.edu-experience-head > span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  color: #d6e884;
}

.edu-experience-head h3 {
  margin: 0 0 16px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 6vw, 64px);
  line-height: .98;
  font-weight: 400;
}

.edu-experience-head h3 strong {
  color: #c8df63;
  font-weight: 700;
}

.edu-experience-head p {
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 17px;
  line-height: 1.7;
}

.edu-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.edu-photo {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 30px;
  background: #183e27;
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
}

.edu-photo-main,
.edu-photo-wide {
  grid-column: span 2;
  min-height: 430px;
}

.edu-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edu-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5,35,19,.02) 25%,
      rgba(5,35,19,.18) 55%,
      rgba(4,28,16,.92) 100%
    );
}

.edu-photo-caption {
  position: absolute;
  z-index: 3;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.edu-photo-caption small {
  color: #d8ea87;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}

.edu-photo-caption strong {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1.08;
}

/* MOBILE */
@media (max-width: 760px) {

  .edu-experience {
    width: calc(100% - 42px);
    margin-top: 72px;
  }

  .edu-experience-head {
    margin-bottom: 26px;
  }

  .edu-experience-head h3 {
    font-size: 42px;
  }

  .edu-experience-head p {
    font-size: 15px;
    line-height: 1.65;
  }

  .edu-photo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .edu-photo {
    min-height: 245px;
    border-radius: 23px;
  }

  .edu-photo-main {
    grid-column: span 2;
    min-height: 360px;
  }

  .edu-photo-wide {
    grid-column: span 2;
    min-height: 310px;
  }

  .edu-photo-caption {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .edu-photo-caption small {
    font-size: 9px;
    letter-spacing: .16em;
  }

  .edu-photo-caption strong {
    font-size: 21px;
  }

  .edu-photo-main .edu-photo-caption strong,
  .edu-photo-wide .edu-photo-caption strong {
    font-size: 27px;
  }
}

/* === EDU EXPERIENCE FINAL END === */

/* =========================================================
   EDUKASI ORBIT - MOBILE FINAL POSITION
   ========================================================= */

@media (max-width: 760px) {

  /* Kurangi ruang kosong sebelum area orbit */
  #edukasi .education-orbit,
  #edukasi .edu-orbit,
  #edukasi .education-visual,
  #edukasi .edu-visual {
    margin-top: -150px !important;
  }

  /* Area orbit dibuat lebih ringkas */
  #edukasi .education-orbit,
  #edukasi .edu-orbit {
    min-height: 720px !important;
    height: 720px !important;
  }

  /* Pastikan elemen tidak membuat halaman melebar */
  #edukasi {
    overflow: hidden !important;
  }

  /* Semua lingkaran orbit tetap aman */
  #edukasi .education-orbit-item,
  #edukasi .edu-orbit-item,
  #edukasi .education-bubble,
  #edukasi .edu-bubble {
    max-width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   EDUKASI ORBIT - EXTRA SMALL PHONE
   ========================================================= */

@media (max-width: 430px) {

  #edukasi .education-orbit,
  #edukasi .edu-orbit,
  #edukasi .education-visual,
  #edukasi .edu-visual {
    margin-top: -175px !important;
  }

  #edukasi .education-orbit,
  #edukasi .edu-orbit {
    min-height: 680px !important;
    height: 680px !important;
  }
}


/* EDUKASI - KOREKSI POSISI ORBIT */
@media (max-width: 760px) {
  #edukasi .education-orbit,
  #edukasi .edu-orbit,
  #edukasi .education-visual,
  #edukasi .edu-visual {
    margin-top: -15px !important;
  }
}

@media (max-width: 430px) {
  #edukasi .education-orbit,
  #edukasi .edu-orbit,
  #edukasi .education-visual,
  #edukasi .edu-visual {
    margin-top: -20px !important;
  }
}


/* =========================================================
   NGREMBEL ASRI — FINAL ABOUT + CTA + FOOTER
   ========================================================= */

.about-final {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(157,190,76,.18), transparent 34%),
    linear-gradient(180deg,#f5f2e6 0%,#eeead9 100%);
  color:#163c26;
}

.about-final-shell {
  width:min(1180px, calc(100% - 42px));
  margin:auto;
  padding:100px 0 90px;
}

.about-final-kicker,
.final-cta-kicker {
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:.32em;
  color:#799547;
  margin-bottom:22px;
}

.about-final-heading h2 {
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(52px,8vw,94px);
  line-height:.91;
  font-weight:400;
  letter-spacing:-.045em;
}

.about-final-heading h2 strong {
  color:#759540;
  font-weight:700;
}

.about-final-heading > p {
  max-width:690px;
  margin:34px 0 55px;
  font-size:18px;
  line-height:1.85;
  color:#687363;
}

.about-final-card {
  position:relative;
  overflow:hidden;
  border-radius:36px;
  padding:42px;
  background:
    radial-gradient(circle at 90% 5%,rgba(173,207,91,.18),transparent 35%),
    linear-gradient(145deg,#123e26,#092c1b);
  box-shadow:0 30px 70px rgba(19,55,34,.18);
  color:white;
}

.about-final-logo img {
  width:180px;
  max-height:90px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:34px;
}

.about-final-copy small {
  color:#bdd46a;
  font-size:11px;
  letter-spacing:.26em;
  font-weight:800;
}

.about-final-copy h3 {
  font-family:Georgia,serif;
  font-size:42px;
  margin:10px 0 15px;
}

.about-final-copy > p {
  max-width:620px;
  color:rgba(255,255,255,.68);
  line-height:1.75;
  margin:0;
}

.about-final-points {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:40px;
}

.about-final-points > div {
  min-height:125px;
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  border-radius:22px;
  display:flex;
  gap:14px;
  align-items:center;
}

.about-final-points > div > span {
  font-size:30px;
}

.about-final-points p {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.about-final-points b {
  font-size:15px;
}

.about-final-points small {
  color:rgba(255,255,255,.56);
  line-height:1.4;
}

.about-final-quote {
  padding:80px 0 10px;
}

.about-final-quote > span {
  color:#78954a;
  letter-spacing:.3em;
  font-size:12px;
  font-weight:800;
}

.about-final-quote p {
  max-width:850px;
  margin:18px 0 0;
  font-family:Georgia,serif;
  font-size:clamp(40px,6vw,72px);
  line-height:1;
  color:#163c26;
}

.about-final-quote strong {
  color:#789b42;
}


/* CTA */

.final-cta {
  position:relative;
  overflow:hidden;
  min-height:680px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 70% 20%,rgba(180,213,88,.19),transparent 28%),
    radial-gradient(circle at 10% 100%,rgba(104,153,65,.24),transparent 38%),
    linear-gradient(145deg,#0b351f,#082717);
  color:white;
}

.final-cta::before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(190,214,99,.22);
  border-radius:50%;
  right:-160px;
  top:-150px;
}

.final-cta::after {
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  border:1px solid rgba(190,214,99,.12);
  border-radius:50%;
  right:-60px;
  top:-60px;
}

.final-cta-inner {
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 42px));
  margin:auto;
  padding:100px 0;
}

.final-cta h2 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(58px,9vw,105px);
  line-height:.9;
  letter-spacing:-.05em;
  margin:0;
}

.final-cta h2 strong {
  color:#b7d85d;
}

.final-cta p {
  max-width:610px;
  margin:34px auto;
  color:rgba(255,255,255,.66);
  line-height:1.8;
  font-size:17px;
  text-align:center;
}

.final-cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  width:100%;
}

/* =========================
   LOKASI
========================= */
.location-section {
  padding: 105px 0;
  background: #f3f3e5;
  color: #173c25;
}

.location-shell {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.55fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.location-copy h2 {
  margin: 8px 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.04em;
}

.location-copy h2 strong {
  display: block;
  color: #73952e;
}

.location-copy p {
  max-width: 460px;
  color: #647066;
  font-size: 16px;
  line-height: 1.75;
}

.location-map {
  min-height: 480px;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 30px;
  background: #dce4d9;
  box-shadow: 0 24px 60px rgba(26, 67, 39, .17);
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}

@media (max-width: 850px) {
  .location-section {
    padding: 75px 0;
  }

  .location-shell {
    grid-template-columns: 1fr;
  }

  .location-copy {
    text-align: left;
  }

  .location-copy p {
    margin-left: 0;
    margin-right: 0;
  }

  .location-map,
  .location-map iframe {
    min-height: 390px;
    height: 390px;
  }
}

.final-cta-actions a {
  text-decoration:none;
  border-radius:999px;
  min-height:58px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  font-weight:700;
}

.final-primary {
  background:#b8d95e;
  color:#12361f;
}

.final-primary span {
  font-size:22px;
}

.final-secondary {
  color:white;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.05);
}


/* FOOTER */

.site-footer-final {
  background:#061c11;
  color:white;
  padding:70px max(21px,calc((100% - 1180px)/2)) 28px;
}

.footer-final-top {
  display:flex;
  justify-content:space-between;
  gap:60px;
  padding-bottom:60px;
}

.footer-final-brand img {
  width:180px;
  max-height:90px;
  object-fit:contain;
  object-position:left center;
}

.footer-final-brand p {
  color:rgba(255,255,255,.52);
  max-width:330px;
  line-height:1.7;
  font-size:14px;
}

.footer-final-nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(130px,1fr));
  gap:15px 45px;
}

.footer-final-nav a {
  color:rgba(255,255,255,.76);
  text-decoration:none;
  font-size:14px;
}

.footer-contact {
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-contact > strong {
  margin-bottom: 7px;
  color: #d1e878;
  font-family: Georgia, serif;
  font-size: 22px;
}

.footer-contact p,
.footer-contact > a {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}

.footer-contact > a:hover,
.footer-socials a:hover {
  color: #d1e878;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 0;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.footer-socials a:hover {
  transform: translateY(-2px);
  background: transparent;
}

.footer-socials svg {
  width: 25px;
  height: 25px;
  padding: 3px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
}

.footer-socials svg path {
  stroke: none;
}

.footer-socials svg rect,
.footer-socials svg circle:not(.social-dot) {
  fill: none;
}

.footer-socials svg .social-dot {
  fill: currentColor;
  stroke: none;
}

.footer-final-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:25px;
  display:flex;
  justify-content:center;
  gap:20px;
  color:rgba(255,255,255,.38);
}

.footer-final-bottom small {
  line-height: 1.6;
  text-align: center;
}

.footer-final-bottom small strong {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  letter-spacing: .12em;
}

.footer-final-bottom small span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: .04em;
}

.footer-final-bottom small a {
  color: #b9d85b;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-final-bottom small a:hover {
  color: #fff2ae;
}

.footer-final-bottom span {
  letter-spacing:.18em;
  font-size:11px;
  font-weight:800;
}

.footer-final-bottom small {
  letter-spacing:.12em;
  font-size:9px;
}


/* MOBILE */

@media (max-width:760px) {

  .about-final-shell {
    width:calc(100% - 42px);
    padding:75px 0 70px;
  }

  .about-final-heading h2 {
    font-size:55px;
  }

  .about-final-heading > p {
    font-size:16px;
    line-height:1.75;
    margin:28px 0 38px;
  }

  .about-final-card {
    padding:28px 23px;
    border-radius:28px;
  }

  .about-final-logo img {
    width:145px;
    margin-bottom:28px;
  }

  .about-final-copy h3 {
    font-size:34px;
  }

  .about-final-points {
    grid-template-columns:1fr;
    margin-top:30px;
  }

  .about-final-points > div {
    min-height:95px;
  }

  .about-final-quote {
    padding-top:65px;
  }

  .about-final-quote p {
    font-size:45px;
  }

  .final-cta {
    min-height:650px;
  }

  .final-cta-inner {
    width:calc(100% - 42px);
    padding:85px 0;
  }

  .final-cta h2 {
    font-size:59px;
  }

  .final-cta-actions {
    flex-direction:column;
    align-items:stretch;
  }

  .final-cta-actions a {
    width:100%;
  }

  .footer-final-top {
    flex-direction:column;
    gap:40px;
    padding-bottom:45px;
  }

  .footer-final-nav {
    grid-template-columns:1fr 1fr;
  }

  .footer-final-bottom {
    flex-direction:column;
  }
}


/* =====================================================
   FINAL MOBILE TYPOGRAPHY — ABOUT + CTA
   ===================================================== */
@media (max-width: 760px) {

  .about-final-quote {
    padding-top: 58px !important;
  }

  .about-final-quote p {
    max-width: 100% !important;
    font-size: clamp(38px, 11vw, 48px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  .final-cta {
    min-height: 620px !important;
  }

  .final-cta-inner {
    width: calc(100% - 48px) !important;
    padding: 78px 0 !important;
  }

  .final-cta-kicker {
    font-size: 11px !important;
    letter-spacing: .28em !important;
    margin-bottom: 28px !important;
  }

  .final-cta h2 {
    max-width: 100% !important;
    font-size: clamp(52px, 15vw, 66px) !important;
    line-height: .88 !important;
    letter-spacing: -.045em !important;
  }

  .final-cta p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin: 30px 0 !important;
  }
}

@media (max-width: 390px) {
  .about-final-quote p {
    font-size: 40px !important;
  }

  .final-cta h2 {
    font-size: 52px !important;
  }
}


/* =========================================================
   NGREMBEL ASRI — FINAL BOTTOM FLOW
   Galeri → Tentang → CTA → Footer
   ========================================================= */

html {
  scroll-behavior: smooth;
}

/* CTA FINAL */
.final-cta,
.cta-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%,
      rgba(184, 220, 84, .12),
      transparent 34%),
    linear-gradient(180deg, #073b20 0%, #04351c 100%);
  color: #fff;
}

.final-cta::before,
.cta-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(190, 220, 91, .18);
  border-radius: 50%;
  top: -170px;
  right: -260px;
  pointer-events: none;
}

.final-cta h2,
.cta-section h2 {
  margin-top: 0;
}

.final-cta a,
.cta-section a {
  text-decoration: none;
}

/* FOOTER — hanya terasa sebagai satu ending */
.site-footer,
.footer {
  position: relative;
  background: #062b18 !important;
  color: rgba(255,255,255,.70);
  border-top: 1px solid rgba(255,255,255,.06);
}

.site-footer img,
.footer img {
  max-width: 310px;
  height: auto;
}

.site-footer a,
.footer a {
  color: rgba(255,255,255,.74);
  text-decoration: none;
  transition:
    color .25s ease,
    transform .25s ease;
}

.site-footer a:hover,
.footer a:hover {
  color: #c3df62;
}

/* MOBILE FINAL */
@media (max-width: 760px) {

  .final-cta,
  .cta-section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
    min-height: auto !important;
  }

  .final-cta h2,
  .cta-section h2 {
    line-height: .92 !important;
  }

  .site-footer,
  .footer {
    padding-top: 72px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .site-footer img,
  .footer img {
    width: min(82%, 310px);
  }
}

/* DESKTOP */
@media (min-width: 761px) {

  .final-cta,
  .cta-section {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }

  .site-footer,
  .footer {
    padding-top: 90px !important;
    padding-bottom: 45px !important;
  }
}

/* GUIDE DESKTOP DIPERBESAR */
@media (min-width: 761px) {
  .guide-cutout {
    width: 39% !important;
    height: 82% !important;
    bottom: 2% !important;
    transform: translateX(-50%) scale(1.16) !important;
    transform-origin: bottom center !important;
  }
}

/* =====================================================
   EMERGENCY FIX — HERO TIDAK BOLEH MASUK SECTION LAIN
   ===================================================== */

.hero,
.hero-section,
#beranda {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* hero mobile hanya setinggi layar */
@media (max-width: 760px) {
  .hero,
  .hero-section,
  #beranda {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  /* semua visual utama hero tetap terkurung */
  #beranda .guide-cutout,
  #beranda .orbit,
  #beranda .orbit-ring {
    position: absolute !important;
  }

  /* section setelah hero selalu punya layer sendiri */
  #wahana,
  .wahana-section {
    position: relative !important;
    z-index: 5 !important;
    overflow: hidden !important;
  }
}

/* ==================================================
   FINAL FIX - GUIDE HANYA SATU
   ================================================== */

#beranda .guide-cutout,
.guide-cutout {
  background-image: none !important;
  background: none !important;
}

/* =====================================================
   FINAL CTA + FOOTER MOBILE SPACING
   ===================================================== */
@media (max-width: 760px) {

  .final-cta {
    min-height: auto !important;
    padding: 70px 38px 85px !important;
  }

  .final-cta-inner {
    min-height: auto !important;
    padding-bottom: 0 !important;
  }

  .final-cta-actions {
    margin-bottom: 0 !important;
  }

  .site-footer-final {
    margin-top: 0 !important;
    padding-top: 90px !important;
  }

}

/* =====================================================
   NGREMBEL ASRI — FINAL WEBSITE POLISH
   ===================================================== */

/* Smooth navigation */
html {
  scroll-behavior: smooth;
}

/* Anchor tidak terlalu mepet atas */
#beranda,
#masakan,
#wahana,
#galeri,
#edukasi,
#tentang,
#lokasi {
  scroll-margin-top: 20px;
}

/* Tombol/link terasa interaktif */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

.orbit-item,
.wahana-card,
.food-card,
.edu-photo,
.gallery-item,
.final-primary,
.final-secondary,
.footer-final-nav a {
  transition:
    transform .35s ease,
    opacity .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

/* Desktop hover */
@media (hover: hover) {

  .wahana-card:hover,
  .food-card:hover,
  .edu-photo:hover,
  .gallery-item:hover {
    transform: translateY(-6px);
  }

  .final-primary:hover,
  .final-secondary:hover {
    transform: translateY(-3px);
  }

  .footer-final-nav a:hover {
    opacity: 1;
  }
}

/* Mobile tap */
@media (max-width: 760px) {

  .orbit-item:active {
    transform: scale(.94);
  }

  .wahana-card:active,
  .food-card:active,
  .edu-photo:active,
  .gallery-item:active {
    transform: scale(.985);
  }

  .final-primary:active,
  .final-secondary:active {
    transform: scale(.97);
  }

  /* Hindari horizontal overflow */
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   HERO ORBIT — FINAL MOBILE LOCK
   ========================================================= */

@media (max-width: 760px) {

  #beranda {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  #beranda .orbit,
  #beranda .orbit-ring {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    z-index: 30 !important;
    pointer-events: none !important;
  }

  #beranda .orbit-item {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 105px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 4px !important;
    visibility: visible !important;

    color: #ffffff !important;
    text-align: center !important;
    text-decoration: none !important;

    z-index: 50 !important;
    pointer-events: auto !important;
  }

  #beranda .orbit-item svg {
    width: 31px !important;
    height: 31px !important;
    margin-bottom: 7px !important;
    stroke: #ffffff !important;
  }

  #beranda .orbit-item span {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  /* BERANDA */
  #beranda .item-1 {
    top: 9% !important;
    left: 4% !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* MENU MASAKAN */
  #beranda .item-2 {
    top: 9% !important;
    right: 4% !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* WAHANA */
  #beranda .item-3 {
    top: 40% !important;
    left: 1% !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* GALERI */
  #beranda .item-4 {
    top: 40% !important;
    right: 1% !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* EDUKASI */
  #beranda .item-5 {
    top: auto !important;
    bottom: 5% !important;
    left: 7% !important;
    right: auto !important;
  }

  /* TENTANG KAMI */
  #beranda .item-6 {
    top: auto !important;
    bottom: 5% !important;
    right: 7% !important;
    left: auto !important;
  }

  /* Guide tetap di atas garis orbit,
     tetapi menu tetap bisa diklik */
  #beranda .guide-cutout {
    z-index: 40 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   HERO MOBILE - FINAL READABILITY
   ========================================================= */

@media (max-width: 760px) {

  /* Hilangkan teks Jelajahi yang bertabrakan dengan menu */
  #beranda .hero-scroll {
    display: none !important;
  }

  /* Menu lebih terbaca tanpa mengubah posisinya */
  #beranda .orbit-item {
    text-shadow:
      0 2px 8px rgba(10,35,20,.55),
      0 1px 2px rgba(0,0,0,.45) !important;
  }

  #beranda .orbit-item svg {
    filter:
      drop-shadow(0 2px 4px rgba(10,35,20,.45)) !important;
  }

  /* Judul utama lebih jelas */
  #beranda .hero-title,
  #beranda .hero-title *,
  #beranda .hero-copy h1 {
    opacity: 1 !important;
    text-shadow: 0 2px 12px rgba(20,40,20,.18);
  }

}







/* =========================================================
   NGREMBEL ASRI — HERO FINAL 2026
   Struktur sesuai App.jsx terbaru.
   HERO SAJA — section lain tidak disentuh.
   ========================================================= */

#beranda.hero-section {
  position: relative !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 700px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #f3f0e5 !important;
}

/* BACKGROUND */
#beranda .hero-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity .35s ease;
}

#beranda .hero-background.is-loaded {
  opacity: 1;
}

/* SHADE */
#beranda .hero-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(8,35,15,.42) 0%,
      rgba(8,35,15,.08) 42%,
      rgba(8,35,15,.12) 65%,
      rgba(8,35,15,.28) 100%
    ) !important;
}

/* TITLE */
#beranda .hero-title {
  display: block !important;
  position: absolute !important;

  left: 6% !important;
  top: 30% !important;

  width: min(410px, 32vw) !important;

  transform: none !important;
  text-align: left !important;

  opacity: 1 !important;
  visibility: visible !important;

  color: #fff !important;
  z-index: 25 !important;

  pointer-events: none !important;
}

#beranda .hero-title span {
  display: block !important;

  font-family: Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(20px, 2vw, 30px) !important;

  color: #fff !important;

  margin-bottom: 8px !important;
}

#beranda .hero-title h1 {
  margin: 0 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(52px, 6vw, 92px) !important;
  font-weight: 800 !important;

  line-height: .82 !important;
  letter-spacing: -4px !important;

  color: #fff !important;
}

#beranda .hero-title h1 strong {
  display: block !important;
  color: #a5c957 !important;
}

/* =========================================================
   ORBIT DESKTOP
   ========================================================= */

#beranda .orbit-ring {
  display: block !important;

  position: absolute !important;

  left: 61% !important;
  top: 52% !important;

  width: min(680px, 53vw) !important;
  height: min(680px, 78vh) !important;

  transform: translate(-50%, -50%) !important;

  border: 1.5px solid rgba(239,203,70,.78) !important;
  border-radius: 50% !important;

  box-shadow:
    0 0 24px rgba(238,201,62,.28),
    inset 0 0 24px rgba(238,201,62,.12) !important;

  z-index: 8 !important;

  pointer-events: none !important;
}

#beranda .orbit {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 15 !important;

  pointer-events: none !important;
}

#beranda .orbit-item {
  position: absolute !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  width: 125px !important;
  min-height: 95px !important;

  padding: 0 !important;
  margin: 0 !important;

  color: #fff !important;
  text-decoration: none !important;
  text-align: center !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 30 !important;
  pointer-events: auto !important;
}

/* ICON */
#beranda .orbit-icon {
  display: grid !important;
  place-items: center !important;

  width: 72px !important;
  height: 72px !important;

  margin: 0 auto 8px !important;

  border-radius: 50% !important;

  color: #315c29 !important;

  background: rgba(255,255,247,.96) !important;

  border: 2px solid rgba(231,207,89,.95) !important;

  box-shadow:
    0 0 18px rgba(255,245,175,.9),
    0 0 38px rgba(234,202,65,.55) !important;
}

#beranda .orbit-icon svg {
  width: 29px !important;
  height: 29px !important;

  stroke: #315c29 !important;

  filter: none !important;
}

#beranda .orbit-icon .hero-menu-emoji {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 34px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.32) !important;
}

@media (max-width: 760px) {
  #beranda .orbit-icon .hero-menu-emoji {
    font-size: clamp(24px, 7vw, 31px) !important;
  }
}

@media (min-width: 1024px) and (min-height: 650px) {
  #beranda .orbit-icon .hero-menu-emoji {
    font-size: 22px !important;
  }
}

/* LABEL */
#beranda .orbit-item > span {
  display: inline-block !important;

  padding: 6px 12px !important;

  border-radius: 20px !important;

  background: rgba(30,79,31,.90) !important;

  color: #fff !important;

  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  text-shadow: 0 2px 5px rgba(0,0,0,.35) !important;

  box-shadow: 0 5px 15px rgba(0,0,0,.18) !important;
}

/* POSISI 6 MENU DESKTOP */

#beranda .item-1 {
  top: -3% !important;
  left: 16% !important;
  right: auto !important;
  bottom: auto !important;
}

#beranda .item-2 {
  top: -3% !important;
  right: 13% !important;
  left: auto !important;
  bottom: auto !important;
}

#beranda .item-3 {
  top: 41% !important;
  left: -8% !important;
  right: auto !important;
  bottom: auto !important;
}

#beranda .item-4 {
  top: 41% !important;
  right: -8% !important;
  left: auto !important;
  bottom: auto !important;
}

#beranda .item-5 {
  bottom: -3% !important;
  left: 16% !important;
  right: auto !important;
  top: auto !important;
}

#beranda .item-6 {
  bottom: -3% !important;
  right: 13% !important;
  left: auto !important;
  top: auto !important;
}

/* GUIDE DESKTOP */
#beranda .guide-cutout {
  display: block !important;

  position: absolute !important;

  left: 61% !important;
  bottom: -2% !important;

  width: auto !important;
  height: 88% !important;

  max-width: none !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  transform: translateX(-50%) !important;

  opacity: 1 !important;
  visibility: visible !important;

  background: none !important;

  filter: drop-shadow(0 18px 26px rgba(0,0,0,.30)) !important;

  z-index: 20 !important;

  pointer-events: none !important;
}

/* SCROLL */
#beranda .hero-scroll {
  position: absolute !important;

  left: 6% !important;
  bottom: 5% !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  color: rgba(255,255,255,.9) !important;

  font-size: 12px !important;
  letter-spacing: 2px !important;

  z-index: 30 !important;
}

#beranda .hero-scroll b {
  font-size: 20px !important;
}


/* =========================================================
   MOBILE — PERTAHANKAN TAMPILAN YANG SUDAH BAGUS
   ========================================================= */

@media (max-width: 760px) {

  #beranda.hero-section {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
  }

  #beranda .hero-background {
    background-size: cover !important;
    background-position: center center !important;
  }

  #beranda .hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(20,30,15,.04) 0%,
        rgba(20,30,15,.00) 55%,
        rgba(20,30,15,.04) 100%
      ) !important;
  }

  #beranda .hero-title {
    left: 0 !important;
    top: 0 !important;

    width: 100% !important;

    padding: 0 2px !important;

    transform: none !important;
    text-align: left !important;

    z-index: 15 !important;
  }

  #beranda .hero-title span {
    font-size: 16px !important;
    margin: 0 0 42px !important;
  }

  #beranda .hero-title h1 {
    font-size: 36px !important;
    line-height: .88 !important;
    letter-spacing: -2px !important;
  }

  #beranda .hero-title h1 strong {
    display: inline !important;
    margin-left: 0 !important;
  }

  #beranda .orbit-ring {
    left: 50% !important;
    top: 51% !important;

    width: 88vw !important;
    height: 86vh !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    z-index: 10 !important;
  }

  #beranda .orbit {
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    transform: none !important;

    z-index: 30 !important;
  }

  #beranda .orbit-item {
    width: 105px !important;
    min-height: 75px !important;

    z-index: 50 !important;
  }

  #beranda .orbit-icon {
    width: auto !important;
    height: auto !important;

    margin: 0 0 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #fff !important;
  }

  #beranda .orbit-icon svg {
    width: 31px !important;
    height: 31px !important;

    stroke: #fff !important;

    filter:
      drop-shadow(0 2px 4px rgba(10,35,20,.45)) !important;
  }

  #beranda .orbit-item > span {
    padding: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #fff !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;

    white-space: normal !important;

    text-shadow:
      0 2px 8px rgba(10,35,20,.55),
      0 1px 2px rgba(0,0,0,.45) !important;
  }

  #beranda .item-1 {
    top: 9% !important;
    left: 4% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-2 {
    top: 9% !important;
    right: 4% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-3 {
    top: 40% !important;
    left: 1% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-4 {
    top: 40% !important;
    right: 1% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-5 {
    top: auto !important;
    bottom: 5% !important;
    left: 7% !important;
    right: auto !important;
  }

  #beranda .item-6 {
    top: auto !important;
    bottom: 5% !important;
    right: 7% !important;
    left: auto !important;
  }

  #beranda .guide-cutout {
    left: 50% !important;
    bottom: -1% !important;

    width: auto !important;
    height: 79% !important;

    max-width: none !important;

    object-fit: contain !important;

    transform: translateX(-50%) !important;

    z-index: 40 !important;
  }

  #beranda .hero-scroll {
    display: none !important;
  }
}


/* TABLET / LAPTOP KECIL */
@media (min-width: 761px) and (max-width: 1100px) {

  #beranda .hero-title {
    left: 4% !important;
    width: 30vw !important;
  }

  #beranda .hero-title h1 {
    font-size: 55px !important;
  }

  #beranda .orbit-ring {
    left: 64% !important;
    width: 58vw !important;
    height: 70vh !important;
  }

  #beranda .guide-cutout {
    left: 64% !important;
    height: 82% !important;
  }

  #beranda .orbit-item {
    width: 105px !important;
  }

  #beranda .orbit-icon {
    width: 62px !important;
    height: 62px !important;
  }

  #beranda .orbit-item > span {
    font-size: 11px !important;
  }
}


/* =========================================================
   HERO MOBILE — FINAL ORBIT MENU FIX
   Background & guide TIDAK diubah
   ========================================================= */
@media (max-width: 760px) {

  #beranda .orbit {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    z-index: 30 !important;
    pointer-events: none !important;
  }

  #beranda .orbit-ring {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 82vw !important;
    height: 78% !important;
    transform: translate(-50%, -50%) !important;
    border: 1.5px solid rgba(221, 187, 66, .70) !important;
    border-radius: 50% !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  #beranda .orbit-item {
    position: absolute !important;
    width: 92px !important;
    min-height: 88px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;

    text-shadow:
      0 2px 5px rgba(0,0,0,.75),
      0 0 12px rgba(0,0,0,.35) !important;

    transform: translate(-50%, -50%) !important;
    z-index: 35 !important;
    pointer-events: auto !important;
  }

  #beranda .orbit-item svg {
    width: 29px !important;
    height: 29px !important;
    stroke-width: 1.8 !important;

    padding: 9px !important;
    box-sizing: content-box !important;

    color: #173f25 !important;
    background: rgba(255,255,245,.94) !important;

    border-radius: 50% !important;
    border: 1px solid rgba(215,181,58,.75) !important;

    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.30))
      drop-shadow(0 0 7px rgba(255,220,90,.25)) !important;
  }

  /* ATAS */
  #beranda .item-1 {
    left: 18% !important;
    top: 25% !important;
  }

  #beranda .item-2 {
    left: 82% !important;
    top: 25% !important;
  }

  /* TENGAH */
  #beranda .item-3 {
    left: 16% !important;
    top: 51% !important;
  }

  #beranda .item-4 {
    left: 84% !important;
    top: 51% !important;
  }

  /* BAWAH */
  #beranda .item-5 {
    left: 18% !important;
    top: 77% !important;
  }

  #beranda .item-6 {
    left: 82% !important;
    top: 77% !important;
  }

  #beranda .orbit-item:active {
    scale: 1.08;
  }
}


/* =====================================================
   HERO ORBIT — FINAL SAFE POSITION
   ===================================================== */

/* Desktop / browser mode desktop */
@media (min-width: 761px) {

  #beranda .orbit-item {
    width: 120px !important;
    z-index: 50 !important;
    pointer-events: auto !important;
  }

  /* kiri atas */
  #beranda .item-1 {
    left: 23% !important;
    top: 30% !important;
  }

  /* kanan atas */
  #beranda .item-2 {
    left: 77% !important;
    top: 30% !important;
  }

  /* kiri tengah */
  #beranda .item-3 {
    left: 19% !important;
    top: 53% !important;
  }

  /* kanan tengah */
  #beranda .item-4 {
    left: 81% !important;
    top: 53% !important;
  }

  /* kiri bawah */
  #beranda .item-5 {
    left: 23% !important;
    top: 75% !important;
  }

  /* kanan bawah */
  #beranda .item-6 {
    left: 77% !important;
    top: 75% !important;
  }
}


/* HP normal */
@media (max-width: 760px) {

  #beranda .item-1 {
    left: 17% !important;
    top: 29% !important;
  }

  #beranda .item-2 {
    left: 83% !important;
    top: 29% !important;
  }

  #beranda .item-3 {
    left: 15% !important;
    top: 52% !important;
  }

  #beranda .item-4 {
    left: 85% !important;
    top: 52% !important;
  }

  #beranda .item-5 {
    left: 18% !important;
    top: 75% !important;
  }

  #beranda .item-6 {
    left: 82% !important;
    top: 75% !important;
  }
}


/* =====================================================
   HERO MENU — RIGHT SIDE VISIBILITY FIX
   ===================================================== */

#beranda .orbit-item {
  z-index: 100 !important;
  pointer-events: auto !important;
}

#beranda .guide-cutout {
  z-index: 20 !important;
}

@media (max-width: 760px) {

  /* BERANDA */
  #beranda .item-1 {
    left: 23% !important;
    top: 31% !important;
  }

  /* MENU MASAKAN */
  #beranda .item-2 {
    left: 88% !important;
    top: 31% !important;
  }

  /* WAHANA */
  #beranda .item-3 {
    left: 21% !important;
    top: 52% !important;
  }

  /* GALERI */
  #beranda .item-4 {
    left: 88% !important;
    top: 52% !important;
  }

  /* EDUKASI */
  #beranda .item-5 {
    left: 23% !important;
    top: 72% !important;
  }

  /* TENTANG KAMI */
  #beranda .item-6 {
    left: 88% !important;
    top: 72% !important;
  }

  #beranda .orbit-item {
    transform: translate(-50%, -50%) !important;
  }
}


/* =====================================================
   HERO — FINAL LAYER FIX
   Posisi & ukuran TIDAK diubah
   ===================================================== */

#beranda .orbit-ring {
  z-index: 15 !important;
  pointer-events: none !important;
}

/* Guide di tengah */
#beranda .guide-cutout {
  z-index: 30 !important;
  pointer-events: none !important;
}

/* Seluruh menu harus berada DI DEPAN guide */
#beranda .orbit {
  z-index: 80 !important;
  pointer-events: none !important;
}

/* Semua 6 tombol bisa diklik */
#beranda .orbit-item {
  z-index: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Judul tetap paling depan */
#beranda .hero-title {
  z-index: 90 !important;
}

/* Hilangkan Jelajahi supaya Hero lebih bersih */
#beranda .hero-scroll {
  display: none !important;
}


/* =====================================================
   HERO MOBILE — MENU DI LUAR BADAN GUIDE
   ===================================================== */
@media (max-width: 760px) {

  /* kiri atas - Beranda */
  #beranda .item-1 {
    top: 25% !important;
    left: 4% !important;
    right: auto !important;
  }

  /* kanan atas - Menu Masakan */
  #beranda .item-2 {
    top: 25% !important;
    right: 3% !important;
    left: auto !important;
  }

  /* kiri tengah - Wahana */
  #beranda .item-3 {
    top: 47% !important;
    left: 2% !important;
    right: auto !important;
  }

  /* kanan tengah - Galeri */
  #beranda .item-4 {
    top: 47% !important;
    right: 2% !important;
    left: auto !important;
  }

  /* kiri bawah - Edukasi */
  #beranda .item-5 {
    top: 68% !important;
    bottom: auto !important;
    left: 4% !important;
    right: auto !important;
  }

  /* kanan bawah - Tentang Kami */
  #beranda .item-6 {
    top: 68% !important;
    bottom: auto !important;
    right: 3% !important;
    left: auto !important;
  }

  /* Lebar cukup untuk tulisan tetapi tidak masuk terlalu jauh */
  #beranda .orbit-item {
    width: 92px !important;
  }

  #beranda .menu-name,
  #beranda .orbit-item span {
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media(max-width:760px){
#beranda .orbit{overflow:visible!important}
#beranda .orbit-item{width:90px!important;z-index:50!important}
#beranda .item-1{left:1%!important;right:auto!important;top:25%!important}
#beranda .item-3{left:1%!important;right:auto!important;top:46%!important}
#beranda .item-5{left:1%!important;right:auto!important;top:67%!important}
#beranda .item-2{right:1%!important;left:auto!important;top:25%!important}
#beranda .item-4{right:1%!important;left:auto!important;top:46%!important}
#beranda .item-6{right:1%!important;left:auto!important;top:67%!important}
#beranda .orbit-item span{display:block!important;width:90px!important;text-align:center!important;margin-top:7px!important;font-size:11px!important;line-height:1.15!important}
}

/* === MOBILE HERO MENU - HARD FIX === */
@media (max-width:760px){

#beranda .orbit{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  overflow:visible!important;
  z-index:60!important;
  pointer-events:none!important;
}

#beranda .orbit-item{
  position:absolute!important;
  width:105px!important;
  margin:0!important;
  transform:none!important;
  translate:none!important;
  z-index:70!important;
  pointer-events:auto!important;
}

/* KIRI */
#beranda .item-1{
  left:2%!important;
  right:auto!important;
  top:27%!important;
}
#beranda .item-3{
  left:2%!important;
  right:auto!important;
  top:47%!important;
}
#beranda .item-5{
  left:2%!important;
  right:auto!important;
  top:67%!important;
}

/* KANAN */
#beranda .item-2{
  left:auto!important;
  right:2%!important;
  top:27%!important;
}
#beranda .item-4{
  left:auto!important;
  right:2%!important;
  top:47%!important;
}
#beranda .item-6{
  left:auto!important;
  right:2%!important;
  top:67%!important;
}

/* ICON */
#beranda .orbit-icon{
  margin:0 auto!important;
}

/* LABEL */
#beranda .orbit-item span{
  position:static!important;
  display:block!important;
  width:105px!important;
  margin:8px auto 0!important;
  text-align:center!important;
  white-space:normal!important;
  font-size:12px!important;
  line-height:1.15!important;
}

}


/* =====================================================
   HERO MOBILE — ORBIT STRUCTURE FINAL
   ===================================================== */

@media (max-width:760px){

  #beranda .orbit-ring{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:82vw!important;
    height:78%!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    z-index:10!important;
    pointer-events:none!important;
  }

  /* Sekarang langsung memakai seluruh Hero sebagai area posisi */
  #beranda .orbit{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    z-index:80!important;
    pointer-events:none!important;
  }

  #beranda .orbit-item{
    position:absolute!important;
    width:105px!important;
    transform:none!important;
    translate:none!important;
    z-index:90!important;
    pointer-events:auto!important;
  }

  /* KIRI */
  #beranda .item-1{
    left:2%!important;
    right:auto!important;
    top:27%!important;
  }

  #beranda .item-3{
    left:2%!important;
    right:auto!important;
    top:47%!important;
  }

  #beranda .item-5{
    left:2%!important;
    right:auto!important;
    top:67%!important;
  }

  /* KANAN */
  #beranda .item-2{
    right:2%!important;
    left:auto!important;
    top:27%!important;
  }

  #beranda .item-4{
    right:2%!important;
    left:auto!important;
    top:47%!important;
  }

  #beranda .item-6{
    right:2%!important;
    left:auto!important;
    top:67%!important;
  }

  #beranda .orbit-item span{
    width:105px!important;
    display:block!important;
    margin-top:7px!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.15!important;
  }
}


/* =====================================================
   HERO MOBILE — GUIDE SIZE FINAL
   ===================================================== */

@media (max-width:760px){

  /* Kembalikan ukuran guide seperti versi sebelumnya */
  #beranda .guide-cutout{
    width:76% !important;
    height:auto !important;
    max-height:82% !important;

    left:50% !important;
    right:auto !important;
    bottom:0 !important;

    transform:translateX(-50%) !important;
    transform-origin:bottom center !important;

    object-fit:contain !important;
    z-index:30 !important;
  }

}

/* =====================================================
   HERO RESPONSIVE SPLIT
   MOBILE = 3 kiri + 3 kanan
   DESKTOP = GUIDE LEBIH KECIL + ROUND ORBIT
   ===================================================== */

/* DESKTOP / TABLET */
@media (min-width:761px){

  #beranda .guide-cutout{
    left:50%!important;
    bottom:1%!important;

    width:auto!important;
    height:68%!important;
    max-height:72vh!important;
    max-width:38vw!important;

    transform:translateX(-50%)!important;
    object-fit:contain!important;
    object-position:center bottom!important;

    z-index:30!important;
  }

  #beranda .orbit-ring{
    position:absolute!important;

    left:50%!important;
    top:52%!important;

    width:min(58vw,760px)!important;
    height:min(76vh,720px)!important;

    transform:translate(-50%,-50%)!important;

    border-radius:50%!important;
    z-index:15!important;
  }

  #beranda .orbit{
    position:absolute!important;

    left:50%!important;
    top:52%!important;

    width:min(58vw,760px)!important;
    height:min(76vh,720px)!important;

    transform:translate(-50%,-50%)!important;

    z-index:60!important;
    pointer-events:none!important;
  }

  #beranda .orbit-item{
    width:118px!important;
    min-height:90px!important;

    transform:translate(-50%,-50%)!important;

    z-index:70!important;
    pointer-events:auto!important;
  }

  /* 6 titik melingkar */
  #beranda .item-1{
    left:25%!important;
    top:10%!important;
    right:auto!important;
    bottom:auto!important;
  }

  #beranda .item-2{
    left:75%!important;
    top:10%!important;
    right:auto!important;
    bottom:auto!important;
  }

  #beranda .item-3{
    left:4%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
  }

  #beranda .item-4{
    left:96%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
  }

  #beranda .item-5{
    left:25%!important;
    top:90%!important;
    right:auto!important;
    bottom:auto!important;
  }

  #beranda .item-6{
    left:75%!important;
    top:90%!important;
    right:auto!important;
    bottom:auto!important;
  }

}

/* MOBILE tetap gaya sekarang */
@media (max-width:760px){

  #beranda .guide-cutout{
    left:50%!important;
    bottom:0!important;

    width:76%!important;
    height:auto!important;
    max-height:82%!important;

    transform:translateX(-50%)!important;
  }

}

/* DESKTOP GUIDE — PROPORSI FINAL */
@media (min-width:761px){
  #beranda .guide-cutout{
    height:78% !important;
    max-height:78vh !important;
    max-width:44vw !important;
    bottom:1% !important;
  }
}

/* DESKTOP — GUIDE NAIK KE TENGAH ORBIT */
@media (min-width:761px){
  #beranda .guide-cutout{
    bottom:12% !important;
  }
}

/* HERO MOBILE — GUIDE NAIK 45% */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 45% !important;
  }
}

/* HERO MOBILE — GUIDE NAIK 55% */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 55% !important;
  }
}

/* === FINAL GUIDE POSITION MOBILE — NAIK 55% === */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -55%) !important;
  }
}

/* === GUIDE MOBILE — POSISI FINAL LEBIH NAIK === */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -70%) !important;
  }
}

/* GUIDE — CENTER DI DALAM ORBIT */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -35%) !important;
  }
}

/* GUIDE — POSISI FINAL */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -28%) !important;
  }
}

/* GUIDE — POSISI FINAL */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -20%) !important;
  }
}

/* GUIDE — KECILKAN TAMPILAN SAJA */
@media (max-width: 760px) {
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -28%) scale(0.80) !important;
    transform-origin: center bottom !important;
  }
}

/* =====================================================
   HERO DESKTOP — FINAL CLEAN LAYOUT
   Mobile tidak disentuh
   ===================================================== */
@media (min-width: 761px) {

  #beranda.hero-section {
    position: relative !important;
    height: 100vh !important;
    min-height: 720px !important;
    overflow: hidden !important;
  }

  #beranda .hero-title {
    left: 5% !important;
    top: 28% !important;
    width: 28vw !important;
    z-index: 90 !important;
  }

  #beranda .hero-title span {
    font-size: clamp(18px, 1.6vw, 28px) !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(48px, 5vw, 82px) !important;
    line-height: .85 !important;
  }

  #beranda .orbit-ring {
    left: 62% !important;
    top: 52% !important;

    width: min(620px, 48vw) !important;
    height: min(620px, 76vh) !important;

    transform: translate(-50%, -50%) !important;

    z-index: 15 !important;
  }

  #beranda .orbit {
    left: 62% !important;
    top: 52% !important;

    width: min(620px, 48vw) !important;
    height: min(620px, 76vh) !important;

    transform: translate(-50%, -50%) !important;

    z-index: 60 !important;
  }

  #beranda .guide-cutout {
    left: 62% !important;
    bottom: 13% !important;

    width: auto !important;
    height: 56vh !important;
    max-width: 34vw !important;

    transform: translateX(-50%) scale(.92) !important;
    transform-origin: center bottom !important;

    z-index: 30 !important;
  }

  #beranda .orbit-item {
    width: 112px !important;
    z-index: 70 !important;
  }

  #beranda .orbit-icon {
    width: 62px !important;
    height: 62px !important;
  }

  #beranda .orbit-item span {
    font-size: 12px !important;
  }

  /* ROUND POSITION */
  #beranda .item-1 {
    left: 25% !important;
    top: 8% !important;
  }

  #beranda .item-2 {
    left: 75% !important;
    top: 8% !important;
  }

  #beranda .item-3 {
    left: 3% !important;
    top: 50% !important;
  }

  #beranda .item-4 {
    left: 97% !important;
    top: 50% !important;
  }

  #beranda .item-5 {
    left: 25% !important;
    top: 92% !important;
  }

  #beranda .item-6 {
    left: 75% !important;
    top: 92% !important;
  }

}

/* DESKTOP — NAIKKAN WANITA SEDIKIT SAJA */
@media (min-width: 761px) {
  #beranda .guide-cutout {
    transform: translate(-50%, -18%) scale(.80) !important;
  }
}

/* DESKTOP — WANITA SEDIKIT LEBIH BESAR */
@media (min-width: 761px) {
  #beranda .guide-cutout {
    transform: translate(-50%, -18%) scale(.85) !important;
    transform-origin: center bottom !important;
  }
}

/* DESKTOP — NAIKKAN WANITA LAGI */
@media (min-width: 761px) {
  #beranda .guide-cutout {
    transform: translate(-50%, -25%) scale(.85) !important;
    transform-origin: center bottom !important;
  }
}

/* DESKTOP — POSISI WANITA NAIK LAGI, UKURAN TETAP */
@media (min-width: 761px) {
  #beranda .guide-cutout {
    transform: translate(-50%, -32%) scale(.85) !important;
    transform-origin: center bottom !important;
  }
}

/* DESKTOP — BESARKAN WANITA + ICON, POSISI TETAP */
@media (min-width: 761px) {

  /* Wanita lebih besar, posisi vertikal tetap */
  #beranda .guide-cutout {
    transform: translate(-50%, -32%) scale(.92) !important;
    transform-origin: center bottom !important;
  }

  /* Area setiap menu */
  #beranda .orbit-item {
    width: 125px !important;
  }

  /* Lingkaran icon */
  #beranda .orbit-icon {
    width: 72px !important;
    height: 72px !important;
  }

  /* Icon di dalam lingkaran */
  #beranda .orbit-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* Tulisan menu ikut sedikit diperbesar */
  #beranda .orbit-item span {
    font-size: 13px !important;
  }
}

/* DESKTOP — BESARKAN TAMPILAN WANITA + MENU */
@media (min-width: 761px) {

  #beranda .guide-cutout {
    transform: translate(-50%, -32%) scale(1.02) !important;
    transform-origin: center bottom !important;
  }

  #beranda .orbit-item {
    width: 140px !important;
  }

  #beranda .orbit-icon {
    width: 82px !important;
    height: 82px !important;
  }

  #beranda .orbit-icon svg {
    width: 34px !important;
    height: 34px !important;
  }

  #beranda .orbit-item span {
    font-size: 14px !important;
  }
}

/* DESKTOP — TURUNKAN WANITA + ORBIT BERSAMAAN
   UKURAN TETAP */
@media (min-width: 761px) {

  #beranda .guide-cutout {
    transform: translate(-50%, -32%) translateY(7vh) scale(1.02) !important;
    transform-origin: center bottom !important;
  }

  #beranda .orbit-ring,
  #beranda .orbit {
    margin-top: 7vh !important;
  }
}

/* DESKTOP — MAJUKAN/BESARKAN WANITA + ICON
   POSISI TANAH TETAP */
@media (min-width: 761px) {

  /* wanita: sedikit lebih dekat/besar */
  #beranda .guide-cutout {
    transform: translate(-50%, -32%) translateY(7vh) scale(1.08) !important;
    transform-origin: center bottom !important;
  }

  /* icon menu sedikit lebih besar */
  #beranda .orbit-item {
    width: 150px !important;
  }

  #beranda .orbit-icon {
    width: 88px !important;
    height: 88px !important;
  }

  #beranda .orbit-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  #beranda .orbit-item span {
    font-size: 15px !important;
  }

}

/* DESKTOP — BESARKAN ICON SAJA
   WANITA TIDAK DIUBAH */
@media (min-width: 761px) {

  #beranda .orbit-item {
    width: 165px !important;
  }

  #beranda .orbit-icon {
    width: 100px !important;
    height: 100px !important;
  }

  #beranda .orbit-icon svg {
    width: 42px !important;
    height: 42px !important;
  }

  #beranda .orbit-item span {
    font-size: 16px !important;
  }

}

/* DESKTOP — PERBESAR RADIUS LINGKARAN ORBIT SAJA */
@media (min-width: 761px) {

  #beranda .orbit-ring,
  #beranda .orbit {
    width: 115% !important;
    height: 115% !important;
  }

}

/* DESKTOP — PERBESAR RADIUS LINGKARAN ORBIT SAJA */
@media (min-width: 761px) {

  #beranda .orbit-ring,
  #beranda .orbit {
    width: 90% !important;
    height: 90% !important;
  }

}

/* DESKTOP — PERBESAR RADIUS LINGKARAN ORBIT SAJA */
@media (min-width: 761px) {

  #beranda .orbit-ring,
  #beranda .orbit {
    width: 65% !important;
    height: 65% !important;
  }

}

/* DESKTOP — PERBESAR RADIUS LINGKARAN ORBIT SAJA */
@media (min-width: 761px) {

  #beranda .orbit-ring,
  #beranda .orbit {
    width: 60% !important;
    height: 25% !important;
  }

}

/* DESKTOP — PERBESAR RADIUS LINGKARAN ORBIT SAJA */
@media (min-width: 761px) {

  #beranda .orbit-ring,
  #beranda .orbit {
    width: 65% !important;
    height: 35% !important;
  }

}

/* DESKTOP — PERBESAR RADIUS LINGKARAN ORBIT SAJA */
@media (min-width: 761px) {

  #beranda .orbit-ring,
  #beranda .orbit {
    width: 60% !important;
    height: 45% !important;
  }

}

/* =====================================================
   WAHANA DESKTOP — PERBESAR KONTEN KARTU SAJA
   HERO & GAMBAR TIDAK DISENTUH
   ===================================================== */
@media (min-width: 761px) {

  #wahana .wahana-card {
    border-radius: 24px !important;
  }

  #wahana .wahana-card h3 {
    font-size: clamp(24px, 2vw, 34px) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }

  #wahana .wahana-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #wahana .wahana-card .card-icon {
    width: 64px !important;
    height: 64px !important;
  }

  #wahana .wahana-card a {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  #wahana .wahana-grid {
    gap: 28px !important;
  }
}

/* =====================================================
   WAHANA DESKTOP — RAPikan POSISI ICON KARTU
   Hero, foto & ukuran kartu tidak disentuh
   ===================================================== */
@media (min-width: 761px) {

  #wahana .wahana-card {
    position: relative !important;
  }

  #wahana .wahana-card .card-icon {
    position: absolute !important;
    left: 18px !important;
    top: 56% !important;

    width: 64px !important;
    height: 64px !important;

    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  /* beri ruang agar judul tidak bertabrakan dengan icon */
  #wahana .wahana-card h3 {
    margin-top: 20px !important;
  }

}

/* =====================================================
   MENU MASAKAN — DESKTOP GRID RAPI
   HERO & WAHANA TIDAK DISENTUH
   ===================================================== */
@media (min-width: 761px) {

  #menu-masakan .food-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
    align-items: stretch !important;
  }

  #menu-masakan .food-card {
    width: 100% !important;
    height: 480px !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  #menu-masakan .food-card:first-child {
    grid-row: auto !important;
    grid-column: auto !important;
    height: 480px !important;
  }

  #menu-masakan .food-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #menu-masakan .food-card h3 {
    font-size: clamp(27px, 2.4vw, 38px) !important;
    line-height: 1.05 !important;
  }

  #menu-masakan .food-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* =====================================================
   MENU MASAKAN DESKTOP — GRID 2x2 YANG BENAR
   ===================================================== */
@media (min-width: 761px) {

  #masakan .food-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
    align-items: stretch !important;
  }

  #masakan .food-card,
  #masakan .food-card:first-child,
  #masakan .food-main {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: 480px !important;
    min-height: 480px !important;
    max-height: 480px !important;
  }

  #masakan .food-card h3 {
    font-size: clamp(27px, 2.4vw, 38px) !important;
    line-height: 1.05 !important;
  }

  #masakan .food-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* =====================================================
   WISATA EDUKASI — DESKTOP FINAL LAYOUT
   Hero, Wahana & Menu Masakan tidak disentuh
   ===================================================== */
@media (min-width: 761px) {

  #edukasi .education-grid {
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: 50px !important;
    align-items: center !important;
  }

  /* Bagian teks kiri */
  #edukasi .education-copy {
    align-self: center !important;
  }

  #edukasi .education-points {
    margin-top: 26px !important;
    display: grid !important;
    gap: 12px !important;
  }

  #edukasi .education-points > * {
    min-height: 66px !important;
    padding: 12px 20px !important;
  }

  /* Visual lingkaran Belajar */
  #edukasi .education-visual {
    width: min(460px, 38vw) !important;
    height: 460px !important;
    margin: 0 auto !important;
    position: relative !important;
    transform: scale(.88) !important;
    transform-origin: center center !important;
  }

  /* Kurangi ruang kosong menuju bagian berikutnya */
  #edukasi .edu-experience {
    margin-top: 35px !important;
    padding-top: 25px !important;
  }

  #edukasi .edu-experience-head {
    margin-bottom: 28px !important;
  }

  /* Grid foto bagian bawah */
  #edukasi .edu-photo-grid {
    gap: 24px !important;
  }
}

/* =====================================================
   EDUKASI DESKTOP — GRID FOTO RAPI
   Bagian atas Edukasi tidak disentuh
   ===================================================== */
@media (min-width: 761px) {

  #edukasi .edu-photo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  #edukasi .edu-photo-main {
    grid-column: 1 / -1 !important;
    height: 420px !important;
  }

  #edukasi .edu-photo:not(.edu-photo-main) {
    height: 300px !important;
  }

  #edukasi .edu-photo {
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  #edukasi .edu-photo-caption h3 {
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.05 !important;
  }
}

/* =====================================================
   GALERI DESKTOP — FINAL LAYOUT
   Hero, Wahana, Menu, Edukasi tidak disentuh
   ===================================================== */
@media (min-width: 761px) {

  #galeri.gallery-section {
    padding-bottom: 70px !important;
  }

  #galeri .gallery-heading {
    margin-bottom: 34px !important;
  }

  #galeri .gallery-track {
    display: flex !important;
    gap: 22px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 5vw 18px !important;
    scroll-snap-type: x proximity !important;
  }

  #galeri .gallery-card {
    flex: 0 0 38vw !important;
    max-width: 520px !important;
    min-width: 360px !important;
    height: 520px !important;
    scroll-snap-align: start !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  #galeri .gallery-card h3 {
    font-size: clamp(28px, 2.5vw, 38px) !important;
    line-height: 1.05 !important;
  }

  #galeri .gallery-tip {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  #tentang.about-section {
    padding-top: 70px !important;
  }
}

/* =====================================================
   TENTANG + CTA + FOOTER DESKTOP — FINAL SPACING
   Section sebelumnya tidak disentuh
   ===================================================== */
@media (min-width: 761px) {

  #tentang .about-final-quote {
    margin-top: 42px !important;
    margin-bottom: 50px !important;
    padding-bottom: 0 !important;
  }

  #tentang .about-final-quote h2,
  #tentang .about-final-quote h3 {
    margin-bottom: 0 !important;
  }

  /* Kurangi ruang kosong menuju CTA hijau */
  #tentang + section,
  #tentang .about-final-cta {
    margin-top: 0 !important;
  }

  /* CTA akhir sedikit lebih padat */
  .final-cta,
  .closing-section,
  .cta-section {
    min-height: 0 !important;
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }

  /* Footer desktop */
  footer {
    padding-top: 55px !important;
    padding-bottom: 28px !important;
  }
}

/* TENTANG DESKTOP — RAPATKAN AREA QUOTE */
@media (min-width: 761px) {
  #tentang .about-final-quote {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 55px !important;
    padding-bottom: 75px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* TENTANG DESKTOP — FINAL COMPACT QUOTE */
@media (min-width: 761px) {
  #tentang .about-final-quote {
    min-height: unset !important;
    height: auto !important;
    padding: 48px 0 65px !important;
    margin: 0 !important;
  }
}

/* =====================================================
   TENTANG DESKTOP — HILANGKAN RUANG KOSONG BERLEBIH
   ===================================================== */
@media (min-width: 761px) {

  #tentang .about-final-shell {
    padding-top: 70px !important;
    padding-bottom: 35px !important;
  }

  #tentang .about-final-quote {
    padding-top: 45px !important;
    padding-bottom: 20px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

}

/* HILANGKAN GARIS ORBIT SAJA — POSISI & ANIMASI TETAP */
#beranda .orbit-ring {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#beranda .orbit-ring::before,
#beranda .orbit-ring::after,
#beranda .orbit::before,
#beranda .orbit::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =====================================================
   HERO ICON — LEBIH JELAS, TIDAK PUTIH PUCAT
   Animasi & posisi tidak disentuh
   ===================================================== */

#beranda .orbit-icon,
#beranda .icon-circle {
  background: rgba(18, 55, 31, 0.82) !important;
  border: 2px solid rgba(226, 190, 93, 0.90) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 0 18px rgba(255, 255, 255, 0.06) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* SVG/icon dibuat lebih tegas */
#beranda .orbit-icon svg,
#beranda .icon-circle svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)) !important;
}

/* Tulisan menu */
#beranda .orbit-item span,
#beranda .menu-name {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.85),
    0 1px 2px rgba(0,0,0,.9) !important;
}

/* =====================================================
   HERO ICON MOBILE — FIX TARGET
   Hilangkan kotak luar, perjelas lingkaran icon
   ===================================================== */

@media (max-width: 760px) {

  /* Wrapper menu: jangan punya background/border */
  #beranda .orbit-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Elemen lingkaran langsung di dalam menu */
  #beranda .orbit-item > a,
  #beranda .orbit-item > button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Lingkaran icon */
  #beranda .orbit-item .orbit-icon,
  #beranda .orbit-item .icon-circle,
  #beranda .orbit-item a > div:first-child {
    background: rgba(15, 67, 38, 0.92) !important;
    border: 2px solid #d9b95f !important;
    border-radius: 50% !important;

    box-shadow:
      0 7px 20px rgba(0,0,0,.32),
      inset 0 0 14px rgba(255,255,255,.08) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }

  /* Icon putih terang */
  #beranda .orbit-item svg {
    color: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)) !important;
  }

  /* Nama menu */
  #beranda .orbit-item span {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow:
      0 2px 5px rgba(0,0,0,.9),
      0 1px 2px rgba(0,0,0,.9) !important;
  }
}

/* HERO MOBILE — FINAL WARNA ICON */
@media (max-width: 760px) {

  #beranda .orbit-item .icon-circle,
  #beranda .orbit-item .orbit-icon {
    background: linear-gradient(
      145deg,
      rgba(34, 91, 50, .98),
      rgba(10, 55, 30, .98)
    ) !important;

    border: 2px solid #e0bd5d !important;

    box-shadow:
      0 5px 0 rgba(7, 63, 34, .95),
      0 8px 18px rgba(0,0,0,.35),
      inset 0 1px 5px rgba(255,255,255,.18) !important;
  }

  #beranda .orbit-item .icon-circle svg,
  #beranda .orbit-item .orbit-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
    stroke-width: 2.4 !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)) !important;
  }
}

/* =====================================================
   HERO MOBILE — FINAL ICON COLOR FIX
   ===================================================== */
@media (max-width: 760px) {

  /* Lingkaran utama */
  #beranda .orbit .orbit-item .orbit-icon {
    position: relative !important;

    background: linear-gradient(
      145deg,
      #35753f 0%,
      #174d2c 55%,
      #0b3820 100%
    ) !important;

    background-color: #174d2c !important;

    border: 2px solid #e4bd55 !important;
    border-radius: 50% !important;

    box-shadow:
      0 5px 0 #0a4a2b,
      0 8px 18px rgba(0,0,0,.35),
      inset 0 2px 5px rgba(255,255,255,.16) !important;

    opacity: 1 !important;
  }

  /* MATIKAN LAPISAN PUTIH LAMA */
  #beranda .orbit .orbit-item .orbit-icon::before,
  #beranda .orbit .orbit-item .orbit-icon::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* SVG putih bersih dan jelas */
  #beranda .orbit .orbit-item .orbit-icon svg {
    position: relative !important;
    z-index: 5 !important;

    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;

    stroke-width: 2.3 !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.45)) !important;
  }
}

/* === HERO ICON MOBILE — OVERRIDE PALING AKHIR === */
@media (max-width: 760px) {

  #beranda .orbit .orbit-item .orbit-icon {
    background: #174d2c !important;
    border: 2px solid #e4bd55 !important;
  }

  #beranda .orbit .orbit-item .orbit-icon > svg {
    background: transparent !important;
    background-color: transparent !important;

    color: #ffffff !important;
    stroke: #ffffff !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;

    width: 29px !important;
    height: 29px !important;

    filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)) !important;
  }
}

/* =====================================================
   HERO MOBILE — TITLE + PERFECT ROUND ICON
   ===================================================== */

@media (max-width: 760px) {

  /* ---------- JUDUL HERO ---------- */

  #beranda .hero-title {
    position: absolute !important;

    top: clamp(18px, 4.5vh, 42px) !important;
    left: 50% !important;
    right: auto !important;

    width: min(94vw, 520px) !important;

    transform: translateX(-50%) !important;

    text-align: center !important;

    z-index: 80 !important;
    pointer-events: none !important;
  }

  /* Selamat Datang di */
  #beranda .hero-title > span {
    display: inline-block !important;

    margin: 0 0 7px !important;
    padding: 5px 15px 6px !important;

    font-size: clamp(15px, 4.2vw, 20px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;

    color: #ffffff !important;

    background: rgba(10, 55, 30, .55) !important;
    border: 1px solid rgba(230, 194, 91, .72) !important;
    border-radius: 999px !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;

    text-shadow: 0 2px 5px rgba(0,0,0,.55) !important;
  }

  /* NGREMBEL ASRI */
  #beranda .hero-title h1 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: clamp(34px, 10.5vw, 52px) !important;
    line-height: .94 !important;

    font-weight: 900 !important;
    letter-spacing: -.045em !important;

    white-space: nowrap !important;

    color: #ffffff !important;

    text-shadow:
      0 3px 5px rgba(0,0,0,.45),
      0 8px 22px rgba(0,0,0,.28) !important;
  }

  #beranda .hero-title h1 strong {
    color: #a9cf4f !important;
    font-weight: 900 !important;
  }


  /* ---------- ICON WAJIB BULAT ---------- */

  #beranda .orbit .orbit-item .orbit-icon {
    width: clamp(58px, 16vw, 72px) !important;
    height: clamp(58px, 16vw, 72px) !important;

    min-width: clamp(58px, 16vw, 72px) !important;
    min-height: clamp(58px, 16vw, 72px) !important;

    max-width: clamp(58px, 16vw, 72px) !important;
    max-height: clamp(58px, 16vw, 72px) !important;

    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;

    flex: 0 0 auto !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
  }

  /* SVG ikut menyesuaikan ukuran lingkaran */
  #beranda .orbit .orbit-item .orbit-icon > svg {
    width: 43% !important;
    height: 43% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;

    flex: none !important;
  }


  /* ---------- LABEL MENU ---------- */

  #beranda .orbit-item > span {
    display: block !important;

    margin-top: 8px !important;

    font-size: clamp(12px, 3.4vw, 15px) !important;
    line-height: 1.1 !important;

    white-space: nowrap !important;

    text-align: center !important;
  }
}


/* HP SANGAT KECIL */
@media (max-width: 360px) {

  #beranda .hero-title h1 {
    font-size: 32px !important;
  }

  #beranda .orbit .orbit-item .orbit-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }
}

/* =====================================================
   HERO MOBILE — ICON CENTER LOCK
   Lingkaran selalu bulat + SVG selalu tepat di tengah
   ===================================================== */

@media (max-width: 760px) {

  /* Wrapper setiap menu */
  #beranda .orbit-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Lingkaran hijau */
  #beranda .orbit .orbit-item .orbit-icon {
    position: relative !important;

    width: clamp(56px, 15vw, 70px) !important;
    height: clamp(56px, 15vw, 70px) !important;

    min-width: clamp(56px, 15vw, 70px) !important;
    min-height: clamp(56px, 15vw, 70px) !important;

    max-width: clamp(56px, 15vw, 70px) !important;
    max-height: clamp(56px, 15vw, 70px) !important;

    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    margin: 0 auto !important;

    border-radius: 50% !important;

    display: grid !important;
    place-items: center !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  /* SVG dikunci tepat di pusat lingkaran */
  #beranda .orbit .orbit-item .orbit-icon > svg {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: 42% !important;
    height: 42% !important;

    max-width: 42% !important;
    max-height: 42% !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;

    box-sizing: border-box !important;

    color: #fff !important;
    stroke: #fff !important;

    overflow: visible !important;
  }

  /* Tulisan tetap di tengah lingkaran */
  #beranda .orbit-item > span {
    width: max-content !important;
    max-width: 120px !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }
}

/* =====================================================
   HERO MOBILE — GREEN BACKGROUND TIDAK BOLEH KELUAR BORDER
   ===================================================== */

@media (max-width: 760px) {

  #beranda .orbit .orbit-item .orbit-icon {
    position: relative !important;

    width: clamp(56px, 15vw, 70px) !important;
    height: clamp(56px, 15vw, 70px) !important;
    aspect-ratio: 1 / 1 !important;

    border: 3px solid #e4bd55 !important;
    border-radius: 50% !important;

    background: transparent !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    isolation: isolate !important;
  }

  /* lapisan hijau selalu DI DALAM border emas */
  #beranda .orbit .orbit-item .orbit-icon::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 3px !important;

    border-radius: 50% !important;

    background: linear-gradient(
      145deg,
      #35753f 0%,
      #174d2c 55%,
      #0b3820 100%
    ) !important;

    z-index: 0 !important;
  }

  #beranda .orbit .orbit-item .orbit-icon::after {
    content: none !important;
    display: none !important;
  }

  /* ikon putih selalu di atas background hijau */
  #beranda .orbit .orbit-item .orbit-icon > svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 42% !important;
    height: 42% !important;

    z-index: 2 !important;

    background: transparent !important;
    color: #fff !important;
    stroke: #fff !important;
  }
}

/* HERO MOBILE — HILANGKAN LINGKARAN HIJAU DI BELAKANG */
@media (max-width: 760px) {

  #beranda .orbit .orbit-item .orbit-icon {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, .32),
      inset 0 2px 5px rgba(255, 255, 255, .12) !important;
  }
}

/* =====================================================
   HP LANDSCAPE — HERO RESPONSIVE
   ===================================================== */

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

  #beranda {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  /* Judul lebih compact di kiri atas */
  #beranda .hero-title {
    top: 5% !important;
    left: 5% !important;
    transform: none !important;

    width: 34vw !important;
    max-width: 330px !important;

    text-align: left !important;
    z-index: 80 !important;
  }

  #beranda .hero-title > span {
    font-size: clamp(11px, 1.7vw, 16px) !important;
    padding: 4px 11px 5px !important;
    margin-bottom: 5px !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(29px, 5vw, 48px) !important;
    line-height: .92 !important;
    white-space: nowrap !important;
  }


  /* Area wanita + menu dibuat besar lagi */
  #beranda .hero-stage {
    position: absolute !important;

    width: min(68vw, 650px) !important;
    height: 88vh !important;

    left: 61% !important;
    top: 55% !important;

    transform: translate(-50%, -50%) !important;
  }


  /* Wanita jangan mengecil seperti desktop */
  #beranda .guide-cutout {
    width: auto !important;
    height: 88% !important;

    left: 50% !important;
    bottom: -3% !important;

    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;
  }


  /* Orbit memenuhi area landscape */
  #beranda .orbit,
  #beranda .orbit-ring {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
  }


  /* Menu tetap compact & bulat */
  #beranda .orbit-item {
    width: 95px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #beranda .orbit .orbit-item .orbit-icon {
    width: clamp(48px, 7vw, 62px) !important;
    height: clamp(48px, 7vw, 62px) !important;

    min-width: clamp(48px, 7vw, 62px) !important;
    min-height: clamp(48px, 7vw, 62px) !important;

    max-width: clamp(48px, 7vw, 62px) !important;
    max-height: clamp(48px, 7vw, 62px) !important;

    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }

  #beranda .orbit-item > span {
    margin-top: 5px !important;
    font-size: clamp(9px, 1.5vw, 12px) !important;
    white-space: nowrap !important;
  }


  /* 6 posisi menu khusus landscape */

  #beranda .item-1 {
    left: 12% !important;
    top: 7% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-2 {
    right: 12% !important;
    top: 7% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-3 {
    left: 2% !important;
    top: 43% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-4 {
    right: 2% !important;
    top: 43% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-5 {
    left: 14% !important;
    bottom: 3% !important;
    right: auto !important;
    top: auto !important;
  }

  #beranda .item-6 {
    right: 14% !important;
    bottom: 3% !important;
    left: auto !important;
    top: auto !important;
  }


  /* Scroll hint jangan mengganggu */
  #beranda .scroll-hint {
    display: none !important;
  }
}

/* =====================================================
   FIX HP LANDSCAPE — OVERRIDE FINAL
   ===================================================== */

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

  #beranda {
    position: relative !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  /* Jangan pakai ukuran orbit desktop */
  #beranda .orbit {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Ring tidak dipakai */
  #beranda .orbit-ring {
    display: none !important;
  }

  /* CEWEK — dibesarkan khusus landscape HP */
  #beranda .guide-cutout {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    bottom: -10% !important;
    top: auto !important;

    width: auto !important;
    height: 118vh !important;

    max-width: none !important;
    max-height: none !important;

    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;

    object-fit: contain !important;
    z-index: 20 !important;
  }

  /* Semua menu punya ukuran tetap agar tidak membesar */
  #beranda .orbit-item {
    position: absolute !important;

    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    transform: none !important;
    z-index: 40 !important;
  }

  #beranda .orbit .orbit-item .orbit-icon {
    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    max-width: 54px !important;
    max-height: 54px !important;

    aspect-ratio: 1 / 1 !important;

    border-radius: 50% !important;
    box-sizing: border-box !important;

    margin: 0 auto !important;
    padding: 0 !important;

    flex: 0 0 54px !important;
    overflow: hidden !important;
  }

  #beranda .orbit .orbit-item .orbit-icon > svg {
    width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
  }

  #beranda .orbit-item > span {
    margin-top: 4px !important;

    font-size: 10px !important;
    line-height: 1.05 !important;

    width: max-content !important;
    max-width: 100px !important;

    text-align: center !important;
    white-space: nowrap !important;
  }

  /* posisi 6 icon — tidak boleh keluar layar */

  #beranda .item-1 {
    left: 14% !important;
    top: 12% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-2 {
    right: 14% !important;
    top: 12% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-3 {
    left: 4% !important;
    top: 43% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-4 {
    right: 4% !important;
    top: 43% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-5 {
    left: 14% !important;
    bottom: 5% !important;
    right: auto !important;
    top: auto !important;
  }

  #beranda .item-6 {
    right: 14% !important;
    bottom: 5% !important;
    left: auto !important;
    top: auto !important;
  }

  /* Judul dibuat compact */
  #beranda .hero-title {
    top: 4% !important;
    left: 3% !important;
    right: auto !important;

    width: 35vw !important;

    transform: none !important;
    text-align: left !important;

    z-index: 60 !important;
  }

  #beranda .hero-title > span {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(28px, 4.8vw, 44px) !important;
    white-space: nowrap !important;
  }
}

/* =====================================================
   FINAL HP LANDSCAPE
   Portrait tidak disentuh
   ===================================================== */

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

  /* HERO harus pas dengan layar landscape */
  #beranda {
    position: relative !important;
    width: 100% !important;

    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    overflow: hidden !important;
  }

  #beranda .hero-background,
  #beranda .hero-shade {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
  }


  /* =========================
     WANITA
     ========================= */

  #beranda .guide-cutout {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 0 !important;

    width: auto !important;

    /* sebelumnya 118vh — ini penyebab terpotong */
    height: 91dvh !important;

    max-width: none !important;
    max-height: 91dvh !important;

    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;

    object-fit: contain !important;

    z-index: 20 !important;
  }


  /* =========================
     ORBIT
     ========================= */

  #beranda .orbit {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    transform: none !important;

    z-index: 40 !important;
  }

  #beranda .orbit-ring {
    display: none !important;
  }


  /* =========================
     ITEM MENU
     ========================= */

  #beranda .orbit-item {
    position: absolute !important;

    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;

    height: auto !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;

    z-index: 45 !important;
  }


  /* Lingkaran diperkecil */
  #beranda .orbit .orbit-item .orbit-icon {
    position: relative !important;

    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;

    max-width: 44px !important;
    max-height: 44px !important;

    flex: 0 0 44px !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border-width: 2px !important;
    border-radius: 50% !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }


  /* background hijau tetap di dalam emas */
  #beranda .orbit .orbit-item .orbit-icon::before {
    inset: 2px !important;
    border-radius: 50% !important;
  }


  /* Ikon putih juga diperkecil */
  #beranda .orbit .orbit-item .orbit-icon > svg {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 19px !important;
    height: 19px !important;

    max-width: 19px !important;
    max-height: 19px !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  /* Hilangkan kapsul hijau pada tulisan */
  #beranda .orbit-item > span {
    display: block !important;

    width: max-content !important;
    max-width: 105px !important;

    margin: 5px auto 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: 10px !important;
    line-height: 1 !important;

    color: #fff !important;

    white-space: nowrap !important;
    text-align: center !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.9),
      0 2px 5px rgba(0,0,0,.6) !important;
  }


  /* =========================
     POSISI 6 MENU
     ========================= */

  #beranda .item-1 {
    left: 18% !important;
    top: 17% !important;

    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-2 {
    right: 18% !important;
    top: 17% !important;

    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-3 {
    left: 7% !important;
    top: 47% !important;

    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-4 {
    right: 7% !important;
    top: 47% !important;

    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-5 {
    left: 18% !important;
    top: 74% !important;

    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-6 {
    right: 18% !important;
    top: 74% !important;

    left: auto !important;
    bottom: auto !important;
  }


  /* =========================
     JUDUL
     ========================= */

  #beranda .hero-title {
    position: absolute !important;

    top: 5% !important;
    left: 3.5% !important;
    right: auto !important;

    width: auto !important;
    max-width: 250px !important;

    transform: none !important;

    text-align: left !important;

    z-index: 60 !important;
  }

  #beranda .hero-title > span {
    font-size: 11px !important;
    padding: 3px 9px !important;
  }

  #beranda .hero-title h1 {
    margin-top: 5px !important;

    font-size: clamp(25px, 4vw, 38px) !important;
    line-height: .92 !important;

    white-space: nowrap !important;
  }


  #beranda .hero-scroll,
  #beranda .scroll-hint {
    display: none !important;
  }
}

/* HP LANDSCAPE — NAIKKAN POSISI CEWEK SEDIKIT */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    bottom: 4% !important;
  }
}

/* HP LANDSCAPE — NAIKKAN POSISI CEWEK SEDIKIT */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    bottom: 14% !important;
  }
}

/* HP LANDSCAPE — NAIKKAN POSISI CEWEK SEDIKIT */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    bottom: 24% !important;
  }
}

/* =====================================================
   HP LANDSCAPE — ICON LEBIH KECIL & MENGELILINGI CEWEK
   ===================================================== */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

  /* area tiap menu */
  #beranda .orbit-item {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  /* lingkaran emas + hijau */
  #beranda .orbit .orbit-item .orbit-icon {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;

    flex: 0 0 38px !important;

    border-width: 2px !important;
    border-radius: 50% !important;
  }

  /* hijau tetap di dalam border emas */
  #beranda .orbit .orbit-item .orbit-icon::before {
    inset: 2px !important;
    border-radius: 50% !important;
  }

  /* icon putih */
  #beranda .orbit .orbit-item .orbit-icon > svg {
    width: 16px !important;
    height: 16px !important;

    max-width: 16px !important;
    max-height: 16px !important;
  }

  /* nama menu */
  #beranda .orbit-item > span {
    margin-top: 4px !important;
    font-size: 9px !important;
  }


  /* ===== POSISI MENGELILINGI CEWEK ===== */

  /* kiri atas */
  #beranda .item-1 {
    left: 31% !important;
    top: 18% !important;
  }

  /* kanan atas */
  #beranda .item-2 {
    right: 31% !important;
    top: 18% !important;
  }

  /* kiri tengah */
  #beranda .item-3 {
    left: 25% !important;
    top: 45% !important;
  }

  /* kanan tengah */
  #beranda .item-4 {
    right: 25% !important;
    top: 45% !important;
  }

  /* kiri bawah */
  #beranda .item-5 {
    left: 31% !important;
    top: 71% !important;
  }

  /* kanan bawah */
  #beranda .item-6 {
    right: 31% !important;
    top: 71% !important;
  }
}

/* HP LANDSCAPE — KUNCI UKURAN CEWEK SAAT SCROLL */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    transform: translateX(-50%) !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* =====================================================
   LANDSCAPE HP — UKURAN WANITA STABIL SAAT SCROLL
   Jangan gunakan vh/dvh untuk ukuran gambar
   ===================================================== */

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

  #beranda .guide-cutout {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 4% !important;

    /* PENTING: berdasarkan lebar, bukan tinggi browser */
    height: clamp(260px, 43vw, 390px) !important;
    width: auto !important;

    max-height: none !important;
    max-width: none !important;

    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;

    scale: 1 !important;

    transition: none !important;
    animation: none !important;

    object-fit: contain !important;
  }
}

/* HP LANDSCAPE — NAIKKAN WANITA AGAR PAS DI TENGAH ICON */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    bottom: 9% !important;
  }
}

/* HP LANDSCAPE — NAIKKAN WANITA AGAR PAS DI TENGAH ICON */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    bottom: 19% !important;
  }
}

/* HP LANDSCAPE — NAIKKAN WANITA AGAR PAS DI TENGAH ICON */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .guide-cutout {
    bottom: 22% !important;
  }
}

/* =====================================================
   HP LANDSCAPE — GESER KOMPOSISI KE KANAN + NYALAKAN LINGKARAN ANIMASI
   Hanya HP (tinggi <=431px), tidak mempengaruhi tablet/desktop
   ===================================================== */
@media (orientation: landscape) and (max-height: 431px) {

  /* geser seluruh icon (anak .orbit) ke kanan */
  #beranda .orbit {
    transform: translateX(9vw) !important;
  }

  /* geser wanita ke kanan (dari 50% -> 59%) */
  #beranda .guide-cutout {
    left: 59% !important;
  }

  /* lingkaran animasi: tampilkan kembali & putar */
  #beranda .orbit-ring {
    display: block !important;

    position: absolute !important;

    left: 59% !important;
    top: 50% !important;

    width: min(66vw, 520px) !important;
    height: min(82vh, 320px) !important;

    aspect-ratio: auto !important;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    z-index: 5 !important;

    animation: none !important;
  }

  #beranda .orbit-ring::before,
  #beranda .orbit-ring::after {
    content: "" !important;

    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;

    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  #beranda .orbit-ring::before {
    inset: -7px !important;

    background: conic-gradient(from 0deg, transparent 0deg 40deg, rgba(255, 215, 0, 0.95) 40deg 100deg, transparent 100deg 360deg) !important;

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)) !important;

    animation: naOrbitSpin 18s linear infinite, naOrbitPulse 3.8s ease-in-out infinite alternate !important;
  }

  #beranda .orbit-ring::after {
    inset: -16px !important;

    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.45) 0deg 6deg, transparent 6deg 30deg) !important;

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px)) !important;

    animation: naOrbitSpin 28s linear infinite reverse !important;
  }

  /* animasi ikon: jatuh bounce + mengambang, urut per menu */
  #beranda .item-1 { --menu-delay: .05s; }
  #beranda .item-2 { --menu-delay: .16s; }
  #beranda .item-3 { --menu-delay: .27s; }
  #beranda .item-4 { --menu-delay: .38s; }
  #beranda .item-5 { --menu-delay: .49s; }
  #beranda .item-6 { --menu-delay: .60s; }

  #beranda .orbit-item > .orbit-icon,
  #beranda .orbit-item > span {
    animation:
      ngrembelDesktopDrop
        1.05s
        cubic-bezier(.22, .85, .32, 1.22)
        var(--menu-delay)
        both,
      ngrembelDesktopFloat
        2.5s
        ease-in-out
        calc(var(--menu-delay) + 1.20s)
        infinite
        alternate
        !important;
    will-change: transform, opacity !important;
  }
}

/* =========================================================
   DESKTOP HERO - KOMPOSISI WANITA + 6 ICON
   Tidak mempengaruhi HP portrait / landscape
   ========================================================= */

@media (min-width: 1024px) and (min-height: 650px), (min-width: 1024px) and (max-height: 649px) {

  #beranda {
    position: relative !important;
    overflow: hidden !important;
  }

  #beranda .guide-cutout {
    position: absolute !important;
    left: 61% !important;
    right: auto !important;
    top: auto !important;
    bottom: 4% !important;
    width: auto !important;
    height: clamp(475px, 66vh, 680px) !important;
    max-width: none !important;
    max-height: 74vh !important;
    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;
    object-fit: contain !important;
    z-index: 20 !important;
  }

  #beranda .orbit {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    z-index: 40 !important;
    pointer-events: none !important;
  }

  #beranda .orbit-item {
    position: absolute !important;
    width: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: auto !important;
    z-index: 45 !important;
  }

  #beranda .orbit .orbit-item .orbit-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    flex: 0 0 58px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #beranda .orbit .orbit-item .orbit-icon > svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
  }

  #beranda .orbit-item > span {
    width: max-content !important;
    max-width: 125px !important;
    margin: 6px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 3px 8px rgba(0, 0, 0, .55) !important;
  }

  #beranda .item-1 {
    left: 43% !important;
    top: 28% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-2 {
    right: 17% !important;
    top: 28% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-3 {
    left: 35% !important;
    top: 52% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-4 {
    right: 9% !important;
    top: 52% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .item-5 {
    left: 43% !important;
    top: 75% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #beranda .item-6 {
    right: 17% !important;
    top: 75% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #beranda .orbit-ring {
    display: none !important;
  }
}

/* =====================================================
   DESKTOP - ICON ORBIT COMPACT
   ===================================================== */
@media (min-width: 1024px) and (min-height: 650px) {

  #beranda .orbit-item {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  #beranda .orbit .orbit-item .orbit-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    border-width: 2px !important;
    border-radius: 50% !important;
  }

  #beranda .orbit .orbit-item .orbit-icon::before {
    inset: 2px !important;
  }

  #beranda .orbit .orbit-item .orbit-icon > svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

  #beranda .orbit-item > span {
    margin-top: 5px !important;
    font-size: 11px !important;
  }
}

/* DESKTOP - IZINKAN GSAP MENGGERAKKAN ICON */
@media (min-width: 1024px) and (min-height: 650px) {

  #beranda .orbit-item {
    transition:
      filter .25s ease,
      opacity .25s ease !important;
  }

  #beranda .orbit-item:hover {
    filter: brightness(1.18);
  }

  #beranda .orbit-item:hover .orbit-icon {
    box-shadow:
      0 8px 22px rgba(0, 0, 0, .30),
      0 0 18px rgba(228, 189, 85, .22) !important;
  }
}

/* =====================================================
   DESKTOP - ICON COMPACT + ANIMASI JATUH / BOUNCE / FLOAT
   ===================================================== */

@media (min-width: 1024px) and (min-height: 650px), (min-width: 1024px) and (max-height: 649px) {

  #beranda .orbit-item {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  #beranda .orbit .orbit-item .orbit-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    border-width: 2px !important;
    border-radius: 50% !important;
  }

  #beranda .orbit .orbit-item .orbit-icon > svg {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }

  #beranda .orbit-item > span {
    margin-top: 4px !important;
    font-size: 10px !important;
  }

  #beranda .item-1 { --menu-delay: .05s; }
  #beranda .item-2 { --menu-delay: .16s; }
  #beranda .item-3 { --menu-delay: .27s; }
  #beranda .item-4 { --menu-delay: .38s; }
  #beranda .item-5 { --menu-delay: .49s; }
  #beranda .item-6 { --menu-delay: .60s; }

  #beranda .orbit-item > .orbit-icon,
  #beranda .orbit-item > span {
    animation:
      ngrembelDesktopDrop
        1.05s
        cubic-bezier(.22, .85, .32, 1.22)
        var(--menu-delay)
        both,
      ngrembelDesktopFloat
        2.5s
        ease-in-out
        calc(var(--menu-delay) + 1.20s)
        infinite
        alternate
        !important;
    will-change: transform, opacity !important;
  }
}

/* Jatuh dari atas + bounce */
@keyframes ngrembelDesktopDrop {
  0% {
    opacity: 0;
    transform: translateY(-150px) scale(.72);
  }

  58% {
    opacity: 1;
    transform: translateY(12px) scale(1.04);
  }

  72% {
    transform: translateY(-7px) scale(.98);
  }

  84% {
    transform: translateY(4px) scale(1.01);
  }

  93% {
    transform: translateY(-2px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Setelah mendarat mengambang lembut */
@keyframes ngrembelDesktopFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-7px);
  }
}

/* =====================================================
   WISATA EDUKASI - POSISI FOTO LINGKARAN DARI ATAS
   ===================================================== */

#edukasi .edu-circle img,
#edukasi .edu-center img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

#edukasi .circle-one img,
#edukasi .circle-two img,
#edukasi .circle-three img,
#edukasi .edu-center img {
  object-position: center top !important;
}

/* =====================================================
   WISATA EDUKASI - BACKGROUND FOTO MULAI DARI ATAS
   ===================================================== */

#edukasi .edu-circle,
#edukasi .edu-center,
#edukasi .circle-one,
#edukasi .circle-two,
#edukasi .circle-three {
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

#edukasi .edu-circle::before,
#edukasi .edu-circle::after,
#edukasi .edu-center::before,
#edukasi .edu-center::after {
  background-position: center top !important;
  background-size: cover !important;
}

/* =====================================================
   EDUKASI DESKTOP - LINGKARAN LEBIH LEBAR & TIDAK TUMPUK
   ===================================================== */

@media (min-width: 1024px) {

  #edukasi .education-visual {
    position: relative !important;
    width: 520px !important;
    max-width: 100% !important;
    height: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #edukasi .edu-center {
    position: absolute !important;
    width: 170px !important;
    height: 170px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
  }

  #edukasi .circle-one {
    position: absolute !important;
    width: 112px !important;
    height: 112px !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
  }

  #edukasi .circle-two {
    position: absolute !important;
    width: 112px !important;
    height: 112px !important;
    left: 7% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
  }

  #edukasi .circle-three {
    position: absolute !important;
    width: 112px !important;
    height: 112px !important;
    right: 7% !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
  }

  #edukasi .edu-circle,
  #edukasi .edu-center {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================
   EDUKASI DESKTOP - PAKSA BULAT + JANGAN BERPOTONGAN
   ===================================================== */

@media (min-width: 1024px) {

  #edukasi .education-visual {
    position: relative !important;
    width: 560px !important;
    max-width: 560px !important;
    height: 480px !important;
    min-height: 480px !important;
    margin: 0 auto !important;
  }

  #edukasi .edu-circle,
  #edukasi .edu-center,
  #edukasi .circle-one,
  #edukasi .circle-two,
  #edukasi .circle-three,
  #edukasi .circle-four {
    box-sizing: border-box !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #edukasi .edu-center {
    position: absolute !important;
    width: 160px !important;
    height: 160px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #edukasi .circle-one {
    position: absolute !important;
    width: 108px !important;
    height: 108px !important;
    left: 50% !important;
    top: 2% !important;
    transform: translateX(-50%) !important;
  }

  #edukasi .circle-two {
    position: absolute !important;
    width: 108px !important;
    height: 108px !important;
    left: 5% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #edukasi .circle-three {
    position: absolute !important;
    width: 108px !important;
    height: 108px !important;
    right: 5% !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #edukasi .circle-four {
    position: absolute !important;
    width: 108px !important;
    height: 108px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 2% !important;
    transform: translateX(-50%) !important;
  }

  #edukasi .circle-four:hover {
    transform: translateX(-50%) translateY(-7px) scale(1.08) !important;
  }

  #edukasi .circle-one:hover {
    transform: translateX(-50%) translateY(-7px) scale(1.08) !important;
  }

  #edukasi .circle-two:hover,
  #edukasi .circle-three:hover {
    transform: translateY(calc(-50% - 7px)) scale(1.08) !important;
  }

  #edukasi .edu-circle img,
  #edukasi .edu-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 50% !important;
  }
}

/* =====================================================
   PENGALAMAN EDUKATIF — FOTO MULAI DARI ATAS
   ===================================================== */

#edukasi .edu-photo,
#edukasi .edu-photo-main,
#edukasi .edu-photo-wide {
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* kalau memakai tag img */
#edukasi .edu-photo img,
#edukasi .edu-photo-main img,
#edukasi .edu-photo-wide img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center top !important;
}


/* =====================================================
   BACK TO TOP BUTTON
   ===================================================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 88px;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 2px solid #e4bd55;
  border-radius: 50%;

  background: rgba(18, 77, 44, .94);
  color: #ffffff;

font-weight: 700;
  line-height: 1;

  cursor: pointer;

  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.85);

  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease,
    background .2s ease;

  box-shadow:
    0 6px 20px rgba(0,0,0,.28),
    0 0 0 4px rgba(228,189,85,.10);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform .25s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: #23663b;
  transform: translateY(-4px);
}

.back-to-top:hover svg {
  transform: translateY(-3px);
}

.back-to-top:active {
  transform: scale(.92);
}

/* MENU MASAKAN - GAMBAR DINAMIS DARI ADMIN */
#masakan .food-grid .food-card.has-dynamic-image {
  background-image:
    linear-gradient(
      to top,
      rgba(15,28,18,.98) 0%,
      rgba(15,28,18,.88) 35%,
      rgba(15,28,18,.12) 70%,
      transparent 100%
    ),
    var(--food-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* HP */
@media (max-width: 760px) {
  .back-to-top {
    width: 42px;
    height: 42px;

    right: 16px;
    bottom: 80px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* HERO DESKTOP - PROPORSI IKON DAN LINGKARAN */
@media (min-width: 1024px) and (min-height: 650px) {
  #beranda .orbit .orbit-item .orbit-icon {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
    flex-basis: 66px !important;
  }

  #beranda .orbit .orbit-item .orbit-icon > .hero-menu-emoji {
    font-size: 37px !important;
  }

  #beranda .orbit .orbit-item > span {
    margin-top: 7px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    color: #fff !important;
    text-shadow:
      0 2px 3px rgba(0,0,0,.95),
      0 3px 9px rgba(0,0,0,.78) !important;
  }
}

/* Logo dinamis pada Hero halaman utama */
#beranda .hero-brand-logo {
  display: block !important;
  position: absolute !important;
  z-index: 95 !important;
  top: 24px !important;
  left: 28px !important;
  width: clamp(150px, 15vw, 220px) !important;
  max-height: 96px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.38));
}

@media (max-width: 760px) and (orientation: portrait) {
  #beranda .hero-brand-logo {
    top: 12px !important;
    left: 14px !important;
    width: clamp(100px, 28vw, 128px) !important;
    max-height: 60px !important;
    margin: 0 !important;
    object-position: left center !important;
  }

  #beranda .hero-title {
    top: clamp(76px, 11vh, 98px) !important;
  }
}

/* Tablet kecil (480-760px): beri jarak judul dari logo, tanpa memengaruhi HP/desktop */
@media (min-width: 480px) and (max-width: 760px) and (orientation: portrait) {
  #beranda .hero-title {
    top: clamp(170px, 24vh, 230px) !important;
  }
}

/* Tablet landscape pendek (700-1023px x 431-650px): turunkan judul agar tidak menabrak logo */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1023px) and (min-height: 431px) and (max-height: 650px) {
  #beranda .hero-title {
    top: clamp(120px, 25vh, 240px) !important;
  }
}

/* Tablet landscape pendek lebar (1024-1439px x <=650px): samakan posisi judul */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1439px) and (max-height: 650px) {
  #beranda .hero-title {
    top: clamp(120px, 25vh, 240px) !important;
  }
}

@media (max-width: 740px) and (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .hero-brand-logo {
    display: none !important;
  }
}

/* Wahana: tepian atas menyatu lembut dengan foto */
#wahana .wahana-card {
  border-top-color: transparent !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(171,211,92,.24), transparent 34%),
    linear-gradient(145deg, #39784a 0%, #195536 50%, #073522 100%) !important;
}

/* Foto ikut memudar, sehingga tidak ada garis keras menuju area hijau */
#wahana .wahana-card::before {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 54%,
    rgba(0,0,0,.94) 64%,
    rgba(0,0,0,.72) 75%,
    rgba(0,0,0,.34) 86%,
    transparent 97%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 54%,
    rgba(0,0,0,.94) 64%,
    rgba(0,0,0,.72) 75%,
    rgba(0,0,0,.34) 86%,
    transparent 97%
  ) !important;
}

#wahana .wahana-card::after {
  background:
    radial-gradient(circle at 88% 88%, rgba(129,174,61,.23), transparent 35%),
    linear-gradient(
      to top,
      rgba(4,35,22,.98) 0%,
      rgba(9,59,36,.91) 24%,
      rgba(25,84,48,.61) 44%,
      rgba(24,73,43,.28) 57%,
      rgba(24,73,43,.10) 62%,
      rgba(24,73,43,.025) 70%,
      transparent 81%,
      transparent 100%
    ) !important;
}

@media (max-width: 760px) {
  #wahana .wahana-card::before {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0,0,0,.90) 61%,
      rgba(0,0,0,.62) 73%,
      rgba(0,0,0,.26) 85%,
      transparent 97%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0,0,0,.90) 61%,
      rgba(0,0,0,.62) 73%,
      rgba(0,0,0,.26) 85%,
      transparent 97%
    ) !important;
  }

  #wahana .wahana-card::after {
    background:
      radial-gradient(circle at 86% 90%, rgba(145,190,70,.24), transparent 37%),
      linear-gradient(
        to top,
        rgba(4,32,20,.99) 0%,
        rgba(9,60,36,.95) 28%,
        rgba(25,84,48,.68) 47%,
        rgba(20,68,41,.31) 60%,
        rgba(20,68,41,.10) 64%,
        rgba(20,68,41,.02) 72%,
        transparent 82%,
        transparent 100%
      ) !important;
  }
}

/* Tombol menuju halaman detail pada setiap kartu Menu Masakan */
#masakan .food-detail-link {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #fff;
  background: rgba(8,43,25,.52);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease;
}

#masakan .food-detail-link:hover {
  transform: translateY(-3px);
  background: rgba(15,76,43,.88);
}

#wahana .wahana-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, color .25s ease;
}

#wahana .wahana-detail-link:hover {
  transform: translateX(4px);
  color: #d9eb87;
}

.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:1000;display:flex;align-items:center;gap:9px;padding:13px 18px;border-radius:999px;background:#20a85a;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(4,50,27,.28);transition:transform .25s ease,box-shadow .25s ease}.floating-whatsapp svg{width:23px;height:23px;fill:currentColor}.floating-whatsapp b{font-size:14px}.floating-whatsapp:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(4,50,27,.38)}

@media(max-width:600px){.floating-whatsapp{right:14px;bottom:14px;width:54px;height:54px;padding:0;justify-content:center}.floating-whatsapp b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* =========================================================
   LOCAL PRESENTATION THEME — acuan hero Ngrembel Asri
   ========================================================= */
:root {
  --na-forest: #173f16;
  --na-forest-deep: #071d0c;
  --na-leaf: #7eaa35;
  --na-lime: #b9d85b;
  --na-gold: #f1cf66;
  --na-cream: #fff9dc;
}

#beranda .hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 13, 5, .68) 0%, rgba(2, 13, 5, .12) 42%, rgba(2, 13, 5, .30) 100%),
    linear-gradient(0deg, rgba(2, 13, 5, .52) 0%, transparent 34%) !important;
}

#beranda .hero-title > span {
  font-family: "Segoe Script", "Brush Script MT", cursive !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .75) !important;
}

#beranda .hero-title h1 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, .72),
    1px 1px 0 rgba(15, 33, 17, .76),
    2px 3px 0 rgba(7, 20, 10, .50),
    0 7px 18px rgba(0, 0, 0, .62) !important;
}

#beranda .hero-title h1 strong {
  color: #8eb640 !important;
  background: linear-gradient(
    180deg,
    #c0df59 0%,
    #94bd35 34%,
    #628c23 67%,
    #254d14 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .35px rgba(31, 73, 16, .58);
  text-shadow:
    0 -1px 0 rgba(222, 247, 132, .76),
    1px 2px 0 rgba(48, 82, 17, .88),
    2px 4px 0 rgba(21, 50, 8, .68),
    0 8px 21px rgba(16, 43, 5, .68) !important;
}

#beranda .orbit-ring {
  border-color: rgba(255, 230, 145, .68) !important;
  box-shadow:
    0 0 8px rgba(255, 225, 125, .60),
    0 0 28px rgba(255, 206, 79, .34),
    inset 0 0 18px rgba(255, 230, 145, .18) !important;
}

#beranda .orbit .orbit-item .orbit-icon {
  color: #123815 !important;
  border-color: rgba(255, 223, 120, .94) !important;
  background:
    radial-gradient(circle at 35% 28%, #fffef0 0%, #fff3bd 62%, #eed06e 100%) !important;
  box-shadow:
    0 0 0 3px rgba(255, 249, 210, .44),
    0 0 16px rgba(255, 225, 119, .92),
    0 0 38px rgba(255, 196, 52, .50),
    inset 0 1px 8px rgba(255, 255, 255, .88) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

#beranda .orbit-item > span {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(235, 207, 91, .60) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(32, 78, 22, .96), rgba(10, 44, 16, .96)) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255,255,255,.13) !important;
  font-family: "Arial Narrow", Arial, sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#beranda .orbit-item:hover .orbit-icon {
  transform: translateY(-5px) scale(1.10) !important;
  box-shadow:
    0 0 0 4px rgba(255, 249, 210, .48),
    0 0 25px rgba(255, 230, 132, 1),
    0 0 56px rgba(255, 188, 42, .64) !important;
}

.section-kicker,
.final-cta-kicker {
  color: #a6c652 !important;
  letter-spacing: .19em !important;
}

.section-head h2,
.education-copy h2,
.about-final-heading h2,
.location-copy h2 {
  font-family: Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
}

.wahana-tabs button,
.food-category,
.food-highlight a,
.final-cta-actions a {
  border-radius: 999px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

.wahana-tabs button.active,
.food-category.active,
.food-highlight a,
.final-primary {
  color: #fff !important;
  border-color: rgba(235, 207, 91, .70) !important;
  background: linear-gradient(135deg, #628f29, #285d22) !important;
  box-shadow: 0 9px 24px rgba(30, 78, 25, .28), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.wahana-tabs button:hover,
.food-category:hover,
.food-highlight a:hover,
.final-cta-actions a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 13px 28px rgba(25, 69, 22, .32), 0 0 18px rgba(190, 216, 91, .20) !important;
}

.final-cta {
  min-height: 620px !important;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(3, 23, 10, .94), rgba(12, 58, 25, .82), rgba(3, 23, 10, .94)),
    url("../../images/bg-ngrembel.webp") center 58% / cover no-repeat !important;
}

.final-cta::before,
.final-cta::after {
  border-color: rgba(241, 207, 102, .28) !important;
  box-shadow: 0 0 34px rgba(241, 207, 102, .10);
}

.final-cta h2 {
  font-family: Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 5px 24px rgba(0, 0, 0, .46);
}

.final-cta p {
  color: rgba(255, 255, 255, .86) !important;
}

.final-secondary {
  border-color: rgba(241, 207, 102, .62) !important;
  background: rgba(7, 37, 16, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

@media (max-width: 760px) {
  #beranda .hero-title > span {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.96) !important;
    font-family: "Segoe Script", "Brush Script MT", cursive !important;
    font-size: clamp(17px, 5vw, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.92), 0 5px 14px rgba(0,0,0,.58) !important;
  }

  #beranda .hero-title h1 {
    max-width: 92vw !important;
    font-size: clamp(32px, 9.6vw, 44px) !important;
    font-weight: 700 !important;
    line-height: .94 !important;
    letter-spacing: -.03em !important;
    white-space: normal !important;
  }

  #beranda .hero-title h1 strong {
    font-weight: 700 !important;
  }

  #beranda .orbit-item > span {
    width: auto !important;
    min-width: 0 !important;
    max-width: 96px !important;
    padding: 4px 9px !important;
    white-space: normal !important;
  }

  .final-cta {
    min-height: 540px !important;
  }

  .final-cta-actions a {
    width: min(100%, 290px) !important;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #beranda .hero-title h1 {
    font-size: clamp(28px, 9vw, 33px) !important;
    line-height: .96 !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #beranda .hero-title h1 {
    font-size: clamp(25px, 4vw, 37px) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 1024px) and (min-height: 650px) {
  #beranda .orbit-item > span {
    position: absolute !important;
    top: 80px !important;
    left: 50% !important;
    translate: -50% 0 !important;
    margin: 0 !important;
  }
}

/* Navigasi Hero desktop seperti referensi */
.hero-top-navigation {
  display: none;
}

.hero-menu-toggle {
  display: none;
}

@media (max-width: 1023px) {
  #beranda .hero-top-navigation {
    position: absolute;
    z-index: 120;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  #beranda .hero-contact-button {
    order: 1;
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(241,207,102,.74);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(39,104,39,.97), rgba(13,69,29,.97));
    box-shadow: 0 7px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  #beranda .hero-contact-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  #beranda .hero-menu-toggle {
    order: 2;
    width: 38px;
    height: 38px;
    padding: 9px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(241,207,102,.70);
    border-radius: 50%;
    background: rgba(8,44,18,.92);
    box-shadow: 0 7px 18px rgba(0,0,0,.28);
    cursor: pointer;
  }

  #beranda .hero-menu-toggle span {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 99px;
    background: #fff8d7;
    transition: transform .22s ease, opacity .22s ease;
  }

  #beranda .hero-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  #beranda .hero-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  #beranda .hero-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  #beranda .hero-top-navigation nav {
    position: absolute;
    top: 48px;
    right: 0;
    width: 205px;
    padding: 9px;
    display: grid;
    gap: 3px;
    border: 1px solid rgba(241,207,102,.46);
    border-radius: 16px;
    background: rgba(5,35,14,.96);
    box-shadow: 0 18px 38px rgba(0,0,0,.42);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.97);
    transform-origin: top right;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }

  #beranda .hero-top-navigation nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  #beranda .hero-top-navigation nav a {
    padding: 10px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
  }

  #beranda .hero-top-navigation nav a:hover,
  #beranda .hero-top-navigation nav a.active {
    color: #fff9d9;
    background: rgba(141,181,63,.22);
  }

.floating-whatsapp {
    display: none !important;
  }
}

/* TABLET (600-1023px): tampilkan logo + menu atas inline agar menu terlihat */
@media (min-width: 600px) and (max-width: 1023px) {
  #beranda .hero-top-navigation {
    position: absolute;
    z-index: 120;
    top: 16px;
    left: clamp(142px, 23vw, 260px);
    right: clamp(16px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  #beranda .hero-menu-toggle {
    display: none !important;
  }

  #beranda .hero-top-navigation nav {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    padding: 0 !important;
    gap: clamp(6px, 1.4vw, 20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #beranda .hero-top-navigation nav a {
    position: relative;
    padding: 10px 0;
    color: rgba(255,255,255,.94);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(10px, 1.25vw, 14px);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,.72);
    transition: color .22s ease, transform .22s ease;
  }

  #beranda .hero-top-navigation nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: var(--na-gold);
    box-shadow: 0 0 10px rgba(241,207,102,.58);
    transition: left .22s ease, right .22s ease;
  }

  #beranda .hero-top-navigation nav a:hover,
  #beranda .hero-top-navigation nav a.active {
    color: #fff8d6;
    transform: translateY(-1px);
  }

  #beranda .hero-top-navigation nav a:hover::after,
  #beranda .hero-top-navigation nav a.active::after {
    left: 0;
    right: 0;
  }

  #beranda .hero-contact-button {
    margin-left: clamp(8px, 1.4vw, 22px);
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(241,207,102,.78);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(39,104,39,.96), rgba(13,69,29,.96));
    box-shadow: 0 8px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  #beranda .hero-contact-button svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
  }

  /* Tablet kecil (600-819px): tombol WA jadi ikon saja agar muat */
  @media (max-width: 819px) {
    #beranda .hero-contact-button span {
      display: none;
    }

    #beranda .hero-contact-button {
      width: 40px;
      height: 40px;
      min-height: 40px;
      padding: 0;
    }

    #beranda .hero-contact-button svg {
      width: 21px;
      height: 21px;
    }
  }
}

/* Tablet landscape pendek (lebar >=1024 tapi tinggi <650): tampilkan menu juga */
@media (min-width: 1024px) and (max-height: 649px) {
  #beranda .hero-top-navigation {
    position: absolute;
    z-index: 120;
    top: 16px;
    left: clamp(180px, 24vw, 260px);
    right: clamp(16px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  #beranda .hero-menu-toggle {
    display: none !important;
  }

  #beranda .hero-top-navigation nav {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    gap: clamp(10px, 1.6vw, 24px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #beranda .hero-top-navigation nav a {
    position: relative;
    padding: 10px 0;
    color: rgba(255,255,255,.94);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,.72);
    transition: color .22s ease, transform .22s ease;
  }

  #beranda .hero-top-navigation nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: var(--na-gold);
    box-shadow: 0 0 10px rgba(241,207,102,.58);
    transition: left .22s ease, right .22s ease;
  }

  #beranda .hero-top-navigation nav a:hover,
  #beranda .hero-top-navigation nav a.active {
    color: #fff8d6;
    transform: translateY(-1px);
  }

  #beranda .hero-top-navigation nav a:hover::after,
  #beranda .hero-top-navigation nav a.active::after {
    left: 0;
    right: 0;
  }

  #beranda .hero-contact-button {
    margin-left: clamp(12px, 2vw, 22px);
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(241,207,102,.78);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(39,104,39,.96), rgba(13,69,29,.96));
    box-shadow: 0 8px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  #beranda .hero-contact-button svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
  }

  .floating-whatsapp {
    display: none !important;
  }
}

@media (min-width: 1024px) and (min-height: 650px) {
  #beranda .hero-top-navigation {
    position: absolute;
    z-index: 110;
    top: 28px;
    left: clamp(270px, 25vw, 385px);
    right: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 30px);
  }

  #beranda .hero-top-navigation nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.55vw, 25px);
  }

  #beranda .hero-top-navigation nav a {
    position: relative;
    padding: 10px 0;
    color: rgba(255,255,255,.94);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,.72);
    transition: color .22s ease, transform .22s ease;
  }

  #beranda .hero-top-navigation nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: var(--na-gold);
    box-shadow: 0 0 10px rgba(241,207,102,.58);
    transition: left .22s ease, right .22s ease;
  }

  #beranda .hero-top-navigation nav a:hover,
  #beranda .hero-top-navigation nav a.active {
    color: #fff8d6;
    transform: translateY(-1px);
  }

  #beranda .hero-top-navigation nav a:hover::after,
  #beranda .hero-top-navigation nav a.active::after {
    left: 0;
    right: 0;
  }

  #beranda .hero-contact-button {
    min-height: 44px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    border: 1px solid rgba(241,207,102,.78);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(39,104,39,.96), rgba(13,69,29,.96));
    box-shadow: 0 8px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
  }

  #beranda .hero-contact-button svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
  }

  #beranda .hero-contact-button:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #408f3e, #195c29);
    box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 18px rgba(190,216,91,.22);
  }

  .floating-whatsapp {
    display: none !important;
  }
}

@media (min-width: 1024px) and (min-height: 650px), (min-width: 1024px) and (max-height: 649px) {
  #beranda {
    --hero-orbit-size: min(570px, 50vw, 72vh);
  }

  #beranda .guide-cutout {
    z-index: 50 !important;
  }

  #beranda .orbit {
    position: absolute !important;
    z-index: 60 !important;
    inset: auto !important;
    left: 62.5% !important;
    top: 56% !important;
    width: var(--hero-orbit-size) !important;
    height: var(--hero-orbit-size) !important;
    transform: translate(-50%, -50%) !important;
  }

  #beranda .orbit-ring {
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    left: 62.5% !important;
    top: 56% !important;
    width: var(--hero-orbit-size) !important;
    height: var(--hero-orbit-size) !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  #beranda .orbit-ring::before,
  #beranda .orbit-ring::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  #beranda .orbit-ring::before {
    inset: -7px !important;
    border: 0 !important;
    outline: 0 !important;
    background: conic-gradient(
      from -18deg,
      transparent 0deg 18deg,
      rgba(255,250,211,.42) 22deg,
      rgba(255,214,84,.96) 28deg,
      rgba(255,249,207,.72) 34deg,
      transparent 43deg 82deg,
      rgba(255,229,131,.22) 88deg,
      rgba(255,244,190,.82) 98deg,
      transparent 112deg 154deg,
      rgba(244,190,42,.30) 160deg,
      rgba(255,246,197,.96) 174deg,
      rgba(239,178,30,.54) 184deg,
      transparent 198deg 246deg,
      rgba(255,233,143,.24) 252deg,
      rgba(255,252,219,.88) 266deg,
      transparent 281deg 326deg,
      rgba(247,197,53,.74) 337deg,
      transparent 350deg 360deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)) !important;
    filter:
      drop-shadow(0 0 3px rgba(255,250,211,.95))
      drop-shadow(0 0 10px rgba(255,206,55,.78))
      drop-shadow(0 0 21px rgba(238,167,24,.42));
    animation: naOrbitSpin 18s linear infinite, naOrbitPulse 3.8s ease-in-out infinite alternate !important;
  }

  #beranda .orbit-ring::after {
    inset: -15px !important;
    border: 0 !important;
    outline: 0 !important;
    background: repeating-conic-gradient(
      from 6deg,
      transparent 0deg 7deg,
      rgba(255,246,194,.14) 7.5deg,
      rgba(255,222,104,.90) 8.5deg,
      transparent 10deg 17deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)) !important;
    opacity: .72;
    filter: drop-shadow(0 0 5px rgba(255,220,91,.92));
    animation: naOrbitSpin 28s linear infinite reverse !important;
  }

  #beranda .orbit-item {
    z-index: 70 !important;
    right: auto !important;
    bottom: auto !important;
    translate: -50% -50% !important;
  }

  #beranda .orbit-item.item-1 {
    left: 15% !important;
    top: 7% !important;
  }

  #beranda .orbit-item.item-2 {
    left: 85% !important;
    top: 7% !important;
  }

  #beranda .orbit-item.item-3 {
    left: 0% !important;
    top: 50% !important;
  }

  #beranda .orbit-item.item-4 {
    left: 106% !important;
    top: 50% !important;
  }

  #beranda .orbit-item.item-5 {
    left: 15% !important;
    top: 93% !important;
  }

#beranda .orbit-item.item-6 {
    left: 85% !important;
    top: 96% !important;
  }
}

/* Tablet landscape pendek (>=1024px, tinggi <=650px): NAIKKAN lingkaran + ikon agar pas di tengah WANITA */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1439px) and (max-height: 650px) {
  #beranda .orbit,
  #beranda .orbit-ring {
    top: 46% !important;
  }

  #beranda .guide-cutout {
    bottom: calc(4% + 72px) !important;
  }
}

/* TABLET PORTRAIT (761-1023px): AKTIFKAN ANIMASI ORBIT (ring berputar + ikon jatuh/mengambang) + PPOSISI ORBIT NAIK KE TENGAH WANITA */
@media (min-width: 761px) and (max-width: 1023px) and (orientation: portrait) {

  #beranda .orbit-ring,
  #beranda .orbit {
    margin-top: 0 !important;
  }

  #beranda .orbit-ring::before,
  #beranda .orbit-ring::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  #beranda .orbit-ring::before {
    inset: -7px !important;
    border: 0 !important;
    outline: 0 !important;
    background: conic-gradient(
      from -18deg,
      transparent 0deg 18deg,
      rgba(255,250,211,.42) 22deg,
      rgba(255,214,84,.96) 28deg,
      rgba(255,249,207,.72) 34deg,
      transparent 43deg 82deg,
      rgba(255,229,131,.22) 88deg,
      rgba(255,244,190,.82) 98deg,
      transparent 112deg 154deg,
      rgba(244,190,42,.30) 160deg,
      rgba(255,246,197,.96) 174deg,
      rgba(239,178,30,.54) 184deg,
      transparent 198deg 246deg,
      rgba(255,233,143,.24) 252deg,
      rgba(255,252,219,.88) 266deg,
      transparent 281deg 326deg,
      rgba(247,197,53,.74) 337deg,
      transparent 350deg 360deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)) !important;
    filter:
      drop-shadow(0 0 3px rgba(255,250,211,.95))
      drop-shadow(0 0 10px rgba(255,206,55,.78))
      drop-shadow(0 0 21px rgba(238,167,24,.42)) !important;
    animation: naOrbitSpin 18s linear infinite, naOrbitPulse 3.8s ease-in-out infinite alternate !important;
  }

  #beranda .orbit-ring::after {
    inset: -15px !important;
    border: 0 !important;
    outline: 0 !important;
    background: repeating-conic-gradient(
      from 6deg,
      transparent 0deg 7deg,
      rgba(255,246,194,.14) 7.5deg,
      rgba(255,222,104,.90) 8.5deg,
      transparent 10deg 17deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)) !important;
    opacity: .72;
    filter: drop-shadow(0 0 5px rgba(255,220,91,.92)) !important;
    animation: naOrbitSpin 28s linear infinite reverse !important;
  }

  #beranda .item-1 { --menu-delay: .05s; }
  #beranda .item-2 { --menu-delay: .16s; }
  #beranda .item-3 { --menu-delay: .27s; }
  #beranda .item-4 { --menu-delay: .38s; }
  #beranda .item-5 { --menu-delay: .49s; }
  #beranda .item-6 { --menu-delay: .60s; }

  #beranda .orbit-item > .orbit-icon,
  #beranda .orbit-item > span {
    animation:
      ngrembelDesktopDrop
        1.05s
        cubic-bezier(.22, .85, .32, 1.22)
        var(--menu-delay)
        both,
      ngrembelDesktopFloat
        2.5s
        ease-in-out
        calc(var(--menu-delay) + 1.20s)
        infinite
        alternate
        !important;
    will-change: transform, opacity !important;
  }
}

@keyframes naOrbitSpin {
  to { rotate: 360deg; }
}

@keyframes naOrbitPulse {
  from { opacity: .68; }
  to { opacity: 1; }
}

@media (max-width: 760px) and (orientation: portrait) {
  #beranda .orbit-ring {
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    left: 50% !important;
    top: 50% !important;
    width: min(82vw, 360px) !important;
    height: min(62vh, 510px) !important;
    border: 1px solid rgba(255, 229, 139, .38) !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: 0 0 12px rgba(244, 199, 60, .18) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  #beranda .orbit-ring::before {
    content: none !important;
  }

  #beranda .orbit-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: -4px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(
      from 0deg,
      transparent 0deg 54deg,
      rgba(255,247,202,.88) 64deg,
      rgba(242,188,39,.70) 72deg,
      transparent 84deg 220deg,
      rgba(255,232,146,.74) 230deg,
      transparent 243deg 360deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)) !important;
    opacity: .78;
    filter: drop-shadow(0 0 5px rgba(255,211,74,.72));
    animation: naOrbitSpin 24s linear infinite !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #beranda .orbit .orbit-item .orbit-icon,
  .wahana-tabs button,
  .food-category,
  .final-cta-actions a {
    transition: none !important;
  }

  #beranda .orbit-ring::before,
  #beranda .orbit-ring::after {
    animation: none !important;
  }
}

/* Override final Wahana HP: foto bersih, informasi berada di bawah foto. */
@media (max-width: 760px) {
  #wahana .wahana-card {
    min-height: 0 !important;
    padding: 202px 17px 18px !important;
    justify-content: flex-start !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #39784a 0%, #195536 50%, #073522 100%) !important;
  }

  #wahana .wahana-card::before {
    inset: 0 0 auto !important;
    width: 100% !important;
    height: 184px !important;
    background-size: cover !important;
    background-position: center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
  }

  #wahana .wahana-card::after {
    content: none !important;
  }

  #wahana .wahana-card .wahana-card-heading {
    align-items: center !important;
    gap: 11px !important;
    margin: 0 0 6px !important;
  }

  #wahana .wahana-card .wahana-card-content,
  #wahana .wahana-card .wahana-card-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #wahana .wahana-card .wahana-card-icon {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 24px !important;
  }

  #wahana .wahana-card .wahana-card-number {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }

  #wahana .wahana-card .wahana-card-title > span {
    font-size: 9px !important;
  }

  #wahana .wahana-card .wahana-card-title h3 {
    margin: 3px 0 0 !important;
    font-size: 22px !important;
  }

  #wahana .wahana-card .wahana-card-body p {
    margin: 0 0 13px !important;
  }
}

/* Override final: konten slogan Hero harus mengalahkan gaya Hero lama. */
@media (min-width: 761px) {
  #beranda .hero-title > span {
    margin-bottom: 5px !important;
    font-size: clamp(17px, 1.55vw, 23px) !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(46px, 5.15vw, 76px) !important;
    line-height: .86 !important;
  }
}

#beranda .hero-title .hero-slogan {
  display: block !important;
  margin: 11px 0 0 !important;
  color: #b9d85b !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(17px, 1.35vw, 22px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.75) !important;
}

#beranda .hero-title .hero-slogan-description {
  display: block !important;
  max-width: 325px !important;
  margin: 7px 0 0 !important;
  color: rgba(255,255,255,.94) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(12px, .88vw, 14px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

#beranda .hero-title .hero-explore-button {
  pointer-events: auto !important;
  display: inline-flex !important;
  margin-top: 4px !important;
  padding: 9px 17px !important;
  font-size: 13px !important;
}

#beranda .hero-title .hero-explore-button > span {
  display: inline !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  #beranda .hero-title > span {
    font-size: clamp(14px, 4.2vw, 18px) !important;
  }

  #beranda .hero-title h1 {
    font-size: clamp(29px, 8.8vw, 40px) !important;
  }

  #beranda .hero-title .hero-slogan {
    margin-top: 6px !important;
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  #beranda .hero-title .hero-slogan-description {
    display: none !important;
  }

  #beranda .hero-title .hero-explore-button {
    display: none !important;
  }
}


/* =====================================================
   SINKRON LINGKARAN EDUKASI - FOTO PENUH DALAM BULATAN
   ===================================================== */

#edukasi .edu-circle {
  position: absolute;
}

#edukasi .edu-circle > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  display: block !important;
}

#edukasi .edu-center > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  display: block !important;
}

/* =====================================================
   LINGKARAN TENGAH EDUKASI - TULISAN MENYESUAI REFERENSI
   ===================================================== */

#edukasi .edu-center strong {
  font-size: clamp(17px, 2.6vw, 24px) !important;
  line-height: 1.15 !important;
}

#edukasi .edu-center small {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;

  background: rgba(14,67,39,.88) !important;
  backdrop-filter: blur(8px) !important;

  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  z-index: 3 !important;
}

/* =====================================================
   HP PORTRAIT — TURUNKAN KOMPOSISI (RING + ICON + WANITA) KE BAWAH
   Berlaku hanya HP portrait (lebar <=760px)
   ===================================================== */
@media (max-width: 760px) and (orientation: portrait) {

  /* lingkaran animasi sedikit naik */
  #beranda .orbit-ring {
    top: 57% !important;
  }

  /* baris ikon sedikit naik */
  #beranda .item-1,
  #beranda .item-2 {
    top: 34% !important;
  }

  #beranda .item-3,
  #beranda .item-4 {
    top: 54% !important;
  }

  #beranda .item-5,
  #beranda .item-6 {
    top: 74% !important;
  }

  /* wanita sedikit naik */
  #beranda .guide-cutout {
    bottom: 0 !important;
    transform: translate(-50%, -23%) scale(0.80) !important;
    transform-origin: center bottom !important;
  }
}

/* =====================================================
   HEADER STICKY MOBILE (semua halaman) — logo + "Hubungi Kami" + hamburger
   ===================================================== */
.site-header-sticky {
  display: none;
}

@media (max-width: 1023px) {
  .site-header-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 58px;
    padding: 0 12px;
    background: linear-gradient(180deg, rgba(6,40,20,.94), rgba(6,40,20,.82));
    box-shadow: 0 7px 22px rgba(0,0,0,.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .site-sticky-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .site-sticky-logo img {
    display: block;
    max-height: 40px;
    width: auto;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  }

  .site-sticky-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .site-sticky-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(241,207,102,.74);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(39,104,39,.97), rgba(13,69,29,.97));
    box-shadow: 0 5px 14px rgba(0,0,0,.28);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-sticky-wa svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }

  .site-sticky-toggle {
    order: 0;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 8px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(241,207,102,.72);
    border-radius: 50%;
    background: rgba(8,44,18,.95);
    box-shadow: 0 5px 14px rgba(0,0,0,.26);
    cursor: pointer;
  }

  .site-sticky-toggle span {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 99px;
    background: #fff8d7;
    transition: transform .22s ease, opacity .22s ease;
  }

  .site-sticky-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-sticky-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .site-sticky-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-header-sticky nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    width: 216px;
    padding: 9px;
    display: grid;
    gap: 3px;
    border: 1px solid rgba(241,207,102,.46);
    border-radius: 16px;
    background: rgba(5,35,14,.97);
    box-shadow: 0 18px 38px rgba(0,0,0,.44);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.97);
    transform-origin: top right;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }

  .site-header-sticky nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .site-header-sticky nav a {
    padding: 10px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
  }

  .site-header-sticky nav a:hover,
  .site-header-sticky nav a.active {
    color: #fff9d9;
    background: rgba(141,181,63,.22);
  }

  /* Di halaman utama: sembunyikan nav & logo hero lama yang absolut,
     karena posisinya digantikan header sticky bersama ini. */
  #beranda .hero-top-navigation,
  #beranda .hero-brand-logo {
    display: none !important;
  }

  /* Offset konten subhalaman agar tidak tertutup header sticky (58px).
     Tambahkan margin-top pada elemen konten pertama di setiap halaman. */
  .menu-page-head,
  .food-detail-hero {
    margin-top: 66px !important;
  }

  .not-found {
    padding-top: 66px !important;
  }
}

/* Desktop: header sticky disembunyikan; layout hero utama kembali seperti semula */
@media (min-width: 1024px) {
  .site-header-sticky {
    display: none !important;
  }
}