/* =====================================================================
   MSI SaaS · SISTEM DESAIN BERSAMA
   Dipakai sama persis di: homepage survei, halaman survei, login admin,
   dan backend admin. Ubah di sini = berubah di semua tempat.

   Font      : Plus Jakarta Sans (judul, teks, tombol)
   Radius    : kontrol 6px (tombol, input) · kartu 12px · pill 999px
   Tinggi    : tombol & input 44px · kecil 36px · header 64px
   Logo      : simbol infinity, tinggi 24px di semua header
   Tombol    : primary biru #005B97 → hover #00456F → ditekan #00375A
               secondary putih, garis #D5DCE4 → hover #F2F6FA
               nonaktif abu #EEF1F5 teks #98A2B0, tanpa efek hover
   Hover     : pola Typeform, sudut membulat 6px → 8px (×1,33),
               transisi 0,3s ease-out, ikon panah bergeser 2px
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --msi-blue: #005B97;
  --msi-blue-dark: #00456F;
  --msi-blue-press: #00375A;
  --msi-blue-tint: #EAF2F8;
  --msi-cyan: #18CEF5;
  --msi-gold: #FFA800;
  --msi-green: #8DC63F;
  --msi-orange: #F47B20;
  --msi-red: #AB3129;
  --msi-red-tint: #FBEDEC;
  --msi-ink: #2B2A35;
  --msi-text: #232933;
  --msi-muted: #545465;
  --msi-subtle: #8A93A3;
  --msi-line: #E3E8EF;
  --msi-line-strong: #D5DCE4;
  --msi-fill: #F2F6FA;
  --msi-fill-strong: #E6EDF4;
  --msi-paper: #F7F8FA;
  --msi-white: #FFFFFF;
  --msi-navy: #0F2333;

  --msi-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --msi-r-control: 6px;
  --msi-r-control-hover: 8px;
  --msi-r-card: 12px;
  --msi-r-pill: 999px;
  --msi-h-control: 44px;
  --msi-h-control-sm: 36px;
  --msi-h-header: 64px;
  --msi-logo-h: 24px;
  --msi-ease: cubic-bezier(.2, .7, .2, 1);
  --msi-t: .3s ease-out;
  --msi-ring: 0 0 0 3px rgba(24, 206, 245, .45);
  --msi-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --msi-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(15, 35, 51, .18);
  --msi-shadow-pop: 0 16px 40px -16px rgba(15, 35, 51, .28);
}

/* ---------- TOMBOL ---------- */
.msi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--msi-h-control);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--msi-r-control);
  font-family: var(--msi-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--msi-t), border-color var(--msi-t), color var(--msi-t), border-radius var(--msi-t), box-shadow .2s ease;
}
.msi-btn:hover { border-radius: var(--msi-r-control-hover); }
.msi-btn:focus-visible { outline: none; box-shadow: var(--msi-ring); }
.msi-btn-ico { flex: none; transition: transform var(--msi-t); }
.msi-btn:hover span + .msi-btn-ico { transform: translateX(2px); }

.msi-btn--primary { background-color: var(--msi-blue); border-color: var(--msi-blue); color: #fff !important; }
.msi-btn--primary:hover { background-color: var(--msi-blue-dark); border-color: var(--msi-blue-dark); }
.msi-btn--primary:active { background-color: var(--msi-blue-press); border-color: var(--msi-blue-press); }

.msi-btn--secondary { background-color: #fff; border-color: var(--msi-line-strong); color: var(--msi-ink) !important; }
.msi-btn--secondary:hover { background-color: var(--msi-fill); border-color: #B9C4D0; }
.msi-btn--secondary:active { background-color: var(--msi-fill-strong); }

.msi-btn--sm { min-height: var(--msi-h-control-sm); padding: 0 14px; font-size: 14px; }

.msi-btn[disabled], .msi-btn.is-disabled {
  background-color: #EEF1F5 !important; border-color: #E1E6EC !important; color: #98A2B0 !important;
  border-radius: var(--msi-r-control) !important; cursor: not-allowed; pointer-events: none;
}

.msi-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.msi-btn-group--center { justify-content: center; }

/* ---------- PILL / EYEBROW (gaya badge hero msi-indonesia.com) ---------- */
.msi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--msi-line);
  border-radius: var(--msi-r-pill);
  background: #fff;
  box-shadow: var(--msi-shadow-xs);
  font-family: var(--msi-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--msi-ink);
}
.msi-pill-dot {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--msi-green);
  box-shadow: 0 0 0 3px rgba(141, 198, 63, .22);
}

/* ---------- LINK dengan garis bawah memanjang (pola Typeform) ---------- */
.msi-link {
  color: inherit;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  padding-bottom: 2px;
  transition: background-size var(--msi-t), color var(--msi-t);
}
.msi-link:hover, .msi-link:focus-visible { background-size: 100% 1.5px; }

/* ---------- LOGO ---------- */
.msi-logo { display: block; height: var(--msi-logo-h) !important; width: auto !important; max-width: none !important; }

/* =====================================================================
   MSI SaaS · TEMA SURVEI (turunan Fruity TwentyThree)
   ===================================================================== */

:root {
  --bs-primary: #005B97;
  --bs-primary-rgb: 0, 91, 151;
  --bs-link-color: #005B97;
  --bs-link-hover-color: #00456F;
  --bs-body-color: #232933;
  --bs-body-font-family: var(--msi-font);
  --bs-border-radius: 6px;
}

html { -webkit-text-size-adjust: 100%; }
body, body[class*="font-"] {
  font-family: var(--msi-font) !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--msi-text);
  background: var(--msi-paper) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.large-heading, .form-heading, .group-title, .ls-label-question, .survey-name,
button, input, select, textarea, .btn, .form-control, .form-select {
  font-family: var(--msi-font) !important;
}
h1, h2, h3, h4, h5, h6 { color: var(--msi-ink); letter-spacing: -0.015em; }
a { color: var(--msi-blue); }
a:hover { color: var(--msi-blue-dark); }
p { margin: 0 0 12px; }

/* ---------- Tombol bawaan LimeSurvey → sistem tombol MSI ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--msi-h-control);
  padding: 0 18px;
  border-width: 1px;
  border-radius: var(--msi-r-control) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  box-shadow: none !important;
  transition: background-color var(--msi-t), border-color var(--msi-t), color var(--msi-t), border-radius var(--msi-t), box-shadow .2s ease;
}
.btn:hover { border-radius: var(--msi-r-control-hover) !important; }
.btn:focus-visible { outline: none; box-shadow: var(--msi-ring) !important; }
.btn-lg { min-height: var(--msi-h-control); padding: 0 22px; font-size: 15px; }
.btn-sm { min-height: var(--msi-h-control-sm); padding: 0 12px; font-size: 14px; }
.btn:hover span + .msi-btn-ico { transform: translateX(2px); }

.btn-primary {
  --bs-btn-bg: var(--msi-blue); --bs-btn-border-color: var(--msi-blue);
  --bs-btn-hover-bg: var(--msi-blue-dark); --bs-btn-hover-border-color: var(--msi-blue-dark);
  --bs-btn-active-bg: var(--msi-blue-press); --bs-btn-active-border-color: var(--msi-blue-press);
  background-color: var(--msi-blue) !important; border-color: var(--msi-blue) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--msi-blue-dark) !important; border-color: var(--msi-blue-dark) !important; color: #fff !important; }
.btn-primary:active, .btn-primary.active { background-color: var(--msi-blue-press) !important; border-color: var(--msi-blue-press) !important; }

.btn-outline-secondary, .btn-outline-primary, .btn-secondary, .btn-default, .btn-light {
  background-color: #fff !important; border-color: var(--msi-line-strong) !important; color: var(--msi-ink) !important;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-secondary:hover, .btn-default:hover, .btn-light:hover,
.btn-outline-secondary:focus, .btn-outline-primary:focus {
  background-color: var(--msi-fill) !important; border-color: #B9C4D0 !important; color: var(--msi-ink) !important;
}
.btn-outline-secondary:active, .btn-outline-primary:active { background-color: var(--msi-fill-strong) !important; }

.btn.disabled, .btn:disabled, .btn[disabled] {
  background-color: #EEF1F5 !important; border-color: #E1E6EC !important; color: #98A2B0 !important;
  border-radius: var(--msi-r-control) !important; opacity: 1 !important; cursor: not-allowed;
}

/* Grup tombol pilihan (Ya/Tidak, Gender, dll.) */
.btn-check + .btn, .btn-group > .btn-check + label.btn {
  background-color: #fff !important; border-color: var(--msi-line-strong) !important; color: var(--msi-ink) !important;
}
.btn-check + .btn:hover { background-color: var(--msi-fill) !important; }
.btn-check:checked + .btn, .btn-check:active + .btn, .btn.active {
  background-color: var(--msi-blue) !important; border-color: var(--msi-blue) !important; color: #fff !important;
}
.btn-check:focus-visible + .btn { box-shadow: var(--msi-ring) !important; }

/* ---------- Input ---------- */
.form-control, .form-select {
  min-height: var(--msi-h-control);
  padding: 10px 14px;
  border: 1px solid var(--msi-line-strong) !important;
  border-radius: var(--msi-r-control) !important;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.4;
  color: var(--msi-ink);
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--msi-subtle); }
.form-control:hover, .form-select:hover { border-color: #B9C4D0 !important; }
.form-control:focus, .form-select:focus { border-color: var(--msi-blue) !important; box-shadow: 0 0 0 3px rgba(24, 206, 245, .3) !important; }
textarea.form-control { min-height: 128px; resize: vertical; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-text { border-color: var(--msi-line-strong); background: #fff; color: var(--msi-muted); border-radius: var(--msi-r-control); }

/* ---------- Header halaman survei (sama dengan header homepage) ---------- */
#survey-nav.navbar {
  position: fixed;
  min-height: var(--msi-h-header);
  padding: 0;
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--msi-line);
  box-shadow: none;
}
#survey-nav .msi-nav-inner {
  width: min(1160px, 100% - 40px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  min-height: var(--msi-h-header);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
#survey-nav .logo-container { display: flex !important; align-items: center; margin: 0; padding: 0; float: none; }
#survey-nav .logo-container img, #survey-nav .logo {
  display: block; height: var(--msi-logo-h) !important; width: auto !important;
  max-height: none !important; max-width: none !important; padding: 0 !important;
}
#survey-nav .navbar-toggler {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--msi-r-control);
  color: var(--msi-ink); transition: background-color var(--msi-t), border-radius var(--msi-t);
}
#survey-nav .navbar-toggler:hover { background: var(--msi-fill); border-radius: var(--msi-r-control-hover); }
#survey-nav .navbar-toggler:focus { box-shadow: var(--msi-ring); }
.dropdown-menu {
  padding: 6px; border: 1px solid var(--msi-line); border-radius: 10px; box-shadow: var(--msi-shadow-pop);
  font-size: 14px;
}
.dropdown-item { border-radius: var(--msi-r-control); padding: 8px 10px; color: var(--msi-ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--msi-fill); color: var(--msi-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--msi-blue-tint); color: var(--msi-blue); }
.dropdown-header { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--msi-subtle); padding: 8px 10px 4px; }

/* ---------- Progress bar ---------- */
.top-container { padding: 28px 0 0; background: transparent; }
.top-container > .row { margin: 0; }
.top-container .top-content { width: min(920px, 100%); flex: 0 0 auto; max-width: 920px; padding: 0 20px; }
.ls-progress-container .progress, .top-container .progress {
  height: 6px; margin: 0; border-radius: var(--msi-r-pill); background: var(--msi-fill-strong); overflow: hidden;
}
.progress-bar { background: var(--msi-blue) !important; border-radius: var(--msi-r-pill); transition: width .6s var(--msi-ease); }

/* ---------- Kerangka konten ---------- */
#outerframeContainer, #outerframeContainer.container {
  width: 100%;
  max-width: 920px !important;
  padding: 0 20px;
  margin: 0 auto;
}
#main-row { margin: 0; }
#main-col, #main-col.col-centered { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.space-col { padding: 0; }

/* Grup pertanyaan: tanpa kartu, bersih seperti Typeform */
.group-container {
  margin: 40px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.group-title, .group-container h1, .group-container > h2 {
  margin: 0 0 8px !important;
  font-size: clamp(1.6rem, 3.6vw, 2.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em;
  color: var(--msi-ink) !important;
}
.group-description { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--msi-muted); }
.group-description p:last-child { margin-bottom: 0; }

/* ---------- Pertanyaan ---------- */
.question-container {
  margin: 16px 0 0 !important;
  padding: 28px 30px 26px !important;
  background: #fff !important;
  border: 1px solid var(--msi-line) !important;
  border-radius: var(--msi-r-card) !important;
  box-shadow: var(--msi-shadow-card) !important;
}
.group-description + .question-container, .group-title + .question-container { margin-top: 24px !important; }
.question-container.input-error, .question-container.has-error { border-color: #E8B9B5 !important; box-shadow: 0 0 0 3px rgba(171, 49, 41, .08) !important; }
.question-container.hidden, .question-container.ls-hidden, .question-container.d-none { padding: 0 !important; }

.question-title-container {
  display: flex !important;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.question-title-container .question-number {
  order: 0;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; margin-top: 4px; padding: 0 5px;
  border-radius: 5px;
  background: var(--msi-ink);
  color: #fff !important;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.question-title-container .question-code {
  order: 0; flex: none; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--msi-subtle);
}
.question-title-container .question-text { order: 1; flex: 0 1 auto; min-width: 0; }
.question-title-container .asterisk {
  order: 2; flex: none; position: static; margin: 4px 0 0 -4px;
  font-size: 12px; color: var(--msi-red) !important;
}
.ls-label-question {
  margin: 0 !important;
  font-size: clamp(1.1rem, 2.2vw, 1.2rem) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em;
  color: var(--msi-ink) !important;
}
.ls-label-question .asterisk.msi-star {
  display: inline; position: static; margin: 0 0 0 4px; font-size: .7em; vertical-align: super; color: var(--msi-red) !important;
}
.ls-label-question .asterisk.msi-star::before { font-size: inherit; }
.ls-label-question p { margin: 0 0 6px; }
.ls-label-question p:last-child { margin: 0; }

/* Teks bantuan & tip validasi: tegak, abu, sejajar teks pertanyaan */
.question-valid-container, .question-help-container {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--msi-muted);
}
.question-valid-container .ls-em-tip, .question-valid-container .em_default, .ls-questionhelp, .ls-question-help,
.question-help-container, .question-valid-container .text-info {
  font-style: normal !important;
  color: var(--msi-muted) !important;
}
.question-valid-container .ls-em-tip::before, .ls-questionhelp::before { display: none !important; }
.question-valid-container .ri-information-line, .question-valid-container .fa-exclamation-circle { display: none; }

.answer-container { margin: 6px 0 0 !important; padding: 0 !important; counter-reset: msi-key; }
.question-title-container + .answer-container { margin-top: 14px !important; }

/* Indentasi jawaban saat nomor pertanyaan ditampilkan (pola Typeform) */
.question-container.msi-numbered .question-valid-container,
.question-container.msi-numbered .question-help-container,
.question-container.msi-numbered .answer-container { padding-left: 32px !important; }
@media (max-width: 576px) {
  .question-container.msi-numbered .question-valid-container,
  .question-container.msi-numbered .question-help-container,
  .question-container.msi-numbered .answer-container { padding-left: 0 !important; }
}

/* ---------- Pilihan ganda & kotak centang → chip berhuruf A, B, C ---------- */
.answer-container ul { padding-left: 0; margin: 0; list-style: none; }
.answer-container .row { margin-left: 0; margin-right: 0; }
.answer-container [class*="col-"] { padding-left: 0; padding-right: 0; }

.answer-container li.radio-item,
.answer-container li.checkbox-item {
  position: relative;
  max-width: 520px;
  margin: 0 0 8px !important;
  padding: 0 !important;
  list-style: none;
  counter-increment: msi-key;
}
.answer-container li.checkbox-item > .row { margin: 0; }
.answer-container li.checkbox-item > .row > [class*="col"] { width: 100%; padding: 0; flex: 1 1 100%; }
.answer-container li.radio-item > input[type=radio],
.answer-container li.checkbox-item input[type=checkbox] {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: 0 !important; opacity: 0 !important; pointer-events: none;
}
.answer-container li.radio-item > label,
.answer-container li.checkbox-item label.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--msi-h-control);
  margin: 0 !important;
  padding: 9px 14px 9px 10px !important;
  border: 1px solid var(--msi-line-strong);
  border-radius: var(--msi-r-control);
  background: var(--msi-fill);
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--msi-ink) !important;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, border-radius var(--msi-t);
}
.answer-container li.radio-item > label:hover,
.answer-container li.checkbox-item label.checkbox-label:hover {
  background: var(--msi-fill-strong); border-color: #B9C4D0; border-radius: var(--msi-r-control-hover);
}
/* Kunci huruf */
.answer-container li.radio-item > label::before,
.answer-container li.checkbox-item label.checkbox-label::before {
  content: counter(msi-key, upper-alpha) !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  flex: none;
  width: 24px !important; height: 24px !important;
  margin: 0 !important;
  border: 1px solid var(--msi-line-strong) !important;
  border-radius: 5px !important;
  background: #fff !important;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--msi-ink);
  transform: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Centang di kanan saat dipilih */
.answer-container li.radio-item > label::after,
.answer-container li.checkbox-item label.checkbox-label::after {
  content: "" !important;
  position: static !important;
  display: block !important;
  flex: none;
  width: 18px !important; height: 18px !important;
  margin: 0 0 0 auto !important;
  border: 0 !important; border-radius: 0 !important;
  background-color: var(--msi-blue) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: scale(0) !important;
  transition: transform .18s var(--msi-ease) !important;
}
.answer-container li.radio-item > input:checked + label,
.answer-container li.checkbox-item input:checked + label.checkbox-label {
  background: var(--msi-blue-tint);
  border-color: var(--msi-blue);
  box-shadow: inset 0 0 0 1px var(--msi-blue);
}
.answer-container li.radio-item > input:checked + label::before,
.answer-container li.checkbox-item input:checked + label.checkbox-label::before {
  background: var(--msi-blue) !important; border-color: var(--msi-blue) !important; color: #fff;
}
.answer-container li.radio-item > input:checked + label::after,
.answer-container li.checkbox-item input:checked + label.checkbox-label::after { transform: scale(1) !important; }
.answer-container li.radio-item > input:focus-visible + label,
.answer-container li.checkbox-item input:focus-visible + label.checkbox-label { box-shadow: var(--msi-ring); }

/* Baris "Lainnya" dengan isian teks */
.answer-container li.radio-item .form-control,
.answer-container li.checkbox-item .form-control,
.answer-container .other-text-item .form-control { margin-top: 8px; }

/* ---------- Skala 5 poin / pilihan horizontal → kotak angka ---------- */
.answer-container ul.list-group-horizontal {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
  max-width: 600px;
}
.answer-container ul.list-group-horizontal li.radio-item { max-width: none; margin: 0 !important; counter-increment: none; }
.answer-container ul.list-group-horizontal li.radio-item > label {
  justify-content: center; min-height: 56px; padding: 8px !important;
  background: #fff; font-weight: 600 !important; text-align: center;
}
.answer-container ul.list-group-horizontal li.radio-item > label::before,
.answer-container ul.list-group-horizontal li.radio-item > label::after { display: none !important; }
.answer-container ul.list-group-horizontal li.radio-item > input:checked + label {
  background: var(--msi-blue); border-color: var(--msi-blue); color: #fff !important; box-shadow: none;
}

/* ---------- Pertanyaan array (tabel) ---------- */
.ls-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--msi-line);
  border-radius: var(--msi-r-card);
  background: #fff;
}
table.ls-answers, .ls-answers.table {
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}
.ls-answers > :not(caption) > * > * { border: 0 !important; box-shadow: none !important; background: transparent; }
.ls-answers thead th, .ls-answers .ls-heading th {
  padding: 12px 8px !important;
  border-bottom: 1px solid var(--msi-line) !important;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--msi-muted);
  text-align: center; vertical-align: bottom;
}
.ls-answers tbody tr > * { border-top: 1px solid var(--msi-line) !important; }
.ls-answers tbody tr:first-child > * { border-top: 0 !important; }
.ls-answers tbody th.answertext, .ls-answers tbody .answertext {
  padding: 14px 16px !important; text-align: left; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--msi-ink);
}
.ls-answers tbody td { padding: 10px 6px !important; }
.ls-answers tbody tr { transition: background-color .15s ease; }
.ls-answers tbody tr:hover > * { background: var(--msi-paper) !important; }
.ls-answers td.radio-item label::before { border: 2px solid #AEB8C4 !important; background: #fff !important; }
.ls-answers td.radio-item input:checked + label::before { border-color: var(--msi-blue) !important; }
.ls-answers td.radio-item label::after { background: var(--msi-blue) !important; }
.ls-answers .ls-error-mandatory > *, .ls-answers .has-error > * { background: var(--msi-red-tint) !important; }

/* ---------- Validasi & kesalahan ---------- */
.ls-em-error, .text-danger, .input-error .ls-em-tip, .question-container.input-error .question-valid-container {
  color: var(--msi-red) !important;
}
.question-container.input-error .ls-label-question { color: var(--msi-ink) !important; }
.alert {
  border: 1px solid var(--msi-line); border-radius: var(--msi-r-card);
  padding: 14px 16px; font-size: 15px; line-height: 1.55; box-shadow: none;
}
.alert-danger { background: var(--msi-red-tint); border-color: #F0C9C6; color: #7A231D; }
.alert-info { background: var(--msi-blue-tint); border-color: #CFE3F2; color: var(--msi-blue-dark); }
.alert-warning { background: #FFF6E5; border-color: #FFE2A8; color: #7A5200; }
.alert-success { background: #F1F8E8; border-color: #D6EBBB; color: #3C5E12; }

/* Modal popup validasi */
.modal-content { border: 0; border-radius: 16px; box-shadow: var(--msi-shadow-pop); }
.modal-header { border-bottom: 0; padding: 22px 24px 8px; }
.modal-title { font-size: 18px; font-weight: 700; color: var(--msi-ink); }
.modal-body { padding: 8px 24px 16px; font-size: 15px; color: var(--msi-text); }
.modal-footer { border-top: 0; padding: 8px 24px 22px; gap: 8px; }

/* ---------- Navigasi Sebelumnya / Lanjut ---------- */
.navigator {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 48px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--msi-line);
}
.navigator > [class*="col-"] { flex: 1 1 0; width: auto; max-width: none; padding: 0; }
.navigator .ls-move-btn { min-width: 132px; }
.navigator .checkbox-item label { font-size: 14px; color: var(--msi-muted); }
#navigator-container + .ls-move-container, .navigator-complement { margin-top: 12px; }

/* =====================================================================
   SAMPUL: meniru hero homepage ("Suara Anda")
   ===================================================================== */
body.msi-is-cover, body:has(.msi-cover) {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(24, 206, 245, .14), transparent 70%),
    linear-gradient(180deg, #F2F7FB 0%, #fff 72%) !important;
  background-attachment: fixed !important;
}
body.msi-is-cover .top-container, body:has(.msi-cover) .top-container { display: none !important; }
body.msi-is-cover #outerframeContainer, body:has(.msi-cover) #outerframeContainer { max-width: 1020px !important; }
.msi-cover {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 104px) 0 24px;
  text-align: center;
}
.msi-cover-head, #welcome-container.msi-cover-head { width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: center; }
.msi-cover-head .msi-pill { margin: 0 0 22px; }
.msi-cover .msi-cover-title, .msi-cover .survey-name, .msi-cover .large-heading {
  width: 100% !important; max-width: 980px !important;
  margin: 0 auto 20px !important;
  font-size: clamp(2.4rem, 6vw, 4.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  color: var(--msi-ink) !important;
  text-wrap: balance;
}
.msi-cover-title .msi-title-accent { color: var(--msi-blue); }
.msi-cover .msi-cover-lede, .msi-cover .survey-description, .msi-cover .survey-welcome {
  max-width: 660px; margin: 0 auto !important; padding: 0;
  font-size: clamp(16px, 1.7vw, 18px) !important; font-weight: 400 !important; line-height: 1.65 !important;
  color: var(--msi-muted) !important; text-align: center;
}
.msi-cover .msi-cover-lede p { margin: 0 0 10px; }
.msi-cover .msi-cover-lede p:last-child { margin-bottom: 0; }
.msi-cover .msi-cover-lede + .msi-cover-lede:not(:empty) { margin-top: 10px !important; }
.msi-cover .msi-cover-lede:empty { display: none; }
.msi-cover .form-heading { text-align: center; }

/* Tombol: di tengah, primary lalu secondary (sama seperti hero) */
.msi-cover .navigator {
  display: flex !important; justify-content: center;
  margin: 28px 0 0 !important; padding: 0 !important; border-top: 0 !important;
}
.msi-cover .navigator > [class*="col-"]:first-child { display: none !important; }
.msi-cover .navigator > [class*="col-"] {
  flex: 0 1 auto !important; width: auto !important; max-width: 100% !important;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
  text-align: center !important;
}
.msi-cover .navigator .btn { min-width: 0 !important; width: auto; padding: 0 18px; font-size: 15px; }

/* Baris fakta di bawah tombol (sama seperti hero) */
.msi-cover-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  margin: 24px 0 0; padding: 0; list-style: none;
  font-size: 14.5px; line-height: 1.5; color: var(--msi-muted);
}
.msi-cover-facts li { display: inline-flex; align-items: center; gap: 8px; }
.msi-cover-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--msi-green); }

/* Info privasi: kartu halus, rata kiri, di bawah */
.msi-cover-privacy { max-width: 660px; margin: 48px auto 0; text-align: left; scroll-margin-top: 96px; }
.msi-cover-privacy:empty { display: none; }
.msi-cover-privacy .row { margin: 0; }
.msi-cover-privacy [class*="col-"] { padding: 0; }
.msi-cover-privacy .ls-privacy-block, .msi-cover-privacy .datasecurity-notice-container {
  padding: 18px 20px; border: 1px solid var(--msi-line); border-radius: var(--msi-r-card); background: rgba(255, 255, 255, .85);
}
.msi-cover-privacy .text-uppercase, .msi-cover-privacy [role="heading"] {
  margin: 0 0 8px; padding: 0; border: 0; background: transparent; text-transform: none !important; font-size: 14px; font-weight: 700; color: var(--msi-ink);
}
.msi-cover-privacy p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--msi-muted); }
.msi-cover-privacy p:last-child { margin-bottom: 0; }
.msi-cover-privacy:target .ls-privacy-block, .msi-cover-privacy.is-highlight .ls-privacy-block { border-color: var(--msi-blue); box-shadow: 0 0 0 3px rgba(24, 206, 245, .25); transition: box-shadow .3s ease; }
@media (max-width: 576px) {
  .msi-cover .navigator > [class*="col-"] { width: 100% !important; flex-direction: column; align-items: stretch; }
  .msi-cover .navigator .btn { width: 100%; }
}

/* =====================================================================
   SELESAI (terima kasih)
   ===================================================================== */
.completed-wrapper, .submit-wrapper {
  max-width: 600px;
  margin: clamp(40px, 9vh, 96px) auto 0;
  padding: 0;
  text-align: center;
  background: transparent; border: 0; box-shadow: none;
}
.completed-wrapper::before {
  content: "";
  display: block;
  width: 56px; height: 56px; margin: 0 auto 22px;
  border-radius: 50%;
  background: #EEF7E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A8F1F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/26px no-repeat;
}
.completed-text, .completed-wrapper .completed-text { font-size: 17px; line-height: 1.65; color: var(--msi-muted); }
.completed-wrapper .completed-text p:first-child, .completed-wrapper .h3, .completed-wrapper h1, .completed-wrapper h2 {
  margin: 0 0 10px; font-size: clamp(1.75rem, 4.4vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--msi-ink);
}

/* =====================================================================
   HALAMAN KODE AKSES (kartu di tengah, senada login admin)
   ===================================================================== */
.token-page, .register-page, .captcha-page, .load-page, .save-page {
  position: relative;
  max-width: 480px;
  margin: clamp(32px, 8vh, 80px) auto 0;
  padding: clamp(24px, 5vw, 40px);
  background: #fff;
  border: 1px solid var(--msi-line);
  border-radius: 16px;
  box-shadow: var(--msi-shadow-card);
}
.token-page .form-heading, .register-page .form-heading { display: block; margin: 0 0 10px; padding: 0; text-align: left; }
.msi-token-title { display: block; font-size: clamp(1.45rem, 4vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--msi-ink); }
.msi-token-intro { padding: 0; margin: 0; }
.msi-token-intro p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--msi-muted); }
.msi-token-intro .msi-token-note {
  margin-top: -6px; padding: 10px 12px; border-radius: var(--msi-r-control);
  background: var(--msi-paper); font-size: 14px; line-height: 1.5;
}
.token-page .control-label, .register-page .control-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--msi-ink); }
.token-page .asterisk { color: var(--msi-red); font-size: 10px; margin-left: 2px; vertical-align: super; }
.token-page .form-token > form > div, .token-page form .row { margin: 0; }
.token-page [class*="col-"] { padding-left: 0; padding-right: 0; }
.token-page .captcha-container { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.token-page .captcha-container img { border-radius: var(--msi-r-control); border: 1px solid var(--msi-line); }
.token-page .ls-important-field + .ls-important-field, .token-page .form-group + .form-group { margin-top: 16px; }
.msi-btn-continue { width: 100%; margin-top: 20px; }
.msi-token-help {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--msi-line);
  font-size: 14px; line-height: 1.5; color: var(--msi-muted); text-align: center;
}
.token-page .alert-danger { margin: 0 0 16px; }

/* ---------- Footer halaman survei ---------- */
.msi-footer { padding: 56px 20px 32px; }
.msi-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; font-size: 13.5px; }
.msi-footer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--msi-r-control);
  background: var(--msi-ink); color: #fff !important; text-decoration: none;
  transition: background-color var(--msi-t), border-radius var(--msi-t);
}
.msi-footer-badge span { opacity: .75; }
.msi-footer-badge:hover { background: var(--msi-navy); border-radius: var(--msi-r-control-hover); }
.msi-footer-link { color: var(--msi-muted) !important; text-decoration: underline; text-underline-offset: 3px; }
.msi-footer-link:hover { color: var(--msi-blue) !important; }

/* =====================================================================
   HOMEPAGE (pola Typeform, tema MSI)
   ===================================================================== */
body.msi-home { padding-top: 0 !important; background: #fff !important; scroll-behavior: smooth; }
body.msi-home section[id] { scroll-margin-top: 80px; }
.msi-wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.msi-center { text-align: center; }
.msi-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--msi-r-control); background: var(--msi-blue); color: #fff; }
.msi-skip:focus { top: 12px; color: #fff; }

.msi-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--msi-line);
}
.msi-header-inner { display: flex; align-items: center; gap: 32px; min-height: var(--msi-h-header); }
.msi-brand { display: inline-flex; align-items: center; flex: none; }
.msi-nav-links { display: flex; align-items: center; gap: 28px; margin-right: auto; }
.msi-nav-links a { font-size: 15px; font-weight: 600; color: var(--msi-ink); }
.msi-header-actions { flex-wrap: nowrap; }
@media (max-width: 960px) { .msi-nav-links { display: none; } .msi-header-actions { margin-left: auto; } }
@media (max-width: 359px) { .msi-hide-sm { display: none !important; } }
@media (max-width: 480px) { .msi-header-actions .msi-btn { min-height: var(--msi-h-control-sm); padding: 0 12px; font-size: 14px; } .msi-header-inner { gap: 12px; } }

.msi-h2 {
  margin: 0 0 14px !important;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em;
  color: var(--msi-ink);
}
.msi-sec-lede { max-width: 620px; margin: 0 !important; font-size: 17px; line-height: 1.65; color: var(--msi-muted); }
.msi-center .msi-sec-lede { margin-inline: auto !important; }

/* Hero */
.msi-hero {
  padding: clamp(56px, 9vw, 104px) 0 clamp(56px, 7vw, 88px);
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(24, 206, 245, .14), transparent 70%),
    linear-gradient(180deg, #F2F7FB 0%, #fff 72%);
}
.msi-hero-head { max-width: 980px; text-align: center; }
.msi-hero-head .msi-pill { margin-bottom: 22px; }
.msi-hero-title {
  margin: 0 0 20px !important;
  font-size: clamp(2.4rem, 6vw, 4.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em;
  color: var(--msi-ink) !important;
}
.msi-hero-title span { color: var(--msi-blue); }
.msi-hero-lede { max-width: 660px; margin: 0 auto 28px !important; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.65; color: var(--msi-muted); }
.msi-hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  margin: 24px 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.5; color: var(--msi-muted);
}
.msi-hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.msi-hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--msi-green); }

/* Tab media */
.msi-stage { margin-top: clamp(40px, 6vw, 64px); }
.msi-stage-panels {
  position: relative; min-height: 460px; overflow: hidden; border-radius: 20px;
  background:
    radial-gradient(520px 260px at 85% 15%, rgba(24, 206, 245, .32), transparent 70%),
    linear-gradient(135deg, #00456F 0%, #005B97 55%, #0A6FB0 100%);
  box-shadow: 0 30px 60px -30px rgba(0, 69, 111, .45);
}
.msi-stage-panels::before, .msi-stage-panels::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 16px solid; opacity: .35; pointer-events: none;
}
.msi-stage-panels::before { left: -90px; bottom: -110px; border-color: var(--msi-green); }
.msi-stage-panels::after { right: -70px; top: -120px; border-color: var(--msi-orange); }
.msi-stage-panel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease;
}
.msi-stage-panel.is-active { opacity: 1; transform: none; }
.msi-mock {
  width: min(560px, 100%); padding: 30px 30px 28px; text-align: left;
  background: var(--msi-paper); border-radius: var(--msi-r-card); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .35);
}
.msi-mock-q { display: flex; gap: 10px; margin: 0 0 18px !important; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--msi-ink); }
.msi-qnum {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; margin-top: 3px; padding: 0 5px; border-radius: 5px;
  background: var(--msi-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.msi-mock-opts, .msi-mock-scale, .msi-mock-scale-label, .msi-mock .msi-btn { margin-left: 32px !important; }
.msi-mock-opts { display: grid; gap: 8px; max-width: 340px; margin: 0 0 22px; padding: 0; list-style: none; }
.msi-mock-opts li {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px 0 9px;
  border: 1px solid var(--msi-line-strong); border-radius: var(--msi-r-control); background: var(--msi-fill);
  font-size: 15px; font-weight: 500; color: var(--msi-ink);
}
.msi-mock-opts b {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--msi-line-strong); border-radius: 5px; background: #fff; font-size: 11px; font-weight: 700;
}
.msi-mock-opts li.is-on { background: var(--msi-blue-tint); border-color: var(--msi-blue); box-shadow: inset 0 0 0 1px var(--msi-blue); }
.msi-mock-opts li.is-on b { background: var(--msi-blue); border-color: var(--msi-blue); color: #fff; }
.msi-mock-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.msi-mock-scale li {
  display: flex; align-items: center; justify-content: center; height: 52px;
  border: 1px solid var(--msi-line-strong); border-radius: var(--msi-r-control); background: #fff;
  font-size: 17px; font-weight: 600; color: var(--msi-ink);
}
.msi-mock-scale li.is-on { background: var(--msi-blue); border-color: var(--msi-blue); color: #fff; }
.msi-mock-scale--11 { grid-template-columns: repeat(11, 1fr); gap: 5px; }
.msi-mock-scale--11 li { height: 42px; font-size: 14px; }
.msi-mock-scale-label { display: flex; justify-content: space-between; margin: 0 0 22px; font-size: 12.5px; color: var(--msi-muted); }
.msi-mock .msi-btn { pointer-events: none; }

.msi-stage-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.msi-stage-tab {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; text-align: left;
  border: 1px solid var(--msi-line); border-radius: var(--msi-r-card); background: #fff;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--msi-t), box-shadow var(--msi-t), border-radius var(--msi-t), background-color var(--msi-t);
}
.msi-stage-tab:hover { border-color: var(--msi-line-strong); background: var(--msi-paper); border-radius: 16px; }
.msi-stage-tab.is-active { border-color: var(--msi-blue); background: #fff; box-shadow: var(--msi-shadow-card); }
.msi-stage-tab:focus-visible { outline: none; box-shadow: var(--msi-ring); }
.msi-stage-kicker { font-size: 13px; font-weight: 600; color: var(--msi-subtle); }
.msi-stage-tab.is-active .msi-stage-kicker { color: var(--msi-blue); }
.msi-stage-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--msi-ink); }
.msi-stage-desc { font-size: 14px; line-height: 1.5; color: var(--msi-muted); }
.msi-stage-progress { display: block; height: 3px; margin-top: 12px; border-radius: 99px; background: var(--msi-line); overflow: hidden; }
.msi-stage-progress span { display: block; width: 0; height: 100%; background: var(--msi-blue); }
.msi-stage-tab.is-active .msi-stage-progress span { width: 100%; }
.msi-stage.is-playing .msi-stage-tab.is-active .msi-stage-progress span { animation: msi-progress 6s linear; }
@keyframes msi-progress { from { width: 0; } to { width: 100%; } }
.msi-stage-note { margin: 14px 0 0 !important; text-align: center; font-size: 13px; color: var(--msi-subtle); }
@media (max-width: 768px) {
  .msi-stage-panels { min-height: 520px; }
  .msi-stage-tabs { grid-template-columns: 1fr; gap: 8px; }
  .msi-stage-desc { display: none; }
  .msi-stage-tab { padding: 14px 16px 12px; }
  .msi-mock { padding: 22px 18px; }
  .msi-mock-opts, .msi-mock-scale, .msi-mock-scale-label, .msi-mock .msi-btn { margin-left: 0 !important; }
  .msi-mock-scale--11 { grid-template-columns: repeat(6, 1fr); }
}

/* Section umum */
.msi-sec { padding: clamp(64px, 9vw, 112px) 0; }
.msi-sec--tint { background: var(--msi-paper); }
.msi-sec-head { margin-bottom: 36px; }

/* Kartu (pola Typeform: sudut ikon & kartu melebar saat hover) */
.msi-card {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 22px; background: #fff; border: 1px solid var(--msi-line); border-radius: var(--msi-r-card);
  transition: border-color var(--msi-t), box-shadow var(--msi-t), border-radius var(--msi-t);
}
.msi-card:hover { border-color: var(--msi-line-strong); box-shadow: var(--msi-shadow-card); border-radius: 16px; }
.msi-card h3 { margin: 0 0 6px !important; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--msi-ink); }
.msi-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--msi-muted); }
.msi-ico-box {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--msi-r-control); background: var(--msi-blue-tint); color: var(--msi-blue);
  transition: border-radius var(--msi-t), background-color var(--msi-t), color var(--msi-t);
}
.msi-card:hover .msi-ico-box { border-radius: 12px; background: var(--msi-blue); color: #fff; }

/* Daftar survei */
.msi-survey-list { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--msi-line); border-radius: var(--msi-r-card); box-shadow: var(--msi-shadow-card); }
.msi-survey-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 20px clamp(18px, 3vw, 28px); transition: background-color var(--msi-t);
}
.msi-survey-row + .msi-survey-row { border-top: 1px solid var(--msi-line); }
.msi-survey-row:hover { background: var(--msi-paper); }
.msi-survey-index { min-width: 2ch; font-size: 15px; font-weight: 700; color: var(--msi-subtle); }
.msi-survey-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msi-survey-title { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--msi-ink) !important; text-decoration: none !important; transition: color var(--msi-t); }
.msi-survey-title::after { content: ""; position: absolute; inset: 0; }
.msi-survey-title:focus-visible { outline: none; }
.msi-survey-row:focus-within { box-shadow: inset 0 0 0 2px var(--msi-cyan); }
.msi-survey-row:hover .msi-survey-title { color: var(--msi-blue) !important; }
.msi-survey-meta {
  font-size: 14px; line-height: 1.5; color: var(--msi-muted);
  transition: opacity var(--msi-t), transform var(--msi-t);
}
.msi-survey-go { pointer-events: none; }
.msi-survey-row:hover .msi-survey-go { background-color: var(--msi-blue); border-color: var(--msi-blue); color: #fff !important; border-radius: var(--msi-r-control-hover); }
.msi-survey-row:hover .msi-survey-go .msi-btn-ico { transform: translateX(2px); }
@media (max-width: 576px) {
  .msi-survey-row { grid-template-columns: auto 1fr; gap: 6px 16px; }
  .msi-survey-go { grid-column: 2; justify-self: start; margin-top: 8px; }
}
.msi-empty { padding: 28px clamp(18px, 3vw, 28px); border: 1px dashed var(--msi-line-strong); border-radius: var(--msi-r-card); background: #fff; color: var(--msi-muted); }
.msi-empty p { margin: 0 0 6px; }
.msi-empty-title { font-weight: 700; color: var(--msi-ink); }

/* Teks + media */
.msi-tm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.msi-tm--reverse .msi-tm-text { order: 2; }
.msi-tm-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.msi-tip {
  max-width: 560px; margin: 22px 0 0 !important; padding: 14px 16px;
  border-left: 3px solid var(--msi-gold); border-radius: 0 var(--msi-r-control) var(--msi-r-control) 0;
  background: #fff; font-size: 15px; line-height: 1.55; color: var(--msi-text);
}
@media (max-width: 900px) { .msi-tm { grid-template-columns: 1fr; } .msi-tm--reverse .msi-tm-text { order: 0; } }

/* Pernyataan */
.msi-statement { padding: clamp(64px, 9vw, 120px) 0; background: var(--msi-navy); text-align: center; }
.msi-statement h2 {
  max-width: 900px; margin: 0 auto !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important; font-weight: 800 !important; line-height: 1.1 !important;
  letter-spacing: -0.03em; color: #fff !important;
}
.msi-statement h2 span { color: var(--msi-cyan); }

/* Dimensi */
.msi-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.msi-dims .msi-card { grid-template-columns: 1fr; gap: 14px; align-content: start; }
.msi-dims-note {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 22px; border-radius: var(--msi-r-card); background: linear-gradient(150deg, #005B97, #00456F); color: #fff;
}
.msi-dims-note p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: #fff; }
.msi-link--light { align-self: flex-start; font-size: 14.5px; font-weight: 600; color: var(--msi-cyan) !important; }
@media (max-width: 1024px) { .msi-dims { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .msi-dims { grid-template-columns: 1fr; } }

/* Tanya jawab */
.msi-faq-wrap { max-width: 860px; }
.msi-faq { display: grid; gap: 10px; }
.msi-faq details { background: #fff; border: 1px solid var(--msi-line); border-radius: var(--msi-r-card); transition: border-color var(--msi-t), border-radius var(--msi-t); }
.msi-faq details:hover { border-color: var(--msi-line-strong); border-radius: 16px; }
.msi-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--msi-ink);
}
.msi-faq summary::-webkit-details-marker { display: none; }
.msi-faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--msi-ink); border-bottom: 2px solid var(--msi-ink);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--msi-t);
}
.msi-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.msi-faq summary:focus-visible { outline: none; box-shadow: var(--msi-ring); border-radius: var(--msi-r-card); }
.msi-faq details p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--msi-muted); }

/* Pengelola survei + logo */
.msi-customers { padding: clamp(64px, 9vw, 104px) 0; }
.msi-customers .msi-h2 { max-width: 760px; margin-inline: auto !important; font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }
.msi-marquee {
  overflow: hidden; margin: 32px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.msi-marquee-track { display: flex; width: max-content; animation: msi-marquee 60s linear infinite; }
.msi-marquee:hover .msi-marquee-track { animation-play-state: paused; }
.msi-marquee ul { display: flex; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; }
.msi-marquee img { height: 44px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter var(--msi-t), opacity var(--msi-t), transform var(--msi-t); }
.msi-marquee img:hover { filter: none; opacity: 1; transform: scale(1.025); }
@keyframes msi-marquee { to { transform: translateX(-50%); } }

/* Untuk tim HR */
.msi-hr { background: var(--msi-paper); border-top: 1px solid var(--msi-line); }
.msi-hr-inner { display: grid; grid-template-columns: 1.4fr auto; align-items: end; gap: 32px; }
.msi-hr .msi-h2 { max-width: 680px; font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important; }
@media (max-width: 900px) { .msi-hr-inner { grid-template-columns: 1fr; align-items: start; } }

/* CTA gelap */
.msi-cta { padding: clamp(64px, 9vw, 112px) 0; background: radial-gradient(700px 300px at 50% 0%, rgba(24, 206, 245, .18), transparent 70%), #13293C; color: rgba(255, 255, 255, .8); }
.msi-cta h2 { margin: 0 0 12px !important; font-size: clamp(1.9rem, 4.4vw, 3rem) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.025em; color: #fff !important; }
.msi-cta p { max-width: 560px; margin: 0 auto 28px !important; font-size: 17px; line-height: 1.6; }
.msi-cta .msi-btn--secondary { border-color: #fff; }

/* Footer situs (item menu bergeser saat hover, pola Typeform) */
.msi-site-footer { background: var(--msi-navy); color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.6; }
.msi-site-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .7fr; gap: 28px; padding: 56px 0 36px; }
.msi-site-footer p { margin: 0 0 4px; }
.msi-site-footer .msi-logo { margin-bottom: 16px; }
.msi-site-footer-name { font-size: 16px; font-weight: 800; color: #fff; }
.msi-site-footer-tag { color: var(--msi-gold); }
.msi-site-footer-label { margin-bottom: 8px !important; font-weight: 700; color: #fff; }
.msi-site-footer-menu { margin: 0; padding: 0; }
.msi-site-footer-menu li { transition: transform var(--msi-t); }
.msi-site-footer-menu li:hover { transform: translateX(.5rem); }
.msi-site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.msi-site-footer a:hover { color: var(--msi-cyan); }
.msi-site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 0 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
@media (max-width: 900px) { .msi-site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) {
  .msi-site-footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .msi-hero .msi-btn-group .msi-btn, .msi-cta .msi-btn-group .msi-btn { width: 100%; }
}

/* Mobile: halaman survei */
@media (max-width: 576px) {
  #outerframeContainer, #outerframeContainer.container { padding: 0 16px; }
  .group-container { margin-top: 28px; }
  .question-container { padding: 22px 18px 20px !important; }
  .navigator { margin-top: 36px !important; }
  .navigator .ls-move-btn { min-width: 0; width: 100%; }
  .msi-cover .navigator .ls-move-btn { width: auto; }
  .answer-container li.radio-item, .answer-container li.checkbox-item { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.msi-site-footer-menu, .msi-site-footer-menu a, .msi-site-footer-bottom a { font-size: 14.5px; line-height: 1.75; }
.msi-site-footer-bottom a { font-size: 13px; line-height: 1.5; }


/* =====================================================================
   SKALA: pertanyaan array satu baris (Likert) → kotak pilihan
   seperti contoh skala di homepage
   ===================================================================== */
.ls-table-wrapper.msi-scale-wrap { border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; }
table.msi-scale, table.msi-scale tbody { display: block !important; width: 100% !important; }
table.msi-scale > thead, table.msi-scale > colgroup { display: none !important; }
table.msi-scale tbody tr {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
  max-width: none; background: transparent !important; border: 0 !important;
}
table.msi-scale tbody tr:hover > * { background: transparent !important; }
table.msi-scale tbody th.answertext { display: none !important; }
table.msi-scale tbody td, table.msi-scale tbody td.radio-item {
  position: relative; display: block !important; width: auto !important; min-width: 0;
  padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; text-align: center;
}
table.msi-scale td input[type=radio] {
  position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; margin: 0 !important; pointer-events: none;
}
table.msi-scale td label, table.msi-scale td label.ls-label-xs-visibility {
  position: static !important; clip: auto !important; clip-path: none !important; overflow: visible !important;
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; height: auto !important; min-height: 56px;
  margin: 0 !important; padding: 8px 10px !important;
  border: 1px solid var(--msi-line-strong); border-radius: var(--msi-r-control);
  background: #fff; color: var(--msi-ink) !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center !important; white-space: normal !important;
  cursor: pointer; opacity: 1 !important; visibility: visible !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, border-radius var(--msi-t);
}
table.msi-scale td label::before, table.msi-scale td label::after { display: none !important; content: none !important; }
/* Netralkan trik Fruity untuk label tersembunyi (text-indent 30px, line-height 30px, anak dilempar ke -10000px) */
table.msi-scale td label, table.msi-scale td label.ls-label-xs-visibility {
  text-indent: 0 !important; letter-spacing: 0 !important; word-break: normal; overflow-wrap: break-word; hyphens: manual;
}
table.msi-scale td label > *, table.msi-scale td label.ls-label-xs-visibility > * {
  position: static !important; left: auto !important; top: auto !important;
  width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important;
  margin: 0 !important; padding: 0 !important; text-indent: 0 !important;
  font: inherit !important; color: inherit !important; text-align: inherit !important;
}
table.msi-scale td label br { display: none; }
table.msi-scale td label:hover { background: var(--msi-fill); border-color: #B9C4D0; border-radius: var(--msi-r-control-hover); }
table.msi-scale td input:checked + label { background: var(--msi-blue) !important; border-color: var(--msi-blue) !important; color: #fff !important; }
table.msi-scale td input:focus-visible + label { box-shadow: var(--msi-ring); }
table.msi-scale td.noanswer-item label { color: var(--msi-muted) !important; font-weight: 500 !important; }


@media (max-width: 576px) {
  table.msi-scale tbody tr { grid-auto-flow: row; grid-template-columns: 1fr; gap: 8px; }
  table.msi-scale td label, table.msi-scale td label.ls-label-xs-visibility { justify-content: flex-start; min-height: 46px; padding: 10px 14px !important; text-align: left !important; }
}
.question-valid-container.msi-empty, .question-help-container.msi-empty { margin: 0 !important; min-height: 0; }
.question-title-container + .question-valid-container.msi-empty + .answer-container { margin-top: 14px !important; }
.ls-label-question .asterisk.msi-star { margin-left: 3px !important; font-size: .62em !important; }


/* =====================================================================
   v2.1.2 · lebar konten & baris "Lainnya"
   ===================================================================== */
/* Pembungkus bawaan Fruity (.col-xl-8) membuat kartu hanya 66% lebar */
#outerframeContainer > .row { margin-left: 0 !important; margin-right: 0 !important; }
#outerframeContainer > .row > .col-centered, #outerframeContainer > .row > [class*="col-xl-"] {
  width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important;
}
#outerframeContainer, #outerframeContainer * { -webkit-hyphens: manual !important; hyphens: manual !important; }
#outerframeContainer { word-wrap: normal; overflow-wrap: break-word; }

/* Baris "Lainnya": chip berhuruf dengan kolom isian di dalamnya */
.answer-container li.radio-text-item, .answer-container li.checkbox-text-item {
  position: relative;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  max-width: 520px;
  margin: 0 0 8px !important; padding: 8px 12px 8px 10px !important;
  border: 1px solid var(--msi-line-strong) !important; border-radius: var(--msi-r-control) !important;
  background: var(--msi-fill); list-style: none;
  counter-increment: msi-key;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.answer-container li.checkbox-text-item > .row {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%; margin: 0 !important;
}
.answer-container li.radio-text-item > [class*="col"], .answer-container li.checkbox-text-item [class*="col"] {
  padding: 0 !important; width: auto; max-width: 100%;
}
.answer-container li.radio-text-item > .othertext-label-checkox-container, .answer-container li.checkbox-text-item > .row > .col-auto:first-child { flex: 0 0 auto; }
.answer-container li.radio-text-item > .other-text-item, .answer-container li.checkbox-text-item > .row > .col-auto:last-child { flex: 1 1 180px; min-width: 0; }
.answer-container li.radio-text-item:hover, .answer-container li.checkbox-text-item:hover { background: var(--msi-fill-strong); border-color: #B9C4D0; }
.answer-container li.radio-text-item input[type=radio], .answer-container li.checkbox-text-item input[type=checkbox] {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0 !important; pointer-events: none;
}
.answer-container li.radio-text-item label, .answer-container li.checkbox-text-item label.checkbox-label {
  position: static !important; display: inline-flex !important; align-items: center; gap: 12px;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
  font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--msi-ink) !important;
  cursor: pointer; text-indent: 0 !important;
}
.answer-container li.radio-text-item label::before, .answer-container li.checkbox-text-item label.checkbox-label::before {
  content: counter(msi-key, upper-alpha) !important;
  position: static !important; display: inline-flex !important; align-items: center; justify-content: center; flex: none;
  width: 24px !important; height: 24px !important; margin: 0 !important;
  border: 1px solid var(--msi-line-strong) !important; border-radius: 5px !important; background: #fff !important;
  font-size: 12px; font-weight: 700; line-height: 1; color: var(--msi-ink); transform: none !important;
}
.answer-container li.radio-text-item label::after, .answer-container li.checkbox-text-item label.checkbox-label::after { display: none !important; content: none !important; }
.answer-container li.radio-text-item input:checked + label::before, .answer-container li.checkbox-text-item input:checked + label.checkbox-label::before {
  background: var(--msi-blue) !important; border-color: var(--msi-blue) !important; color: #fff;
}
.answer-container li.radio-text-item:hover, .answer-container li.checkbox-text-item:hover { border-color: #B9C4D0 !important; }
.answer-container li.radio-text-item:has(input:checked), .answer-container li.checkbox-text-item:has(input[type=checkbox]:checked) {
  background: var(--msi-blue-tint) !important; border-color: var(--msi-blue) !important; box-shadow: inset 0 0 0 1px var(--msi-blue) !important;
}
.answer-container li.checkbox-text-item .checkbox-item, .answer-container li.radio-text-item .othertext-label-checkox-container { padding-left: 0 !important; margin-left: 0 !important; }
.answer-container li.radio-text-item input:focus-visible + label::before, .answer-container li.checkbox-text-item input:focus-visible + label::before { box-shadow: var(--msi-ring); }
.answer-container li.radio-text-item .form-control, .answer-container li.checkbox-text-item .form-control {
  width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 6px 12px !important;
  background: #fff !important; font-size: 15px !important;
}
.answer-container li.radio-text-item .form-control::placeholder { color: var(--msi-subtle); }
@media (max-width: 576px) {
  .answer-container li.radio-text-item, .answer-container li.checkbox-text-item { max-width: none; }
  .answer-container li.radio-text-item > .other-text-item, .answer-container li.checkbox-text-item > .row > .col-auto:last-child { flex-basis: 100%; }
}

/* Skala: teks satu baris; kolom mengikuti teks terpanjang */
@media (min-width: 577px) {
  table.msi-scale tbody tr { grid-auto-columns: minmax(max-content, 1fr); }
  table.msi-scale td label, table.msi-scale td label.ls-label-xs-visibility { white-space: nowrap !important; padding: 8px 14px !important; }
}
/* Jika tidak muat satu baris (banyak pilihan), tampil bertumpuk seperti di HP */
table.msi-scale.msi-scale-stack tbody tr { grid-auto-flow: row !important; grid-template-columns: 1fr !important; grid-auto-columns: auto !important; max-width: 520px; }
table.msi-scale.msi-scale-stack td label, table.msi-scale.msi-scale-stack td label.ls-label-xs-visibility {
  justify-content: flex-start; min-height: 46px; padding: 10px 14px !important; text-align: left !important; white-space: normal !important;
}