/* ========== Base Tokens ========== */
:root{
  --bg:#f6f8fb;        /* page background */
  --card:#ffffff;      /* card background */
  --ink:#0f172a;       /* text color */
  --muted:#667085;     /* secondary text */
  --ring:rgba(59,130,246,.18);   /* focus ring */
}

/* ========== Resets ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans';
}
img{max-width:100%; height:auto}

/* ========== Layout ========== */
.container-narrow{max-width:880px; margin:0 auto; padding:24px}
.card{
  background:var(--card); border-radius:22px; border:1px solid #e5e7eb;
  box-shadow:0 16px 40px rgba(0,0,0,.06); padding:24px;
}

/* ========== Masthead ========== */
.masthead{
  position:sticky; top:12px; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.04); margin-bottom:16px;
}
.mast-left,.mast-right{display:flex; align-items:center; gap:10px}
.masthead .logo{height:40px; width:auto; object-fit:contain}
.mast-title{line-height:1.15}
.mast-title .org{font-size:.95rem; color:#0f172a; font-weight:700}
.mast-title .app{font-size:.85rem; color:#64748b; font-weight:600}
.chip{
  display:inline-flex; align-items:center; height:24px; padding:0 8px;
  font-size:.78rem; font-weight:700; background:#e0e7ff; color:#1e3a8a;
  border:1px solid #c7d2fe; border-radius:999px;
}

/* ========== Hero ========== */
.hero{display:flex; flex-direction:column; gap:6px; margin-bottom:12px; text-align:center}
.hero h1{
  position:relative; display:inline-block; margin:0 0 6px;
  font-weight:800; font-size:clamp(28px,3vw,46px); line-height:1.15; letter-spacing:-.02em; color:#0f172a;
}
.hero h1::after{
  content:""; position:absolute; left:-10px; right:-10px; bottom:6px; height:.58em; border-radius:12px;
  background:linear-gradient(90deg,#ccf6d8 0%, #b7f0c7 100%); box-shadow:0 10px 24px rgba(16,185,129,.18);
  z-index:-1;
}
.hero p{margin:0; color:var(--muted)}

/* ========== Service Chips ========== */
.service-chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px; justify-content:center}
.chip-opt{
  border:1px solid #e5e7eb; background:#fff; border-radius:999px; padding:8px 14px;
  font-weight:800; cursor:pointer; transition:background .15s, border-color .15s, transform .05s;
}
.chip-opt:hover{background:#f8fafc}
.chip-opt.active{background:#111827; color:#fff; border-color:#111827}

/* ========== Rating Grid ========== */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:14px}
@media (max-width:640px){ .grid{grid-template-columns:1fr} }

/* ========== Rating Card ========== */
.btn-rate{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:100px; padding:18px 16px; cursor:pointer;
  border:1px solid #e5e7eb; border-radius:18px; background:#f8fafc;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn-rate:hover{background:#eef2f7; border-color:#d1d5db; transform:translateY(-1px)}
.btn-rate:focus-visible{outline:0; box-shadow:0 0 0 6px var(--ring)}
.btn-rate .emoji{font-size:28px; line-height:1}
.btn-rate .label{font-weight:800}

/* Active look + ring */
.btn-rate.active{
  background:linear-gradient(180deg,#f0fdf4 0%, #e8f9ee 100%);
  border-color:#3b82f6;
  box-shadow:0 0 0 6px var(--ring), 0 10px 24px rgba(16,185,129,.12);
}

/* Bulatan hijau + centang — KANAN ATAS */
.btn-rate.active::after{
  content:""; position:absolute; right:14px; top:12px;
  width:28px; height:28px; border-radius:9999px; background:#22c55e;
  box-shadow:0 10px 20px rgba(34,197,94,.35); z-index:1; pointer-events:none;
  /* pastikan tidak ada sisa properti yang mengunci di kiri */
  left:auto; bottom:auto;
}
.btn-rate.active::before{
  content:""; position:absolute; right:23px; top:18px;
  width:8px; height:14px; border:solid #fff; border-width:0 3px 3px 0;
  transform:rotate(45deg); z-index:2; pointer-events:none;
}

/* ========== Form Controls ========== */
.form-label{font-weight:800; color:#334155; margin:14px 0 6px}
.form-control{border-radius:14px; border:1px solid #e5e7eb; box-shadow:0 2px 0 rgba(0,0,0,.02) inset}
.form-control:focus{border-color:#94a3b8; box-shadow:0 0 0 4px #93c5fd55}

/* Counter */
.char-count{font-size:.85rem; color:#9aa3af; float:right; margin-top:6px}
.char-count.warn{color: