:root { --ink:#16294d; --soft:#46587a; --c:#19a7ce; --head:'Fredoka',ui-rounded,'Trebuchet MS',sans-serif; --body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; }
* { box-sizing:border-box; margin:0; }
html,body { height:100%; overflow:hidden; background:#bfe9ff; }
body { font-family:var(--body); color:var(--ink); -webkit-font-smoothing:antialiased; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }

/* loader */
#loader { position:fixed; inset:0; z-index:90; display:grid; place-items:center; text-align:center; background:linear-gradient(#9fdcff,#eaf8ff); transition:opacity .9s, visibility .9s; }
#loader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.count { font-family:var(--head); font-weight:600; font-size:clamp(4rem,16vw,8rem); line-height:1; letter-spacing:-.03em; }
.count small { font-size:.35em; margin-left:4px; opacity:.6; }
#loader h1 { font-family:var(--head); font-weight:500; font-size:1.6rem; margin-top:8px; }
#loader .sub { margin:8px 0 28px; color:var(--soft); }
#enter { padding:14px 44px; border-radius:999px; border:2px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--head); font-weight:500; font-size:1.15rem; opacity:0; transform:translateY(8px); pointer-events:none; transition:.5s; }
#loader.ready #enter { opacity:1; transform:none; pointer-events:auto; }
#enter:hover { transform:translateY(-2px); }

/* top bar */
.top { position:fixed; z-index:40; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:16px clamp(14px,3vw,34px); pointer-events:none; }
.logo { font-family:var(--head); font-weight:600; font-size:1.35rem; text-decoration:none; pointer-events:auto; }
.top-r { display:flex; gap:8px; pointer-events:auto; }
.top-r button { padding:8px 16px; border-radius:999px; border:2px solid var(--ink); background:rgba(255,255,255,.7); backdrop-filter:blur(8px); font-weight:800; font-size:.88rem; }
.top-r button[hidden] { display:none; }
#snd[aria-pressed="true"], #menuBtn[aria-expanded="true"] { background:var(--ink); color:#fff; }

/* menu */
#menu { position:fixed; z-index:38; inset:0; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:90px clamp(24px,8vw,120px) 40px; background:rgba(234,248,255,.94); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:.35s; }
#menu.open { opacity:1; visibility:visible; }
#menu a { display:flex; align-items:baseline; gap:16px; padding:8px 0; text-decoration:none; font-family:var(--head); font-weight:600; font-size:clamp(1.8rem,5vw,3rem); border-bottom:1.5px solid rgba(22,41,77,.12); }
#menu a:hover { color:var(--c); }
#menu small { font-family:var(--body); font-weight:700; font-size:.9rem; color:var(--soft); }

/* label peta */
#pins,#fpins { position:fixed; inset:0; z-index:20; pointer-events:none; }
.pin { position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; padding:5px 14px 5px 5px; border-radius:999px; border:2px solid #fff; background:var(--c); color:#fff; font-weight:800; font-size:.92rem; white-space:nowrap; box-shadow:0 6px 18px rgba(22,41,77,.28); opacity:0; pointer-events:none; margin:-22px 0 0 0; translate:-50% -100%; transition:opacity .35s, scale .2s; }
.pin::after { content:''; position:absolute; left:50%; bottom:-9px; width:3px; height:12px; background:#fff; translate:-50% 0; }
.pin i { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; color:var(--c); font-style:normal; font-family:var(--head); font-weight:600; }
.pin.show { opacity:1; pointer-events:auto; }
.pin.hot { scale:1.12; z-index:2; }
.pin.seen i::after { content:''; }
.fpin { position:absolute; left:0; top:0; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%; border:3px solid #fff; background:var(--c); color:#fff; font-family:var(--head); font-weight:600; box-shadow:0 4px 14px rgba(22,41,77,.35); pointer-events:auto; animation:pulse 2s infinite; }
.fpin.on { background:#fff; color:var(--c); border-color:var(--c); animation:none; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.7); } 50% { box-shadow:0 0 0 10px rgba(255,255,255,0); } }

/* panel detail */
#panel { position:fixed; z-index:30; top:72px; right:clamp(12px,2.5vw,32px); bottom:92px; width:min(400px,92vw); padding:24px 24px 18px; border-radius:24px; background:rgba(255,255,255,.9); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(22,41,77,.25); overflow-y:auto; transform:translateX(120%); opacity:0; transition:.5s cubic-bezier(.2,.8,.2,1); border-top:6px solid var(--c); }
#panel.open { transform:none; opacity:1; }
.close { position:absolute; top:10px; right:14px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(22,41,77,.08); font-size:1.4rem; line-height:1; }
.num { font-family:var(--head); font-weight:500; color:var(--c); }
#panel h2,.sheet-box h2 { font-family:var(--head); font-weight:600; font-size:clamp(1.9rem,3.2vw,2.5rem); line-height:1.05; margin-top:4px; letter-spacing:-.01em; }
.lead { margin-top:8px; font-family:var(--head); font-weight:500; font-size:1.1rem; color:var(--c); }
.desc { margin-top:8px; line-height:1.6; color:var(--soft); }
#panel h3,.sheet-box h3 { margin:20px 0 8px; font-family:var(--head); font-weight:500; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); }
.feat { list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.feat li { border-radius:14px; background:rgba(22,41,77,.05); overflow:hidden; }
.feat li > button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0; background:none; text-align:left; font-weight:800; }
.feat li > button i { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--c); color:#fff; font-style:normal; font-family:var(--head); font-weight:600; font-size:.85rem; }
.feat li p { max-height:0; padding:0 14px 0 48px; overflow:hidden; line-height:1.5; font-size:.92rem; color:var(--soft); transition:max-height .35s, padding .35s; }
.feat li.open { background:rgba(22,41,77,.1); }
.feat li.open p { max-height:140px; padding:0 14px 12px 48px; }
.pn { display:flex; justify-content:space-between; gap:8px; margin-top:18px; }
.pn button { flex:1; padding:9px 10px; border-radius:12px; border:2px solid var(--ink); background:none; font-weight:800; font-size:.8rem; }
.pn button:hover { background:var(--ink); color:#fff; }

/* tombol navigasi tengah bawah */
#navBtn { position:fixed; z-index:40; left:50%; bottom:24px; translate:-50% 0; display:flex; align-items:center; gap:10px; padding:13px 28px; border-radius:999px; border:2px solid var(--ink); background:#fff; font-family:var(--head); font-weight:500; font-size:1.05rem; box-shadow:0 8px 24px rgba(22,41,77,.25); transition:.25s; }
#navBtn:hover { background:var(--ink); color:#fff; translate:-50% -2px; }
#navBtn.on { background:var(--ink); color:#fff; }
body[data-state="loading"] #navBtn { opacity:0; pointer-events:none; }
.hint { position:fixed; z-index:15; left:clamp(14px,3vw,34px); bottom:30px; font-weight:700; font-size:.82rem; color:var(--soft); }
body[data-state="place"] .hint, body[data-state="loading"] .hint { opacity:0; }

/* toast */
#toast { position:fixed; z-index:60; left:50%; top:76px; translate:-50% -30px; display:flex; flex-direction:column; gap:2px; padding:12px 22px; border-radius:16px; background:var(--ink); color:#fff; text-align:center; opacity:0; pointer-events:none; transition:.5s cubic-bezier(.2,.8,.2,1); }
#toast.on { opacity:1; translate:-50% 0; }
#toast b { font-family:var(--head); font-weight:500; color:#ffe08a; }
#toast span { font-size:.9rem; }

/* sheet (dashboard/tentang/legal) */
#sheet { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(22,41,77,.35); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.3s; }
#sheet.open { opacity:1; visibility:visible; }
.sheet-box { position:relative; width:min(760px,100%); max-height:86vh; overflow-y:auto; padding:30px; border-radius:26px; background:#fff; }
.meter { height:10px; margin:12px 0 18px; border-radius:10px; background:rgba(22,41,77,.1); overflow:hidden; }
.meter i { display:block; height:100%; background:#19a7ce; border-radius:10px; transition:width .6s; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-top:14px; }
.card { display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:16px; border:2px solid rgba(22,41,77,.1); background:#fff; text-align:left; transition:.2s; }
.card:hover { border-color:var(--c); transform:translateY(-2px); }
.card i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--c); color:#fff; font-style:normal; font-family:var(--head); font-weight:600; }
.card b { font-family:var(--head); font-weight:500; font-size:1.02rem; }
.card span { font-size:.82rem; color:var(--soft); }
.card.done { background:rgba(42,157,74,.08); border-color:rgba(42,157,74,.35); }
.ach { list-style:none; padding:0; display:grid; gap:8px; }
.ach li { display:flex; flex-direction:column; padding:10px 14px; border-radius:14px; background:rgba(22,41,77,.05); opacity:.55; }
.ach li.got { opacity:1; background:rgba(255,200,40,.2); }
.ach b { font-family:var(--head); font-weight:500; }
.ach span { font-size:.85rem; color:var(--soft); }

#rotate { position:fixed; z-index:95; inset:0; display:none; place-items:center; padding:30px; text-align:center; background:rgba(22,41,77,.92); color:#fff; font-weight:700; line-height:1.6; }
#rotate.on { display:grid; }
#rotate button { margin-top:16px; padding:10px 22px; border-radius:999px; border:2px solid #fff; background:none; color:#fff; font-weight:800; }
#nogl { position:fixed; inset:0; z-index:99; display:grid; place-items:center; padding:30px; text-align:center; background:#fff; font-weight:700; }
#nogl[hidden] { display:none; }

/* ============================================================
   SMARTPHONE (portrait) — glassmorphism & font lebih kecil
   ============================================================ */

/* --- panel detail tempat --- */
body.narrow #panel {
  top: auto; left: 10px; right: 10px; bottom: 84px;
  width: auto; max-height: 46vh;
  transform: translateY(120%);
  /* glassmorphism */
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 12px 40px rgba(22, 41, 77, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  padding: 14px 14px 12px;
  border-top: none;
}
body.narrow #panel.open { transform: none; }
body.narrow #panel h2 { font-size: 1.15rem; margin-top: 2px; }
body.narrow .lead { font-size: .85rem; margin-top: 4px; }
body.narrow .desc { font-size: .8rem; line-height: 1.45; margin-top: 4px; }
body.narrow #panel h3 { margin: 14px 0 6px; font-size: .78rem; }
body.narrow .feat li > button { padding: 7px 9px; gap: 7px; font-size: .85rem; }
body.narrow .feat li > button i { width: 22px; height: 22px; font-size: .72rem; }
body.narrow .feat li p { font-size: .76rem; }
body.narrow .feat li { border-radius: 10px; }
body.narrow .close { width: 28px; height: 28px; font-size: 1.1rem; top: 8px; right: 10px; }
body.narrow .num { font-size: .85rem; }
body.narrow .pn button { font-size: .72rem; padding: 7px 7px; border-radius: 10px; }

/* --- sheet overlay (lebih transparan di smartphone) --- */
body.narrow #sheet { background: rgba(22, 41, 77, .22); backdrop-filter: blur(6px); }
body.narrow .sheet-box {
  padding: 16px 14px;
  border-radius: 18px;
  /* glassmorphism */
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 12px 40px rgba(22, 41, 77, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
}
body.narrow .sheet-box h2 { font-size: 1.15rem; }
body.narrow .sheet-box h3 { font-size: .78rem; margin: 12px 0 5px; }
body.narrow .meter { margin: 8px 0 12px; height: 7px; }
body.narrow .grid { gap: 7px; margin-top: 8px; }
body.narrow .card { padding: 8px 10px; border-radius: 12px; }
body.narrow .card i { width: 22px; height: 22px; font-size: .72rem; }
body.narrow .card b { font-size: .88rem; }
body.narrow .card span { font-size: .72rem; }
body.narrow .ach li { padding: 7px 10px; border-radius: 10px; }
body.narrow .ach b { font-size: .88rem; }
body.narrow .ach span { font-size: .72rem; }

/* --- menu overlay (glassmorphism di smartphone) --- */
body.narrow #menu {
  padding: 80px clamp(18px, 6vw, 80px) 30px;
  background: rgba(234, 248, 255, .55);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
}
body.narrow #menu a { font-size: clamp(1.2rem, 4vw, 1.6rem); padding: 6px 0; gap: 10px; }
body.narrow #menu small { font-size: .78rem; }

/* --- top bar buttons --- */
body.narrow .top-r button { padding: 6px 11px; font-size: .74rem; border-radius: 20px; }
body.narrow .logo { font-size: 1rem; }

/* --- navigasi tengah bawah --- */
body.narrow #navBtn { padding: 10px 20px; font-size: .88rem; bottom: 18px; }

/* --- toast notifikasi --- */
body.narrow #toast { padding: 8px 16px; border-radius: 12px; top: 64px; }
body.narrow #toast b { font-size: .85rem; }
body.narrow #toast span { font-size: .72rem; }

/* --- loader / tombol masuk --- */
body.narrow #loader h1 { font-size: 1.2rem; }
body.narrow #loader .sub { font-size: .82rem; margin: 6px 0 20px; }
body.narrow #enter { padding: 11px 32px; font-size: 1rem; }
body.narrow .count { font-size: clamp(3rem, 14vw, 5rem); }

/* --- pin label peta --- */
body.narrow .pin { font-size: .7rem; padding: 3px 9px 3px 3px; }
body.narrow .pin i { width: 20px; height: 20px; font-size: .68rem; }

/* --- rotate device warning --- */
body.narrow #rotate { font-size: .95rem; padding: 20px; line-height: 1.5; }
body.narrow #rotate button { padding: 8px 18px; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) { * { transition-duration:.01ms !important; animation: none !important; } }