/* =========================================================
   kokoholiday.css  (v1)
   Shared design system for kokoholiday.com
   Only shared styles live here. Page-specific styles (for
   example the Tours filter chips and card list) stay inside
   each page's own <style> block.

   HOW TO RESTYLE THE WHOLE SITE
   Change values in the THEME TOKENS block below. Colors, fonts,
   corner radii and header height all come from there.

   FONTS
   Each page needs the Google Fonts link in its <head>:
   Cormorant Garamond (500, 600) and DM Sans (400, 500, 600, 700).
   Or remove that link and un-comment the @import line below.
   Use only one of the two, not both.
   ========================================================= */

/* @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=DM+Sans:wght@400;500;600;700&display=swap"); */

/* ===== THEME TOKENS ===== */
:root{
  --green:#0F3D32; --green-2:#17513F;
  --orange:#E3922F; --orange-2:#C9761A;
  --mist:#E7F1F4; --mist-2:#D3E6EC;
  --ink:#0A2A22; --muted:#4D655E; --white:#fff;
  --line:rgba(15,61,50,.14);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:12px; --r-m:20px; --r-l:28px;
  --wrap:1240px; --pad:clamp(20px,4vw,48px);
  --hdr-h:76px;
  --shadow:0 18px 50px rgba(10,42,34,.16);
}

/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
html.lock{overflow:hidden}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.01em;color:var(--green)}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--green);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{top:12px}
.ic{width:1.25em;height:1.25em;flex:none}

/* ===== LAYOUT ===== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(56px,9vw,112px)}
.sec--mist{background:var(--mist)}
.sec--green{background:var(--green);color:rgba(255,255,255,.86)}
.sec--green h2,.sec--green h3{color:#fff}
.h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:56ch}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head .lead{margin-top:12px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--green);border-bottom:1.5px solid var(--orange);padding-bottom:2px}
.link:hover{border-color:var(--green)}

/* photo frame: the gradient shows if a photo fails to load */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--green) 0%,#2B6F5B 58%,var(--orange) 150%)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:.85rem 1.6rem;border-radius:999px;font-weight:600;font-size:1rem;line-height:1.1;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn--orange{background:var(--orange);color:var(--green)}
.btn--orange:hover{background:#EDA44D}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-2)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--line{border:1.5px solid var(--line);color:var(--green)}
.btn--line:hover{border-color:var(--green)}
.btn--block{width:100%}

/* ===== HEADER ===== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr-h);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.hdr[data-mode="solid"],.hdr.is-solid{background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.hdr__in{height:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.logo{display:flex;align-items:center;gap:10px;justify-self:start}
.logo svg{width:38px;height:38px}
.logo b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1}
.logo small{display:block;margin-top:3px;font-size:.74rem;font-weight:500;opacity:.78}
.pill{display:none}
.hdr__r{justify-self:end;display:flex;align-items:center;gap:10px}
.wa-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid rgba(255,255,255,.45);transition:background .2s,border-color .2s}
.wa-btn:hover{background:rgba(255,255,255,.14)}
.hdr[data-mode="solid"] .wa-btn,.hdr.is-solid .wa-btn{border-color:var(--line)}
.hdr[data-mode="solid"] .wa-btn:hover,.hdr.is-solid .wa-btn:hover{background:var(--mist)}
.menu-btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.45);transition:box-shadow .2s,border-color .2s,background .2s}
.menu-btn:hover{background:rgba(255,255,255,.14)}
.hdr[data-mode="solid"] .menu-btn,.hdr.is-solid .menu-btn{border-color:var(--line)}
.hdr[data-mode="solid"] .menu-btn:hover,.hdr.is-solid .menu-btn:hover{background:#fff;box-shadow:0 4px 16px rgba(10,42,34,.14)}
.menu-btn__lines{display:grid;gap:4px;width:18px}
.menu-btn__lines i{display:block;height:2px;border-radius:2px;background:currentColor}
.menu-btn__av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--orange);color:var(--green)}
.menu-btn__av svg{width:20px;height:20px}

/* ===== MENU PANEL: dropdown on desktop, full-screen sheet on mobile ===== */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(10,42,34,.4);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.scrim.is-open{opacity:1;visibility:visible}
.menu{position:fixed;z-index:60;inset:0;background:#fff;color:var(--ink);overflow:auto;padding:0 var(--pad) 28px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .28s,transform .28s,visibility .28s}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h)}
.menu__top b{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--green)}
.menu__close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line)}
.menu__label{margin:8px 0 10px;font-size:.9rem;font-weight:600;color:var(--muted)}
.exp{display:flex;align-items:center;gap:14px;padding:10px;margin-inline:-10px;border-radius:var(--r-s);transition:background .2s}
.exp:hover{background:var(--mist)}
.exp .ph{width:68px;height:68px;border-radius:14px;flex:none}
.exp b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.15;color:var(--green)}
.exp small{display:block;margin-top:3px;font-size:.88rem;color:var(--muted)}
.menu__links{margin:18px 0 22px;border-top:1px solid var(--line)}
.menu__links a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.7rem;font-weight:500;color:var(--green)}
.menu__links a[aria-current="page"]{color:var(--orange-2)}
.menu__links .ic{width:1.1rem;height:1.1rem;color:var(--muted)}

/* ===== MOBILE BOTTOM TAB BAR (4 tabs, or 5 with .tabs--5 and a More button) ===== */
.tabs{position:fixed;inset:auto 0 0 0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.tabs a,.tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:12px;font-size:.74rem;font-weight:600;color:var(--muted)}
.tabs .ic{width:24px;height:24px}
.tabs a[aria-current="page"]{color:var(--green)}
.tabs a[aria-current="page"] .ic{color:var(--orange-2)}
.tabs a[aria-current="page"]::before{content:"";position:absolute;top:-7px;width:28px;height:3px;border-radius:3px;background:var(--orange-2)}
.tabs--5{grid-template-columns:repeat(5,1fr)}
body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
body.no-tabs .tabs{display:none}
body.has-bar{padding-bottom:calc(88px + env(safe-area-inset-bottom))}

@media (min-width:640px){
  .wa-btn{display:inline-flex}
}
@media (min-width:1024px){
  body,body.has-bar{padding-bottom:0}
  .tabs{display:none}
  .hdr__in{grid-template-columns:1fr auto 1fr}
  .pill{display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);transition:background .3s,border-color .3s}
  .hdr[data-mode="solid"] .pill,.hdr.is-solid .pill{background:var(--mist);border-color:var(--line)}
  .pill a{padding:10px 22px;border-radius:999px;font-weight:600;font-size:.97rem;transition:background .2s,color .2s}
  .pill a:hover{background:rgba(255,255,255,.2)}
  .hdr[data-mode="solid"] .pill a:hover,.hdr.is-solid .pill a:hover{background:rgba(15,61,50,.07)}
  .pill a[aria-current="page"]{background:#fff;color:var(--green)}
  .hdr[data-mode="solid"] .pill a[aria-current="page"],.hdr.is-solid .pill a[aria-current="page"]{background:var(--green);color:#fff}
  .menu{inset:auto;top:calc(var(--hdr-h) - 6px);right:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));width:380px;max-height:calc(100svh - var(--hdr-h) - 20px);padding:18px 18px 18px;border-radius:var(--r-l);box-shadow:var(--shadow);border:1px solid var(--line);transform:translateY(-8px) scale(.98);transform-origin:top right}
  .menu.is-open{transform:none}
  .menu__top{display:none}
  .menu__links{margin:14px 0 16px}
  .menu__links a{font-size:1.35rem;padding:11px 0}
  .scrim{background:transparent}
}

/* ===== PAGE HERO (inner pages) ===== */
.phero{position:relative;background:var(--green);color:#fff;overflow:hidden;padding:calc(var(--hdr-h) + clamp(44px,8vw,96px)) 0 clamp(48px,7vw,88px)}
.phero::after{content:"";position:absolute;right:-4%;bottom:-2px;width:min(620px,70vw);aspect-ratio:2/1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M0 200L120 60l40 50 50-70 70 90 30-30 90 100z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E") no-repeat right bottom/contain;pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;max-width:16ch}
.phero p{margin-top:18px;max-width:54ch;font-size:clamp(1.05rem,1.6vw,1.2rem);color:rgba(255,255,255,.82)}

/* ===== CARDS ===== */
.grid2{display:grid;gap:clamp(28px,4vw,48px) clamp(20px,3vw,36px);grid-template-columns:1fr}
@media (min-width:720px){.grid2{grid-template-columns:repeat(2,1fr)}}
.xcard{display:block}
.xcard__img{position:relative;aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden}
.xcard__img img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.xcard:hover .xcard__img img{transform:scale(1.04)}}
.badge{position:absolute;left:14px;top:14px;z-index:1;background:#fff;color:var(--green);font-size:.84rem;font-weight:600;padding:6px 13px;border-radius:999px}
.xcard h3{font-size:clamp(1.65rem,2.4vw,2rem);margin-top:18px}
.xcard p{color:var(--muted);margin-top:8px;max-width:46ch}
.xcard__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.93rem;color:var(--muted)}
.xcard__meta span{display:inline-flex;align-items:center;gap:7px}
.xcard__meta .ic{width:1.1rem;height:1.1rem;color:var(--orange-2)}
.xcard__price{display:flex;align-items:baseline;gap:8px;margin-top:14px;font-size:.95rem;color:var(--muted)}
.xcard__price b{font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--green);line-height:1}

/* ===== CALL-TO-ACTION BAND ===== */
.cta{background:var(--green);color:#fff;padding-block:clamp(56px,8vw,96px)}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.cta h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);max-width:20ch}
.cta p{margin-top:12px;color:rgba(255,255,255,.8);max-width:46ch}
.cta p a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}

/* ===== FOOTER ===== */
.ftr{background:#0A2D25;color:rgba(255,255,255,.78);padding-top:clamp(52px,7vw,84px)}
.ftr a{transition:color .2s}
.ftr a:hover{color:#fff}
.ftr__grid{display:grid;gap:36px 28px;grid-template-columns:1fr 1fr}
.ftr__brand{grid-column:1/-1}
.ftr .logo{color:#fff}
.ftr__brand p{margin-top:16px;max-width:38ch;font-size:.98rem}
.ftr h4{font-family:var(--sans);font-size:.95rem;font-weight:700;color:#fff;letter-spacing:0;margin-bottom:14px}
.ftr li+li{margin-top:9px}
.ftr li a{font-size:.97rem}
.ftr__wa{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--orange);font-weight:600}
.ftr__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(40px,6vw,64px);padding:22px 0;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem;color:rgba(255,255,255,.6)}
@media (min-width:860px){
  .ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .ftr__brand{grid-column:auto}
}

/* ===== FORM FIELDS AND CHECKLISTS ===== */
.fld{display:block;padding:13px 16px 12px;border:1.5px solid var(--line);border-radius:16px;background:#fff;transition:border-color .2s,box-shadow .2s}
.fld:hover{border-color:rgba(15,61,50,.32)}
.fld:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(15,61,50,.09)}
.fld > span{display:block;font-size:.8rem;font-weight:700;color:var(--green)}
.fld input,.fld select,.fld textarea{display:block;width:100%;min-height:30px;margin:3px 0 0;padding:0;border:0;border-radius:0;outline:0;background:transparent;font:inherit;font-size:1rem;color:var(--ink)}
.fld select{-webkit-appearance:none;appearance:none;padding-right:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D32' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/16px}
.fld input::placeholder,.fld textarea::placeholder{color:#6F8780;opacity:1}
.checks{display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .ic{width:22px;height:22px;margin-top:2px;color:var(--orange-2)}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===== Fallback ukuran ikon (dipakai jika CSS terlambat termuat) ===== */
svg.ic{width:1.25em;height:1.25em;flex:none}
.logo svg{width:38px;height:38px}
.menu-btn__av svg{width:20px;height:20px}
.tabs svg.ic{width:24px;height:24px}
.menu__links svg.ic{width:1.1rem;height:1.1rem}

/* ===== Harga hanya USD: sembunyikan baris IDR ===== */
.book__idr{display:none!important}