/* ==========================================================================
   Bali Kanaka Tour & Trans - style.css (clean & responsive)
   - Tetap kompatibel dengan HTML lama
   - Typography rapi, section rata, card equal-height
   - Navbar modern (kompatibel dengan .site-mobile-menu)
   - Listing: versi hitam lama tetap, + opsi white card (listing-flat)
   ========================================================================== */

/* ===== CSS Variables ===== */
:root{
  --primary:#0779e4;
  --primary-600:#0b6dd0;
  --dark:#0f172a;
  --text:#364d59;
  --muted:#6c757d;
  --bg:#ffffff;
  --bg-soft:#f6f5f5;
  --shadow-1:0 8px 18px rgba(0,0,0,.06);
  --shadow-2:0 10px 28px rgba(0,0,0,.10);
  --radius:12px;
  --section-y:70px;
}

@media (max-width: 991.98px){
  :root{ --section-y:30px; }
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html{ overflow-x:hidden; }
body{
  line-height:1.7;
  color:var(--text) !important;
  font-weight:300;
  font-size:1rem;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{ background:#000; color:#fff; }
a{ transition:.3s all ease; text-decoration:none; }
a:hover{ text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* Typography */
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{
  font-weight:300; color:var(--text);
}
.text-black{ color:#000 !important; }
.color-black-opacity-5{ color:rgba(0,0,0,.5); }
.color-white-opacity-5{ color:rgba(255,255,255,.5); }

/* Utilities */
.line-height-1{ line-height:1 !important; }
.border-2{ border-width:2px; }
.border-w-1{ border-width:1px; } .border-w-2{ border-width:2px; }
.border-w-3{ border-width:3px; } .border-w-4{ border-width:4px; }
.border-w-5{ border-width:5px; }
.letter-spacing-1{ letter-spacing:.1em; }
.letter-spacing-2{ letter-spacing:.2em; }

/* Font-size helpers (legacy keep) */
.font-size-10{font-size:10px} .font-size-11{font-size:11px}
.font-size-12{font-size:12px} .font-size-13{font-size:13px}
.font-size-14{font-size:14px} .font-size-15{font-size:15px}
.font-size-16{font-size:16px} .font-size-17{font-size:17px}
.font-size-18{font-size:18px} .font-size-19{font-size:19px}
.font-size-20{font-size:20px} .font-size-21{font-size:21px}
.font-size-22{font-size:22px} .font-size-23{font-size:23px}
.font-size-24{font-size:24px} .font-size-25{font-size:25px}
.font-size-26{font-size:26px} .font-size-27{font-size:27px}
.font-size-28{font-size:28px} .font-size-29{font-size:29px}
.font-size-30{font-size:30px}

/* Gray helpers (legacy keep minimal) */
.font-gray-7{ color:#939393; }
.font-gray-8{ color:#7b7b7b; }
.font-gray-9{ color:#4d4d4d; }
.font-gray-10{ color:#353535; }

/* Buttons */
.btn.btn-primary{ padding:12px 25px; background:var(--primary); border-color:var(--primary); }
.btn.btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); }
.btn.btn-outline-white{ border-color:#fff; background:transparent; color:#fff; }
.btn.btn-outline-white:hover{ background:#fff; border-color:#fff; color:#000; }
.btn.btn-white{ background:#fff; color:var(--primary); }

/* Forms */
.form-control{
  height:55px; background-color:#fff !important;
  border:1px solid #e6e6e6; border-radius:6px;
  box-shadow:none !important; font-family:inherit;
}
.form-control:focus{ border-color:var(--primary); }

.select-wrap,.wrap-icon{ position:relative; }
.select-wrap .icon,.wrap-icon .icon{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:22px;
}
.select-wrap select,.wrap-icon select{ appearance:none; width:100%; }

/* Sections */
.site-section{ padding:var(--section-y) 0; }
.site-section.site-section-sm{ padding:4em 0; }
.bg-light{ background-color:var(--bg-soft) !important; }

/* Heading alignment helpers */
.section-heading{ text-align:center; font-weight:700; margin-bottom:.25rem; }
.section-heading strong{ font-weight:700; }
.section-sub{ text-align:center; opacity:.85; max-width:720px; margin:0 auto 1.25rem; }

/* Equal height grid utility */
.eqh, .eqh > [class*="col-"]{ display:flex; }
.eqh > [class*="col-"] > *{ display:flex; flex-direction:column; width:100%; }

/* ======================================================================
   NAVBAR
   ====================================================================== */
.top-bar{ border-bottom:1px solid #e9ecef !important; }

.site-navbar{
  position:absolute; top:0; width:100%; z-index:1000; padding:1rem;
  background:transparent; transition:.3s all ease;
}
@media (max-width:991.98px){
  .site-navbar{ padding:3rem 0; }
}
.site-navbar .toggle-button{ position:absolute; right:0; }
.site-navbar .site-logo{ margin:0; padding:0; font-size:1.7rem; }
.site-navbar .site-logo strong{ font-weight:900; }
.site-navbar .site-logo a{ color:#fff; }
@media (max-width:991.98px){
  .site-navbar .site-logo{ float:left; position:relative; }
}

/* Desktop navigation */
.site-navbar .site-navigation .site-menu{ margin:0; padding:0; }
.site-navbar .site-navigation .site-menu > li{ display:inline-block; }
.site-navbar .site-navigation .site-menu > li > a{
  margin:0 15px; padding:20px 0; color:#fff; display:inline-block;
  font-size:20px; font-weight:bold; font-family:'Roboto',sans-serif;
  transition:color .25s ease, transform .25s ease;
}
.site-navbar .site-navigation .site-menu > li > a:hover{
  color:gold; transform:translateY(-1px);
}
.site-navbar .site-navigation .site-menu > li.active > a{
  color:gold;
}
.site-navbar .site-navigation .site-menu .active{ color:var(--primary) !important; }

/* Dropdown */
.site-navbar .site-navigation .site-menu .has-children{ position:relative; }
.site-navbar .site-navigation .site-menu .has-children > a{
  position:relative; padding-right:20px;
}
.site-navbar .site-navigation .site-menu .has-children > a:before{
  content:"\e313"; font-family:'icomoon'; position:absolute; right:0; top:50%;
  transform:translateY(-50%); font-size:16px;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown{
  visibility:hidden; opacity:0; position:absolute; top:100%;
  text-align:left; border-top:2px solid var(--primary);
  box-shadow:0 2px 10px -2px rgba(0,0,0,.1);
  padding:0; margin-top:20px; background:#fff; transition:.2s;
}
.site-navbar .site-navigation .site-menu .has-children:hover > .dropdown{
  visibility:visible; opacity:1; margin-top:0;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown > li{
  list-style:none; min-width:200px;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown a{
  display:block; padding:9px 20px; color:#000 !important;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown a.active{
  color:var(--primary) !important; background:#f8f9fa;
}

/* Sticky behavior (optional, via class from JS) */
.site-navbar.sticky, .site-navbar.has-shadow{
  position:sticky; top:0; background:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.site-navbar.sticky .site-navigation .site-menu > li > a{ color:#000; }
.site-navbar.sticky .site-logo a{ color:var(--primary); }

/* Mobile menu (compatible with existing offcanvas) */
.site-mobile-menu{
  width:300px; position:fixed; right:0; top:0; height:100vh; z-index:2000;
  padding-top:20px; background:#fff; transform:translateX(110%);
  box-shadow:-10px 0 20px -10px rgba(0,0,0,.1); transition:.3s ease-in-out;
}
.offcanvas-menu .site-mobile-menu{ transform:translateX(0%); }
.site-mobile-menu .site-mobile-menu-header{ padding:0 20px; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close{
  float:right; margin-top:8px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span{
  font-size:30px; cursor:pointer; transition:.3s;
}
.site-mobile-menu .site-mobile-menu-close span:hover{ color:#ced4da; }
.site-mobile-menu .site-mobile-menu-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  height:calc(100vh - 52px); padding:0 20px 150px;
}
.site-mobile-menu .site-nav-wrap{ list-style:none; padding:0; margin:0; }
.site-mobile-menu .site-nav-wrap a{ padding:10px 20px; display:block; color:#212529; }
.site-mobile-menu .site-nav-wrap a:hover{ color:var(--primary); }
.site-mobile-menu .site-nav-wrap li .nav-link.active{ color:var(--primary); }
.site-mobile-menu .site-nav-wrap li.active > a{ color:var(--primary); }

/* ======================================================================
   HERO
   ====================================================================== */
.hero{
  position:relative; background-size:cover; background-position:center;
}
.hero, .hero > .container > .row{ height:100vh; min-height:570px; }
.hero .intro{ position:relative; z-index:4; text-align:center; }
.hero .intro h1{ color:#000; font-size:50px; }
.hero .intro strong{ font-weight:900; }
.hero.inner-page, .hero.inner-page > .container > .row{
  height:40vh !important; min-height:200px;
}


.youtube-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* supaya elemen di atasnya bisa diklik */
}

/* Bikin iframe nge-cover layar (16:9) */
.youtube-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 177.78vh = 100 * (16/9) untuk jaga cover di layar vertikal */
  width: 177.78vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

/* ======================================================================
   TRIP FORM (hero form)
   ====================================================================== */
.trip-form{
  position:relative; z-index:3; background:#fff; padding:40px; border-radius:7px;
  box-shadow:var(--shadow-2); max-width:980px; margin-left:auto; margin-right:auto;
}
.trip-form .form-control{ border-color:rgba(0,0,0,.2); padding-left:20px; padding-right:20px; }
.trip-form .form-control:focus{ border-color:#000; }
.trip-form .form-control-wrap{ position:relative; }
.trip-form .icon{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:20px; color:#ccc;
}

/* ======================================================================
   FEATURE BOXES & STEPS
   ====================================================================== */
.feature-box{
  background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow-1);
}
.step{ position:relative; }
.step .number{ font-weight:900; }
.step > span{
  font-size:100px; color:var(--primary); font-weight:900; position:absolute; top:0; left:-30px;
}
.step .step-inner{
  position:relative; padding:40px; background:#fff; box-shadow:var(--shadow-1); font-size:14px; border-radius:var(--radius);
}
.step .step-inner h3{ font-size:20px; color:#000; font-weight:700; }
.step .step-inner p{ color:#999; }
.step .step-inner *:last-child{ margin-bottom:0; }

/* ======================================================================
   LISTINGS (cards)
   - .listing = versi hitam (warisan)
   - .listing-flat = versi white card opsional (lebih modern)
   ====================================================================== */
.listing{
  padding:20px; margin-bottom:30px; background:#000; border-radius:7px; color:#fff;
}
.listing .listing-img{
  width:100%; margin: -40px 0 30px 0;
}
.listing .listing-img img{
  border-radius:7px; box-shadow:0 15px 30px 0 rgba(0,0,0,.1);
}
.listing .listing-contents h3{ font-size:18px; font-weight:900; }
.listing .listing-contents .rent-price strong{ color:#fff; font-size:18px; }
.listing .listing-contents .listing-feature .number{ color:#888; }
.listing .caption{ color:#fff; margin-right:10px; }
.listing p{ color:#fff; font-size:14px; }

/* Modern white-card option (opt-in) */
.listing-flat{
  border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-1);
}
.listing-flat .listing-img{ position:relative; padding-top:62%; background:#f8f9fa; margin:0; }
.listing-flat .listing-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none;
}
.listing-flat .listing-contents{ padding:1rem 1rem 1.25rem; display:flex; flex-direction:column; color:var(--text); }
.listing-flat .listing-contents .btn{ margin-top:auto; }
.rent-price{ font-weight:800; }

/* Specs small helper */
.spec{ font-size:.95rem; color:#6c757d; }
.spec .dot{ width:4px; height:4px; border-radius:50%; background:#cbd5e1; display:inline-block; margin:0 .5rem; }

/* ======================================================================
   TESTIMONIAL
   ====================================================================== */
.testimonial-2{
  border-radius:7px; background:#fff; padding:30px; border-bottom:4px solid var(--primary);
  box-shadow:0 15px 30px 0 rgba(0,0,0,.1); display:flex; flex-direction:column; height:100%;
}
.testimonial-2 blockquote{ font-size:18px; font-style:italic; color:#334155; margin-bottom:1rem; }
.testimonial-2 .v-card{ margin-top:auto; display:flex; align-items:center; }
.testimonial-2 .v-card img{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%; object-fit:cover;
}
.testimonial-2 .author-name{ line-height:1.3; }
.testimonial-2 .author-name > span:nth-of-type(2){ color:#ccc; }

/* ======================================================================
   BLOG & MISC (legacy kept & polished)
   ====================================================================== */
.post-entry{
  background:#fff; padding:30px; border:1px solid #e6e6e6; border-radius:4px; transition:.3s;
}
.post-entry:hover{ box-shadow:0 5px 15px -5px rgba(0,0,0,.1); }
.post-entry h2{ font-size:20px; }
.post-entry *:last-child{ margin-bottom:0; }

.sidebar-box{
  margin-bottom:30px; padding:25px; font-size:15px; width:100%; background:#fff;
}
.sidebar-box h3{ font-size:18px; margin-bottom:15px; }

.categories li,.sidelink li{
  position:relative; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #dee2e6; list-style:none;
}
.categories li:last-child,.sidelink li:last-child{ margin-bottom:0; border-bottom:none; padding-bottom:0; }
.categories li a,.sidelink li a{ display:block; }
.categories li a span,.sidelink li a span{
  position:absolute; right:0; top:0; color:#ccc;
}

/* ======================================================================
   SLIDERS (owl minimal keep)
   ====================================================================== */
.slide{ height:100vh; min-height:900px; background-size:cover; }
.slide-one-item .owl-nav .owl-prev,
.slide-one-item .owl-nav .owl-next{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2rem; color:rgba(255,255,255,.4);
}
.slide-one-item .owl-nav .owl-prev:hover,
.slide-one-item .owl-nav .owl-next:hover{ color:#fff; }
.slide-one-item .owl-nav .owl-prev{ left:20px; }
.slide-one-item .owl-nav .owl-next{ right:20px; }
.slide-one-item .owl-dots{
  position:absolute; bottom:20px; width:100%; text-align:center; z-index:2;
}
.slide-one-item .owl-dots .owl-dot > span{
  width:7px; height:7px; border-radius:4px; background:rgba(255,255,255,.4); margin:3px; display:inline-block; transition:.3s;
}
.slide-one-item .owl-dots .owl-dot.active > span{ width:20px; background:#fff; }

/* Owl all (desktop optim) */
@media (min-width:992px){
  .owl-all .owl-nav,.owl-all .owl-dots{ display:none; }
  .owl-all .owl-stage{ transform:none !important; width:120% !important; padding-top:10px; }
  .owl-all .owl-carousel .owl-stage-outer{ width:100%; overflow:visible; }
}

/* ======================================================================
   FOOTER
   ====================================================================== */
.site-footer{ padding:4em 0; }
@media (min-width:768px){ .site-footer{ padding:8em 0; } }
.site-footer .border-top{ border-top:1px solid rgba(255,255,255,.1) !important; }
.site-footer a{ color:rgba(0,0,0,.5); }
.site-footer a:hover{ color:#000; }
.site-footer ul li{ margin-bottom:1px; }
.site-footer .footer-heading{ font-size:16px; color:#000; }

/* ======================================================================
   SPECIAL ELEMENTS (legacy keep)
   ====================================================================== */
.bg-image{
  background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed;
}
.bg-image.overlay::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.7); z-index:0; width:100%;
}
.bg-image > .container{ position:relative; z-index:1; }

.play-single-big{
  width:90px; height:90px; display:inline-block; border:2px solid #fff; color:#fff !important; border-radius:50%;
  position:relative; transition:.3s;
}
.play-single-big > span{
  font-size:50px; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%);
}
.play-single-big:hover{ width:120px; height:120px; }

.custom-pagination a,.custom-pagination span{
  display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%;
}
.custom-pagination span{ background:#efefef; }
.custom-pagination a{ background:var(--primary); color:#fff; }

/* ======================================================================
   COLOR HELPERS (legacy)
   ====================================================================== */
.bg-black{ background:#000 !important; }
.text-black{ color:#000 !important; }
.opa-7{ color:rgba(255,255,255,.7) !important; }
.more{ text-transform:uppercase; font-size:.75rem; letter-spacing:.1rem; border-bottom:2px solid var(--primary); }

/* ======================================================================
   EXTRA PATCHES FOR ALIGN & CLEAN
   ====================================================================== */
/* Center headings in sections automatically (safe) */
.site-section .section-heading{ text-align:center; }
.site-section .section-sub{ text-align:center; margin:0 auto 1.25rem; max-width:720px; }

/* Ensure hero form centered on small screens */
.hero .intro{ text-align:center; }

/* Minimal shrink effect when sticky class applied via JS */
.sticky{ box-shadow:0 8px 24px rgba(0,0,0,.08); background:#fff !important; }

/* ======================================================================
   END
   ====================================================================== */