:root{
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif;
  --bg:#ffeccb; --ink:#2b2516; --muted:#7a5a3c; --title:#ffc233;
  --card:#1540c9; --ledge:#0e2f9e;
  --field:#ffffff; --field-ink:#16224a; --field-brd:#c9d3f2;
  --accent:#ffb81f; --accent-ledge:#b77f00; --good:#15a65a; --bad:#e23b3b;
  --btn-bg:#ffffff; --btn-ink:#1b2340; --btn-brd:#ecca8c;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1018; --ink:#f0ead6; --muted:#c7b393; --title:#ffc84d;
  --card:#1d4fe0; --ledge:#1338a6; --field:#0e1630; --field-ink:#dfe6ff; --field-brd:#2a3f7a;
  --accent:#ffc233; --accent-ledge:#a9780a; --good:#16a34a; --bad:#ef4444;
  --btn-bg:#1a2233; --btn-ink:#e9eefc; --btn-brd:#2c374f;
}}
:root[data-theme="dark"]{
  --bg:#0d1018; --ink:#f0ead6; --muted:#c7b393; --title:#ffc84d;
  --card:#1d4fe0; --ledge:#1338a6; --field:#0e1630; --field-ink:#dfe6ff; --field-brd:#2a3f7a;
  --accent:#ffc233; --accent-ledge:#a9780a; --good:#16a34a; --bad:#ef4444;
  --btn-bg:#1a2233; --btn-ink:#e9eefc; --btn-brd:#2c374f;
}
*{box-sizing:border-box} html,body{margin:0} html{overflow-x:hidden}
body{font-family:var(--font);color:var(--ink);background:var(--bg);min-height:100svh;
  padding:max(14px,env(safe-area-inset-top)) clamp(14px,4vw,26px) calc(40px + env(safe-area-inset-bottom))}
.wrap{max-width:1000px;margin:0 auto} .wrap.narrow{max-width:430px} a{color:inherit}
.top{display:flex;align-items:center;gap:12px;margin:6px 2px 10px;flex-wrap:wrap}
.dot{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#241a08;flex:0 0 auto;
  background:var(--accent);box-shadow:0 4px 0 var(--accent-ledge),inset 0 2px 0 rgba(255,255,255,.4)}
.dot svg{width:26px;height:26px}
.htext{margin-right:auto;min-width:0}
.htext h1{font-size:clamp(1.2rem,4.5vw,1.75rem);font-weight:800;margin:0;line-height:1.05;color:var(--ink)}
.htext p{margin:3px 0 0;color:var(--muted);font-size:clamp(.8rem,2.6vw,.92rem);font-weight:600}
.theme-toggle{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--btn-ink);
  background:var(--btn-bg);border:1.5px solid var(--btn-brd);box-shadow:0 3px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.3);flex:0 0 auto}
.theme-toggle:active{transform:translateY(2px)} .theme-toggle svg{width:19px;height:19px}
.ic-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ic-sun{display:block}:root:not([data-theme="light"]) .ic-moon{display:none}}
:root[data-theme="dark"] .ic-sun{display:block}:root[data-theme="dark"] .ic-moon{display:none}
:root[data-theme="light"] .ic-sun{display:none}:root[data-theme="light"] .ic-moon{display:block}
/* buttons */
.btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.85rem;color:var(--btn-ink);
  background:var(--btn-bg);border:1.5px solid var(--btn-brd);padding:10px 15px;border-radius:12px;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.accent{background:var(--accent);color:#241a08;border-color:transparent;box-shadow:0 3px 0 var(--accent-ledge),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.good{background:var(--good);color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.btn.danger{background:var(--bad);color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.btn.sm{padding:7px 11px;font-size:.78rem;border-radius:10px} .btn svg{width:15px;height:15px}
/* cards */
.login,.panel{color:#fff;border:0;border-radius:20px;background:var(--card);
  box-shadow:0 7px 0 var(--cl,var(--ledge)),0 18px 34px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.2)}
.login{padding:24px 22px;margin-top:22px} .panel{padding:18px 16px;margin-top:16px}
.login h2,.panel h2{margin:0 0 6px;font-weight:800;color:#fff}
.login h2{font-size:1.3rem} .panel h2{font-size:1.14rem;margin-bottom:12px}
.sub{margin:0 0 16px;color:rgba(255,255,255,.85);font-size:.9rem;font-weight:500;line-height:1.5}
.field{margin-bottom:14px} .field label,.checks label{color:#fff}
.field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px}
.field .hint{font-weight:500;color:rgba(255,255,255,.7);font-size:.74rem}
.inp,textarea.inp,select.inp{width:100%;font:inherit;font-weight:600;font-size:.95rem;color:var(--field-ink);background:var(--field);
  border:1.5px solid var(--field-brd);border-radius:11px;padding:11px 13px;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
textarea.inp{resize:vertical;min-height:70px;line-height:1.5}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,184,31,.35)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.msg{border-radius:12px;padding:11px 14px;font-size:.88rem;font-weight:700;margin-bottom:14px;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.msg.err{background:var(--bad)} .msg.ok{background:var(--good)}
/* landing category cards */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:560px){.cats{grid-template-columns:1fr}}
.cat{position:relative;display:flex;flex-direction:column;text-decoration:none;color:#fff;border-radius:20px;padding:22px 20px;min-height:150px;overflow:hidden;
  box-shadow:0 7px 0 var(--cl,rgba(0,0,0,.3)),0 16px 30px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.2);transition:transform .12s}
.cat:active{transform:translateY(3px)} @media(hover:hover){.cat:hover{transform:translateY(-4px)}}
.cat .ci{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px;background:var(--accent);color:#241a08;box-shadow:0 3px 0 var(--accent-ledge)}
.cat .ci svg{width:27px;height:27px} .cat h3{font-size:1.2rem;font-weight:800;margin:0}
.cat .n{font-size:2.1rem;font-weight:800;line-height:1;margin-top:auto;padding-top:12px}
.cat .n small{font-size:.8rem;font-weight:700;opacity:.8}
.cat .meta{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.85rem;margin-top:6px}.cat .meta svg{width:16px;height:16px}
/* stat chips */
.stats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px}
.stat{display:inline-flex;gap:7px;align-items:center;font-size:.78rem;font-weight:800;padding:8px 13px;border-radius:13px;color:#fff;
  box-shadow:0 4px 0 var(--cl,rgba(0,0,0,.3)),inset 0 1px 0 rgba(255,255,255,.2)}
.stat b{font-size:1.1rem}
/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 4px}
.controls .inp{width:auto;flex:1 1 160px;padding:9px 12px;min-width:120px}
.controls select.inp{flex:0 1 170px}
/* article list */
.arts{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.art{border-radius:18px;padding:16px;color:#fff;background:var(--card);box-shadow:0 6px 0 var(--cl,var(--ledge)),0 14px 26px rgba(0,0,0,.26),inset 0 2px 0 rgba(255,255,255,.18)}
.art .ah{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.art .jud{font-size:1.06rem;font-weight:800;line-height:1.25;margin:0;flex:1 1 200px;min-width:0}
.art .mrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff;white-space:nowrap}
.pill.q1{background:var(--accent);color:#241a08;border-color:transparent}
.pill.gratis{background:var(--good);border-color:transparent}
.pill.bayar{background:rgba(226,59,59,.85);border-color:transparent}
.badge{display:inline-flex;align-items:center;font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#fff;flex:0 0 auto}
.st-draft{background:#64748b}.st-revisi{background:#c77d0a}.st-submit{background:#1273d4}.st-review{background:#5b34d6}.st-reject{background:#e23b3b}.st-terbit{background:#0e9f6e}
.dl{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.25);color:#fff}
.dl.late{background:var(--bad);box-shadow:0 2px 0 rgba(0,0,0,.25)} .dl.soon{background:var(--accent);color:#241a08}
.det{margin-top:12px;border-top:1px solid rgba(255,255,255,.2);padding-top:10px;font-size:.85rem;line-height:1.55;display:flex;flex-direction:column;gap:7px}
.det .k{font-weight:800;color:var(--title);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.art .act{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.emptybox{text-align:center;color:rgba(255,255,255,.9)}
details.det0>summary{cursor:pointer;list-style:none;font-size:.78rem;font-weight:800;color:#fff;padding:8px 0 2px;display:flex;align-items:center;gap:7px}
details.det0>summary::-webkit-details-marker{display:none}
details.det0>summary .tri{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
details.det0[open]>summary .tri{transform:rotate(90deg)}
.foot{margin-top:26px;text-align:center;color:var(--muted);font-size:.8rem;line-height:1.7}
/* color-block palette — di akhir biar menang */
.c-kobalt{background:#1540c9;--cl:#0e2f9e}.c-blue{background:#1b4fd1;--cl:#12349b}.c-teal{background:#0e8a86;--cl:#0a635f}
.c-magenta{background:#c42a84;--cl:#8f1d60}.c-amber{background:#c77d0a;--cl:#8f5a06}.c-indigo{background:#4338ca;--cl:#2f2790}
.c-violet{background:#5b34d6;--cl:#3f2399}.c-green{background:#0e9f6e;--cl:#0a7150}.c-rose{background:#d6336c;--cl:#9c2550}.c-slate{background:#2c3e57;--cl:#1b2738}