/* Tema "liquid glass": kaca buram (frosted) di atas latar gradien gelap */
:root{
  --bg:#4a5068;
  --card:rgba(255,255,255,.10);
  --fg:#fff;
  --muted:rgba(255,255,255,.74);
  --accent:#a9bbff;
  --border:rgba(255,255,255,.26);
  --glass:linear-gradient(135deg,rgba(28,32,46,.55),rgba(28,32,46,.36));
  --glass-open:linear-gradient(135deg,rgba(40,46,66,.68),rgba(40,46,66,.46));
  --hi:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(20,24,40,.30);
  --blur:blur(24px) saturate(170%);
}
*{box-sizing:border-box}
html{background:#5a6179}
body{margin:0;min-height:100vh;color:var(--fg);background:transparent;font:16px/1.5 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
/* Lapisan gradien diperpanjang 35vh ke atas/bawah agar area bounce iOS dan strip
   di bawah toolbar tidak menampilkan warna polos. Posisi di bawah dihitung ulang
   (viewport = 20.6% .. 79.4% dari tinggi lapisan). */
body::before{content:"";position:fixed;left:0;right:0;top:-35vh;bottom:-35vh;z-index:-1;background:
  radial-gradient(60vmax 60vmax at 10% 22.9%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(50vmax 50vmax at 96% 32.4%,rgba(255,140,200,.45),transparent 62%),
  radial-gradient(55vmax 55vmax at 22% 77.1%,rgba(110,200,255,.42),transparent 62%),
  linear-gradient(170deg,#8189a3 20.6%,#5a6179 50%,#363b4e 79.4%)}
a{color:var(--accent)}
.wrap{max-width:560px;margin:0 auto;padding:32px 16px 64px}
.center{text-align:center}

/* profil */
.profile{text-align:center;margin-bottom:26px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow),0 0 0 6px rgba(255,255,255,.14)}
.avatar-ph{display:inline-flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:var(--muted);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--hi),var(--shadow),0 0 0 6px rgba(255,255,255,.07)}
h1{margin:14px 0 10px;font-size:22px;letter-spacing:-.01em;text-shadow:0 1px 14px rgba(20,24,40,.45)}
.bio{margin:0 auto 14px;max-width:420px;color:rgba(255,255,255,.92);font-size:15px;white-space:pre-line;overflow-wrap:anywhere;text-shadow:0 1px 12px rgba(20,24,40,.55);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.bio.open{display:block;-webkit-line-clamp:unset;line-clamp:unset}
.bio-more{margin:-8px auto 10px;min-height:44px;padding:0 14px;background:none;border:0;color:var(--accent);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-shadow:0 1px 10px rgba(20,24,40,.5)}
.bio-more[hidden]{display:none}
.socials{display:flex;gap:12px;justify-content:center}
.socials a{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--fg);background:var(--glass);border:1px solid var(--border);box-shadow:var(--hi),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:transform .15s,background-color .15s}
.socials a:active{transform:scale(.94)}
.socials svg{width:22px;height:22px;fill:currentColor}

/* search */
.search{margin-bottom:16px}
.search input{width:100%;min-height:50px;padding:0 18px;font:inherit;font-size:16px;color:var(--fg);background:var(--glass);border:1px solid var(--border);border-radius:16px;box-shadow:var(--hi),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:rgba(255,255,255,.5)}

/* filter kategori */
.chips{display:flex;gap:8px;margin:0 -16px 14px;padding:2px 16px 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;font:inherit;font-size:14px;font-weight:600;color:var(--fg);cursor:pointer;background:var(--glass);border:1px solid var(--border);border-radius:999px;box-shadow:var(--hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:background .2s,border-color .2s,transform .12s}
.chip:active{transform:scale(.96)}
.chip.on{background:linear-gradient(135deg,rgba(169,187,255,.55),rgba(169,187,255,.32));border-color:rgba(255,255,255,.6);color:#fff}
.pin{width:14px;height:14px;margin:0 4px 1px 0;vertical-align:-1px;fill:var(--accent);transform:rotate(35deg)}

/* daftar item */
.items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.entry[hidden]{display:none}
.item{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:10px 14px;color:inherit;font:inherit;text-align:left;cursor:pointer;background:var(--glass);border:1px solid var(--border);border-radius:20px;box-shadow:var(--hi),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:border-color .2s,transform .12s,background .2s}
.item:hover,.item:focus-visible{border-color:rgba(255,255,255,.45);outline:none}
.item:active{transform:scale(.985)}
.item[aria-expanded=true]{background:var(--glass-open);border-color:rgba(255,255,255,.5)}
.thumb{flex:none;width:56px;height:56px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.08);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.thumb-ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;border:1px solid var(--border)}
.meta{display:flex;flex-direction:column;min-width:0}
.num{color:var(--accent);font-weight:700;margin-right:4px}
.ttl{font-weight:600;overflow-wrap:anywhere}
.chev{flex:none;width:24px;height:24px;margin-left:auto;fill:var(--muted);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.item[aria-expanded=true] .chev{transform:rotate(180deg)}
.empty{text-align:center;color:var(--muted)}
.hint{margin:0 0 12px;color:var(--muted);font-size:14px}

/* panel buka/tutup */
.panel{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .3s}
.panel-clip{overflow:hidden;min-height:0}
.panel-body{display:grid;gap:10px;padding:12px 2px 4px}
.entry.open .panel{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),opacity .25s ease .04s,visibility 0s}
.entry.open .choice{animation:rise .32s cubic-bezier(.2,.8,.2,1) both}
.entry.open .choice + .choice{animation-delay:.07s}
.dsc{margin-top:2px;color:var(--muted);font-size:14px;font-weight:400;line-height:1.4;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.entry.open .dsc{display:block;-webkit-line-clamp:unset;line-clamp:unset;white-space:pre-line}
@keyframes rise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.choice{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:16px;font-weight:700;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:var(--hi),0 8px 22px rgba(0,0,0,.3);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:transform .12s,filter .15s}
.choice:hover{filter:brightness(1.08)}
.choice:active{transform:scale(.98)}
.choice.shopee{background:linear-gradient(135deg,rgba(255,110,70,.88),rgba(238,77,45,.72))}
.choice.tokopedia{background:linear-gradient(135deg,rgba(32,200,70,.85),rgba(3,172,14,.70))}

/* fallback tanpa backdrop-filter: lebih pekat supaya tetap terbaca */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:linear-gradient(135deg,rgba(44,49,68,.95),rgba(30,34,48,.95));--glass-open:linear-gradient(135deg,rgba(58,64,88,.97),rgba(38,43,60,.97))}
}
@media (max-width:600px){.item,.choice,.chip{min-height:44px}.wrap{padding-top:24px}}
@media (prefers-reduced-motion:reduce){.panel,.item,.chev,.entry.open .panel,.choice,.socials a,.chip{transition:none}.entry.open .choice{animation:none}}