:root{
    --cream:        #FBF1E4;
    --cream-deep:   #F3E0CB;
    --rose:         #D9577E;
    --rose-deep:    #7A233A;
    --rose-soft:    #F2C6D4;
    --plum:         #4A1F29;
    --plum-soft:    #8B5C68;
    --gold:         #B98A52;
    --card:         #FFFCF8;
    --border:       rgba(74,44,56,0.12);
    --shadow:       0 18px 40px -20px rgba(74,44,56,0.35);
    --radius-lg: 2px 28px 2px 28px;
    --radius-sm: 2px 14px 2px 14px;
  }
  :root:not([data-theme="light"]){
    @media (prefers-color-scheme: dark){
      --cream:        #211015;
      --cream-deep:   #2B161D;
      --rose:         #E58AA8;
      --rose-deep:    #F0AFC4;
      --rose-soft:    #3A1E27;
      --plum:         #F5E3E8;
      --plum-soft:    #D1AAB3;
      --gold:         #D9B685;
      --card:         #2A151C;
      --border:       rgba(243,227,232,0.14);
      --shadow:       0 18px 40px -20px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --cream:        #211015;
    --cream-deep:   #2B161D;
    --rose:         #E58AA8;
    --rose-deep:    #F0AFC4;
    --rose-soft:    #3A1E27;
    --plum:         #F5E3E8;
    --plum-soft:    #D1AAB3;
    --gold:         #D9B685;
    --card:         #2A151C;
    --border:       rgba(243,227,232,0.14);
    --shadow:       0 18px 40px -20px rgba(0,0,0,0.6);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--cream);
    color: var(--plum);
    font-family: 'Jost', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  h1,h2,h3,h4{
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    color: var(--plum);
    line-height: 1.15;
  }
  .container{ max-width: 1140px; margin: 0 auto; padding: 0 28px; }
  .eyebrow{
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--rose-deep);
    margin-bottom: 14px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:"";
    width: 26px; height: 1px;
    background: var(--gold);
    display:inline-block;
  }
  section{ padding: 110px 0; position:relative; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Jost', sans-serif; font-size:0.92rem; letter-spacing:0.02em;
    padding: 15px 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rose);
    cursor:pointer;
    transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
    background:transparent;
    color: var(--rose-deep);
  }
  .btn-solid{
    background: var(--rose);
    color: #FFF8F4;
    border-color: var(--rose);
    box-shadow: 0 14px 26px -14px rgba(180,101,125,0.65);
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-solid:hover{ background: var(--rose-deep); border-color: var(--rose-deep); }

  /* ---------- NAV ---------- */
  header{
    position: fixed; top:0; left:0; right:0; z-index: 100;
    background: rgba(251,243,236,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
  }
  :root[data-theme="dark"] header, @media (prefers-color-scheme: dark){ header{ background: rgba(34,23,32,0.86); } }
  header.scrolled{ border-bottom-color: var(--border); }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px 28px;
    max-width: 1140px; margin:0 auto;
  }
  .brand{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.5rem; font-weight:600; color: var(--plum);
    letter-spacing: 0.02em;
    display:flex; align-items:center; gap:8px;
  }
  .brand span{ color: var(--rose); font-style: italic; }
  .nav-links{
    display:flex; align-items:center; gap: 34px;
    font-size: 0.9rem; letter-spacing: 0.01em;
  }
  .nav-links a{
    position:relative; padding: 4px 0; color: var(--plum-soft);
    transition: color .25s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
    background: var(--rose); transition: width .3s ease;
  }
  .nav-links a:hover, .nav-links a.active{ color: var(--plum); }
  .nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .burger{
    display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
  }
  .burger span{ width:22px; height:1.5px; background: var(--plum); display:block; transition: all .3s ease; }
  .burger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

  /* ---------- HERO ---------- */
  #beranda{
    min-height: 100svh;
    display:flex; align-items:flex-end;
    padding: 0;
    background: var(--plum);
  }
  .hero-media{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(74,44,56,0.15) 0%, rgba(74,44,56,0.55) 72%, rgba(74,44,56,0.82) 100%),
                repeating-linear-gradient(135deg, #8F4A61 0px, #8F4A61 2px, #B4657D 2px, #B4657D 40px);
    z-index:0;
  }
  .photo-slot{
    background-size: cover; background-position:center;
  }
  #beranda .hero-media.photo-slot{
    background-image:
      linear-gradient(180deg, rgba(74,44,56,0.10) 0%, rgba(74,44,56,0.55) 70%, rgba(74,44,56,0.88) 100%),
      var(--hero-img, none);
  }
  .hero-placeholder-note{
    position:absolute; top:100px; right:28px; z-index:2;
    background: rgba(255,253,251,0.9); color: var(--plum-soft);
    font-size: 0.72rem; padding: 8px 14px; border-radius: 20px;
    border: 1px dashed var(--gold);
    max-width: 230px; text-align:right; line-height:1.4;
  }
  .hero-inner{
    position: relative; z-index: 1;
    width:100%; padding: 0 28px 100px;
    max-width: 1140px; margin: 0 auto;
    color: #FBF3EC;
  }
  .hero-inner .eyebrow{ color: var(--rose-soft); }
  .hero-inner .eyebrow::before{ background: var(--gold); }
  .hero-title{
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-style: italic;
    max-width: 780px;
    color: #FBF3EC;
    margin-bottom: 22px;
  }
  .hero-sub{
    font-size: 1.05rem; max-width: 480px; color: #EAD9DE; font-weight:300;
    margin-bottom: 36px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .hero-actions .btn:not(.btn-solid){
    color: #FBF1E4;
    border-color: rgba(251,241,228,0.55);
  }
  .hero-actions .btn:not(.btn-solid):hover{
    background: rgba(251,241,228,0.1);
    border-color: #FBF1E4;
  }
  .hero-scroll{
    position:absolute; bottom: 28px; right: 28px; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    color: #EAD9DE; font-size: 0.7rem; letter-spacing:0.16em;
  }
  .hero-scroll-line{ width:1px; height:46px; background: linear-gradient(#EAD9DE, transparent); animation: scrollpulse 2.2s ease-in-out infinite; }
  @keyframes scrollpulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

  /* ---------- TENTANG ---------- */
  .about-grid{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items:center;
  }
  .about-media{
    position:relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow:hidden;
    background: var(--cream-deep);
    border: 1px solid var(--border);
  }
  .about-media .photo-slot{
    position:absolute; inset:0;
    background-image: var(--about-img, none);
    display:flex; align-items:center; justify-content:center;
  }
  .about-media .frame-accent{
    position:absolute; top:-18px; left:-18px; right:18px; bottom:18px;
    border: 1px solid var(--gold); border-radius: var(--radius-lg);
    z-index:-1;
  }
  .about-copy p{ color: var(--plum-soft); margin-bottom: 18px; max-width: 46ch; }
  .about-title{ font-size: clamp(2rem, 3.4vw, 2.7rem); margin-bottom: 22px; }
  .about-stats{
    display:flex; gap: 40px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--border);
  }
  .about-stats div strong{ font-family:'Cormorant Garamond', serif; font-size:2rem; display:block; color: var(--rose-deep); }
  .about-stats div span{ font-size:0.8rem; color: var(--plum-soft); }

  /* ---------- KAMAR ---------- */
  #kamar{ background: var(--cream-deep); }
  .section-head{ text-align:center; max-width: 620px; margin: 0 auto 60px; }
  .section-head h2{ font-size: clamp(2.1rem, 3.6vw, 3rem); }
  .section-head p{ color: var(--plum-soft); margin-top: 16px; }
  .room-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  }
  .room-card{
    background: var(--card); border-radius: var(--radius-lg);
    overflow:hidden; border:1px solid var(--border);
    box-shadow: var(--shadow);
    display:flex; flex-direction:column;
    transition: transform .4s ease;
  }
  .room-card:hover{ transform: translateY(-6px); }
  .room-card.featured{ border-color: var(--rose); }
  .room-media{ aspect-ratio: 4/3; background: var(--rose-soft); position:relative; }
  .room-media .photo-slot{ position:absolute; inset:0; background-image: var(--room-img, none); }
  .room-tag{
    position:absolute; top:16px; left:16px; z-index:1;
    background: var(--rose); color:#fff; font-size:0.68rem; letter-spacing:0.08em;
    padding: 5px 12px; border-radius: 14px;
  }
  .room-body{ padding: 26px 26px 30px; display:flex; flex-direction:column; gap:14px; flex:1; }
  .room-name{ font-size:1.5rem; }
  .room-price{ color: var(--rose-deep); font-family:'Cormorant Garamond', serif; font-size:1.5rem; }
  .room-price small{ font-family:'Jost',sans-serif; font-size:0.75rem; color: var(--plum-soft); font-weight:300; }
  .room-feats{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:0.85rem; color: var(--plum-soft); }
  .room-feats li{ display:flex; align-items:center; gap:9px; }
  .room-feats li svg{ flex:none; color: var(--gold); }
  .room-card .btn{ margin-top:auto; align-self:flex-start; }

  /* ---------- FASILITAS ---------- */
  .fac-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden;
  }
  .fac-item{
    background: var(--card); padding: 38px 24px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    transition: background .3s ease;
  }
  .fac-item:hover{ background: var(--rose-soft); }
  .fac-item svg{ color: var(--rose-deep); }
  .fac-item span{ font-size:0.86rem; color: var(--plum-soft); }

  /* ---------- GALERI ---------- */
  #galeri{ background: var(--cream-deep); }
  .gal-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px;
  }
  .gal-item{
    position:relative; border-radius: var(--radius-sm); overflow:hidden; cursor: pointer;
    background: var(--rose-soft);
  }
  .gal-item .photo-slot{ position:absolute; inset:0; background-image: var(--gal-img, none); }
  .gal-item:nth-child(1){ grid-column: span 2; grid-row: span 2; }
  .gal-item:nth-child(4){ grid-column: span 2; }
  .gal-item::after{
    content: attr(data-label);
    position:absolute; left:14px; bottom:12px; z-index:1;
    color:#fff; font-size:0.78rem; letter-spacing:0.03em;
    opacity:0; transform: translateY(6px);
    transition: all .3s ease;
  }
  .gal-item::before{
    content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(74,44,56,0.65) 100%);
    opacity:0; transition: opacity .3s ease; z-index:0;
  }
  .gal-item:hover::after, .gal-item:hover::before{ opacity:1; transform:none; }

  .lightbox{
    position:fixed; inset:0; background: rgba(34,23,32,0.92); z-index:200;
    display:none; align-items:center; justify-content:center; padding: 40px;
  }
  .lightbox.open{ display:flex; }
  .lightbox-box{
    max-width: 780px; width:100%; aspect-ratio: 4/3; border-radius: var(--radius-lg);
    background: var(--rose-soft); position:relative; overflow:hidden;
  }
  .lightbox-box .photo-slot{ position:absolute; inset:0; background-image: var(--lightbox-img, none); }
  .lightbox-close{
    position:absolute; top:-46px; right:0; background:none; border:none; color:#FBF3EC;
    font-family:'Jost',sans-serif; font-size:0.85rem; cursor:pointer; letter-spacing:0.05em;
  }
  .lightbox-cap{ position:absolute; left:20px; bottom:16px; color:#FBF3EC; font-size:0.85rem; z-index:1;}

  /* ---------- LOKASI ---------- */
  .loc-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:stretch;
  }
  .loc-copy p{ color: var(--plum-soft); max-width: 42ch; margin-bottom: 26px; }
  .loc-addr{
    display:flex; gap:14px; margin-bottom: 30px; align-items:flex-start;
  }
  .loc-addr svg{ flex:none; color: var(--rose-deep); margin-top:3px; }
  .loc-addr strong{ display:block; margin-bottom:4px; font-family:'Cormorant Garamond', serif; font-size:1.2rem; }
  .map-box{
    position:relative; border-radius: var(--radius-lg); overflow:hidden;
    border: 1px solid var(--border); min-height: 340px;
    background:
      linear-gradient(rgba(251,243,236,0.0), rgba(251,243,236,0.0)),
      repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(180,101,125,0.14) 38px, rgba(180,101,125,0.14) 39px),
      repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(180,101,125,0.14) 38px, rgba(180,101,125,0.14) 39px),
      var(--cream-deep);
  }
  .map-pin{
    position:absolute; top:50%; left:50%; transform: translate(-50%,-100%);
    color: var(--rose); filter: drop-shadow(0 6px 10px rgba(74,44,56,0.35));
  }
  .map-frame{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
  .map-box .btn{
    position:absolute; bottom:20px; left:50%; transform: translateX(-50%);
  }

  /* ---------- KONTAK ---------- */
  #kontak{ background: var(--plum); color: #F3E3E8; }
  #kontak .eyebrow{ color: var(--rose-soft); }
  #kontak .section-head h2{ color:#FBF3EC; }
  #kontak .section-head p{ color: #D9BFC7; }
  .contact-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 50px;
  }
  .contact-card{
    background: rgba(251,243,236,0.06); border:1px solid rgba(251,243,236,0.16);
    border-radius: var(--radius-lg); padding: 40px;
    display:flex; flex-direction:column; gap:18px;
  }
  .contact-row{ display:flex; align-items:center; gap:16px; }
  .contact-row svg{ color: var(--gold); flex:none; }
  .contact-row a, .contact-row span{ font-size:0.98rem; }
  .contact-row small{ display:block; color:#C9AEB8; font-size:0.72rem; letter-spacing:0.06em; margin-bottom:2px; }
  .contact-form{ display:flex; flex-direction:column; gap:16px; }
  .contact-form input, .contact-form textarea{
    background: rgba(251,243,236,0.08); border:1px solid rgba(251,243,236,0.2);
    border-radius: 2px 12px 2px 12px; padding: 14px 16px; color:#FBF3EC; font-family:'Jost',sans-serif; font-size:0.9rem;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{ color:#C9AEB8; }
  .contact-form input:focus, .contact-form textarea:focus{ outline: 1px solid var(--gold); }
  .form-note{ font-size:0.76rem; color:#C9AEB8; }

  /* ---------- FLOATING WA ---------- */
  .fab{
    position: fixed; bottom: 26px; right: 26px; z-index: 90;
    display:flex; align-items:center; gap:10px;
    background: var(--rose); color:#FFF8F4;
    padding: 14px 22px 14px 16px; border-radius: 40px;
    box-shadow: 0 16px 30px -12px rgba(180,101,125,0.6);
    font-size:0.86rem;
    transition: transform .3s ease;
  }
  .fab:hover{ transform: translateY(-3px); }

  footer{
    background: var(--plum); color:#C9AEB8; text-align:center; padding: 30px 20px 34px;
    font-size:0.8rem; border-top: 1px solid rgba(251,243,236,0.1);
  }
  footer span{ color: var(--rose-soft); }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .about-grid, .loc-grid, .contact-grid{ grid-template-columns: 1fr; }
    .room-grid{ grid-template-columns: 1fr 1fr; }
    .fac-grid{ grid-template-columns: repeat(2, 1fr); }
    .gal-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows:160px; }
    .gal-item:nth-child(1){ grid-column: span 2; grid-row: span 1; }
  }
  @media (max-width: 720px){
    .nav-links{
      position:fixed; top:68px; left:0; right:0; bottom:0;
      background: var(--cream); flex-direction:column; justify-content:flex-start;
      padding: 40px 28px; gap: 28px; font-size:1.1rem;
      transform: translateX(100%); transition: transform .35s ease;
    }
    .nav-links.open{ transform: translateX(0); }
    .nav-cta .btn-solid{ display:none; }
    .burger{ display:flex; }
    .room-grid{ grid-template-columns: 1fr; }
    section{ padding: 80px 0; }
    .hero-placeholder-note{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    html{ scroll-behavior:auto; }
  }

  .gal-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap:20px;
}

.gal-item{
  border-radius: 18px;
  overflow: hidden;
}

.gal-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* kotak besar (kiri, tinggi 2 baris) */
.gal-item.big{
  grid-column: span 1;
  grid-row: span 2;
}

/* kotak lebar (melebar 2 kolom) */
.gal-item.wide{
  grid-column: span 2;
  grid-row: span 1;
}

/* ---------- FOTO PADA KARTU KAMAR ---------- */
.room-media .photo-slot{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.room-media .photo-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.room-card:hover .room-media .photo-slot img{
  transform:scale(1.04);
}
.room-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}
.room-actions .btn{ margin-top:0; }
.room-gallery-btn{ background:transparent; }

/* ---------- LIGHTBOX GALERI KAMAR ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(34,23,32,.94);
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}
.lightbox.open{ display:flex; }
.lightbox-box{
  width:min(100%,900px);
  position:relative;
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:0 25px 70px rgba(0,0,0,.35);
}
.lightbox-close{
  position:absolute;
  top:-42px;
  right:0;
  background:none;
  border:none;
  color:#FBF3EC;
  font-family:'Jost',sans-serif;
  font-size:.85rem;
  cursor:pointer;
  letter-spacing:.05em;
}
.lightbox-main{
  width:100%;
  height:min(62vh,560px);
  background:var(--rose-soft);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.lightbox-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.lightbox-nav{
  position:absolute;
  top:calc(50% - 28px);
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(34,23,32,.65);
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  z-index:3;
  transition:background .2s ease,transform .2s ease;
}
.lightbox-nav:hover{
  background:var(--rose);
  transform:scale(1.05);
}
.lightbox-prev{ left:34px; }
.lightbox-next{ right:34px; }
.lightbox-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:14px 2px 10px;
}
.lightbox-cap{ color:var(--plum); font-size:.9rem; }
.lightbox-counter{ color:var(--plum-soft); font-size:.78rem; }
.lightbox-thumbs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-top:4px;
}
.lightbox-thumb{
  flex:0 0 88px;
  height:62px;
  border:2px solid transparent;
  border-radius:8px;
  overflow:hidden;
  padding:0;
  background:var(--rose-soft);
  cursor:pointer;
  opacity:.65;
}
.lightbox-thumb.active{
  border-color:var(--rose);
  opacity:1;
}
.lightbox-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:720px){
  .room-actions{ flex-direction:column; }
  .room-actions .btn{
    width:100%;
    justify-content:center;
  }
  .lightbox{ padding:50px 14px 20px; }
  .lightbox-box{ padding:12px; }
  .lightbox-main{ height:55vh; }
  .lightbox-prev{ left:22px; }
  .lightbox-next{ right:22px; }
  .lightbox-nav{
    width:38px;
    height:38px;
  }
  .lightbox-close{ top:-35px; }
}