/* KINGDOM — Showcase 360° (feed vertikal ala Reels untuk koleksi original) */
:root{
  --emerald:#0F1F1B; --emerald-deep:#0A1714; --gold:#B89A5E; --gold-soft:#CDB17E; --gold-text:#836A38;
  --ivory:#FAF7F0; --ink:#1E1B17; --charcoal:#5A5654; --line:rgba(30,27,23,.12);
  --serif:"Playfair Display",Georgia,serif; --sans:"Lato","Helvetica Neue",Arial,sans-serif;
  --top:58px; --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--emerald-deep);color:var(--ink);font-family:var(--sans);overscroll-behavior:none}
body{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}

.sc{position:relative;height:100dvh;max-width:480px;margin:0 auto;background:#fff;overflow:hidden}
@media (min-width:900px){
  body{background:radial-gradient(1200px 700px at 50% 30%,#163029 0%,var(--emerald-deep) 70%)}
  .sc{height:min(100dvh,920px);margin-top:max(0px,calc((100dvh - 920px)/2));border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,.45)}
}

/* ---------- bar atas ---------- */
.sc-top{position:absolute;inset:0 0 auto 0;z-index:5;height:var(--top);display:flex;align-items:center;gap:8px;padding:0 10px;
  background:linear-gradient(#fff 55%,rgba(255,255,255,0))}
.sc-back{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.sc-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-cats{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.sc-cats::-webkit-scrollbar{display:none}
.sc-cat{flex:none;height:32px;padding:0 13px;border-radius:16px;border:1px solid var(--line);font-size:13px;letter-spacing:.02em;color:var(--charcoal);background:#fff;white-space:nowrap}
.sc-cat.on{background:var(--emerald);border-color:var(--emerald);color:#fff}
.sc-count{flex:none;font-size:11px;letter-spacing:.06em;color:var(--charcoal);min-width:58px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- feed ---------- */
.sc-feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.sc-feed::-webkit-scrollbar{display:none}
.sc-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;background:#fff;overflow:hidden}

.sc-stage{position:relative;flex:1 1 auto;min-height:0;margin-top:var(--top);background:#fff;touch-action:pan-y}
.sc-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:56px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.sc-media{position:absolute;inset:0;display:grid;place-items:center}
.sc-media img,.sc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.sc-media video{opacity:0;transition:opacity .35s ease}
.sc-slide.vid-on .sc-media video{opacity:1}
.sc-badge{position:absolute;left:14px;top:10px;z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);
  background:rgba(250,247,240,.92);border:1px solid rgba(184,154,94,.35);border-radius:999px;padding:5px 10px}
.sc-burst{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;z-index:3;pointer-events:none;opacity:0;transform:scale(.4)}
.sc-burst svg{width:100%;height:100%;fill:#C2453F;filter:drop-shadow(0 8px 24px rgba(194,69,63,.35))}
.sc-burst.go{animation:burst .8s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes burst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.08)}60%{opacity:1;transform:scale(.96)}100%{opacity:0;transform:scale(1.25) translateY(-20px)}}

/* rel aksi kanan */
.sc-rail{position:absolute;right:10px;bottom:16px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px}
.sc-act{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--charcoal);letter-spacing:.02em}
.sc-act i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,31,27,.10)}
.sc-act svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc-act.loved svg{fill:#C2453F;stroke:#C2453F}
.sc-act.loved i{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.18)}}
.sc-metals{display:flex;flex-direction:column;gap:7px;padding:7px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--line)}
.sc-metal{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sc-metal.on{box-shadow:0 0 0 2px var(--emerald)}
.sc-metal[data-m=Y]{background:linear-gradient(135deg,#F3DD9A,#C9A24B)}
.sc-metal[data-m=W]{background:linear-gradient(135deg,#F4F4F2,#BFC2C6)}
.sc-metal[data-m=R]{background:linear-gradient(135deg,#F3C9B7,#C88C77)}

/* panel info bawah */
.sc-info{flex:none;padding:6px 18px calc(16px + var(--safe-b));background:#fff}
.sc-eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.sc-name{margin:5px 0 4px;font-family:var(--serif);font-weight:500;font-size:clamp(22px,6.4vw,27px);line-height:1.15;color:var(--ink);padding-right:58px}
.sc-spec{font-size:13px;color:var(--charcoal);line-height:1.4}
.sc-price{margin:9px 0 13px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sc-price small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal)}
.sc-price b{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--emerald)}
.sc-price span{font-size:12px;color:var(--charcoal)}
.sc-ctas{display:flex;gap:8px}
.sc-cta{flex:1;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;letter-spacing:.03em;text-decoration:none}
.sc-cta.pri{background:var(--emerald);color:#fff}
.sc-cta.pri:active{background:var(--emerald-deep)}
.sc-cta.sec{flex:0 0 auto;padding:0 16px;border:1px solid var(--line);color:var(--ink)}
.sc-cta svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc-more{display:inline-block;margin-top:10px;font-size:12px;color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}

/* kartu "mirip" yang disisipkan setelah ♥ */
.sc-slide .sc-why{position:absolute;left:14px;top:40px;z-index:2;font-size:11px;color:var(--emerald);background:#EEF3EF;border-radius:999px;padding:4px 10px;display:none}
.sc-slide.similar .sc-why{display:block}

/* coach + toast + loading */
.sc-coach{position:absolute;left:50%;top:44%;transform:translateX(-50%);white-space:nowrap;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#fff;background:rgba(15,31,27,.82);border-radius:16px;padding:10px 16px 12px;font-size:13px;pointer-events:none;transition:opacity .4s}
.sc-coach svg{width:26px;height:26px;fill:none;stroke:var(--gold-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(4px)}50%{transform:translateY(-6px)}}
.sc-coach.hide{opacity:0}
.sc-toast{position:absolute;left:50%;top:calc(var(--top) + 10px);transform:translate(-50%,-8px);z-index:7;background:var(--emerald);color:#fff;font-size:13px;
  padding:9px 14px;border-radius:999px;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.sc-toast.show{opacity:1;transform:translate(-50%,0)}
.sc-loading{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#fff;color:var(--charcoal);font-size:13px;transition:opacity .4s}
.sc-loading span{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--gold);animation:spin 1s linear infinite}
.sc-loading.done{opacity:0;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-height:640px){ .sc-name{font-size:21px} .sc-spec{display:none} .sc-price{margin:6px 0 9px} }
@media (prefers-reduced-motion:reduce){ .sc-coach svg,.sc-burst.go{animation:none} }

/* tombol pindah ke grid (pengganti panah kembali) */
.sc-grid{flex:none;height:34px;padding:0 11px 0 9px;border-radius:17px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:12.5px;letter-spacing:.02em;background:#fff}
.sc-grid svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}

/* LGD / Natural */
.sc-stone{display:inline-flex;margin-left:auto;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.sc-stone button{height:26px;padding:0 10px;font-size:11.5px;color:var(--charcoal);background:#fff}
.sc-stone button.on{background:var(--emerald);color:#fff}
.sc-price{align-items:center}
/* keluarga bentuk batu (25 Okt 2026) */
.sc-fam{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:2px 0 0;padding:2px 0}
.sc-fam::-webkit-scrollbar{display:none}
.sc-fam-b{flex:0 0 auto;padding:5px 11px;border:1px solid rgba(15,31,27,.16);border-radius:999px;background:#fff;color:var(--ink);font:600 12px/1.2 var(--sans);cursor:pointer}
.sc-fam-b.on{background:var(--ink,#0F1F1B);border-color:var(--ink,#0F1F1B);color:#F3E7CC}
@media (max-height:640px){.sc-fam{display:flex}}