@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Marcellus&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --warna-kertas-kuno: #FBF9F5;
  --warna-kain-calico: #F4EFE6;
  --warna-kapur-putih: #FFFFFF;
  --warna-tinta-pekat: #1A1816;
  --warna-batu-gelap: #272420;
  --warna-tanah-umber: #3E3630;
  --warna-terakota-bali: #B35434;
  --warna-terakota-pekat: #8C3A20;
  --warna-terakota-pucat: #FBEAE5;
  --warna-lumut-asri: #2F3C2B;
  --warna-lumut-muda: #44563E;
  --warna-batu-pasir: #DDD5C7;
  --warna-gamping: #E9E3D6;
  --warna-tulang-lembut: #EFEAE0;
  --warna-emas-redup: #C29849;

  --huruf-pajangan: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --huruf-cerita: 'Cormorant Garamond', Georgia, serif;
  --huruf-badan: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --bayangan-kertas-mantap: 14px 14px 0px 0px var(--warna-tulang-lembut);
  --bayangan-kertas-tipis: 7px 7px 0px 0px var(--warna-tulang-lembut);
  --bayangan-kertas-hover: 16px 16px 0px 0px var(--warna-batu-pasir);

  --lebar-wadah-mentok: 1280px;
  --gerak-mulus-banget: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0px !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--warna-kertas-kuno);
  color: var(--warna-tinta-pekat);
  font-family: var(--huruf-badan);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--warna-terakota-bali);
  color: var(--warna-kapur-putih);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.wadah-utama-ngab {
  width: 100%;
  max-width: var(--lebar-wadah-mentok);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .wadah-utama-ngab {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.baris-atas-suasana {
  background-color: var(--warna-kain-calico);
  color: var(--warna-tanah-umber);
  border: 1px solid var(--warna-batu-pasir);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.65rem 1.5rem;
}

.isi-baris-suasana {
  max-width: var(--lebar-wadah-mentok);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.titik-denyut-ijo {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--warna-lumut-asri);
  margin-right: 0.4rem;
  vertical-align: middle;
  animation: denyutan 2s var(--gerak-mulus-banget) infinite;
}

@keyframes denyutan {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.kepala-menu-paten {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: rgba(251, 249, 245, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--warna-batu-pasir);
}

.wadah-navigasi-asik {
  max-width: var(--lebar-wadah-mentok);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-villa-ganteng {
  display: flex;
  flex-direction: column;
}

.teks-nama-villa {
  font-family: var(--huruf-pajangan);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
  letter-spacing: 0.02em;
  line-height: 1.1;
  transition: color 0.25s ease;
}

.logo-villa-ganteng:hover .teks-nama-villa {
  color: var(--warna-terakota-bali);
}

.teks-tag-lokasi {
  font-family: var(--huruf-cerita);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--warna-terakota-bali);
  letter-spacing: 0.08em;
}

.deretan-link-menu {
  display: none;
  align-items: center;
  gap: 2.2rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--warna-tanah-umber);
}

.deretan-link-menu a:not(.tombol-availability-header) {
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.2s ease;
}

.deretan-link-menu a:not(.tombol-availability-header):hover,
.deretan-link-menu a:not(.tombol-availability-header).aktif-pisan {
  color: var(--warna-terakota-bali);
}

.deretan-link-menu a:not(.tombol-availability-header).aktif-pisan::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--warna-terakota-bali);
}

.tombol-availability-header,
.deretan-link-menu a.tombol-availability-header,
.laci-menu-hp a.tombol-availability-header {
  padding: 0.85rem 2.85rem !important;
  line-height: 1;
  background-color: var(--warna-terakota-bali);
  color: var(--warna-kapur-putih) !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  border: 1px solid var(--warna-terakota-bali);
  box-shadow: 4px 4px 0px 0px var(--warna-terakota-pekat);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.3s var(--gerak-mulus-banget);
}

.tombol-availability-header:hover,
.deretan-link-menu a.tombol-availability-header:hover,
.laci-menu-hp a.tombol-availability-header:hover {
  background-color: var(--warna-terakota-pekat);
  border-color: var(--warna-terakota-pekat);
  color: var(--warna-kapur-putih) !important;
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0px 0px var(--warna-terakota-bali);
}

.tombol-hamburger-hp {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--warna-tinta-pekat);
}

@media (min-width: 1024px) {
  .deretan-link-menu { display: flex; }
  .tombol-hamburger-hp { display: none; }
}

.laci-menu-hp {
  display: none;
  background-color: var(--warna-kapur-putih);
  border: 1px solid var(--warna-batu-pasir);
  padding: 1.5rem 2rem;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.laci-menu-hp.buka-dong {
  display: flex;
}

.laci-menu-hp a:not(.tombol-availability-header) {
  padding: 0.75rem 0;
}

.laci-menu-hp a:not(.tombol-availability-header).aktif-pisan {
  color: var(--warna-terakota-bali);
  font-weight: 600;
}

.hero-penuh-gahar {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--warna-batu-gelap);
  border: 1px solid var(--warna-batu-pasir);
}

.judul-poin-tim {
  font-color: #000000 !important;
}

.lapisan-gambar-slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slide-item-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 8s linear;
  transform: scale(1);
}

.slide-item-foto.terpampang-nyata {
  opacity: 1;
  transform: scale(1.06);
}

.slide-item-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lapisan-gelap-estetik {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(26, 24, 22, 0.38) 0%, rgba(26, 24, 22, 0.72) 100%);
  z-index: 2;
}

.wadah-tengah-fokus-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  width: 90%;
  max-width: 960px;
  pointer-events: none;
  padding: 2.5rem 1.5rem;
}

.teks-blur-load-efek {
  animation: kabut-ke-jelas 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: filter, opacity, transform;
}

@keyframes kabut-ke-jelas {
  0% {
    filter: blur(24px);
    opacity: 0;
    transform: scale(1.08);
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}

.judul-hero-agung {
  font-family: var(--huruf-pajangan);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--warna-kapur-putih);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

@media (min-width: 640px) {
  .judul-hero-agung {
    font-size: 5rem;
  }
}

@media (min-width: 1024px) {
  .judul-hero-agung {
    font-size: 6.2rem;
  }
}

.tagline-hero-syahdu {
  font-family: var(--huruf-cerita);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: #F7F3EB;
  margin-top: 1rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .tagline-hero-syahdu {
    font-size: 1.65rem;
  }
}

.area-filosofi-pilar {
  padding-top: 6rem;
  padding-bottom: 6rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
}

.paragraf-filosofi-agung {
  font-family: var(--huruf-cerita);
  font-size: 1.65rem;
  line-height: 1.5;
  color: var(--warna-tinta-pekat);
  font-weight: 400;
  max-width: 980px;
}

@media (min-width: 640px) {
  .paragraf-filosofi-agung {
    font-size: 2rem;
  }
}

.grid-dinamis-filosofi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .grid-dinamis-filosofi {
    grid-template-columns: 5fr 7fr;
  }
}

.kartu-fokus-primer {
  position: relative;
  background-color: var(--warna-kertas-kuno);
  border: 1px solid var(--warna-batu-pasir);
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--bayangan-kertas-mantap);
  transition: transform 0.4s var(--gerak-mulus-banget), box-shadow 0.4s var(--gerak-mulus-banget), border-color 0.4s ease;
}

.kartu-fokus-primer:hover {
  transform: translateY(-4px);
  box-shadow: var(--bayangan-kertas-hover);
  border-color: var(--warna-terakota-bali);
}

.ornamen-bingkai-dalam {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(221, 213, 199, 0.45);
  pointer-events: none;
}

.klaster-modular-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .klaster-modular-trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kartu-modular-satelit {
  position: relative;
  background-color: var(--warna-kertas-kuno);
  border: 1px solid var(--warna-batu-pasir);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--bayangan-kertas-tipis);
  transition: transform 0.35s var(--gerak-mulus-banget), box-shadow 0.35s var(--gerak-mulus-banget), border-color 0.35s ease;
}

.kartu-modular-satelit:hover {
  transform: translateY(-4px);
  box-shadow: var(--bayangan-kertas-hover);
  border-color: var(--warna-terakota-bali);
}

.simbol-fokus-utama {
  font-size: 1.1rem;
  color: var(--warna-emas-redup);
}

.judul-fokus-besar {
  font-family: var(--huruf-pajangan);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
  margin-top: 1rem;
  line-height: 1.25;
}

.judul-pilar-ganteng {
  font-family: var(--huruf-pajangan);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
  margin-top: 0.75rem;
  line-height: 1.3;
}

.deskripsi-pilar-adem {
  font-size: 0.82rem;
  color: var(--warna-tanah-umber);
  line-height: 1.65;
  margin-top: 0.75rem;
}

.tag-pilar-bawah {
  margin-top: 2rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--warna-kain-calico);
  border: 1px solid var(--warna-batu-pasir);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warna-lumut-asri);
  display: inline-block;
  align-self: flex-start;
}

.area-showcase-spill {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: var(--warna-kertas-kuno);
  border: 1px solid var(--warna-batu-pasir);
}

.grid-dinamis-spill {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (min-width: 1024px) {
  .grid-dinamis-spill {
    grid-template-columns: 7fr 5fr;
  }
}

.spill-fokus-utama {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  box-shadow: var(--bayangan-kertas-mantap);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.spill-deret-satelit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .spill-deret-satelit {
    grid-template-columns: 1fr 1fr;
  }
}

.kartu-spill-modular {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  box-shadow: var(--bayangan-kertas-tipis);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.efek-lensa-mistik {
  position: relative;
  overflow: hidden;
  background-color: var(--warna-kain-calico);
}

.efek-lensa-mistik img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.8s ease, transform 1s var(--gerak-mulus-banget);
  transform-origin: center;
}

.efek-lensa-mistik::after {
  content: "";
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 65%);
  transform: rotate(25deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spill-fokus-utama:hover .efek-lensa-mistik img,
.kartu-spill-modular:hover .efek-lensa-mistik img {
  filter: contrast(1.04) brightness(1.03);
  transform: perspective(800px) rotateX(1.5deg) rotateY(-1.5deg);
}

.spill-fokus-utama:hover .efek-lensa-mistik::after,
.kartu-spill-modular:hover .efek-lensa-mistik::after {
  opacity: 1;
  transform: rotate(25deg) translateY(120%);
}

.keterangan-spill-ruang {
  padding: 1.5rem;
  background-color: var(--warna-kapur-putih);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.judul-spill-item {
  font-family: var(--huruf-pajangan);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
}

.teks-spill-detail {
  font-size: 0.8rem;
  color: var(--warna-tanah-umber);
  line-height: 1.55;
  margin-top: 0.4rem;
}

.area-tim-pelayanan {
  position: relative;
  width: 100%;
  min-height: 560px;
  background-color: var(--warna-batu-gelap);
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid var(--warna-batu-pasir);
}

.latar-foto-tim-penuh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.latar-foto-tim-penuh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.62) saturate(0.9);
}

.lapisan-gelap-tim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(26, 24, 22, 0.92) 0%, rgba(26, 24, 22, 0.72) 60%, rgba(26, 24, 22, 0.5) 100%);
  z-index: 2;
}

.konten-tim-di-atas {
  position: relative;
  z-index: 10;
  padding-top: 5rem;
  padding-bottom: 5rem;
  max-width: 740px;
  color: var(--warna-kapur-putih);
}

.judul-tim-megah {
  font-family: var(--huruf-pajangan);
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--warna-kapur-putih);
}

@media (min-width: 640px) {
  .judul-tim-megah {
    font-size: 3.4rem;
  }
}

.deskripsi-tim-hangat {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(251, 249, 245, 0.88);
  margin-top: 1.25rem;
  font-weight: 300;
}

.poin-pelayanan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .poin-pelayanan-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.item-poin-tim {
  border: 1px solid rgba(221, 213, 199, 0.35);
  background-color: rgba(26, 24, 22, 0.45);
  padding: 1.25rem;
}

.judul-poin-tim {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FBF9F5;
}

.isi-poin-tim {
  font-size: 0.78rem;
  color: rgba(251, 249, 245, 0.75);
  margin-top: 0.35rem;
  line-height: 1.5;
}

.area-lokasi-tongkrongan {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: var(--warna-kapur-putih);
  border: 1px solid var(--warna-batu-pasir);
}

.grid-dinamis-destinasi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 3.5rem;
}

@media (min-width: 1024px) {
  .grid-dinamis-destinasi {
    grid-template-columns: 5fr 7fr;
  }
}

.fokus-destinasi-utama {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
  padding: 2.5rem 2rem;
  box-shadow: var(--bayangan-kertas-mantap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.fokus-destinasi-utama:hover {
  transform: translateY(-3px);
  border-color: var(--warna-terakota-bali);
}

.klaster-destinasi-satelit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .klaster-destinasi-satelit {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kartu-destinasi-kece {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--bayangan-kertas-tipis);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.kartu-destinasi-kece:hover {
  transform: translateY(-3px);
  border-color: var(--warna-terakota-bali);
}

.baris-atas-destinasi {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nama-tempat-asik {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--warna-tinta-pekat);
}

.waktu-tempuh-gokil {
  font-family: var(--huruf-pajangan);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--warna-terakota-bali);
}

.deskripsi-tempat-santuy {
  font-size: 0.78rem;
  color: var(--warna-tanah-umber);
  margin-top: 0.6rem;
  line-height: 1.55;
}

.tag-rute-bawah {
  margin-top: 1.5rem;
  padding: 0.4rem 0.6rem;
  background-color: var(--warna-kain-calico);
  border: 1px solid var(--warna-batu-pasir);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warna-terakota-bali);
  display: inline-block;
  align-self: flex-start;
}

.area-hook-hierarki-visual {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: var(--warna-kain-calico);
  border: 1px solid var(--warna-batu-pasir);
}

.grid-hook-arsitektur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .grid-hook-arsitektur {
    grid-template-columns: 7fr 5fr;
  }
}

.panel-hook-utama {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  padding: 2.5rem;
  box-shadow: var(--bayangan-kertas-mantap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.judul-hook-gahar {
  font-family: var(--huruf-pajangan);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--warna-tinta-pekat);
}

@media (min-width: 640px) {
  .judul-hook-gahar {
    font-size: 3rem;
  }
}

.paragraf-hook-lugas {
  font-size: 0.9rem;
  color: var(--warna-tanah-umber);
  line-height: 1.7;
  margin-top: 1rem;
}

.kotak-spesifikasi-hook {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
}

.label-mini-hook {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8C7E72;
}

.nilai-tebal-hook {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--warna-tinta-pekat);
  margin-top: 0.2rem;
}

.panel-hook-visual-samping {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-tinta-pekat);
  color: var(--warna-kertas-kuno);
  padding: 2.5rem;
  box-shadow: var(--bayangan-kertas-mantap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.angka-harga-pajangan {
  font-family: var(--huruf-pajangan);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--warna-terakota-bali);
  line-height: 1;
}

.label-harga-satuan {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(251, 249, 245, 0.7);
  margin-top: 0.35rem;
}

.deret-garansi-hook {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.8rem;
  margin-top: 2rem;
  color: rgba(251, 249, 245, 0.9);
}

.deret-garansi-hook li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.deret-garansi-hook li::before {
  content: "✦";
  color: var(--warna-terakota-bali);
  font-weight: bold;
}

.tombol-aksi-hook {
  margin-top: 2rem;
  padding: 1rem;
  background-color: var(--warna-terakota-bali);
  color: var(--warna-kapur-putih);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 1px solid var(--warna-terakota-bali);
  cursor: pointer;
  display: block;
  transition: background-color 0.25s ease;
}

.tombol-aksi-hook:hover {
  background-color: var(--warna-terakota-pekat);
  border-color: var(--warna-terakota-pekat);
}

.kaki-halaman-asri {
  background-color: var(--warna-tinta-pekat);
  color: var(--warna-batu-pasir);
  padding-top: 4.5rem;
  padding-bottom: 3.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--warna-batu-pasir);
}

.grid-kaki-empat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border: 1px solid rgba(221, 213, 199, 0.18);
  background-color: rgba(39, 36, 32, 0.45);
  padding: 2.5rem;
}

@media (min-width: 768px) {
  .grid-kaki-empat {
    grid-template-columns: repeat(4, 1fr);
  }
}

.judul-brand-kaki {
  font-family: var(--huruf-pajangan);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--warna-kapur-putih);
  letter-spacing: 0.02em;
}

.judul-kolom-kaki {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--warna-kapur-putih);
  margin-bottom: 0.75rem;
}

.baris-copyright-kaki {
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: rgba(221, 213, 199, 0.55);
}

@media (min-width: 640px) {
  .baris-copyright-kaki {
    flex-direction: row;
  }
}

.tautan-kaki-deret {
  display: flex;
  gap: 1.5rem;
}

.tautan-kaki-deret a:hover {
  color: var(--warna-kapur-putih);
}

.tabel-pembungkus-asri {
  overflow-x: auto;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  box-shadow: var(--bayangan-kertas-tipis);
}

.tabel-arsitektur-kamar {
  width: 100%;
  text-align: left;
  font-size: 0.8rem;
  border-collapse: collapse;
}

.tabel-arsitektur-kamar th {
  padding: 1rem 1.25rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kain-calico);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warna-tinta-pekat);
}

.tabel-arsitektur-kamar td {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--warna-batu-pasir);
  color: var(--warna-tanah-umber);
}

.grid-amenitas-empat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .grid-amenitas-empat {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-amenitas-empat {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kartu-kategori-amenitas {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
  padding: 1.75rem;
  box-shadow: var(--bayangan-kertas-tipis);
}

.judul-kategori-amenitas {
  font-family: var(--huruf-pajangan);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kain-calico);
  padding: 0.6rem 0.85rem;
}

.daftar-poin-amenitas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--warna-tanah-umber);
}

.daftar-poin-amenitas li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.daftar-poin-amenitas li::before {
  content: "✦";
  color: var(--warna-terakota-bali);
  font-size: 0.65rem;
}

.grid-aturan-dua {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .grid-aturan-dua {
    grid-template-columns: 1fr 1fr;
  }
}

.kartu-aturan-box {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
  padding: 2rem;
  box-shadow: var(--bayangan-kertas-tipis);
}

.judul-aturan-item {
  font-family: var(--huruf-pajangan);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
  margin-bottom: 1.25rem;
}

.deret-aturan-baris {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.baris-aturan-data {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
}

.tata-letak-kalender-dua {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .tata-letak-kalender-dua {
    grid-template-columns: 7fr 5fr;
  }
}

.kotak-wadah-kalender {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  padding: 2rem;
  box-shadow: var(--bayangan-kertas-mantap);
}

.kepala-bulan-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kain-calico);
  padding: 0.75rem 1rem;
}

.judul-bulan-kalender {
  font-family: var(--huruf-pajangan);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
}

.tombol-panah-kalender {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--gerak-mulus-banget);
}

.tombol-panah-kalender:hover {
  background-color: var(--warna-terakota-bali);
  color: var(--warna-kapur-putih);
  border-color: var(--warna-terakota-bali);
}

.grid-hari-kalender {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.label-nama-hari-tujuh {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--warna-tanah-umber);
  margin-bottom: 0.6rem;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(221, 213, 199, 0.55);
  background-color: var(--warna-kapur-putih);
  color: var(--warna-tinta-pekat);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-day:hover:not([disabled]) {
  border-color: var(--warna-terakota-bali);
  background-color: var(--warna-kain-calico);
}

.calendar-day.empty {
  border: none;
  background: transparent;
  cursor: default;
}

.calendar-day.booked-date,
.calendar-day.booked-airbnb,
.calendar-day.booked-vrbo,
.calendar-day.booked-direct {
  background-color: #EDEAE4;
  color: #8B867C;
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.8;
}

.calendar-day.selected-range {
  background-color: var(--warna-terakota-bali) !important;
  color: var(--warna-kapur-putih) !important;
  text-decoration: none !important;
  font-weight: 700;
}

.calendar-day.in-range {
  background-color: var(--warna-terakota-pucat) !important;
  color: var(--warna-terakota-pekat) !important;
}

.kotak-kalkulator-tarif {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  padding: 2rem;
  box-shadow: var(--bayangan-kertas-mantap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.judul-kalkulator-agung {
  font-family: var(--huruf-pajangan);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
}

.modal-latar-gelap {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 24, 22, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-latar-gelap.open {
  display: flex;
}

.kartu-modal-box {
  background-color: var(--warna-kapur-putih);
  border: 1px solid var(--warna-batu-pasir);
  max-width: 560px;
  width: 100%;
  padding: 2rem;
  box-shadow: var(--bayangan-kertas-mantap);
}

.kepala-modal-baris {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kain-calico);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.judul-modal-teks {
  font-family: var(--huruf-pajangan);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--warna-tinta-pekat);
}

.tombol-silang-modal {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--warna-tinta-pekat);
}

.grup-formulir {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
}

.label-formulir {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--warna-tinta-pekat);
}

.input-formulir,
.textarea-formulir,
.select-formulir {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  color: var(--warna-tinta-pekat);
  outline: none;
  transition: border-color 0.2s ease;
}

.input-formulir:focus,
.textarea-formulir:focus,
.select-formulir:focus {
  border-color: var(--warna-terakota-bali);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--warna-kertas-kuno);
}
::-webkit-scrollbar-thumb {
  background: var(--warna-batu-pasir);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--warna-terakota-bali);
}

.efek-kilau-lensa {
  position: relative;
  overflow: hidden;
  background-color: var(--warna-batu-gelap);
  border: 1px solid var(--warna-batu-pasir);
}

.efek-kilau-lensa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.98) contrast(1.02);
  transition: filter 0.7s var(--gerak-mulus-banget), transform 0.7s var(--gerak-mulus-banget);
}

.efek-kilau-lensa::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 47%,
    rgba(244, 239, 230, 0.5) 50%,
    rgba(255, 255, 255, 0.28) 53%,
    transparent 65%
  );
  transform: translateX(-100%) rotate(25deg);
  pointer-events: none;
  z-index: 5;
  transition: transform 1.2s var(--gerak-mulus-banget);
  opacity: 0;
}

.efek-kilau-lensa:hover::before {
  opacity: 1;
  transform: translateX(100%) rotate(25deg);
}

.efek-kilau-lensa:hover img {
  filter: brightness(1.06) contrast(1.05) saturate(1.08);
}

.modul-dinamis-wadah {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.modul-split-asimetris {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .modul-split-asimetris.fokus-kiri-lebar {
    grid-template-columns: 7fr 5fr;
  }
  .modul-split-asimetris.fokus-kanan-lebar {
    grid-template-columns: 5fr 7fr;
  }
}

.kartu-fokus-utama-seksyen {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  padding: 2.5rem;
  box-shadow: var(--bayangan-kertas-mantap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.deret-satelit-modular {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.kartu-satelit-asri {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kertas-kuno);
  padding: 1.75rem;
  box-shadow: var(--bayangan-kertas-tipis);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-tiga-satelit-modular {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid-tiga-satelit-modular {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-triptych-pavilions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .grid-triptych-pavilions {
    grid-template-columns: 7fr 5fr;
  }
}

.kartu-pavilions-hero {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  box-shadow: var(--bayangan-kertas-mantap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.deret-pavilions-satelit {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
}

.kartu-pavilions-sub {
  border: 1px solid var(--warna-batu-pasir);
  background-color: var(--warna-kapur-putih);
  box-shadow: var(--bayangan-kertas-tipis);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.grid-amenitas-asimetris {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .grid-amenitas-asimetris {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-amenitas-asimetris {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kartu-amenitas-slate {
  border: 1px solid rgba(221, 213, 199, 0.22);
  background-color: var(--warna-batu-gelap);
  padding: 1.75rem;
  box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pita-status-arstitektur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.tombol-toggle-tema-polos {
  width: 44px;
  height: 24px;
  border: 1px solid var(--warna-terakota-bali);
  background-color: var(--warna-kain-calico);
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  outline: none;
  box-shadow: 2px 2px 0px 0px rgba(176, 141, 46, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.tombol-toggle-tema-polos .rel-toggle-lingkaran {
  width: 18px;
  height: 18px;
  background-color: var(--warna-terakota-bali);
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tombol-toggle-tema-polos.tema-ribet-aktif {
  background-color: var(--warna-tinta-pekat);
  border-color: var(--warna-emas-terang, #E4C56A);
  box-shadow: 2px 2px 0px 0px var(--warna-emas-terang, #E4C56A);
}

.tombol-toggle-tema-polos.tema-ribet-aktif .rel-toggle-lingkaran {
  transform: translateX(20px);
  background-color: var(--warna-emas-terang, #E4C56A);
}