/* =============================================================================
   KARİYER — sayfa grameri

   Kaynak: arolax.crowdytheme-demo.com/marketing-agency/career-dark. Oradaki
   sıra alındı: açılış → giriş + üç değer → kültür → açık pozisyonlar (numaralı
   liste) → altı değer sütunu → kapanış. Kaynağın fotoğraf galerisi ALINMADI —
   elde stüdyo/ekip fotoğrafı yok, stok fotoğraf da sitenin monokrom diline
   uymuyor; görsel çıpa olarak markanın kendi kristal elma filmi kullanıldı.

   NEDEN AYRI DOSYA: `projeler.css` gibi, bu da tek bir sayfanın grameri.
   Tipografi, düğme, açılış hareketi, üst menü, alt kapsül ve proje çekmecesi
   hizmet gramerinden geliyor (hizmet-ortak.css + hizmet-genis.css yükleniyor).
   ============================================================================= */


/* ── açılış ────────────────────────────────────────────────────────────────
   Başlık ve altındaki "etiket —— paragraf" satırı artık `kurumsal.css`in ortak
   grameri (`.ax-hero`, `.ax-h1`, `.ax-lead`). Burada yalnız üst menünün
   altında kalması için konumlandırma var. */
.kr-hero { position: relative; }


/* ── üç değer ──────────────────────────────────────────────────────────────
   Kaynakta "Future / Community / Honor" başlıklı üç kısa blok. Numaralar
   dekoratif değil: okuma sırasını veriyorlar, kartlar eşit ağırlıkta. */
.kr-uc { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.25cqw;
  margin-top: 6cqw; }
.kr-uc-h { display: flex; flex-direction: column; gap: 0.7cqw; }
.kr-uc-h b { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 1.6cqw;
  line-height: 1.1; letter-spacing: -0.025em; color: #ffffff; }
.kr-uc-no { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.68cqw;
  letter-spacing: 0.18em; color: var(--sv-ac); }


/* ── kültür ────────────────────────────────────────────────────────────────
   Film açılışın hemen altındaki tam genişlik banda taşındı (kaynaktaki sıra);
   bu bölüm metinde kaldı. Solda numaralı başlık, sağda paragraflar — hizmet
   sayfalarındaki `.zx-head` ile aynı iki kolonlu okuma düzeni. */
.kr-kultur { display: grid; grid-template-columns: 38fr 62fr; column-gap: 4cqw;
  align-items: start; margin-top: 6cqw; }
.kr-kultur-t { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6cqw; }


/* ── açık pozisyonlar ──────────────────────────────────────────────────────
   Kaynakta 01–05 numaralı, unvan + parantez içinde kişi sayısı taşıyan sade
   satırlar. Aynısı; satırlar bir liste, çünkü liste. */
.kr-ilan { margin-top: 6cqw; }
.kr-ilan-liste { margin: 2.4cqw 0 0; padding: 0; list-style: none; }
.kr-ilan-liste li { display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; column-gap: 1.6cqw; padding: 1.8cqw 0;
  border-top: 1px solid var(--sv-line); }
.kr-ilan-no { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78cqw;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.65); }
.kr-ilan-ad { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 1.9cqw;
  line-height: 1.1; letter-spacing: -0.025em; color: #ffffff; }
.kr-ilan-adet { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.92cqw;
  color: rgba(255,255,255,0.73); white-space: nowrap; }
/* Henüz yazılmamış ilan. Uydurulmuyor: `??` ile bekletiliyor —
   hakkimizda.html'deki rakamlarla ve proje künyeleriyle aynı gelenek. */
.kr-ilan-liste li.bos .kr-ilan-ad,
.kr-ilan-liste li.bos .kr-ilan-adet { color: rgba(255,255,255,0.3); }
.kr-ilan-not { margin-top: 2cqw; max-width: 60ch; }


/* ── altı değer sütunu ─────────────────────────────────────────────────── */
/* Bölümün üst boşluğu. Önce markup'ta satır içi `6cqw`'ydi: dar ekranda öteki
   bölümler 14 birim açılırken bu 390'da 23px'te kalıyordu (satır içi stil
   medya sorgusunu eziyordu). Masaüstü değeri aynı. */
.kr-pil-kap { margin-top: 6cqw; }
.kr-pil { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.25cqw;
  row-gap: 2.6cqw; margin-top: 2.6cqw; }
.kr-pil-h { display: flex; flex-direction: column; gap: 0.55cqw; }
.kr-pil-h b { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 1.35cqw;
  line-height: 1.14; letter-spacing: -0.02em; color: #ffffff; }


/* ── kapanış çağrısı ───────────────────────────────────────────────────── */
.kr-cta { display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 4cqw; margin-top: 6cqw; margin-bottom: 4cqw; padding: 3.4cqw;
  border-radius: 0.83cqw; background: #131313; }
.kr-cta h2 { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2.4cqw;
  line-height: 1.06; letter-spacing: -0.03em; color: #ffffff; max-width: 20ch; }


@media (max-width: 900px) {
  /* Tavanlı birim: 440px'e kadar 1cqw, sonra 4.4px'te sabit. Gerekçesi
     kurumsal.css'teki `--ax-u` notunda; bu dosya kendi adını taşıyor ki
     yükleme sırasına bağlı kalmasın. */
  .kr-root { --kr-u: min(1cqw, 4.4px); }

  .kr-uc { grid-template-columns: 1fr; row-gap: calc(6 * var(--kr-u)); margin-top: calc(10 * var(--kr-u)); }
  .kr-uc-h b { font-size: calc(5.4 * var(--kr-u)); }
  .kr-uc-no { font-size: max(12px, calc(2.9 * var(--kr-u))); }

  .kr-kultur { grid-template-columns: 1fr; row-gap: calc(4 * var(--kr-u)); margin-top: calc(14 * var(--kr-u)); }

  .kr-ilan { margin-top: calc(14 * var(--kr-u)); }
  .kr-ilan-liste { margin-top: calc(6 * var(--kr-u)); }
  /* Dar ekranda unvan ile adet tek satıra sığmıyor: adet alta iniyor ve
     numaranın altına değil, unvanın hizasına oturuyor. */
  .kr-ilan-liste li { grid-template-columns: auto 1fr; row-gap: calc(1.6 * var(--kr-u));
    padding: calc(5 * var(--kr-u)) 0; }
  .kr-ilan-no { font-size: max(12px, calc(2.9 * var(--kr-u))); }
  .kr-ilan-ad { font-size: calc(5.6 * var(--kr-u)); }
  .kr-ilan-adet { grid-column: 2; font-size: max(12px, calc(3.4 * var(--kr-u))); }
  .kr-ilan-not { margin-top: calc(6 * var(--kr-u)); max-width: none; }

  .kr-pil-kap { margin-top: calc(14 * var(--kr-u)); }
  .kr-pil { grid-template-columns: 1fr; row-gap: calc(5 * var(--kr-u)); margin-top: calc(8 * var(--kr-u)); }
  .kr-pil-h b { font-size: calc(4.8 * var(--kr-u)); }

  .kr-cta { grid-template-columns: 1fr; row-gap: calc(5 * var(--kr-u)); margin-top: calc(14 * var(--kr-u));
    margin-bottom: calc(10 * var(--kr-u)); padding: calc(8 * var(--kr-u)) calc(6 * var(--kr-u));
    border-radius: calc(2.4 * var(--kr-u)); }
  .kr-cta h2 { font-size: calc(7 * var(--kr-u)); max-width: none; }
}