@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Chewy&display=swap');
/* Jika punya file Funtastic: taruh di fonts/ lalu aktifkan baris ini */
/* @font-face{font-family:'Funtastic';src:url('fonts/Funtastic.woff2') format('woff2');} */
:root{--blue:#5f8bb9;--cream:#fcf8d8;--brown:#772c00;--amber:#ad6a00;--sand:#ffd98a;--avatar:#7d5c1b}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--brown);font-family:'Poppins',sans-serif}
h1,h2,h3,.who{font-family:'Funtastic','Chewy',cursive;font-weight:400}
.top{position:relative;display:flex;justify-content:space-between;align-items:center;background:var(--blue);padding:14px 18px;color:#fff}
.burger{display:flex;flex-direction:column;gap:7px;cursor:pointer;padding:6px}.burger i{display:block;width:34px;height:4px;border-radius:4px;background:#fff}
.who{display:flex;align-items:center;gap:12px;font-size:1.3rem;min-width:0}.who #who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}
.av{width:44px;height:44px;border-radius:50%;background:var(--avatar);display:grid;place-items:center;flex:none}.av svg{width:30px}
.drawer{display:none;position:absolute;left:0;top:100%;background:var(--blue);padding:8px 0;border-radius:0 0 18px 0;z-index:5;min-width:200px}
#mt:checked + .top .drawer{display:block}.drawer a{display:block;padding:12px 22px;color:#fff;text-decoration:none;font-weight:600}
main{max-width:700px;margin:0 auto;padding:28px 16px 60px;text-align:center}
h1{font-size:clamp(1.9rem,7vw,3.2rem);color:var(--brown);margin:.3em 0 .6em}
.sub{font-family:'Poppins';font-weight:600;font-size:1.6rem;color:var(--blue);margin:.4em 0 .8em}
.panel{background:var(--blue);border-radius:36px;padding:18px;display:flex;flex-direction:column;gap:14px;text-align:left;margin:0 auto 20px;max-width:560px}
.panel h2{color:#fff;font-size:1.6rem;margin:.2em 4px}.panel h3{color:var(--sand);font-family:'Poppins';font-weight:600;margin:6px 4px 0}
.panel p,.panel label.t{color:#fff;margin:2px 6px}
.dd,.panel textarea,.panel input.dd{width:100%;border:0;border-radius:999px;background:var(--amber);color:var(--sand);padding:15px 18px;font:600 1rem 'Poppins'}
select.dd{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 0h20L10 16z' fill='%23772c00'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:22px;padding-right:50px}
select.dd:disabled{opacity:1}
.panel textarea{border-radius:22px;min-height:90px;font-weight:500}.dd::placeholder,textarea::placeholder{color:#e8bf72}
.scale{display:flex;gap:8px}.scale button{flex:1;padding:12px 0;border:0;border-radius:999px;background:var(--amber);color:var(--sand);font:600 1rem 'Poppins';cursor:pointer}
.scale button.on{background:var(--brown);color:#fff}
.hint{display:flex;justify-content:space-between;color:#fff;font-size:.75rem;padding:0 6px}
.check{display:flex;gap:10px;color:#fff;margin:4px 6px}
.btn{border:0;border-radius:999px;background:var(--brown);color:var(--sand);padding:15px;font:600 1.05rem 'Poppins';cursor:pointer;text-decoration:none;text-align:center}
.err{color:#fff;background:#b3261e;border-radius:14px;padding:0 12px;font-size:.9rem}.err:not(:empty){padding:8px 12px}
.card{background:#fff;border-radius:22px;padding:16px;margin:14px 0;text-align:left;color:#333}
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.tabs a{padding:9px 16px;border-radius:999px;background:var(--amber);color:var(--sand);text-decoration:none;font-weight:600}.tabs a.on{background:var(--brown);color:#fff}
.wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.88rem}td,th{padding:8px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.muted{opacity:.6}a{color:var(--blue)}.btn.sm{padding:8px 14px;font-size:.85rem;background:#b3261e;color:#fff}