/* Lembar pemilih Home: muncul dari bawah (HP) atau di tengah (layar lebar), kartu muncul berurutan. Warna permukaan ikut tema; warna kartu hanya dekorasi ikon. */
.hp-lock{overflow:hidden}
.hp-ov{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center}
.hp-bg{position:absolute;inset:0;background:rgba(2,8,23,.55);opacity:0;transition:opacity .28s;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.hp-ov.in .hp-bg{opacity:1}.hp-ov.out .hp-bg{opacity:0}
.hp-sheet{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--card,#fff);color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);border-bottom:0;border-radius:26px 26px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(0,0,0,.35);transform:translateY(60px) scale(.97);opacity:0;transition:transform .42s cubic-bezier(.2,.95,.3,1.15),opacity .25s}
.hp-ov.in .hp-sheet{transform:none;opacity:1}.hp-ov.out .hp-sheet{transform:translateY(40px) scale(.98);opacity:0;transition-duration:.22s}
.hp-grip{display:block;width:42px;height:5px;border-radius:9px;background:var(--border,#cbd5e1);margin:0 auto 10px}
.hp-hd{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}.hp-hd>div{flex:1;min-width:0}.hp-hd b{display:block;font-size:19px;font-weight:900;letter-spacing:-.01em}.hp-hd small{display:block;color:var(--muted,#64748b);font-size:12.5px;margin-top:2px;line-height:1.4}
.hp-x{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--border,#e2e8f0);background:var(--tert,#f1f5f9);color:var(--muted,#64748b);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s}.hp-x:hover{transform:rotate(90deg);background:var(--info-bg,#eff6ff)}
.hp-ov{--c1:var(--accent,#2563eb);--c2:var(--accent-dark,var(--accent,#1d4ed8))}
.hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hp-c{position:relative;text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:13px 12px 12px;border-radius:18px;border:1.5px solid var(--border,#e2e8f0);background:var(--card,#fff);color:var(--text,#0f172a);overflow:hidden;
  opacity:0;transform:translateY(22px) scale(.88);transition:transform .2s,border-color .2s,box-shadow .2s,opacity .25s}
.hp-ov.in .hp-c{animation:hp-pop .5s cubic-bezier(.2,.95,.3,1.25) both;animation-delay:calc(var(--i)*55ms + 140ms)}
@keyframes hp-pop{0%{opacity:0;transform:translateY(22px) scale(.88)}100%{opacity:1;transform:none}}
.hp-c::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,color-mix(in srgb,var(--c1) 22%,transparent) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s}
.hp-c:hover::before,.hp-c:focus-visible::before{transform:translateX(120%)}
.hp-c:hover,.hp-c:focus-visible{border-color:var(--c1);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--c1) 28%,transparent);outline:0}
.hp-c.on{border-color:var(--c1);background:color-mix(in srgb,var(--c1) 9%,var(--card,#fff))}
.hp-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--on-accent,#fff);font-size:18px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 6px 14px color-mix(in srgb,var(--c1) 38%,transparent);margin-bottom:6px;animation:hp-ang 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}
@keyframes hp-ang{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-4deg)}}
.hp-c b{font-size:14.5px;font-weight:900}.hp-c small{font-size:11.5px;color:var(--muted,#64748b);line-height:1.35}
.hp-on{position:absolute;top:10px;right:10px;font-style:normal;font-size:10px;font-weight:900;padding:3px 8px;border-radius:99px;background:var(--c1);color:var(--on-accent,#fff);display:inline-flex;gap:4px;align-items:center}
.hp-c.pilih{animation:hp-pilih .34s ease forwards!important;border-color:var(--c1);z-index:2}
@keyframes hp-pilih{0%{transform:scale(1)}45%{transform:scale(1.07);box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 30%,transparent)}100%{transform:scale(1.02);box-shadow:0 0 0 14px transparent}}
.hp-c.redup{opacity:.35!important;transform:scale(.96)!important;transition:.25s}
.hp-ft{margin:14px 2px 0;font-size:12px;color:var(--faint,#94a3b8);text-align:center}.hp-ft i{margin-right:4px}
.hp-hint{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:2147482000;transform:translate(-50%,12px) scale(.92);opacity:0;pointer-events:none;background:var(--text,#0f172a);color:var(--card,#fff);font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:opacity .22s,transform .3s cubic-bezier(.2,.95,.3,1.3);white-space:nowrap}
.hp-hint.in{opacity:1;transform:translate(-50%,0) scale(1)}.hp-hint::after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.hp-hint i{margin-right:6px;animation:hp-tap 1s ease-in-out infinite}@keyframes hp-tap{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(min-width:820px){.hp-ov{align-items:center}.hp-sheet{border-radius:26px;border-bottom:1px solid var(--border,#e2e8f0);max-height:88vh;padding-bottom:18px}.hp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-hint{display:none}}
@media(prefers-reduced-motion:reduce){.hp-sheet,.hp-bg,.hp-c,.hp-hint{transition:none!important}.hp-ov.in .hp-c{animation:none!important;opacity:1;transform:none}.hp-ic,.hp-hint i{animation:none!important}}