:root{
  --bg:#0c111b;
  --bg-soft:#0f1522;
  --fg:#e9eef8;
  --muted:#a9b3c7;
  --brand:#ff8800;          /* oranye brand */
  --brand-2:#ffd199;
  --glass:rgba(255,255,255,.04);
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --shadow:0 6px 40px rgba(0,0,0,.25), 0 1px 8px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 500px at 10% -10%, #1a2234 0%, var(--bg) 40%) fixed;
  color:var(--fg);
}

/* Nav */
.nav-glass{
  background: linear-gradient(180deg, rgba(10,13,22,.9), rgba(10,13,22,.5)) ;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar-brand img{ border-radius:8px }
.navbar .nav-link{ color:var(--fg); opacity:.86 }
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover{ color:#fff }
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg:#ff9a24;
  --bs-btn-hover-border-color:#ff9a24;
  --bs-btn-color:#1a1208;
  box-shadow: 0 6px 24px rgba(255,136,0,.35);
}

/* Sections */
.section{ padding: 72px 0 }
.hero{ padding-top: 140px; padding-bottom: 48px }

/* Surfaces */
.glass{
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.cardx{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Text */
.muted{ color:var(--muted) }
.hero-title{ font-size: clamp(30px, 4vw, 48px); line-height:1.1; }

/* Badges & icons */
.badge-outline{
  color: var(--brand);
  border: 1px solid var(--brand);
  background: rgba(255,136,0,.08);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.icon-badge{
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-size:20px;
}

/* Price */
.price{ font-weight:800; font-size:22px; color:#fff }

/* Grid photos */
.grid-photos{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 130px;
}
.grid-photos img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.grid-photos .col-span-2{ grid-column: span 2; }

/* Gallery */
.gallery img.gal-thumb{
  width:100%; height:auto; border-radius:12px; display:block;
  aspect-ratio:4/3; object-fit:cover;
  transition: transform .25s ease;
}
.gallery a:hover img{ transform:scale(1.02) }

/* Skeleton loader */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size:200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Map */
.map-embed{
  min-height: 340px;
  border: 1px solid var(--border);
  border-radius: 16px;
  filter: grayscale(.1) saturate(1.1) contrast(1.02) brightness(.98);
}

/* Floating actions */
.wa-float{
  position:fixed; right:18px; bottom:22px; z-index:1050;
  width:52px; height:52px; display:grid; place-items:center;
  background:#25D366; color:#fff; border-radius:999px;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
}
.call-float{
  position:fixed; left:18px; bottom:22px; z-index:1050;
  background:var(--glass); border:1px solid var(--border);
  padding:.55rem .8rem; border-radius:999px; color:#fff;
}

/* Back to top */
.back-to-top{
  position:fixed; right:18px; bottom:88px; z-index:1050; display:none;
}

/* Buttons focus */
.btn, .nav-link, a{ outline: none }
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible{
  outline:2px solid var(--brand-2); outline-offset:2px
}

/* Brand title (dipindah dari inline style) */
.brand-title{ font-weight:700; color:var(--brand) }

/* Images base */
img{ border:0; height:auto }

/* Small tweaks */
.divider{ border-color:var(--border) }

/* Responsive */
@media (max-width: 991.98px){
  .section{ padding: 64px 0 }
  .hero{ padding-top: 108px }
}

/* ================= Parallax Waves ================= */
.parallax-waves{
  position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden;
}
.parallax-waves .wave{
  position:absolute; left:0; width:100%; height:38vh; min-height:180px;
  opacity:.25; filter: blur(0.2px) saturate(1.1);
  transform: translate3d(0,0,0);
  will-change: transform;
}
.parallax-waves .wave path{
  fill: rgba(0, 181, 255, .14); /* biru neon transparan */
  stroke: rgba(0, 181, 255, .35);
  stroke-width: 0.6;
}

/* posisi default layer, nanti digerakkan JS pakai translateY + animasi horizontal */
.wave-1{ bottom:34vh; animation: waveMove 18s linear infinite; }
.wave-2{ bottom:22vh; animation: waveMove 12s linear infinite reverse; opacity:.30 }
.wave-3{ bottom:10vh; animation: waveMove 8s  linear infinite; opacity:.36 }

@keyframes waveMove {
  0% { transform: translate3d(0, var(--waveY,0), 0) translateX(0); }
  100% { transform: translate3d(0, var(--waveY,0), 0) translateX(-50%); }
}

/* ================= 3D Tilt ================= */
.tilt3d{
  transform-style: preserve-3d;
  perspective: 900px;
  will-change: transform;
}
.tilt3d img, .tilt3d picture, .tilt3d .img{
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.tilt3d:hover img, .tilt3d:focus-within img{
  --tz: 18px;
}

/* highlight tepi neon tipis saat hover (futuristik) */
.tilt3d img{
  outline: 0.5px solid rgba(0, 181, 255, .25);
  border-radius: 14px;
}

/* Motion-reduce: disable animasi besar */
@media (prefers-reduced-motion: reduce) {
  .wave-1, .wave-2, .wave-3 { animation: none !important; }
  .tilt3d img { transition: none !important; }
}

/* Kecilkan gelombang di mobile agar tidak menutupi konten */
@media (max-width: 575.98px){
  .parallax-waves .wave{ height: 28vh; }
  .wave-1{ bottom:38vh }
  .wave-2{ bottom:24vh }
  .wave-3{ bottom:12vh }
}

/* ================= FX: Variables (aman, tidak bentrok) ================= */
:root{
  --fx-brand: #ff8800;              /* oranye brand */
  --fx-wave-fill: color-mix(in srgb, var(--fx-brand) 18%, transparent);
  --fx-wave-stroke: color-mix(in srgb, var(--fx-brand) 40%, transparent);
}

/* ================= FX: Waves for HERO ================= */
#home{ position: relative; }
.fx-waves{
  position:absolute; left:0; right:0; bottom:-6px; height:22vh; min-height:130px;
  pointer-events:none; overflow:hidden; z-index:0;
}
.fx-wave{ position:absolute; left:0; width:140%; height:100%; }
.fx-wave path{
  fill: var(--fx-wave-fill);
  stroke: var(--fx-wave-stroke);
  stroke-width:.6;
}
.fx-wave.l1{ opacity:.22; animation: fx-drift 16s linear infinite; bottom:0; }
.fx-wave.l2{ opacity:.28; animation: fx-drift 11s linear infinite reverse; bottom:-6px; }

@keyframes fx-drift { 
  0% { transform: translateX(0) }
  100% { transform: translateX(-20%) }
}

@media (max-width:575.98px){
  .fx-waves{ height:16vh; }
}

/* ================= FX: Photo 3D + tiny wave underline ================= */
.fx-photo{ position: relative; z-index:1; }
.fx-photo img{
  display:block; width:100%; height:auto; border-radius:12px;
  transform: rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateZ(var(--fx-tz,0px));
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
  will-change: transform;
}
.fx-photo:hover img{ --fx-tz: 16px; }

/* Garis ombak tipis di bawah foto */
.fx-photo-wave{
  position:absolute; left:6%; right:6%; bottom:-2px; height:60px;
  opacity:.5; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.fx-photo-wave path{
  fill: var(--fx-wave-fill);
  stroke: var(--fx-wave-stroke);
  stroke-width:.6;
  stroke-dasharray: 6 14;
  animation: fx-wave-stroke 4s linear infinite;
}
@keyframes fx-wave-stroke{
  to{ stroke-dashoffset: -80; }
}

/* Idle bob (terasa “ombak”) — aktif otomatis di mobile */
@keyframes fx-bob {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-6px) }
}
@media (max-width: 767.98px){
  .fx-photo img{ animation: fx-bob 3.8s ease-in-out infinite; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fx-wave, .fx-photo img, .fx-photo-wave path{ animation: none !important; }
}

/* Card efek alam */
.cardx{
  background: radial-gradient(1200px 400px at 10% -10%, rgba(38,198,218,.18), transparent),
              radial-gradient(900px 300px at 110% 10%, rgba(129,199,132,.15), transparent),
              rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cardx:hover{
  transform: translateY(-6px) rotate3d(1,1,0, .6deg);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  border-color: rgba(129,199,132,.35);
}
.cardx::after{
  content:"";
  position:absolute; inset:auto -30%  -30% auto; width:180px; height:180px;
  background: radial-gradient(circle, rgba(129,199,132,.35), transparent 60%);
  filter: blur(10px);
  transform: rotate(15deg);
}

/* Wave dekor */
.wave-bottom{
  display:block; width:100%; height:120px; margin-top:24px;
}
.wave-bottom path{ fill:rgba(129,199,132,.18); }

/* Modal alam */
.nature-modal{
  position:fixed; inset:0; z-index:1055; display:none;
  align-items:center; justify-content:center;
}
.nature-modal.show{ display:flex; }
.nature-backdrop{
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(76,175,80,.18), transparent),
              radial-gradient(900px 400px at 120% 110%, rgba(3,169,244,.18), transparent),
              rgba(5,13,24,.75);
  animation: fadeBackdrop .35s ease both;
}
@keyframes fadeBackdrop{ from{opacity:0} to{opacity:1} }

.nature-dialog{
  position:relative; width:min(900px,92vw); max-height:88vh; overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px; backdrop-filter: blur(10px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 22px 22px 26px;
  transform: translateY(10px) scale(.98); opacity:0;
  animation: popNature .35s cubic-bezier(.2,.8,.2,1) .05s forwards;
}
@keyframes popNature{ to{ transform:translateY(0) scale(1); opacity:1 } }

.btn-close-nature{
  position:absolute; top:12px; right:12px; width:38px; height:38px; border:none;
  border-radius:50%; background:rgba(0,0,0,.35); color:#fff;
}
.btn-close-nature::before{ content:"✕"; font-size:18px; }
.btn-close-nature:hover{ background:rgba(0,0,0,.5); }

.nature-header h3{ margin: 6px 0 0; }
.nature-header p{ margin: 6px 0 12px; }

.nature-body{ position:relative; }
.nature-body::before, .nature-body::after{
  content:""; position:absolute; pointer-events:none;
  width:120px; height:120px; background: url('assets/images/leaf.svg') no-repeat center/contain;
  opacity:.18; filter: drop-shadow(0 10px 12px rgba(0,0,0,.2));
  animation: floatLeaf 12s ease-in-out infinite;
}
.nature-body::before{ left:-14px; top:-10px; animation-delay:.5s }
.nature-body::after { right:-14px; bottom:-10px; animation-delay:1.2s }
@keyframes floatLeaf{
  0%,100%{ transform: translateY(0) rotate(0deg) }
  50%{ transform: translateY(-10px) rotate(6deg) }
}

.badge-pack{
  display:inline-block; margin:10px 0 6px; padding:7px 12px;
  background:rgba(76,175,80,.18); border:1px solid rgba(76,175,80,.35);
  border-radius:999px; font-weight:600;
}
.list-nature{ margin-left:1rem; }
.list-nature li{ margin:.25rem 0; }

.list-nature.columns{
  columns: 2 260px; column-gap: 24px;
}

.grid-chip{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 12px; border-radius:999px; font-size:.92rem;
  background:rgba(3,169,244,.15); border:1px solid rgba(3,169,244,.35);
}
.note-nature{ font-size:.9rem; opacity:.85; margin-top:8px }

/* Responsif kecil */
@media (max-width: 576px){
  .list-nature.columns{ columns: 1; }
}

/* 4 kolom sejajar rapi */
#blog .row > div{
  display: flex;
}
#blog article{
  flex:1;
}