:root{--brand:#c2a502;--brand-2:#ffe100;--ink:#111;--bg:#fafafa;--card:#fff;--muted:#666;--radius:14px;--border:#eee;--shadow:0 10px 30px rgba(0,0,0,.08);--font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial;}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg)}.container{max-width:1200px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:60;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)}
.header-inner{display:grid;grid-template-columns:220px 1fr 120px;gap:16px;align-items:center;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;color:#111;font-weight:900}.brand img{height:40px}
.search{display:flex;gap:8px;align-items:center;background:#fff;border-radius:999px;padding:8px 12px;border:1px solid var(--border)}.search input{flex:1;border:none;outline:none;font-size:14px}
.actions{display:flex;gap:12px;justify-content:flex-end}.actions .pill{background:#fff;border:1px solid var(--border);padding:10px 12px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;font-weight:800}
.hero{background:#fff;box-shadow:var(--shadow)}.hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:center;padding:18px 0}.hero img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.cats .card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.cats .card img{display:block;width:100%;height:auto}
.grid{display:grid;grid-template-columns:220px 1fr;gap:18px;margin:18px 0}.sidebar{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:var(--shadow)}.sidebar h3{margin:0 0 10px}.sidebar ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.sidebar a{color:#333;text-decoration:none}
.main .card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.table{margin-top:8px;border:1px solid var(--border);border-radius:12px;overflow:hidden}.row{display:grid;grid-template-columns:260px 1fr;border-top:1px solid var(--border)}.row:first-child{border-top:none}.cell{padding:12px 14px;background:#fff}.cell:nth-child(1){background:#fafafa;font-weight:700}
.badges{display:flex;gap:8px;align-items:center}.star{width:16px;height:16px}.btns{display:flex;gap:12px;margin-top:12px}.btn{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#111;font-weight:900;border:none;padding:12px 16px;border-radius:10px;cursor:pointer;box-shadow:0 10px 20px rgba(255,139,61,.2)}.btn:active{transform:translateY(1px)}
.faq{display:grid;gap:10px}.faq details{border:1px solid var(--border);border-radius:10px;background:#fff;padding:12px}.faq summary{font-weight:800;cursor:pointer}
footer{margin:20px 0 0;background:#111;color:#eee}.footer-inner{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:16px;padding:24px 16px}footer h4{margin:4px 0 8px}footer a{color:#eee;text-decoration:none;opacity:.9}footer a:hover{opacity:1}.news{display:flex;gap:8px}.news input{flex:1;border-radius:8px;border:1px solid #444;padding:10px;background:#222;color:#eee}.copy{background:#000;color:#bbb;font-size:13px;text-align:center;padding:12px}
@media (max-width: 960px){.header-inner{grid-template-columns:1fr}.actions{justify-content:flex-start}.hero .wrap{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.footer-inner{grid-template-columns:1fr}}
 .button-login-daftar {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        font-weight: 700;
                    }
                    .button-login-daftar a {
                        text-align: center;
                        text-decoration: none;
                    }
                    .login,
                    .register {
                        color: #000000;
                        padding: 20px 10px;
                    }
                    .login,
                    .login-button {
                        border: 1px solid #fff;
                        background: linear-gradient(to top, #c2a502 0%, #ffe100 100%);
                        border: 2px solid #ffffff;
                    }
                    .register,
                    .register-button {
                        background: linear-gradient(to top, #c2a502 0%, #ffe100  100%);
                        border: 2px solid #ffffff;
                    }