:root{--ink:#14151A;--bg:#EEF2F7;--card:#fff;--acc:#FFD23F;--mut:#5A5F6B;--soft:#FFF3C2;--line:#D5DBE5}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:16px;line-height:1.45;padding-bottom:84px}
a{color:inherit}
.atas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;max-width:720px;margin:0 auto}
.logo{font-size:22px;font-weight:800;text-decoration:none}
.atas nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wrap{max-width:720px;margin:0 auto;padding:4px 16px 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--acc);color:var(--ink);font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.btn.gelap{background:var(--ink);color:var(--acc)}
.btn.garis{background:transparent;border:2px solid var(--ink)}
.btn.kecil{min-height:36px;padding:0 14px;font-size:14px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.tab{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:22px;background:var(--card);font-weight:600;text-decoration:none}
.tab.on{background:var(--ink);color:var(--acc)}
.kartu{display:block;background:var(--card);border-radius:20px;padding:14px 16px;margin-bottom:10px;text-decoration:none}
.kartu h3{margin:4px 0 0;font-size:18px;font-weight:800;line-height:1.3}
.meta{font-size:13px;color:var(--mut)}
.terlucu{margin-top:8px;background:var(--soft);border-radius:12px;padding:8px 12px;font-size:14px}
.banner{background:var(--acc);border-radius:20px;padding:14px 16px;margin-bottom:10px}
.banner h2{margin:4px 0 6px;font-size:19px}
.flash{border-radius:14px;padding:10px 14px;margin:8px 0;font-size:15px}
.flash.sukses{background:#C7F0B8}.flash.galat{background:#FFD3D0}
.form label{display:block;font-size:14px;font-weight:600;color:var(--mut);margin:12px 0 6px}
.form input[type=text],.form input[type=email],.form input[type=password],.form input[type=number],.form input[type=url],.form select,.form textarea,.form input[type=file]{width:100%;border:0;border-radius:16px;background:var(--card);padding:14px 16px;font:inherit;color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.cek{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:16px;padding:12px 16px;margin-top:12px}
.cek input{width:22px;height:22px}
.post{background:var(--card);border-radius:20px;padding:14px 16px;margin-bottom:12px}
.post h1{margin:6px 0;font-size:22px}
.post img,.post iframe{width:100%;border-radius:14px;margin-top:10px;border:0}
.post iframe{aspect-ratio:16/9}
.isi{white-space:normal;word-wrap:break-word}
.rxbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rx-form{margin:0}
.rx{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:0;border-radius:16px;background:var(--bg);font:inherit;font-size:13px;color:var(--ink)}
button.rx{cursor:pointer}.rx.on{background:var(--acc);font-weight:800}
.bagian{display:flex;gap:8px;margin-bottom:10px}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--ink)}
.bubble{background:var(--card);border-radius:6px 18px 18px 18px;padding:10px 14px;max-width:100%}
.bubble .nama{font-size:13px;font-weight:600;color:var(--mut)}
.bubble.saya{background:var(--ink);color:#fff;border-radius:18px 6px 18px 18px}
.bubble.saya .nama{color:var(--acc)}
.bubble.saya .rx{background:#2B2D36;color:#fff}
.bubble.sembunyi{opacity:.6;font-style:italic}
.cerita .bagian.saya{flex-direction:row-reverse}
.aksi{font-size:13px;margin-top:6px}
.aksi summary{cursor:pointer;display:inline-block;min-height:32px;line-height:32px;margin-right:12px;color:var(--mut)}
.aksi form{margin:6px 0}
.aksi input[type=text],.aksi textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit}
.cabang{display:block;margin:4px auto 12px;text-align:center;font-size:14px;font-weight:600}
.statistik{display:flex;gap:10px;margin:12px 0}
.statistik div{flex:1;background:var(--card);border-radius:16px;padding:12px;text-align:center;font-size:13px;color:var(--mut)}
.statistik b{display:block;font-size:22px;color:var(--ink)}
.saldo{background:var(--ink);color:#fff;border-radius:24px;padding:18px 20px;margin-bottom:12px}
.saldo b{display:block;font-size:40px;line-height:1.1;color:#fff}
.saldo .meta{color:#C9CDD6}
.baris{display:flex;justify-content:space-between;gap:10px;background:var(--card);border-radius:16px;padding:12px 16px;margin-bottom:8px}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden;font-size:14px}
th,td{padding:10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.bawah{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;display:flex;justify-content:space-around;align-items:center;padding:8px 8px 14px;box-shadow:0 -4px 16px rgba(20,21,26,.08)}
.bawah a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;font-size:14px;color:var(--mut);text-decoration:none}
.bawah a.on{color:var(--ink);font-weight:800}
.bawah .tambah{width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--ink);justify-content:center;font-size:28px;font-weight:800;padding:0}
h2.judul{font-size:20px;margin:16px 0 8px}
@media(min-width:760px){.bawah{display:none}body{padding-bottom:24px}}
@media(max-width:759px){.atas nav .desk{display:none}}