.elementor-1303 .elementor-element.elementor-element-2ae8efd{--display:flex;--padding-top:0130px;--padding-bottom:0130px;--padding-left:0px;--padding-right:0px;}.elementor-1303 .elementor-element.elementor-element-2ae8efd:not(.elementor-motion-effects-element-type-background), .elementor-1303 .elementor-element.elementor-element-2ae8efd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://biropsikolog.com/wp-content/uploads/2025/09/Desain-tanpa-judul-11-scaled.png");background-position:center right;background-repeat:repeat-y;background-size:contain;}.elementor-1303 .elementor-element.elementor-element-3143e83{text-align:center;}.elementor-1303 .elementor-element.elementor-element-a3cd371{--display:flex;--border-radius:24px 24px 24px 24px;box-shadow:0px 0px 10px 1px rgba(0, 0, 0, 0.2);--padding-top:20px;--padding-bottom:20px;--padding-left:40px;--padding-right:40px;}.elementor-1303 .elementor-element.elementor-element-a3cd371:not(.elementor-motion-effects-element-type-background), .elementor-1303 .elementor-element.elementor-element-a3cd371 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group{padding-right:calc( 17px/2 );padding-left:calc( 17px/2 );margin-bottom:24px;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-form-fields-wrapper{margin-left:calc( -17px/2 );margin-right:calc( -17px/2 );margin-bottom:-24px;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group.recaptcha_v3-bottomleft, .elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-1303 .elementor-element.elementor-element-60e781d .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-1303 .elementor-element.elementor-element-60e781d .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-1303 .elementor-element.elementor-element-60e781d .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group > label, .elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-subgroup label{color:#313131;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-mark-required .elementor-field-label:after{color:#F10000;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group > label{font-family:"Roboto", Sans-serif;font-weight:700;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-type-html{padding-bottom:0px;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;border-radius:5px 5px 5px 5px;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;border-radius:5px 5px 5px 5px;}.elementor-1303 .elementor-element.elementor-element-60e781d .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-primary );color:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-button[type="submit"]{background-color:var( --e-global-color-primary );color:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .e-form__buttons__wrapper__button-next:hover{background-color:#772273;color:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-button[type="submit"]:hover{background-color:#772273;color:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-1303 .elementor-element.elementor-element-60e781d .elementor-button{border-radius:100px 100px 100px 100px;padding:12px 48px 12px 48px;}.elementor-1303 .elementor-element.elementor-element-60e781d{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1303 .elementor-element.elementor-element-2ae8efd:not(.elementor-motion-effects-element-type-background), .elementor-1303 .elementor-element.elementor-element-2ae8efd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://biropsikolog.com/wp-content/uploads/2025/09/Desain-tanpa-judul-11-scaled.png");background-position:center right;}.elementor-1303 .elementor-element.elementor-element-2ae8efd{--padding-top:0100px;--padding-bottom:0130px;--padding-left:50px;--padding-right:50px;}}@media(max-width:767px){.elementor-1303 .elementor-element.elementor-element-2ae8efd:not(.elementor-motion-effects-element-type-background), .elementor-1303 .elementor-element.elementor-element-2ae8efd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://biropsikolog.com/wp-content/uploads/2025/09/Desain-tanpa-judul-11-scaled.png");}.elementor-1303 .elementor-element.elementor-element-2ae8efd{--padding-top:072px;--padding-bottom:0120px;--padding-left:20px;--padding-right:020px;}}/* Start custom CSS for html, class: .elementor-element-a7c3620 */.likert-ui { 
  --c1-bg:#fff5f5; --c1-bd:#ffc9c9;
  --c2-bg:#fff8eb; --c2-bd:#ffd8a8;
  --c3-bg:#e9f7ef; --c3-bd:#b2f2bb;
  --c4-bg:#e8fbff; --c4-bd:#a5e9f7;
}
.likert-legend{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin:8px 0 18px; font-weight:600; }
.likert-legend .dot{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; border:2px solid transparent; }
.likert-legend .dot-1{ background:var(--c1-bg); border-color:var(--c1-bd); }
.likert-legend .dot-2{ background:var(--c2-bg); border-color:var(--c2-bd); }
.likert-legend .dot-3{ background:var(--c3-bg); border-color:var(--c3-bd); }
.likert-legend .dot-4{ background:var(--c4-bg); border-color:var(--c4-bd); }/* End custom CSS */
/* Start custom CSS *//* === WRAPPER FORM === */
.likert-ui .elementor-form {
  --gap: 14px;
}

/* === KARTU PERTANYAAN === */
.likert-ui .elementor-field-group{
  background:#fff;
  border-radius:16px;
  padding:18px 18px 14px;
  margin:8px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.likert-ui .elementor-field-group > label.elementor-field-label{
  font-weight:700; margin-bottom:10px;
}

/* === BARIS PILIHAN: 4 kolom merata & center === */
.likert-ui .elementor-field-subgroup{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;   /* 4 kolom sama besar */
  align-items:center !important;
  justify-items:center !important;                   /* bulatan di tengah tiap kolom */
  column-gap:0 !important;
  width:100% !important;
  max-width:760px;                                   /* atur lebar maksimum baris */
  margin:8px auto 0 !important;                      /* center secara horizontal */
}

/* Reset item */
.likert-ui .elementor-field-option{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}

/* Sembunyikan radio bawaan */
.likert-ui .elementor-field-option input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Label = bulatan */
.likert-ui .elementor-field-option > label{
  display:block !important;
  width:48px !important; height:48px !important; line-height:48px !important;
  border-radius:9999px !important;
  border:2px solid #e5e7eb !important;
  background:#f7f8fb !important;
  cursor:pointer !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  font-size:0 !important; text-indent:-9999px !important; overflow:hidden !important;
}

/* Warna per posisi (1..4) */
.likert-ui .elementor-field-option:nth-child(1) > label{ background:#fff5f5 !important; border-color:#ffc9c9 !important; }
.likert-ui .elementor-field-option:nth-child(2) > label{ background:#fff8eb !important; border-color:#ffd8a8 !important; }
.likert-ui .elementor-field-option:nth-child(3) > label{ background:#e9f7ef !important; border-color:#b2f2bb !important; }
.likert-ui .elementor-field-option:nth-child(4) > label{ background:#e8fbff !important; border-color:#a5e9f7 !important; }

/* Hover & terpilih */
.likert-ui .elementor-field-option > label:hover{
  transform:translateY(-1px) !important;
}
.likert-ui .elementor-field-option input[type="radio"]:checked + label{
  border-color:#6366f1 !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.18) !important;
}

/* Indikator step: sembunyikan label "Page" */
.likert-ui .e-form__indicators__label{ display:none !important; }

/* === Responsive === */
@media (max-width: 768px){
  .likert-ui .elementor-field-subgroup{
    max-width:520px;
  }
  .likert-ui .elementor-field-option > label{
    width:44px !important; height:44px !important; line-height:44px !important;
  }
}

/* ====== STATE TERPILIH: JADI BULATAN TERISI (FILLED) ====== */
/* Matikan dot dalam (kalau sebelumnya ada) */
.likert-ui .elementor-field-option input[type="radio"]:checked + label::after{
  transform: translate(-50%, -50%) scale(0) !important;
}

/* Variabel warna aktif (boleh ganti sesuai palet) */
.likert-ui{
  --c1-fill:#f87171;   /* merah/rose */
  --c2-fill:#f59e0b;   /* oranye/amber */
  --c3-fill:#22c55e;   /* hijau */
  --c4-fill:#38bdf8;   /* biru/sky */
}

/* Saat dipilih: isi penuh + border sewarna + glow halus */
.likert-ui .elementor-field-option:nth-child(1) input[type="radio"]:checked + label{
  background: var(--c1-fill) !important; border-color: var(--c1-fill) !important;
  box-shadow: 0 6px 18px rgba(248,113,113,.25) !important;   /* rose */
}
.likert-ui .elementor-field-option:nth-child(2) input[type="radio"]:checked + label{
  background: var(--c2-fill) !important; border-color: var(--c2-fill) !important;
  box-shadow: 0 6px 18px rgba(245,158,11,.25) !important;    /* amber */
}
.likert-ui .elementor-field-option:nth-child(3) input[type="radio"]:checked + label{
  background: var(--c3-fill) !important; border-color: var(--c3-fill) !important;
  box-shadow: 0 6px 18px rgba(34,197,94,.25) !important;     /* green */
}
.likert-ui .elementor-field-option:nth-child(4) input[type="radio"]:checked + label{
  background: var(--c4-fill) !important; border-color: var(--c4-fill) !important;
  box-shadow: 0 6px 18px rgba(56,189,248,.25) !important;    /* sky */
}

/* Hilangkan outline biru default ketika terpilih (kita pakai glow di atas) */
.likert-ui .elementor-field-option input[type="radio"]:checked + label{
  /* override aturan lama */
  box-shadow: none !important;
}

/* Tetap kasih fokus keyboard (aksesibilitas) */
.likert-ui .elementor-field-option input[type="radio"]:focus + label{
  outline: 2px solid #111827; outline-offset: 3px;
}

/* Matikan outline default hitam */
.likert-ui .elementor-field-option input[type="radio"]:focus + label,
.likert-ui .elementor-field-option input[type="radio"]:focus-visible + label{
  outline: none !important;
}

/* Focus ring sesuai warna opsi (pakai box-shadow sebagai ring) */
.likert-ui .elementor-field-option:nth-child(1) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(248,113,113,.45) !important;   /* rose */
}
.likert-ui .elementor-field-option:nth-child(2) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(245,158,11,.45) !important;    /* amber */
}
.likert-ui .elementor-field-option:nth-child(3) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(34,197,94,.45) !important;     /* green */
}
.likert-ui .elementor-field-option:nth-child(4) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(56,189,248,.45) !important;    /* sky */
}

/* Jika sedang TERPILIH + fokus, tetap pakai ring warna yang sama */
.likert-ui .elementor-field-option:nth-child(1) input[type="radio"]:checked:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(248,113,113,.55) !important;
}
.likert-ui .elementor-field-option:nth-child(2) input[type="radio"]:checked:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(245,158,11,.55) !important;
}
.likert-ui .elementor-field-option:nth-child(3) input[type="radio"]:checked:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(34,197,94,.55) !important;
}
.likert-ui .elementor-field-option:nth-child(4) input[type="radio"]:checked:focus-visible + label{
  box-shadow: 0 0 0 4px rgba(56,189,248,.55) !important;
}

/* TERPILIH: tetap ada ring di luar, warnanya mengikuti opsi */
.likert-ui .elementor-field-option:nth-child(1) input[type="radio"]:checked + label{
  background:#f87171 !important; border-color:#f87171 !important;
  box-shadow: 0 0 0 4px rgba(248,113,113,.45) !important;   /* ring merah muda */
}
.likert-ui .elementor-field-option:nth-child(2) input[type="radio"]:checked + label{
  background:#f59e0b !important; border-color:#f59e0b !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.45) !important;    /* ring oranye */
}
.likert-ui .elementor-field-option:nth-child(3) input[type="radio"]:checked + label{
  background:#22c55e !important; border-color:#22c55e !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.45) !important;     /* ring hijau */
}
.likert-ui .elementor-field-option:nth-child(4) input[type="radio"]:checked + label{
  background:#38bdf8 !important; border-color:#38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,.45) !important;    /* ring biru */
}

/* FOKUS (keyboard): ring warna yang sama, sedikit lebih tegas */
.likert-ui .elementor-field-option:nth-child(1) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 5px rgba(248,113,113,.55) !important;
}
.likert-ui .elementor-field-option:nth-child(2) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 5px rgba(245,158,11,.55) !important;
}
.likert-ui .elementor-field-option:nth-child(3) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 5px rgba(34,197,94,.55) !important;
}
.likert-ui .elementor-field-option:nth-child(4) input[type="radio"]:focus-visible + label{
  box-shadow: 0 0 0 5px rgba(56,189,248,.55) !important;
}

/* Hapus panel putih di belakang tombol Next/Submit */
.likert-ui .e-form__buttons,
.likert-ui .e-form__buttons__wrapper,
.likert-ui .elementor-button-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.likert-ui .e-form__buttons__wrapper::before { display: none !important; } /* beberapa theme pakai pseudo-bg */

/* Tata letak tombol */
.likert-ui .e-form__buttons{
  display: flex;
  gap: 12px;
  justify-content: flex-start;   /* ubah ke center/right jika perlu */
}

/* Gaya tombol (Next, Previous, Submit) – ungu polos */
.likert-ui .e-form__buttons .elementor-button{
  background: #7c3ae !important;   /* ungu */
  color: #fff !important;
  border: none !important;
  border-radius: 28px !important;
  padding: 18px 40px !important;
  box-shadow: 0 10px 24px rgba(124,58,237,.25) !important; /* glow halus */
}
.likert-ui .e-form__buttons .elementor-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(124,58,237,.28) !important;
}
.likert-ui .e-form__buttons .elementor-button:focus-visible{
  outline: 3px solid rgba(124,58,237,.4);
  outline-offset: 3px;
}

/* ==== THEME WARNA STEP (ungu) ==== */
.likert-ui{
  --step-color: #8C2887;        /* ungu utama */
  --step-color-soft: #ede9fe;   /* ungu muda utk bg */
  --step-line: #c7bdfd;         /* warna garis */
}

/* Bulatan angka */
.likert-ui .e-form__indicators__indicator__number{
  width: 36px; height: 36px;              /* lebih besar */
  border-radius: 50%;
  border: 3px solid var(--step-color);    /* garis lebih tebal + ungu */
  background: var(--step-color-soft);
  color: var(--step-color);
  font-weight: 800;                        /* tebalin font */
  font-size: 16px;
  display:grid; place-items:center;
}

/* Garis penghubung antar step */
.likert-ui .e-form__indicators__indicator__progress{
  height: 6px;                             /* garis lebih tebal */
  background: var(--step-line);
  border-radius: 999px;
}

/* State aktif & selesai (jangan hijau lagi) */
.likert-ui .e-form__indicators__indicator--active .e-form__indicators__indicator__number,
.likert-ui .e-form__indicators__indicator--completed .e-form__indicators__indicator__number{
  border-color: var(--step-color);
  background: var(--step-color-soft);
  color: var(--step-color);
}
.likert-ui .e-form__indicators__indicator--active .e-form__indicators__indicator__progress,
.likert-ui .e-form__indicators__indicator--completed .e-form__indicators__indicator__progress{
  background: var(--step-color);
}

/* (opsional) hilangkan label teks 'Page' kalau masih muncul */
.likert-ui .e-form__indicators__label{ display:none !important; }

/* ==== STEP THEME: Ungu #8C2887 ==== */
.likert-ui{
  --step-main: #8C2887;                 /* ungu brand */
  --step-text: #6A1E66;                 /* teks angka (sedikit lebih gelap) */
  --step-fill: rgba(140, 40, 135, .12); /* fill lembut agar angka terlihat */
  --step-line: rgba(140, 40, 135, .35); /* garis progres pasif */
  --step-line-active: #8C2887;          /* garis progres aktif/selesai */
}

/* Bulatan angka (default) */
.likert-ui .e-form__indicators__indicator__number{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid var(--step-main) !important;
  background: var(--step-fill) !important;
  color: var(--step-text) !important;
  font-weight: 800; font-size: 16px;
  display: grid; place-items: center;
}

/* Garis penghubung antar step */
.likert-ui .e-form__indicators__indicator__progress{
  height: 6px; border-radius: 999px;
  background: var(--step-line) !important;
}

/* Warna saat step ACTIVE & COMPLETED (semuanya ungu) */
.likert-ui .e-form__indicators__indicator--active .e-form__indicators__indicator__number,
.likert-ui .e-form__indicators__indicator--completed .e-form__indicators__indicator__number{
  border-color: var(--step-main) !important;
  background: var(--step-fill) !important;
  color: var(--step-text) !important;
}

.likert-ui .e-form__indicators__indicator--active .e-form__indicators__indicator__progress,
.likert-ui .e-form__indicators__indicator--completed .e-form__indicators__indicator__progress{
  background: var(--step-line-active) !important;
}

/* (opsional) efek fokus keyboard pada bulatan */
.likert-ui .e-form__indicators__indicator__number:focus-visible{
  outline: 3px solid rgba(140, 40, 135, .35);
  outline-offset: 3px;
}

/* === THEME STEP UNGU (#8C2887) === */
.likert-ui{
  --step-purple: #8C2887;
  --step-purple-soft: rgba(140,40,135,.10); /* hanya dipakai jika mau subtle bg di active */
}

/* Bulatan angka: default (belum diisi) = putih + outline ungu + angka ungu */
.likert-ui .e-form__indicators__indicator__number{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 3px solid var(--step-purple) !important;
  background: #fff !important;
  color: var(--step-purple) !important;
  font-weight: 800; font-size: 16px;
  display: grid; place-items: center;
}

/* Garis penghubung antar step (lebih tebal) */
.likert-ui .e-form__indicators__indicator__progress{
  height: 8px !important;             /* tebal horizontal */
  border-radius: 999px;
  background: #e9e6f0 !important;     /* garis pasif */
}

/* === STATE ACTIVE (step yang sedang dibuka) === */
.likert-ui .e-form__indicators__indicator--active .e-form__indicators__indicator__number{
  border-color: var(--step-purple) !important;
  background: #fff !important;        /* tetap putih seperti permintaan */
  color: var(--step-purple) !important;
}
.likert-ui .e-form__indicators__indicator--active .e-form__indicators__indicator__progress{
  background: var(--step-purple) !important; /* bar aktif ungu */
}

/* === STATE COMPLETED (step yang sudah dilewati) === */
/* Bulatan diisi ungu penuh dan angka ditimpa (disembunyikan) */
.likert-ui .e-form__indicators__indicator--completed .e-form__indicators__indicator__number{
  background: var(--step-purple) !important;
  border-color: var(--step-purple) !important;
  color: transparent !important;      /* menimpa angka agar tidak terlihat */
  text-shadow: none !important;
}

/* Progress bar completed jadi ungu tebal */
.likert-ui .e-form__indicators__indicator--completed .e-form__indicators__indicator__progress{
  background: var(--step-purple) !important;
}

/* Responsif (jika Elementor menampilkan garis vertikal pada layout sempit) */
@media (max-width: 767px){
  .likert-ui .e-form__indicators__indicator__progress{
    height: 10px !important;          /* sedikit lebih tebal di mobile */
  }
}/* End custom CSS */