/* ============================================================
   skm.css — Modal Survei Kepuasan Masyarakat (palet Pine)
============================================================ */
.skm-overlay{position:fixed;inset:0;background:rgba(22,48,42,.5);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.skm-overlay[hidden]{display:none}
.skm-box{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:skmIn .3s ease}
@keyframes skmIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.skm-tutup{position:absolute;top:12px;right:16px;background:none;border:0;font-size:30px;line-height:1;color:#9aa39e;cursor:pointer;z-index:2}
.skm-tutup:hover{color:#23302c}

.skm-head{padding:26px 28px 16px;background:linear-gradient(135deg,#0A3C43,#072d33);color:#fff;border-radius:18px 18px 0 0}
.skm-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dcc488;margin-bottom:6px}
.skm-head h2{margin:0 0 6px;font-size:1.4rem;font-weight:800;font-family:'Fraunces',serif}
.skm-head p{margin:0;font-size:.86rem;color:#cdded7;line-height:1.5}

#skmForm{padding:18px 28px 24px}
.skm-bagian-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#2E7D6B;margin:18px 0 12px;padding-bottom:6px;border-bottom:2px solid #e2e5e0}
.skm-bagian-label:first-child{margin-top:0}
.skm-bagian-label span{color:#9aa39e;font-weight:600;text-transform:none;letter-spacing:0}

.skm-unsur{margin-bottom:16px}
.skm-unsur-teks{margin-bottom:7px}
.skm-unsur-teks b{display:block;font-size:.92rem;color:#0A3C43;font-weight:700}
.skm-unsur-teks span{display:block;font-size:.8rem;color:#6c7975;line-height:1.45;margin-top:1px}

.skm-skala{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.skm-skala button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:1.5px solid #e2e5e0;background:#fff;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:800;color:#6c7975;transition:all .14s;font-family:inherit}
.skm-skala button small{font-size:.62rem;font-weight:600;color:#9aa39e;line-height:1.1;text-align:center}
.skm-skala button:hover{border-color:#2E7D6B}
.skm-skala button.pilih{background:#2E7D6B;border-color:#2E7D6B;color:#fff}
.skm-skala button.pilih small{color:#dcecE6}

.skm-b{margin-bottom:16px}
.skm-q{display:block;font-size:.9rem;color:#0A3C43;font-weight:700;margin-bottom:8px;line-height:1.45}
.skm-pilihan{display:flex;gap:8px;flex-wrap:wrap}
.skm-pilihan button{padding:9px 20px;border:1.5px solid #e2e5e0;background:#fff;border-radius:999px;cursor:pointer;font-size:.86rem;font-weight:700;color:#6c7975;transition:all .14s;font-family:inherit}
.skm-pilihan button:hover{border-color:#2E7D6B}
.skm-pilihan button.pilih{background:#2E7D6B;border-color:#2E7D6B;color:#fff}
#skmB12{width:100%;box-sizing:border-box;border:1.5px solid #e2e5e0;border-radius:10px;padding:11px 13px;font-size:.9rem;font-family:inherit;resize:vertical;color:#23302c}
#skmB12:focus{outline:none;border-color:#2E7D6B}

.skm-galat{background:#fdecec;color:#c0392b;padding:10px 14px;border-radius:9px;font-size:.85rem;font-weight:600;margin-bottom:14px}
.skm-aksi{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:8px}
.skm-lewati{background:none;border:0;color:#9aa39e;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;padding:10px}
.skm-lewati:hover{color:#6c7975}
.skm-kirim{background:#C5A059;color:#072d33;border:0;border-radius:10px;padding:12px 26px;font-size:.92rem;font-weight:800;cursor:pointer;font-family:inherit;transition:background .14s}
.skm-kirim:hover{background:#b8923b}
.skm-kirim:disabled{opacity:.6;cursor:default}

.skm-sukses{padding:46px 28px 40px;text-align:center}
.skm-sukses-ic{width:64px;height:64px;border-radius:50%;background:#E1F5EE;color:#0F6E56;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-weight:800}
.skm-sukses h3{margin:0 0 6px;font-size:1.3rem;color:#0A3C43;font-family:'Fraunces',serif;font-weight:800}
.skm-sukses p{margin:0 0 22px;color:#6c7975;font-size:.92rem}

@media(max-width:520px){
  .skm-head{padding:22px 20px 14px}
  #skmForm{padding:16px 20px 20px}
  .skm-skala button small{font-size:.55rem}
  .skm-skala button{padding:7px 2px;font-size:.92rem}
}