/* ═══════════════════════════════════════════════════════════════
   CLASSIC TOUR INDONESIA — Responsive
   Mobile-first: Bottom Nav Bar + Slide Drawer
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1440px ─────────────────────────────────────────────────── */
@media (max-width:1440px){
  :root{--container:1160px;}
}

/* ─── 1200px ─────────────────────────────────────────────────── */
@media (max-width:1200px){
  :root{--pad:clamp(1rem,3vw,1.75rem);}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .detail-layout{grid-template-columns:1fr 300px;}
  .booking-layout{grid-template-columns:1fr 340px;}
  .contact-layout{gap:2.5rem;}
  .flight-2col{gap:3rem;}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — 992px ke bawah
   ─────────────────────────────────────────────────────────────
   Arsitektur:
   • Announcement bar → fixed top, z-index 1002
   • Navbar (top bar)  → fixed tepat di bawah bar, z-index 1001
   • Mobile drawer     → slide dari kiri, z-index 1003 (di atas semua)
   • Bottom nav bar    → fixed di bawah layar, z-index 1001
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:992px){
  :root{
    --nav-h: 90px;          /* 54px main header + 36px contact sub-bar */
    --bottom-nav-h: 64px;   /* tinggi bottom nav bar */
  }

  /* ── Top Navbar (mobile pink) ─────────────────────────────── */
  .navbar{
    height:var(--nav-h);
    background:rgba(125,24,68,0.98)!important;
    box-shadow:0 2px 16px rgba(0,0,0,0.22)!important;
    /* Navbar harus BELOW drawer (z:1004) tapi ABOVE overlay (z:1003) */
    z-index:1004;
    overflow:visible;
  }
  .navbar--transparent{
    background:rgba(125,24,68,0.95)!important;
  }
  .navbar > .container{
    height:100%;
    position:relative;
  }
  .navbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--pad);
    gap:8px;
    height:54px;            /* Main top bar height */
    width:100%;
    overflow:visible;
    position:relative;
  }

  /* Logo pojok kiri */
  .navbar__logo{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:calc(100% - 125px);
  }
  .navbar__logo-img{
    height:30px;
    max-width:38px;
    flex-shrink:0;
  }
  .logo-main{color:#fff!important;font-size:0.96rem;white-space:nowrap;}
  .logo-sub{color:rgba(255,255,255,0.85)!important;font-size:0.46rem;}

  /* Hide Book Now di mobile (dipindah ke drawer / bottom nav) */
  .navbar__right{display:none!important;}

  /* Mobile Actions container (Lang Switcher + Menu Toggle ONLY) */
  .navbar__mobile-actions{
    display:flex!important;
    align-items:center;
    gap:8px!important;
    margin-left:auto;
    flex-shrink:0!important;
  }

  /* Language switcher di tab atas mobile: rapi, mepet toggle */
  .navbar__mobile-actions .lang-switcher{
    display:inline-flex;
    align-items:center;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:9999px;
    padding:2px;
    flex-shrink:0;
  }
  .navbar__mobile-actions .lang-btn{
    font-family:var(--font-sans);
    font-size:0.62rem;
    font-weight:600;
    letter-spacing:0.06em;
    padding:3px 8px;
    color:rgba(255,255,255,0.88);
    background:transparent;
    border:none;
    border-radius:9999px;
    cursor:pointer;
    line-height:1.2;
    transition:all 0.15s ease;
  }
  .navbar__mobile-actions .lang-btn.active{
    background:#ffffff;
    color:#8b2252;
    font-weight:700;
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
  }

  /* Hamburger ("icon 3 baris") — selalu tampil penuh, tidak pernah terpotong ke samping */
  .navbar__toggle{
    margin-left:0;
    z-index:1006!important;
    position:relative;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4.5px;
    padding:6px;
    border-radius:8px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.25);
    cursor:pointer;
    flex-shrink:0!important;
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box;
  }
  .navbar__toggle:active{
    background:rgba(255,255,255,0.25);
  }
  .navbar__toggle span{
    display:block;
    width:18px;
    height:2px;
    background:#fff!important;
    border-radius:2px;
    transition:transform 0.3s ease, opacity 0.3s ease;
    transform-origin:center;
    pointer-events:none;
  }
  .navbar__toggle.open span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
  }
  .navbar__toggle.open span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
  }
  .navbar__toggle.open span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
  }

  /* ── Tier 2: Mobile Contact Icons Sub-Bar (Email, WA, IG, FB, YT) ── */
  .navbar__contact-icons{
    position:absolute;
    top:54px;
    left:0;
    right:0;
    width:100%;
    height:36px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:16px!important;
    padding:0 var(--pad);
    background:rgba(85,14,44,0.98);
    border-top:1px solid rgba(255,255,255,0.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
    z-index:1003;
    box-sizing:border-box;
  }
  .navbar__contact-icon{
    width:28px!important;
    height:28px!important;
    min-width:28px;
    min-height:28px;
    border-radius:50%!important;
    background:rgba(255,255,255,0.14)!important;
    border:1px solid rgba(255,255,255,0.2)!important;
    color:#ffffff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-decoration:none!important;
    transition:background 0.15s ease, transform 0.15s ease;
    box-shadow:0 1px 3px rgba(0,0,0,0.15);
  }
  .navbar__contact-icon:active{
    background:rgba(255,255,255,0.32)!important;
    transform:scale(0.92);
  }
  .navbar__contact-icon svg{
    width:13px!important;
    height:13px!important;
    display:block;
  }
  .navbar__contact-icon::after{
    display:none!important;
  }

  /* Drawer footer */
  #nav-menu::after{content:'';display:block;flex:1;min-height:1rem;}
  .navbar__menu-footer{
    padding:1.5rem 1.75rem 2.5rem;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
  }
  .navbar__menu-book{
    display:block;
    background:rgba(255,255,255,0.15);
    color:#fff;
    text-align:center;
    padding:1em 1.5em;
    border-radius:var(--r-full);
    font-size:0.75rem;font-weight:600;
    letter-spacing:0.16em;text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.3);
    text-decoration:none;
    transition:background 0.15s ease;
  }
  .navbar__menu-book:hover{background:rgba(255,255,255,0.25);}
  .navbar__menu-lang{display:flex;gap:0.5rem;justify-content:center;}
  .navbar__menu-lang .lang-btn{color:rgba(255,255,255,0.6);font-size:0.68rem;padding:6px 14px;}
  .navbar__menu-lang .lang-btn.active{background:rgba(255,255,255,0.2);color:#fff;box-shadow:none;}

  /* ══════════════════════════════════════════════════════════════
     BOTTOM NAVIGATION BAR — selalu terlihat di HP
  ══════════════════════════════════════════════════════════════ */
  .mobile-bottom-nav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    height:var(--bottom-nav-h);
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-top:1px solid var(--c-border);
    box-shadow:0 -4px 24px rgba(0,0,0,0.08);
    z-index:1001;
    padding:0 0.5rem;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .mobile-bottom-nav__item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    text-decoration:none;
    color:var(--c-ash);
    font-size:0.58rem;
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:0.5rem 0.25rem;
    border-radius:var(--r-md);
    transition:color 0.2s ease, background 0.2s ease;
    position:relative;
  }
  .mobile-bottom-nav__item svg{
    width:20px;height:20px;
    stroke-width:1.75;
    transition:transform 0.2s var(--ease-spring);
  }
  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__item.active{
    color:var(--c-gold-dk);
  }
  .mobile-bottom-nav__item.active svg{
    transform:scale(1.15);
  }
  .mobile-bottom-nav__item.active::after{
    content:'';
    position:absolute;
    bottom:6px;
    width:4px;height:4px;
    background:var(--c-gold-dk);
    border-radius:50%;
  }
  /* Book Now — special pill button in bottom nav */
  .mobile-bottom-nav__item--book{
    background:var(--c-pink-bg);
    color:#fff!important;
    border-radius:var(--r-lg);
    margin:8px 4px;
    padding:0.4rem 0.5rem;
    box-shadow:0 4px 16px rgba(139,34,82,0.35);
  }
  .mobile-bottom-nav__item--book svg{stroke:#fff;}
  .mobile-bottom-nav__item--book:hover{background:var(--c-pink-mid);}
  .mobile-bottom-nav__item--book::after{display:none!important;}

  /* Push body up so bottom nav doesn't cover content */
  body{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px))!important;}

  /* WhatsApp float — move above bottom nav */
  .wa-float{bottom:calc(var(--bottom-nav-h) + 1rem)!important;}

  /* Show bottom nav and drawer footer on mobile */
  .mobile-bottom-nav{display:flex;}
  .navbar__menu-footer{display:flex!important;flex-direction:column;gap:0.75rem;padding:1.5rem 1.75rem 2.5rem;}

  /* ── Layouts ─────────────────────────────────────────────── */
  .booking-layout{grid-template-columns:1fr;}
  .booking-sidebar{position:static;}
  .detail-layout{grid-template-columns:1fr;}
  .about-content{grid-template-columns:1fr;gap:3rem;}
  .about-content__img-wrap{display:none;}
  .contact-layout{grid-template-columns:1fr;}
  .flight-2col{grid-template-columns:1fr;gap:2.5rem;}

  /* ── Grids ───────────────────────────────────────────────── */
  .pkg-grid{grid-template-columns:repeat(2,1fr);}
  .destination-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem;}
  .resources-grid{grid-template-columns:1fr 1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .about-stats{grid-template-columns:repeat(3,1fr);}

  .hero__ticker-item{padding:0.65rem 0.6rem;gap:0.5rem;}
}

/* ─── 768px ──────────────────────────────────────────────────── */
@media (max-width:768px){
  :root{
    --nav-h:90px;
    --pad:1.25rem;
    --bottom-nav-h:60px;
  }

  .section{padding:clamp(3rem,6vw,4.5rem) 0;}
  .section--lg{padding:clamp(3.5rem,7vw,5rem) 0;}

  /* Announcement bar */
  .announcement-bar{
    font-size:0.63rem;
    padding:0.4rem var(--pad);
    gap:0.5rem;
    flex-wrap:wrap;
    white-space:normal;
    text-align:center;
  }

  /* Destinations */
  .destination-grid{grid-template-columns:1fr;gap:1.25rem;}
  .dest-card{
    aspect-ratio:auto;
    min-height:310px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .dest-card::before{
    background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.2) 100%);
  }
  .dest-card__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .dest-card__content{
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
    padding:1.5rem 1.25rem 1.25rem;
    gap:0.4rem;
    z-index:2;
  }
  .dest-card__name{font-size:1.6rem;}
  .dest-card__desc{
    max-height:none!important;
    opacity:0.92!important;
    font-size:0.84rem;
    line-height:1.45;
  }
  .dest-card__btn{
    transform:none!important;
    opacity:1!important;
    margin-top:0.25rem;
  }
  .dest-card__index{display:none;}

  /* Packages */
  .pkg-grid{grid-template-columns:1fr;}
  .pkg-section-head{flex-direction:column;align-items:flex-start;gap:1rem;}
  .pkg-filters{width:100%;overflow-x:auto;padding-bottom:0.25rem;-webkit-overflow-scrolling:touch;}

  /* Trust */
  .trust-grid{grid-template-columns:1fr 1fr;gap:0.875rem;}

  /* Resources */
  .resources-grid{grid-template-columns:1fr;}
  .resource-card{padding:1.75rem 1.5rem;}

  /* Footer */
  .footer__grid{grid-template-columns:1fr;gap:2rem;}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:0.5rem;}

  /* About */
  .about-stats{grid-template-columns:1fr 1fr;}
  .about-stats{background:none;border:none;}
  .about-stat{border-radius:var(--r-lg);border:1px solid rgba(255,255,255,0.2);margin-bottom:0.5rem;}

  /* Hero */
  .hero{min-height:100svh;}
  .hero__content{
    max-width:100%;
    padding:clamp(6rem,15vw,9rem) 0 clamp(2rem,5vw,4rem);
  }
  .hero__headline{font-size:clamp(2.2rem,9vw,3.5rem);margin-bottom:1rem;}
  .hero__sub{font-size:0.9rem;margin-bottom:1.5rem;}
  .hero__actions{gap:0.6rem;flex-wrap:wrap;}
  .hero__trust{flex-direction:column;gap:0.5rem;}
  .hero__trust-item{
    border-right:none;
    padding-left:0;padding-right:0;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:0.5rem;
  }
  .hero__trust-item:last-child{border-bottom:none;}
  .hero__ticker{display:none;}
  .hero__scroll{display:none;}

  /* Booking */
  .booking-steps{max-width:100%;}
  .form-group--half{grid-template-columns:1fr;gap:0;}

  /* Contact */
  .review-table td:first-child{min-width:100px;}
  .contact-form-card{padding:1.75rem;}
  .detail-booking-card{position:static;}

  /* Page hero */
  .page-hero{padding:calc(var(--announce-h,32px) + var(--nav-h) + 2rem) 0 2.5rem;}

  /* CTA Banner */
  .cta-banner{padding:clamp(3rem,6vw,5rem) 0;}
  .cta-actions{flex-direction:column;align-items:center;}

  /* Bottom nav label size */
  .mobile-bottom-nav__item{font-size:0.55rem;}
}

/* ─── 576px ──────────────────────────────────────────────────── */
@media (max-width:576px){
  :root{--pad:1rem;}

  .btn{padding:0.75em 1.4em;}
  .btn--lg{padding:0.9em 2em;font-size:0.8rem;}

  /* Hero */
  .hero__headline{font-size:clamp(1.95rem,8.5vw,2.8rem);}
  .hero__actions{gap:0.5rem;}
  .hero__sub{font-size:0.88rem;}
  .hero__eyebrow{font-size:0.65rem;}

  /* Trust grid */
  .trust-grid{grid-template-columns:1fr;}

  /* Booking */
  .booking-card{padding:1.5rem;}
  .booking-card__estimate{font-size:1.75rem;}
  .booking-steps{border-radius:var(--r-lg);}

  /* Package filters */
  .pkg-filters{width:100%;}
  .pkg-filter-btn{padding:0.5em 1em;flex:1;text-align:center;min-width:auto;}

  /* Section header */
  .section-header{margin-bottom:2rem;}

  /* Announcement bar */
  .announcement-bar{font-size:0.6rem;gap:0.4rem;}
  .marquee-strip{display:none;}

  /* About stats */
  .about-stats{grid-template-columns:1fr;}

  /* Bottom nav — hide labels on smallest screens, icon only */
  .mobile-bottom-nav__item span{display:none;}
  .mobile-bottom-nav__item{gap:0;padding:0.6rem 0.25rem;}
  .mobile-bottom-nav__item svg{width:22px;height:22px;}
  .mobile-bottom-nav__item--book span{display:block;font-size:0.55rem;}
}

/* ─── 390px ──────────────────────────────────────────────────── */
@media (max-width:390px){
  .hero__actions{flex-direction:column;}
  .hero__actions .btn{width:100%;justify-content:center;}
  .cta-actions .btn{width:100%;}
  .booking-steps .booking-step__label{display:none;}
  .resources-grid .resource-card{flex-direction:column;gap:1rem;}
  .hero__headline{font-size:clamp(1.75rem,7vw,2.2rem);}
  .dest-card{min-height:290px;}
  .dest-card__content{padding:1.25rem 1rem 1rem;}
  .dest-card__name{font-size:1.45rem;}
  .announcement-bar{
    font-size:0.58rem;
    justify-content:center;
    gap:0.3rem;
  }
  .announcement-bar a{white-space:nowrap;}
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print{
  .navbar,.footer,.wa-float,.announcement-bar,.marquee-strip,
  .mobile-bottom-nav{display:none!important;}
  .page-hero{padding-top:1rem!important;background:none!important;}
  .page-hero *{color:var(--c-ink)!important;}
  body{font-size:12px;padding-top:0!important;padding-bottom:0!important;}
}

/* ─── Mobile Performance ─────────────────────────────────────── */
@media (max-width:992px) and (pointer:coarse){
  /* Matikan animasi sweep boros GPU */
  .announcement-bar::before{animation:none;display:none;}

  /* GPU layer bottom nav */
  .mobile-bottom-nav{
    transform:translateZ(0);
    will-change:transform;
  }

  /* Sembunyikan custom cursor di HP */
  .cursor-dot,.cursor-ring{display:none!important;}

  /* Disable backdrop-filter (berat di HP mid-range) */
  .navbar,.navbar--transparent,.navbar--solid{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* ─── Universal Mobile Fixes ─────────────────────────────────── */
/* Prevent horizontal overflow on ALL devices */
html,body{
  overflow-x:hidden;
  max-width:100vw;
}

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

/* Container never overflows */
.container{
  width:100%;
  max-width:var(--container,1200px);
  margin-inline:auto;
  padding-inline:var(--pad,1.5rem);
  box-sizing:border-box;
}

/* Safe area padding for notch phones (iPhone X+, Android notch) */
@supports(padding:max(0px)){
  .announcement-bar{
    padding-top:max(0.5rem, env(safe-area-inset-top));
  }
  .mobile-bottom-nav{
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
}

/* ─── 480px ──────────────────────────────────────────────────── */
@media (max-width:480px){
  /* Hero height fix for small phones */
  .hero{min-height:100svh;min-height:100vh;}
  .hero__content{padding-top:clamp(5rem,18vw,8rem);}

  /* Trust grid stacked */
  .trust-grid{grid-template-columns:1fr;}

  /* Testimonial rating wrap on very small screens */
  .testi-rating-summary{
    flex-direction:column;
    gap:16px;
    padding:20px;
    margin-top:32px;
  }
  .testi-score-divider{width:80%;height:1px;}

  /* Pkg grid single col */
  .pkg-grid{grid-template-columns:1fr;}

  /* About stats */
  .about-stats{grid-template-columns:1fr 1fr;}

  /* Footer grid stacked */
  .footer__grid{grid-template-columns:1fr;gap:2rem;}
  .footer__bottom{flex-direction:column;gap:0.5rem;font-size:0.7rem;}

  /* Announcement */
  .announcement-bar{font-size:0.58rem;padding:0.35rem var(--pad);}

  /* Partners grid */
  .partners-grid{gap:1rem!important;}
  .partner-logo{min-width:120px!important;min-height:64px!important;}

  /* Bottom nav label */
  .mobile-bottom-nav__item{font-size:0.52rem;}

  /* Contact icons sub-bar spacing */
  .navbar__contact-icons{gap:14px!important;}
}

/* ─── Very small: 360px ──────────────────────────────────────── */
@media (max-width:360px){
  :root{--pad:0.875rem;}
  .navbar__contact-icons{gap:10px!important;}
  .navbar__contact-icon{
    width:26px!important;
    height:26px!important;
    min-width:26px;
    min-height:26px;
  }
  .navbar__contact-icon svg{
    width:12px!important;
    height:12px!important;
  }
  .hero__headline{font-size:clamp(1.6rem,7.5vw,2rem);}
  .hero__actions{flex-direction:column;gap:0.5rem;}
  .hero__actions .btn{width:100%;text-align:center;justify-content:center;}
  .about-stats{grid-template-columns:1fr;}
  .mobile-bottom-nav__item span{display:none;}
  .mobile-bottom-nav__item--book span{display:block;font-size:0.5rem;}
  .testi-rating-summary{padding:16px 12px;}
  .testi-big-score{font-size:2.4rem;}
}