/* 01 · #pembuka (milik S1; contoh rujukan dari agen F). Semua pemilih diawali #pembuka atau .pb__ */

/* Petunjuk tombol (s0) dan kalimat pendukung (s1) berbagi tempat */
#pembuka .pb__bawah > * { margin: 0; align-self: start; }
#pembuka .pb__bawah { margin-top: calc(var(--u) * .2); }

/* Peta: redup ±30% di s0, cerah penuh di s1 */
#pembuka .pb__peta .peta-dasar__svg { filter: brightness(.68) saturate(.9); transition: filter 1.2s var(--ease) .35s; }
#pembuka[data-state="1"] .pb__peta .peta-dasar__svg { filter: none; }

/* Pudaran tepi mosaik (kotak seukuran gambar dasar, dari JS). Warna = latar .peta-dasar di base.css,
   sama dengan #sensor, supaya peta larut ke latar tanpa tepi persegi */
#pembuka .pb__tepi {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; width: 0; height: 0;
  box-shadow: inset 0 0 calc(var(--u) * 4.4) calc(var(--u) * 4.6) #0a0e13;   /* sebar ≥ blur: tepi luar pekat, tanpa garis */
}
.pb--tanpa-citra .pb__tepi { display: none; }

/* Batas kabupaten: garis tipis abu, muncul setelah garis amber */
#pembuka .pb__kab path { fill: none; stroke: rgba(201, 209, 217, .6); stroke-width: 1; opacity: 0; transition: opacity .9s var(--ease) .9s; }
#pembuka[data-state="1"] .pb__kab path { opacity: 1; }

/* Enam label sistem sumber */
.pb__sistem { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pb__sistem li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .6em; white-space: nowrap;
  font-size: max(14px, calc(var(--u) * .9)); font-weight: 600; line-height: 1.2; color: var(--text-primary);
  padding: .42em .85em .42em .75em; border-radius: 999px;
  background: rgba(13, 17, 23, .8); border: 1px solid rgba(139, 148, 158, .3);
  transition: border-color .6s var(--ease);
}
.pb__sistem i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); animation: pb-denyut 2.8s ease-in-out infinite; animation-delay: calc(var(--k) * -.47s); }
#pembuka[data-state="1"] .pb__sistem li { border-color: rgba(245, 158, 11, .55); }
#pembuka[data-state="1"] .pb__sistem i { background: var(--accent); animation: none; }
@keyframes pb-denyut { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Garis amber ke pusat peta (digambar di s1) */
.pb__garis { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.pb__garis path { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset 1s var(--ease); }
.pb__pusat, .pb__pusat-cincin { opacity: 0; transition: opacity .5s var(--ease) .85s; }
.pb__pusat { fill: var(--accent); }
.pb__pusat-cincin { fill: none; stroke: var(--accent); stroke-width: 1; }
#pembuka[data-state="1"] .pb__garis path { stroke-dashoffset: 0; }
#pembuka[data-state="1"] .pb__pusat, #pembuka[data-state="1"] .pb__pusat-cincin { opacity: 1; }

/* Atribusi citra pojok kiri bawah; disembunyikan bila gambar dasar belum ada */
.pb__atribusi { position: absolute; left: var(--gutter); bottom: 4.2vh; z-index: 4; }
.pb--tanpa-citra .pb__atribusi { display: none; }

@media (max-width: 860px) {
  .pb__sistem { position: absolute; }
  .pb__sistem li { font-size: 13px; }
  .pb__garis { display: none; }
}