:root {
  --sea: #0A5C8A;
  --sea-dark: #063F60;
  --sky: #2FA8DE;
  --sun: #F5A623;
  --ink: #10222E;
  --muted: #5E7485;
  --bg: #F5FAFD;
  --line: #DEEBF3;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.container { max-width: 1060px; margin: 0 auto; padding: 0 1.25rem; }
img { max-width: 100%; }

header { position: sticky; top: 0; z-index: 50; background: rgba(245,250,253,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { font-weight: 800; font-size: 1.15rem; color: var(--sea); text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--sun); }
.nav-links { display: flex; gap: 1.2rem; align-items: center; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600; padding-bottom: 2px; }
.nav-links a.active { color: var(--sea); border-bottom: 2px solid var(--sun); }
.nav-links a:hover { color: var(--sea); }
@media (max-width: 720px) { .nav-links a:not(.btn) { font-size: .78rem; } .nav-links { gap: .7rem; } }

.btn { display: inline-flex; align-items: center; gap: .45rem; padding: .68rem 1.3rem; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: .93rem; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-wa { background: #22C15E; color: #fff !important; border-bottom: none !important; box-shadow: 0 6px 18px rgba(34,193,94,.3); }
.btn-sun { background: var(--sun); color: #3A2A05 !important; }

.hero { color: #fff; text-align: center; padding: 6.5rem 1.25rem; background-position: center; background-size: cover; }
.hero.small { padding: 4.2rem 1.25rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .9rem; }
.hero p { max-width: 600px; margin: 0 auto 1.7rem; color: #D7EDF8; font-size: 1.05rem; }
.hero .badges { margin-top: 1.5rem; display: flex; gap: 1.3rem; justify-content: center; flex-wrap: wrap; font-size: .85rem; color: #BFE3F5; font-weight: 600; }

section { padding: 3.6rem 0; }
.section-title { text-align: center; font-size: 1.7rem; font-weight: 800; color: var(--sea-dark); letter-spacing: -.02em; margin-bottom: .4rem; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 2.3rem; }

.tours { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.3rem; }
.tour { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(6,63,96,.05), 0 6px 18px rgba(6,63,96,.06); transition: transform .18s, box-shadow .18s; }
.tour:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(6,63,96,.06), 0 14px 34px rgba(6,63,96,.12); }
.tour .visual { height: 150px; background-position: center; background-size: cover; }
.tour .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.tour h3 { color: var(--sea-dark); font-weight: 700; margin-bottom: .35rem; }
.tour .meta { font-size: .8rem; color: var(--muted); margin-bottom: .6rem; font-weight: 600; }
.tour p { font-size: .9rem; color: var(--muted); flex: 1; }
.tour .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.tour .price { font-size: 1.25rem; font-weight: 800; color: var(--sea); }
.tour .price small { font-size: .76rem; color: var(--muted); font-weight: 600; }
.tour .book { font-size: .84rem; font-weight: 700; color: #fff; background: var(--sea); padding: .5rem 1rem; border-radius: 999px; text-decoration: none; }
.tour .book:hover { background: var(--sea-dark); }

.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.why .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; text-align: center; box-shadow: 0 1px 2px rgba(6,63,96,.05), 0 6px 18px rgba(6,63,96,.06); }
.why .ic { font-size: 1.7rem; margin-bottom: .5rem; }
.why h3 { font-size: 1rem; font-weight: 700; color: var(--sea-dark); margin-bottom: .3rem; }
.why p { font-size: .89rem; color: var(--muted); }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; text-align: center; box-shadow: 0 1px 2px rgba(6,63,96,.05), 0 6px 18px rgba(6,63,96,.06); }
.info-card .ic { font-size: 1.7rem; margin-bottom: .5rem; }
.info-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; color: var(--sea-dark); }
.info-card p { font-size: .9rem; color: var(--muted); }
.map-wrap { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin-top: 2rem; }
.map-wrap iframe { display: block; width: 100%; height: 340px; border: 0; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.gallery img { aspect-ratio: 4/3; width: 100%; object-fit: cover; border-radius: 14px; display: block; transition: transform .2s; }
.gallery img:hover { transform: scale(1.02); }

.transfer { background: linear-gradient(120deg, var(--sea-dark), var(--sea)); color: #fff; border-radius: 18px; padding: 2.4rem 2rem; display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: space-between; }
.transfer h2 { font-weight: 800; letter-spacing: -.01em; margin-bottom: .4rem; }
.transfer p { color: #C9E6F5; max-width: 520px; font-size: .95rem; }

footer { text-align: center; padding: 2.2rem 1rem; color: var(--muted); font-size: .87rem; }
footer .demo-note { margin-top: .6rem; font-size: .8rem; }
footer .demo-note a { color: var(--sea); }

/* AI Asistan Widget */
#fw-chat-btn { position: fixed; right: 22px; bottom: 22px; z-index: 90; background: var(--sea); color: #fff; border: none; cursor: pointer; border-radius: 999px; padding: .85rem 1.3rem; font-family: inherit; font-weight: 700; font-size: .95rem; box-shadow: 0 8px 24px rgba(6,63,96,.4); display: flex; align-items: center; gap: .5rem; }
#fw-chat-btn:hover { transform: translateY(-2px); }
#fw-chat { position: fixed; right: 22px; bottom: 90px; z-index: 95; width: min(360px, calc(100vw - 44px)); background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(6,63,96,.32); display: none; flex-direction: column; overflow: hidden; font-family: inherit; }
#fw-chat.open { display: flex; }
#fw-chat .head { background: var(--sea); color: #fff; padding: .9rem 1.1rem; }
#fw-chat .head b { display: block; font-size: .98rem; }
#fw-chat .head small { color: #C9E6F5; font-size: .76rem; }
#fw-msgs { padding: 1rem; height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; background: var(--bg); }
.fw-m { max-width: 85%; padding: .55rem .85rem; border-radius: 14px; font-size: .88rem; line-height: 1.45; }
.fw-bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.fw-user { background: var(--sea); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
#fw-quick { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem 1rem; background: #fff; border-top: 1px solid var(--line); }
#fw-quick button { border: 1.5px solid var(--sea); color: var(--sea); background: #fff; cursor: pointer; border-radius: 999px; padding: .4rem .85rem; font-size: .8rem; font-family: inherit; font-weight: 700; }
#fw-quick button:hover { background: var(--sea); color: #fff; }
.fw-badge { text-align: center; font-size: .7rem; color: var(--muted); padding: .45rem; background: #fff; }
.fw-badge a { color: var(--sea); }