/* ============================================================
   Kariyer — Figma 2147:9572 (1440x4089)

   Sayfa akışı:
     0     kahraman                 1440x678
     678   İK yaklaşımı             1440x631  (panel #E7E7E7 r16 @ 96,798)
     1309  "Seni Neler Bekliyor?"   1440x559  (zemin #E7E7E7)
     1856  "Bize Katıl"             1440x400
     2256  Genel Başvuru formu      1440x866  (lacivert)
     3122  İK Taahhüdümüz           1440x547
     3669  footer

   .joblist bloğu iki kez kullanılır (Neler Bekliyor + Taahhüdümüz);
   tools/compare_frames.py düzen eşleşmesi %83 — tek bileşen.
   ============================================================ */

/* ---------- Kahraman ---------- */
.karhero { position: relative; height: 678px; overflow: hidden; text-align: center; }
.karhero .bg-media { position: absolute; inset: 0; }
.karhero .bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karhero .bg-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 30, 66, .53); }
.karhero__inner { position: relative; padding-top: 294px; }
.karhero__title { margin: 0 0 24px; font-weight: 600; font-size: 36px; line-height: 43.88px; color: #fff; }
.karhero__sub { margin: 0; font-weight: 500; font-size: 20px; line-height: 24.38px; color: #fff; }
.karhero__actions { display: flex; justify-content: center; gap: 14px; margin-top: 48px; }
.karbtn {
  display: grid; place-items: center; min-height: 40px; padding: 0 10px;
  font-weight: 600; line-height: 17.07px; text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.karbtn--navy { background: var(--color-navy); border: 1px solid var(--color-navy); color: #fff; }
.karbtn--navy:hover { background: #0A2F63; }
.karbtn--white { background: #fff; color: var(--color-navy); }
.karbtn--white:hover { background: #E0E7F1; }

/* ---------- İK yaklaşımı — Figma: panel 1248x443 @ (96,798), #E7E7E7 r16 ---------- */
.karappr { padding: 120px 0 68px; background: #fff; }   /* 678 -> 798, panel 1241 -> 1309 */
.karappr__panel { padding: 46px 24px 34px; background: #E7E7E7; border-radius: 16px; }
.karappr__title {
  margin: 0 0 24px; text-align: center;
  font-weight: 600; font-size: 32px; line-height: 39.01px; color: var(--color-blue);
}
/* Figma: Frame 48095585 1200x300; sütunlar dikeyde ortalı. */
.karappr__row { display: flex; align-items: center; gap: 57px; min-height: 300px; margin: 0; padding: 0; list-style: none; }
.karappr__row li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* SVG tuvali 98x98; ikonun kendisi (rx8 kutu) icinde 90x90 ve golge payi
   solda/sagda 4, altta 8px. Tuvali 90'a sikistirmak kutuyu 82.65'e dusuruyordu.
   Tuval 98 -> kutu 90; alttaki 8px golge payi negatif margin ile akistan silinir. */
.karappr__icon { display: block; width: 98px; height: 98px; margin-bottom: -8px; }
.karappr__text { display: block; width: 236px; text-align: center; }
.karappr__name {
  display: block; min-height: 27px;
  font-weight: 500; font-size: 18px; line-height: 21.94px; color: var(--color-blue);
}
.karappr__body {
  display: block; margin-top: 1px;
  font-weight: 400; font-size: 15px; line-height: 18.28px; color: var(--color-navy);
}
/* Figma tutarsizligi: 1-2. kart 15/18.28, 3-4. kart 14/17.07 — iki cercevede de
   boyle. Ad kutusu 3. kartta 48px (iki satir + 21 aralik), 4. kartta 44px. */
.karappr__row li:nth-child(3) .karappr__name { min-height: 48px; }
.karappr__row li:nth-child(3) .karappr__body,
.karappr__row li:nth-child(4) .karappr__body {
  margin-top: 0; font-size: 14px; line-height: 17.07px;
}

/* ---------- Görsel + lacivert madde listesi (iki kez kullanılır) ---------- */
.joblist { background: #E7E7E7; }
.joblist__title {
  margin: 0 0 48px; font-weight: 600; font-size: 32px; line-height: 39.01px; color: var(--color-navy);
}
.joblist__row { display: flex; background: var(--color-navy); }
.joblist__fig { flex: 0 0 576px; margin: 0; align-self: stretch; }
.joblist__fig > * { display: block; width: 576px; height: 100%; object-fit: cover; }
.joblist__items {
  flex: 1 1 auto; margin: 0; padding: 34px 60px 34px 37px; list-style: none;
}
.joblist__items li {
  position: relative; padding-left: 48px;
  font-weight: 500; font-size: 20px; line-height: 52px; color: #fff;
}
/* Figma metni "\uf0b7 " (Wingdings madde imi) ile basliyor; Figma bunu orta
   nokta olarak ciziyor ve ~2.4em yer kapliyor. Referansta metin dugumu x=709,
   nokta x=722, metin x=757. */
.joblist__items li::before {
  content: "\00B7"; position: absolute; left: 11px;
}
.joblist--expect { padding: 72px 0 60px; }     /* 1309 -> 1381, 1796 -> 1856 */
.joblist--commit { padding: 42px 0 58px; }     /* 3122 -> 3164, 3611 -> 3669 */
.joblist--commit .joblist__title { margin-bottom: 32px; }   /* Figma: burada 32, üstte 48 */

/* ---------- Bize Katıl — Figma: 1440x400 @ y=1856 ---------- */
.karjoin { padding: 90px 0; }                  /* 1856 -> 1946 */
.karjoin__row { display: flex; gap: 104px; align-items: flex-start; }
.karjoin__text { flex: 0 0 596px; padding-top: 42px; }
.karjoin__title { margin: 0 0 41px; font-weight: 600; font-size: 32px; line-height: 39.01px; color: var(--color-navy); }
.karjoin__body { margin: 0; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--color-navy); }
.karjoin__cards { display: flex; gap: 48px; }
.karcard {
  flex: 0 0 200px; display: flex; flex-direction: column; align-items: center;
  gap: 24px; min-height: 220px; padding: 26px 0 0; background: #E4E4E4;
}
.karcard__img { display: block; }
.karcard__text {
  display: block; width: 100%; padding: 0 10px; text-align: center;
  font-weight: 400; font-size: 16px; line-height: 19.5px; color: var(--color-navy);
}
.karcard__cta {
  display: grid; place-items: center; min-width: 70px; min-height: 30px; padding: 0 10px;
  background: var(--color-navy); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 16px; line-height: 19.5px;
}
.karcard__cta:hover { background: #0A2F63; }

/* ---------- Genel Başvuru formu — Figma: 1440x866 @ y=2256, #041E42 ---------- */
.karform { position: relative; padding: 35px 0 43px; background: var(--color-navy); overflow: hidden; }
/* Figma: Vector 338, 690x700 @ (-104,41) bölüm köşesine göre; %22 opaklık
   SVG'nin içinde. */
.karform__deco { position: absolute; left: -104px; top: 41px; width: 690px; height: 700px; pointer-events: none; }
.karform__row { position: relative; display: flex; gap: 70px; align-items: flex-start; }
.karform__intro { flex: 0 0 615px; padding-top: 299px; }   /* 2291 -> 2590 */
.karform__title { margin: 0 0 24px; font-weight: 600; font-size: 32px; line-height: 39.01px; color: #fff; }
.karform__sub { margin: 0; max-width: 591px; font-weight: 500; font-size: 20px; line-height: 24.38px; color: #fff; }
.karform__fields { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; }
.karfield { display: flex; flex-direction: column; gap: 8px; }
.karfield > label, .karfield__label {
  font-weight: 400; font-size: 14px; line-height: 17.07px; color: #fff;
}
.karfield input[type="text"], .karfield input[type="email"], .karfield input[type="tel"],
.karfield select, .karfield textarea {
  width: 100%; padding: 0 16px; background: #fff;
  border: 1px solid #9BCBEB; border-radius: 0;
  font: inherit; font-size: 14px; line-height: 17.07px; color: var(--color-navy);
}
.karfield input, .karfield select { height: 46px; }
.karfield textarea { height: 165px; padding: 14px 16px; resize: vertical; }
.karfield select { appearance: none; color: #B2B2B2; font-weight: 300; }
.karfield select:valid { color: var(--color-navy); }
.karfield__wrap { position: relative; }
.karfield__wrap svg {
  position: absolute; right: 27px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--color-navy); pointer-events: none;
}
.karfield--file { gap: 15px; }
.karfield__file {
  /* align-self ŞART: .karfield sütun flex olduğu için buton aksi halde
     563px'e esner; Figma'da 109x42 ve sola dayalı. */
  align-self: flex-start;
  display: inline-grid; place-items: center; min-width: 109px; min-height: 42px; padding: 0 12px;
  background: #CFCFCF; color: var(--color-navy); cursor: pointer;
  font-weight: 600; font-size: 16px; line-height: 19.5px;
}
.karfield__file:hover { background: #C0C0C0; }
.karfield__file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.karform__submit {
  height: 46px; border: 0; background: var(--color-blue); color: #fff; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 16px; line-height: 19.5px;
  transition: background-color .18s ease;
}
.karform__submit:hover { background: #00256F; }
.karform__consents { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.karform__consents label {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400; font-size: 14px; line-height: 20px; color: #fff;
}
.karform__consents input { flex: 0 0 21px; width: 21px; height: 20px; accent-color: var(--color-blue); }

/* ============================================================
   Mobil — Figma 2151:9991 "Kariyer Mobil" (390x4664)

   Karar (28.08.2026): mobilde MOBİL ÇERÇEVEDE NE VARSA O çizilir.
   Çerçevede olmayan üç blok mobilde gizlenir (masaüstünde durur):
   kahraman butonları · form onay kutuları · "İK Taahhüdümüz" bölümü.

   Bölüm sınırları (çerçeve köşesine göre):
     0     başlık çubuğu     390x52
     0     kahraman          390x438   (başlık 272, alt metin 314)
     438   İK yaklaşımı      390x1047  (panel 462-1465, beyaz r8 + gölge)
     1485  "Seni Neler..."   390x530   (zemin #F5F5F5, lacivert panel 1583-1994)
     2039  "Bize Katıl"      390x642   (kartlar 2204 ve 2440, 200x220)
     2681  Genel Başvuru     390x1019  (elmas süsleme -115,42 · 466x473)
     3700  footer            390x964
   ============================================================ */
@media (max-width: 767px) {
  /* ---- Kahraman: 390x438 ---- */
  .karhero { height: 438px; text-align: left; }
  .karhero__inner { padding-top: 272px; }
  .karhero__title { margin-bottom: 20px; font-size: 18px; line-height: 21.94px; }
  .karhero__sub { font-weight: 400; font-size: 16px; line-height: 19.5px; }
  /* Mobil çerçevede çizilmemiş. */
  .karhero__actions { display: none; }

  /* ---- İK yaklaşımı: bölüm 438-1485, panel 462-1465 ----
     Zemin #B9D9EF %12; panel beyaz, r8, gölge 0/8/7.7 #031938 %10.
     Kartlar: 615 · 811 · 1007 · 1248 — yükseklikler 180/180/225/190,
     aralık 16. Kart kutuları içerikten uzun (Figma'da öyle çizilmiş);
     ikon üstte, metin altta hizalı kalsın diye kutu ölçüsü sabitlendi. */
  .karappr { padding: 24px 0 20px; background: rgba(185, 217, 239, .12); }
  .karappr__panel {
    padding: 24px 0 27px; background: #fff;
    border-radius: 8px; box-shadow: 0 8px 7.7px rgba(3, 25, 56, .10);
  }
  /* Figma metin kutusu 310 geniş — iki satıra sarıyor; sınırlamazsak tek satır olur. */
  .karappr__title {
    max-width: 310px; margin: 0 auto 70px;
    font-weight: 500; font-size: 24px; line-height: 29.26px;
  }
  .karappr__row { flex-direction: column; align-items: center; gap: 16px; min-height: 0; }
  .karappr__row li { flex: 0 0 auto; gap: 22px; height: 180px; }
  .karappr__row li:nth-child(3) { height: 225px; }
  .karappr__row li:nth-child(4) { height: 190px; }
  /* Tuval 98x98 içinde 48x48 kutu: 48 * 98/90 = 52.27, alt gölge payı 4.27. */
  .karappr__icon { width: 52.267px; height: 52.267px; margin-bottom: -4.267px; }
  .karappr__body { margin-top: 0; }
  .karappr__row li:nth-child(3) .karappr__body { margin-top: 10px; }

  /* ---- "Seni Neler Bekliyor?": bölüm 1485-2015 ----
     Lacivert panel GÖRSELDE BAŞLIYOR (1583) ve metnin 26px altında biter
     (1994); görsel ile liste arasındaki 24px de lacivert. */
  .joblist--expect { background: #F5F5F5; }
  .joblist__title {
    margin-bottom: 16px; text-align: center;
    font-weight: 500; font-size: 24px; line-height: 29.26px;
  }
  /* Figma'da başlık "SİMGETEK'te Seni \A Neler Bekliyor?" olarak zorla
     bölünmüş; kutu 356 geniş olsa da satır sonu elle konmuş. */
  .joblist--expect .joblist__title { max-width: 250px; margin-inline: auto; }
  .joblist__row { flex-direction: column; background: var(--color-navy); padding-bottom: 26px; }
  .joblist__fig { flex: 0 0 auto; }
  .joblist__fig > * { width: 100%; height: 241px; }
  .joblist__items { margin-top: 24px; padding: 0; }
  .joblist__items li { padding-left: 39px; font-size: 16px; line-height: 24px; }
  /* Referans: nokta x=28, metin x=55 (liste kutusu x=16). */
  .joblist__items li::before { left: 10.5px; }
  .joblist--expect { padding: 24px 0 21px; }
  /* Mobil çerçevede yok. */
  .joblist--commit { display: none; }

  /* ---- "Bize Katıl": bölüm 2039-2681 ----
     Kartlar 200x220, aralık 16, ortalı. 1. kart üst dolgu 26 / görsel 61x58,
     2. kart üst dolgu 29 / görsel 52x52 — Figma'da böyle çizilmiş. */
  /* Figma'da "Seni Neler Bekliyor" 2015'te bitiyor, bu bölüm 2039'da
     başlıyor — aradaki 24px beyaz boşluk üst dolguya eklendi. */
  .karjoin { padding: 65px 0 21px; }
  /* Masaüstündeki align-items:flex-start sütun yönünde çocukları içeriğe
     göre daraltıyor; kart sütunu 358 yerine 200 kalıp sola yapışıyordu. */
  .karjoin__row { flex-direction: column; align-items: stretch; gap: 24px; text-align: center; }
  .karjoin__text { flex: 0 0 auto; padding-top: 0; }
  .karjoin__title { margin-bottom: 16px; font-weight: 500; font-size: 20px; line-height: 24.38px; }
  .karjoin__body { font-size: 14px; line-height: 20px; }
  .karjoin__cards { flex-direction: column; align-items: center; gap: 16px; }
  .karcard { flex: 0 0 auto; width: 200px; height: 220px; gap: 16px; padding-top: 26px; }
  .karcard:nth-child(2) { padding-top: 29px; }
  .karcard__text { padding: 0; }
  .karcard:nth-child(2) .karcard__text { padding: 0 10px; }
  .karcard__cta { margin-top: 8px; }   /* 16 + 8 = Figma'daki 24 */

  /* ---- Genel Başvuru formu: bölüm 2681-3700 ---- */
  .karform { padding: 42px 0 66px; }
  /* Elmas süsleme mobilde de var: 466x473 @ (-115,42). */
  .karform__deco { display: block; left: -115px; top: 42px; width: 466px; height: 473px; }
  .karform__row { flex-direction: column; align-items: stretch; gap: 32px; }
  /* Figma "Form Başlık" kutusu 358x104 (20 + 24 + 60); alanlar 2859'da başlar. */
  .karform__intro { flex: 0 0 auto; min-height: 104px; padding-top: 0; text-align: center; }
  .karform__title { margin-bottom: 24px; font-weight: 500; font-size: 16px; line-height: 19.5px; }
  .karform__sub { max-width: none; font-weight: 400; font-size: 16px; line-height: 19.5px; }
  .karform__fields { gap: 23px; }
  .karfield { gap: 15px; }
  /* Etiket kutusu Figma'da 20px; 19.5 satır yüksekliği altı alanları
     kümülatif 3px yukarı kaydırıyordu. */
  .karfield > label, .karfield__label { font-size: 16px; line-height: 20px; }
  .karfield--file > label { font-size: 14px; line-height: 17px; }
  .karfield input, .karfield select { height: 46px; font-size: 16px; }
  .karfield--tel input { height: 42px; }   /* Figma tutarsızlığı; ölçü korundu */
  .karfield textarea { resize: none; }
  .karform__submit { height: 43px; font-size: 14px; line-height: 17.07px; }
  .karfield select { color: #666; font-weight: 400; }
  /* Mobil çerçevede yok. */
  .karform__consents { display: none; }
}

/* Tablet / ara genişlikler (768-1439) — Figma'da tasarlanmadı. */
@media (min-width: 768px) and (max-width: 1439px) {
  .karappr__row { flex-wrap: wrap; justify-content: center; gap: 32px; }
  .karappr__row li { flex: 0 1 236px; }
  .karjoin__row { flex-wrap: wrap; gap: 32px; }
  .karjoin__text { flex: 1 1 320px; }
  .karjoin__cards { flex: 0 0 auto; }
  .joblist__row { flex-wrap: wrap; }
  .joblist__fig { flex: 1 1 300px; }
  .joblist__fig > * { width: 100%; }
  .joblist__items { flex: 1 1 300px; }
  .karform__row { flex-wrap: wrap; gap: 32px; }
  .karform__intro { flex: 1 1 320px; padding-top: 0; }
  .karform__fields { flex: 1 1 380px; }
  .karform__deco { display: none; }
}