/* =====================================================================
   MAILELO FLORES — PREMIUM UI REDESIGN 2026
   Full design system override. Loaded last, overrides all prior CSS.
   ===================================================================== */

/* ─── 1. CSS VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --primary:          #0B4F6C;
  --primary-light:    #1a7aa0;
  --primary-dark:     #083a50;
  --accent:           #E8A045;
  --accent-dark:      #c8832a;

  /* Surfaces */
  --bg:               #F7F9FC;
  --surface:          #FFFFFF;
  --surface-alt:      #EEF3F8;

  /* Text */
  --text-dark:        #12192B;
  --text-mid:         #4A5568;
  --text-light:       #8A9AB5;

  /* Border */
  --border:           #E2E8F0;

  /* Shadows */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:        0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:        0 20px 48px rgba(0,0,0,.15);
  --shadow-card:      0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);

  /* Radii */
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        24px;

  /* Layout */
  /* Logo ~42px + badge + 12px*2 ke pinggir bar */
  --nav-height:       76px;
  --maxwidth:         1180px;
  --autopad:          max(24px, calc((100% - var(--maxwidth)) / 2));

  /* Override old theme vars so tema_style.css buttons use new palette */
  --color1:           #0B4F6C;
  --color2:           #E8A045;
  --colorborder:      #E2E8F0;
  --colorbg:          #F7F9FC;
  --colortext:        #4A5568;
}

/* ─── 2. BASE RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  color: var(--text-mid) !important;
  background: var(--bg) !important;
  background-image: none !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

#mainwrap {
  background: var(--bg) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

a {
  color: var(--primary) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
a:hover { color: var(--accent) !important; }

p { margin: 0 0 1em !important; }

img { max-width: 100%; height: auto; }

/* ─── 3. BUTTONS ────────────────────────────────────────────────────── */
.ibtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  transition: all .22s ease !important;
  position: static !important;
}

.ibtn:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(232,160,69,.4) !important;
  color: #fff !important;
}

.ibtn .fa,
button.ibtn .fa {
  position: static !important;
  display: inline !important;
  background: none !important;
  left: auto !important; top: auto !important; bottom: auto !important;
  padding: 0 !important;
  font-size: 13px !important;
  margin-right: 0 !important;
}
.ibtn:hover .fa { background: none !important; }

i.fa { padding: 0 !important; margin-left: 0 !important; vertical-align: -.06em; }
i.fa::before { padding-left: 0 !important; margin-left: 0 !important; }
.tourt i.fa, .toggleMenu i.fa { margin-right: .45em; }
.destirasi li i.fa { margin-right: .4em; vertical-align: -.08em; }

/* ─── 4. NAVBAR ─────────────────────────────────────────────────────── */
#naviwrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(8, 58, 80, .97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  /* Jarak badge putih ↔ bar navbar berwarna (bukan padding di dalam putih) */
  padding: 12px var(--autopad) !important;
  display: flex !important;
  align-items: center !important;
  height: var(--nav-height) !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.22) !important;
  gap: 0 !important;
}

/* Logo: badge putih; padding hanya cukup untuk gambar (tipis) */
.nav-logo {
  flex-shrink: 0 !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 8px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}
.nav-logo img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Hamburger toggle */
.toggleMenu {
  display: none !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 6px !important;
  align-items: center !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  order: 3 !important;
  transition: background .2s !important;
}
.toggleMenu:hover { background: rgba(255,255,255,.12) !important; }

/* Nav links container */
.menu-menu-1-container {
  flex: 1 !important;
  justify-content: center !important;
  /* display is set per breakpoint — see section 20 */
}

/* display:flex di desktop-only — Lihat §20. Jika diterapkan di mobile, !important
   menang atas display:none inline dari jQuery slideToggle() → menu tak bisa ditutup */
#menu-menu-1.naviku {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#menu-menu-1.naviku::after { display: none !important; }

.naviku > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
}
.naviku > li > a {
  padding: 7px 13px !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;
  border-radius: var(--radius-sm) !important;
  transition: all .2s ease !important;
  white-space: nowrap !important;
  display: block !important;
}
.naviku > li > a:hover,
.naviku > li.current-menu-item > a,
.naviku > li.current_page_item > a {
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
}
.naviku > li:hover { background: transparent !important; }

/* Dropdown */
.naviku ul.sub-menu {
  background: var(--primary-dark) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  min-width: 190px !important;
  padding: 6px 0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.naviku li ul.sub-menu { left: -9999px !important; }
.naviku > li.hover > ul { left: 0 !important; }
.naviku li li.hover ul { left: 100% !important; top: 0 !important; }

.naviku li li a {
  color: rgba(255,255,255,.82) !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  transition: all .15s !important;
  display: block !important;
}
.naviku li li a:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  padding-left: 22px !important;
}

/* Desktop: jarak teks ↔ ikon (FontAwesome::after) + dropdown di bawah bar (bukan ketutup hero) */
@media (min-width: 769px) {
  #naviwrap,
  .menu-menu-1-container,
  #menu-menu-1.naviku {
    overflow: visible !important;
  }

  .naviku > li {
    position: relative !important;
  }

  /* Chevron: flex + gap, bukan absolute mepet teks (override tema) */
  .naviku > li > a.parent,
  .naviku li li.menu-item-has-children > a.parent {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 0.45em !important;
    width: auto !important;
  }
  .naviku > li > a.parent {
    padding-right: 13px !important; /* sejajar padding nav lain, ikon diberi gap */
  }
  .naviku li li.menu-item-has-children > a.parent {
    padding-right: 18px !important;
  }
  .naviku > li > a.parent::after,
  .naviku li li.menu-item-has-children > a.parent::after {
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  /* Level-1: buka tegak lurus di bawah item, di atas hero (z) */
  .naviku > li > ul.sub-menu {
    top: 100% !important;
    z-index: 1001 !important;
    margin-top: 0 !important;
  }
  /* Level-2+: tetap samping, sejajar atas item */
  .naviku li li > ul.sub-menu {
    top: 0 !important;
  }
}

/* Nav CTA button */
.nav-cta-btn {
  flex-shrink: 0 !important;
  margin-left: 20px !important;
  padding: 10px 20px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  transition: all .2s ease !important;
  box-shadow: 0 2px 10px rgba(232,160,69,.35) !important;
}
.nav-cta-btn:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  box-shadow: 0 5px 16px rgba(232,160,69,.45) !important;
}
/* Varian navbar: hubung ke WhatsApp (bukan hotline) */
.nav-cta-btn--wa {
  background: #25D366 !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35) !important;
}
.nav-cta-btn--wa:hover {
  background: #1eb854 !important;
  box-shadow: 0 5px 16px rgba(37, 211, 102, 0.45) !important;
  color: #fff !important;
}
.nav-cta-btn .fa { font-size: 12px !important; }

/* ─── 5. HIDE OLD HEADER ────────────────────────────────────────────── */
#headerwrap { display: none !important; }

h1.seo {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─── 6. HERO SECTION ───────────────────────────────────────────────── */
/*
  Penuh satu layar: tinggi = (100vh/100dvh − navbar). Carousel + gradien + #headback
  memakai area yang sama. Gambar: object-fit: cover. main.js mematikan owl autoHeight
  (mix.js) agar JS tidak override tinggi fiks.
 */
#hero-wrapper {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  /* margin-top: #mainwrap > #hero-wrapper (navbar fixed) */
  display: flex !important;
  flex-direction: column !important;
  min-height: max(220px, calc(100vh - var(--nav-height))) !important;
  min-height: max(220px, calc(100dvh - var(--nav-height))) !important;
  height: calc(100vh - var(--nav-height)) !important;
  height: calc(100dvh - var(--nav-height)) !important;
}

#hero-wrapper #slider.owl-carousel {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
}

#hero-wrapper #slider .owl-wrapper-outer,
#hero-wrapper #slider .owl-stage-outer {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#hero-wrapper #slider .owl-wrapper-outer.autoHeight {
  transition: none !important;
  -webkit-transition: none !important;
}
#hero-wrapper #slider .owl-wrapper {
  display: block !important;
  height: 100% !important;
}
#hero-wrapper #slider .owl-item {
  overflow: hidden !important;
  box-sizing: border-box !important;
  height: 100% !important;
  /* float:left dipertahankan (Owl 1 strip horizontal) */
}
#hero-wrapper #slider .owl-item .slider {
  height: 100% !important;
}

#hero-wrapper #slider .slider {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  line-height: 0 !important;
}
#hero-wrapper #slider .slider img {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  /* Jangkar kiri: yang terpotong hanya sisi kanan, bagian kiri gambar yang ditampilkan */
  object-position: left center !important;
  display: block !important;
}

/* Gradien = persis memenuhi area tinggi gambar (satu kotak dengan carousel) */
#hero-wrapper::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  background: linear-gradient(
    160deg,
    rgba(4, 28, 46, .62) 0%,
    rgba(4, 28, 46, .72) 60%,
    rgba(4, 28, 46, .82) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Teks hero di atas gambar+overlay, area = tinggi gambar */
#hero-wrapper #headback {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  /* gambar sudah di bawah navbar (margin #hero); padding hanya lapis vertikal/horizontal teks */
  padding: 24px var(--autopad) 32px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  pointer-events: none !important; /* klik lewat jika nanti tambah CTA: ubah anak) */
}
#hero-wrapper #headback * {
  pointer-events: auto !important;
}

/* Hero headline */
.hero-text {
  text-align: center !important;
  color: #fff !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

.hero-headline {
  font-size: clamp(28px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -1.5px !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
  text-shadow: 0 3px 24px rgba(0,0,0,.35) !important;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 20px) !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

.page-hero-tour {
  position: relative !important;
  isolation: isolate !important;
  margin-top: var(--nav-height) !important;
  min-height: min(520px, 72vh) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 44px var(--autopad) 52px !important;
  box-sizing: border-box !important;
  background-color: var(--primary-dark) !important;
  background-image: linear-gradient(
      160deg,
      rgba(4, 28, 46, .78) 0%,
      rgba(4, 28, 46, .88) 100%
    ),
    url('../wp-content/uploads/2024/03/3.jpg') !important;
  background-size: cover !important;
  background-position: left center !important;
}
.page-hero-tour__inner {
  width: 100% !important;
  max-width: var(--maxwidth) !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.page-hero-tour__title {
  font-size: clamp(26px, 4vw, 42px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.8px !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35) !important;
}
.page-hero-tour__title .fa {
  margin-right: 10px !important;
  color: var(--accent) !important;
  font-weight: 400 !important;
}
.page-hero-tour__count {
  font-weight: 700 !important;
  font-size: 0.72em !important;
  color: rgba(255, 255, 255, .82) !important;
  vertical-align: middle !important;
}
.page-hero-tour__sub {
  font-size: clamp(15px, 2vw, 18px) !important;
  color: rgba(255, 255, 255, .88) !important;
  margin: 0 auto 8px !important;
  max-width: 520px !important;
  line-height: 1.55 !important;
}
.page-hero-tour .tourc {
  margin: 28px auto 0 !important;
}

.page-hero-tour.page-hero--rental {
  background-image: linear-gradient(
      160deg,
      rgba(4, 28, 46, .78) 0%,
      rgba(4, 28, 46, .88) 100%
    ),
    url('../wp-content/uploads/2024/03/2.jpg') !important;
}

.page-hero-tour.page-hero--about {
  background-image: linear-gradient(
      160deg,
      rgba(4, 28, 46, .78) 0%,
      rgba(4, 28, 46, .88) 100%
    ),
    url('../wp-content/uploads/2024/03/1.jpg') !important;
}

.page-hero-tour.page-hero--boat {
  background-image: linear-gradient(
      160deg,
      rgba(4, 28, 46, .78) 0%,
      rgba(4, 28, 46, .88) 100%
    ),
    url('../wp-content/uploads/2024/03/WhatsApp-Image-2024-02-05-at-11.56.40-1.jpeg') !important;
  background-position: center center !important;
}

#conwrap.about-page {
  background: var(--surface) !important;
}
.about-page__photo {
  width: 100% !important;
  max-width: 920px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 36px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.about-page .wrap-post {
  max-width: 720px !important;
  margin: 0 auto !important;
}
.about-page .intro {
  max-width: min(720px, 100%) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}
.about-page .intro h2 {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.about-page .intro h2::before,
.about-page .intro h2::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

#conwrap.boat-page {
  background: var(--surface) !important;
}
.boat-page .wrap-post {
  max-width: 720px !important;
  margin: 0 auto !important;
}
.boat-page .intro {
  max-width: min(720px, 100%) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}
.boat-page .intro h2 {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.boat-page .intro h2::before,
.boat-page .intro h2::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
.boat-page__lead-figure img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.boat-page__lead-figure {
  margin: 0 0 28px !important;
}

/* Match boat-rental.html: WP nested galleries (flex + 3-col default on wide screens) */
.boat-page .wrap-post figure.wp-block-gallery.has-nested-images {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--wp--style--unstable-gallery-gap, 16px) !important;
  margin: 1.75em 0 !important;
  max-width: 100% !important;
}
.boat-page
  .wrap-post
  figure.wp-block-gallery.has-nested-images.is-cropped
  figure.wp-block-image:not(#individual-image) {
  min-height: 200px !important;
}
@media (min-width: 600px) {
  .boat-page
    .wrap-post
    figure.wp-block-gallery.has-nested-images.is-cropped
    figure.wp-block-image:not(#individual-image) {
    min-height: 240px !important;
  }
}
.boat-page .wrap-post figure.wp-block-gallery.has-nested-images figure.wp-block-image {
  overflow: hidden !important;
  border-radius: var(--radius-md) !important;
}
.boat-page-share {
  margin-top: 36px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(0, 0, 0, .08) !important;
}
.boat-page-share .small {
  margin-bottom: 12px !important;
  color: var(--text-light) !important;
}
.boat-page-share a {
  display: inline-block !important;
  margin-right: 14px !important;
  font-size: 22px !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}
.boat-page-share a:hover {
  color: var(--accent) !important;
}

/* Hero search card */
.tourc {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 40px 36px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
  width: 100% !important;
  max-width: 880px !important;
  position: relative !important;
}

.tourt {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.tourt .fa { color: var(--accent) !important; font-size: 16px !important; }
.tourt b { font-weight: 700 !important; color: var(--text-dark) !important; }

/* Hide label divs above selects (replaced by placeholder logic) */
.tourcs { display: none !important; }

.tourc form {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.tourc form select {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  background: var(--bg) !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
  margin: 0 !important;
  height: 48px !important;
}
.tourc form select:focus {
  border-color: var(--primary-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26,122,160,.15) !important;
}
.tourc form .ibtn {
  padding: 13px 24px !important;
  white-space: nowrap !important;
  height: 48px !important;
  align-self: stretch !important;
}

/* ─── 7. SECTION COMMONS ────────────────────────────────────────────── */
#conwrap {
  overflow: visible !important;
  padding: 88px var(--autopad) !important;
  background: var(--bg) !important;
}

.intro {
  text-align: center !important;
  max-width: 620px !important;
  margin: 0 auto 56px !important;
}
.intro h2 {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  color: var(--text-dark) !important;
  margin: 0 0 12px !important;
  letter-spacing: -.6px !important;
}
.intro p {
  font-size: 17px !important;
  color: var(--text-mid) !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

h2.headline {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--text-dark) !important;
  margin: 0 0 28px !important;
  text-align: center !important;
  letter-spacing: -.5px !important;
}

/* ─── 8. ABOUT SECTION ──────────────────────────────────────────────── */
#conwrap.about-section {
  background: var(--surface) !important;
}

.wrap-post {
  max-width: 800px !important;
  margin: 0 auto !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: var(--text-mid) !important;
}
.wrap-post h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  margin: 32px 0 10px !important;
  padding-left: 16px !important;
  border-left: 3px solid var(--accent) !important;
}
.wrap-post h3 strong { font-weight: 700 !important; }
.wrap-post p { color: var(--text-mid) !important; }

/* Feature cards below about text */
.about-features {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 52px auto 0 !important;
}
.feature-card {
  background: var(--bg) !important;
  border-radius: var(--radius-md) !important;
  padding: 36px 28px !important;
  text-align: center !important;
  border: 1.5px solid var(--border) !important;
  transition: all .28s ease !important;
}
.feature-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(11,79,108,.18) !important;
  background: var(--surface) !important;
}
.feature-icon {
  margin: 0 auto 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  line-height: 0 !important;
  color: var(--primary) !important;
  background: linear-gradient(145deg, rgba(11, 79, 108, 0.08) 0%, rgba(11, 79, 108, 0.02) 100%) !important;
  border: 1px solid rgba(11, 79, 108, 0.12) !important;
  flex-shrink: 0 !important;
}
.feature-icon svg {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
}
.feature-icon svg [fill="currentColor"] {
  fill: currentColor !important;
}
.feature-card:hover .feature-icon {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(11, 79, 108, 0.22) !important;
}
.feature-card h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin: 0 0 10px !important;
}
.feature-card p {
  font-size: 14px !important;
  color: var(--text-mid) !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

/* ─── 9. TOUR PACKAGE CARDS ─────────────────────────────────────────── */

/* Static grid layout */
.gridpad {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 0 !important;
}

/* All .grid cards — shared style for tours and rentals */
.grid {
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--border) !important;
  transition: all .28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  position: relative !important;
}
.grid:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: transparent !important;
}

/* Card image */
.vthumb {
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
}
.vthumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .45s ease !important;
  display: block !important;
}
.grid:hover .vthumb img {
  transform: scale(1.08) !important;
  filter: none !important;
}

/* Overlay button on hover */
.vlink {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(8, 58, 80, .52) !important;
  opacity: 0 !important;
  transition: opacity .28s ease !important;
  bottom: 0 !important;
  top: 0 !important;
}
.grid:hover .vlink,
.grid:hover .areatitle::before { opacity: 1 !important; }

/* Card content area */
.areatitle {
  padding: 20px 20px 20px !important;
  background: var(--surface) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}
.areatitle h3 {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin: 0 0 12px !important;
  line-height: 1.45 !important;
}
.areatitle h3 a { color: var(--text-dark) !important; }
.areatitle h3 a:hover { color: var(--primary) !important; }

/* Location + duration pills */
.destirasi {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}
.destirasi li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: var(--text-light) !important;
  background: var(--surface-alt) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  list-style: none !important;
}
.destirasi li .fa { color: var(--primary-light) !important; font-size: 11px !important; }

.areatitle p {
  margin: auto 0 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border) !important;
}
.harga {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--accent-dark) !important;
}
.areatitle p .small { font-size: 12px !important; color: var(--text-light) !important; }
.areatitle p strong { color: var(--text-mid) !important; font-size: 14px !important; }

/* Badge — custom label (bukan PNG) di atas thumbnail */
.badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  line-height: 1 !important;
}
.badge__inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 28px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}
/* Best seller (badge1) — merah */
.badge--bestseller .badge__inner {
  color: #fff !important;
  background: linear-gradient(145deg, #E53935 0%, #B71C1C 100%) !important;
  box-shadow: 0 3px 12px rgba(180, 30, 30, .4), 0 0 0 1px rgba(255, 255, 255, .15) inset !important;
}
/* Hot sale (badge2) — hijau */
.badge--hotsale .badge__inner {
  color: #fff !important;
  background: linear-gradient(145deg, #43A047 0%, #1B5E20 100%) !important;
  box-shadow: 0 3px 12px rgba(20, 100, 40, .38), 0 0 0 1px rgba(255, 255, 255, .12) inset !important;
}
.badge__text {
  position: relative !important;
  top: 0.5px !important;
  display: block !important;
  line-height: 1.2 !important;
}
.badbot { display: none !important; }

/* View all / View more link */
div[style*="text-align:right"] {
  text-align: right !important;
  margin: 36px 0 0 !important;
}
div[style*="text-align:right"] a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: var(--primary) !important;
  padding: 11px 22px !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  transition: all .22s ease !important;
}
div[style*="text-align:right"] a:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ─── 10. FEATURED TOUR CAROUSEL SECTION ───────────────────────────── */
#conwrap.featour {
  background: var(--primary-dark) !important;
  position: relative !important;
  overflow: hidden !important;
}
#conwrap.featour::before {
  content: '' !important;
  position: absolute !important;
  top: -100px !important; right: -80px !important;
  width: 500px !important; height: 500px !important;
  background: radial-gradient(circle, rgba(26,122,160,.3) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#conwrap.featour .intro,
#featour { position: relative !important; z-index: 1 !important; }
#conwrap.featour .intro h2 { color: #fff !important; }
#conwrap.featour .intro p { color: rgba(255,255,255,.7) !important; }

/* Carousel nav arrows */
#featour .owl-nav button,
#newslider .owl-nav button {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  box-shadow: var(--shadow-md) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s ease !important;
  border: none !important;
}
#featour .owl-nav button:hover,
#newslider .owl-nav button:hover {
  background: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
}

/* Carousel dots */
.owl-dots {
  margin-top: 24px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
.owl-dots .owl-dot span {
  background: rgba(255,255,255,.35) !important;
  width: 8px !important; height: 8px !important;
  border-radius: 4px !important;
  transition: all .25s ease !important;
  display: block !important;
}
.owl-dots .owl-dot.active span {
  background: var(--accent) !important;
  width: 26px !important;
}

/* ─── 11. CAR RENTAL SECTION ────────────────────────────────────────── */
#conwrap.rentwrap {
  background: var(--surface) !important;
}
#conwrap.rentwrap .intro p {
  color: var(--text-mid) !important;
  font-size: 16px !important;
}

/* Rental card info area */
.rentinfo { padding: 2px 0 !important; }
.rentinfo > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
.rentinfo > ul li {
  font-size: 14px !important;
  color: var(--text-mid) !important;
  font-weight: 500 !important;
  list-style: none !important;
}
.rentinfo .t1 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-light) !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.rentinfo ul.medium {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.rentinfo ul.medium li {
  background: rgba(11,79,108,.08) !important;
  color: var(--primary) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(11,79,108,.15) !important;
  list-style: none !important;
}

/* ─── 12. CONTACT SECTION (new, always visible, before footer) ─────── */
#contact-section {
  background: var(--primary) !important;
  padding: 88px var(--autopad) !important;
  position: relative !important;
  overflow: hidden !important;
}
#contact-section::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important; right: -80px !important;
  width: 400px !important; height: 400px !important;
  background: radial-gradient(circle, rgba(232,160,69,.2) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
#contact-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important; left: -60px !important;
  width: 350px !important; height: 350px !important;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%) !important;
  pointer-events: none !important;
}
.contact-section-head {
  text-align: center !important;
  margin-bottom: 52px !important;
  position: relative !important;
  z-index: 1 !important;
}
.contact-section-head h2 {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}
.contact-section-head p {
  color: rgba(255,255,255,.7) !important;
  font-size: 17px !important;
  margin: 0 !important;
}
.contact-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.contact-card {
  display: block !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--radius-md) !important;
  padding: 36px 24px !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all .28s ease !important;
  color: #fff !important;
  cursor: pointer !important;
}
.contact-card:hover {
  background: rgba(255,255,255,.18) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
  border-color: rgba(255,255,255,.3) !important;
}
.contact-card .cc-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  line-height: 0 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.contact-card .cc-icon svg {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}
/* Logo resmi tampilan: hijau khas WhatsApp */
.contact-card .cc-icon--whatsapp {
  color: #25d366 !important;
}
.contact-card:hover .cc-icon--whatsapp {
  color: #34f07a !important;
}
.contact-card:hover .cc-icon:not(.cc-icon--whatsapp) { color: #fff !important; }
.contact-card h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin: 0 0 10px !important;
}
.contact-card .kontek {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  word-break: break-all !important;
  display: block !important;
}
.contact-card:hover .kontek { color: var(--accent) !important; }

/* ─── 13. FOOTER ────────────────────────────────────────────────────── */
#footerwrap {
  background: var(--primary-dark) !important;
  padding: 72px var(--autopad) 0 !important;
  color: rgba(255,255,255,.7) !important;
  display: grid !important;
  /* brand | office | working hours | payment (tanpa navigation) */
  grid-template-columns: 2.1fr 1.4fr 1.25fr 1.25fr !important;
  gap: 48px !important;
  position: relative !important;
  /* Baris logo + link + office + hours sejajar ke atas (bukan vertikal tengah) */
  align-items: start !important;
}
#footerwrap::before { display: none !important; }

/* Brand column */
.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.footer-brand > a {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  background: #fff !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 14px !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
  line-height: 0 !important;
}
.footer-brand img {
  height: 88px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.footer-brand p {
  font-size: 14px !important;
  color: rgba(255,255,255,.58) !important;
  line-height: 1.72 !important;
  margin: 0 !important;
  max-width: 250px !important;
}
.footer-brand,
.footer-nav-col,
.footer-col {
  min-width: 0 !important;
  align-self: start !important;
}

/* Nav columns in footer */
.footer-nav-col h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin: 0 0 22px !important;
}
.footer-nav-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}
.footer-nav-col ul li a {
  color: rgba(255,255,255,.62) !important;
  font-size: 14px !important;
  transition: color .2s, padding-left .15s !important;
  display: inline-block !important;
}
.footer-nav-col ul li a:hover {
  color: var(--accent) !important;
  padding-left: 4px !important;
}

/* Footbar: tanpa padding vertikal ekstra (override tema) — judul sejajar kolom nav */
.footbar { padding: 0 !important; }
.footbar h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin: 0 0 22px !important;
}
.footbar h4 .fa {
  color: var(--accent) !important;
  margin-right: 6px !important;
  font-size: 0.9em !important;
  vertical-align: -0.05em !important;
}
.footer-col--payment .footer-payment-wrap { margin: 0 !important; }
.footer-payment-wrap { margin: 16px 0 0 !important; }
.footer-payment-wrap .footer-payment-img {
  margin-top: 0 !important;
  /* Logo pembayaran berwarna: jangan pakai filter hitam-putih global di bawah */
  filter: none !important;
  opacity: 1 !important;
  max-width: min(300px, 100%) !important;
  width: 100% !important;
  display: block !important;
  height: auto !important;
}
.footbar .textwidget p {
  font-size: 14px !important;
  color: rgba(255,255,255,.62) !important;
  margin: 0 0 9px !important;
  line-height: 1.65 !important;
}
.footbar .textwidget a {
  color: rgba(255,255,255,.62) !important;
  font-size: 14px !important;
}
.footbar .textwidget a:hover { color: var(--accent) !important; }
.footbar .textwidget img:not(.footer-payment-img) {
  max-width: 100% !important;
  height: auto !important;
  margin-top: 8px !important;
  filter: brightness(0) invert(.8) !important;
  opacity: 0.85 !important;
}

#footerwrap a { color: rgba(255,255,255,.62) !important; }
#footerwrap a:hover { color: var(--accent) !important; }

/* Copyright bar */
.copyright {
  grid-column: 1 / -1 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  padding: 24px 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 0 !important;
}
.copyright h5 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.42) !important;
  margin: 0 !important;
}
.copyright a h5 { color: rgba(255,255,255,.42) !important; }
.copyright a:hover h5 { color: var(--accent) !important; }

/* ─── 14. #KONTAK POPUP (unchanged behavior, modernized look) ─────── */
#kontak {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  padding: 44px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.22) !important;
  max-width: 500px !important;
  width: calc(100% - 40px) !important;
  z-index: 2000 !important;
  /* display: none controlled by tema_style.css + JS */
}
#kontak h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--text-dark) !important;
  margin: 0 0 6px !important;
}
#kontak > p {
  color: var(--text-mid) !important;
  font-size: 15px !important;
  margin: 0 0 30px !important;
}
#kontak ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#kontak ul li {
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
}
#kontak ul li:last-child { border-bottom: none !important; }
#kontak ul li::before {
  font-size: 26px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
#kontak ul li.ktelp::before { content: '📞'; }
#kontak ul li.kwa::before   { content: '💬'; }
#kontak ul li.kemail::before { content: '✉️'; }
#kontak ul li h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-light) !important;
  margin: 0 0 4px !important;
}
#kontak ul li .kontek {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}
#kontak ul li a { color: var(--text-dark) !important; }
#kontak ul li a:hover { color: var(--primary) !important; }

/* ─── 15. FLOATING CTA — hanya WhatsApp (satu ikon) ─────────────────── */
.sidecontact {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 601 !important;
  left: auto !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: block !important;
}
.sidecontact__wa {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.sidecontact__wa:hover {
  transform: translateY(-2px) scale(1.04) !important;
}
.sidecontact__waInner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #2fe077 0%, #128c4c 100%) !important;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 22px rgba(18, 140, 76, 0.45) !important;
}
.sidecontact__waIcon {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  color: #fff !important;
}
.sidecontact__waIcon path {
  fill: currentColor !important;
}
.sidecontact__wa:hover .sidecontact__waInner {
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 28px rgba(18, 140, 76, 0.5) !important;
}
/* Mark-up lama tema (onlinex / .live) */
.onlinex, .onlinex.blink, .sidecontact .live { display: none !important; }

/* Scroll up button */
.scrollup { display: none !important; }

/* ─── 16. RESPONSIVE — TABLET (≤1024px) ────────────────────────────── */
@media (max-width: 1024px) {
  :root { --autopad: 32px; }

  .naviku > li > a {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
  .nav-cta-btn {
    padding: 9px 16px !important;
    font-size: 12px !important;
    margin-left: 12px !important;
  }

  .tourc form {
    grid-template-columns: 1fr 1fr !important;
  }
  .tourc form .ibtn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .about-features { grid-template-columns: repeat(3, 1fr) !important; }
  .gridpad { grid-template-columns: repeat(2, 1fr) !important; }

  #footerwrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
    align-items: start !important;
  }
  .contact-cards { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ─── 17. RESPONSIVE — MOBILE (≤768px) ─────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --autopad: 20px;
    /* logo 36px + bar padding */
    --nav-height: 68px;
    /* Tinggi bilah bawah (ikon + label + padding + safe area home indicator) */
    --mbnav-h: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* Mobile navbar: [ logo kiri | hamburger kanan ] di satu baris; link menu penuh lebar bawah */
  #naviwrap {
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: var(--nav-height) !important;
    /* Jarak putih ↔ warna nav (bukan padding tebal di dalam putih) */
    padding: 10px 20px !important;
  }
  .nav-logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    max-width: calc(100% - 120px) !important;
    width: auto !important;
    margin: 0 !important;
    margin-right: auto !important;
    padding: 3px 6px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    display: flex !important;
  }
  .nav-logo img {
    height: 36px !important;
    max-width: 100% !important;
  }
  .toggleMenu {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .nav-cta-btn { display: none !important; }

  #naviwrap > div[style*="clear"] {
    order: 2 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    flex: 0 0 0 !important;
  }

  .menu-menu-1-container {
    width: 100% !important;
    max-width: 100% !important;
    order: 4 !important;
    flex: 0 0 100% !important;
    /* DO NOT set max-height or display here — handled in section 20 */
  }

  /* When JS shows menu, style the list */
  #menu-menu-1.naviku {
    flex-direction: column !important;
    width: 100% !important;
    padding: 8px 0 16px !important;
    gap: 2px !important;
    align-items: flex-start !important;
  }
  .naviku > li { width: 100% !important; }
  .naviku > li > a {
    padding: 10px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  .naviku > li > a.parent,
  .naviku li li.menu-item-has-children > a.parent {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    max-width: 100% !important;
  }
  .naviku > li > a.parent::after,
  .naviku li li.menu-item-has-children > a.parent::after {
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  /*
   * Accordion submenu (mix.js: klik .parent → toggle .hover pada parent li).
   * JANGAN pakai position:static + left:0 untuk SEMUA ul — itu membuat seluruh
   * pohon submenu terbuka. Default: sembunyikan; buka hanya jika li.hover.
   */
  .naviku li.menu-item-has-children:not(.hover) > ul.sub-menu {
    display: none !important;
  }
  .naviku li.menu-item-has-children.hover > ul.sub-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.28) !important;
  }
  .naviku li ul.sub-menu {
    left: auto !important;
  }

  /* Hero: teks di atas area gambar (nav sudah di-offset lewat margin) */
  #hero-wrapper #headback {
    padding: 20px 20px 20px !important;
  }
  .hero-headline { letter-spacing: -.5px !important; }
  .tourc {
    padding: 24px 20px 28px !important;
    border-radius: var(--radius-md) !important;
  }
  .tourc form { grid-template-columns: 1fr !important; gap: 10px !important; }
  .tourc form .ibtn { width: 100% !important; justify-content: center !important; }

  /* Sections */
  #conwrap { padding: 64px 20px !important; }
  .about-features { grid-template-columns: 1fr !important; gap: 16px !important; }
  .gridpad { grid-template-columns: 1fr !important; }
  .contact-cards { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Footer */
  #footerwrap {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 56px 20px 0 !important;
    align-items: start !important;
  }

  /* Ruang untuk bottom nav + safe area iOS */
  #mainwrap {
    padding-bottom: var(--mbnav-h) !important;
  }
  .sidecontact {
    bottom: calc(16px + var(--mbnav-h)) !important;
    right: 16px !important;
  }
}

/* ─── MOBILE BOTTOM NAV (≤768px) ─────────────────────────────────────── */
.mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 950 !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 2px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    background: rgba(8, 58, 80, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18) !important;
  }

  .mobile-bottom-nav__link {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: var(--radius-sm) !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-bottom-nav__link i.fa {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.92 !important;
  }

  .mobile-bottom-nav__link span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-bottom-nav__link:hover,
  .mobile-bottom-nav__link:focus-visible {
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
  }

  .mobile-bottom-nav__link--active,
  .mobile-bottom-nav__link[aria-current="page"] {
    color: var(--accent) !important;
  }

  .mobile-bottom-nav__link--active i.fa,
  .mobile-bottom-nav__link[aria-current="page"] i.fa {
    color: var(--accent) !important;
    opacity: 1 !important;
  }
}

/* ─── 18. SMALL MOBILE (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-text { margin-bottom: 0 !important; }
  .intro { margin-bottom: 40px !important; }
  .contact-section-head { margin-bottom: 36px !important; }
}

/* ─── 19. MISC CLEANUP ──────────────────────────────────────────────── */
/* Ensure sections below hero sit in normal flow */
/* margin-top: nav-height (di #hero-wrapper) jangan di-nol-kan */
#mainwrap > #hero-wrapper { margin-top: var(--nav-height) !important; }
#mainwrap > #conwrap:first-of-type { margin-top: 0 !important; }

/* Remove original newsticker if present */
#newstickerwrap { display: none !important; }

/* Section padding for nav fixed offset only on first section after hero */
#conwrap.about-section { scroll-margin-top: var(--nav-height) !important; }

/* Our Tour Packages (#featour): tinggi kartu seragam + judul 1 baris */
#featour .owl-stage {
  display: flex !important;
}
#featour .owl-item {
  display: flex !important;
  align-items: stretch !important;
  height: auto !important;
}
#featour .owl-item > div {
  flex: 1 1 auto !important;
  display: flex !important;
  width: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
}
#featour .owl-item .grid {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 4px !important;
}
#featour .areatitle h3 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  min-height: 1.45em !important;
}
#featour .areatitle h3 a {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

#newslider .owl-item .grid { margin: 4px !important; }

/* Medium link override (View All inside section) */
.medium { font-size: 14px !important; }
.medium a > .fa { margin-right: .4em !important; }

/* ─── 20. MOBILE MENU — CRITICAL FIX ───────────────────────────────── */
/*
  mix.js: $(".toggleMenu").click → $(".naviku").slideToggle() dan toggle class .active
  adjustMenu (ww<768): .toggleMenu.active ? .naviku.show() : .naviku.hide()
  Target: ul#menu-menu-1.naviku — BUKAN .menu-menu-1-container.
  display:flex !important pada #menu-menu-1.naviku membuat jQuery .hide() gagal
  (inline display:none kalah spesifisitas). Solusi: flex hanya di desktop.
*/
@media (min-width: 769px) {
  .menu-menu-1-container {
    display: flex !important;
  }
  #menu-menu-1.naviku {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
}

/* Mobile: biarkan lebar penuh; show/hide di ul.naviku (bukan container) */
@media (max-width: 768px) {
  .menu-menu-1-container {
    max-height: none !important;
    overflow: visible !important;
  }
  /* Jamin penutupan: match inline dari jQuery .hide() / slideToggle selesai */
  #menu-menu-1.naviku[style*="display: none"] {
    display: none !important;
  }
}

/* Hide the clearfix div inside naviwrap (no effect on layout, just cleanup) */
#naviwrap > div[style*="clear"] {
  width: 0 !important;
  height: 0 !important;
  flex: none !important;
  overflow: hidden !important;
}

/* Override inline background-image on #conwrap elements */
#conwrap.featour { background: var(--primary-dark) !important; }
#conwrap.about-section { background: var(--surface) !important; }