/* =========================
   Base
========================= */
:root{
  --bg: #f6f3ec;
  --paper: #fbfaf7;
  --ink: #1a1a1a;
  --muted: #6c6a63;
  --line: rgba(0,0,0,.12);
  --softLine: rgba(0,0,0,.08);
  --accent: #a99763; /* warm-gold */
  --dark: #2a2a2a;

  --frame: 1360px;
  --edge: clamp(18px, 3vw, 44px);

  --radius: 14px;       /* reduced rounded */
  --radiusSoft: 12px;

  --shadow: 0 20px 60px rgba(0,0,0,.10);
  --shadowSoft: 0 12px 34px rgba(0,0,0,.10);

  --serif: ui-serif, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.45;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.srOnly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

.frame{
  width: min(var(--frame), 100% - (var(--edge) * 2));
  margin-inline: auto;
}
.frame--narrow{
  width: min(920px, 100% - (var(--edge) * 2));
}

.eyebrow{
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
}

.h2{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
}
.p{
  color: var(--muted);
  font-size: 15px;
  max-width: 72ch;
}

.divider{
  height: 2px;
  width: 84px;
  background: var(--accent);
  opacity: .75;
}

/* =========================
   Preloader (Opsi 1)
========================= */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f0f10;
  display: grid;
  place-items: center;
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
}
.preloader__inner{
  display: grid;
  place-items: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}
.ring{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
}
.ring:before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.55);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(0deg);
  animation: spin 1.2s linear infinite;
}
.wordmark__brand{
  font-family: var(--serif);
  color: rgba(255,255,255,.92);
  letter-spacing: .18em;
  font-size: 12px;
  text-transform: uppercase;
}
.wordmark__tag{
  margin-top: 8px;
  color: rgba(255,255,255,.68);
  letter-spacing: .06em;
  font-size: 12px;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

@media (prefers-reduced-motion: reduce){
  .ring:before{ animation: none; }
}

/* =========================
   Floating WA
========================= */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  box-shadow: var(--shadowSoft);
}
.wa-float__dot{
  position:absolute;
  inset: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
}
.wa-float__label{
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(0,0,0,.78);
}

/* =========================
   Header (baseline: solid on scroll)
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background .25s ease, border-color .25s ease;
}
.header.is-scrolled{
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.header__inner{
  width: min(var(--frame), 100% - (var(--edge) * 2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand__mark{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
}
.brand__text{ display: grid; line-height: 1.1; }
.brand__name{
  font-family: var(--serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}
.brand__sub{
  margin-top: 2px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
}

.nav{
  justify-self: center;
  display: flex;
  gap: 18px;
}
.nav__link{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
  padding: 10px 8px;
  border-radius: 999px;
}
.nav__link:hover{ background: rgba(0,0,0,.05); }

.navToggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  cursor: pointer;
}
.navToggle__line{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(0,0,0,.72);
  margin: 0 auto;
}
.navToggle__line + .navToggle__line{ margin-top: 6px; }

.navMobile{
  display:none;
  width: min(var(--frame), 100% - (var(--edge) * 2));
  margin: 0 auto 14px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.96);
}
.navMobile.is-open{ display: grid; gap: 8px; }
.navMobile__link{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}
.navMobile__link:hover{ background: rgba(0,0,0,.04); }

/* =========================
   Hero
========================= */
.hero{
  position: relative;
  height: clamp(520px, 78vh, 820px);
  background: #111;
  overflow: hidden;
}
.hero__media{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65)),
    url("../images/hero_image_the_dome.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.62));
}
.hero__content{
  position: relative;
  width: min(var(--frame), 100% - (var(--edge) * 2));
  margin-inline: auto;
  height: 100%;
  display: grid;
  align-content: center;
  max-width: 760px;
  color: rgba(255,255,255,.92);
  padding: 48px 0;
}
.hero__kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .86;
}
.hero__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: .01em;
}
.hero__desc{
  margin: 14px 0 22px;
  color: rgba(255,255,255,.78);
  max-width: 62ch;
  font-size: 15px;
}
.hero__cta{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.22);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
}

/* =========================
   Sections
========================= */
.section{
  padding: clamp(54px, 7vw, 96px) 0;
}
.section--intro{
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(54px, 7vw, 84px);
}
.section--alt{ background: var(--bg); }
.section--soft{ background: #f3f0ea; }

.sectionHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}
.sectionHead--center{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 34px;
}
.sub{
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
  font-size: 14px;
}

/* =========================
   Accommodation grid
========================= */
.accomGrid{
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}
.accomCard{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  background: #ddd;
}
.accomCard__img{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
.accomCard__shade{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
  opacity: .92;
}
.accomCard__img--1{
  background-image: url("../images/room_1.jpg");
}
.accomCard__img--2{
  background-image: url("../images/room_2.jpg");
}
.accomCard__img--3{
  background-image: url("../images/room_3.jpg");
}
.accomCard__content{
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 22px;
  text-align: center;
}
.accomCard__kicker{
  margin: 0;
  color: rgba(255,255,255,.92);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.14);
  background: transparent;
  color: rgba(0,0,0,.76);
  white-space: nowrap;
}
.btn--primary{
  border-color: rgba(255,255,255,.30);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.92);
}
.btn--ghost{
  border-color: rgba(0,0,0,.18);
  background: rgba(255,255,255,.35);
}

/* =========================
   Special Offer band
========================= */
.offerBand{
  display:grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}
.offerBand__media{
  border-radius: var(--radius);
  overflow:hidden;
  background-size: cover;
  background-position: center;
  min-height: 300px;
}
.offerBand__media--left{
  background-image: url("../images/offer_1.jpg");
}
.offerBand__media--right{
  background-image: url("../images/offer_2.jpg");
}
.offerBand__center{
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.62);
  padding: clamp(18px, 2.2vw, 26px);
  display:grid;
  align-content: center;
  justify-items: center;
  text-align:center;
}
.offerBand__kicker{
  margin:0 0 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(0,0,0,.70);
}
.offerBand__text{
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 56ch;
  font-size: 14px;
}

/* =========================
   Experiences (FIXED: rapi + sejajar)
   Layout sesuai mock:
   - A besar kiri (span 2 kolom)
   - B (kanan atas kiri)
   - C (kanan atas kanan)
   - D (kanan bawah, tall)
========================= */
.expGrid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(14px, 2vw, 22px);
  grid-template-areas:
    "a b c"
    "a d d";
  align-items: stretch;
}
.expCard{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: #d9d9d9;
  min-height: 0;
}
.expCard__img{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
}
.expCard__cap{
  position:absolute;
  left: 12px;
  top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.70);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 6px 10px;
}

/* Grid area assignments */
.expCard--a{ grid-area: a; }
.expCard--b{ grid-area: b; }
.expCard--c{ grid-area: c; }
.expCard--d{ grid-area: d; }

/* CONSISTENT HEIGHTS via aspect-ratio */
.expCard--a{ aspect-ratio: 16 / 9; }   /* besar kiri */
.expCard--b{ aspect-ratio: 4 / 3; }    /* kecil */
.expCard--c{ aspect-ratio: 4 / 3; }    /* kecil */
.expCard--d{ aspect-ratio: 16 / 7; }   /* wide bawah kanan (lebih pendek, rapi) */

.expCard__img--1{
  background-image: url("../images/experience_1.jpg");
}
.expCard__img--2{
  background-image: url("../images/experience_2.jpg");
}
.expCard__img--3{
  background-image: url("../images/experience_3.jpg");
}
.expCard__img--4{
  background-image: url("../images/experience_4.jpg");
}

/* =========================
   Facilities
========================= */
.facilityStrip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.facilityCard{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background:#ddd;
}
.facilityCard__img{
  width:100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.facilityCard__img--1{
  background-image: url("../images/facilities_1.jpg");
}
.facilityCard__img--2{
  background-image: url("../images/facilities_2.jpg");
}
.facilityCard__img--3{
  background-image: url("../images/facilities_3.jpg");
}

/* =========================
   Footer (baseline)
========================= */
.footer{
  background: #2f2f2c;
  color: rgba(255,255,255,.78);
  padding: clamp(54px, 6vw, 82px) 0;
}
.footerTitle{
  font-family: var(--serif);
  color: rgba(255,255,255,.92);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 12px;
}
.footerText{
  margin: 0 0 12px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.footerLink{
  display:inline-block;
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.20);
  padding-bottom: 6px;
}
.footerTop{
  display:grid;
  grid-template-columns: 1.15fr 1.2fr .75fr;
  gap: clamp(18px, 2.6vw, 38px);
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footerNav{
  display:grid;
  gap: 10px;
}
.footerNav a{
  color: rgba(255,255,255,.70);
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.footerBtns{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.subscribe{
  display:flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.subscribe__input{
  flex: 1;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  padding: 0 14px;
  outline: none;
}
.subscribe__input::placeholder{ color: rgba(255,255,255,.46); }
.subscribe__btn{
  height: 44px;
  border-radius: 999px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.90);
  color: rgba(0,0,0,.78);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  cursor:pointer;
}
.footerBottom{
  display:flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
}
.footerFine{
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
.footerFine a{ color: rgba(255,255,255,.62); }

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .nav{ display:none; }
  .navToggle{ display:block; }

  .header__inner{ grid-template-columns: auto 1fr auto; }
  .offerBand{ grid-template-columns: 1fr; }
  .offerBand__media{ min-height: 260px; }
  .accomGrid{ grid-template-columns: 1fr; }
  .accomCard{ min-height: 300px; }

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

  .footerTop{ grid-template-columns: 1fr; }
  .footerBottom{ flex-direction: column; align-items: flex-start; }

  /* Experiences: stack rapi di mobile */
  .expGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d";
  }
  .expCard--a{ aspect-ratio: 16/10; }
  .expCard--b,
  .expCard--c{ aspect-ratio: 16/10; }
  .expCard--d{ aspect-ratio: 16/10; }
}

@media (max-width: 520px){
  .hero__content{ padding: 40px 0; }
  .subscribe{ flex-direction: column; align-items: stretch; }
  .subscribe__btn{ width: 100%; }
}