/* ═══════════════════════════════════════════════════════════════
   whitemodz — KARİYER IV  (jobs.html; wm-jobs.css ve wm-site4.css'ten sonra)

   Hero: aynı ışık dili, "Nasıl işler" çift çerçeveli kart, avantajlar hap.
   Tek rol: dar sütun kart yerine geniş bir rol bandı (başlık + düğme üstte,
   dört görev altta çip). Başvuru: iki sütunlu kabuk tek sütuna iner, sol
   sütunun ~900px boşluğu kalkar; başlık üst şerit, form altında.
   jobs.js sözleşmesi (id'ler, .is-gated/.is-done, .job-gate) değişmedi.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1 · Hero ══════════════════════════════════════════════════ */
.jb4-hero.jobs-hero{ isolation: isolate; background: var(--wm-k); }
.jb4-hero .s4-hero__bg{ z-index: -1; }
.jb4-hero .jobs-hero-in{ position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.jb4-hero .jobs-hero-crumbs{ font-size: 12px; }
.jb4-hero .jobs-hero-copy h1{
  font-size: clamp(42px, 5.2vw, 76px); line-height: .98; font-weight: 850;
  font-variation-settings: "wdth" 114, "wght" 850; letter-spacing: -.04em; text-transform: none;
}
.jb4-hero .jobs-hero-lead{ font-size: 16.5px; line-height: 1.68; }
.jb4-hero .jobs-hero-acts{ gap: 12px; }
.jb4-hero .jobs-hero-perks{ --jobs-perk-pad: 0px; gap: 8px; margin: 30px 0 0; padding: 0; border-top: 0; clip-path: none; }
.jb4-hero .jobs-hero-perks li{
  gap: 8px; height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill);
  background: rgba(255,255,255,.035); font-size: 13px;
}
.jb4-hero .jobs-how{
  padding: 28px 28px 30px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01) 55%), var(--wm-k-raise);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 6px rgba(255,255,255,.022), 0 0 0 7px rgba(255,255,255,.05), 0 40px 90px -34px rgba(0,0,0,.95);
  transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -5px), 0);
}
.jb4-hero .jobs-how-title{ font-size: 11px; letter-spacing: .14em; color: var(--wm-y); }
.jb4-hero .jobs-how-num{ background: var(--wm-y-soft); border-color: var(--wm-y-line); box-shadow: none; font-size: 15px; }
.jb4-hero .jobs-how-step::before{ background: linear-gradient(var(--wm-y-line), rgba(255,255,255,.08)); }
.jb4-hero .jobs-how-copy > b{ font-size: 15px; }
.jb4-hero .jobs-how-copy > span{ font-size: 13.5px; }

/* ═══ 2 · Rol bandı ═════════════════════════════════════════════ */
.jb4-roles .section-head h2{ font-size: clamp(30px, 3.2vw, 46px); text-transform: none; }
.jb4-roles .jobs-roles--solo{ grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.jb4-roles .job-role-card{
  display: grid; grid-row: auto; grid-template-rows: none;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title btn" "icon desc btn" "list list list";
  column-gap: 22px; row-gap: 0; align-items: center;
  padding: clamp(24px, 3vw, 36px); border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 70%), var(--wm-k-raise);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 6px rgba(255,255,255,.02), 0 0 0 7px rgba(255,255,255,.045), var(--wm-e2);
}
.jb4-roles .job-role-card:hover{ transform: none; border-color: rgba(255,255,255,.14); box-shadow: 0 0 0 6px rgba(255,255,255,.02), 0 0 0 7px rgba(255,255,255,.06), var(--wm-e2); }
.jb4-roles .job-role-top{ grid-area: icon; align-self: start; margin: 0; }
.jb4-roles .job-role-icon{ width: 60px; height: 60px; border-radius: 18px; color: var(--wm-y); background: var(--wm-y-soft); border: 1px solid var(--wm-y-line); }
.jb4-roles .job-role-icon svg{ width: 26px; height: 26px; }
.jb4-roles .job-role-card h3{
  grid-area: title; align-self: end; font-size: clamp(22px, 2vw, 28px); font-weight: 850;
  font-variation-settings: "wdth" 110, "wght" 850; letter-spacing: -.024em; text-transform: none;
}
.jb4-roles .job-role-card > p{ grid-area: desc; align-self: start; max-width: 64ch; margin-top: 8px; font-size: 15px; }
.jb4-roles .job-role-list{
  grid-area: list; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 24px 0 0;
}
.jb4-roles .job-role-list li{
  align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--wm-line);
  font-size: 13.5px;
}
/* Kart düğmesi: wm-site4'ün .btn:not(.btn-primary) zeminini geçen seçici */
.jb4-roles .btn.job-apply-trigger:not(.btn-primary){
  grid-area: btn; width: auto; height: 54px; margin: 0; padding: 0 10px 0 24px; gap: 14px;
  background: var(--wm-y); color: var(--wm-on-y); border-color: var(--wm-y-hi); box-shadow: var(--wm-sh-y);
  font-family: var(--wm-display); font-size: 15px; font-weight: 800; font-variation-settings: "wdth" 106, "wght" 800;
}
.jb4-roles .btn.job-apply-trigger:not(.btn-primary):hover{ background: var(--wm-y-hi); color: var(--wm-on-y); border-color: var(--wm-y-hi); box-shadow: var(--wm-sh-y-hi); }
.jb4-roles .btn.job-apply-trigger svg{
  width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(10,10,10,.16); box-sizing: border-box;
}

/* ═══ 3 · Başvuru: tek sütun ════════════════════════════════════ */
.jb4-apply .job-apply-shell{
  grid-template-columns: minmax(0, 1fr); max-width: 920px; margin-inline: auto; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 240px), var(--wm-k-raise);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 6px rgba(255,255,255,.02), 0 0 0 7px rgba(255,255,255,.045), var(--wm-e3);
}
.jb4-apply .job-apply-side{
  position: relative; overflow: hidden; padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3.6vw, 44px);
  border-right: 0; border-bottom: 1px solid var(--wm-line); border-radius: 29px 29px 0 0;
  background: radial-gradient(520px 260px at 90% 0%, rgba(255,199,0,.1), transparent 70%);
}
.jb4-apply .job-apply-side-in{ position: static; gap: 0; }
.jb4-apply .job-apply-head h2{
  font-size: clamp(26px, 2.8vw, 38px); font-weight: 850; font-variation-settings: "wdth" 112, "wght" 850;
  letter-spacing: -.03em; text-transform: none;
}
.jb4-apply .job-apply-head p{ max-width: 60ch; font-size: 15px; }
.jb4-apply .job-apply-main{ padding: clamp(24px, 3.4vw, 40px) clamp(22px, 3.6vw, 44px) clamp(28px, 3.6vw, 44px); }
.jb4-apply .job-form-legend i{
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-style: normal; color: var(--wm-y); background: var(--wm-y-soft); border: 1px solid var(--wm-y-line);
}
.jb4-apply .job-apply-main .field input, .jb4-apply .job-apply-main .field textarea{ border-radius: 14px; }
.jb4-apply .job-submit{ height: 58px; }
.jb4-apply .job-apply-shell.is-done .job-apply-side{ display: none; }

/* ═══ 4 · Duyarlı ═══════════════════════════════════════════════ */
@media (max-width: 980px){
  .jb4-hero .jobs-hero-in{ grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .jb4-roles .job-role-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .jb4-roles .job-role-card{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "title" "desc" "list" "btn"; row-gap: 12px; }
  .jb4-roles .job-role-card h3{ margin-top: 6px; }
  .jb4-roles .job-role-list{ margin-top: 12px; padding-top: 18px; }
  .jb4-roles .btn.job-apply-trigger:not(.btn-primary){ width: 100%; justify-content: space-between; margin-top: 6px; }
}
@media (max-width: 620px){
  .jb4-hero .jobs-hero-acts{ flex-direction: column; align-items: stretch; }
  .jb4-hero .jobs-hero-acts .s4-cta{ justify-content: space-between; }
  .jb4-roles .job-role-list{ grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 5 · Hareket hassasiyeti ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .jb4-hero .jobs-how{ transform: none; }
}