/* ==========================================================================
   Careers (EN) — sayfa katmani
   Yalnizca TIPOGRAFI gecisi icin acildi. Kural: satir ici stil medya
   sorgusunu yener, bu yuzden mobil kademesi gereken roller markup'tan
   buraya tasindi; gerisi satir ici token referansi olarak kaldi — bu
   kod tabaninda bu sayfalarda tip boyle yaziliyor (bkz. css/case-studies.css).
   Font AILELERINE dokunulmadi: Avenir lisans karari hala acik.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DUZEN — yalniz mobilde kirilabilsin diye tasindi.
   Bu dort izgara markup'ta satir ici yaziliydi; satir ici stil medya
   sorgusunu yendigi icin dar ekranda HICBIRI tek sutuna inmiyordu ve
   390px'te sayfa 658px genisliginde, yatay kaydirmali aciliyordu (bu
   tipografi gecisinden ONCE de boyleydi; metin bir basamak buyuyunce
   679px'e cikti). Kurallar buraya alinmadan duzeltilemezdi.
   -------------------------------------------------------------------------- */
.cr-hero__duzen {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--eco-space-20);
  align-items: center; height: 100%;
}
.careers-hero-text { align-self: center; }
/* Gorsel sutunlari dikeyde surekli akar: biri yukari, biri asagi (kalip
   case-studies'teki .stories-col-up/down). Iz ikiz setten olusur ve %50
   kayar; bu TAM OLARAK bir set eder, cunku ARALIK izin degil SETIN icinde
   ve sete bir de alt dolgu verildi — aralik izde olsaydi %50 bir set arti
   yarim aralik olur, dongu her turda kayardi.
   Ust/alt maske ogelerin aniden belirip kaybolmasini onler. */
/* Serit bolumun TEPESINDEN DIBINE kadar gorunur (kurucu). .hero'nun
   kendi dolgusu yok ama flex ile ortaliyor, o yuzden sabit yukseklikli
   kutu ustte ve altta 200'er px bosluk birakiyordu. Zincir boyunca
   yukseklik gecirilir: container esnetilir, izgara %100 olur, serit o
   satiri doldurur; METIN ortada kalmaya devam eder.
   Kenar maskesi KALKTI (kurucu): kareler artik solmadan, bolumun
   kenarinda kirpilarak biter. */
.careers-hero-images {
  position: relative;
  align-self: stretch; height: 100%;
  overflow: hidden;
}
/* Sutunlar AKIS DISINDA. Izgara cocugu olarak biraksaydik, iz kendi
   boyunu (iki set = 1936px) bolume dayatir ve 100dvh'lik hero 1936px'e
   cikardi — olculdu. Mutlak konumlu olunca serit yukseklige hic katki
   vermez, yuksekligi bolum belirler. */
.cr-sutun {
  position: absolute; top: 0; bottom: 0;
  width: calc((100% - var(--eco-space-3)) / 2);
  overflow: hidden;
}
.cr-sutun:nth-child(1) { left: 0; }
.cr-sutun:nth-child(2) { right: 0; }
section.hero > .container { align-self: stretch; }
.cr-sutun__iz { display: flex; flex-direction: column; will-change: transform; }
.cr-sutun__iz--yukari { animation: cr-sutun-yukari 46s linear infinite; }
.cr-sutun__iz--asagi  { animation: cr-sutun-asagi  46s linear infinite; }
.cr-sutun__set {
  display: flex; flex-direction: column;
  gap: var(--eco-space-3); padding-bottom: var(--eco-space-3);
}
@keyframes cr-sutun-yukari { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes cr-sutun-asagi  { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cr-sutun__iz { animation: none; }
}
@media (max-width: 900px) {
  .careers-hero-images { min-height: clamp(320px, 46svh, 460px); }
}

@media (max-width: 900px) {
  /* Tek sutuna inince metin kendi boyunda kalir, kalan yuksekligin
     tamami seride gider — dar ekranda "tepeden dibe"nin karsiligi bu. */
  .cr-hero__duzen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--eco-space-8); }
  /* Metin artik satirin tepesine sabit (eskiden izgara dikeyde ortalaniyordu)
     ve .hero'nun dolgusu yok, header de uzerine biniyor — basligin ilk satiri
     header'in altinda kaliyordu. Pay yalniz metne verilir; serit ikinci
     satirda (1fr) oldugu icin dibe dayanmaya devam eder. */
  .careers-hero-text { padding-top: calc(var(--header-h) + var(--eco-space-6)); }
}

/* --------------------------------------------------------------------------
   HERO AKSIYONU
   Paylasilan .hero__cta ORTALI (justify-content: center) ve kendi giris
   animasyonunu tasiyor (heroIn, 0.65s gecikme). Bu hero SOLA yasli ve
   kendi kademesi var (.careers-hero-text: baslik 0.2s, metin 0.4s), o
   yuzden buton hem sola cekiliyor hem ayni egriye ve 0.6s ile diziye
   katiliyor. Paylasilan dosyaya dokunulmadi.
   -------------------------------------------------------------------------- */
.careers-hero-text .hero__cta {
  /* Dar ekranda paylasilan kural yonu SUTUNA ceviriyor
     (.hero__cta { flex-direction: column; align-items: center }), boylece
     yatay hizayi align-items belirliyor ve justify-content eksende kalmiyor:
     buton 390px'te basligin 92px sagina kaciyordu. Yon burada sabitleniyor. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--eco-space-6);
  opacity: 0;
  animation: careersTextIn .7s ease-out .6s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .careers-hero-text .hero__cta { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   B CORP BANNERI
   Koyu zemin BILINCLI istisna: elimizdeki tek B Corp varligi beyaz
   (assets/bcorp-white.svg), acik zeminde hic gorunmezdi — our story
   sayfasindaki koyu kart da ayni sebeple koyu. Golge yok; ayirma isini
   logoyla metni ayiran sac cizgisi yapiyor.
   -------------------------------------------------------------------------- */
.cr-bcorp {
  /* Banner kompozisyonu: logo | metin | eylem. Eylem ucuncu sutunda,
     cunku iki sutunda metin 62ch'de bitiyor ve 1120px'lik panonun sagi
     bos kaliyordu. */
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--eco-space-10); align-items: center;
  margin-top: var(--eco-space-20);
  padding: var(--eco-space-10) var(--eco-space-12);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-dark);
}
/* B Corp DIKEY bir marka (57x96) ve cizimi tuvalini tam dolduruyor, yani
   kutu yuksekligi = ekrandaki murekkep yuksekligi. */
.cr-bcorp__logo { height: var(--eco-space-24); width: auto; display: block; }
.cr-bcorp__ic {
  padding-left: var(--eco-space-10);
  border-left: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .14);
}
.cr-bcorp__baslik {
  margin: 0;
  font-family: var(--eco-fontfamily-sans); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
  color: var(--eco-text-on-brand-strong);
}
.cr-bcorp__govde {
  margin: var(--eco-space-3) 0 0; max-width: 62ch;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-on-dark);
}
/* Bag artik gercek buton bileseni. Koyu banner uzerinde dogru varyant
   .btn--secondary (cam); olcu, dolgu, kose ve durumlar paylasilan .btn'den
   gelir, burada yalniz okla hizalanmasi tanimlanir. Onceki elle yazilmis
   ucuncul link KALDIRILDI (kurucu: "bizim link buton degil"). */
.cr-bcorp__btn { display: inline-flex; align-items: center; gap: var(--eco-space-2); }
.cr-bcorp__ok {
  width: 1.1em; height: 1.1em; flex-shrink: 0;
  stroke-width: var(--eco-borderwidth-icon);
  transition: transform var(--duration) var(--ease-out);
}
.cr-bcorp__btn:hover .cr-bcorp__ok,
.cr-bcorp__btn:focus-visible .cr-bcorp__ok { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .cr-bcorp__ok { transition: none; }
}
@media (max-width: 700px) {
  .cr-bcorp {
    grid-template-columns: 1fr; gap: var(--eco-space-6);
    padding: var(--eco-space-8);
    justify-items: start;
  }
  .cr-bcorp__ic { padding-left: 0; border-left: 0; }
  .cr-bcorp__baslik { font-size: var(--eco-fontsizemobile-h3); }
}

@media (min-width: 701px) and (max-width: 1100px) {
  /* Bu araligda uc sutun metni 30ch'nin altina sikistiriyor; eylem alta iner. */
  .cr-bcorp { grid-template-columns: auto 1fr; }
  .cr-bcorp__btn { grid-column: 2; margin-top: var(--eco-space-5); justify-self: start; }
}

/* --------------------------------------------------------------------------
   03 ISIN ANLAMI — acilan medya kutusu
   Kalip: for-businesses/technical-restoration.html icindeki .ts-field pisti
   (orada Apple'in "Smooth operator" deseni tarayicida olculup kurulmus).
   Arka plan sabit bir FOTOGRAF (video kaldirildi: indirilebilen tek tam
   akis 640x360'ti ve dosya agirdi). Perde bu karenin parlakligina gore
   olculerek acildi.
   Kurucu "aynisi, sadece baslik ve desc" dedi: oradaki IKI CAM KART ve
   yalniz onlarin yarattigi dikey kesilmeyi kapatmak icin konmus
   @media (max-height: ...) telafileri BURAYA TASINMADI — kilit blok cok
   daha kisa oldugu icin o kesilme olusmuyor (olculdu).
   -------------------------------------------------------------------------- */
.cr-is { background: var(--eco-surface-page); }
.cr-field__pist { position: relative; }
.cr-field__kutu {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
  height: 94svh;
  overflow: hidden;
  background: var(--eco-surface-dark-sunken);
  /* Baslangic genisligi = bolum kabi, boylece kart sayfanin kabiyla hizali
     acilir. Degiskensiz halde --cr-a = 1 => inset(0) = tam genislik, yani
     betik hic baglanmazsa bolum son haliyle durur. */
  --cr-kenar: calc((100vw - min(var(--container-max), 100vw) + 2 * var(--container-px)) / 2);
  clip-path: inset(calc(6.25% * (1 - var(--cr-a, 1)))
                   calc(var(--cr-kenar) * (1 - var(--cr-a, 1)))
                   round calc(var(--eco-radius-lg) * (1 - var(--cr-a, 1))));
}
.cr-field__media {
  position: absolute; inset: 0; margin: 0;
  transform: scale(calc(0.90 + 0.10 * var(--cr-a, 1)));
  will-change: transform;
}
.cr-field__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim iki parca: taban her zaman acik (en az karartma), ::after scroll'la
   0'dan 1'e kademeli koyulasir. Siyah, yesil degil — yesil olsa gorsel
   bolum zeminine karisirdi. */
.cr-field__scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* IKI KATMAN. Tum kareyi karartmak yerine (kurucu: "cok karartma")
     duz perde hafif tutuldu ve metnin arkasina odakli bir elips kondu.
     Bu fotograf parlak (metin bandinin en parlak %2'si L=0.724); olculen
     secenekler arasinda en acik olani degil, PAYI olan en acigi secildi:
     kenar parlakligi 0.294 (daha acigi 0.319'da pay x1.01'e dusuyordu,
     0.360'ta metin esigin altina iniyordu), metnin en dar payi x1.27. */
  background:
    radial-gradient(ellipse 72% 34% at 50% 45%,
      rgba(0, 0, 0, .50)   0%,
      rgba(0, 0, 0, .29)  56%,
      rgba(0, 0, 0, 0)    80%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .08)   0%,
      rgba(0, 0, 0, .22)  28%,
      rgba(0, 0, 0, .25)  62%,
      rgba(0, 0, 0, .20) 100%);
}
.cr-field__scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .045)  0%,
    rgba(0, 0, 0, .115) 30%,
    rgba(0, 0, 0, .14)  62%,
    rgba(0, 0, 0, .19) 100%);
  opacity: var(--cr-k, 1);
  will-change: opacity;
}
/* Metin kutunun %36.3'unden baslar (kaynaktaki olcum: Apple 308/849) ve
   kutuyla birlikte akar; kendi basina hareketi yok. */
.cr-field__kilit {
  position: absolute; left: 0; right: 0; top: 36.3%;
  display: grid; justify-items: center; text-align: center;
  gap: var(--eco-space-6);
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--container-px);
}
.cr-field__title {
  margin: 0; max-width: 18ch;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-3xl);
  line-height: var(--eco-lineheight-display-3xl);
  letter-spacing: var(--eco-letterspacing-display-3xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
  text-wrap: balance;
}
.cr-field__lede {
  margin: 0; max-width: 58ch;
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-on-dark);
}
@media (max-width: 900px) {
  .cr-field__title { font-size: var(--eco-fontsizemobile-display-3xl); max-width: none; }
  .cr-field__kilit { gap: var(--eco-space-5); top: 30%; }
}

/* --------------------------------------------------------------------------
   ACIK ILANLAR — bos durum ve genel basvuru
   Bos durum bir EKSIKLIK gibi degil, bilincli bir hal gibi okunmali:
   sayfa zemini --eco-surface-page, panel --eco-surface-base, aralarinda
   sac cizgisi. Golge yok, yaricap merdivenden (lg).
   -------------------------------------------------------------------------- */
.cr-bos {
  margin: 0;
  padding: var(--eco-space-8) var(--eco-space-8);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-base);
  text-align: center; text-wrap: balance;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-secondary);
}
@media (max-width: 700px) {
  .cr-bos { padding: var(--eco-space-8) var(--eco-space-6); }
}


/* Hero basligi display-xl (60px, kurucu). Paylasilan .hero__title
   display-lg veriyor; sayfa katmaninda bir basamak yukari aliniyor,
   mobil karsiligi da birlikte. */
.careers-hero-text .hero__title {
  font-size: var(--eco-fontsize-display-xl);
  line-height: var(--eco-lineheight-display-xl);
  letter-spacing: var(--eco-letterspacing-display-xl);
}
@media (max-width: 767px) {
  .careers-hero-text .hero__title {
    font-size: var(--eco-fontsizemobile-display-xl);
    line-height: var(--eco-lineheight-display-xl);
    letter-spacing: var(--eco-letterspacing-display-xl);
  }
}

/* KAPANIS CTA — .ef-cta paylasilan kalip ama buton sarmalayicisi
   footer-eds.css'te DEGIL, her sayfanin kendi katmaninda tanimli.
   Blok blog.css'ten birebir; (0,3,0) ozgulluk ZORUNLU, cunku
   footer-eds.css bu sayfada da en son yukleniyor ve esitlikte onun
   `.ef-cta .btn { margin-top: 32px }` kurali kazanirdi. */
.ef-cta__aksiyonlar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--eco-space-5);
  margin-top: var(--eco-space-8);
}
.ef-cta .ef-cta__aksiyonlar .btn { margin-top: 0; }

/* A still photo composition on phones; duplicate loop sets are unnecessary. */
@media (max-width: 900px) {
  .cr-sutun__iz { animation: none; transform: none; will-change: auto; }
  .cr-sutun__set[aria-hidden="true"] { display: none; }
}