/* =========================================================
   FRM — Form Screening Tenaga Pemasar Tahap 1
   (extends bsa-style.css + karir-style.css tokens — no overrides,
   only additive classes prefixed "frm-")
   ========================================================= */

.frm-hero{
  position:relative;
  padding:150px 0 70px;
  background:linear-gradient(165deg, var(--bsa-teal-800) 0%, var(--bsa-teal-700) 46%, var(--bsa-teal-500) 100%);
}
.frm-hero__inner{ position:relative; z-index:2; }
.frm-hero__eyebrow{ color:rgba(255,255,255,.75); }
.frm-hero__title{
  font-size:clamp(28px,4.2vw,42px);
  font-weight:800;
  color:#fff;
  line-height:1.2;
  margin:0 0 14px;
  max-width:720px;
}
.frm-hero__lead{
  font-size:14.5px;
  color:rgba(255,255,255,.82);
  max-width:620px;
  line-height:1.75;
  margin:0;
}

/* ---------- wider step rail for 6 steps ---------- */
.frm-steps{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:14px;
  margin:0 0 40px;
}
.frm-steps .krr-step{ padding:0 16px; }
.frm-steps .krr-step:not(:last-child)::after{ width:30px; }
@media (max-width:900px){
  .frm-steps .krr-step__label{ display:none; }
}

/* ---------- panel section heading ---------- */
.frm-panel__head{ margin-bottom:26px; }
.frm-panel__eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bsa-orange-600);
  margin:0 0 6px;
}
.frm-panel__head h3{
  font-size:20px;
  font-weight:800;
  color:var(--bsa-teal-800);
  margin:0 0 6px;
}
.frm-panel__head p{
  font-size:13.5px;
  color:var(--bsa-ink-soft);
  margin:0;
  line-height:1.6;
}

/* ---------- sub-group divider inside a combined panel ---------- */
.frm-subgroup{ margin-bottom:30px; }
.frm-subgroup:last-child{ margin-bottom:0; }
.frm-subgroup__label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bsa-teal-700);
  margin:0 0 16px;
}
.frm-subgroup__label::after{
  content:"";
  flex:1;
  height:1px;
  background:#EAF1F1;
}

/* ---------- textarea (bsa-field only styled input/select by default) ---------- */
.rec-form-label_required{
color: #E11D48;
margin-left:3px;
}

.bsa-field textarea{
  display:block;
  width:100%;
  padding:13px 14px;
  border-radius:10px;
  border:1.5px solid #DCE7E9;
  font-family:var(--bsa-font);
  font-size:14px;
  color:var(--bsa-ink);
  background:#FBFDFD;
  resize:vertical;
  min-height:90px;
  transition:border-color .3s var(--bsa-ease);
}
.bsa-field textarea:focus{ outline:none; border-color:var(--bsa-teal-500); box-shadow:0 0 0 4px rgba(0,170,173,.14); }
.bsa-field--full{ grid-column:1 / -1; }
.bsa-field__hint{
  display:block;
  font-size:11.5px;
  font-weight:500;
  color:var(--bsa-ink-soft);
  margin-top:6px;
}

/* ---------- pill radio group (Ya/Tidak, dsb.) ---------- */
.frm-pillgroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.frm-pill{ position:relative; }
.frm-pill input{
  position:absolute;
  opacity:0;
  inset:0;
  width:100%; height:100%;
  cursor:pointer;
  margin:0;
}
.frm-pill label{
  display:block;
  padding:10px 16px;
  border-radius:100px;
  border:1.5px solid #DCE7E9;
  font-size:12.5px;
  font-weight:600;
  color:var(--bsa-ink-soft);
  cursor:pointer;
  transition:border-color .25s var(--bsa-ease), background .25s var(--bsa-ease), color .25s var(--bsa-ease);
}
.frm-pill input:checked + label{
  border-color:var(--bsa-orange-600);
  background:rgba(241,90,34,.08);
  color:var(--bsa-orange-700);
}
.frm-pill input:focus-visible + label{ outline:2px solid var(--bsa-teal-500); outline-offset:2px; }

/* ---------- info box (CV upload instructions) ---------- */
.frm-infobox{
  display:flex;
  gap:14px;
  background:var(--bsa-teal-100);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:22px;
}
.frm-infobox i{ color:var(--bsa-teal-700); font-size:18px; margin-top:2px; }
.frm-infobox ol{ margin:6px 0 0; padding-left:18px; }
.frm-infobox li{ font-size:13px; color:var(--bsa-teal-800); line-height:1.7; }
.frm-infobox p{ margin:0; font-size:13px; color:var(--bsa-teal-800); font-weight:700; }

.frm-cvpreview{
  display:none;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:10px;
  background:#FBFDFD;
  border:1.5px solid #DCE7E9;
  font-size:12.5px;
  color:var(--bsa-ink-soft);
}
.frm-cvpreview.is-visible{ display:flex; }
.frm-cvpreview i{ color:var(--bsa-teal-500); }
.frm-cvpreview a{ color:var(--bsa-teal-700); font-weight:700; text-decoration:none; word-break:break-all; }

/* ---------- review step (step 6) ---------- */
.frm-review__group{ margin-bottom:24px; }
.frm-review__group h4{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bsa-orange-600);
  margin:0 0 12px;
}
.frm-review__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 24px;
}
@media (max-width:600px){ .frm-review__grid{ grid-template-columns:1fr; } }
.frm-review__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px dashed #EAF1F1;
  font-size:13px;
}
.frm-review__row span:first-child{ color:var(--bsa-ink-soft); }
.frm-review__row span:last-child{ color:var(--bsa-teal-800); font-weight:700; text-align:right; }

.frm-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:22px 0;
  padding:16px 18px;
  background:#FBFDFD;
  border:1.5px solid #DCE7E9;
  border-radius:12px;
}
.frm-consent input{ margin-top:3px; }
.frm-consent label{ font-size:12.5px; color:var(--bsa-ink-soft); line-height:1.6; }

/* ---------- thank you screen ---------- */
.frm-thanks{ text-align:center; padding:20px 0 6px; }
.frm-thanks i{
  font-size:44px;
  color:var(--bsa-teal-500);
  margin-bottom:18px;
  display:block;
}
.frm-thanks h3{
  font-size:22px;
  font-weight:800;
  color:var(--bsa-teal-800);
  margin:0 0 10px;
}
.frm-thanks p{
  font-size:14px;
  color:var(--bsa-ink-soft);
  max-width:480px;
  margin:0 auto;
  line-height:1.7;
}
.frm-thanks .frm-ref{
  display:inline-block;
  margin-top:18px;
  padding:8px 16px;
  border-radius:100px;
  background:var(--bsa-teal-100);
  color:var(--bsa-teal-700);
  font-size:12px;
  font-weight:700;
}