/* ===========================================================
   ALVEXA — HAKKIMIZDA SAYFASI
   Yalnızca hakkimizda.html'e bağlanır.
     1. İç sayfa hero'sunun sayfaya özel kadrajı
        (bileşenin kendisi base.css'te)
     2. İçindekiler (sol kenar, sabit)
     3. Okuma sütunu (.reading)
     4. Metin + görsel ikilisi (.split)
     5. Operasyon ağı: ülke çipleri + büyük sayı
     6. Faaliyet alanları (zigzag bloklar)
     7. Alıntı (pull quote)
     8. Değerlerimiz (numaralı liste)
     9. Kapanış CTA
   tokens.css değişkenleri üzerinden çalışır; burada
   sabit renk yazılmaz.
   =========================================================== */

/* ===========================================================
   1. İÇ SAYFA HERO'SU — SAYFAYA ÖZEL KADRAJ
   Bileşenin kendisi css/base.css'te (dört sayfa ortak).
   Burada yalnızca bu fotoğrafın kadrajı ayarlanıyor: masa
   etrafındaki ekip kadrajda kalsın, sol beton metne yer açsın.
   =========================================================== */
/* 19 Ağu 2026 — müşteri isteği: "ilk giriş olduğunda o resim
   kaplasın bütün sayfayı". Hero 60vh'ten TAM EKRANA çıkarıldı.
   svh kullanılıyor: mobilde adres çubuğu inip kalkarken 100vh
   sayfayı zıplatır, 100svh zıplatmaz. */
.page-hero {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;   /* base.css'te flex-end; tam ekranda
                            metin dibe yapışık kalmasın */
}

.page-hero__media img {
  object-position: 64% center;
}

/* Metin bloğu: header artık görselin üstüne bindiği için biraz
   aşağı, çizgilerden ve sol kenardan uzak dursun diye biraz sağa.
   (Müşteri: "yazısı biraz daha sağ üste al") */
.page-hero__content {
  padding-left: clamp(0rem, -2rem + 4vw, 2.5rem);
  padding-top: var(--header-h);
}

@media (max-width: 767px) {
  .page-hero {
    min-height: 88vh;
    min-height: 88svh;
  }

  .page-hero__media img {
    object-position: 72% center;
  }

  .page-hero__content {
    padding-left: 0;
  }
}

/* ===========================================================
   2. İÇİNDEKİLER — sol kenarda sabit
   Sayfa uzun; okurken nerede olunduğunu göstersin diye.
   Yalnızca 1400px üstünde görünür: kapsayıcı en fazla 1280px,
   iki yanda kalan ~60px'e ancak çizgiler sığar. Etiketler DOM'da
   gerçek metin (ekran okuyucu okur), ekranda üstüne gelince /
   odaklanınca açılır.
   =========================================================== */
.toc {
  display: none;
}

@media (min-width: 1400px) {
  .toc {
    position: fixed;
    top: 50%;
    left: var(--sp-2);
    z-index: calc(var(--z-header) - 1);
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition), visibility var(--transition);
    padding: var(--sp-4) var(--sp-4);
    border-radius: var(--radius);
    translate: 0 -50%;
    transition: background-color var(--transition), box-shadow var(--transition);
  }

  /* Etiketler açılınca içerik sütununun üstüne binerdi (kapsayıcı
     120px'ten başlıyor, etiket ~200px'e kadar uzuyor). Açıkken
     altına opak bir panel gelir; kapalıyken sadece çizgiler durur. */
  .toc:hover,
  .toc:focus-within {
    background-color: var(--white);
    box-shadow: var(--shadow-lg);
  }

  /* HERO'NUN ÜSTÜNE BİNMESİN.
     Liste ekranın dikey ortasında sabit duruyordu; hero tam ekran
     olunca çizgiler "HAKKIMIZDA" başlığının üstüne düşüyordu.
     js/toc.js sayfayı kontrol edebiliyorsa `.toc--auto` ekler ve
     hero ekrandan çıkınca `.is-past-hero` ile listeyi açar.
     JS yoksa `.toc--auto` hiç eklenmez, liste eskisi gibi görünür
     — bağlantılar en azından çalışır durumda kalır. */
  .toc--auto {
    opacity: 0;
    visibility: hidden;
  }

  .toc--auto.is-past-hero {
    opacity: 1;
    visibility: visible;
  }

  .toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .toc__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-1);
    text-decoration: none;
  }

  .toc__dash {
    display: block;
    flex: none;
    width: 22px;
    height: 2px;
    background-color: var(--gray-line);
    transition: width var(--transition), background-color var(--transition);
  }

  .toc__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
    opacity: 0;
    translate: -6px 0;
    transition: opacity var(--transition), translate var(--transition);
  }

  /* Etiketler yalnızca listeye yaklaşınca / odaklanınca açılır.
     Aktif bölümün etiketi de KENDİLİĞİNDEN açılmaz — panelsiz
     tek etiket metnin üstünde asılı kalırdı; aktif bölüm zaten
     uzun ve adaçayı rengindeki çizgiden belli oluyor. */
  .toc:hover .toc__label,
  .toc:focus-within .toc__label {
    opacity: 1;
    translate: 0 0;
  }

  .toc__link:hover .toc__dash,
  .toc__link:focus-visible .toc__dash {
    width: 34px;
    background-color: var(--sage);
  }

  .toc__link[aria-current] .toc__dash {
    width: 34px;
    background-color: var(--sage);
  }

  .toc__link[aria-current] .toc__label {
    color: var(--sage-dark);   /* metin — AA */
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc__dash,
  .toc__label {
    transition: none;
  }
}

/* ===========================================================
   3. OKUMA SÜTUNU
   Kabul kriteri: satır uzunluğu 65-75 karakter, satır aralığı
   1.7-1.9.

   DİKKAT — `ch` birimi "0" rakamının genişliğidir; Montserrat'ta
   rakamlar harflerden belirgin geniş. 68ch tek sütunda gerçekte
   ~84 karakterlik satır veriyordu (tarayıcıda ölçüldü). Değer
   gerçek karakter sayısına göre ayarlandı: 58ch ≈ 70 karakter.
   =========================================================== */
.reading {
  max-width: 58ch;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* İki sütunlu düzenlerde (metin + görsel) sütun zaten dar.
   Punto bir kademe küçülür ki satır 65 karakterin altına
   düşmesin — kısa satır da uzun satır kadar yorucudur. */
.split .reading,
.area .reading {
  font-size: var(--fs-base);
  max-width: none;
}

.reading p + p {
  margin-top: var(--sp-6);
}

.reading--center {
  margin-inline: auto;
}

.reading--on-dark {
  color: var(--text-on-dark-muted);
}

/* ===========================================================
   4. METİN + GÖRSEL İKİLİSİ
   =========================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.split__media img {
  /* Kaynak görsel çok yatay (1868x842); doğal oranıyla bırakılınca
     metin sütununun yanında bodur duruyordu. 4/3'e kırpılıyor. */
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 32rem;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

@media (max-width: 1199px) {
  /* Tek sütuna düşünce dar-sütun ayarı geri alınır: punto ve
     genişlik normale döner, yoksa satır 85 karaktere çıkıyor. */
  .split .reading,
  .area .reading {
    font-size: var(--fs-md);
    max-width: 58ch;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  .split__media img {
    aspect-ratio: 3 / 2;
    max-height: 24rem;
  }
}

/* ===========================================================
   5. OPERASYON AĞI — ÜLKE ÇİPLERİ + BÜYÜK SAYI
   Ana sayfadaki yuvarlak bayrak grid'iyle karışmasın diye
   burada bilerek bayrak yok: ince çerçeveli, yuvarlak köşeli
   sade metin çipleri.
   =========================================================== */
.network {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.pill-list__title {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--taupe-text);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}

.pill {
  padding: var(--sp-2) var(--sp-5);
  border: var(--border);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.pill:hover {
  border-color: var(--sage);
  color: var(--sage-dark);   /* metin — AA */
}

/* Büyük vurgu sayısı — sağ sütun */
.network__figure {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
  padding-left: clamp(1.5rem, 0.5rem + 2vw, 2.5rem);
  border-left: 2px solid var(--sage);
  max-width: 15rem;
}

.big-stat__value {
  display: block;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.big-stat__label {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--taupe-text);
}

.big-stat__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

@media (max-width: 1199px) {
  .network {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sayı metnin ÜSTÜNE alınır: dar ekranda en sonda kalırsa
     bağlamından kopuyor. */
  .network__figure {
    position: static;
    order: -1;
    max-width: none;
  }
}

/* ===========================================================
   6. FAALİYET ALANLARI — ZİGZAG BLOKLAR
   01 ve 03'te görsel sağda, 02'de solda. Mobilde görsel üstte.
   İkonlar ana sayfadaki hizmet kartlarıyla aynı SVG'ler.
   =========================================================== */
.areas {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 1.5rem + 6vw, 6rem);
}

.area {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.area--reverse .area__text {
  order: 2;
}

.area__num {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--taupe-text);
}

.area__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-top: var(--sp-6);
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area__title {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
}

.area__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

@media (max-width: 1199px) {
  .area {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  /* Mobilde her blokta görsel ÜSTTE, metin altta */
  .area__media {
    order: -1;
  }

  .area--reverse .area__text {
    order: 0;
  }

  .area__media img {
    aspect-ratio: 3 / 2;
  }
}

/* ===========================================================
   7. ALINTI (PULL QUOTE)
   =========================================================== */
.pull-quote {
  margin-top: var(--sp-10);
  padding-left: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
  border-left: 3px solid var(--sage);
  max-width: 46ch;
}

.pull-quote p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: pretty;
}

/* ===========================================================
   8. DEĞERLERİMİZ — NUMARALI KARTLAR
   Ana sayfadaki fotoğraflı koyu panellerden bilerek FARKLI:
   burada sade, numaralı, çerçeveli kartlar.
   =========================================================== */
.value-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  list-style: none;
  counter-reset: none;
}

.value-item {
  padding: var(--sp-10) var(--sp-8);
  border: var(--border);
  border-top: 3px solid var(--sage);
  background-color: var(--white);
  transition: box-shadow var(--transition), transform var(--transition);
}

.value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.value-item__num {
  display: block;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--taupe-text);
}

.value-item__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
}

/* Müşterinin dosyasındaki İngilizce karşılık — ince, bej.
   EN dilinde sözlükteki değer boş dizedir; boş kutu yer
   kaplamasın diye gizlenir. */
.value-item__en {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  color: var(--taupe-text);
}

.value-item__en:empty {
  display: none;
}

.value-item__desc {
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

@media (max-width: 1199px) {
  .value-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-item {
    transition: none;
  }

  .value-item:hover {
    transform: none;
  }
}

/* ===========================================================
   9. KAPANIŞ CTA
   =========================================================== */
.about-cta {
  margin-top: var(--sp-12);
  text-align: center;
}