:root{
  --pasir:#F8F6F0; --krem:#FFFDF8; --pasir2:#EEF3F2;
  --laut:#1B5566; --laut2:#2C8199; --senja:#F2BD3B; --karang:#D2533A;
  --hijau:#3A9161; --ink:#22313A; --muted:#5E6B71; --line:#DCE3E1;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Young Serif',Georgia,serif; --sans:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{font-size:93.75%;scroll-behavior:smooth;scroll-padding-top:72px}
body{font:400 1.0625rem/1.65 var(--sans);color:var(--ink);background:var(--pasir);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:.6rem}
h3{font-size:1.25rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--karang);outline-offset:3px;border-radius:6px}

.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;background:var(--karang);color:#fff;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:600;transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:#BA4630;transform:translateY(-2px);box-shadow:0 8px 20px rgba(210,83,58,.22)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-sm{padding:.5rem 1.1rem;font-size:.95rem}
.btn-ghost{background:rgba(255,253,248,.16);border:1.5px solid rgba(255,253,248,.7);color:#FFFDF8}
.btn-ghost:hover{background:rgba(255,253,248,.28)}
.link{color:var(--laut);font-weight:600;text-decoration:underline;text-underline-offset:4px}

.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,4vw,3rem);transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(248,246,240,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:#FFFDF8}
.nav.solid .brand{color:var(--laut)}
.menu{display:flex;align-items:center;gap:1.6rem}
.menu a:not(.btn){text-decoration:none;color:#FFFDF8;font-weight:500}
.nav.solid .menu a:not(.btn){color:var(--ink)}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;position:relative;z-index:25}
.burger span{display:block;width:24px;height:2px;margin:6px 0;background:#FFFDF8;transition:.3s}
.nav.solid .burger span,.burger[aria-expanded=true] span{background:var(--ink)}

.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:6rem clamp(1.2rem,6vw,5rem) 9rem;
  background:linear-gradient(180deg,#FBE7B0 0%,#F7D27A 38%,#F0B45A 62%,#2C8199 62.1%,#1B5566 100%);color:#FFFDF8}
.sun{position:absolute;left:62%;bottom:38%;width:clamp(160px,24vw,320px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFF6DA 0%,#FADB86 60%,#F2BD3B 100%);box-shadow:0 0 90px 30px rgba(255,214,140,.55);
  transform:translateY(55%);opacity:0;animation:rise 2.6s .2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{transform:translateY(0);opacity:1}}
.hero-copy{position:relative;z-index:2;max-width:620px}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);margin-bottom:1.1rem;text-wrap:balance;text-shadow:0 2px 24px rgba(12,40,52,.3)}
.hero p{font-size:1.1rem;max-width:520px;margin-bottom:1.8rem;color:#F4F1EA;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.35)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.boat{position:absolute;bottom:34%;left:-200px;width:clamp(90px,12vw,160px);z-index:1;animation:sail 38s 1s linear infinite,bob 3.2s ease-in-out infinite}
@keyframes sail{to{left:110%}}
@keyframes bob{50%{translate:0 -6px;rotate:-1.5deg}}
.wave{position:absolute;left:0;width:200%;height:34%;bottom:0}
.w1{bottom:6%;animation:drift 18s linear infinite}
.w2{animation:drift 26s linear infinite reverse}
@keyframes drift{to{transform:translateX(-50%)}}

.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:760px;margin:-3.2rem auto 0;position:relative;z-index:3;background:var(--krem);padding:1.6rem 2rem;border-radius:20px;box-shadow:0 12px 40px rgba(20,55,68,.12)}
.facts div{display:flex;flex-direction:column}
.facts strong{font:400 1.7rem var(--serif);color:var(--laut)}
.facts span{color:var(--muted);font-size:.95rem}

.section{padding:6rem 1.2rem}
.sand{background:var(--pasir2)}
.wrap{max-width:1120px;margin:auto}.narrow{max-width:760px}
.lead{color:var(--muted);max-width:560px;margin-bottom:1.8rem}

.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.tab{padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;font:inherit;cursor:pointer;color:var(--ink);transition:.2s}
.tab:hover{border-color:var(--laut2)}
.tab.on{background:var(--laut);border-color:var(--laut);color:#FFFDF8}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.6rem}
.card{background:var(--krem);border-radius:18px;overflow:hidden;border:1px solid var(--line);transition:opacity .8s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{box-shadow:0 18px 40px rgba(20,55,68,.14)}
.card.hide{display:none}
.card-img{height:170px;position:relative;background:linear-gradient(135deg,var(--a),var(--b));overflow:hidden}
.card-img::before{content:"";position:absolute;inset:auto -10% -35% -10%;height:70%;border-radius:50%;background:rgba(255,253,248,.22);transition:transform .6s}
.card:hover .card-img::before{transform:scale(1.25) translateY(-8px)}
.card-img span{position:absolute;left:1rem;bottom:1rem;background:rgba(255,253,248,.92);padding:.25rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--laut)}
.card-body{padding:1.3rem 1.4rem 1.5rem}
.card-body p{color:var(--muted);margin:.5rem 0 1.1rem;font-size:.98rem}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.card-foot b{font-size:1.15rem;color:var(--karang)}

.timeline{list-style:none;padding:0;margin-top:2.2rem;border-left:2px solid var(--senja)}
.timeline li{position:relative;padding:0 0 2.2rem 2rem}
.timeline li::before{content:"";position:absolute;left:-9px;top:.45rem;width:16px;height:16px;border-radius:50%;background:var(--senja);box-shadow:0 0 0 5px var(--pasir2)}
.timeline p{color:var(--muted);margin-top:.3rem}

.split{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
.points{list-style:none;padding:0}
.points li{padding:1.1rem 0;border-bottom:1px solid var(--line);color:var(--muted)}
.points li:first-child{padding-top:0}
.points b{color:var(--ink)}

.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2rem}
.review blockquote{font:400 1.15rem/1.6 var(--serif);color:var(--laut)}
.review figcaption{margin-top:.8rem;color:var(--muted);font-size:.95rem}

.form{display:grid;gap:1.1rem;background:var(--krem);padding:2rem;border-radius:20px;border:1px solid var(--line)}
.form label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--laut2);box-shadow:0 0 0 4px rgba(44,129,153,.15)}
.form small{color:#B4432A;font-weight:500}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.notice{padding:1rem 1.2rem;border-radius:14px;margin-bottom:1.2rem}
.notice.ok{background:#E3EFE0;color:#2D5A2A;animation:pop .5s}
@keyframes pop{from{transform:scale(.96);opacity:0}}

.footer{background:var(--laut);color:#DCE8E8;padding:3rem 1.2rem}
.footer .brand{color:#FFFDF8;display:flex;margin-bottom:.8rem}
.footer .link{color:var(--senja);display:inline-block;margin-top:.8rem}
.wa{position:fixed;right:1.2rem;bottom:1.2rem;z-index:30;background:var(--hijau);color:#fff;padding:.8rem 1.3rem;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(14,40,50,.2);transition:transform .3s var(--ease)}
.wa:hover{transform:translateY(-3px)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.card.reveal.in:hover{transform:translateY(-4px)}

/* Menu atas berubah menjadi tombol garis tiga sampai lebar 1100px, karena menunya tidak muat satu baris di layar lebih kecil */
@media (max-width:1100px){
  .burger{display:block}
  .menu{position:fixed;top:0;left:0;right:0;flex-direction:column;align-items:flex-start;padding:5rem 2rem 2rem;background:var(--pasir);gap:1.2rem;transform:translateY(-110%);transition:transform .4s;box-shadow:0 12px 30px rgba(0,0,0,.12)}
  .menu.open{transform:none}
  .menu a:not(.btn){color:var(--ink)!important}
}
/* Laptop kecil: jarak antarmenu dirapatkan dan nama menu tidak boleh terlipat */
@media (min-width:1101px){.menu>a,.m-drop-kepala>a{white-space:nowrap}}
@media (min-width:1101px) and (max-width:1320px){.menu{gap:1rem}.menu>a,.m-drop-kepala>a{font-size:.95rem}}
@media (max-width:820px){
  .facts{grid-template-columns:1fr;margin:-2rem 1rem 0}
  .split,.row{grid-template-columns:1fr;gap:2rem}
  .sun{left:50%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sun{opacity:1;transform:none}.reveal{opacity:1;transform:none}.boat{left:60%}
}

.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.06)}
.card-img.has-img::before{display:none}
.card-img.has-img span{z-index:1}

/* Slideshow hero */
.hero.has-slides .sun,.hero.has-slides .boat{display:none}
.hero.has-slides .wave{z-index:1}
.slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1);
  transition:opacity 2.4s ease,transform 0s 2.4s}
.slide.on{opacity:1;transform:scale(1.03);transition:opacity 2.4s ease,transform 12s linear}
.hero{--oren:.0;--gelap:.75}
/* Lapisan gelap: pekat di kiri (tempat tulisan), memudar ke kanan agar foto tetap terlihat */
.slides::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(12,40,52,var(--gelap)) 0%,rgba(12,40,52,calc(var(--gelap) * .7)) 40%,rgba(12,40,52,0) 80%),
    linear-gradient(180deg,rgba(210,83,58,var(--oren)),rgba(242,189,59,var(--oren)) 55%,rgba(27,85,102,.55))}
.slide-cap{color:#FFFDF8;text-decoration:none;
  font-weight:600;padding:.45rem 1rem;border-radius:999px;background:rgba(14,40,50,.35);backdrop-filter:blur(6px);
  transition:opacity .6s,background .2s}
.slide-cap:hover{background:rgba(14,40,50,.55)}
.slide-cap.swap{opacity:0}
@media (max-width:820px){
  .slide-cap{font-size:.9rem}
  /* Di HP tulisan memenuhi lebar layar, jadi lapisan gelap dibuat rata */
  .slides::after{background:linear-gradient(180deg,rgba(12,40,52,.5),rgba(12,40,52,.68) 60%,rgba(27,85,102,.75))}
}