/* ============================================================
   De Pangpong Village — style.css
   Palette: base #F5F0E8 · charcoal #1C1A14 · gold #B8973A
             gold-light #D4AF6A · cream #EDE0C8 · ink #2C2C2C
   ============================================================ */

:root{
  --base: #F5F0E8;
  --charcoal: #1C1A14;
  --gold: #B8973A;
  --gold-light: #D4AF6A;
  --gold-dark: #8B6914;
  --cream: #EDE0C8;
  --creamdark: #C8B89A;
  --beige: #F0EBE1;
  --beige-2: #EDE6D8;
  --ink: #2C2C2C;
  --ink-light: #6B6B6B;
  --wa: #25D366;
  --danger: #E53E3E;
  --white: #ffffff;
  --dark-bg: #1C1A14;
  --dark-card: #242018;
}

*{ -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{ overflow-x:hidden; background: var(--base); }
img{ display:block; }

/* ---------- NAVBAR ---------- */
#navbar{
  color: #fff;
  transition: background .35s, box-shadow .35s, color .35s;
}
#navbar.scrolled{
  background: rgba(245,240,232,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(26,26,46,.06), 0 8px 30px rgba(26,26,46,.06);
}
.nav-logo-text{ font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.1; }
.nav-logo-text .gold{ color: var(--gold-light); }
.nav-logo-sub{ font-size: 0.6rem; letter-spacing: 0.25em; opacity: 0.6; font-weight: 400; font-family: 'Poppins', sans-serif; }
.nav-logo-icon{ width: 36px; height: 36px; }
.nav-logo-img { height: 40px; width: auto; max-width: 160px; object-fit: contain; display: block; }

.nav-a{
  position: relative; color: inherit; opacity: .85;
  transition: opacity .2s; font-size: .875rem; font-weight: 500;
}
.nav-a:hover{ opacity: 1; }
.nav-a::after{
  content:''; position: absolute; left: 0; bottom: -6px;
  height: 1.5px; width: 0; background: var(--gold-light); transition: width .3s;
}
.nav-a:hover::after{ width: 100%; }

.btn-nav-cta{
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  padding: .65rem 1.5rem;
  border-radius: 999px;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(184,151,58,.35);
}
.btn-nav-cta:hover{
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(184,151,58,.4);
}

/* Hamburger */
.ham-line{ transition:transform .3s; }
.ham-line::before,.ham-line::after{
  content:''; position:absolute; left:0; width:24px; height:2px;
  background:currentColor; transition:transform .3s,top .3s;
}
.ham-line::before{ top:-7px; } .ham-line::after{ top:7px; }
#mobileNav.open{ display:flex; animation:fadeIn .3s; }
.mob-a{ opacity:.9; transition:color .2s; color: #fff; }
.mob-a:hover{ color: var(--gold-light); }

/* ---------- TICKER / MARQUEE ---------- */
.ticker-bar{
  background: var(--charcoal);
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  padding: 0.65rem 0;
}
.ticker-track{
  display: flex;
  gap: 0;
  animation: ticker 30s linear infinite;
  width: max-content;
}
.ticker-item{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
.ticker-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.ticker-bar:hover .ticker-track{ animation-play-state: paused; }

/* ---------- HERO ---------- */
.hero-overlay{
  background: linear-gradient(
    180deg,
    rgba(28,26,20,.45) 0%,
    rgba(28,26,20,.15) 35%,
    rgba(28,26,20,.55) 70%,
    rgba(28,26,20,.88) 100%
  );
}
.hero-img{ animation: kenburns 9s ease-out both; }
.swiper-slide-active .hero-img{ animation: kenburns 9s ease-out both; }
@keyframes kenburns{ from{ transform:scale(1.1); } to{ transform:scale(1); } }

.hero-eyebrow{
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--gold-light);
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hero-eyebrow::before{
  content: '';
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold-light);
}

.hero-title{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.07;
  color: #fff;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
}
.hero-title .gold{ color: var(--gold-light); font-style: italic; }

.hero-subtitle{
  color: rgba(255,255,255,.82);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42ch;
}
.hero-subtitle strong{ color: #fff; font-weight: 600; }

.btn-gold{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--gold); color: #fff; font-weight: 600;
  padding: .95rem 1.8rem; border-radius: 999px; font-size: .95rem;
  box-shadow: 0 10px 28px rgba(184,151,58,.35);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.btn-gold:hover{
  transform: translateY(-2px);
  background: var(--gold-light);
  box-shadow: 0 14px 36px rgba(184,151,58,.45);
}

.btn-outline-white{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid rgba(255,255,255,.6); color: #fff; font-weight: 500;
  padding: .95rem 1.8rem; border-radius: 999px; font-size: .95rem;
  transition: background .25s, border-color .25s;
  backdrop-filter: blur(6px);
}
.btn-outline-white:hover{ background: rgba(255,255,255,.12); border-color: #fff; }

/* Hero Stats Bar at bottom of hero */
.hero-stats{
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  width: 100%;
  max-width: 580px;
}
.hero-stat{
  flex: 1;
  text-align: left;
  padding-right: 1.5rem;
  border-right: 1px solid rgba(255,255,255,.15);
  margin-right: 1.5rem;
}
.hero-stat:last-child{ border-right: none; margin-right: 0; padding-right: 0; }
.hero-stat-num{
  font-family: "Playfair Display", serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.hero-stat-label{
  font-size: .62rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  margin-top: .3rem;
  font-weight: 500;
}

.scroll-indicator svg{ animation: bounceArrow 1.8s ease-in-out infinite; }
@keyframes bounceArrow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ---------- SECTION TITLES ---------- */
.eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
.eyebrow::before, .eyebrow::after{
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
}
.section-title{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--charcoal);
  margin-top: .6rem;
}
.section-title .gold{ color: var(--gold); }
.bg-dark .section-title, .bg-dark .eyebrow{ color: #fff; }
.bg-dark .eyebrow{ color: var(--gold-light); }
.bg-dark .eyebrow::before, .bg-dark .eyebrow::after{ background: var(--gold-light); }

/* ---------- KEUNGGULAN CARDS ---------- */
.adv-card{
  background: #fff;
  border-radius: 18px;
  padding: 2rem 1.8rem;
  box-shadow: 0 2px 12px rgba(26,26,20,.05);
  transition: transform .3s, box-shadow .3s;
  position: relative;
}
.adv-card::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.8rem;
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
  border-radius: 999px;
}
.adv-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 45px rgba(26,26,20,.1); }
.adv-card-icon{
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
}

/* ---------- TIPE RUMAH CARDS ---------- */
.grid-desktop{ display:flex; }
@media(min-width:1024px){
  .typeSwiper .grid-desktop{ display:flex; justify-content:center; flex-wrap:wrap; gap:1.5rem; transform:none!important; }
  .typeSwiper .swiper-slide{ width:380px!important; height:auto; }
}

/* Countdown & Price formatting */
.type-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(28, 26, 20, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 10px rgba(0,0,0,0.15);
}
.type-countdown .timer-display {
  color: var(--gold-light);
  letter-spacing: 0.05em;
  font-weight: 700;
}
.original-price-strike {
  font-size: 0.82rem;
  color: rgba(44, 44, 44, 0.4);
  text-decoration: line-through;
  text-align: right;
}
.promo-price-highlight {
  font-family: "Playfair Display", serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--gold);
  text-align: right;
  line-height: 1.2;
}

.type-card{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26,26,20,.07);
  transition: transform .3s, box-shadow .3s;
  height: 100%;
}
.type-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 55px rgba(26,26,20,.14); }

.type-card-image{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.type-card-image img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s ease;
}
.type-card:hover .type-card-image img{ transform: scale(1.05); }

.type-card-body{ padding: 1.6rem; }
.type-card-name{
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--charcoal);
}
.type-card-sub{
  font-size: .82rem;
  color: var(--ink-light);
  margin-top: .15rem;
}
.type-card-price-label{
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--ink-light);
  text-transform: uppercase;
  font-weight: 500;
  text-align: right;
}
.type-card-price{
  font-family: "Playfair Display", serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--gold);
  text-align: right;
  line-height: 1.2;
}

.type-specs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top: 1rem;
}
.type-spec-item{
  background: var(--beige);
  border-radius: 10px;
  padding: .55rem .4rem;
  text-align: center;
}
.type-spec-label{
  font-size: .6rem;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.type-spec-val{
  font-size: .9rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: .1rem;
  font-family: 'Inter', sans-serif;
}

.type-cicilan{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
  border-bottom: 1px solid var(--beige);
  border-top: 1px solid var(--beige);
  margin-top: .75rem;
  font-size: .85rem;
}
.type-cicilan-label{ color: var(--ink-light); }
.type-cicilan-val{ font-weight: 700; color: var(--charcoal); font-family: 'Inter', sans-serif; }

/* Sisa unit badge */
.type-stock-row{
  display: flex;
  align-items: center;
  margin-top: .6rem;
  font-size: .78rem;
  font-weight: 500;
}
.type-stock-ok{
  color: #2e7d50;
  background: rgba(46,125,80,.08);
  border: 1px solid rgba(46,125,80,.2);
  border-radius: 20px;
  padding: .2rem .65rem;
}
.type-stock-low{
  color: #b45309;
  background: rgba(234,88,12,.08);
  border: 1px solid rgba(234,88,12,.25);
  border-radius: 20px;
  padding: .2rem .65rem;
}
.type-stock-empty{
  color: #b91c1c;
  background: rgba(185,28,28,.07);
  border: 1px solid rgba(185,28,28,.2);
  border-radius: 20px;
  padding: .2rem .65rem;
}
.type-stock-ok strong, .type-stock-low strong, .type-stock-empty strong{ font-weight: 700; }

.btn-type-detail{
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 1rem;
  background: var(--gold); color: #fff; font-weight: 700;
  padding: .85rem; border-radius: 12px; font-size: .9rem;
  transition: background .2s, transform .2s;
}
.btn-type-detail:hover{ background: var(--gold-dark); transform: translateY(-1px); }

/* Badge */
.badge-cream{
  background: var(--cream); color: var(--charcoal);
  font-size: .65rem; font-weight: 700; letter-spacing: .05em;
  padding: .28rem .65rem; border-radius: 999px;
  position: absolute; top: .85rem; left: .85rem;
}
.badge-warning{
  background: #fff4e0; color: #b9770c;
  font-size: .65rem; font-weight: 700;
  padding: .28rem .65rem; border-radius: 999px;
  border: 1px solid #f0d9a8;
  position: absolute; top: .85rem; right: .85rem;
}

/* Price animation (keep from original) */
.price-block{ position:relative; min-height:78px; }
.orig-wrap{ height:22px; }
.orig-price{ position:relative; display:inline-block; color:var(--danger); font-size:1rem; font-family:Inter,sans-serif; opacity:.85; }
.strikethrough.draw::after{
  content:''; position:absolute; left:0; top:50%; height:2px; width:0; background:var(--danger);
  animation:drawLine .5s ease forwards;
}
@keyframes drawLine{ to{ width:100%; } }
.promo-wrap{ margin-top:2px; }
.promo-price{
  font-family:Inter,sans-serif; font-weight:800; font-size:1.85rem; color: var(--gold);
  display:inline-block; opacity:0; transform:translateY(20px); transition:opacity .5s, transform .5s;
}
.promo-price.show{ opacity:1; transform:translateY(0); }
.discount-badge{
  display:inline-block; margin-top:.4rem; background:var(--cream); border:1px solid var(--creamdark);
  color:#6b5a36; font-size:.72rem; font-weight:700; padding:.28rem .7rem; border-radius:8px;
  opacity:0; transform:scale(.4);
}
.discount-badge.pop{ animation:bounceIn .6s cubic-bezier(.18,.89,.32,1.28) forwards, glow 2.4s ease-in-out 1s infinite; }
@keyframes bounceIn{ 0%{ opacity:0; transform:scale(.4); } 60%{ transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); } }
@keyframes glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(200,184,154,0); } 50%{ box-shadow:0 0 16px 2px rgba(200,184,154,.55); } }

/* Countdown */
.countdown{ display:flex; align-items:center; gap:.5rem; background:var(--beige); border-radius:10px; padding:.55rem .8rem; }
.cd-label{ font-size:.72rem; color:var(--ink); opacity:.6; }
.cd-clock{ margin-left:auto; font-weight:700; font-size:.95rem; color:var(--charcoal); letter-spacing:.03em; }
.cd-clock.urgent{ color:var(--danger); }

.wa-card-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  background:var(--wa); color:#fff; font-weight:600; padding:.85rem; border-radius:12px;
  transition:transform .2s, filter .2s;
}
.wa-card-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* ---------- KPR CALCULATOR ---------- */
.kpr-section{
  background: var(--dark-bg);
  position: relative;
  overflow: hidden;
}
.kpr-section::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(184,151,58,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(184,151,58,.05) 0%, transparent 50%);
}
.kpr-slider-row{ margin-bottom: 1.5rem; }
.kpr-slider-header{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .6rem;
}
.kpr-slider-label{
  font-size: .875rem; color: rgba(255,255,255,.7); font-weight: 400;
}
.kpr-slider-value{
  font-size: .875rem; color: var(--gold-light); font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.kpr-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%; height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.kpr-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(184,151,58,.25);
  transition: box-shadow .2s;
}
.kpr-range::-webkit-slider-thumb:hover{
  box-shadow: 0 0 0 5px rgba(184,151,58,.35);
}
.kpr-range::-moz-range-thumb{
  width: 20px; height: 20px; border: none;
  border-radius: 50%; background: var(--gold);
  cursor: pointer;
}
.kpr-label-css{ display:block; font-size:.8rem; color:rgba(255,255,255,.7); margin-bottom:.5rem; }
.kpr-input{
  width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  color:#fff; border-radius:10px; padding:.7rem .9rem; font-family:'Inter',sans-serif;
}
.kpr-input:focus{ outline:none; border-color:var(--gold-light); }

.kpr-result-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(184,151,58,.2);
  border-radius: 20px;
  padding: 2rem;
}
.kpr-result-label{
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--gold-light);
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.kpr-result-label::before{
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1px;
  background: var(--gold-light);
}
.kpr-result-amount{
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.1;
  margin: 1rem 0 .5rem;
}
.kpr-result-period{
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}
.kpr-detail-item{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 1rem;
}
.kpr-detail-label{
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  font-weight: 500;
  margin-bottom: .3rem;
}
.kpr-detail-val{
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  font-family: 'Inter', sans-serif;
}
.btn-kpr-consult{
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 1.25rem;
  background: var(--gold); color: #fff; font-weight: 700;
  padding: 1rem; border-radius: 14px; font-size: .95rem;
  transition: background .2s, transform .2s;
}
.btn-kpr-consult:hover{ background: var(--gold-light); transform: translateY(-1px); }

/* ---------- VIDEO PROMO ---------- */
.video-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: var(--charcoal);
}
.video-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s, filter .5s;
}
.video-card:hover img{ transform: scale(1.05); filter: brightness(.75); }
.video-card-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(28,26,20,.85) 100%);
}
.video-card-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .2s, transform .2s;
}
.video-card:hover .video-card-play{
  background: rgba(184,151,58,.7);
  transform: translate(-50%, -60%) scale(1.1);
}
.video-card-meta{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem;
}
.video-card-platform{
  font-size: .6rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .3rem;
}
.video-card-title{
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

/* ---------- GALERI ---------- */
.gallery-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.filter-btn{
  padding: .5rem 1.2rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  transition: all .2s;
  cursor: pointer;
}
.filter-btn.active{ background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.filter-btn:hover:not(.active){ background: var(--beige); }

.gallery-masonry{ column-count:2; column-gap:1rem; }
@media(min-width:768px){ .gallery-masonry{ column-count:3; } }
@media(min-width:1024px){ .gallery-masonry{ column-count:4; } }
.gallery-item{
  position:relative; break-inside:avoid; margin-bottom:1rem;
  border-radius:14px; overflow:hidden; cursor:pointer;
}
.gallery-item img{ width:100%; transition:transform .5s; display: block; }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.5rem .9rem .7rem;
  color:#fff; font-size:.8rem;
  background:linear-gradient(transparent,rgba(28,26,20,.8));
  opacity:0; transition:opacity .3s;
}
.gallery-item:hover figcaption{ opacity:1; }
.gallery-item.hide{ display:none; }

/* Gallery grid masonry layout */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
@media(max-width:767px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:768px) and (max-width:1023px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
.gallery-grid-item{
  border-radius: 14px; overflow: hidden; cursor: pointer;
  position: relative; aspect-ratio: 3/4;
}
.gallery-grid-item.tall{ aspect-ratio: 3/6; }
.gallery-grid-item.wide{ grid-column: span 2; aspect-ratio: 16/9; }
.gallery-grid-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.gallery-grid-item:hover img{ transform: scale(1.05); }
.gallery-grid-item figcaption{
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem .85rem .7rem;
  background: linear-gradient(transparent, rgba(28,26,20,.8));
  color: #fff; font-size: .8rem;
  opacity: 0; transition: opacity .3s;
}
.gallery-grid-item:hover figcaption{ opacity: 1; }

/* ---------- LOKASI ---------- */
.lokasi-proximity-card{
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-shadow: 0 2px 10px rgba(26,26,20,.06);
  transition: transform .2s, box-shadow .2s;
}
.lokasi-proximity-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,26,20,.1); }
.lokasi-prox-icon{
  font-size: 1.5rem;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--beige);
  border-radius: 12px;
  flex-shrink: 0;
}
.lokasi-prox-name{
  font-weight: 600;
  font-size: .9rem;
  color: var(--charcoal);
}
.lokasi-prox-time{
  font-size: .75rem;
  color: var(--ink-light);
  margin-top: .1rem;
}

/* ---------- SPESIFIKASI ---------- */
.spec-row{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.3rem; }
.spec-alt{ background:var(--beige); }
@media(min-width:768px){ .spec-alt{ background:transparent; } .spec-row:nth-child(4n+1),.spec-row:nth-child(4n+4){ background:var(--beige); } }

/* ---------- FASILITAS ---------- */
.facility-grid{ grid-auto-rows:200px; }
.facility-item{ position:relative; border-radius:16px; overflow:hidden; cursor:pointer; height:100%; }
.facility-item img{ width:100%; height:100%; transition:transform .5s; }
.facility-item:hover img{ transform:scale(1.07); }
.facility-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(28,26,20,.72)); opacity:.85; }
.facility-item figcaption{ position:absolute; left:1rem; bottom:.9rem; z-index:2; color:#fff; font-family:"Playfair Display",serif; font-weight:600; font-size:1.05rem; }

/* ---------- URGENCY ---------- */
.urgency-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(184,151,58,.18);
  border-radius:14px; padding:1.5rem 1rem;
  transition:box-shadow .3s, border-color .3s;
}
.urgency-card:hover{ border-color:var(--gold-light); box-shadow:0 0 24px rgba(184,151,58,.12); }
.big-countdown{ display:inline-flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.cd-unit{ background:rgba(184,151,58,.08); border:1px solid rgba(184,151,58,.2); border-radius:14px; padding:1rem 1.1rem; min-width:78px; }
.cd-num{ display:block; font-size:2.2rem; font-weight:700; color:var(--gold-light); line-height:1; font-variant-numeric:tabular-nums; }
.cd-tag{ font-size:.7rem; letter-spacing:.1em; color:rgba(255,255,255,.5); text-transform:uppercase; }

/* ---------- TESTIMONI ---------- */
.testi-card{
  background:#fff;
  border:1px solid rgba(184,151,58,.15);
  border-radius:18px; padding:1.8rem; height:100%;
  box-shadow:0 2px 10px rgba(26,26,20,.04);
}
.testi-stars{ color: var(--gold); letter-spacing: .1em; }

/* ---------- FAQ ---------- */
.faq-item{
  background:#fff; border-radius:14px; overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 6px rgba(26,26,20,.04);
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; text-align:left; padding:1.2rem 1.5rem; font-weight:500;
  font-size:.98rem; cursor:pointer; color: var(--charcoal);
}
.faq-icon{
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, background .3s;
  flex-shrink: 0; line-height: 1;
}
.faq-item.open .faq-icon{
  transform: rotate(45deg);
  background: var(--gold);
  color: #fff;
}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 1.5rem 1.25rem; color:var(--ink); opacity:.65; font-size:.9rem; line-height:1.6; }

/* ---------- LEAD FORM ---------- */
.form-label{ display:block; font-size:.8rem; font-weight:500; color:var(--ink); margin-bottom:.4rem; }
.form-input{
  width:100%; border:1.5px solid #e7e1d6; border-radius:10px;
  padding:.7rem .9rem; font-size:.92rem; background:var(--base);
  transition:border-color .2s, box-shadow .2s;
}
.form-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,151,58,.12); }
.form-submit{
  width:100%; background:var(--gold); color:#fff; font-weight:700;
  padding:.95rem; border-radius:12px; transition:transform .2s, background .2s; cursor:pointer;
  font-size: .95rem;
}
.form-submit:hover{ transform:translateY(-2px); background:var(--gold-dark); }
.form-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* ---------- SOCIAL ICONS ---------- */
.social-ic{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.08);
  font-size:.72rem; font-weight:600; transition:background .2s;
  color: rgba(255,255,255,.7);
}
.social-ic:hover{ background:var(--gold); color:#fff; }

/* ---------- CHATBOT ---------- */
.bot-launcher{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:50;
  width:62px; height:62px; border-radius:50%;
  background: linear-gradient(135deg, var(--charcoal) 0%, #2a2518 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  box-shadow: 0 10px 30px rgba(28,26,20,.35), 0 0 0 4px rgba(184,151,58,.25);
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
  transition:opacity .35s, transform .35s cubic-bezier(.18,.89,.32,1.28), box-shadow .25s;
}
.bot-launcher.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.bot-launcher:hover{ transform:translateY(-2px) scale(1.06); box-shadow:0 14px 36px rgba(28,26,20,.45), 0 0 0 4px rgba(184,151,58,.4); }
.bot-launcher-pulse{ position:absolute; inset:-4px; border-radius:50%; background:var(--gold); opacity:.4; animation:botPulse 2.4s ease-out infinite; z-index:-1; }
@keyframes botPulse{ 0%{ transform:scale(1); opacity:.45; } 100%{ transform:scale(1.6); opacity:0; } }
.bot-launcher-badge{
  position:absolute; top:-2px; right:-2px; min-width:20px; height:20px;
  padding:0 6px; border-radius:10px; background:var(--danger);
  color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(229,62,62,.4); border:2px solid #fff;
}
.bot-launcher.hide-badge .bot-launcher-badge{ display:none; }
.bot-launcher.open .bot-icon-open{ display:none; }
.bot-launcher.open::before{ content:"×"; font-size:32px; line-height:1; font-weight:300; }
.bot-launcher.open .bot-launcher-pulse{ display:none; }

.bot-panel{
  position:fixed; bottom:6.5rem; right:1.5rem; z-index:49;
  width:380px; max-width:calc(100vw - 2rem); height:580px; max-height:calc(100vh - 8rem);
  background:#fff; border-radius:20px; box-shadow:0 20px 60px rgba(28,26,20,.28);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(20px) scale(.96); pointer-events:none; transform-origin:bottom right;
  transition:opacity .25s, transform .3s cubic-bezier(.18,.89,.32,1.18);
}
.bot-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media(max-width:639px){
  .bot-panel{ bottom:0; right:0; left:0; width:auto; max-width:none; height:100vh; max-height:100vh; border-radius:0; }
}

.bot-header{
  background: linear-gradient(135deg, var(--charcoal) 0%, #2a2518 100%);
  color:#fff; padding:1rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
}
.bot-header-info{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.bot-avatar{
  position:relative; width:42px; height:42px; border-radius:50%;
  background: var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Playfair Display",serif; font-weight:700; font-size:1.15rem;
  flex-shrink:0; overflow:hidden;
}
.bot-avatar img{ width:100%; height:100%; object-fit:cover; }
.bot-online{ position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid var(--charcoal); }
.bot-header-text{ min-width:0; }
.bot-name{ font-family:"Playfair Display",serif; font-weight:700; font-size:1.02rem; line-height:1.2; }
.bot-status{ font-size:.72rem; opacity:.75; display:flex; align-items:center; gap:.3rem; margin-top:.1rem; }
.bot-status-dot{ width:6px; height:6px; border-radius:50%; background:#22c55e; }
.bot-close{ background:transparent; border:none; color:#fff; font-size:1.6rem; line-height:1; padding:0 .3rem; opacity:.7; cursor:pointer; }
.bot-close:hover{ opacity:1; }

.bot-messages{
  flex:1; overflow-y:auto; padding:1rem .9rem;
  background: var(--beige); display:flex; flex-direction:column;
  gap:.6rem; scroll-behavior:smooth;
}
.bot-msg{
  max-width:85%; padding:.65rem .85rem; border-radius:14px;
  font-size:.88rem; line-height:1.45; white-space:pre-wrap; word-wrap:break-word;
  animation:botMsgIn .25s ease-out;
}
@keyframes botMsgIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.bot-msg-bot{ align-self:flex-start; background:#fff; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.04); color:var(--ink); }
.bot-msg-user{ align-self:flex-end; background:var(--charcoal); color:#fff; border-bottom-right-radius:4px; }
.bot-msg-time{ font-size:.65rem; opacity:.55; margin-top:.25rem; }

.bot-typing{ align-self:flex-start; background:#fff; padding:.7rem .95rem; border-radius:14px; border-bottom-left-radius:4px; display:flex; gap:.25rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.bot-typing span{ width:7px; height:7px; border-radius:50%; background:var(--creamdark); animation:botType 1.2s infinite; }
.bot-typing span:nth-child(2){ animation-delay:.15s; }
.bot-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes botType{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }

.bot-quickreplies{ padding:0 .9rem .5rem; background:var(--beige); display:flex; flex-wrap:wrap; gap:.4rem; max-height:140px; overflow-y:auto; }
.bot-quickreplies:empty{ display:none; }
.bot-qr-btn{
  background:#fff; border:1px solid var(--creamdark); color:var(--charcoal);
  padding:.45rem .8rem; border-radius:18px; font-size:.78rem; font-weight:500;
  cursor:pointer; transition:all .15s; line-height:1.2;
}
.bot-qr-btn:hover{ background:var(--cream); border-color:var(--charcoal); transform:translateY(-1px); }

.bot-input{ background:#fff; border-top:1px solid var(--beige); padding:.7rem .8rem; display:flex; gap:.5rem; align-items:center; }
.bot-input input{ flex:1; border:1px solid #e5e0d3; border-radius:24px; padding:.6rem 1rem; font-size:.88rem; font-family:inherit; outline:none; transition:border-color .15s; min-width:0; }
.bot-input input:focus{ border-color:var(--charcoal); }
.bot-input button[type="submit"]{ width:40px; height:40px; border-radius:50%; background:var(--gold); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .15s, transform .15s; }
.bot-input button[type="submit"]:hover{ background:var(--gold-dark); transform:scale(1.05); }
.bot-input button[type="submit"]:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.bot-wa-footer{ background:var(--wa); color:#fff; padding:.75rem 1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.85rem; font-weight:600; text-decoration:none; transition:filter .15s; }
.bot-wa-footer:hover{ filter:brightness(1.08); }

@media(prefers-reduced-motion:reduce){
  .bot-launcher-pulse, .bot-typing span{ animation:none !important; }
  .bot-msg{ animation:none; }
}

/* ---------- EXIT POPUP ---------- */
.exit-overlay{ position:fixed; inset:0; z-index:80; background:rgba(28,26,20,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:1.5rem; animation:fadeIn .3s; }
.exit-modal{ position:relative; background:#fff; border-radius:22px; max-width:420px; width:100%; padding:2.4rem; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.3); animation:popUp .35s cubic-bezier(.18,.89,.32,1.28); }
.exit-close{ position:absolute; top:.8rem; right:1.1rem; font-size:1.8rem; color:var(--ink); opacity:.4; line-height:1; }
.exit-close:hover{ opacity:.8; }

/* ---------- SOCIAL PROOF ---------- */
.social-proof{ position:fixed; bottom:1.5rem; left:1.5rem; z-index:45; background:#fff; border-radius:14px; padding:.85rem 1.1rem; box-shadow:0 10px 30px rgba(28,26,20,.18); display:flex; align-items:center; gap:.7rem; font-size:.82rem; max-width:300px; transform:translateX(-130%); transition:transform .45s cubic-bezier(.18,.89,.32,1.1); }
.social-proof.show{ transform:translateX(0); }
.sp-dot{ width:9px; height:9px; border-radius:50%; background:var(--wa); flex-shrink:0; box-shadow:0 0 0 3px rgba(37,211,102,.2); }

/* ---------- LIGHTBOX ---------- */
#lightbox{ position:fixed; inset:0; z-index:90; background:rgba(10,10,18,.94); display:none; align-items:center; justify-content:center; }
#lightbox.show{ display:flex; animation:fadeIn .25s; }
#lightbox img{ max-width:92vw; max-height:86vh; border-radius:8px; }
#lightbox .lb-close{ position:absolute; top:1.2rem; right:1.5rem; color:#fff; font-size:2.4rem; opacity:.8; }
#lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:2.6rem; opacity:.7; padding:1rem; cursor:pointer; user-select:none; }
#lightbox .lb-prev{ left:.5rem; } #lightbox .lb-next{ right:.5rem; }
#lightbox .lb-nav:hover{ opacity:1; }

/* ---------- IMG FALLBACK ---------- */
.img-fallback{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:160px;
  background:linear-gradient(135deg,#EDE0C8 0%,#C8B89A 60%,#1C1A14 100%);
  color:#fff; font-family:"Playfair Display",serif; font-size:1rem;
  text-align:center; padding:1rem;
}

/* ---------- COUNTER ---------- */
.counter{ font-variant-numeric:tabular-nums; }

/* ---------- SWIPER PAGINATION ---------- */
.type-pagination .swiper-pagination-bullet{ background: var(--gold); }
.testi-pagination .swiper-pagination-bullet{ background: var(--creamdark); }

/* ---------- DESKTOP GRID (testimonials & types shown as grid, not carousel) ---------- */
@media(min-width:1024px){
  .swiper.testiSwiper { overflow: visible; }
  .swiper.testiSwiper .grid-desktop {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    transform: none !important;
  }
  .swiper.testiSwiper .grid-desktop .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes popUp{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .promo-price{ opacity:1; transform:none; }
  .discount-badge{ opacity:1; transform:none; }
}