/* =============================================================================
   KURUMSAL SAYFALAR — ortak gramer (Projeler · Proje detayı · Kariyer)

   Kaynak: arolax.crowdytheme-demo.com. Dört referans sayfasının (about-us-dark,
   career-dark, work-dark, portfolio/…) ekran görüntüleri alınıp ÖLÇÜLDÜ; ortak
   üç hamle bu dosyada:

     1) DEV BAŞLIK. Kaynakta açılış başlığı ekranın neredeyse tamamını kaplıyor
        (1600px kadrajda ~96px glif, iki-üç satır). Bu sayfaların ilk hâlinde
        başlık 5.2cqw ve `max-width: 16ch` ile kutulanmıştı — kaynağın en
        belirgin jesti tam da kaybolan şeydi.

     2) ETİKET —— PARAGRAF satırı. Başlığın altında, SOLA DAYALI DEĞİL içeri
        girintili bir satır: küçük etiket, ondan çıkan ince bir çizgi, sonra
        paragraf. Kaynakta hem "01. ABOUT US ——" hem "Career ——" böyle.

     3) TAM GENİŞLİK GÖRSEL. Açılıştan sonra kenar boşluğuna aldırmayan bir
        görsel bandı geliyor.

   Bu dosya `hizmet-ortak.css` + `hizmet-genis.css` ile BİRLİKTE yükleniyor:
   tipografi, düğme, açılış hareketi, üst menü, alt kapsül ve proje çekmecesi
   oradan geliyor. Sayfaya özel parçalar hâlâ kendi dosyalarında
   (projeler.css, kariyer.css).

   ÖLÇÜ: hizmet sayfalarıyla aynı — kök `container-type: inline-size`, cqw,
   1920 tuvali, kenar boşluğu 8.33333cqw.
   ============================================================================= */


/* ── dev açılış başlığı ────────────────────────────────────────────────────
   `min-height` ekranın çoğunu kaplatıyor: kaynakta başlık tek başına bir
   ekran, altındaki satır kadrajın dibinde duruyor. */
.ax-hero { position: relative; display: flex; flex-direction: column;
  justify-content: center; min-height: 40cqw; padding-top: 11cqw; padding-bottom: 4cqw; }
.ax-h1 { font-family: 'Afacad Flux', sans-serif; font-weight: 500;
  font-size: 6.2cqw; line-height: 1.0; letter-spacing: -0.042em; color: #ffffff;
  text-wrap: balance; }
/* NOT: başlığın bir yarısını soluklaştırmak için `<em>` DENENDİ VE KALDIRILDI.
   `data-sv-words` (hizmet-ortak.js, 2. iş) başlığı kelimelere bölerken metni
   düğüm düğüm yeniden kuruyor ve iç etiketleri siliyor; işaretleme hiçbir
   zaman ekrana ulaşmıyordu. Kaynaktaki başlıklar da zaten tek renk. */

/* ── etiket —— paragraf ────────────────────────────────────────────────────
   Dört kolonluk bir ızgara: solda boşluk, etiket + çizgi, paragraf, sağda
   boşluk. Ölçüler kaynaktan: etiket ~%26'da, paragraf ~%48'de başlıyor. */
.ax-lead { display: grid; grid-template-columns: 26fr 20fr 32fr 22fr;
  column-gap: 1.6cqw; align-items: start; margin-top: 4cqw; }
.ax-lead-et { grid-column: 2; display: flex; align-items: center; gap: 1cqw;
  white-space: nowrap; }
/* Etiketten çıkan çizgi: kaynakta etiketle paragraf arasını bağlıyor. Kalan
   yeri `flex: 1` ile dolduruyor, sabit uzunluk verilmiyor — kolon daralınca
   kısalıyor, taşmıyor. */
.ax-lead-et i { flex: 1; min-width: 2cqw; height: 1px;
  background: rgba(240,240,240,0.28); }
.ax-lead-p { grid-column: 3; max-width: 42ch; }

/* ── tam genişlik görsel bandı ─────────────────────────────────────────────
   `.sv-inset`in kenar boşluğunu negatif marjla geri veriyor: bant sayfanın
   iki kenarına dayanıyor. Kutunun kendisi `.sv-inset` içinde durduğu için
   ızgara hizası bozulmuyor. */
.ax-bleed { width: auto; margin-left: -8.33333cqw; margin-right: -8.33333cqw;
  overflow: hidden; background: #131313; }
.ax-bleed img, .ax-bleed video { width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 0; }
.ax-bleed-16 { aspect-ratio: 16 / 7; }


/* ── bölüm başlığı (açılış dışındaki bölümler) ────────────────────────────
   Kaynakta iç bölümler de numaralı: "02. Who we are". Aynı numaralandırma
   burada da var ama etiket satırı açılıştakinden dar. */
.ax-sec { padding-top: 6cqw; padding-bottom: 6cqw; }
.ax-sec-h { display: grid; grid-template-columns: 38fr 62fr; column-gap: 4cqw;
  align-items: end; }
.ax-no { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.68cqw; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sv-ac); }
.ax-h2 { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 3.2cqw;
  line-height: 1.04; letter-spacing: -0.032em; color: #ffffff; margin-top: 0.8cqw; }


@media (max-width: 900px) {
  /* TAVANLI BİRİM. Dar ekran ölçüleri 390 tuvalinde çizildi ve cqw ile
     yazılmıştı; tavan olmadığı için 900px'e kadar büyümeye devam ediyorlardı
     (768'de 88px başlık, iki kat uzun sayfa — ölçüldü). `--ax-u` 440px'e
     kadar 1cqw ile aynı, sonra 4.4px'te duruyor: telefonda tasarım aynen
     kalıyor, tablet ve yatay telefon rahat bir "büyük telefon" düzeni alıyor.
     Kenar boşlukları (`.sv-inset`) ve görsel oranları genişlikle büyümeye
     devam ediyor — tavan yalnız yazıda ve ritimde. Üç sayfanın kökünde
     tanımlı: bu dosyayı yalnız onlar yüklüyor. */
  .pj-root, .kr-root, .rf-root { --ax-u: min(1cqw, 4.4px); }

  .ax-hero { min-height: 0; padding-top: calc(26 * var(--ax-u)); padding-bottom: calc(8 * var(--ax-u)); }
  .ax-h1 { font-size: calc(11.5 * var(--ax-u)); letter-spacing: -0.035em; }
  /* Dar ekranda girinti anlamsız: etiket ve paragraf tek kolona iniyor,
     çizgi de etiketin yanında kalıyor. */
  .ax-lead { grid-template-columns: 1fr; row-gap: calc(3 * var(--ax-u)); margin-top: calc(8 * var(--ax-u)); }
  .ax-lead-et, .ax-lead-p { grid-column: 1; }
  .ax-lead-et i { max-width: calc(18 * var(--ax-u)); }
  .ax-lead-p { max-width: none; }
  .ax-bleed { margin-left: -6cqw; margin-right: -6cqw; }
  .ax-bleed-16 { aspect-ratio: 4 / 3; }
  .ax-sec { padding-top: calc(12 * var(--ax-u)); padding-bottom: calc(12 * var(--ax-u)); }
  .ax-sec-h { grid-template-columns: 1fr; row-gap: calc(3 * var(--ax-u)); }
  /* Mikro etiketin tabanı 12px: 360'ta 10px'e iniyordu. */
  .ax-no { font-size: max(12px, calc(2.9 * var(--ax-u))); }
  .ax-h2 { font-size: calc(7.4 * var(--ax-u)); }

  /* Kırıntı yolu bağlantıları dokunma hedefi olarak 18px boydu; 768'de yazı
     25px'e çıkıyordu. Aynı iş hizmet-genis.css'te `.sv-root .zx-crumb a`
     kuralıyla da yapılıyor ve bu üç sayfa da `sv-root` taşıyor: iki kural eşit
     özgüllükte, kazananı yalnız dosya sırası belirliyordu. Değerler O KURALIN
     BİREBİR AYNISI — sıra değişse de sonuç değişmiyor. Orası değişirse burası
     da değişmeli. Dikey dolgu kutuyu ~46px'e çıkarıyor, eşit negatif marj
     satırın yerini koruyor. */
  .pj-root .zx-crumb span, .pj-root .zx-crumb a,
  .kr-root .zx-crumb span, .kr-root .zx-crumb a,
  .rf-root .zx-crumb span, .rf-root .zx-crumb a { font-size: clamp(12px, 3.2cqw, 15px); }
  .pj-root .zx-crumb a, .kr-root .zx-crumb a, .rf-root .zx-crumb a {
    padding-top: 14px; padding-bottom: 14px; margin-top: -14px; margin-bottom: -14px;
    position: relative; }
  /* Genişlik de 44px: "Projeler" 360'ta 38px enindeydi. Yatay dolgu değil —
     komşu bağlantının kutusu ayraçtan taşıp öbür bağlantının son harflerini
     örterdi. Görünmez katman bağlantı kadar geniş, dar bağlantıda 44px'e
     kadar ORTADAN açılıyor. `z-index: 1`: ayraç `opacity: .4` taşıyor, bu
     onu konumlu katmana alıp sonraki kardeş olarak katmanın ÜSTÜNE çıkarıyor
     ve satırın ortasında dokunuşu yutuyordu (tarandı). */
  .pj-root .zx-crumb a::before, .kr-root .zx-crumb a::before, .rf-root .zx-crumb a::before {
    content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
    left: 50%; width: max(100%, 44px); transform: translateX(-50%); }
  .pj-root .zx-crumb, .kr-root .zx-crumb, .rf-root .zx-crumb { margin-bottom: calc(7 * var(--ax-u)); }
}