:root{
  --brand: #3ba9ff;
  --brand-2: #2d89ff;
  --ink: #0f213b;
  --muted: #5a6f91;
  --ring: #dbeafe;
  --bg: #f6fbff;
  --surface: #ffffff;
  --radius: 16px;
  --container: 1100px;
  --fab-right: 28px;
  --fab-bottom: 18px;
  --bg-soft-1:#dff1ff;
  --bg-soft-2:#eaf6ff;
  --bg-soft-3:#f5fbff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0; overflow-x:hidden}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink);
     background: linear-gradient(180deg, var(--bg-soft-1) 0%, var(--bg-soft-2) 40%, var(--bg-soft-3) 80%, #ffffff 100%);}
body::before{content:""; position:fixed; inset:-20% -10% auto -10%; height:62vh; z-index:-1;
  background: radial-gradient(120% 80% at 50% 10%, rgba(59,169,255,.38) 0%, rgba(59,169,255,0) 62%); pointer-events:none;}
body::after{content:""; position:fixed; inset:auto -10% -15% -10%; height:40vh; z-index:-1;
  background: radial-gradient(80% 60% at 50% 100%, rgba(45,137,255,.20) 0%, rgba(45,137,255,0) 70%); pointer-events:none;}

h1,h2,h3{font-family: 'Playfair Display', serif; margin:0 0 10px}
h2{font-size: clamp(24px, 3.2vw, 36px)}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.muted.big{font-size:1.05rem}
.container{max-width:var(--container); margin:0 auto; padding:0 16px}
.section{padding:56px 0}
.pill{display:inline-block; padding:.45rem .8rem; border-radius:999px; border:1px solid var(--ring); background:#fff; font-weight:700; color:#0f213b; margin-bottom:8px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:999px; border:1px solid var(--ring); background:#fff; font-weight:800; color:var(--ink); text-decoration:none}
.btn.primary{background:linear-gradient(180deg,#3bb1ff,#2d89ff); color:#fff; border:none; box-shadow:0 14px 40px rgba(45,137,255,.25)}
.btn.ghost{background:#fff}
.btn:active{transform:translateY(1px)}

/* Header */
:root{ --header-h: 68px; }
.site-header{position:sticky; top:0; z-index:50; background:#fff}
.header-row{display:flex; align-items:center; gap:12px; min-height:var(--header-h)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{width:40px; height:40px; border-radius:8px; object-fit:cover}
.brand-text{line-height:1}
.brand-text strong{font-weight:800}
.brand-text span{font-size:.78rem; color:#6b7c98}
.nav{display:flex; align-items:center; gap:18px; margin-left:auto}
.nav-list{display:flex; gap:22px; align-items:center; margin:0; padding:0; list-style:none}
.nav-list a{font-weight:700; color:var(--ink); text-decoration:none}
.nav-list a:hover{color:var(--brand-2)}
.cta{padding:.6rem 1rem; border-radius:999px}

/* Hamburger */
.nav-toggle{display:none; margin-left:auto; width:40px; height:40px; border:1px solid #e6efff; border-radius:10px; background:#fff}
.nav-toggle span{display:block; width:20px; height:2px; background:#0f213b; margin:5px auto; border-radius:2px}

/* Tablet & Mobile */
@media (max-width: 980px){
  .brand-logo{width:34px; height:34px}
  .brand-text strong{font-size:1rem}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}

  .nav{position:fixed; left:0; right:0; top:var(--header-h); display:block; padding:10px 14px; background:#fff; border-top:1px solid #eef2ff; box-shadow:0 20px 40px rgba(0,0,0,.06); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s ease; z-index:70}
  html.nav-open .nav{transform:none; opacity:1; pointer-events:auto}
  .nav-list{display:grid; gap:8px; grid-auto-rows:44px}
  .nav-list a{display:flex; align-items:center; padding:0 6px; border-radius:10px}
  .nav-list a:active{background:#f3f7ff}
  .cta{display:block; margin-top:8px; text-align:center}
  .nav-backdrop{position:fixed; inset:0; background:rgba(2,6,23,.25); backdrop-filter: blur(2px); z-index:60}
  html.nav-open .nav-backdrop{display:block}
}
@media (max-width:640px){
  .brand-text span{display:none}
}

/* Hero */
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:24px; align-items:center}
.hero-picture, .card-img, .ph{display:block; overflow:hidden; border-radius:14px}
.hero-picture img, .card-img img, .ph img{width:100%; height:100%; object-fit:cover; display:block}
.hero-picture{border-radius:24px; box-shadow:0 40px 120px rgba(53,135,255,.25)}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }

/* Hero heading scale */
#home h1, .hero h1, .hero-title{font-size: clamp(28px, 6.2vw, 64px); line-height:1.08; margin:0 0 12px; text-wrap:balance}
@media (max-width:980px){ #home h1, .hero h1, .hero-title{font-size: clamp(28px, 6.8vw, 48px); line-height:1.12} }
@media (max-width:640px){ #home h1, .hero h1, .hero-title{font-size: 28px; line-height:1.2} }

.stats{display:flex; gap:12px; margin:12px 0 10px; flex-wrap:wrap}
.stat{flex:1 1 120px; min-width:120px; background:#fff; border:1px solid var(--ring); border-radius:16px; padding:14px}
.stat b{font-size:1.4rem}
.stat span{display:block; color:var(--muted)}
.actions{display:flex; gap:12px; margin-top:8px}

/* Destinasi grid */
.grid.cards{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cards.fav-3x2{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .grid.cards,.grid.cards.fav-3x2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid.cards,.grid.cards.fav-3x2{grid-template-columns:1fr} }
.card{border:1px solid var(--ring); border-radius:16px; overflow:hidden; background:#fff}
.card-head{padding:12px 14px 6px}
.card p{color:var(--muted); padding:0 14px 14px}

/* 📍 bullets for destinasi */
.card .desc-list{
  margin: 0 14px 14px;
  padding-left: 0;
  color: var(--muted);
  list-style: none;
}
.card .desc-list li{
  position: relative;
  line-height: 1.5;
  padding-left: 1.25rem;
}
.card .desc-list li::before{
  content: "📍";
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: .9rem;
  line-height: 1;
  color: var(--brand-2);
  filter: saturate(110%);
}

/* Itinerary */
.two{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
@media (max-width:980px){ .two{grid-template-columns:1fr} }
.itin-form .row{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
.itin-form label{display:block; font-weight:700}
.itin-form input,.itin-form textarea{width:100%; padding:.7rem .8rem; border:1px solid var(--ring); border-radius:10px; font:inherit; background:#fff}
.itin-form textarea{min-height:96px; resize:vertical}
.itin-form label.full{grid-column:1 / -1}
.form-actions{margin-top:8px}

.summary{border:1px solid var(--ring); border-radius:16px; padding:12px; background:#fff}
.sum-head{font-weight:800; margin-bottom:6px}
.sum-body{display:grid; gap:8px}
.sum-row{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed #edf2ff; padding-bottom:6px}
.sum-row:last-child{border-bottom:none}
.sum-row span{color:var(--muted)}
.sum-row strong{max-width:60%; text-align:right; white-space:pre-wrap; word-break:break-word}

/* Persiapan */
.check-grid{display:grid; grid-template-columns: repeat(3,minmax(260px,1fr)); gap:12px; margin-top:10px}
@media (max-width:980px){ .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .check-grid{grid-template-columns:1fr} }
.check{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:#fff; border:1.25px solid #e4edff; box-shadow:0 1px 0 rgba(16,24,40,.02)}
.check:hover{border-color:#cfe2ff; box-shadow:0 6px 20px rgba(54,168,255,.08)}
.check input{width:20px; height:20px; flex:0 0 20px; margin-top:.15rem; accent-color: var(--brand-2)}
.item-label{font-weight:800; font-size:1.02rem}
.item-sub{color:#4c5c78; font-size:.92rem; margin-top:4px; display:block}
.badge{display:inline-block; padding:.1rem .35rem; border:1px solid #dbeafe; background:#eef6ff; border-radius:999px; font-size:.68rem; margin-left:6px}

.pills{display:flex; gap:.5rem; flex-wrap:wrap}
.pill{cursor:pointer}
.pill.active{background:linear-gradient(180deg,#3bb1ff,#2d89ff); color:#fff; border:none}

.check-actions{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:10px}
.progress{position:relative; flex:1 1 220px; min-width:220px; height:14px; background:#eef6ff; border:1px solid #dbeafe; border-radius:999px; overflow:hidden}
.progress-inner{height:100%; width:0%; background:linear-gradient(90deg, var(--brand), var(--brand-2))}
.progress-text{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; color:var(--ink)}

/* Galeri */
.grid.photos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:980px){ .grid.photos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid.photos{grid-template-columns:1fr} }
.ph{height:350px; border-radius:284px}

/* FAQ */
.faq{border:1px solid var(--ring); border-radius:12px; padding:.8rem 1rem; background:#fff; margin-bottom:8px}
.faq summary{cursor:pointer; font-weight:800}

/* Contact */
.section-contact{
  background: linear-gradient(180deg,#f7fbff, #ffffff);
  border-top: 1px solid #f1f5ff;
}
.contact-grid{ display:grid; gap:14px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 12px }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }
.c-card{ border:1px solid var(--ring); border-radius:16px; background:#fff; padding:14px; display:flex; flex-direction:column; gap:10px; box-shadow: 0 1px 0 rgba(16,24,40,.02) }
.c-card.highlight{ background: linear-gradient(180deg, #f0f7ff, #ffffff); border-color: #cfe2ff; box-shadow: 0 20px 60px rgba(45,137,255,.10) }
.c-head{ display:flex; gap:12px; align-items:flex-start }
.c-head h3{ margin:0 }
.ci{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:0 0 40px }
.ci svg{ width:22px; height:22px }
.ci-wa{ background:linear-gradient(180deg,#25D366,#23c45e) }
.ci-mail{ background:linear-gradient(180deg,#60a5fa,#2563eb) }
.ci-pin{ background:linear-gradient(180deg,#fb923c,#f97316) }
.c-body .row{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px }
.c-body .row2{ display:flex; gap:8px; flex-wrap:wrap }
.c-body input,.c-body textarea{ width:100%; padding:.7rem .8rem; border:1px solid var(--ring); border-radius:10px; font:inherit; background:#fff }
.c-body textarea{ min-height:90px; resize:vertical }
.btn.wide{ width:100% }
.hours{ list-style:none; padding:0; margin:0 0 6px; color:var(--muted) }
.hours li{ padding:.15rem 0 }
.addr{ font-style:normal; color:var(--ink) }
.socials{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:999px; border:1px solid var(--ring); background:#fff; font-weight:700; text-decoration:none; color:var(--ink) }
.chip.ig:hover{ border-color:#fdc }
.chip.tiktok:hover{ border-color:#ddd }
.chip.yt:hover{ border-color:#fcc }
.chip.tele:hover{ border-color:#cde }
.contact-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.toast{ position: fixed; left:50%; transform:translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); background:#0f213b; color:#fff; padding:.6rem .9rem; border-radius:999px; box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 10000; font-weight:700; opacity:0; pointer-events:none; transition:.2s ease }
.toast.show{ opacity:1 }

/* Map */
.map-wrap{border:1px solid var(--ring); border-radius:16px; overflow:hidden}
.map{width:100%; height:360px; border:0}

/* Footer */
.footer{padding:24px 0; border-top:1px solid #f1f5ff; color:#6b7c98}

/* Floating WhatsApp: mobile-first with adjustable offsets */
.fab-wa{
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + var(--fab-right));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fab-bottom));
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#25D366,#1fb257);
  color: #0f213b;
  box-shadow: 0 12px 28px rgba(37,211,102,.35);
  z-index: 9999; transform: translateZ(0);
}
.fab-wa::after{ content:""; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(37,211,102,.45); animation:fABpulse 2s infinite }
@keyframes fABpulse{ to{ box-shadow:0 0 0 14px rgba(37,211,102,0) } }
/* Hide on desktop only */
@media (min-width:981px){ .fab-wa{ display:none } }
/* FAB responsive offsets */
@media (max-width: 430px){ :root{ --fab-right: 32px } }
@media (min-width: 431px) and (max-width: 980px){ :root{ --fab-right: 26px } }

/* ===== Mobile fine-tuning (iPhone sizes) ===== */
@media (max-width: 414px){
  .container{ padding: 0 14px; }
  .btn{ padding:.72rem .96rem }
  .stats{ gap:10px }
  .stat{ padding:12px }
}
@media (max-width: 390px){
  #home h1, .hero h1, .hero-title{ font-size: clamp(24px, 7vw, 34px); line-height:1.15 }
  .muted.big{ font-size:.98rem }
  .stat{ flex:1 1 140px; min-width:140px; padding:12px }
  .actions{ gap:10px }
}
@media (max-width: 375px){
  #home h1, .hero h1, .hero-title{ font-size: clamp(22px, 7.2vw, 32px); }
  .stat b{ font-size:1.15rem }
}
@media (max-width: 360px){
  .stats{ gap:8px }
  .stat{ flex:1 1 100%; min-width: 0 } /* stack 1 per baris */
  .actions{ flex-wrap: wrap }
  .actions .btn{ flex:1 1 100% }      /* tombol full width */
}
@media (max-width: 340px){
  #home h1, .hero h1, .hero-title{ font-size: 21px }
}

/* WhatsApp buttons (text non-white, bright & readable) */
#heroWA, #ctaWA, #waButton, #ctaWA2{
  background: linear-gradient(180deg,#25D366,#1fb257) !important;
  color:#0f213b !important;
  border:none;
  text-shadow:none;
}
#heroWA:hover, #ctaWA:hover, #waButton:hover, #ctaWA2:hover{
  filter:brightness(1.05);
}

/* === Gallery video tools === */
.gallery-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 8px 0 10px }
.gallery-tools .file-btn{ position:relative }
.gallery-tools .url-add{ display:flex; gap:8px; align-items:center }
.gallery-tools .url-add input{ width: min(440px, 70vw); padding:.65rem .8rem; border:1px solid var(--ring); border-radius:10px; font:inherit; background:#fff }
.gallery-tools .hint{ display:block; width:100%; margin-top:2px }

/* Gallery video tile */
.ph.video{ position:relative; padding-top:56.25%; height:auto; background:#000; }
.ph.video > iframe,
.ph.video > video{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:14px; object-fit:cover; display:block }
.ph.video > video{ background:#000 }

/* Ensure consistent radius */
.grid.photos .ph,
.grid.photos .ph.video{ border-radius:14px; overflow:hidden }
/* === Lang switch === */
.lang-switch{ margin-left: 8px; }
.lang-switch select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.5rem .8rem; border:1px solid var(--ring); border-radius:999px; background:#fff; font-weight:800; cursor:pointer;
}
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.packages { margin-bottom: 20px; }
.packages h3 { margin-bottom: 12px; }
.pkg {
  cursor: pointer;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: #fff;
  transition: .2s;
}
.pkg:hover {
  border-color: var(--brand-2);
  box-shadow: 0 6px 18px rgba(45,137,255,.12);
}
.pkg h4 { margin: 0 0 6px; font-size: 1.05rem; }
.pkg p { margin: 0; color: var(--muted); }