:root{
  --hijau:#0f766e; --hijau-tua:#0b524c; --hijau-tg:#0d7a3c; --bg:#f5faf9; --card:#ffffff;
  --teks:#1f2937; --teks-lembut:#6b7280; --border:#e2e8f0; --kuning:#f59e0b;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--teks);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
header.top{
  background:linear-gradient(135deg,var(--hijau),var(--hijau-tua));
  color:#fff; padding:20px 18px;
}
.header-inner{display:flex; align-items:center; gap:12px; max-width:640px; margin:0 auto;}
.header-logo{width:48px; height:48px; border-radius:50%; background:#fff; flex-shrink:0; padding:3px;}
.header-logo img{width:100%; height:100%; object-fit:contain; display:block;}
header.top h1{margin:0 0 3px; font-size:1.25rem;}
header.top p{margin:0; opacity:.92; font-size:.85rem;}
.wrap{max-width:640px; margin:0 auto; padding:14px 14px 40px;}
.tabs{display:flex; gap:8px; margin:14px 0;}
.tabs a{
  flex:1; text-align:center; padding:10px 6px; border-radius:10px; font-size:.88rem;
  background:var(--card); border:1px solid var(--border); font-weight:600; color:var(--teks-lembut);
  text-decoration:none;
}
.tabs a.active{background:var(--hijau); color:#fff; border-color:var(--hijau);}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:12px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{
  padding:13px 0; font-size:.95rem; font-weight:600; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{color:var(--hijau); font-weight:700;}
.faq-item p{font-size:.88rem; color:var(--teks-lembut); line-height:1.55; margin:0 0 14px;}
.st{font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--hijau); font-weight:700; margin:18px 2px 8px;}
label{display:block; font-size:.82rem; font-weight:600; margin:10px 0 4px; color:var(--teks-lembut);}
input[type=text], textarea, input[type=password]{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:.92rem;
  background:var(--bg); color:var(--teks); font-family:inherit; resize:vertical;
}
textarea{min-height:80px;}
button, .btn{
  margin-top:14px; display:inline-block; text-align:center; width:100%; background:var(--hijau); color:#fff; border:none; border-radius:10px;
  padding:12px; font-size:.95rem; font-weight:700; cursor:pointer; text-decoration:none; box-sizing:border-box;
}
.hint{font-size:.76rem; color:var(--teks-lembut); margin-top:6px;}
.qa-item{border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.qa-meta{font-size:.72rem; color:var(--teks-lembut); margin-bottom:4px;}
.qa-q{font-size:.9rem; font-weight:600; margin:0 0 8px;}
.qa-a{font-size:.87rem; background:var(--bg); border-radius:8px; padding:8px 10px;}
.badge{display:inline-block; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:99px;}
.badge.menunggu{background:#fef3c7; color:#92400e;}
.badge.terjawab{background:#d1fae5; color:#065f46;}
.small-btn{
  font-size:.76rem; font-weight:700; background:none; border:1px solid var(--hijau); color:var(--hijau);
  padding:5px 10px; border-radius:8px; cursor:pointer; margin-top:6px; text-decoration:none; display:inline-block;
}
.empty{font-size:.85rem; color:var(--teks-lembut); text-align:center; padding:20px 0;}
.contact-note{font-size:.8rem; color:var(--teks-lembut); background:var(--bg); border-radius:10px; padding:10px 12px; margin-top:14px; line-height:1.6;}
.contact-note a{color:var(--hijau); font-weight:700; text-decoration:none;}
.grid2{display:flex; gap:10px;}
.pill{flex:1; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:.82rem;}
.pill b{display:block; font-size:.78rem; color:var(--hijau); margin-bottom:2px;}
.alert{padding:10px 12px; border-radius:10px; font-size:.85rem; margin-bottom:12px;}
.alert.ok{background:#d1fae5; color:#065f46;}
.alert.err{background:#fee2e2; color:#991b1b;}
.topbar-admin{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.topbar-admin a{font-size:.8rem; color:var(--hijau); text-decoration:none; font-weight:700;}