/* ============================================================
   TERE KOMODO TOUR — stylesheet
   Warna & font utama diatur di :root, cukup ganti di sini kalau
   ingin ubah tema warna di seluruh halaman sekaligus.
   ============================================================ */
:root{
  --ocean-deep:#0B2E32;
  --ocean-mid:#123F42;
  --ocean-line:#1E5C5E;
  --sand:#F1E7D2;
  --sand-dim:#D9CBAA;
  --gold:#D9A441;
  --gold-dim:#B8842E;
  --coral:#E2907B;
  --ink:#0B2E32;
  --cream:#F6EFDF;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Work Sans", "Segoe UI", Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  margin:0 0 0.4em 0;
  font-weight:600;
  letter-spacing:-0.01em;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- Nav ---------- */
nav{
  position:sticky;top:0;z-index:40;
  background:rgba(11,46,50,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ocean-line);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.brand{
  font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;color:var(--sand);
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.brand img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;}
.brand em{font-style:italic;color:var(--coral);font-weight:500;}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--ocean-deep);
  padding:9px 16px;border-radius:999px;
  font-weight:600;font-size:0.92rem;text-decoration:none;
  white-space:nowrap;
}

/* ---------- Hero ---------- */
header.hero{
  position:relative;
  color:var(--sand);
  padding:100px 0 84px 0;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,46,50,0.82) 0%, rgba(18,63,66,0.88) 60%, rgba(18,63,66,0.95) 100%),
    url("../images/hero.jpg") center/cover no-repeat;
}
.hero h1{
  font-size:clamp(2.1rem,5vw,3.4rem);
  color:var(--cream);
  line-height:1.05;
  max-width:16ch;
}
.hero h1 .line2{display:block;color:var(--gold);font-style:italic;font-weight:500;}
.hero p.lede{
  font-size:1.08rem;max-width:46ch;color:var(--sand-dim);margin:18px 0 26px 0;
}
.hero-facts{
  display:flex;gap:22px;flex-wrap:wrap;margin:0 0 30px 0;padding:0;list-style:none;
}
.hero-facts li{
  font-size:0.85rem;color:var(--sand-dim);border-left:2px solid var(--gold-dim);padding-left:10px;
}
.hero-facts b{display:block;color:var(--cream);font-size:1.02rem;font-family:"Fraunces",serif;font-weight:600;}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--ocean-deep);
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;
}
.btn-primary svg{width:18px;height:18px;}

.wave{display:block;width:100%;height:64px;margin-top:-4px;position:relative;z-index:1;}

/* ---------- Section shell ---------- */
section{padding:64px 0;}
.section-head{max-width:60ch;margin-bottom:36px;}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem);}
.section-head p{color:#3E5B5C;font-size:1.02rem;}

/* ---------- Price banner ---------- */
.price-banner{
  background:var(--ocean-mid);color:var(--sand);
}
.price-inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding:22px 0;
}
.price-inner .price-tag{font-family:"Fraunces",serif;font-size:1.6rem;color:var(--gold);font-weight:600;}
.price-inner .price-tag span{font-size:0.95rem;color:var(--sand-dim);font-family:"Work Sans",sans-serif;font-weight:400;margin-left:8px;}
.price-inner p{margin:0;color:var(--sand-dim);font-size:0.92rem;}

/* ---------- Route / itinerary ---------- */
.route{background:var(--sand);}
.route-list{
  display:flex;flex-direction:column;border-top:1px solid var(--sand-dim);
}
.stop{
  display:grid;grid-template-columns:180px 1fr;gap:24px;
  padding:26px 0;border-bottom:1px solid var(--sand-dim);
  align-items:center;
}
.stop-photo{
  width:180px;height:130px;border-radius:6px;overflow:hidden;flex:none;
  background:var(--sand-dim);
}
.stop-photo img{width:100%;height:100%;object-fit:cover;}
.stop-num{
  font-family:"Fraunces",serif;font-weight:900;font-size:1.1rem;color:var(--gold-dim);
  display:inline-block;margin-bottom:6px;
}
.stop h3{font-size:1.15rem;margin-bottom:6px;}
.stop p{margin:0;color:#3E5B5C;max-width:62ch;font-size:0.98rem;}
.stop-tag{
  display:inline-block;margin-top:8px;font-size:0.78rem;color:var(--ocean-mid);
  background:rgba(30,92,94,0.09);padding:3px 10px;border-radius:999px;
}

/* ---------- Included ---------- */
.included{background:var(--ocean-deep);color:var(--sand);}
.included .section-head p{color:var(--sand-dim);}
.included-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;}
.included-grid ul{margin:0;padding:0;list-style:none;}
.included-grid li{
  display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--ocean-line);
  font-size:0.98rem;color:var(--sand-dim);
}
.included-grid li svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--gold);}
.note-box{
  margin-top:26px;padding:16px 18px;border:1px solid var(--ocean-line);
  border-radius:4px;font-size:0.9rem;color:var(--sand-dim);background:rgba(255,255,255,0.03);
}

/* ---------- Practical info ---------- */
.practical .section-head p{color:#3E5B5C;}
.info-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.info-col h3{font-size:1.02rem;margin-bottom:8px;}
.info-col p{margin:0;color:#3E5B5C;font-size:0.96rem;}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(120deg,var(--coral) 0%, var(--gold) 100%);
  color:var(--ocean-deep);text-align:left;
}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta h2{font-size:clamp(1.6rem,3.2vw,2.3rem);max-width:16ch;}
.cta p{margin:8px 0 0 0;color:rgba(11,46,50,0.75);max-width:42ch;}
.btn-dark{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ocean-deep);color:var(--cream);
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;white-space:nowrap;
}
.btn-dark svg{width:18px;height:18px;}

footer{
  background:var(--ocean-deep);color:var(--sand-dim);
  padding:36px 0;font-size:0.85rem;
}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;}
footer a{text-decoration:underline;text-underline-offset:3px;}

@media (max-width:820px){
  .included-grid{grid-template-columns:1fr;}
  .info-cols{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .stop{grid-template-columns:1fr;}
  .stop-photo{width:100%;height:180px;}
}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important;} }

/* ---------- Why book (trust badges) ---------- */
.why-book{background:var(--cream);}
.badge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.badge{text-align:center;padding:18px 10px;}
.badge .emoji{font-size:1.8rem;display:block;margin-bottom:10px;}
.badge p{margin:0;font-size:0.92rem;color:var(--ocean-mid);font-weight:500;}

/* ---------- Tour style cards ---------- */
.tour-styles{background:var(--sand);}
.tour-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;}
.tour-card{
  background:var(--cream);border:1px solid var(--sand-dim);border-radius:8px;
  padding:30px 28px;display:flex;flex-direction:column;
}
.tour-card.featured{background:var(--ocean-deep);color:var(--sand);border-color:var(--ocean-line);}
.tour-card.featured .tour-tagline{color:var(--sand-dim);}
.tour-card.featured .tour-price span{color:var(--sand-dim);}
.tour-card.featured li{color:var(--sand-dim);border-color:var(--ocean-line);}
.tour-card .kicker{
  font-size:0.8rem;font-weight:600;color:var(--gold-dim);margin-bottom:6px;
}
.tour-card.featured .kicker{color:var(--gold);}
.tour-card h3{font-size:1.35rem;margin-bottom:6px;}
.tour-tagline{font-style:italic;color:#3E5B5C;margin-bottom:18px;font-size:0.96rem;}
.tour-price{font-family:"Fraunces",serif;font-weight:600;font-size:1.5rem;margin-bottom:18px;}
.tour-price span{font-size:0.85rem;font-weight:400;color:#3E5B5C;font-family:"Work Sans",sans-serif;margin-left:6px;}
.tour-card ul{list-style:none;margin:0 0 18px 0;padding:0;flex:1;}
.tour-card li{
  display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--sand-dim);
  font-size:0.92rem;
}
.tour-card li b{font-weight:600;}
.tour-card li .check{flex:none;color:var(--gold-dim);}
.tour-card .includes-line{font-size:0.85rem;color:#3E5B5C;margin-bottom:18px;}
.tour-card.featured .includes-line{color:var(--sand-dim);}
.btn-card{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:var(--ocean-deep);
  padding:12px 20px;border-radius:999px;font-weight:700;font-size:0.94rem;
  text-decoration:none;
}
.tour-card.featured .btn-card{background:var(--sand);color:var(--ocean-deep);}
.tour-card svg.wa{width:16px;height:16px;}

@media (max-width:820px){
  .badge-grid{grid-template-columns:repeat(2,1fr);}
  .tour-cards{grid-template-columns:1fr;}
}

/* ---------- Our boat ---------- */
.our-boat{background:var(--cream);}
.boat-layout{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:start;}
.boat-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.boat-photos img{width:100%;height:200px;object-fit:cover;border-radius:6px;}
.boat-specs{background:var(--ocean-deep);color:var(--sand);border-radius:8px;padding:26px 28px;}
.boat-specs h3{color:var(--cream);font-size:1.2rem;margin-bottom:4px;}
.boat-specs .boat-name{color:var(--gold);font-size:0.9rem;font-weight:600;margin-bottom:14px;}
.boat-specs ul{list-style:none;margin:0;padding:0;}
.boat-specs li{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--ocean-line);font-size:0.94rem;color:var(--sand-dim);
}
.boat-specs li b{color:var(--sand);font-weight:600;}

@media (max-width:820px){
  .boat-layout{grid-template-columns:1fr;}
  .boat-photos img{height:160px;}
}