/* =====================================================================
   THERALETIK STEGLITZ — karriere.css
   Section khusus halaman Karriere: employment-benefits, hiring-process
   (staircase), job-offers, contact (form). Butuh globals.css + utilities.css.
   Token + rem/clamp only (no px, no hex).
   ===================================================================== */

/* ============================ EMPLOYMENT BENEFITS ============================ */
.emp_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.emp_wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.emp_head { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 56.8125rem; }
.emp_eyebrow { font-weight: 500; color: var(--brand-o60); }
.emp_title { color: var(--brand-500); }
.emp_lead { font-weight: 500; color: var(--brand-o60); }

.emp_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.emp_card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--light-900);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
}
.emp_icon { width: 2.5625rem; height: 2.5625rem; }
.emp_card_title { color: var(--brand-500); }
.emp_card_text { font-weight: 500; color: var(--brand-o60); }

/* ============================ HIRING PROCESS (staircase) ============================ */
.proc_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.proc_wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.proc_head { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 32.375rem; }
.proc_eyebrow { font-weight: 500; color: var(--brand-o60); }
.proc_title { color: var(--brand-500); }
.proc_lead { font-weight: 500; color: var(--brand-o60); }

.proc_steps { display: flex; flex-direction: column; gap: var(--sp-1); }
.proc_card {
  width: 37.5rem; max-width: 100%;
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--light-900);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
}
.proc_card.is-2 { margin-left: 23.25rem; }
.proc_card.is-3 { margin-left: 46.5rem; }
.proc_num { flex: 0 0 auto; color: var(--brand-500); }
.proc_card_body { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 32.375rem; }
.proc_card_title { font-weight: 700; color: var(--brand-500); }
.proc_card_text { font-weight: 500; color: var(--brand-o60); }

/* ============================ JOB OFFERS ============================ */
.job_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.job_wrap { display: flex; align-items: flex-start; gap: var(--sp-8); }
.job_head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7); }
.job_head_text { display: flex; flex-direction: column; gap: var(--sp-3); }
.job_eyebrow { font-weight: 500; color: var(--brand-o60); }
.job_title { color: var(--brand-500); }
.job_lead { max-width: 31.4375rem; font-weight: 500; color: var(--brand-o60); }

.job_list { flex: 0 0 44.8125rem; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); }
.job_card {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--light-900);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
}
.job_card_main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.job_card_title { color: var(--brand-500); }
.job_card_text { font-weight: 500; color: var(--brand-o60); }
.job_card_meta { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; color: var(--brand-o60); }
.job_meta_dot { width: .25rem; height: .25rem; border-radius: var(--r-100); background: var(--brand-o20); }
.job_card_btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; color: var(--brand-500);
  background: var(--brand-400);
  border-radius: var(--r-100);
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.job_card_btn:hover { filter: brightness(1.06); transform: translateY(-.125rem); }
.job_card_btn:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .25rem; }

/* ============================ CONTACT ============================ */
.con_sec { background: var(--light-100); padding-top: var(--sp-sect); padding-bottom: var(--sp-sect-lg); }
.con_grid { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); }
.con_left { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-9); }
.con_intro { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 30.9375rem; }
.con_eyebrow { font-weight: 500; color: var(--brand-o60); }
.con_title { color: var(--brand-500); }
.con_lead { font-weight: 500; color: var(--brand-o60); }

.con_person { position: relative; width: 31.25rem; max-width: 100%; height: 30.5625rem; border-radius: .625rem; overflow: hidden; background: var(--light-1000); isolation: isolate; }
.con_person_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.con_person_scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 45%, var(--black-o55)); }
.con_person_info { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.con_person_name { font-weight: 500; color: var(--light-100); }
.con_person_role { font-weight: 500; color: var(--white-o60); }
.con_person_mail { font-weight: 500; color: var(--white-o60); }

.con_form {
  flex: 0 1 42.375rem; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--brand-500);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
  -webkit-backdrop-filter: blur(var(--blur-15));
  backdrop-filter: blur(var(--blur-15));
}
.con_form_head { display: flex; flex-direction: column; gap: var(--sp-3); }
.con_form_title { color: var(--light-100); }
.con_form_sub { font-weight: 500; color: var(--white-o60); }
.con_form_body { display: flex; flex-direction: column; gap: var(--sp-4); }
.con_row { display: flex; gap: var(--sp-3); }
.con_field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.con_field_label { font-weight: 500; color: var(--light-100); }
.con_input {
  width: 100%;
  padding: var(--sp-3);
  font: inherit; font-weight: 500;
  color: var(--light-100);
  background: transparent;
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-100);
  transition: border-color .2s ease;
}
.con_textarea {
  width: 100%; min-height: 11.75rem; resize: vertical;
  padding: var(--sp-3);
  font: inherit; font-weight: 500;
  color: var(--light-100);
  background: transparent;
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-main);
  transition: border-color .2s ease;
}
.con_input::placeholder, .con_textarea::placeholder { color: var(--white-o60); }
.con_input:focus, .con_textarea:focus { outline: none; border-color: var(--brand-400); }
.con_submit {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; color: var(--brand-500);
  background: var(--brand-400);
  border-radius: var(--r-100);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.con_submit:hover { filter: brightness(1.06); transform: translateY(-.125rem); }
.con_submit:focus-visible { outline: var(--bw2) solid var(--brand-400); outline-offset: .25rem; }

/* ============================ RESPONSIVE (karriere) ============================ */
@media (max-width: 75rem) {
  .proc_card.is-2 { margin-left: 12%; }
  .proc_card.is-3 { margin-left: 24%; }
  .job_wrap { flex-direction: column; }
  .job_list { flex-basis: auto; width: 100%; }
}

@media (max-width: 60rem) {
  .emp_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc_card, .proc_card.is-2, .proc_card.is-3 { width: 100%; margin-left: 0; }
  .con_grid { flex-direction: column; align-items: stretch; }
  .con_left { gap: var(--sp-5); }
  .con_person { width: 100%; }
  .con_form { flex-basis: auto; }
}

@media (max-width: 48rem) {
  .emp_grid { grid-template-columns: minmax(0, 1fr); }
  .job_card { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

@media (max-width: 30rem) {
  .con_row { flex-direction: column; }
}