/* Survei Kepuasan Layanan Kesehatan · TelkoMedika (mobile first) */
:root{--bg:#eaf2fe;--surface:#fff;--ink:#0f1b2d;--ink-2:#44516a;--muted:#6b778c;--line:#dfe6f0;--accent:#1d5fc4;--accent-2:#3b82f6;--soft:#e9f1fd;--star:#f5b301;--danger:#c02d2d;--ok:#138a63;--r:18px;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,#d7e6ff 0%,transparent 60%),radial-gradient(900px 500px at 110% 10%,#dff3ea 0%,transparent 55%),var(--bg);min-height:100vh;-webkit-text-size-adjust:100%}
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(29,95,196,.12);z-index:10}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2),#1baf7a);transition:width .35s ease;border-radius:0 4px 4px 0}
.shell{max-width:620px;margin:0 auto;padding:22px 16px 40px}
.brand{display:flex;align-items:center;margin:4px 0 18px}
.brand img{height:54px;width:auto;display:block}
.brand svg{width:34px;height:34px}
.brand svg path{fill:#e1253b}
.brand svg path.pulse{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.brand b{color:#e1253b;font-weight:800}
.brand span{font-weight:700}
.hero{background:linear-gradient(140deg,#123f8c,#1d5fc4 55%,#3b82f6);color:#fff;border-radius:24px;padding:34px 26px;box-shadow:0 18px 40px rgba(29,95,196,.28)}
.kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:999px;padding:5px 12px}
.hero h1{font-size:27px;line-height:1.2;margin:16px 0 10px;letter-spacing:-.02em}
.hero p{margin:0 0 24px;opacity:.9;line-height:1.55}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:12.5px;opacity:.85}
.card{background:var(--surface);border-radius:var(--r);padding:24px 20px;box-shadow:0 10px 30px rgba(15,27,45,.07);border:1px solid rgba(15,27,45,.04)}
.card h2{font-size:21px;margin:6px 0 18px;letter-spacing:-.01em}
.q-num{font-size:12.5px;font-weight:600;color:var(--accent)}
.link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.btn-primary{font:inherit;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));border:0;border-radius:14px;padding:13px 22px;cursor:pointer;box-shadow:0 8px 20px rgba(29,95,196,.3);transition:transform .1s}
.btn-primary:active{transform:scale(.98)}
.btn-primary.big{width:100%;font-size:16px;padding:16px}
.hero .btn-primary{background:#fff;color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-primary:disabled{opacity:.7;cursor:wait}
.btn-primary.loading{background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));background-size:200% 100%;animation:shine 1s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.choices{display:grid;gap:12px}
.choice{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;font:inherit;color:var(--ink);background:#f7faff;border:2px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.choice:hover{border-color:var(--accent);background:var(--soft)}
.choice:active{transform:scale(.99)}
.choice .ico{grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;font-size:24px;background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(15,27,45,.08)}
.choice b{font-size:16px}
.choice small{color:var(--muted);font-size:12.5px}
.field{display:block;margin:18px 0}
.lbl{display:block;font-weight:700;font-size:14.5px;margin-bottom:8px}
.lbl i,.rate-q i,.consent i{color:var(--danger);font-style:normal}
input,textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#f7faff;border:2px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .15s,background .15s}
input:focus,textarea:focus{border-color:var(--accent);background:#fff}
.hint{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.picker{position:relative}
#provider-list{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:280px;overflow:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 32px rgba(15,27,45,.14);z-index:5}
#provider-list li{padding:9px 10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
#provider-list li:hover{background:var(--soft)}
#provider-list li b{font-weight:600;font-size:14px}
#provider-list li small{color:var(--muted);font-size:12px}
#provider-list li.none{color:var(--muted);font-size:13px;cursor:default}
.rate{border:2px solid var(--line);border-radius:16px;padding:14px 14px 12px;margin:0 0 12px;transition:border-color .15s,background .15s}
.rate.done{border-color:#cfe0f8;background:#fbfdff}
.rate.missing{border-color:#f0b4b4;background:#fff6f6;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.rate-q{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:14.5px;line-height:1.4;text-align:left}
.rate .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700}
.stars{display:flex;gap:6px;margin:10px 0 4px}
.star{flex:1;max-width:58px;aspect-ratio:1;border:0;background:none;padding:2px;cursor:pointer;transition:transform .12s}
.star:active{transform:scale(.9)}
.star svg{width:100%;height:100%;fill:#e3e8f0;transition:fill .12s,filter .12s}
.star.on svg{fill:var(--star);filter:drop-shadow(0 2px 4px rgba(245,179,1,.45))}
.star:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.rate-lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.rate-lbl[data-v="1"],.rate-lbl[data-v="2"]{color:var(--danger)}
.rate-lbl[data-v="3"]{color:#b07a00}
.rate-lbl[data-v="4"],.rate-lbl[data-v="5"]{color:var(--ok)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-2);background:#f7faff;border-radius:12px;padding:12px 14px;margin:18px 0}
.consent input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:var(--danger);background:#fdeeee;border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600}
.done{text-align:center;padding:40px 24px}
.done p{color:var(--ink-2);line-height:1.6}
.done .small{font-size:13px;color:var(--muted)}
.check svg{width:84px;height:84px}
.check circle{fill:none;stroke:#1baf7a;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s ease forwards}
.check path{fill:none;stroke:#1baf7a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:22px}
@media (min-width:560px){.hero{padding:44px 38px}.hero h1{font-size:32px}.card{padding:30px 30px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}