/* Peta Alam: peta besar tanpa pustaka luar, kartu putih di atasnya, penanda hijau dan emas (gaya sayogya.com). */
.pa-bagian{--pa-hijau:#0a5a2e;--pa-hijau2:#0e7a3f;--pa-emas:#e8a316;--pa-emas2:#f4bd3a;--pa-tinta:#1b2a22;--pa-redup:#5b6b61;--pa-garis:#e4e8df;--pa-latar:#fff;
  position:relative;color:var(--pa-tinta);font-family:'DM Sans',sans-serif}
.pa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Peta (dipakai di beranda dan halaman penuh) ===== */
.pa-peta{position:relative;overflow:hidden;min-height:0;background:#eef1ea;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;contain:layout paint}
.pa-peta:focus-visible{box-shadow:inset 0 0 0 3px var(--pa-emas)}
.pa-peta.geser{cursor:grabbing}
.pa-peta.satelit{background:#0b1a24}
.pa-lapis{position:absolute;inset:0}
.pa-ubin{contain:strict;overflow:hidden}
.pa-ubin img{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;transform-origin:0 0;opacity:0;transition:opacity .3s ease;pointer-events:none;-webkit-user-drag:none}
.pa-ubin img.siap{opacity:1}
.pa-penanda{pointer-events:none}

/* Penanda: tetesan hijau / emas dengan ikon putih */
.pa-pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;cursor:pointer}
.pa-pin.sembunyi{display:none}
.pa-pin>button{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:grid;place-items:center;width:40px;height:40px;padding:0;border:2.5px solid #fff;border-radius:50% 50% 50% 4px;rotate:-45deg;
  background:var(--pa-hijau);color:#fff;cursor:pointer;box-shadow:0 8px 14px -6px rgba(10,40,20,.65);transition:transform .2s}
.pa-pin>button>span{rotate:45deg;display:grid;place-items:center;line-height:0}
.pa-pin>button svg{width:19px;height:19px}
.pa-pin.emas>button{background:var(--pa-emas);color:#2f2200}
.pa-pin>button:hover,.pa-pin.aktif>button{transform:translate(-50%,-100%) scale(1.14)}
.pa-pin.s>button{width:58px;height:58px;border-radius:50%;rotate:0deg;transform:translate(-50%,-50%);background:#fff;border:4px solid var(--pa-hijau);padding:6px;box-shadow:0 0 0 3px var(--pa-emas),0 10px 18px -6px rgba(10,40,20,.6)}
.pa-pin.s>button:hover,.pa-pin.s.aktif>button{transform:translate(-50%,-50%) scale(1.08)}
.pa-pin.s>button>img{width:100%;height:100%;object-fit:contain}
.pa-pin.s::before{content:"";position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:2px solid var(--pa-emas);opacity:0;animation:paDenyut 3s ease-out infinite}
.pa-peta.diam .pa-pin.s::before{animation:none}
@keyframes paDenyut{0%{transform:scale(.9);opacity:.8}100%{transform:scale(2.4);opacity:0}}
.pa-label{position:absolute;left:0;top:0;transform:translate(-50%,0);margin-top:38px;padding:.28rem .8rem;border-radius:999px;background:var(--pa-hijau);color:#fff;font:700 .74rem 'DM Sans',sans-serif;white-space:nowrap;box-shadow:0 6px 12px -6px rgba(10,40,20,.6)}

/* Popup */
.pa-popup{position:absolute;z-index:8;width:min(300px,calc(100% - 2rem));padding:1.05rem 1.15rem 1.1rem;border-radius:14px;background:#fff;color:var(--pa-tinta);border:1px solid var(--pa-garis);
  box-shadow:0 24px 40px -16px rgba(10,40,20,.5);transform:translate(-50%,calc(-100% - 56px));animation:paMuncul .25s ease both;cursor:default}
.pa-popup::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;background:#fff;transform:rotate(45deg);border-right:1px solid var(--pa-garis);border-bottom:1px solid var(--pa-garis)}
.pa-popup.sekolah{transform:translate(-50%,calc(-100% - 48px))}
@keyframes paMuncul{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.pa-popup .pa-kat{display:inline-block;margin-bottom:.45rem;padding:.12rem .6rem;border-radius:99px;background:#fdf1d3;color:#7a5200;font:700 .68rem 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pa-popup h4{margin:0 1.6rem .3rem 0;font:600 1.12rem/1.25 'Playfair Display',serif;color:var(--pa-hijau)}
.pa-popup p{margin:0;font-size:.86rem;line-height:1.55;color:var(--pa-redup)}
.pa-popup .pa-aksi{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.pa-popup .pa-tutup{position:absolute;right:.6rem;top:.6rem;width:28px;height:28px;border:0;border-radius:50%;background:#f0f3ec;color:var(--pa-tinta);font-size:1.15rem;line-height:1;cursor:pointer}

/* Tombol */
.pa-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.35rem;border-radius:999px;background:var(--pa-hijau);color:#fff;font:700 .95rem 'DM Sans',sans-serif;text-decoration:none;border:2px solid var(--pa-hijau);transition:transform .2s,background .2s}
.pa-btn:hover{background:var(--pa-hijau2);border-color:var(--pa-hijau2);transform:translateY(-2px)}
.pa-btn.kecil{padding:.45rem .95rem;font-size:.8rem;gap:.4rem}
.pa-btn.garis{background:transparent;color:var(--pa-hijau)}
.pa-btn.garis:hover{background:var(--pa-hijau);color:#fff}

/* Kontrol */
.pa-ctrl{position:absolute;z-index:4;display:flex;border-radius:12px;background:#fff;border:1px solid var(--pa-garis);box-shadow:0 10px 20px -12px rgba(10,40,20,.5);overflow:hidden}
.pa-ctrl button{display:grid;place-items:center;min-width:40px;height:40px;padding:0 .8rem;border:0;background:transparent;color:var(--pa-hijau);font:700 1.2rem 'DM Sans',sans-serif;cursor:pointer;transition:background .2s}
.pa-ctrl button:hover{background:#eef4ea}
.pa-ctrl-zoom{right:1rem;top:1rem;flex-direction:column}
.pa-ctrl-zoom button+button{border-top:1px solid var(--pa-garis)}
.pa-ctrl-gaya{right:4.2rem;top:1rem}
.pa-ctrl-gaya button{font-size:.8rem}
.pa-ctrl-gaya button[aria-pressed=true]{background:var(--pa-hijau);color:#fff}
.pa-petunjuk{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);padding:.6rem 1rem;border-radius:999px;background:#0a3b1fe6;color:#fff;font:600 .85rem 'DM Sans',sans-serif;opacity:0;pointer-events:none;transition:opacity .3s}
.pa-petunjuk.tampil{opacity:1}
.pa-atribusi{position:absolute;z-index:4;right:.6rem;bottom:.5rem;padding:.15rem .5rem;border-radius:8px;background:#ffffffd9;font:500 .68rem 'DM Sans',sans-serif;color:#51677a}
.pa-atribusi a{color:inherit}

/* ===== Beranda: peta lebar penuh dengan kartu putih di kiri ===== */
.pa-beranda{width:100%;height:clamp(600px,90vh,880px);background:#fff}
.pa-beranda .pa-peta{position:absolute;inset:0}
.pa-beranda::before,.pa-beranda::after{content:"";position:absolute;left:0;right:0;z-index:5;pointer-events:none}
.pa-beranda::before{top:0;height:150px;background:linear-gradient(#fff,rgba(255,255,255,0))}
.pa-beranda::after{bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.pa-beranda .pa-ctrl-zoom{top:auto;bottom:5.2rem}
.pa-beranda .pa-ctrl-gaya{top:auto;bottom:5.2rem;right:4.2rem}
.pa-beranda .pa-atribusi{bottom:2.6rem}
.pa-kartu-info{position:absolute;z-index:6;top:50%;transform:translateY(-50%);left:max(1.5rem,calc(50% - 590px));width:min(430px,calc(100% - 3rem));padding:clamp(1.6rem,3.2vw,2.6rem);
  background:#fff;border-radius:6px;box-shadow:0 30px 60px -30px rgba(10,40,20,.5),0 2px 10px rgba(10,40,20,.08)}
.pa-kartu-info small,.pa-samping-kepala small{display:block;margin-bottom:.9rem;font:700 .74rem 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pa-hijau)}
.pa-kartu-info h2{margin:0 0 .8rem;font:500 clamp(2rem,4vw,2.9rem)/1.1 'Playfair Display',serif;color:#14201a}
.pa-kartu-info h2 em,.pa-samping-kepala h1 em{display:block;font-style:italic;font-weight:500;color:var(--pa-hijau)}
.pa-kartu-info p{margin:0 0 1.5rem;line-height:1.7;color:var(--pa-redup)}

/* ===== Halaman penuh: panel daftar + peta besar ===== */
.pa-penuh{display:grid;grid-template-columns:minmax(310px,390px) 1fr;max-width:1520px;height:clamp(620px,calc(100vh - 96px),920px);margin:1.2rem auto 2.5rem;
  border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--pa-garis);box-shadow:0 40px 70px -45px rgba(10,40,20,.6)}
.pa-samping{display:flex;flex-direction:column;min-height:0;padding:1.6rem 1.2rem 0;background:#fff;border-right:1px solid var(--pa-garis)}
.pa-samping-kepala{padding:0 .3rem 1rem}
.pa-samping-kepala h1{margin:0 0 .6rem;font:500 clamp(1.8rem,3vw,2.4rem)/1.1 'Playfair Display',serif;color:#14201a}
.pa-samping-kepala p{margin:0;font-size:.9rem;line-height:1.6;color:var(--pa-redup)}
.pa-cari{display:flex;align-items:center;gap:.6rem;margin:0 .2rem .8rem;padding:.6rem .9rem;border:1.5px solid var(--pa-garis);border-radius:999px;background:#f8faf5;color:var(--pa-redup)}
.pa-cari:focus-within{border-color:var(--pa-hijau);background:#fff}
.pa-cari input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 .92rem 'DM Sans',sans-serif;color:var(--pa-tinta)}
.pa-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 .2rem .9rem}
.pa-chip{padding:.38rem .85rem;border:1.5px solid var(--pa-garis);border-radius:999px;background:#fff;color:var(--pa-tinta);font:700 .78rem 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pa-chip:hover{border-color:var(--pa-hijau)}
.pa-chip[aria-pressed=true]{background:var(--pa-hijau);border-color:var(--pa-hijau);color:#fff}
.pa-daftar{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0 -.4rem;padding:0 .4rem 1.2rem;display:grid;align-content:start;gap:.35rem;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9c9b9 transparent}
.pa-li[hidden]{display:none}
.pa-li-btn{display:flex;align-items:center;gap:.8rem;width:100%;padding:.65rem .7rem;border:1px solid transparent;border-radius:14px;background:transparent;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.pa-li-btn:hover{background:#f4f8f0}
.pa-li.aktif .pa-li-btn{background:#fdf6e0;border-color:var(--pa-emas)}
.pa-li-ikon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--pa-hijau);color:#fff}
.pa-li-ikon.emas{background:var(--pa-emas);color:#2f2200}
.pa-li-teks{flex:1;min-width:0}
.pa-li-teks b{display:block;font:600 .98rem 'Playfair Display',serif;color:#14201a}
.pa-li-teks small{display:block;margin-top:.1rem;font-size:.78rem;line-height:1.4;color:var(--pa-redup);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-li-panah{flex:none;color:var(--pa-hijau);opacity:.5;transition:opacity .2s,transform .2s}
.pa-li-btn:hover .pa-li-panah{opacity:1;transform:translateX(3px)}
.pa-kosong{margin:1rem .4rem;color:var(--pa-redup);font-size:.9rem}

@media(max-width:900px){
  .pa-penuh{grid-template-columns:1fr;height:auto;margin:0;border-radius:0;border-inline:0}
  .pa-penuh .pa-peta{order:-1;height:min(72vh,520px)}
  .pa-samping{border-right:0;max-height:none}
  .pa-daftar{overflow:visible}
  .pa-beranda{height:clamp(640px,92vh,820px)}
  .pa-kartu-info{top:auto;bottom:1.2rem;transform:none;left:1rem;right:1rem;width:auto;padding:1.3rem 1.3rem 1.4rem}
  .pa-kartu-info h2{font-size:1.9rem}
  .pa-kartu-info p{margin-bottom:1rem;font-size:.92rem}
  .pa-beranda .pa-ctrl-zoom{bottom:auto;top:5.5rem;right:.8rem}
  .pa-beranda .pa-ctrl-gaya{bottom:auto;top:5.5rem;right:auto;left:.8rem}
  .pa-beranda .pa-atribusi{bottom:.4rem;right:.6rem}
}
@media(max-width:640px){.pa-ctrl-zoom{top:.7rem;right:.7rem}.pa-ctrl-gaya{top:.7rem;right:auto;left:.7rem}}
@media(prefers-reduced-motion:reduce){.pa-pin.s::before{animation:none}.pa-popup{animation:none}.pa-ubin img{transition:none}}