/* ============================================================
   pages.css — İç sayfa bileşenleri
   DESIGN.md §10'un birebir uygulaması.

   Kapsam: yalnızca iç sayfalarda (services, hizmet detayı,
   projects, project-detail, sectors, about, blog, contact, 404)
   görünen bileşenler. Ana sayfa bölümleri sections.css'te,
   her sayfada bulunan bileşenler components.css'tedir.

   İKİ TAŞIYICI KURAL:
   1. Renk buradan HİÇ doğrudan yazılmaz. Her şey perdenin
      (data-act) --bg / --fg / --line / --mute değişkenlerini
      okur; aynı bileşen hem koyu hem açık perdede çalışır.
      İstisna: --ember (odak) ve --flare (form hatası) — ikisi de
      token, ham renk değil. Tek gerçek ham renk kullanımı
      §20'deki select oku data-URI'sidir ve orada gerekçesi yazılı.
   2. Duyarlı (responsive) kurallar AYNI dosyada, ait olduğu
      bileşenin hemen altında durur. responsive.css yok.

   Kırılma noktaları: 560 / 640 / 760 / 900 / 1000 / 1080 / 1100.
   900px layout.css'teki .col-* çökme eşiğiyle aynıdır; sayfa
   bileşenleri de orada tek kolona döner.
   ============================================================ */

/* ------------------------------------------------------------
   1. .page-head — her iç sayfanın girişi
   ------------------------------------------------------------
   <header class="page-head">
     <p  class="page-head__index u-mono">…</p>
     <h1 class="page-head__title u-display" data-split="lines">…</h1>
     <p  class="page-head__lead u-mute">…</p>
     <div class="page-head__actions">…</div>       (opsiyonel)
   </header>

   İç sayfalar hero ile değil bununla açılır (§10). Tek bir giriş
   kalıbı olması bilinçli: sekiz sayfa aynı editoryal güvenle
   başlar. Masthead sabit konumlu olduğu için üst boşluk .act'ın
   padding-block'undan gelir — burada tekrar verilmez, verilirse
   çift boşluk oluşur.
   ------------------------------------------------------------ */
.page-head {
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* ÜST ÜSTE BİNEN DOLGU DÜZELTMESİ
   İç sayfalarda .page-head kendi perdesinin tek içeriğidir. O
   durumda alt margin'i (80px'e kadar) perdenin padding-bottom'u
   (165px) ve bir sonraki perdenin padding-top'u (83px) ile
   toplanıyor, başlıkla içerik arasında 320px'lik bir boşluk
   bırakıyordu — ölçüldü, tüm iç sayfalarda vardı.
   Tek içerikse margin kaldırılır, perdenin altı kısaltılır. */
.page-head:last-child {
  margin-bottom: 0;
}

.act:has(.page-head) {
  padding-bottom: var(--act-pad-tight);
}

/* Mono indeks kendi sütununun tepesinde bir saç teli çizgi
   taşır — sayfanın "burada başlıyor" işareti. .act-head'in satır
   içi çizgisiyle aynı dili konuşur, farklı ritimde. */
.page-head__index {
  color: var(--mute);
  padding-top: clamp(.65rem, 1.2vw, .95rem);
  border-top: 1px solid var(--line);
}

.page-head__title {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  /* --t-h1, .u-display'in genel kademesinden iri okunuyor;
     tracking bir adım daha sıkılır (act-head__title ile aynı
     mantık). */
  letter-spacing: -.032em;
}

.page-head__lead {
  font-size: var(--t-body-l);
  max-width: var(--w-text);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(.5rem, 1vw, 1rem);
}

/* Geniş ekranda indeks dar bir sol sütuna çekilir; başlık, lead
   ve aksiyonlar ana sütunda kalır. Klasik editoryal künye düzeni. */
@media (min-width: 900px) {
  .page-head {
    grid-template-columns: minmax(0, 9ch) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  }

  .page-head__index {
    grid-column: 1;
    grid-row: 1;
  }

  .page-head__title,
  .page-head__lead,
  .page-head__actions {
    grid-column: 2;
  }

  .page-head__title {
    max-width: 20ch;
  }
}

@media (max-width: 899px) {
  .page-head__title {
    letter-spacing: -.022em;
  }
}

/* ------------------------------------------------------------
   2. .crumbs — kırıntı navigasyonu
   ------------------------------------------------------------
   İki işaretleme biçimine de dayanıklı:
     <nav class="crumbs"><ol><li class="crumbs__item">…
     <nav class="crumbs"><a class="crumbs__item">…<span class="crumbs__sep">
   Görsel ayırıcı her zaman aria-hidden'dır; sıra bilgisi
   işaretlemenin kendisinde taşınır.
   ------------------------------------------------------------ */
.crumbs {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  /* Tam --tr-mono (.18em) büyük harf olmayan kırıntılarda fazla
     dağıtıyor; bir kademe sıkılır. */
  letter-spacing: .12em;
  line-height: 1.3;
  margin-bottom: clamp(1rem, 2.2vw, 1.85rem);
}

.crumbs,
.crumbs > ol,
.crumbs > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
}

.crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--mute);
}

.crumbs a {
  color: var(--mute);
  transition: color var(--d-fast) var(--ease);
}

.crumbs a:hover,
.crumbs a:focus-visible {
  color: var(--fg-strong);
}

/* Bulunduğumuz sayfa bağlantı değildir; rengiyle ayrışır. */
.crumbs [aria-current="page"] {
  color: var(--fg);
}

.crumbs__sep {
  color: var(--mute);
  opacity: .5;
  user-select: none;
}

/* ------------------------------------------------------------
   3. .prose — uzun metin bloğu
   ------------------------------------------------------------
   Yalnızca gerçek uzun metin için (hizmet açıklaması, 404
   gövdesi, proje detayı anlatımı). Ölçü --w-text ile sınırlı:
   satır uzunluğu okunabilirliğin tek gerçek belirleyicisi.
   ------------------------------------------------------------ */
.prose {
  max-width: var(--w-text);
  font-size: var(--t-body-l);
  color: var(--fg);
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'SOFT' 24, 'WONK' 1;
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -.02em;
  color: var(--fg-strong);
  text-wrap: balance;
}

/* Başlık öncesi boşluk paragraf arasından belirgin fazla olmalı;
   blok hiyerarşisi yalnızca punto ile kurulmaz. */
.prose h2 {
  font-size: var(--t-h3);
  margin-top: 1.9em;
}

.prose h3 {
  font-size: var(--t-h4);
  margin-top: 1.5em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose a {
  color: var(--fg-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--mute);
  transition: text-decoration-color var(--d-fast) var(--ease);
}

.prose a:hover {
  text-decoration-color: var(--ember);
}

.prose strong {
  color: var(--fg-strong);
}

/* .prose__bullets — madde imi yerine saç teli çizgi. Gradient'i
   madde imi yapmak sanat yönüne aykırı (gradient nadir sinyal);
   çizgi hem sessiz hem editoryal. */
.prose__bullets {
  display: grid;
  gap: .6rem;
}

.prose__bullets > li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--fg);
}

.prose__bullets > li::before {
  content: '';
  position: absolute;
  left: 0;
  /* İlk satırın optik ortası */
  top: calc(.5em * var(--lh-body));
  width: 1rem;
  height: 1px;
  background: var(--fg);
  opacity: .45;
}

/* ------------------------------------------------------------
   4. .panel-grid / .panel — "problem" ve "çalışma modeli" kutuları
   ------------------------------------------------------------
   <article class="panel">
     <p class="panel__index u-mono">01</p>
     <h3 class="panel__title">…</h3>
     <p class="panel__text u-mute">…</p>
   </article>

   Panel bağlantı DEĞİLDİR; hover'ı tıklanabilirlik iması
   yapacak kadar güçlü değil — yalnızca yüzey bir kademe yükselir.
   ------------------------------------------------------------ */
.panel-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.panel {
  display: grid;
  gap: .7rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.panel:hover {
  background: var(--bg-raise-2);
  border-color: var(--mute);
}

/* İndeksin sağında kalan boşluğu saç teli çizgi doldurur —
   numara tek başına asılı kalmaz, satır kapanır. */
.panel__index {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--mute);
}

.panel__index::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.panel__title {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.panel__text {
  font-size: var(--t-body);
}

/* ------------------------------------------------------------
   5. .solution-list / .solution — hizmet çözümleri
   ------------------------------------------------------------
   <ul class="solution-list">
     <li class="solution">
       <h3 class="solution__title">…</h3>
       <p class="solution__text u-mute">…</p>

   Kart değil, saç teli çizgilerle ayrılmış satırlar: bir hizmet
   sayfasında beş çözüm kartı gürültü, beş satır künye olur.
   ------------------------------------------------------------ */
.solution-list {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.solution {
  padding-block: clamp(1.15rem, 2.2vw, 1.85rem);
  border-top: 1px solid var(--line);
}

.solution__title {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.solution__text {
  font-size: var(--t-body);
}

@media (max-width: 759px) {
  .solution__text {
    margin-top: .5rem;
  }
}

/* Geniş ekranda başlık solda, açıklama sağda: gözün soldan
   tarayıp sağdan okuduğu iki kolonlu künye ritmi. */
@media (min-width: 760px) {
  .solution {
    display: grid;
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
    align-items: baseline;
  }

  .solution__title {
    transition: transform var(--d-base) var(--ease-out);
  }

  .solution:hover .solution__title {
    transform: translateX(6px);
  }
}

/* ------------------------------------------------------------
   6. .case — örnek proje bloğu (hizmet sayfaları)
   ------------------------------------------------------------
   <div class="case">
     <div class="case__figure">…figure…</div>
     <div class="case__body">
       <p class="case__tag u-mono">…</p>
       <h3 class="case__title u-display">…</h3>
       <dl class="case__dl"><dt class="u-mono">…</dt><dd>…</dd>…</dl>
       <a class="link-arrow">…</a>
       <p class="case__note u-mono u-mute">…</p>
     </div>
   </div>
   ------------------------------------------------------------ */
.case {
  display: grid;
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.case__figure {
  /* Oran KUTUDA tanımlı → CLS yok (§13.6) */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-raise-2);
}

.case__body {
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.15rem);
  align-content: start;
  justify-items: start;
  padding: clamp(1.35rem, 3vw, 2.75rem);
}

.case__tag {
  color: var(--mute);
}

.case__title {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  letter-spacing: -.024em;
}

.case__dl {
  display: grid;
  gap: .35rem;
  width: 100%;
  margin-top: .35rem;
}

.case__dl dt {
  color: var(--mute);
}

.case__dl dt + dd {
  margin-bottom: .9rem;
}

.case__dl dd:last-child {
  margin-bottom: 0;
}

/* Dipnot: müşteri onayı uyarısı korunur (§13.5). Cümle olduğu
   için mono büyük harf/tracking yumuşatılır. */
.case__note {
  width: 100%;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: .04em;
}

@media (min-width: 900px) {
  .case {
    grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
    align-items: stretch;
  }

  /* İki kolonda figür satır yüksekliğine uzar; sabit oran
     bırakılırsa gövdeyle aynı boyda olmaz. */
  .case__figure {
    aspect-ratio: auto;
    min-height: 100%;
  }

  /* dt / dd künye ızgarası: etiket dar sol sütunda, değer geniş
     sağ sütunda; her çift kendi satırını doldurur. */
  .case__dl {
    grid-template-columns: minmax(0, 13ch) minmax(0, 1fr);
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: 0;
  }

  .case__dl dt,
  .case__dl dd {
    padding-block: .7rem;
  }

  .case__dl dt + dd,
  .case__dl dd:last-child {
    margin-bottom: 0;
  }

  /* İlk satırın üstünde çizgi olmaz; kalan satırlar arasında
     tam genişlikte saç teli ayırıcı oluşur. */
  .case__dl dt:not(:first-of-type),
  .case__dl dd:not(:first-of-type) {
    border-top: 1px solid var(--line-soft);
  }
}

/* ------------------------------------------------------------
   7. .mini-list / .mini — ilgili hizmetler
   ------------------------------------------------------------
   <a class="mini">
     <span class="mini__title">…</span>
     <span class="mini__text u-mute">…</span>
     <span aria-hidden="true"><svg …></span>
   </a>
   ------------------------------------------------------------ */
.mini-list {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: .4rem;
  align-items: start;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.mini:hover {
  background: var(--bg-raise);
  border-color: var(--mute);
}

.mini__title {
  grid-column: 1;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

/* megaHint noktalı bir künye satırı — mono okunması gerekiyor */
.mini__text {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--t-body-s);
  letter-spacing: .03em;
  line-height: 1.55;
}

.mini > [aria-hidden="true"] {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  color: var(--mute);
  transition:
    transform var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease);
}

.mini > [aria-hidden="true"] svg {
  width: 1rem;
  height: 1rem;
}

/* Hover'da kart kalkmaz, ok ilerler — kartın yerinden oynaması
   yerine yönün vurgulanması tercih edildi. */
.mini:hover > [aria-hidden="true"],
.mini:focus-visible > [aria-hidden="true"] {
  transform: translateX(4px);
  color: var(--fg-strong);
}

/* ------------------------------------------------------------
   8. .chips / .chip — "Bugün neye ihtiyacınız var?" seçici
   ------------------------------------------------------------
   <ul class="chips"><li>
     <button class="chip u-mono" data-need="…" aria-pressed="false">…
   Durum aria-pressed ile taşınır; .is-active yalnızca CSS
   kolaylığı için desteklenir — ikisi de aynı görünümü verir.
   ------------------------------------------------------------ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .55rem;
}

.chips > li {
  display: flex;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: .75rem 1.15rem;
  text-align: center;
  /* Bunlar etiket değil tam cümle: --tr-mono (.18em) bu uzunlukta
     okunurluğu bozuyor, bir kademe sıkılır. */
  letter-spacing: .08em;
  line-height: 1.35;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition:
    color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.chip:hover {
  color: var(--fg-strong);
  border-color: var(--mute);
  background-color: var(--bg-raise);
}

/* Aktif durum — sanat yönünün gradient'e izin verdiği yerlerden
   biri: "aktif/mevcut durum göstergesi". Aynı anda yalnızca bir
   chip basılı olduğu için sinyal nadir kalır. */
.chip[aria-pressed="true"],
.chip.is-active {
  color: #fff;
  background-image: var(--signal-grad-ui);
  border-color: transparent;
  box-shadow: 0 6px 26px -14px var(--flare);
}

.chip[aria-pressed="true"]:hover,
.chip.is-active:hover {
  color: #fff;
  border-color: transparent;
}

/* ------------------------------------------------------------
   9. .needs-result — seçime verilen yanıt
   ------------------------------------------------------------
   <div class="needs-result" hidden>
     <h3 class="needs-result__title">…</h3>
     <p  class="needs-result__text u-mute">…</p>
     <div class="needs-result__tags">…</div>
     <a class="btn …">…</a>
   </div>

   JS yoksa `hidden` kalır ve blok görünmez — bu bilinçli: içerik
   değil, seçime verilen dinamik yanıt. Sayfadaki tüm hizmet
   bilgisi .svc-index içinde metin olarak zaten mevcut (§13.2).
   ------------------------------------------------------------ */
.needs-result {
  position: relative;
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  justify-items: start;
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* 2px'lik gradient üst kenar: bu blok bir seçimin canlı
   sonucudur, yani "mevcut durum göstergesi" — gradient'in izinli
   olduğu dar alan. */
.needs-result::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--signal-grad-ui);
}

/* Sonuç görünür olduğunda yumuşak bir açılış; azaltılmış
   harekette base.css'in killswitch'i süreyi .01ms'ye indirir. */
.needs-result:not([hidden]) {
  animation: needs-result-in var(--d-base) var(--ease-out) both;
}

@keyframes needs-result-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.needs-result__title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'SOFT' 24, 'WONK' 1;
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: -.022em;
  color: var(--fg-strong);
}

.needs-result__text {
  font-size: var(--t-body-l);
  max-width: var(--w-text);
}

/* Etiketler JS tarafından basılır; hangi eleman türü olduğu
   garanti değil, bu yüzden çocuklar genel seçilir. */
.needs-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.needs-result__tags > * {
  padding: .4rem .8rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* ------------------------------------------------------------
   10. .filter-bar / .filter — proje sektör filtresi
   ------------------------------------------------------------
   <button class="filter u-mono is-active" data-filter="all" aria-pressed="true">
   Butonlar doğrudan .filter-bar'ın çocuğudur (build.mjs).
   Yatay kaydırma yerine sarılma (wrap) tercih edildi: kaydırma
   şeridi klavye ve ekran okuyucu için içeriği görünmez kılabiliyor.
   ------------------------------------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: clamp(1.15rem, 2.4vw, 1.85rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}

.filter {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.05rem;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition:
    color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.filter:hover {
  color: var(--fg-strong);
  border-color: var(--mute);
  background-color: var(--bg-raise);
}

/* Mevcut filtre = mevcut durum göstergesi → gradient izinli.
   Alan bilinçli olarak küçük tutuldu ki sinyal "nadir" kalsın. */
.filter[aria-pressed="true"],
.filter.is-active {
  color: #fff;
  background-image: var(--signal-grad-ui);
  border-color: transparent;
  box-shadow: 0 5px 22px -14px var(--flare);
}

.filter[aria-pressed="true"]:hover,
.filter.is-active:hover {
  color: #fff;
  border-color: transparent;
}

/* ------------------------------------------------------------
   11. .svc-index — hizmetler dizini (services.html)
   ------------------------------------------------------------
   <article class="svc-index__row">
     <div class="svc-index__head">
       <p class="u-mono">01</p>
       <h3 class="u-display"><a>…</a></h3>
       <p class="u-mute u-text-width">…</p>
     </div>
     <ul class="svc-index__items"><li class="u-mono">…</li>…</ul>
   </article>
   ------------------------------------------------------------ */
.svc-index {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.svc-index__row {
  display: grid;
  gap: clamp(1.15rem, 2.4vw, 2rem);
  padding-block: clamp(1.75rem, 3.4vw, 3rem);
  border-top: 1px solid var(--line);
}

.svc-index__head {
  display: grid;
  gap: .8rem;
  align-content: start;
}

.svc-index__head > p.u-mono {
  color: var(--mute);
}

.svc-index__head > h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: -.024em;
  color: var(--fg-strong);
}

/* Alt çizgi soldan büyür: satırın tıklanabilir olduğunu gösteren
   en sessiz yol. background-size animasyonu düzen tetiklemez. */
.svc-index__head > h3 > a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: .1em;
  transition: background-size var(--d-base) var(--ease-out);
}

.svc-index__head > h3 > a:hover,
.svc-index__head > h3 > a:focus-visible {
  background-size: 100% 1px;
}

.svc-index__items {
  display: grid;
  gap: .55rem;
  align-content: start;
  color: var(--mute);
}

.svc-index__items > li {
  position: relative;
  padding-left: 1.6rem;
}

.svc-index__items > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .85rem;
  height: 1px;
  background: var(--line);
}

@media (min-width: 900px) {
  .svc-index__row {
    /* Görsel eklendiği için üç kolon: görsel | başlık | maddeler */
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, .6fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

/* ------------------------------------------------------------
   12. .sector-list / .sector-row — sektörler (sectors.html)
   ------------------------------------------------------------
   <article class="sector-row" id="…">
     <div class="sector-row__figure">…figure…</div>
     <div class="sector-row__body">
       <p class="u-mono">01 · Öncelikli sektör</p>
       <h2 class="u-display">…</h2>
       <p class="u-mute u-text-width">…</p>
       <ul class="sector-row__tags"><li class="u-mono">…</li>…</ul>
     </div>
   </article>

   DİKKAT — dönüşümlü (alternating) düzenin SIFIRLANMASI:
   masaüstünde figür ve gövde taraf değiştirir. 900px altında bu
   dönüşüm tamamen sıfırlanır ve her satır AYNI sırada yığılır
   (gövde önce, figür sonra). Aksi hâlde bazı satırlarda figür
   başlığın üstüne, bazılarında altına düşer ve liste tutarsız
   okunur. Başlığın önde olması sıralı bir sektör listesinde
   ayrıca daha iyi bir okuma sırası veriyor.
   ------------------------------------------------------------ */
.sector-list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.sector-row {
  display: grid;
  gap: clamp(1.35rem, 2.8vw, 2.25rem);
  /* Sabit masthead #slug hedefini kapatmasın */
  scroll-margin-block-start: clamp(5rem, 12vh, 9rem);
}

.sector-row + .sector-row {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}

/* Yığılmış (900px altı) sıra — her satır için birebir aynı */
.sector-row__body {
  grid-row: 1;
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  align-content: center;
}

.sector-row__figure {
  grid-row: 2;
  aspect-ratio: 9 / 7;
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.sector-row__body > p.u-mono {
  color: var(--mute);
}

.sector-row__body > h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: -.028em;
  color: var(--fg-strong);
}

.sector-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .35rem;
}

.sector-row__tags > li {
  padding: .4rem .8rem;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

@media (min-width: 900px) {
  .sector-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  /* Tek numaralı satırlar: figür solda */
  .sector-row__figure {
    grid-row: 1;
    grid-column: 1;
  }

  .sector-row__body {
    grid-row: 1;
    grid-column: 2;
  }

  /* Çift numaralı satırlar: taraflar yer değiştirir.
     :nth-of-type kullanılıyor — .sector-list içinde başka etiket
     türleri de bulunabilir ve nth-child yanılır. */
  .sector-row:nth-of-type(even) .sector-row__figure {
    grid-column: 2;
  }

  .sector-row:nth-of-type(even) .sector-row__body {
    grid-column: 1;
  }
}

@media (max-width: 899px) {
  .sector-row__body > h2 {
    letter-spacing: -.018em;
  }
}

/* ------------------------------------------------------------
   13. .value-list / .value — ilkeler (about.html)
   ------------------------------------------------------------
   Dört ilke var; 2×2 ızgara bilinçli tercih. Dört kolona
   sıkıştırılınca display başlıklar üç satıra kırılıyor ve ölçek
   kaybediyordu.
   ------------------------------------------------------------ */
.value-list {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem) var(--gap);
  grid-template-columns: 1fr;
}

.value {
  display: grid;
  gap: .65rem;
  align-content: start;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}

.value__index {
  color: var(--mute);
}

.value__title {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: -.024em;
  color: var(--fg-strong);
}

.value__text {
  font-size: var(--t-body-l);
  max-width: 42ch;
}

@media (min-width: 760px) {
  .value-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   14. .team-grid / .member — ekip (about.html)
   ------------------------------------------------------------
   PLACEHOLDER içerik (§13.5): isimler "Ekip Üyesi", portreler
   üretilen halftone alanı. Şablon yanına .notice koyar; burada
   hiçbir şey gerçek bir iddia gibi biçimlenmez — bu yüzden
   kartlar tıklama/hover afordansı taşımaz.
   ------------------------------------------------------------ */
.team-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem) var(--gap);
  grid-template-columns: 1fr;
}

.member {
  display: grid;
  gap: .7rem;
  align-content: start;
}

.member__figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: .35rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.member__name {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

/* Rol satırı isimden hemen sonra gelir; mono künye ritmi bozulmasın
   diye kendi satır yüksekliğini alır. */
.member__role {
  line-height: 1.4;
}

@media (min-width: 560px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   15. .post-list / .post — blog dizini
   ------------------------------------------------------------
   Yazılar henüz yayında değil (meta: "Yakında") ve bilinçli
   olarak bağlantı verilmiyor — ölü link üretmemek için. Bu yüzden
   kart hover'ı yok: tıklanabilir olmayan bir şey tıklanabilir
   gibi görünmemeli.
   ------------------------------------------------------------ */
.post-list {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) var(--gap);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.post {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-block-start: clamp(5rem, 12vh, 9rem);
}

.post__cat {
  color: var(--fg);
}

.post__title {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.post__excerpt {
  font-size: var(--t-body);
}

/* "Yakında" bir durum etiketidir; künye pili olarak okunur ve
   kartın en altına yapışır. */
.post__meta {
  align-self: start;
  margin-top: auto;
  padding: .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

@media (min-width: 640px) {
  .post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .post-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   16. .work-grid / .work-card — projeler ızgarası (projects.html)
   ------------------------------------------------------------
   <a class="work-card" data-sector="…" data-tilt="4" data-cursor="view">
     <div class="work-card__figure">…figure…</div>
     <div class="work-card__body">…</div>
   </a>

   DİKKAT: kartın KENDİSİNE transform verilmez — data-tilt kartın
   transform'unu her karede JS ile yazıyor; CSS'ten translate ya
   da scale eklemek çakışır. Hareket bu yüzden içteki figüre
   uygulanır, kutunun boyu sabit kalır (düzen kaymaz).
   ------------------------------------------------------------ */
.work-grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) var(--gap);
  grid-template-columns: 1fr;
  align-items: start;
}

.work-card {
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.2rem);
  align-content: start;
}

.work-card__figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--d-base) var(--ease);
}

.work-card__figure > .figure {
  transition: transform var(--d-slow) var(--ease-out);
}

.work-card:hover .work-card__figure,
.work-card:focus-visible .work-card__figure {
  border-color: var(--mute);
}

.work-card:hover .work-card__figure > .figure,
.work-card:focus-visible .work-card__figure > .figure {
  transform: scale(1.04);
}

.work-card__body {
  display: grid;
  gap: .35rem;
}

.work-card__body > p.u-mono:first-child {
  color: var(--mute);
}

.work-card__body > h3 {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.work-card__body > p:last-child {
  font-size: var(--t-body-s);
}

@media (min-width: 640px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   17. .pd-meta / .pd-gallery — proje detayı
   ------------------------------------------------------------
   <dl class="pd-meta">
     <dt class="pd-meta__dt u-mono">…</dt>
     <dd class="pd-meta__dd">…</dd>
     …
   </dl>
   ------------------------------------------------------------ */
.pd-meta {
  display: grid;
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Şablon dt/dd çiftlerini <div> ile sararsa (dl içinde geçerli
   işaretleme) kutular kaldırılır ve dt/dd yeniden ızgaranın
   doğrudan çocuğu olur. Böylece aşağıdaki iki satırlı künye
   düzeni her iki işaretleme biçiminde de aynı çalışır. */
.pd-meta > div {
  display: contents;
}

.pd-meta__dt {
  padding-top: .8rem;
  color: var(--mute);
  border-top: 1px solid var(--line);
}

.pd-meta__dd {
  padding-bottom: .9rem;
  font-size: var(--t-body-l);
  color: var(--fg-strong);
}

/* Geniş ekranda künye yatay bir şeride döner: üst satır
   etiketler, alt satır değerler. grid-auto-flow: column, dt/dd
   sırasını kendiliğinden doğru kolona yerleştirir. */
@media (min-width: 760px) {
  .pd-meta {
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.pd-gallery {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* Yalnızca görsel taşıyan çocuklar kutu olur — galerinin altına
   konabilecek bir açıklama paragrafı oran almasın. */
.pd-gallery > :where(figure, img, a, div) {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ------------------------------------------------------------
   18. Figür kutularının ortak davranışı
   ------------------------------------------------------------
   Oran DAİMA kutuda tanımlıdır (yukarıdaki bloklarda), içteki
   .figure kutuyu doldurur. Bu ayrım iki şey sağlar:
     · CLS sıfır kalır — kutu boyu ilk boyamada bilinir (§13.6),
     · components.css'in .figure varsayılan oranı sayfa bağlamında
       ezilir, kutunun oranıyla çakışmaz.
   ------------------------------------------------------------ */
.case__figure > .figure,
.work-card__figure > .figure,
.member__figure > .figure,
.sector-row__figure > .figure,
.pd-gallery > .figure {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.case__figure .figure__canvas,
.case__figure .figure__img,
.work-card__figure .figure__canvas,
.work-card__figure .figure__img,
.member__figure .figure__canvas,
.member__figure .figure__img,
.sector-row__figure .figure__canvas,
.sector-row__figure .figure__img,
.pd-gallery .figure__canvas,
.pd-gallery .figure__img,
.pd-gallery > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   19. .contact-grid / .contact-aside / .contact-line
   ------------------------------------------------------------
   Form bilinçli olarak kart içine alınmadı: koyu perdede panel +
   panel içinde girdi iki kademe yükseltme demek ve girdinin
   kontrastı eriyor. Form perdenin üzerinde düz durur, girdiler
   --bg-raise ile tek kademe yükselir. İki sütun arasındaki
   ayrımı sağ sütunun dikey saç teli çizgisi kuruyor.
   ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4rem);
  align-items: start;
}

.contact-aside {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-content: start;
}

.contact-line {
  display: grid;
  gap: .35rem;
  padding-block: clamp(.8rem, 1.6vw, 1.1rem);
  border-top: 1px solid var(--line);
}

.contact-line__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--mute);
}

.contact-line__label svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
}

.contact-line__value {
  font-size: var(--t-body-l);
  line-height: 1.5;
  color: var(--fg-strong);
}

.contact-line__value a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--d-fast) var(--ease);
}

.contact-line__value a:hover {
  text-decoration-color: var(--ember);
}

@media (min-width: 1000px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .contact-aside {
    padding-left: clamp(1.75rem, 3.5vw, 3.5rem);
    border-left: 1px solid var(--line);
  }
}

/* ------------------------------------------------------------
   20. .form / .field — iletişim formu
   ------------------------------------------------------------
   <form class="form contact-form" novalidate>
     <div class="field">
       <label class="field__label" for="cf-name">…</label>
       <input class="field__input" id="cf-name" aria-describedby="cf-name-error">
       <span class="field__error" id="cf-name-error"></span>
     </div>
     …
     <p   class="form__note">…</p>
     <div class="form__success" hidden>…</div>
   </form>

   12 kolonluk ızgara: şablon .field'a .col-6 yazarak iki sütunlu
   satır kurabilir. Varsayılan "tam genişlik" kuralı :where() ile
   SIFIR özgüllükte yazıldı — böylece layout.css'in .col-*
   yardımcıları (pages.css'ten ÖNCE yüklenir) yine de kazanır.
   Aksi hâlde eşit özgüllükte ve sonra gelen bu dosya .col-6'yı
   sessizce ezerdi.
   ------------------------------------------------------------ */
.form,
.contact-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem) var(--gap);
  align-content: start;
}

:where(.form > *, .contact-form > *) {
  grid-column: 1 / -1;
}

.field {
  display: grid;
  gap: .5rem;
  align-content: start;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  /* Etiket soluk DEĞİL: form etiketi metadata değil işlevsel
     bilgi. --fg ile her iki perdede 4.5:1 üzerinde kalır (§13.9). */
  color: var(--fg);
}

/* Girdi yüzeyi. Seçici birleşimi geniş tutuldu: şablon
   .field__input yazmasa da alan doğru görünür. */
.field__input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: .85rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--fg-strong);
  /* Koyu perdede gerçek kontrast: zemin --bg (#08080a) iken girdi
     --bg-raise (#111116) + saç teli çerçeve. Açık perdede aynı
     ilişki bone-200 → bone-100 olarak korunur. */
  background-color: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition:
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.field textarea {
  min-height: 9rem;
  line-height: var(--lh-body);
}

.field__input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--mute);
  opacity: 1;
}

.field__input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--mute);
}

/* Odak: base.css'in ember focus ring'i (outline) korunur, üstüne
   çerçeve de ember'a döner ve yüzey bir kademe yükselir. Halka
   ASLA kaldırılmaz (§13.4) — burada yalnızca güçlendirilir. */
.field__input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ember);
  background-color: var(--bg-raise-2);
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* select — okunu kendimiz çizeriz.
   NOT: data-URI içindeki renk CSS değişkeni okuyamaz. Aşağıdaki
   iki değer --mute-dark / --mute-light token'larının birebir
   karşılığıdır; o token'lar değişirse bunlar da güncellenmelidir.
   Sitede ham renk yazılan tek yer burasıdır ve alternatifi yok. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238b8994' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

[data-act="light"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236a6660' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

/* Hata metni — aria-describedby ile girdiye bağlanır, bu yüzden
   DOM'da HER ZAMAN durur. Boşken de yerini korur: yükseklik
   rezerve edilmezse hata belirdiğinde form aşağı kayar (CLS,
   §13.6). :empty ile görünmez olur ama kutusu kalır. */
.field__error {
  min-height: 1.15rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.45;
  color: var(--flare);
}

.field__error:empty {
  visibility: hidden;
}

/* Geçersiz alan. .field--invalid şablon/JS tarafından eklenir;
   aria-invalid doğrudan girdiye de yazılabilir — ikisi de aynı
   görünümü verir. İçe gölge çerçeveyi 2px gibi okutur ve düzeni
   etkilemez. */
.field--invalid .field__input,
.field--invalid input,
.field--invalid select,
.field--invalid textarea,
.field__input[aria-invalid="true"],
.field [aria-invalid="true"] {
  border-color: var(--flare);
  box-shadow: inset 0 0 0 1px var(--flare);
}

.field--invalid .field__label {
  color: var(--flare);
}

.form__note {
  padding-top: .9rem;
  font-size: var(--t-body-s);
  color: var(--mute);
  border-top: 1px solid var(--line-soft);
}

/* Başarı bildirimi — sinyalin "yumuşak" biçimi. --signal-grad-soft
   tam bu iş için var: çok düşük alfalı gradient yüzey. */
.form__success {
  padding: clamp(1rem, 2.2vw, 1.5rem);
  font-size: var(--t-body);
  color: var(--fg-strong);
  background-color: var(--bg-raise);
  background-image: var(--signal-grad-soft);
  border: 1px solid var(--ember);
  border-radius: var(--r-md);
}

.form__success small {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .06em;
  color: var(--mute);
}

/* ------------------------------------------------------------
   21. .notice — placeholder / durum notu
   ------------------------------------------------------------
   §13.5 gereği ekip, blog, müşteri, iletişim bilgileri ve harita
   "placeholder" notlarını korur. Kesikli çerçeve bilinçli: bu
   blok "henüz gerçek değil" der ve gerçek bir iddia gibi
   görünmemesi gerekir. Aynı bileşen proje detayındaki
   "proje bulunamadı" durumunu da taşır.
   ------------------------------------------------------------ */
.notice {
  display: grid;
  gap: .45rem;
  align-content: center;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  font-size: var(--t-body-s);
  line-height: 1.6;
  color: var(--mute);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
}

.notice strong {
  color: var(--fg);
}

.notice a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.notice + .notice {
  margin-top: .75rem;
}

/* ------------------------------------------------------------
   22. Odak halkasının yarıçapı
   ------------------------------------------------------------
   base.css'teki genel `:focus-visible` kuralı yarıçapı --r-xs'e
   çekiyor. Bu, pill ve yumuşak köşeli kontrollerde klavye odağı
   sırasında köşelerin ANİDEN sertleşmesine yol açıyor. Halka
   asla kaldırılmaz (§13.4) — yalnızca öğenin kendi yarıçapı
   geri verilir, böylece halka kutuyu doğru sarar.
   ------------------------------------------------------------ */
.chip:focus-visible,
.filter:focus-visible {
  border-radius: var(--r-pill);
}

.mini:focus-visible {
  border-radius: var(--r-md);
}

.field__input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------
   23. Dokunmatik hedefler — §13.8
   Kaba işaretçide her etkileşimli öğe ≥46px.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  .chip,
  .filter,
  .mini {
    min-height: 46px;
  }

  .field__input,
  .field input,
  .field select,
  .field textarea {
    min-height: 46px;
  }

  .crumbs a,
  .contact-line__value a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
  }
}


/* ------------------------------------------------------------
   GÖRSEL YUVALARI — gerçek fotoğraflar eklendiğinde kullanılır
   Üçü de sabit aspect-ratio taşır: görsel yüklenirken sayfa
   zıplamaz (CLS yok). Görsel yoksa figures.js üretilen
   kompozisyonu aynı kutuya çizer.
   ------------------------------------------------------------ */

/* Hizmet indeksi satırındaki görsel (16/9) */
.svc-index__figure {
  aspect-ratio: 16 / 9;
  overflow: clip;
  border-radius: var(--r-md);
  background: var(--bg-raise);
}

/* Hizmet detay sayfasının başlık altı görseli (16/9) */
.svc-hero__figure {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  aspect-ratio: 16 / 9;
  overflow: clip;
  border-radius: var(--r-lg);
  background: var(--bg-raise);
}

/* Blog kartı kapağı (16/10) */
.post__figure {
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-radius: var(--r-md);
  background: var(--bg-raise);
}

/* Kart görselleri hover'da hafifçe yakınlaşır — tek hareket,
   yalnızca transform, layout'a dokunmaz. */
.post__figure .figure__img,
.svc-index__figure .figure__img {
  transition: transform var(--d-slow) var(--ease-out);
}

.post:hover .post__figure .figure__img,
.svc-index__row:hover .svc-index__figure .figure__img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .post:hover .post__figure .figure__img,
  .svc-index__row:hover .svc-index__figure .figure__img {
    transform: none;
  }
}


/* ------------------------------------------------------------
   ORAN SAHİPLİĞİ — sarmalayıcı kazanır
   components.css `.figure__img`'a `aspect-ratio: 4/3` veriyor.
   Kendi oranını bildiren sarmalayıcılarda (16/9, 16/10, 9/7) bu
   kural görselin oranını sarmalayıcının üstüne yazıyordu: ölçüldü,
   manifesto görseli 16/9 yerine 4/3 (1245x934) çıkıyordu.
   Bu yuvalarda görsel kutuyu TAMAMEN doldurur; oranı sarmalayıcı
   belirler, kırpmayı object-fit: cover yapar. Köşe yuvarlaklığı ve
   saç teli çerçeve de sarmalayıcıya ait olduğu için görselden
   kaldırılır (çift yuvarlaklık oluşmasın).
   pages.css en son yüklenen dosya: bu yüzden kural burada.
   ------------------------------------------------------------ */
.manifesto__figure > .figure__img,
.svc-hero__figure > .figure__img,
.svc-index__figure .figure__img,
.post__figure .figure__img,
.sector-item__figure .figure__img,
.svc-index__figure .figure__canvas,
.post__figure .figure__canvas,
.sector-item__figure .figure__canvas {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}