/* SNISHOP Reseller: storefront /r/<slug> dan halaman Jadi Reseller. Mobile-first, tanpa framework. */
:root{--a:#4f46e5;--ad:#4338ca;--soft:#eef2ff;--ink:#0f172a;--tx:#334155;--mu:#64748b;--ln:#e2e8f0;--bg:#f5f6fb;--navy:#0e2d6c;--hot:#ea580c;--hotsoft:#fff7ed;--ok:#15803d;--oksoft:#ecfdf3;--r:18px;--sh:0 1px 2px rgba(15,23,42,.06),0 10px 28px -14px rgba(15,23,42,.22)}
[data-theme=hijau]{--a:#0f766e;--ad:#115e59;--soft:#e6f6f4}
[data-theme=ungu]{--a:#7c3aed;--ad:#6d28d9;--soft:#f3edff}
[data-theme=oranye]{--a:#c2410c;--ad:#9a3412;--soft:#fff1e8}
[data-theme=gelap]{--a:#0f172a;--ad:#020617;--soft:#eef0f4}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.rs{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.rs a{color:var(--a)}.rs img{max-width:100%;height:auto}
.rs h1,.rs h2,.rs h3,.rs .fd{font-family:Outfit,Inter,system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em}
.rs-wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.rs-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--ln)}
.rs-top .rs-wrap{display:flex;align-items:center;gap:10px;height:56px}
.rs-logo{font:800 19px/1 Outfit,Inter,sans-serif;color:var(--navy)!important;text-decoration:none;letter-spacing:.2px}
.rs-top .sp{flex:1}
.rs-top a.lnk{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 6px}
.rs-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px;background:var(--soft);color:var(--a)}
@media(max-width:640px){.rs-pill{font-size:10px;padding:4px 9px}}
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:0;font:700 15px/1 Inter,sans-serif;text-decoration:none!important;cursor:pointer;background:var(--a);color:#fff!important;transition:transform .12s,box-shadow .12s,background .12s}
@media(max-width:640px){.rs-btn{min-height:42px;padding:0 16px;font-size:14px}}
.rs-btn:hover{background:var(--ad)}.rs-btn:active{transform:scale(.98)}
.rs-btn.hot{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 8px 20px -8px rgba(234,88,12,.7)}
.rs-btn.line{background:#fff;color:var(--a)!important;box-shadow:inset 0 0 0 2px var(--a)}
.rs-btn.wa{background:#16a34a}.rs-btn.wa:hover{background:#15803d}
.rs-btn.sm{min-height:38px;padding:0 14px;font-size:13px}
.rs-btn.block{display:flex;width:100%}
.rs :focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
/* hero */
.rs-hero{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 0% 0%,#1e3a8a 0%,var(--navy) 45%,#1b1464 100%);color:#e2e8f0;padding:30px 0 34px}
@media(max-width:640px){.rs-hero{padding:20px 0 24px}}
[data-theme=hijau] .rs-hero{background:radial-gradient(120% 140% at 0% 0%,#0f766e 0%,#064e3b 55%,#052e2b 100%)}
[data-theme=ungu] .rs-hero{background:radial-gradient(120% 140% at 0% 0%,#6d28d9 0%,#3b0764 60%,#1e1b4b 100%)}
[data-theme=oranye] .rs-hero{background:radial-gradient(120% 140% at 0% 0%,#c2410c 0%,#7c2d12 55%,#431407 100%)}
[data-theme=gelap] .rs-hero{background:radial-gradient(120% 140% at 0% 0%,#334155 0%,#0f172a 60%,#020617 100%)}
.rs-hero:before,.rs-hero:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.rs-hero:before{width:260px;height:260px;background:#60a5fa;right:-80px;top:-90px}
.rs-hero:after{width:220px;height:220px;background:#f59e0b;left:-90px;bottom:-110px;opacity:.22}
.rs-hero .rs-wrap{position:relative;z-index:1}
.rs-id{display:flex;align-items:center;gap:14px}
@media(max-width:640px){.rs-id{gap:10px}}
.rs-mono{flex:0 0 auto;width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font:800 26px/1 Outfit,sans-serif;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
@media(max-width:640px){.rs-mono{width:48px;height:48px;border-radius:14px;font-size:20px}}
.rs-hero h1{color:#fff;font-size:clamp(26px,6vw,40px);line-height:1.1;margin:0}
@media(max-width:640px){.rs-hero h1{font-size:clamp(22px,7vw,32px)}}
.rs-hero .tag{margin:14px 0 0;font-size:clamp(16px,3.8vw,19px);color:#dbeafe;max-width:36em}
@media(max-width:640px){.rs-hero .tag{font-size:clamp(14px,4vw,16px);margin-top:10px}}
.rs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:640px){.rs-chips{gap:6px;margin-top:12px}}
.rs-chip{font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 11px;border-radius:999px}
@media(max-width:640px){.rs-chip{font-size:11px;padding:5px 9px}}
.rs-heroact{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media(max-width:640px){.rs-heroact{gap:8px;margin-top:16px}}
.rs-heroact .rs-btn.line{background:rgba(255,255,255,.1);color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
/* sections */
.rs-sec{margin-top:18px}
.rs-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.rs-h2{font-size:22px;margin:30px 0 4px;line-height:1.2}.rs-sub{margin:0 0 14px;color:var(--mu);font-size:14.5px}
@media(max-width:640px){.rs-h2{font-size:19px;margin:22px 0 3px}.rs-sub{font-size:13px;margin-bottom:10px}}
.rs-tools{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
@media(max-width:640px){.rs-tools{gap:8px;margin-bottom:10px}}
.rs-search{width:100%;min-height:46px;border:1.5px solid var(--ln);border-radius:14px;padding:0 14px;font:500 15px Inter,sans-serif;background:#fff;color:var(--ink)}
@media(max-width:640px){.rs-search{min-height:42px;padding:0 12px;font-size:14px;border-radius:12px}}
.rs-search:focus{outline:none;border-color:var(--a)}
.rs-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media(max-width:640px){.rs-cats{gap:6px;padding:2px 2px 6px}}
.rs-cats::-webkit-scrollbar{display:none}
.rs-cat{flex:0 0 auto;border:1.5px solid var(--ln);background:#fff;color:var(--ink);border-radius:999px;font:600 13.5px Inter,sans-serif;padding:9px 14px;min-height:40px;cursor:pointer}
@media(max-width:640px){.rs-cat{font-size:12px;padding:7px 11px;min-height:36px}}
.rs-cat[aria-pressed=true]{background:var(--a);border-color:var(--a);color:#fff}
.rs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:640px){.rs-grid{gap:10px}}
@media(min-width:720px){.rs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:980px){.rs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rs-p{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh);border:1px solid #eef0f6}
.rs-p .im{position:relative;aspect-ratio:1/1;background:var(--soft)}
.rs-p .im img{width:100%;height:100%;object-fit:cover;display:block}
.rs-rb{position:absolute;left:8px;top:8px;background:var(--hot);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.2px}
.rs-kd{position:absolute;right:8px;top:8px;background:rgba(15,23,42,.78);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}
.rs-p .bd{display:flex;flex-direction:column;gap:6px;padding:11px 12px 12px;flex:1}
@media(max-width:640px){.rs-p .bd{padding:9px 10px 10px;gap:5px}}
.rs-p .ct{font-size:11.5px;font-weight:600;color:var(--a);text-transform:uppercase;letter-spacing:.04em}
.rs-p h3{font-size:15px;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
@media(max-width:640px){.rs-p h3{font-size:13px;line-height:1.25;min-height:3.3em}}
.rs-pr{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto}
.rs-pr b{font:800 19px/1 Outfit,sans-serif;color:var(--ink)}.rs-pr s{font-size:12.5px;color:#94a3b8}
@media(max-width:640px){.rs-pr b{font-size:16px}.rs-pr s{font-size:11px}}
.rs-p .acts{display:grid;gap:7px;margin-top:6px}
@media(max-width:640px){.rs-p .acts{gap:5px;margin-top:4px}}
.rs-p .det{font-size:12.5px;font-weight:600;text-align:center;color:var(--mu)!important;text-decoration:none;padding:2px 0}
.rs-empty{display:none;text-align:center;padding:30px 10px;color:var(--mu)}
/* bundles scroller */
.rs-hs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 14px;margin:0 -16px;-webkit-overflow-scrolling:touch}
.rs-hs .rs-p{flex:0 0 min(72%,260px);scroll-snap-align:start}
@media(min-width:720px){.rs-hs{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:4px 0 8px;margin:0}.rs-hs .rs-p{flex:initial}}
/* trust / how */
.rs-steps{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:720px){.rs-steps{grid-template-columns:repeat(3,1fr)}}
.rs-step{display:flex;gap:12px;align-items:flex-start}.rs-step .n{flex:0 0 auto;width:34px;height:34px;border-radius:12px;background:var(--soft);color:var(--a);display:grid;place-items:center;font:800 16px Outfit,sans-serif}
@media(max-width:640px){.rs-step{gap:10px}.rs-step .n{width:30px;height:30px;border-radius:10px;font-size:14px}}
.rs-step b{display:block;color:var(--ink);font-size:15px}.rs-step span{font-size:13.5px;color:var(--mu)}
@media(max-width:640px){.rs-step b{font-size:14px}.rs-step span{font-size:12.5px}}
.rs-note{font-size:13px;color:var(--mu);background:#fff;border:1px dashed #cbd5e1;border-radius:14px;padding:12px 14px}
@media(max-width:640px){.rs-note{font-size:12px;padding:10px 12px;border-radius:12px}}
.rs-foot{margin:34px 0 0;padding:22px 0 110px;border-top:1px solid var(--ln);font-size:13px;color:var(--mu)}
.rs-foot a{color:var(--mu)}
/* sticky bar */
.rs-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--ln);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px}
.rs-bar .rs-btn{flex:1;min-height:46px;padding:0 10px;font-size:14px}
@media(min-width:900px){.rs-bar{left:auto;right:18px;bottom:18px;border:1px solid var(--ln);border-radius:999px;padding:8px;box-shadow:var(--sh)}.rs-bar .rs-btn{flex:initial;padding:0 18px}.rs-foot{padding-bottom:50px}}
.rs-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:all .2s;z-index:50}
.rs-toast.on{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* jadi-reseller */
.rj-hero{background:radial-gradient(130% 150% at 100% 0%,#312e81 0%,#0e2d6c 55%,#0b1b4a 100%);color:#dbe4ff;padding:34px 0 60px;position:relative;overflow:hidden}
.rj-hero:after{content:"";position:absolute;right:-70px;bottom:-100px;width:280px;height:280px;border-radius:50%;background:#f59e0b;filter:blur(70px);opacity:.25}
.rj-hero h1{color:#fff;font-size:clamp(30px,7.2vw,52px);line-height:1.06;margin:12px 0}
.rj-hero p.lead{font-size:clamp(16px,4vw,19px);max-width:34em;color:#c7d2fe}
.rj-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fcd34d}
.rj-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.rj-grid.c3{grid-template-columns:repeat(3,1fr)}.rj-grid.c2{grid-template-columns:repeat(2,1fr)}.rj-grid.c4{grid-template-columns:repeat(4,1fr)}}
.rj-ico{width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:21px;margin-bottom:8px}
.rj-card h3{font-size:17px;margin:0 0 4px}.rj-card p{margin:0;font-size:14.5px;color:var(--mu)}
.rj-tier{position:relative;border:2px solid var(--ln);border-radius:var(--r);background:#fff;padding:18px}
.rj-tier.best{border-color:var(--a);box-shadow:0 12px 30px -16px rgba(79,70,229,.6)}
.rj-tier .nm{font:800 18px Outfit,sans-serif;color:var(--ink)}.rj-tier .big{font:900 38px/1 Outfit,sans-serif;color:var(--a);margin:8px 0 2px}
.rj-tier ul{margin:10px 0 0;padding-left:18px;font-size:14px;color:var(--tx)}
.rj-tier .bdg{position:absolute;right:14px;top:-11px;background:var(--a);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px}
.rj-form label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:12px 0 5px}
.rj-form input,.rj-form textarea,.rj-form select{width:100%;min-height:48px;border:1.5px solid var(--ln);border-radius:14px;padding:10px 14px;font:500 16px Inter,sans-serif;background:#fff;color:var(--ink)}
.rj-form input:focus,.rj-form textarea:focus{outline:none;border-color:var(--a)}
.rj-hint{font-size:12.5px;color:var(--mu);margin-top:5px}.rj-hint.ok{color:var(--ok)}.rj-hint.bad{color:#b91c1c}
.rj-slug{display:flex;align-items:center;border:1.5px solid var(--ln);border-radius:14px;background:#fff;overflow:hidden}
.rj-slug span{padding:0 0 0 12px;font-size:14px;color:var(--mu);white-space:nowrap}.rj-slug input{border:0!important;border-radius:0!important;min-width:0;padding-left:2px}
.rj-faq details{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:12px 16px;margin:8px 0}
.rj-faq summary{cursor:pointer;font-weight:700;color:var(--ink)}.rj-faq p{margin:8px 0 0;font-size:14.5px;color:var(--tx)}
.rj-compare{width:100%;border-collapse:collapse;font-size:14px}.rj-compare th,.rj-compare td{border:1px solid var(--ln);padding:9px 11px;text-align:left;vertical-align:top}.rj-compare th{background:var(--soft);color:var(--ink)}