:root{
  --bg:#f6f8fb; --card:#ffffff; --accent:#1b5e20; --accent2:#0d47a1; --danger:#c62828; --text:#1f2937;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans';}
.container-narrow{max-width:780px;margin:0 auto;padding:24px}
.card{background:var(--card);border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:24px}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.brand .title{font-size:1.125rem;font-weight:800;letter-spacing:.3px}
.hero{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.hero h1{font-size:1.75rem;margin:0}
.hero p{margin:0;color:#667085}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.btn-rate{border:0;border-radius:18px;padding:18px;cursor:pointer;background:#f3f4f6;transition:.2s;
  display:flex;align-items:center;gap:14px;justify-content:center;min-height:88px}
.btn-rate:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.emoji{font-size:40px;line-height:1}.label{font-weight:800}
.variant-green{background:#e8f5e9}.variant-blue{background:#e3f2fd}.variant-amber{background:#fff8e1}.variant-red{background:#ffebee}
footer{margin-top:24px;color:#9aa3af;font-size:.875rem;text-align:center}
.success{font-size:2rem;text-align:center;padding:40px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.badge{font-size:.75rem;color:#155e75;background:#e0f2fe;padding:6px 10px;border-radius:999px;font-weight:800}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #eee;font-size:.95rem}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:#ffffff;border-radius:16px;padding:16px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.kpi .num{font-size:1.5rem;font-weight:900}.kpi .lab{font-size:.85rem;color:#6b7280}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}
.toolbar input,.toolbar button,.toolbar select{padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff}
.toolbar button{cursor:pointer;border:0;background:#111827;color:#fff}
.toolbar a.btn{display:inline-block;padding:10px 12px;border-radius:10px;background:#111827;color:#fff;text-decoration:none}
.chartwrap{background:#fff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.05);padding:16px;margin:12px 0}
.notice{padding:10px 12px;border-radius:10px;background:#f1f5f9;color:#0f172a;font-size:.9rem}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:12px}
#pdfArea{position:relative}
.pdf-watermark{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);
  font-weight:900;font-size:64px;letter-spacing:2px;color:rgba(0,0,0,.06);pointer-events:none;
  user-select:none;white-space:nowrap;text-transform:uppercase}
@media (max-width:600px){ .pdf-watermark{ font-size:40px } }

.btn-rate.active{outline:3px solid rgba(17,24,39,.2); box-shadow:0 0 0 3px rgba(17,24,39,.08) inset}

@media print{ .table th, .table td{ font-size:.8rem } h3{ page-break-after: avoid } }


/* === UI/UX Revamp === */
:root{
  --bg:#f7f9fc; --card:#ffffff; --ink:#0f172a; --muted:#6b7280;
  --brand:#1b5e20; --brand-2:#0d47a1; --ring:#11182720;
  --good:#e8f5e9; --ok:#e3f2fd; --mid:#fff8e1; --bad:#ffebee;
}
body{background:
  radial-gradient(1200px 800px at -10% -10%, #dbeafe55, transparent 50%),
  radial-gradient(900px 700px at 110% 10%, #bbf7d055, transparent 60%),
  var(--bg);
  color:var(--ink);}
.container-narrow{max-width:880px;margin:0 auto;padding:28px}
.card{background:var(--card);border-radius:22px;border:1px solid #e5e7eb;
  box-shadow:0 16px 40px rgba(0,0,0,.06);padding:28px}

.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:18px}
.masthead .logo{width:56px;height:56px;object-fit:contain}
.masthead .title{text-align:center}
.masthead .title .app{font-weight:900;letter-spacing:.2px;font-size:clamp(18px,2.3vw,22px)}
.masthead .title .org{opacity:.85;font-weight:700;font-size:clamp(14px,1.8vw,16px)}
.chip{font-size:.75rem;background:#e0f2fe;color:#0c4a6e;padding:6px 10px;border-radius:999px;font-weight:800}
.right-align{justify-self:end;display:flex;align-items:center;gap:8px}

.hero{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.hero h1{font-size:clamp(26px,3.4vw,36px);margin:0;line-height:1.25}
.hero p{margin:0;color:#667085}

.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}}

.btn-rate{border:1px solid #e5e7eb;border-radius:20px;padding:18px 20px;cursor:pointer;
  background:#f8fafc;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display:flex;align-items:center;gap:14px;justify-content:flex-start;min-height:110px;position:relative;overflow:hidden}
.btn-rate .emoji{font-size:44px;line-height:1}
.btn-rate .label{font-weight:900;letter-spacing:.2px}
.btn-rate::after{content:'';position:absolute;inset:0;border-radius:20px;box-shadow:0 0 0 0 var(--ring);transition:box-shadow .15s ease}
.btn-rate:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.btn-rate:focus-visible::after,.btn-rate.active::after{box-shadow:0 0 0 6px var(--ring)}
.btn-rate.good{background:linear-gradient(180deg, #f3faf5, #ffffff);}
.btn-rate.ok{background:linear-gradient(180deg, #f1f7ff, #ffffff);}
.btn-rate.mid{background:linear-gradient(180deg, #fff9ec, #ffffff);}
.btn-rate.bad{background:linear-gradient(180deg, #fff0f3, #ffffff);}

.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}

.footer-note{margin-top:18px;color:#94a3b8;font-size:.9rem;text-align:center}

.actions{display:flex;gap:10px;margin-top:12px}
.btn-primary{background:linear-gradient(180deg,#111827,#0b1220) !important;border:0 !important}
.btn-primary:disabled{background:#9ca3af !important}


/* === Dynamic polish (lightweight) === */
@media (max-width:640px){
  .container-narrow{padding:18px}
  .card{padding:18px}
  .btn-rate{min-height:96px}
  .masthead .logo{width:48px;height:48px}
}

.service-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.chip-opt{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.chip-opt.active{background:#111827;color:#fff;border-color:#111827}
@media (max-width:640px){
  #serviceSelect{display:none}
}

.btn-rate{position:relative;overflow:hidden}
.btn-rate .rip{position:absolute;border-radius:999px;transform:translate(-50%,-50%);
  background:rgba(17,24,39,.12); pointer-events:none; animation:rip .6s ease-out}
@keyframes rip{from{width:0;height:0;opacity:.5} to{width:320px;height:320px;opacity:0}}

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

.sticky-cta{position:fixed;left:0;right:0;bottom:12px;display:none;z-index:40}
.sticky-cta .wrap{max-width:880px;margin:0 auto;padding:0 18px}
.sticky-cta .btn{width:100%;padding:14px 16px;border-radius:14px;border:0;background:#111827;color:#fff;font-weight:900}
.sticky-cta.show{display:block}
@media (min-width:641px){ .sticky-cta{display:none !important} }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-rate, .btn{transition:none}
}


/* === Emoji dynamics (hover & active) === */
.btn-rate .emoji{transition:transform .15s ease}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.btn-rate:hover .emoji{animation:pulse .45s}
.btn-rate.good:hover .emoji{animation:bounce .55s}
.btn-rate.bad:hover .emoji{animation:shake .35s}
.btn-rate.active .emoji{animation:pop .45s ease-out}
.btn-rate.tapped .emoji{animation:pop .45s ease-out}'

.site-header{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:#fff;
  border-bottom:1px solid #eef2f7; position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#0f172a; }
.logo-stack{ display:flex; align-items:center; gap:8px; }
.brand-logo{ width:36px; height:36px; object-fit:contain; display:block; }

.brand-text .school{ display:block; font-weight:600; font-size:14px; color:#1f2937; line-height:1.1; }
.brand-text .title{ display:block; font-weight:800; font-size:22px; color:#0f172a; line-height:1.15; }

.pill{
  margin-left:auto; font-weight:800;
  background:#dbeafe; color:#1e40af;
  padding:.35rem .75rem; border-radius:9999px;
  letter-spacing:.3px;
}

@media (max-width:480px){
  .brand-logo{ width:32px; height:32px; }
  .brand-text .title{ font-size:18px; }
}
/* ===== Header / Masthead ===== */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; 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}
.mast-title{line-height:1.1}
.mast-title .org{font-size:.85rem; color:#64748b; font-weight:600}
.mast-title .app{font-size:1.05rem; font-weight:800; color:#0f172a; letter-spacing:.2px}

/* Pastikan logo tidak “meledak” */
.masthead .logo{
  height:42px; width:auto; max-width:100%;
  object-fit:contain; flex:0 0 auto;
}

/* Chip “PTSP” */
.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;
}

/* Perapihan global gambar (jaga-jaga) */
img{max-width:100%; height:auto}

/* Mobile */
@media (max-width: 560px){
  .masthead{padding:8px 10px; border-radius:12px; gap:10px}
  .masthead .logo{height:34px}
  .mast-title .app{font-size:1rem}
  .mast-title .org{font-size:.8rem}
  .chip{height:22px; font-size:.72rem}
}