/* style.css — gaya kustom di luar utilitas Tailwind (tetap offline) */
html {
  scroll-behavior: auto; /* smooth terprogram via JS (satu sumber easing) */
  scrollbar-width: none; /* Firefox: hilangkan scrollbar bawaan */
}
::-webkit-scrollbar { display: none; } /* Chrome/Edge/Safari: hilangkan scrollbar */
body { overscroll-behavior-y: none; }

#ocean-bg {
  position: fixed; inset: 0; z-index: -2;
  contain: strict;
  background: linear-gradient(to bottom, #7dd3fc 0%, #0369a1 100%);
}
/* Langit dermaga: menutup laut saat di atas garis air, memudar saat masuk laut */
#sky-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #7dd3fc 0%, #bae6fd 45%, #fef3c7 70%, #38bdf8 100%);
  opacity: 1;
}
/* ===== Scene dermaga (ilustrasi custom seirama kapal selam) ===== */
/* Hero full-bleed: keluar dari padding/kolom main, selebar viewport */
#dermaga { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
#dermaga .sun {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, #fef9c3, #facc15 65%, #f59e0b);
  box-shadow: 0 0 50px 14px rgba(250,204,21,.5);
}
#dermaga .cloud {
  position: absolute; background: #fff; border-radius: 9999px; opacity: .9;
  animation: cloud-drift 9s ease-in-out infinite alternate;
}
#dermaga .cloud::before, #dermaga .cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 9999px;
}
#dermaga .cloud.c1 { top: 120px; left: 6%; width: 120px; height: 34px; }
#dermaga .cloud.c1::before { width: 52px; height: 52px; top: -24px; left: 18px; }
#dermaga .cloud.c1::after { width: 36px; height: 36px; top: -15px; left: 62px; }
#dermaga .cloud.c2 { top: 180px; left: 62%; width: 90px; height: 26px; animation-duration: 11s; opacity: .8; }
#dermaga .cloud.c2::before { width: 40px; height: 40px; top: -18px; left: 14px; }
#dermaga .cloud.c2::after { width: 28px; height: 28px; top: -11px; left: 48px; }
#dermaga .cloud.c3 { top: 66px; left: 30%; width: 70px; height: 22px; animation-duration: 13s; opacity: .7; }
#dermaga .cloud.c3::before { width: 32px; height: 32px; top: -14px; left: 12px; }
#dermaga .cloud.c3::after { width: 22px; height: 22px; top: -9px; left: 38px; }
#dermaga .gull { position: absolute; width: 44px; animation: gull-glide 9s ease-in-out infinite; }
#dermaga .gull.g1 { top: 170px; left: 10%; }
#dermaga .gull.g2 { top: 108px; left: 50%; width: 28px; margin-left: -14px; animation-delay: -3s; }
#dermaga .gull.g3 { top: 170px; right: 10%; width: 40px; animation-delay: -6s; }
#dermaga .sea-horizon {
  position: absolute; left: 0; right: 0; bottom: 60px;
  height: 105px;
  background: linear-gradient(to bottom, #0284c7 0%, #0369a1 55%, #082f49 100%);
}
/* Garis air tegas: strip buih tepat di permukaan (165px dari bawah) */
#dermaga .sea-foam {
  position: absolute; left: 0; right: 0; bottom: 158px; height: 14px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.75) 55%, rgba(255,255,255,.9));
}
#dermaga .sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(to bottom, #fde68a, #f59e0b);
}
/* Panggung ilustrasi: SATU blok terpusat selaras kolom teks (padding simetris).
   In-flow (margin auto) sehingga tak pernah menumpuk teks; skala seragam
   via zoom di layar sempit agar proporsi tali/kapal selalu pas. */
#dermaga .dock-stage {
  position: relative; z-index: 5;
  width: min(600px, 94%); margin: 2rem auto 5rem;
}
#dermaga .dock-scale { position: relative; width: 600px; height: 250px; margin: 0 auto; }
@media (max-width: 700px) { #dermaga .dock-scale { zoom: 0.78; } }
@media (max-width: 430px) {
  #dermaga .dock-scale { zoom: 0.55; }
  /* Kompresi hero HP: hemat ±60px agar pantai muat selayar */
  #dermaga .gull.g2 { display: none; }
  #dermaga .sun { width: 48px; height: 48px; }
  #dermaga .dock-stage { margin: 1rem auto 4rem; }
}
/* Fallback browser sangat lama tanpa dukungan `zoom`: skala via transform
   + kompensasi tinggi agar panggung tak menutupi teks */
@supports not (zoom: 1) {
  @media (max-width: 700px) {
    #dermaga .dock-scale { zoom: unset; transform: scale(0.78); transform-origin: bottom center; margin-bottom: -55px; }
  }
  @media (max-width: 430px) {
    #dermaga .dock-scale { transform: scale(0.55); margin-bottom: -112px; }
  }
}
#dermaga .pier { position: absolute; left: 0; bottom: 28px; width: 336px; height: 90px; }
#dermaga .pier-deck {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #92400e 0 26px, #78350f 26px 30px);
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
}
#dermaga .pier-post { position: absolute; top: 22px; width: 16px; height: 68px; background: #57370f; border-radius: 3px; }
#dermaga .pier-post.p1 { left: 8%; } #dermaga .pier-post.p2 { left: 48%; } #dermaga .pier-post.p3 { left: 88%; }
#dermaga .pier-sign {
  position: absolute; top: -46px; left: 6%;
  background: #78350f; color: #fef3c7; font-weight: 800; font-size: 12px; letter-spacing: .18em;
  padding: 6px 12px; border-radius: 6px; border: 2px solid #451a03;
  transform: rotate(-2deg);
}
#dermaga .dock-sub { position: absolute; right: 0; bottom: -24px; width: 312px; animation: dock-bob 4.5s ease-in-out infinite; }
/* Buih di bawah lambung: di dalam kanvas skala, selalu sejajar kapal */
#dermaga .hull-foam {
  position: absolute; left: 25%; bottom: 14px; width: 50%; height: 24px;
  border-radius: 9999px; background: rgba(255,255,255,.45); filter: blur(2px);
}
/* Tali tambat: koordinat tetap dalam kanvas 600px (ikut zoom) —
   ujung dek (336,112) tepat ke haluan (296,108) */
#dermaga .dock-stage .rope { position: absolute; left: 276px; bottom: 98px; width: 90px; }
#dermaga .shore-waves {
  position: absolute; left: 0; right: 0; bottom: 64px; height: 26px;
  background: radial-gradient(circle at 20px -6px, transparent 22px, rgba(255,255,255,.85) 23px, rgba(255,255,255,.85) 26px, transparent 27px);
  background-size: 56px 26px; background-repeat: repeat-x;
  animation: shore-slide 5s linear infinite;
}
@keyframes cloud-drift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes gull-glide { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(46px,-18px); } }
@keyframes dock-bob { 0%, 100% { transform: translateY(-5px) rotate(-1deg); } 50% { transform: translateY(6px) rotate(1.2deg); } }
@keyframes shore-slide { from { background-position-x: 0; } to { background-position-x: 56px; } }
#vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute; bottom: -20px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.5);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%);
  animation: float-bubble linear infinite;
}
.marine-snow {
  position: absolute; border-radius: 9999px; background: rgba(255,255,255,.7);
  animation: float-bubble linear infinite;
}

/* Kapal selam: outer (#submarine) untuk drag+tilt, inner (#sub-visual) untuk bob */
#submarine { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: rotate(var(--sub-tilt, 0deg)); transition: transform .25s ease; }
#submarine:active { cursor: grabbing; }
#submarine:hover #sub-visual { filter: brightness(1.15) drop-shadow(0 0 12px rgba(250,204,21,.8)); }
#sub-visual { animation: sub-bob var(--bob-dur, 4s) ease-in-out infinite; }
#sub-track { touch-action: none; user-select: none; -webkit-user-select: none; }
#sub-thumb { transition: none; will-change: transform; }
#sub-tip {
  transition: opacity .15s ease;
  max-width: 12rem;
}

/* Kartu: overflow terlihat (jangan potong ikan yang berjelajah keluar kotak).
   Hemat GPU via class .offscreen (IntersectionObserver), bukan containment. */
.creature { transition: transform .2s ease; overflow: visible; }
.creature-anim { will-change: transform; }
.creature:hover, .creature:focus-visible { transform: scale(1.06); z-index: 30;
  filter: brightness(1.2) drop-shadow(0 0 14px rgba(125,211,252,.9)); }
.creature .glow-dot { animation: glow-pulse 2.2s ease-in-out infinite; }
.creature .flip { display: inline-block; transform: scaleX(-1); }
/* Jelajah bebas JS: wajah untuk flip dinamis; matikan animasi CSS saat JS aktif */
.face { display: inline-block; will-change: transform; }
.face.back { transform: scaleX(-1); }
.wander-on .creature-anim { animation: none !important; }
/* chip ringkas: tanpa containment agar jelajah tak terpotong */
/* ===== Larut ke laut: tanpa panel — aura + label per zona ===== */
.sea-life { background: transparent; border: none; padding: 12px; }
.sea-life .aura {
  display: inline-block; border-radius: 9999px; padding: 0.35em;
  transition: filter .25s ease, background .25s ease;
}
.sea-life:hover .aura, .sea-life:focus-visible .aura { filter: brightness(1.18); }
.sea-life .sl-nama, .sea-life .sl-latin, .sea-life .sl-depth, .sea-life .sl-mark { text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); }
.sea-life .sl-latin { opacity: .8; }
.sea-life .sl-depth { opacity: .65; }
.sea-life .sl-mark { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; margin-top: 4px; }
.sea-life .mark-land { color: #fde68a; }
.sea-life .mark-dive { color: #a5f3fc; }
/* Cahaya: air terang → teks gelap, aura terang lembut */
.zona-cahaya .aura { background: radial-gradient(circle, rgba(255,255,255,.6), transparent 70%); }
.zona-cahaya .sl-nama { color: #0c4a6e; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.zona-cahaya .sl-latin { color: #155e75; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.zona-cahaya .sl-depth { color: #334155; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.zona-cahaya .mark-land { color: #92400e; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.zona-cahaya .mark-dive { color: #0e7490; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
/* Senja: ungu redup */
.zona-senja .aura { background: radial-gradient(circle, rgba(196,181,253,.28), transparent 70%); }
.zona-senja .sl-nama { color: #f5f3ff; }
.zona-senja .sl-latin { color: #ddd6fe; }
.zona-senja .sl-depth { color: #c4b5fd; }
/* Tengah malam: bioluminescent — ikon bercahaya permanen */
.zona-tengah .aura { background: radial-gradient(circle, rgba(103,232,249,.22), transparent 70%); }
.zona-tengah .aura img.tw { filter: drop-shadow(0 0 10px rgba(103,232,249,.75)); }
.zona-tengah:hover .aura img.tw { filter: drop-shadow(0 0 18px rgba(103,232,249,.95)); }
.zona-tengah .sl-nama { color: #ecfeff; }
.zona-tengah .sl-latin { color: #a5f3fc; }
.zona-tengah .sl-depth { color: #67e8f9; }
/* Abisal: sangat tipis, abu-biru */
.zona-abisal .aura { background: radial-gradient(circle, rgba(148,163,184,.16), transparent 70%); }
.zona-abisal .sl-nama { color: #e2e8f0; }
.zona-abisal .sl-latin { color: #94a3b8; }
.zona-abisal .sl-depth { color: #64748b; }
/* Hadal: nyaris siluet */
.zona-hadal .aura { background: radial-gradient(circle, rgba(148,163,184,.1), transparent 70%); }
.zona-hadal .aura img.tw { filter: brightness(.85); }
.zona-hadal .sl-nama { color: #cbd5e1; }
.zona-hadal .sl-latin { color: #64748b; }
.zona-hadal .sl-depth { color: #475569; }
/* Landmark: penanda garis putus-putus (bukan kartu) */
.sea-life.is-landmark .aura { border: 1px dashed rgba(252,211,77,.55); border-radius: 1.2rem; padding: 0.5em 0.7em; }
/* kartu di luar viewport: animasi mati total (diatur IntersectionObserver) */
.creature .offscreen, .creature .offscreen * { animation-play-state: paused !important; }
.depth-tick { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }

.zone-label { opacity: .25; transition: opacity .6s ease, transform .6s ease; }
.zone-label.active { opacity: 1; transform: scale(1.02); }
/* Banner batas zona: badge terpusat + garis, di kedalaman eksak */
.zone-boundary {
  position: absolute; left: 0; right: 0; z-index: 1;
  text-align: center; pointer-events: none;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255,255,255,.25);
}
.zone-boundary .zone-burst {
  display: inline-block;
  font-weight: 800; font-size: 1.25rem; line-height: 1.3;
  background: rgba(2,6,23,.72); border: 1px solid rgba(255,255,255,.18);
  border-radius: 9999px; padding: 0.4rem 1.1rem;
}
.zone-boundary .zone-sub { margin-top: 0.35rem; font-size: 0.75rem; color: rgba(255,255,255,.7); }

#tooltip {
  transition: opacity .15s ease;
  max-width: min(22rem, 80vw);
}
/* Dropdown audio custom: senada tombol cyan */
#audio-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 13rem;
  background: #67e8f9;
  border-radius: 1rem;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  padding: 6px;
}
#audio-list.open { animation: audio-pop 0.12s ease-out; }
@keyframes audio-pop {
  from { transform: translateY(-4px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.audio-opt {
  display: block; width: 100%; text-align: left;
  border-radius: 0.7rem; padding: 8px 10px;
  color: #083344;
}
.audio-opt:hover, .audio-opt:focus-visible { background: #a5f3fc; outline: none; }
.audio-opt.on { background: #0e7490; }
.audio-opt.on:hover { background: #155e75; }
.audio-opt-t { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; }
.audio-opt.on .audio-opt-t { color: #fff; }
.audio-opt-d { display: block; font-size: 11px; opacity: .75; }
.audio-opt.on .audio-opt-d { color: #cffafe; }
.audio-check { visibility: hidden; font-weight: 800; }
.audio-opt.on .audio-check { visibility: visible; }
.audio-chev { font-size: 10px; transition: transform .15s ease; }
#audio-btn[aria-expanded="true"] .audio-chev { transform: rotate(180deg); }
/* Kursor kapal selam: panah asli disembunyikan hanya saat mode aktif */
html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }
#cursor-sub {
  position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none;
  width: 52px; opacity: 0; transition: opacity .25s ease;
  will-change: transform;
}
#cursor-sub.on { opacity: 1; }
#cursor-sub svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); will-change: transform; }
#cursor-sub.hot svg { filter: brightness(1.2) drop-shadow(0 0 12px rgba(250,204,21,.9)); }
#cursor-sub.dive svg { filter: brightness(1.3) drop-shadow(0 0 14px rgba(103,232,249,.9)); }
#cursor-bubbles { position: fixed; inset: 0; z-index: 9989; pointer-events: none; overflow: hidden; }
.cursor-bubble {
  position: absolute; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 60%);
  animation: cursor-bubble-rise .8s ease-out forwards;
}
@keyframes cursor-bubble-rise {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  to { transform: translate3d(-10px, -46px, 0) scale(1.35); opacity: 0; }
}

/* Ikon Twemoji lokal: menskala mengikuti font-size induk (1em) */
.tw { width: 1em; height: 1em; vertical-align: -0.12em; display: inline-block; }
.tw-btn { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.tw-h { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.tw-xl { width: 1em; height: 1em; vertical-align: -0.12em; margin: 0 .06em; }

/* Modal fakta: terpusat di desktop (kembalikan margin auto yang di-reset
   preflight Tailwind), bottom-sheet di HP. */
#modal {
  margin: auto;
  max-height: min(88vh, 640px);
}
#modal[open] { animation: modal-in 0.18s ease-out; }
#modal .modal-body { overflow-y: auto; max-height: inherit; }
@keyframes modal-in {
  from { transform: translateY(10px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (max-width: 640px) {
  #modal {
    margin: auto auto 0;
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  #modal[open] { animation: sheet-in 0.22s ease-out; }
  @keyframes sheet-in {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}
/* Kunci scroll latar saat modal terbuka */
body.modal-open { overflow: hidden; }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }

@media (prefers-reduced-motion: reduce) {
  .creature-anim, #sub-visual, .bubble, .marine-snow, .cursor-bubble,
  #dermaga .cloud, #dermaga .gull, #dermaga .dock-sub, #dermaga .shore-waves,
  #modal[open], #audio-list.open { animation: none !important; }
  html { scroll-behavior: auto; }
}