/* SinarIlmu Remix — mobile first */
.sirx-root,.sirx-ov,.sirx-toast{--c1:#8b5cf6;--c2:#ec4899;--ink:#1e1b3a;--mut:#6b7280;--line:#e5e7eb;--bg:#faf8ff;--card:#fff;
  color:var(--ink);line-height:1.5;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
.sirx-root *,.sirx-ov *,.sirx-toast{box-sizing:border-box}
.sirx-root{max-width:1100px;margin:0 auto;padding:10px 12px 40px;--sirx-cols:3}
.sirx-root button,.sirx-root input,.sirx-ov button,.sirx-ov input,.sirx-ov select{font-family:inherit;font-size:inherit}
.sirx-boot{padding:40px 10px;text-align:center;color:var(--mut)}

.sirx-hero{border-radius:22px;padding:20px 18px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 30px -14px var(--c1)}
.sirx-hero h2{margin:0;font-size:1.4rem;line-height:1.2;font-weight:800;color:#fff;letter-spacing:-.02em}
.sirx-hero p{margin:6px 0 0;font-size:.92rem;opacity:.95;color:#fff}

.sirx-tabs{display:flex;gap:8px;overflow-x:auto;margin:14px 0 4px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.sirx-tab{flex:none;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.85rem;cursor:pointer}
.sirx-tab.on{border-color:var(--c1);background:var(--c1);color:#fff}

.sirx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media(min-width:760px){.sirx-grid{grid-template-columns:repeat(var(--sirx-cols),1fr);gap:16px}}
.sirx-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 18px -12px rgba(30,27,58,.35)}
.sirx-thumb{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#f3effe,#fdf0f7);display:grid;place-items:center;overflow:hidden}
.sirx-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.sirx-badge{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.94);border-radius:999px;padding:3px 9px;font-size:.7rem;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sirx-pdf{position:absolute;right:8px;top:8px;background:#ef4444;color:#fff;border-radius:6px;padding:2px 7px;font-size:.66rem;font-weight:800}
.sirx-cb{display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px;flex:1}
.sirx-cb h3{margin:0;font-size:.92rem;line-height:1.3;font-weight:700;color:var(--ink)}
.sirx-go{margin-top:auto}
.sirx-empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:30px 10px}
.sirx-up{border:2px dashed #c4b5fd;background:#faf8ff;cursor:pointer;min-height:220px;justify-content:center;align-items:center;text-align:center;transition:background .15s,border-color .15s}
.sirx-up.drag,.sirx-up:hover{background:#f3effe;border-color:var(--c1)}
.sirx-upi{display:flex;flex-direction:column;gap:4px;padding:16px;align-items:center}
.sirx-upe{font-size:2rem}
.sirx-upi small{color:var(--mut);font-size:.72rem;line-height:1.35}

.sirx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:9px 14px;font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:none;line-height:1.2;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.sirx-btn:active{transform:scale(.97)}
.sirx-btn:disabled{opacity:.6;cursor:progress}
.sirx-pri{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}

/* Modal */
.sirx-ov{position:fixed;inset:0;z-index:99999;background:rgba(20,16,40,.55);display:flex;align-items:stretch;justify-content:center}
.sirx-ov[hidden]{display:none}
.sirx-win{display:flex;flex-direction:column;width:100%;max-width:1180px;background:var(--bg);overflow:hidden}
@media(min-width:900px){.sirx-ov{padding:3vh 3vw}.sirx-win{border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}}
.sirx-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.sirx-mt{flex:1;margin:0;font-size:1rem;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sirx-x{border:0;background:#f3f4f6;width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--ink)}
.sirx-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:12px 14px 16px;-webkit-overflow-scrolling:touch}
@media(min-width:900px){.sirx-body{flex-direction:row;overflow:hidden}.sirx-left{flex:1;min-width:0;overflow:auto}.sirx-right{width:370px;flex:none;overflow:auto;padding-right:4px}}
.sirx-stage{position:relative;display:grid;place-items:center;min-height:220px;background:repeating-conic-gradient(#ececf3 0 25%,#f6f6fa 0 50%) 0 0/20px 20px;border-radius:14px;padding:10px}
.sirx-cv{max-width:100%;height:auto;max-height:68vh;border-radius:6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);background:#fff}
@media(min-width:900px){.sirx-cv{max-height:calc(94vh - 405px);min-height:200px}}
.sirx-status{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:var(--mut);font-weight:600;font-size:.9rem}
.sirx-status[hidden]{display:none}
.sirx-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;font-weight:700;font-size:.85rem}
.sirx-pager:empty{display:none}
.sirx-mini{border:2px solid var(--line);background:#fff;width:34px;height:34px;border-radius:10px;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--ink)}
.sirx-sum{margin-top:8px;text-align:center;color:var(--mut);font-size:.78rem}
.sirx-vars{display:grid;grid-template-columns:repeat(6,minmax(0,92px));justify-content:center;gap:6px;margin-top:10px}
.sirx-vb{position:relative;border:2px solid var(--line);background:#fff;border-radius:10px;padding:0;overflow:hidden;cursor:pointer;aspect-ratio:3/4;display:grid;place-items:center}
.sirx-vb.on{border-color:var(--c1);box-shadow:0 0 0 2px rgba(139,92,246,.25)}
.sirx-vc{width:100%;height:100%;object-fit:contain;display:block}
.sirx-vn{position:absolute;left:3px;bottom:3px;z-index:1;background:rgba(255,255,255,.9);border-radius:6px;font-size:.62rem;font-weight:800;padding:0 5px;color:var(--ink)}

.sirx-ctl h4{margin:14px 0 8px;font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.sirx-ctl h4:first-child{margin-top:0}
.sirx-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sirx-f{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;color:var(--ink);min-width:0}
.sirx-f[hidden]{display:none}
.sirx-f.wide{margin-bottom:10px}
.sirx-f.chk{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.sirx-f select,.sirx-f input[type=text]{width:100%;border:2px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font-weight:500;color:var(--ink);min-height:40px}
.sirx-f input[type=checkbox]{width:22px;height:22px;accent-color:var(--c1)}
.sirx-sws{display:flex;flex-wrap:wrap;gap:8px}
.sirx-sw{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line);cursor:pointer;padding:0;font-size:1rem;background:#fff}
.sirx-sw.on{box-shadow:0 0 0 3px var(--c1)}
.sirx-lock{margin-top:14px;padding:12px 14px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa;font-size:.85rem}
.sirx-lock[hidden]{display:none}
.sirx-lock p{margin:6px 0 10px}
.sirx-lr{display:flex;flex-wrap:wrap;gap:8px}
.sirx-bar{display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.sirx-bar .sirx-btn{flex:1;padding:11px 8px;font-size:.82rem}
@media(min-width:600px){.sirx-bar .sirx-btn{font-size:.9rem}}
html.sirx-lockscroll,html.sirx-lockscroll body{overflow:hidden}

.sirx-toast{position:fixed;left:50%;bottom:90px;z-index:100000;transform:translate(-50%,20px);opacity:0;background:#1e1b3a;color:#fff;padding:10px 16px;border-radius:12px;font-size:.85rem;max-width:90vw;transition:all .25s;pointer-events:none;text-align:center}
.sirx-toast.on{opacity:1;transform:translate(-50%,0)}