/* 11 · #laut (milik S2). Semua pemilih diawali #laut atau .lt__ */

#laut .swap > * { align-self: start; }
html:not(.is-static) #laut .lt__narasi .swap { position: relative; }
html:not(.is-static) #laut .lt__narasi .swap > :not(.on) { position: absolute; left: 0; right: 0; top: 0; }
#laut .lt__jam-teks { font-size: .95em; font-weight: 600; color: var(--c-fg); }

/* Dua peta bertumpuk: Teluk Kelabat (s0) dan perairan IUP 1545 (s1–s2) */
#laut .lt__kelabat, #laut .lt__ais { transition: opacity .9s var(--ease); }
#laut .lt__ais { opacity: 0; background: transparent; }
#laut .lt__latar {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; pointer-events: none;
  filter: blur(30px) brightness(.72) saturate(.9); opacity: 0; transition: opacity .9s var(--ease);
}
#laut[data-state="1"] .lt__latar, #laut[data-state="2"] .lt__latar, #laut .lt--tanpa-s0 .lt__latar { opacity: 1; }
#laut[data-state="1"] .lt__ais, #laut[data-state="2"] .lt__ais, #laut .lt--tanpa-s0 .lt__ais { opacity: 1; }
#laut[data-state="1"] .lt__kelabat, #laut[data-state="2"] .lt__kelabat, #laut .lt--tanpa-s0 .lt__kelabat { opacity: 0; }
/* Citra dasar sebagai <img> ber-transform di bawah SVG vektor (JS cermin); <image> SVG mesin disembunyikan */
#laut .lt--cermin .peta-dasar__citra { display: none; }
#laut .lt__citra { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
#laut .lt--cermin .peta-dasar__svg { z-index: 1; }
#laut .lt__iup-poli { fill: var(--kat-iup-laut); fill-opacity: .1; stroke: var(--kat-iup-laut); stroke-width: 1.5; stroke-linejoin: round; }

/* s0: deteksi (titik putih) lalu 16 temuan utama */
#laut .lt__deteksi path { fill: none; stroke: rgba(230, 237, 243, .82); stroke-width: 3.4; stroke-linecap: round; }
#laut .lt__deteksi, #laut .lt__utama { opacity: 0; transition: opacity .7s var(--ease); }
#laut[data-state="0"] .lt__deteksi { opacity: 1; transition-delay: .2s; }
#laut[data-state="0"] .lt__utama { opacity: 1; transition-delay: .9s; }
#laut .lt__ponton path { fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-width: 2.2; }
#laut .lt__keruh path { fill: var(--info); fill-opacity: .1; stroke: var(--info); stroke-width: 1.3; }
#laut .lt__luar path { stroke: var(--alert); }
#laut .lt__l0001-tanda path { stroke-width: 3; fill-opacity: .28; }

/* Legenda (kiri bawah) */
#laut .lt__kartu {
  position: absolute; z-index: 4; margin: 0;
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#laut .lt__legenda { left: var(--gutter); bottom: 6vh; padding: calc(var(--u) * 1) calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
#laut .lt__legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .45); }
#laut .lt__legenda li { display: flex; align-items: center; gap: .6em; font-size: var(--fs-label); font-weight: 600; color: var(--c-fg); white-space: nowrap; }
#laut .lt__ikon-ponton { fill: rgba(245, 158, 11, .14); stroke: var(--accent); stroke-width: 2; }
#laut .lt__ikon-keruh { fill: rgba(56, 189, 248, .1); stroke: var(--info); stroke-width: 1.4; }
#laut .lt__legenda .label-data { align-self: flex-start; gap: .55em; }
#laut .lt__legenda .label-data::before { display: none; }
#laut .lt__garis-iup { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--kat-iup-laut); }

/* Kartu LAUT-0001 (kanan atas) + garis penunjuk */
#laut .lt__l0001 { right: var(--gutter); top: calc(var(--nav-h) + 3vh); width: calc(var(--u) * 19); overflow: hidden; }
#laut .lt__l0001.on { transition-delay: 1.3s; }
#laut .lt__l0001 img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #0a0e13; }
#laut .lt__l0001 figcaption { padding: calc(var(--u) * .7) calc(var(--u) * .9) calc(var(--u) * .8); }
#laut .lt__l0001 p { margin: 0; font-size: var(--fs-label); line-height: 1.35; }
#laut .lt__l0001-a { color: var(--c-fg-2); }
#laut .lt__l0001-a b { color: var(--c-fg); font-weight: 600; }
#laut .lt__l0001-b { margin-top: 4px !important; font-weight: 600; color: var(--c-accent); }
#laut .lt__penunjuk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .6s var(--ease); }
#laut .lt__penunjuk path { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 4 4; }
#laut[data-state="0"] .lt__penunjuk { opacity: .9; transition-delay: 1.6s; }
.is-static #laut .lt__penunjuk { display: none; }

/* G-03: pembuka bab laut, letterbox 21:9, di atas peta; memudar (kelas .lt--peta) */
#laut .lt__foto { position: absolute; inset: 0; z-index: 7; border-radius: 0; background: #0b0f14; opacity: 1; visibility: visible; transition: opacity 1.2s var(--ease), visibility 0s; }
#laut .lt__foto img { object-fit: contain; }
#laut .lt__foto .foto-ai__label { left: var(--gutter); bottom: calc((100% - 100vw * 1097 / 2560) / 2 + var(--u) * .9); }
#laut .lt--peta .lt__foto { opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 0s 1.2s; }
/* Label «Ilustrasi» hilang lebih dulu (.25 dtk); legenda dan kartu s0 baru muncul setelahnya, jadi keduanya tidak pernah bertumpuk */
#laut .lt__foto .foto-ai__label { transition: opacity .25s var(--ease); }
#laut .lt--peta .lt__foto .foto-ai__label { opacity: 0; }
#laut .lt__panel:not(.lt--peta) .lt__legenda.on { opacity: 0; transition: none; }
#laut .lt--peta .lt__legenda.on { transition: opacity var(--t) var(--ease) .45s, transform var(--t) var(--ease) .45s; }

/* s1–s2: putar ulang AIS */
#laut .lt__cincin ellipse { fill: var(--alert); fill-opacity: .07; stroke: var(--alert); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .5s var(--ease); }
#laut .lt--cincin .lt__cincin ellipse { opacity: 1; }
#laut .lt--alert .lt__cincin ellipse { animation: lt-denyut .62s ease-in-out 2; }
@keyframes lt-denyut { 0%, 100% { stroke-width: 2; fill-opacity: .07; } 50% { stroke-width: 5; fill-opacity: .26; } }
#laut .lt__jejak path { fill: none; stroke: var(--alert); stroke-opacity: .75; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#laut .lt__jejak { opacity: 0; transition: opacity .5s; }
#laut[data-state="1"] .lt__jejak, #laut[data-state="2"] .lt__jejak { opacity: 1; }
#laut .lt__ikon { position: absolute; left: 0; top: 0; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
#laut .lt__ikon svg { display: block; overflow: visible; }
#laut .lt__ikon--kip path { fill: var(--info); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
#laut .lt__ikon--asing path { fill: var(--alert); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
#laut[data-state="1"] .lt__ikon, #laut[data-state="2"] .lt__ikon { opacity: 1; }
#laut .lt__nama {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; white-space: nowrap;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: var(--text-primary);
  padding: .16em .5em .18em; border-radius: 5px;
  background: rgba(13, 17, 23, .8); border: 1px solid rgba(230, 237, 243, .16);
  will-change: transform;
}
#laut .lt__nama--asing { color: #fecaca; border-color: rgba(248, 113, 113, .45); }
#laut .lt__ikon { will-change: transform; }
#laut .lt__hud {
  position: absolute; z-index: 5; right: var(--gutter); top: calc(var(--nav-h) + 3vh);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  padding: calc(var(--u) * .7) calc(var(--u) * 1); border-radius: 12px; background: var(--c-panel); border: 1px solid var(--c-line);
}
#laut .lt__jam { font-size: calc(var(--u) * 2.5); font-weight: 600; line-height: 1; color: var(--c-fg); letter-spacing: .01em; transition: color .4s; }
#laut .lt--alert .lt__jam { color: var(--alert); }
#laut .lt__waktu { position: relative; width: calc(var(--u) * 11); height: 3px; border-radius: 2px; background: var(--c-line-2); }
#laut .lt__waktu-isi { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--text-secondary); border-radius: 2px; }
#laut .lt__waktu-tanda { position: absolute; top: -3px; width: 2px; height: 9px; margin-left: -1px; background: var(--text-muted); }
#laut .lt__waktu-tanda--alert { background: var(--alert); }
#laut .lt__label-sim { position: absolute; left: var(--gutter); bottom: 4.2vh; z-index: 5; }

/* s2: kartu alert, setelah cincin berdenyut dua kali */
#laut .lt__alert {
  position: absolute; z-index: 6; right: var(--gutter); bottom: 6vh; width: min(calc(var(--u) * 27), 46vw);
  display: flex; gap: calc(var(--u) * .8); align-items: flex-start;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2); border-radius: 12px;
  background: rgba(22, 27, 34, .94); border: 1px solid rgba(248, 113, 113, .55); box-shadow: var(--c-shadow);
}
#laut .lt__alert.on { opacity: 0; transform: translateY(8px); }
#laut .lt--alert .lt__alert.on, .is-static #laut .lt__alert { opacity: 1; transform: none; transition-delay: 1.2s; }
#laut .lt__alert svg { flex: none; margin-top: 2px; fill: none; stroke: var(--alert); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#laut .lt__alert p { margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--c-fg); font-weight: 600; }
#laut .lt__alert b { color: var(--alert); }
#laut .lt__alert-live { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-line-2); font-weight: 400; color: var(--c-fg-2); font-size: var(--fs-label); }

#laut .lt__atribusi { position: absolute; z-index: 5; right: var(--gutter); bottom: 2vh; transition: opacity .5s; }
/* Peta dasar Teluk Kelabat belum ada (kanvas cadangan): atribusi citra hanya untuk s1–s2 */
#laut[data-state="0"] .lt--kelabat-kosong .lt__atribusi { opacity: 0; }

/* Mode statis: keadaan akhir s2 (peta IUP 1545 + alert); legenda dan kartu s0 tidak menumpuk di atasnya */
.is-static #laut .lt__legenda, .is-static #laut .lt__l0001 { display: none; }

@media (max-width: 860px) {
  #laut .lt__alert, #laut .lt__legenda, #laut .lt__l0001 { position: relative; inset: auto; width: auto; margin: 16px; }
}

/* Penanda "Peta dasar menyusul" (kanvas cadangan) dipindah ke tengah atas agar tidak tertutup kartu LAUT-0001 */
#laut .lt__kelabat .peta-dasar__penanda { right: auto; left: 50%; transform: translateX(-50%); }

/* Lapisan kompositor sendiri untuk peralihan pudar (tanpa raster ulang tiap bingkai) */
#laut .lt__kelabat, #laut .lt__ais, #laut .lt__latar, #laut .lt__foto { will-change: opacity; }