:root{--bg:#f8f5ef;--ink:#111;--y:#fdbd10;--o:#ff5a0a;--p:#ff9ec0;--w:#fff}
*{box-sizing:border-box;margin:0}
body{background:#d8d3c8;font-family:'Archivo',system-ui,sans-serif;font-weight:500;color:var(--ink);display:flex;justify-content:center}
a{color:inherit}
:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.wrap{width:100%;max-width:480px;min-height:100vh;background:var(--bg);border-inline:3px solid var(--ink);display:flex;flex-direction:column}
.bar{background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px}
.h{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.04em;color:var(--y)}
.soc{display:flex;gap:8px}
.soc a{min-width:34px;height:34px;display:grid;place-items:center;border:2px solid #fff;font:16px 'Anton',sans-serif;text-decoration:none;padding:0 6px}
.soc a:hover{background:var(--y);color:var(--ink);border-color:var(--y)}
.hero{position:relative;padding:34px 20px 26px;background-image:radial-gradient(var(--ink) 1.4px,transparent 1.6px);background-size:10px 10px;background-position:right top;background-repeat:no-repeat;background-clip:border-box}
.hero h1{font:clamp(54px,17vw,84px)/.92 'Anton',sans-serif;text-transform:uppercase;max-width:85%;overflow-wrap:anywhere}
.hero p{margin-top:14px;max-width:78%;font-weight:700;font-size:16px}
.sq{position:absolute;right:22px;width:26px;height:26px}
.sq.a{top:46px;background:var(--y)}.sq.b{top:72px;right:0;background:var(--ink)}
.links{display:flex;flex-direction:column;gap:16px;padding:6px 20px 34px;flex:1}
.btn{display:flex;justify-content:space-between;align-items:stretch;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn .t{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.btn b{font:22px/1.1 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em}
.btn small{font-size:13px;font-weight:500}
.btn .go{background:var(--ink);color:#fff;display:grid;place-items:center;padding:0 18px;font-size:22px}
.c-y{background:var(--y)}.c-o{background:var(--o)}.c-w{background:var(--w)}.c-p{background:var(--p)}
.c-k{background:var(--ink);color:#fff}.c-k .go{background:var(--y);color:var(--ink)}
.btn.feat{position:relative;margin-top:10px;box-shadow:8px 8px 0 var(--ink)}
.btn.feat b{font-size:30px}.btn.feat .t{padding:22px 18px}
.btn.feat::before{content:"Terbaru";position:absolute;top:-14px;left:14px;background:var(--ink);color:var(--y);font:14px 'Anton',sans-serif;padding:3px 10px}
/* admin */
.adm{padding:20px;display:flex;flex-direction:column;gap:16px}
.adm h2{font:26px 'Anton',sans-serif;text-transform:uppercase}
.card{border:3px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink);padding:14px;display:grid;gap:10px}
.adm label{display:grid;gap:4px;font-size:13px;font-weight:700}
.adm input[type=text],.adm input[type=email],.adm input[type=password],.adm input[type=url],.adm select{width:100%;padding:10px;border:2px solid var(--ink);background:var(--bg);font:inherit}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adm .chk{display:flex;align-items:center;gap:6px}
.b{border:3px solid var(--ink);background:var(--y);font:16px 'Anton',sans-serif;padding:9px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.b:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.b.o{background:var(--o)}.b.w{background:#fff}
.err{color:#c00;font-weight:700;font-size:14px}
[hidden]{display:none!important}