/* =========================================================
   RESET & VARIABLES
========================================================= */

:root{
  --bg: #f6f1e6;
  --surface: rgba(255,255,255,.85);
  --text: #1c2a3a;
  --muted: #4a5a6a;
  --line: rgba(28,42,58,.14);

  --primary: #1f4f63;
  --accent:  #c8a24a;

  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Geom", sans-serif;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

html,body{
  margin:0;
  font-family: var(--font-body);
  padding:0;
  /* font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
  color: var(--text);
  background:
    linear-gradient(rgba(246,241,230,.88), rgba(246,241,230,.88)),
    url("../img/bg.jpg") center/cover fixed no-repeat;
}

body.menu-lock{
  overflow: hidden;
}


a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

.container{
  width: min(1140px, 92%);
  margin-inline: auto;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,h2,h3{ margin:0 0 10px; letter-spacing:.3px; }
h1{ font-size: clamp(30px, 4vw, 46px); font-family: var(--font-display);}
h2{ font-size: clamp(22px, 3vw, 30px); font-family: var(--font-display);}
h3{ font-size: 18px; }

p{ margin:0 0 12px; line-height:1.65; }
.lead{ font-size:17px; color:rgba(28,42,58,.85); }
.muted{ color:var(--muted); }

.list{ padding-left:18px; }
.list li{ margin-bottom:6px; }

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  transition:.15s ease;
}

.btn.primary{
  border:none;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  color:#fff;
  font-weight:700;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

/* =========================================================
   HEADER & NAVBAR
========================================================= */

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index:1100;
  background: transparent;
  
  border-bottom:1px solid transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.site-header.is-scrolled{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(28,42,58,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;

}

.brand-mark{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 14px;

  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand img{
  height: 40px;  /* naikkan: 36–44px biasanya pas */
  width: auto;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.16));
}

/* Saat header sudah solid (scroll), background logo bisa dibuat lebih subtle */
.site-header.is-scrolled .brand-mark{
  background: transparent;
  border-color: rgba(28,42,58,.12);
}


.site-nav{
  display:flex;
  gap:12px;
}

.menu-toggle{
  display:none;
  font-size:14px;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  cursor:pointer;
}

/* ===== Menu Icon (hamburger -> X) ===== */
.menu-toggle{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:grid;
  place-items:center;
}

.menu-icon{
  width: 20px;
  height: 14px;
  position: relative;
  display:block;

}

.menu-icon span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:99px;
  background: rgba(28,42,58,.85); /* garis */
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}

.menu-icon span:nth-child(1){ top:0; }
.menu-icon span:nth-child(2){ top:6px; }
.menu-icon span:nth-child(3){ top:12px; }

/* Saat open: jadi X */
.menu-toggle.is-open .menu-icon span:nth-child(1){
  top:6px;
  transform: rotate(45deg);
}
.menu-toggle.is-open .menu-icon span:nth-child(2){
  opacity:0;
}
.menu-toggle.is-open .menu-icon span:nth-child(3){
  top:6px;
  transform: rotate(-45deg);
}



/* =========================================================
   MOBILE NAV
========================================================= */

.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  display:none;
  z-index:900;
}
.menu-backdrop.show{ display:block; }

/* =========================================================
   MAIN OFFSET
========================================================= */

main{ padding-top:0; }

/* =========================================================
   HERO (TAO STYLE)
========================================================= */

.hero-zen{
  min-height:100svh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(rgba(246,241,230,.70), rgba(246,241,230,.60)),
    url("../img/anggrek3.jpeg") center/cover no-repeat;
}

.hero-zen-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  padding:0 0 72px;
}

.eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(28,42,58,.7);
}

.hero-mini{
  margin-top:22px;
  display:grid;
  gap:10px;
}

.mini-item{
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
}

.hero-zen-card{
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

/* =========================================================
   SECTIONS
========================================================= */

.section{ padding:0; }
.section.alt{
  background:rgba(255,255,255,.35);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* =========================================================
   SERVICES (YONI STYLE)
========================================================= */

.alt-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  margin:18px 0;
  background:rgba(255,255,255,.55);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

.alt-section.reverse .alt-img{ order:2; }

.alt-img{
  min-height:260px;
  background-size:cover;
  background-position:center;
  position:relative;
}

.alt-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.25),transparent);
}

.alt-content{
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.alt-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.price-badge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid var(--line);
  font-weight:700;
}

/* =========================================================
   WORKING HOURS
========================================================= */

.hours-wrap{ display:flex; justify-content:center; }

.hours-card{
  width:min(680px,100%);
  background:
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)),
    url("../img/bg-2.jpg") center/cover no-repeat;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  text-align:center;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}

.hours-line{
  display:flex;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  margin-top:10px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px){
  .hero-zen-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 860px){
  .menu-toggle{ display:inline-block; }

  .site-nav{
    position:fixed;
    top:76px;
    left:16px;
    right:16px;
    display:none;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    z-index:1100;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
  }

  .site-nav.open{ display:flex; }

  .alt-section{
    grid-template-columns:1fr;
  }

  .alt-section.reverse .alt-img{ order:0; }

.hero-zen{
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
  }

  /* isi hero (grid/inner) */
  .hero-zen-grid{
    width: 100%;
    padding-top: 92px;   /* sesuaikan: kira-kira tinggi header Anda */
    padding-bottom: 24px;
  }

   .hero-zen,
  .hero-zen::before,
  .hero-zen .hero-bg{
    min-height: 100svh;
  }
}


/* MOBILE */
@media (max-width: 520px){
  .hero-zen-grid{ 
    width: 100%;
    padding-top: 44px;
    padding-left: 30px;
    padding-right: 20px;
    padding-bottom: 24px;}

   .hero-zen{
    min-height: 100svh;
   display: flex;
   padding-top: 86px;
    align-items: center;
  }

  .site-nav a{
    padding: 12px 10px;
    font-size: 15px;
  }
  /* .hero-zen-grid{
    padding: 64px 0 48px;
  } */

   body{
    font-size: 15.5px;
  }

  h1{
    font-size: 30px;
    line-height: 1.25;
  }

  h2{
    font-size: 22px;
    line-height: 1.3;
  }

  h3{
    font-size: 17px;
  }

  p, .lead{
    font-size: 15.5px;
    line-height: 1.7;
  }

   .section{
    padding: 48px 0;
  }

  .alt-content{
    padding: 22px 18px;
  }

  .hero-mini{
    gap: 12px;
  }

  .mini-item{
    padding: 14px 16px;
  }

  .btn{
    width: 100%;
    min-height: 44px;
    padding: 12px 18px;
    margin-top: 30px;
    font-size: 15px;
    justify-content: center;
  }

  .btn.primary{
    width: 100%;
    justify-content: center;
  }

   .alt-section{
    margin: 22px 0;
  }

  .alt-img{
    min-height: 220px;
  }

   /* Badge jangan mepet, dan mudah dibaca */
  .price-badge{
    margin-left: 0;          /* jaga-jaga kalau ada style lama */
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.1;
  }

  .hours-card{
    padding: 20px;
  }

  .hours-line{
    flex-direction: column;
    gap: 4px;
    text-align: center;
    font-size: 15px;
  }
 /* Baris durasi + badge: lebih renggang dan bisa turun baris */
  .alt-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }

   /* Area tombol: dipisah jelas */
  .alt-actions{
    display: flex;
    flex-direction: column;  /* stack ke bawah */
    gap: 10px;
    margin-top: 12px;
  }

    /* Tombol booking full-width */
  .alt-actions .btn.primary{
    width: 100%;
    justify-content: center;
  }

   /* Tombol detail juga full-width tapi gaya “secondary” */
  .alt-actions .btn{
    width: 100%;
    justify-content: center;
  }

   /* Kalau Anda pakai variasi tombol kecil */
  .btn.small{
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

.badge-popular{
  display:inline-block;
  margin-bottom:6px;
  border-radius:999px;
  font-weight:300;
  background: rgba(248, 212, 121, 0.15);
  color: var(--accent);
}


}



/* ===== Sticky WhatsApp (mobile only) ===== */
/* .wa-sticky{ display:none; }

@media (max-width: 860px){
  .wa-sticky{
    display:flex;
    position:fixed;
    left:16px;
    right:16px;
    bottom:14px;
    z-index:1200;

    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:50px;
    padding:12px 16px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.35);
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color:#fff;
    font-weight:800;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
  }

  .wa-dot{
    width:10px; height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.95);
    box-shadow:0 0 0 6px rgba(255,255,255,.18);
  } */

  /* Biar konten bawah tidak ketutup tombol */
  /* body{
    padding-bottom: 84px;
  }
} */

/* ===== Floating WhatsApp icon (mobile-first) ===== */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1400;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: #25D366; /* warna WA */
  color: #fff;

  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.25);

  transition: transform .12s ease, box-shadow .12s ease;
}

.wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(0,0,0,.26);
}

.wa-float svg{
  width: 28px;
  height: 28px;
}

/* optional: tampilkan hanya di mobile */
@media (min-width: 981px){
  .wa-float{ display:none; }
}





/* ////AREA UNTUK HALAMAN SERVICES//// */
/* ===== Service page blocks ===== */
.page-hero{
  padding-top: 76px;
}

.svc{
  padding: 28px 0;
  scroll-margin-top: 92px; /* agar anchor tidak ketutup header fixed */
}

.svc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.svc-img{
  min-height: 320px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.svc-img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.22), transparent);
}

.svc-body{
  padding: 15px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.svc-body p{
  line-height: 1.65;
}



.svc-price{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.price-tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  font-weight: 800;
  font-size: 14px;
}

.svc-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.svc-actions .btn:not(.primary){
  background: #b7f0f186;
  color: var(--primary);
  border: 1px solid var(--line);
}


@media (max-width: 860px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-img{ min-height: 240px; }
}

@media (max-width: 520px){
  .svc-actions{ flex-direction: column; }
  .svc-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

.badge-popular{
  display:inline-block;
  margin-bottom:6px;
  padding:6px 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background: rgba(199,165,79,.15);
  color: var(--accent);
}




/* ===== Testimonials slider (scroll-snap) ===== */
.t-slider{
  margin-top: 14px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 84%);
  gap: 14px;

  overflow-x: auto;
  padding: 6px 2px 14px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.t-slider::-webkit-scrollbar{ 
    display: none;
    height: 8px; }
.t-slider::-webkit-scrollbar-thumb{
  background: rgba(28,42,58,.18);
  border-radius: 99px;
}
.t-slider::-webkit-scrollbar-track{
  background: rgba(28,42,58,.06);
  border-radius: 99px;
}

.t-card{
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 16px;
}

.t-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.t-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.t-name{
  font-weight: 900;
  letter-spacing: .2px;
}

.t-meta{
  font-size: 13px;
  color: rgba(28,42,58,.65);
  margin-top: 2px;
}

.t-text{
  margin:0;
  line-height: 1.65;
  color: rgba(28,42,58,.86);
}

.t-hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(28,42,58,.60);
}

/* Desktop: tampilkan lebih lebar */
@media (min-width: 981px){
  .t-slider{
    grid-auto-columns: min(380px, 32%);
  }
}


/* Dots */
.t-dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top: 12px;
}

.t-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  border:1px solid rgba(28,42,58,.25);
  background: rgba(28,42,58,.12);
  cursor:pointer;
}

.t-dot.is-active{
  background: var(--accent);
  border-color: rgba(255,255,255,.35);
  transform: scale(1.15);
}




/* ===== Contact + Map Section ===== */
.contact-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}

.map-card, .contact-card{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  overflow:hidden;
}

.map-embed{
  width:100%;
  aspect-ratio: 16 / 10; /* responsif */
  background: rgba(28,42,58,.06);
}
.map-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.contact-card{
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.contact-block{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
}

.contact-label{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(28,42,58,.65);
  margin-bottom: 6px;
}

.contact-text{
  line-height: 1.65;
  color: rgba(28,42,58,.9);
}

.contact-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-card{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
}

.social-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 6px;
  border-radius: 12px;
  transition: .12s ease;
}
.social-link:hover{
  background: rgba(28,42,58,.06);
}

.social-ic{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  text-transform: lowercase;
  font-size: 13px;
}

/* Mobile */
@media (max-width: 860px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .map-embed{
    aspect-ratio: 16 / 12;
  }
  .contact-actions .btn{
    width: 100%;
    justify-content: center;
  }
}


/* MEDIA SOSIAL */
.social-ic{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: #2b7696;
  color:#fff;
}

.social-ic svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-link:hover .social-ic{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* AKHIR MEDSOS */