/* LARIS RISE — application form (/rise/daftar/) and reviewer board (/rise/admin/). Tokens are inlined in each page's , same convention as rise/index.html. Nav, sheet, footer and .rz-btn come from /styles/rise.css; this file only adds form controls and the review board. Mobile-first throughout — the form is filled on phones, so every control clears a 44px tap target. */ /* ── Shared page chrome ──────────────────────────────────────────────────── */ .rzf-head{padding:clamp(26px,7vw,52px) 0 clamp(18px,4vw,28px)} .rzf-head h1{font-size:clamp(1.7rem,7.4vw,3rem);margin:0 0 14px;text-wrap:balance} .rzf-head .rz-lead{max-width:46ch} .rzf-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px;padding:0;list-style:none} .rzf-meta li{font-size:.82rem;font-weight:700;letter-spacing:.02em;padding:7px 13px; border-radius:999px;background:var(--merah-tint);color:var(--merah-dark)} /* ── Form ────────────────────────────────────────────────────────────────── */ .rzf-form{padding-bottom:clamp(60px,12vw,110px)} /* Blocks and option groups are
s for grouping semantics, so the UA border, padding and min-inline-size:min-content all have to go — the latter silently breaks the grid rows at narrow widths. */ .rzf-block,.rzf-opts{border:0;padding:0;margin-inline:0;min-inline-size:0} .rzf-block{max-width:640px;margin:0 0 clamp(34px,7vw,52px);padding-top:clamp(24px,5vw,34px); border-top:1px solid var(--hairline)} .rzf-block:first-of-type{border-top:0;padding-top:0} .rzf-block > h2{font-size:clamp(1.15rem,4.6vw,1.5rem);letter-spacing:-.02em;margin:0 0 6px} .rzf-block-sub{color:var(--ink-mute);font-size:.95rem;margin:0 0 24px;max-width:52ch} .rzf-field{margin:0 0 22px;max-width:640px} .rzf-field > label,.rzf-legend{display:block;font-weight:700;font-size:.98rem; line-height:1.45;margin:0 0 7px} .rzf-req{color:var(--merah)} .rzf-hint{display:block;font-weight:500;font-size:.88rem;line-height:1.5; color:var(--ink-mute);margin:0 0 10px;max-width:52ch} /* The "belum pernah bukan nilai minus" reassurance has to read as a friendly aside, not fine print — students drop out of the form when they think a question is a filter. */ .rzf-hint--warm{color:var(--merah-dark);background:var(--merah-tint); padding:10px 14px;border-radius:8px;font-weight:600} .rzf-input,.rzf-textarea,.rzf-select{width:100%;min-height:52px;padding:13px 15px; font:inherit;font-size:1rem;color:var(--ink);background:var(--putih); border:1.5px solid var(--hairline);border-radius:8px; transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none} .rzf-textarea{min-height:132px;line-height:1.6;resize:vertical} .rzf-input:focus,.rzf-textarea:focus,.rzf-select:focus{outline:0;border-color:var(--merah); box-shadow:0 0 0 3px rgba(181,32,42,.14)} .rzf-input::placeholder,.rzf-textarea::placeholder{color:rgba(92,87,81,.55)} .rzf-row{display:grid;gap:0} @media(min-width:640px){ .rzf-row{grid-template-columns:1fr 1fr;gap:0 18px} .rzf-row--3{grid-template-columns:1.4fr 1fr .7fr} } /* Radio / checkbox groups render as tappable cards, not bare inputs — far easier to hit on a phone and it makes the selected state obvious. */ .rzf-opts{display:grid;gap:9px;margin:0;padding:0;border:0} .rzf-opts--inline{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))} .rzf-opt{display:flex;align-items:center;gap:11px;min-height:52px;padding:11px 15px; background:var(--putih);border:1.5px solid var(--hairline);border-radius:8px; cursor:pointer;font-size:.97rem;line-height:1.4;transition:border-color .16s,background .16s} .rzf-opt:hover{border-color:rgba(181,32,42,.4)} .rzf-opt input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--merah);cursor:pointer} .rzf-opt:has(input:checked){border-color:var(--merah);background:var(--merah-tint)} .rzf-opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(181,32,42,.14)} .rzf-err{display:none;margin:8px 0 0;font-size:.88rem;font-weight:600;color:var(--merah)} .rzf-field.is-bad .rzf-err{display:block} .rzf-field.is-bad .rzf-input, .rzf-field.is-bad .rzf-textarea, .rzf-field.is-bad .rzf-select{border-color:var(--merah)} .rzf-field.is-bad .rzf-opts .rzf-opt{border-color:rgba(181,32,42,.5)} .rzf-submit{display:flex;flex-direction:column;gap:14px;align-items:flex-start; max-width:640px;padding-top:8px} .rzf-submit .rz-btn{width:100%} @media(min-width:640px){.rzf-submit .rz-btn{width:auto}} .rzf-note{font-size:.88rem;color:var(--ink-mute);max-width:52ch} .rzf-formerr{display:none;margin:0;padding:13px 16px;border-radius:8px; background:var(--merah-tint);color:var(--merah-dark);font-weight:600;font-size:.94rem} .rzf-formerr.is-on{display:block} button[disabled].rz-btn{opacity:.55;cursor:progress} /* Success panel replaces the form in place — no redirect, so a refresh cannot resubmit. */ .rzf-done{max-width:600px;padding:clamp(30px,7vw,48px) 0 clamp(60px,12vw,110px)} .rzf-done-mark{display:inline-flex;align-items:center;justify-content:center; width:60px;height:60px;border-radius:50%;background:var(--merah);color:#fff;margin-bottom:22px} .rzf-done h2{font-size:clamp(1.5rem,6vw,2.2rem);margin:0 0 14px} .rzf-done p{color:var(--ink-mute);margin:0 0 16px} /* ── Reviewer board (/rise/admin/) — MERAH–EMAS, matches /rise/ chrome ───── */ .rza-shell{flex:1;padding:clamp(20px,4vw,32px) 0 clamp(48px,8vw,72px)} .rza-top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between; margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--hairline)} .rza-top h1{font-size:clamp(1.45rem,5vw,2.1rem)} .rza-sub{margin:8px 0 0;font-size:.88rem;color:var(--ink-mute);font-weight:500} .rza-who{font-size:.86rem;color:var(--ink-mute)} .rza-who button{margin-left:10px;font:inherit;font-size:.86rem;font-weight:700; background:none;border:0;color:var(--merah);cursor:pointer;text-decoration:underline; min-height:44px} /* `hidden` must win over every rule in this file — a stray display value on a gated element leaks a control to someone who is not signed in. */ [hidden]{display:none !important} .rza-linkbtn{padding:0;border:0;background:none;font:inherit;font-weight:700; color:var(--merah);cursor:pointer;text-decoration:underline;min-height:44px} .rza-gate{max-width:440px;padding:clamp(36px,9vw,72px) 0;text-align:left} .rza-gate-mark{height:30px;width:auto;margin:0 0 22px} .rza-gate .rz-kicker{margin-bottom:12px} .rza-gate h1{font-size:clamp(1.55rem,6vw,2.35rem);margin-bottom:12px;letter-spacing:-.035em} .rza-gate p{color:var(--ink-mute);margin:0 0 24px;max-width:38ch} .rza-gate-out{margin-top:18px} .rza-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--putih); border:1px solid var(--hairline);border-radius:10px;margin-bottom:20px} .rza-tab{min-height:44px;padding:0 20px;font:inherit;font-size:.92rem;font-weight:700; background:none;border:0;border-radius:7px;color:var(--ink-mute);cursor:pointer; transition:background .15s,color .15s} .rza-tab:hover{color:var(--ink)} .rza-tab.is-active{background:var(--merah);color:#fff} /* Board: five status columns. Horizontal scroll on phones rather than a reflow — Afryan checks this on his phone and columns must stay comparable. */ .rza-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr); gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity} .rza-col{background:var(--putih);border:1px solid var(--hairline);border-radius:12px; padding:12px;scroll-snap-align:start;min-height:180px; box-shadow:0 1px 0 rgba(26,26,26,.03)} .rza-col-h{display:flex;align-items:center;justify-content:space-between;gap:8px; margin:0 0 12px;padding:8px 10px 10px;font-size:.78rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--hairline); color:var(--ink)} .rza-col-n{font-variant-numeric:tabular-nums;color:var(--ink-mute);letter-spacing:0; font-size:.82rem} .rza-col-n.is-full{color:var(--merah);font-weight:800} .rza-col--baru .rza-col-h{border-bottom-color:rgba(26,26,26,.22)} .rza-col--mungkin .rza-col-h{border-bottom-color:var(--emas);color:#8A6320} .rza-col--mungkin{background:linear-gradient(180deg,rgba(201,151,75,.1),var(--putih) 48px)} .rza-col--diterima .rza-col-h{border-bottom-color:var(--merah);color:var(--merah-dark)} .rza-col--diterima{background:linear-gradient(180deg,var(--merah-tint),var(--putih) 56px); border-color:rgba(181,32,42,.22)} .rza-col--batch_berikutnya .rza-col-h{border-bottom-color:rgba(181,32,42,.45);color:var(--merah-dark)} .rza-col--ditolak .rza-col-h{border-bottom-color:var(--hitam);color:var(--hitam)} .rza-col--ditolak{background:linear-gradient(180deg,rgba(26,26,26,.06),var(--putih) 48px)} .rza-card{background:var(--krem);border:1px solid var(--hairline);border-radius:10px; padding:12px 13px;margin-bottom:9px;cursor:pointer; transition:border-color .16s,transform .12s,background .16s} .rza-card:hover{border-color:var(--merah);background:var(--putih);transform:translateY(-1px)} .rza-card-n{font-weight:800;font-size:.98rem;line-height:1.3;margin-bottom:4px} .rza-card-m{font-size:.82rem;color:var(--ink-mute);line-height:1.5} .rza-card-f{display:flex;align-items:center;gap:8px;margin-top:9px} .rza-stars{font-size:.8rem;letter-spacing:.06em;color:var(--emas)} .rza-hasnote{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:999px; background:var(--merah-tint);color:var(--merah-dark)} .rza-sel{width:100%;min-height:38px;margin-top:9px;padding:6px 9px;font:inherit;font-size:.84rem; font-weight:600;background:var(--putih);border:1px solid var(--hairline);border-radius:7px; color:var(--ink);cursor:pointer} .rza-sel:focus{outline:0;border-color:var(--merah);box-shadow:0 0 0 3px rgba(181,32,42,.14)} .rza-empty{font-size:.84rem;color:var(--ink-mute);padding:10px 4px} /* List view: the "everyone at a glance" table — name + WhatsApp above all. */ .rza-listwrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:12px; background:var(--putih);box-shadow:0 1px 0 rgba(26,26,26,.03)} .rza-list{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px} .rza-list th{text-align:left;font-size:.72rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-mute);padding:14px 14px; border-bottom:2px solid var(--hairline);white-space:nowrap;background:rgba(245,239,224,.55)} .rza-list td{padding:12px 14px;border-bottom:1px solid rgba(26,26,26,.07);vertical-align:middle} .rza-list tr:last-child td{border-bottom:0} .rza-list tbody tr{cursor:pointer} .rza-list tbody tr:hover{background:var(--merah-tint)} .rza-list .rza-nm{font-weight:700} .rza-wa{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums} .rza-wa a{color:var(--merah);font-weight:700;text-decoration:none} .rza-wa a:hover{text-decoration:underline} .rza-copy{min-height:32px;min-width:32px;border:0;background:var(--merah-tint);border-radius:6px; font-size:.72rem;font-weight:700;color:var(--merah-dark);cursor:pointer;padding:0 8px} .rza-copy:hover{background:rgba(181,32,42,.18)} .rza-pill{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.03em; padding:4px 10px;border-radius:999px;white-space:nowrap} .rza-pill--baru{background:rgba(26,26,26,.08);color:var(--ink-mute)} .rza-pill--mungkin{background:rgba(201,151,75,.22);color:#8A6320} .rza-pill--diterima{background:var(--merah);color:#fff} .rza-pill--batch_berikutnya{background:var(--merah-tint);color:var(--merah-dark)} .rza-pill--ditolak{background:var(--hitam);color:var(--krem)} /* Detail drawer */ .rza-scrim{position:fixed;inset:0;z-index:70;background:rgba(26,26,26,.48); opacity:0;pointer-events:none;transition:opacity .22s} .rza-scrim.is-on{opacity:1;pointer-events:auto} .rza-drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(540px,100%); background:var(--krem);overflow-y:auto;transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.68,.24,1); padding-bottom:calc(30px + env(safe-area-inset-bottom)); border-left:1px solid var(--hairline);box-shadow:-18px 0 40px -24px rgba(26,26,26,.45)} .rza-drawer.is-on{transform:none} .rza-dr-h{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px; justify-content:space-between;padding:16px 20px 14px; background:rgba(245,239,224,.94); -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--hairline)} .rza-dr-h .rz-kicker{margin-bottom:6px} .rza-dr-h h2{font-size:1.3rem;line-height:1.25;margin:0 0 5px} .rza-dr-close{flex:0 0 auto;min-width:44px;min-height:44px;background:var(--putih); border:1px solid var(--hairline);border-radius:8px;font-size:1.1rem;color:var(--ink);cursor:pointer} .rza-dr-close:hover{border-color:var(--merah);color:var(--merah)} .rza-dr-b{padding:18px 20px 0} .rza-qa{margin:0 0 18px;padding:14px 15px;background:var(--putih);border:1px solid var(--hairline); border-radius:10px} .rza-qa dt{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--merah);margin-bottom:6px} .rza-qa dd{margin:0;font-size:.98rem;line-height:1.65;white-space:pre-wrap} .rza-qa dd.is-empty{color:rgba(92,87,81,.6);font-style:italic} .rza-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .rza-gates{display:grid;gap:8px;margin:0 0 18px;padding:14px 15px;list-style:none; background:var(--putih);border:1px solid var(--hairline);border-radius:10px} .rza-gates li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;line-height:1.5} .rza-gates b{flex:0 0 auto;font-size:.9rem} .rza-gates .ok{color:var(--hijau,#1E6B3C)} .rza-gates .no{color:var(--merah)} .rza-dr-sect{padding-top:16px;margin-top:16px;border-top:1px solid var(--hairline)} .rza-stars-in{display:flex;gap:5px;margin-bottom:16px} .rza-star{min-width:42px;min-height:42px;border:1.5px solid var(--hairline);border-radius:8px; background:var(--putih);font-size:1.05rem;color:rgba(26,26,26,.25);cursor:pointer;padding:0} .rza-star.is-on{color:var(--emas);border-color:var(--emas);background:rgba(201,151,75,.12)} .rza-saved{font-size:.82rem;font-weight:700;color:var(--hijau,#1E6B3C);opacity:0;transition:opacity .2s} .rza-saved.is-on{opacity:1} /* Notify modal */ .rza-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center; justify-content:center;padding:var(--pad);background:rgba(26,26,26,.55)} .rza-modal.is-on{display:flex} .rza-modal-box{background:var(--krem);border:1px solid var(--hairline);border-radius:14px; padding:clamp(22px,5vw,30px);max-width:440px;width:100%; box-shadow:0 24px 48px -20px rgba(26,26,26,.45)} .rza-modal-box h3{font-size:1.25rem;margin:0 0 12px;letter-spacing:-.02em} .rza-modal-box p{margin:0 0 10px;font-size:.96rem;line-height:1.6;color:var(--ink-mute)} .rza-warn{padding:11px 14px;border-radius:8px;background:var(--merah-tint); color:var(--merah-dark);font-weight:700;font-size:.9rem} .rza-modal-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .rza-modal-acts .rz-btn{flex:1 1 auto;min-height:50px} .rza-toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,14px); background:var(--hitam);color:var(--krem);padding:13px 20px;border-radius:9px; font-size:.92rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s; max-width:calc(100% - 2 * var(--pad));text-align:center; border:1px solid rgba(201,151,75,.35)} .rza-toast.is-on{opacity:1;transform:translate(-50%,0)} @media (prefers-reduced-motion:reduce){ .rza-drawer,.rza-scrim,.rza-card,.rza-toast{transition:none} }