/*
  Yayınlanan sitelerin stil tabanı. Framework yok; ~7 KB.

  İki kural her yerde geçerli:
  1) Breakpoint yazmıyoruz — akışkan ölçek ve auto-fit grid kullanıyoruz.
     Kullanıcı layout'u bozamaz çünkü bozacak bir ayar yok.
  2) Mantıksal özellikler (margin-inline, text-align:start) — RTL bugün
     bedava, sonradan dönmek tüm kütüphaneyi yeniden yazmak demek.
*/

/*
  Buradaki renkler yalnız YEDEK. Yayında hepsini ThemeCss üretiyor ve
  temanın tonunu taşıyorlar: lacivert bir Ink seçen site nötr gri
  çizgilerle yamalı görünmesin diye muted ve line de türetiliyor.
  Bu blok, üretilmiş CSS olmadan açılan bir sayfanın (panel önizlemesi,
  ham blocks.css) çıplak kalmaması için duruyor.

  İki token bilerek listede yok: --site-on-primary-muted ve
  --site-control-line. İkisinin de tek anlamı "şu zemine karşı şu eşiği
  geçtiği ÖLÇÜLMÜŞ renk" ve bu, temaya göre değişen bir hesap. Buraya sabit
  bir değer yazmak, hesabın yapılmadığı yerde yapılmış gibi görünmesine yol
  açardı. Onun yerine kullanıldıkları yerde var(--token, yedek) yazıyor ve
  yedek her zaman garantisi olan mevcut bir token.
*/
/* ── yazı tipleri ─────────────────────────
   Altı aile burada tanımlı ama hiçbiri kendiliğinden inmiyor: @font-face bir
   bildirim, indirme emri değil. Tarayıcı yalnız sayfada gerçekten kullanılan
   aileyi ve o ailenin yalnız gereken alt kümesini indiriyor.

   Neden burada, sayfanın <style> bloğunda değil: blocks.css sürüm damgalı ve
   kalıcı önbelleğe alınıyor. Aynı bildirimleri her sayfada tekrar basmak, hiç
   değişmeyen bir metni her istekte yeniden göndermek olurdu.

   Her dosya değişken font: 400–700 ağırlık aralığının tamamı tek dosyada,
   ağırlık başına ayrı indirme yok.

   Türkçe iki alt kümeyi de gerektiriyor — ş, ğ, İ latin-ext'te. Adresler
   göreli, blocks.css'in konumuna göre çözülüyor. Lisanslar: fonts/NOTICE.md
   ── */


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/urbanist-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Türkçenin ı, ğ, ş, İ harfleri latin-ext'te: bu alt küme olmadan başlıklar
   yedek yazı tipine düşüyor ve tek bir kelimenin ortasında font değişiyor. */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/urbanist-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/mulish-v18-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/mulish-v18-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-display-v40-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-display-v40-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tek aile burada 200–900 bildiriliyor, öbürleri gibi 400–700 değil:
   dosyanın kendisi zaten o aralığı taşıyor (değişken font, wght ekseni
   200–900) ve `kurumsal` çifti başlığı 800'de istiyor. Dar bildirilseydi
   tarayıcı gerçek 800'ü çizmek yerine 700'ü kalınlaştırarak taklit
   ederdi — aynı dosyadan, daha kötü bir harf. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-sans-3-v19-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-sans-3-v19-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-v32-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-v32-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-sans-v19-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-sans-v19-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-v23-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-v23-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --site-primary: #2563eb;
  --site-on-primary: #ffffff;
  --site-ink: #111827;
  --site-surface: #ffffff;
  --site-muted: #5b6472;
  --site-line: #e5e7eb;
  --site-soft: #f6f7f9;

  /* Çerez bildirimi gibi ters kontrastlı yüzeyler. */
  --site-inverse-surface: #111827;
  --site-inverse-ink: #ffffff;

  /* Koyu modda logo plakasının zemini; açık modda kullanılmıyor. */
  --site-plate: #f8fafc;

  --site-logo-height: 2.5rem;
  --site-radius: 0.5rem;
  --site-img-radius: 0.5rem;
  --site-avatar-radius: 999px;
  --site-shadow: none;
  --site-h-weight: 600;
  --site-h-tracking: 0;
  --site-font-heading: system-ui, sans-serif;
  --site-font-body: system-ui, sans-serif;

  /*
    Merdivenin tabanın ALTINDAKİ iki basamağı. Yokluğunda altyazı, meta
    satırı, form etiketi, rozet ve alt bilgi elle yazılmış dokuz ayrı
    değere dağılmıştı — hepsi mutlak rem. Sonucu iki katlıydı: ölçek
    dokuz farklı küçük boy taşıyordu (0.75'ten 0.9375'e, ikisi gözle
    ayırt edilemeyecek kadar yakın), ve kullanıcının "Tip ölçeği" ayarı
    metnin dörtte birine hiç ulaşmıyordu. "Büyük" seçen kişinin gövde
    yazısı büyüyor, resim altyazısı aynı kalıyordu.

    step--1 ikincil metin (altyazı, meta, etiket, rol, not),
    step--2 ince yazı (rozet, hukuki satır, üst yazı).
  */
  --step--2: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  /* İki kural (adımlı formun gezinme düğmeleri ve dil şeridi) bunu zaten
     kullanıyordu ama hiçbir yerde tanımlı değildi: gap sessizce sıfıra
     düşüyor, "← Geri" ile "Devam →" bitişik duruyordu. */
  --space-xs: clamp(0.35rem, 0.3rem + 0.15vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --space-lg: clamp(2rem, 1.4rem + 3vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

/*
  [hidden] tarayıcının kendi stil sayfasında duruyor ve oradaki seçici
  eleman adı kadar zayıf: bir sınıfa yazılmış herhangi bir display onu
  yeniyor. Betikle gizlenen her şey bu yüzden gizlenmiyordu — çerez şeridi
  "Tamam"a basıldıktan sonra ekranda kalıyor, adımlı formun "Geri" ve
  "Gönder" düğmeleri ilk adımda da görünüyordu.

  Kural burada bir kez kesiliyor. !important, [hidden] için doğru yer:
  "bu eleman şu an yok" kararı görünümün değil, davranışın kararı.
*/
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--site-surface);
  color: var(--site-ink);
  font-family: var(--site-font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
/* Bağlantı bir metin: dolgu değil mürekkep tarafındaki token'ı alıyor.
   Açık şemada ikisi aynı değere çözülüyor; koyu şemada --site-primary
   kullanıcının girdiği DarkPrimary'nin kendisi (dolgu için doğru, üstüne
   yazmak için değil) ve okunmuyordu. Aynı ayrım aşağıdaki bütün metin,
   ikon, odak halkası ve kenarlık kurallarında geçerli. */
a { color: var(--site-primary-ink); }
/*
  Odak halkası --site-primary DEĞİL, o zeminin kendi odak rengi.

  outline-offset halkayı düğmenin DIŞINA, yani altındaki zeminin üstüne
  koyuyor. Ana renk zeminli bir bantta (vurgulu cta, kampanya şeridi, marka
  renginde üst bar) o zemin --site-primary ve halka da --site-primary'ydi:
  1:1, yani klavyeyle gezen kişi için odak göstergesi hiç yoktu. WCAG 2.4.7
  görünür bir gösterge istiyor ve orada gösterge yoktu.

  Yedek her zaman --site-primary: token'ı tanımlamayan her yüzeyde zemin
  sayfanın zemini demek ve orada paletin garantisi zaten geçerli.
*/
:focus-visible { outline: 2px solid var(--site-focus, var(--site-primary-ink)); outline-offset: 2px; }

/* ── bölüm iskeleti ─────────────────────── */
.blk { padding-block: var(--space-lg); container-type: inline-size; }
/*
  Rayın ölçüsü bir DEĞİŞKEN, sabit sayı değil.

  Görsel diller kendi ölçüsünü seçebiliyor (monitör 96rem'de çalışıyor).
  Sabit yazıldığında rayı genişleten istisnalar — dört sütunlu kutu, öne
  çıkan liste — o dilde rayı DARALTIYOR ve sayfada ikinci bir sol kenar
  açıyordu. Ölçüldü: 96rem'lik bir sayfada bölünmüş satır 92rem'de kalıp
  32 piksel içeri kaçıyordu.

  İstisnalar bu yüzden `max(<sayı>, var(--site-rail))` yazılıyor: kendi
  alt sınırlarını koruyorlar ama dilin rayından asla dar kalmıyorlar.
*/
:root { --site-rail: 72rem; }
.blk-in { max-width: var(--site-rail); margin-inline: auto; padding-inline: var(--space-md); }

/*
  Dar ölçü rayı KAYDIRMIYOR; yalnız satırı kısaltıyor ve ortalıyor.

  Karar blok kendine ait: sayfada yanında geniş bir bölüm olup olmaması bunu
  değiştirmiyor. Bir sayfada hem geniş hem dar blok varsa iki ayrı sol/ortalı
  eksen oluşabilir — bu bilerek kabul edilmiş.

  Çocuk çocuk kovalamak (margin, sonra inline-size) iki kere kırıldı: her
  çocuğun (.blk-h2, .blk-hours, .blk-form) kendi genişlik/margin kuralı var
  ve dosyada benimkinden sonra geldiği için eşit özgüllükte kazanıyordu —
  kimi satır tam genişlik kalıyor, kimi kendi metnine küçülüp farklı bir
  yerde ortalanıyordu: tek sütun yerine sarsak parçalar.

  Doğrusu KABIN kendisini daraltmak: .blk-narrow aynı elemanda .blk-in ile
  duruyor, margin-inline:auto zaten ondan geliyor. max-width'i 44rem'e
  indirince kap kendiliğinden ortalanıyor, içindeki her şey de (tablo,
  form dâhil) normal blok akışıyla o kabı doldurup ONUNLA birlikte
  ortalanıyor — kimseyle çakışan ayrı bir kural yok.
*/
.blk-narrow { max-width: 44rem; }

/* ── yan sütunlu sayfa ────────────────────
   Bölümlerden hangilerinin kenara gideceğine sayfanın kendisi karar veriyor
   (page_blocks.region). Hekim sayfasında solda özgeçmiş, sağda künye ve
   randevu kartı duruyor — ve o kartların içeriği hekimden hekime değişiyor,
   yani ortak bir sayfadan beslenemezdi.

   Kolonun genişliği sabit 21rem: kart sütunu içeriğe göre esnerse iki hekim
   sayfası iki farklı düzende görünür. Ana kolon kalanı alıyor. */
.blk-page-split { display: grid; gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr); }

/* İki kolon aynı hizadan başlıyor. Ana kolondaki bölüm kendi üst payını
   taşıyor, yandaki bloklar taşımıyor (aşağıda padding-block: 0) — bu yüzden
   künye kartı, yanındaki başlığın bir bölüm payı kadar üstünde duruyordu.
   Pay ilk bölümden alınıp ızgaranın kendisine veriliyor.

   Aynısı alt uçta: yan sütunun son kartı ile alt bilgi arasında hiç boşluk
   kalmıyordu, kart doğrudan alt bilginin çizgisine yapışıyordu.

   Pay yan sütuna verilemezdi: kolon yapışkan ve padding, yapışıp kaldığı
   yerde de duruyor — kart ekranın üstünden bir bölüm payı kadar aşağıda
   kalırdı. */
.blk-page-split { padding-block: var(--space-lg); }
.blk-page-main > [data-block]:first-child > .blk { padding-block-start: 0; }
.blk-page-main > [data-block]:last-child > .blk { padding-block-end: 0; }

/* Kolonların kendi rayı yok: ray dıştaki .blk-in'de. İçerideki bölümler
   yatay payını bırakıyor, yoksa iki kez giriliyordu. */
.blk-page-split > * > [data-block] > .blk > .blk-in { padding-inline: 0; }

/* @container değil @media: .blk-page-split doğrudan <main>'in altında ve
   üstünde container-type taşıyan bir ata yok — .blk'nin kabı ancak bölümün
   İÇİNDE geçerli. Kap sorgusu hiçbir zaman eşleşmiyordu, yani sayfa her
   genişlikte tek sütun kalıyordu. Yazı sayfasındaki eşi (.blk-post-split)
   <article class="blk"> içinde olduğu için orada @container doğru. */
@media (min-width: 64rem) {
  .blk-page-split { grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--space-lg); align-items: start; }

  .blk-page-aside { position: sticky; inset-block-start: var(--space-md); }

  :root:has(.site-head[data-sticky="true"]) .blk-page-aside {
    inset-block-start: calc(5rem + var(--preview-bar) + var(--space-md)); }
}

/* Kenardaki bölümler dikey payını da bırakıyor ve zebra sırasına girmiyor:
   dar bir kolonda bölüm başına 4.5rem boşluk, kartları birbirinden kopuk
   gösteriyordu. Aralarındaki mesafe tek kural. */
.blk-page-aside > [data-block] > .blk { padding-block: 0; background: none; }
.blk-page-aside > [data-block] + [data-block] { margin-block-start: var(--space-md); }
.blk-page-aside .blk-in { max-width: none; }
.blk-page-aside .blk-h2 { font-size: var(--step-1); }

/* Ana kolondaki bölümler de kendi ayrımını kaybediyor: ızgaranın içinde
   sayfanın tamamını kaplayan bir zemin çizilemiyor ve yarım kalan bir
   zebra, kolonu ikiye bölünmüş gösterirdi. */
.blk-page-main > [data-block] > .blk { background: none; }

/* ── künye kartı ──────────────────────────
   Yan sütunda "bir bakışta" okunan bilgiler. Kart kendi zeminini taşıyor:
   kolonun içinde zemini olmayan bir liste, ana kolonun devamı gibi
   okunuyordu. */
.blk-facts { background: var(--site-soft); border: 1px solid var(--site-line);
  border-radius: var(--site-radius); padding: var(--space-md); }
.blk-facts-head { margin: 0 0 0.75rem; font-size: var(--step--2);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--site-primary-ink); }
.blk-facts dl { margin: 0; display: flex; flex-direction: column; }

/* Ayıraç satırların arasında, kenarlarında değil: son satırın altındaki
   çizgi kartı ikiye bölünmüş gösteriyordu. */
.blk-fact { display: flex; align-items: start; gap: 0.7rem; padding-block: 0.7rem; }
.blk-fact + .blk-fact { border-block-start: 1px solid var(--site-line); }
.blk-fact-icon { flex: none; inline-size: 1.25rem; block-size: 1.25rem;
  margin-block-start: 0.15rem; color: var(--site-primary-ink); }
.blk-fact dt { font-size: var(--step--2); color: var(--site-muted);
  letter-spacing: 0.04em; text-transform: uppercase; }
.blk-fact dd { margin: 0.1rem 0 0; font-weight: 600; }

/* ── randevu kartı ────────────────────────
   Ana rengin çok hafif bir tonu: kart, künyenin yanında ikinci bir kutu ve
   ikisi aynı zeminde olsaydı tek bir uzun kart gibi okunurdu. Renk aynı
   zamanda "burası eylem" diyor. */
.blk-booking { background: color-mix(in oklab, var(--site-primary) 7%, var(--site-surface));
  border: 1px solid color-mix(in oklab, var(--site-primary) 22%, transparent);
  border-radius: var(--site-radius); padding: var(--space-md); }
.blk-booking .blk-h2 { font-size: var(--step-1); margin-block: 0.15rem 0.5rem; }
.blk-booking-text { margin: 0; color: var(--site-muted); font-size: var(--step--1);
  line-height: 1.6; }

.blk-booking-promises { list-style: none; margin: var(--space-sm) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--step--1); }
.blk-booking-promises li { display: flex; align-items: start; gap: 0.5rem; }
.blk-booking-promises svg { flex: none; inline-size: 1rem; block-size: 1rem;
  margin-block-start: 0.2rem; color: var(--site-primary-ink); }

/* Kartın ana düğmesi rayın tamamını kaplıyor: dar bir kolonda hizasız
   duran bir düğme, altındaki "Ara"/"WhatsApp" ikilisiyle üç farklı
   genişlikte üç kutu demekti.

   Seçici iki sınıf: tek sınıfla yazılınca .blk-btn'in inline-block'u
   kazanıyordu — o tanım dosyada daha aşağıda ve özgüllükler eşit. Aynı
   sebeple .blk-booking-reach .blk-btn de iki sınıfla yazılmış. */
.blk-booking .blk-booking-go { display: block; margin-block-start: var(--space-sm);
  text-align: center; }

/* Ayıraç yazının iki yanından geçiyor: tek başına bir çizgi "bitti" der,
   ortasındaki yazıyla birlikte "başka bir yol da var" diyor. */
.blk-booking-or { display: flex; align-items: center; gap: 0.6rem;
  margin-block: var(--space-sm) 0.6rem;
  font-size: var(--step--2); color: var(--site-muted);
  letter-spacing: 0.06em; text-transform: uppercase; }
.blk-booking-or::before, .blk-booking-or::after {
  content: ""; flex: 1; block-size: 1px; background: var(--site-line); }

.blk-booking-reach { display: flex; gap: 0.5rem; }
.blk-booking-reach .blk-btn { flex: 1; display: inline-flex; align-items: center;
  justify-content: center; gap: 0.4rem; }
.blk-booking-reach svg { inline-size: 1rem; block-size: 1rem; flex: none; }

.blk-booking-wa { background: #25d366; color: #fff; border-color: #25d366; }
.blk-booking-wa:hover { background: #1fbe5a; color: #fff; }

/* ── yan sütunlu yazı ─────────────────────
   Yazı hâlâ 44rem: iki sütuna geçmek satırı uzatmak için değil, kenara bir
   şey koymak için. Uzun bir satır okumayı zorlaştırıyor ve blogun tamamı bu
   ölçüye göre kurulu.

   Dar ekranda tek sütun ve yan sütun yazının altına iniyor — yazıyı ikiye
   bölen bir kenar çubuğu, telefonda okumayı kesiyor. */
.blk-post-split { display: grid; gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr); }

@container (min-width: 60rem) {
  .blk-post-split { grid-template-columns: minmax(0, 44rem) minmax(0, 19rem);
    justify-content: center; align-items: start; gap: var(--space-lg); }

  /* Yan sütun kaydırırken yazıyla birlikte gidiyor: uzun bir yazıda ekranın
     dışında kalan bir kenar çubuğu, sayfanın ilk ekranından sonra hiç
     görünmüyor.

     Üst bar yapışkan olabiliyor ve o zaman kolonu örtüyordu; 5rem onun
     yüksekliği, --preview-bar da panelden bakarken üstteki şerit (yayında
     sıfır). Aynı hesap :root'un scroll-padding'inde de yazılı. */
  .blk-post-aside { position: sticky;
    inset-block-start: var(--space-md); }

  :root:has(.site-head[data-sticky="true"]) .blk-post-aside {
    inset-block-start: calc(5rem + var(--preview-bar) + var(--space-md)); }
}

/* Yan sütundaki bölümler kendi rayını ve dikey payını bırakıyor: kolon
   zaten dar ve her bölüm bir kez daha daralıyordu. */
.blk-post-aside > [data-block] > .blk { padding-block: 0; }
.blk-post-aside > [data-block] + [data-block] { margin-block-start: var(--space-lg); }
.blk-post-aside .blk-in { padding-inline: 0; max-width: none; }
.blk-post-aside .blk-h2 { font-size: var(--step-1); }

/* Kenardaki bölüm sayfanın zebra sırasına girmiyor: bölüm ayrımı
   `main > div:nth-child(even)` diye sayıyor ve yan sütundaki bölümler o
   saymanın dışında — ana kolonun içinde iki farklı zemin, kolonu ikiye
   bölünmüş gösterirdi. */
.blk-post-aside > [data-block] > .blk { background: none; }

.blk-title, .blk-h2, .blk-h3 {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  text-wrap: balance;
}
.blk-title { font-size: var(--step-3); line-height: 1.1; margin: 0 0 var(--space-sm); }
.blk-h2 { font-size: var(--step-2); line-height: 1.2; margin: 0 0 var(--space-md); }
.blk-h3 { font-size: var(--step-1); line-height: 1.25; margin: 0 0 0.35rem; }
.blk-lede { font-size: var(--step-1); color: var(--site-muted); margin: 0 0 var(--space-md); }
.blk-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--2);
  color: var(--site-primary-ink); margin: 0 0 0.5rem; }

/*
  Vitrin blokları başlığını kendi ekseninde tutuyor — hero'nun "centered"
  varyantına verilen izin: banner gibi okunan, bağımsız bir satır. İçerik
  (kartlar, liste) yine sola yaslı kalıyor; iki ayrı eksen değil, çünkü
  kartlar rayın sağ kenarına kadar uzanıyor ve başlık zaten kendi kaydı.
  logo-strip bunun istisnası: içeriği rayı doldurmuyor, o yüzden şeridin
  kendisi de ortalanıyor (bkz. .blk-strip).

  steps burada yok: numaralı daireleri birbirine
  bağlayan dikey çizgi kendi başına güçlü bir sol eksen, başlığı ortalayınca
  ikisi çakışıyor. .blk-narrow kullanan bloklar (video, product-menu) da
  dışarıda — başlıkları yukarıdaki kutu-ortalama kuralıyla içerikleriyle
  birlikte zaten ortalanıyor, ayrıca metin hizası değiştirmeye gerek yok.
*/
[data-block="feature-grid"] .blk-h2,
[data-block="team-grid"] .blk-h2,
[data-block="testimonials"] .blk-h2,
[data-block="gallery"] .blk-h2,
[data-block="social-strip"] .blk-h2,
[data-block="collection-latest"] .blk-h2,
[data-block="page-list"] .blk-h2,
[data-block="showcase-pair"] .blk-h2,
[data-block="feature-rail"] .blk-h2,
[data-block="moments"] .blk-h2,
[data-block="metric-card"] .blk-h2,
[data-block="panel-cards"] .blk-h2,
[data-block="logo-strip"] .blk-h2 {
  text-align: center;
}

/* Koleksiyon listesinde başlığın üstündeki küçük yazı ve altındaki giriş de
   başlıkla aynı eksende. Girişte ortalanan şey satırlar değil, satırların
   oluşturduğu kutu — bir alttaki vitrin bloklarıyla aynı gerekçe, ölçü
   korunuyor.

   Seçici .blk-in'in DOĞRUDAN çocuğunu okuyor: "öne çıkan" düzeninde ikisi de
   .blk-posts-head'in sol sütununda duruyor ve orada ortalanmamaları gerekiyor
   (giriş de zaten başlığın altında değil sağında, kuralı .blk-posts-intro'da). */
.blk-posts > .blk-in > :is(.blk-eyebrow, .blk-lede) { text-align: center; }
.blk-posts > .blk-in > .blk-lede {
  max-inline-size: 44rem;
  margin-inline: auto;
}

/* Anlar bloğunda da hiza tercihe bağlı; kural collection-latest'inkiyle
   aynı yerde duruyor ki ikisi birlikte okunsun. Ortalanan şey yalnız satır
   değil giriş cümlesinin KUTUSU da (44rem + auto), o yüzden yaslarken kenar
   payı da bırakılıyor — yalnız text-align değişseydi kutu ortada kalırdı. */
/* Tonlu zemin: bölümü sayfadan ayırıyor. Katalogdaki öbür tonlu bölümlerle
   aynı gri (--site-soft), yani iki tonlu bölüm yan yana geldiğinde aynı
   yüzey gibi okunuyor. */
.blk-moments[data-tone="soft"] { background: var(--site-soft); }

.blk-moments[data-align="start"] :is(.blk-h1, .blk-h2, .blk-lede) { text-align: start; }
.blk-moments[data-align="end"] :is(.blk-h1, .blk-h2, .blk-lede) { text-align: end; }
.blk-moments[data-align="start"] > .blk-in > .blk-lede { margin-inline: 0 auto; }
.blk-moments[data-align="end"] > .blk-in > .blk-lede { margin-inline: auto 0; }

/* Koleksiyon listesinde hiza tercihe bağlı. Ortalı başlık kart ızgarasının
   üstünde doğru duruyor ama satır listesinin üstünde durmuyor: liste soldan
   okunuyor, başlık ortada kalınca ikisi ayrı eksende. Varsayılan yine ortalı
   — yalnız seçildiğinde kayıyor. Yaslanan kutu ortalama payını da bırakıyor:
   yalnız text-align değişseydi 44rem'lik kutu ortada kalır, başlık ile giriş
   iki ayrı eksene düşerdi. */
.blk-posts[data-align="start"] :is(.blk-h1, .blk-h2, .blk-eyebrow, .blk-lede) { text-align: start; }
.blk-posts[data-align="end"] :is(.blk-h1, .blk-h2, .blk-eyebrow, .blk-lede) { text-align: end; }
.blk-posts[data-align="start"] > .blk-in > .blk-lede { margin-inline: 0 auto; }
.blk-posts[data-align="end"] > .blk-in > .blk-lede { margin-inline: auto 0; }

/* Aynı eksende duran giriş cümlesi. Vitrin bloklarının çoğunda başlığın
   altında bir de giriş var ve ortalı bir başlığın altındaki sola yaslı
   paragraf, iki ayrı bölüm başlıyormuş gibi okunuyor. Ölçü korunuyor:
   ortalanan şey satırın kendisi değil, satırların oluşturduğu kutu. */
[data-block="showcase-pair"] .blk-lede,
[data-block="feature-rail"] .blk-lede,
[data-block="moments"] .blk-lede,
[data-block="metric-card"] .blk-lede,
[data-block="panel-cards"] .blk-lede {
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
}

/*
  page-list kartlarının içi de ortalı — listedeki öbür kart ızgaralarından
  ayrıldığı yer burası ve sebebi kartın taşıdığı şey: feature-grid bir
  özelliği anlatıyor, kart soldan okunan bir paragraf; page-list ise bir
  sayfaya açılan kapı, taşıdığı tek şey ad ve bir cümlelik tanıtım. Ortalı
  ad, üstündeki ortalı bölüm başlığıyla aynı ekseni sürdürüyor.
*/
[data-block="page-list"] .blk-card { text-align: center; }

/* ── iki kolon: kap genişliğine göre, viewport'a değil ── */
.blk-split { display: grid; gap: var(--space-md); align-items: center; }
@container (min-width: 48rem) {
  .blk-split { grid-template-columns: 1fr 1fr; }
  .blk[data-align="right"] .blk-split > .blk-col:first-child { order: 2; }
}

/*
  Adres bölümü ortalanmıyor, tepeden hizalanıyor. Ortalama hero ve image-text
  için doğru: orada iki kolon da serbest akan metin/görsel ve dikey merkez
  ikisini de dengeliyor. Burada sağdaki harita sabit oranlı ve sol kolondan
  belirgin uzun; merkez hizası adres bloğunu haritanın ortasına indirip
  başlığı hiçbir şeyle aynı çizgide bırakmıyordu — bölüm başlığının hizalandığı
  tek doğru yer içeriğin üst kenarı.
*/
[data-block="location"] .blk-split { align-items: start; }

/* ── auto-fit grid: 360px'te taşmaz, geniş ekranda kolonlar ── */
.blk-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
@container (min-width: 56rem) {
  .blk-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }

  /*
    page-list'te sütun sayısı kayıt sayısına iniyor (bkz. page-list.cshtml) ve
    kalan iki şeyi CSS tamamlıyor: sütunun bir tavanı oluyor ve ızgara
    ortalanıyor. İkisi olmadan tek kayıtlı bir liste, 68rem'e gerilmiş tek bir
    kart oluyordu — solda asılı kalmasından iyi değil.

    minmax'ın tavanı esnek: üç kart sığmadığında sütunlar tavanın altına inip
    satırı dolduruyor, yani üç kayıtta düzen eskisiyle birebir aynı kalıyor.
  */
  [data-block="page-list"] .blk-grid {
    grid-template-columns: repeat(var(--cols, 3), minmax(min(17rem, 100%), 24rem));
    justify-content: center;
  }
}

/* Zemin doğrudan değil değişken üzerinden: kartın hangi renge oturacağına
   bölüm karar veriyor (bkz. zebra kuralı). Doğrudan yazılsaydı, o kararı
   veren seçici kartın kendi kuralından ağır olmak zorunda kalır ve kutuyu
   bilerek kaldıran varyantları (plain, quotes, single) da ezerdi. */
.blk-card { background: var(--card-surface, var(--site-soft));
  border: 1px solid var(--site-line);
  box-shadow: var(--site-shadow);
  border-radius: var(--site-radius); padding: var(--space-md); }
.blk-card-link { display: block; text-decoration: none; color: inherit; }
.blk-card-link:hover { border-color: var(--site-primary-ink); }
.blk-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 0.6rem; }
.blk-img { width: 100%; border-radius: var(--site-img-radius); aspect-ratio: 16 / 10; object-fit: cover; }

/* Fotoğraf + yazı bloğunda kırpmanın odağı. Kutu 16/10, yani dikey bir
   portre ortadan kırpılınca başın üstü gidiyor — açılış bandındaki
   kuralın aynısı, burada da gerekiyordu. */
.blk-imgtext[data-focus="top"] .blk-img { object-position: 50% 0%; }
.blk-imgtext[data-focus="upper"] .blk-img { object-position: 50% 25%; }
.blk-imgtext[data-focus="lower"] .blk-img { object-position: 50% 75%; }
.blk-imgtext[data-focus="bottom"] .blk-img { object-position: 50% 100%; }

/* Kartın kapak görseli ile altındaki başlık yapışıktı: .blk-img'in kendi alt
   boşluğu yok (hero ve image-text'te kolonun tamamını kaplıyor, orada boşluk
   yanlış olurdu) ve .blk-h3 sıfır üst margin ile başlıyor. Boşluk bu yüzden
   görselin genel kuralına değil, kartın içindeki hâline yazılıyor —
   .blk-avatar'ın ekip kartında yaptığının aynısı. */
.blk-card > .blk-img { margin-block-end: var(--space-sm); }
.blk-figure { margin: 0; }
.blk-figure img { border-radius: var(--site-img-radius); aspect-ratio: 4 / 3; object-fit: cover; }
.blk-figure figcaption { font-size: var(--step--1); color: var(--site-muted); margin-top: 0.35rem; }

/* ── görsel yuvası: boş ama beklenen yer ──
   Yalnız önizlemede basılıyor (bkz. BlockHtml.VisualSlot). Ziyaretçi bunu
   hiç görmüyor; gördüğü an bölümün gizlenmesinden kötü bir şey olurdu.

   Bilerek fotoğraf gibi durmuyor: kesikli kenar ve soluk zemin "burası
   henüz boş" diyor. Dolu görünseydi kimse doldurmazdı — yer tutucunun
   tek işi doldurulmak. */
.blk-slot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: var(--space-md);
  text-align: center;
  aspect-ratio: var(--slot-ratio, 16 / 10);
  border: 1px dashed color-mix(in oklab, var(--site-primary) 40%, var(--site-line));
  border-radius: var(--site-img-radius);
  background: color-mix(in srgb, var(--site-primary) 5%, var(--site-surface));
  color: var(--site-muted);
}

.blk-slot-mark {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  fill: none;
  stroke: var(--site-primary-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.blk-slot-subject {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--site-ink);
  max-inline-size: 22rem;
  text-wrap: balance;
}

.blk-slot-spec { margin: 0; font-size: var(--step--2); }

/* Yazısız çerçeve: tekrarlayan hücre ve madalyon. İşaret de küçülüyor,
   yoksa altı rem'lik bir dairede tek başına iri duruyor. */
.blk-slot[data-quiet] { padding: var(--space-sm); }
.blk-slot[data-quiet] .blk-slot-mark { inline-size: 1.75rem; block-size: 1.75rem; }

/* Portre madalyonu .blk-avatar'ın birebir kutusu: yer tutucunun tek işi,
   yerine gelecek şeyin duracağı yeri tutmak. Kural oradan kopyalanıyor —
   margin-inline unutulduğunda madalyon sola yaslanıyor, oysa kartın adı ve
   rolü ortalı: aynı kartta iki ayrı eksen çıkıyor ve yerleşim bozuk
   görünüyor. Mantıksal özellik de aynı sebeple: dosyanın geri kalanı
   fiziksel değil mantıksal yazıyor. */
.blk-slot[data-role="portrait"] {
  inline-size: 6rem;
  block-size: 6rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--site-avatar-radius);
  margin-inline: auto;
  margin-block-end: 0.6rem;
}

/* Düğmenin tamamı token'dan geliyor; değerleri ThemeCss basıyor
   (bkz. ButtonSystems). Tek tanım: eskiden görünüm altı ayrı dil dosyasına
   dağılmıştı ve kullanıcının seçimi ancak köşeyi değiştirebiliyordu.

   border ve border-block-end ayrı: "bağlantı" biçiminde kutu yok, yalnız
   alt çizgi var — ikisini tek kısayolla anlatmak mümkün değil. */
.blk-btn {
  display: inline-block;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: var(--btn-border);
  border-block-end: var(--btn-edge);
  background: var(--btn-fill);
  color: var(--btn-ink);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease,
              box-shadow 140ms ease, transform 140ms ease;
}

.blk-btn:hover {
  background: var(--btn-fill-hover);
  color: var(--btn-ink-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: var(--btn-lift);
}

/* İkincil düğme ayrı tutuluyor: asıl mesele ikisinin ilişkisi. Dolgusuz
   biçimlerde eş düğme yeterince geriye çekilmezse hangisinin ana eylem
   olduğu anlaşılmıyor. */
.blk-btn-quiet {
  background: var(--btn-quiet-fill);
  color: var(--btn-quiet-ink);
  border: var(--btn-quiet-border);
  border-block-end: var(--btn-quiet-edge);
  box-shadow: none;
}
.blk-btn-quiet:hover {
  background: var(--btn-quiet-fill-hover);
  color: var(--btn-quiet-ink);
  box-shadow: none;
  transform: none;
}

/* cta'nın WhatsApp düğmesi: simge metnin önünde, ikisi tek satırda. Renk
   buraya yazılmıyor — .blk-btn-quiet'in zaten okuduğu marka tokenlarını
   miras alıyor, WhatsApp'ın kendi yeşilini değil (bkz. cta.cshtml). */
.blk-cta-wa { display: inline-flex; align-items: center; gap: 0.4em; }

@media (prefers-reduced-motion: reduce) {
  .blk-btn, .blk-btn:hover { transition: none; transform: none; }
}
.blk-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.blk-prose > :first-child { margin-block-start: 0; }
.blk-prose > :last-child { margin-block-end: 0; }
/* Aynı sebeple ölçü kaba değil paragraflara veriliyor (bkz. .blk-narrow). */
.blk-text[data-width="narrow"] .blk-in > * { max-inline-size: 44rem; }
/*
  "Geniş" seçeneği kalkmıyor ama cümleyi kapsamıyor. 72rem'lik rayda bir
  paragraf 110 karakterin üstüne çıkıyor; okunabilir aralık 45–75 ve WCAG
  1.4.8'in tavanı 80. Genişliğe gerçekten ihtiyacı olan şey cümle değil:
  tablo, gömülü içerik, kod, geniş görsel. Onlar rayın tamamını alıyor,
  metin ölçüsünü koruyor — yani ayar hâlâ bir işe yarıyor ama artık
  okunmaz bir sonuç üretemiyor.
*/
.blk-text[data-width="wide"] .blk-in > :is(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
  max-inline-size: 44rem;
}

/* Ana renk zeminli bantlar düğme token'larını kendi kapsamında yeniden
   tanımlıyor. Eskiden bu bir seçici savaşıydı: bant kuralı ile
   [data-buttons="…"] kuralının ağırlığı eşitti ve :where() ile ağırlık
   sıfırlanarak çözülmüştü. Token'la savaşacak bir şey kalmıyor — hangi
   düğme biçimi seçilirse seçilsin bant kendi değerlerini veriyor.

   "Bağlantı" biçimi de burada dolgulu bir düğmeye dönüyor: ana rengin
   üstünde altı çizili bir yazı kaybolurdu. */
.blk-cta[data-accent="true"],
.blk-campaign {
  --btn-fill: var(--site-on-primary);
  --btn-ink: var(--site-primary);
  --btn-fill-hover: var(--site-on-primary);
  --btn-ink-hover: var(--site-primary);
  --btn-border: 0 solid transparent;
  --btn-edge: 0 solid transparent;
  --btn-pad-x: 1.1rem;
  --btn-pad-y: 0.6rem;
  --btn-radius: var(--site-radius);
  --btn-shadow: none;
  --btn-shadow-hover: none;
  --btn-lift: none;
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: var(--site-on-primary);
  --btn-quiet-border: 1px solid var(--site-on-primary);
  --btn-quiet-edge: 1px solid var(--site-on-primary);
  --site-focus: var(--site-on-primary);
}

.blk-cta[data-accent="true"] { background: var(--site-primary); color: var(--site-on-primary); }
.blk-cta-in { display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: space-between; }
.blk-cta .blk-h2 { margin: 0; }

.blk-faq { border-bottom: 1px solid var(--site-line); padding-block: var(--space-sm); }
.blk-faq summary { cursor: pointer; font-weight: 500; padding-block: 0.35rem;
  min-block-size: 2.75rem; display: flex; align-items: center; gap: var(--space-sm); }
/*
  Ok elle çiziliyor çünkü display:flex tarayıcının kendi açılır işaretini
  (::marker üçgeni) kaldırıyor — satırı 2.75rem'e ortalamak için flex şart,
  ama bedeli, açılıp kapandığı hiçbir yerden belli olmayan bir başlıktı.
  currentColor kullanıyor, yani rengi --site-ink: zemine karşı 14.71:1'in
  altına inmiyor, 1.4.11'in istediği 3:1'in çok üstünde.

  Okun iki kenarı bilerek MANTIKSAL değil fiziksel: aşağı bakan bir ok sağdan
  sola yazımda da aşağı bakar, yani yön değiştirmemeli. border-inline-end
  yazsaydık RTL'de köşe karşı tarafa geçer ve ok yana dönerdi. Kutunun satır
  içindeki yeri ise yön duyarlı, o yüzden orada margin-inline-start duruyor.

  Dönüş süresi tek satır; azaltılmış hareket tercihi aşağıdaki genel kuralda
  zaten sıfırlanıyor.
*/
.blk-faq summary::after { content: ""; margin-inline-start: auto; flex: none;
  inline-size: 0.45rem; block-size: 0.45rem;
  border-right: 2px solid; border-bottom: 2px solid;
  rotate: 45deg; transition: rotate 0.15s; }
.blk-faq[open] summary::after { rotate: -135deg; }

.blk-steps { list-style: none; counter-reset: step; padding: 0;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
/*
  Numara adımın YANINDA, üstünde değil. Eskiden madalyon konumlandırılmıştı
  ve li'nin üstüne 2.25rem boşluk açılıyordu: numara bir satır, adın kendisi
  bir alt satır. Üç adım yan yana dizilince ekranda önce 1 2 3 sırası, onun
  altında ayrı bir sırada adlar görünüyordu — numaranın hangi adıma ait
  olduğu ancak sütunu takip ederek anlaşılıyordu.

  İki sütunlu ızgara bunu kendiliğinden çözüyor: madalyon birinci sütunda,
  ad ve açıklama ikinci sütunda. Açıklama da adın altına değil adın hizasına
  giriyor, yani numaranın açtığı girinti tüm adım boyunca korunuyor.
*/
.blk-steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: var(--space-sm);
  align-items: start;
}
.blk-steps > li > * { grid-column: 2; }
.blk-steps > li::before { content: counter(step);
  grid-column: 1; grid-row: 1;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: var(--site-primary); color: var(--site-on-primary);
  display: grid; place-items: center;
  font-size: var(--step--1); font-weight: 600; }

.blk-stats { background: var(--site-soft); }
.blk-stat { text-align: center; }
.blk-stat-value { display: block; font-family: var(--site-font-heading);
  font-size: var(--step-3); line-height: 1.1; color: var(--site-primary-ink); }
.blk-stat-label { display: block; color: var(--site-muted); font-size: var(--step--1); }

/*
  Şerit sarmalı bir satır değil, ızgara.

  Sarmalı satırda rozetler kendi metinleri kadar yer kaplıyordu: genişlikler
  eşit değildi, üstelik justify-content:center HER SATIRI ayrı ayrı ortalıyor
  ve altı rozetin beşi üste sığıp altıncısı alta düştüğünde tek başına kalan
  rozet, üstündekilerin hiçbiriyle aynı çizgide olmayan bir yerde duruyordu.

  Izgarada sütunlar eşit ve satırlar birbirine kilitli: her satırın rozetleri
  aynı sol kenardan başlıyor. Sütun sayısını görünüm değil içerik belirliyor
  (bkz. logo-strip.cshtml) — altı rozet 3+3, üç rozet tek satır.

  Sütuna 15rem tavanı: tavansız 1fr, üç rozeti 21.7rem'lik şeritlere geriyor
  ve iki kelimelik bir belge, içinde kaybolduğu bir bant hâline geliyordu.
  Tavanla ızgara rayın tamamına yayılmıyor, artan yer justify-content:center
  ile iki yana eşit dağılıyor — sağda tek başına kalan bir boşluk kalmıyor.
*/
.blk-strip { display: grid; gap: var(--space-md); justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 15rem)); }

@container (min-width: 48rem) {
  .blk-strip { grid-template-columns: repeat(var(--cols, 3), minmax(0, 15rem)); }
}

/*
  Plakalı şeritte sütun tavanı yok: ray ne kadarsa o kadar.

  Tavanın sebebi logolu şerit — orada öğe kendi ölçüsünde (10rem) kalıyor ve
  tavansız bir sütun, iki kelimelik bir belgeyi içinde kaybolduğu bir bant
  hâline getiriyordu. Plakanın böyle bir ölçüsü yok: kutunun kendisi öğe,
  hücresine yayılıyor (max-inline-size: none; justify-self: stretch). Tavan
  orada rayın ortasına dar bir ada bırakıyor, iki yanını boş koyuyordu.

  Seçici :has ile öğeden türüyor, "badge" görünümünden değil: plaka simgeli
  satırlarda da çıkıyor ve düzeni belirleyen şey görünümün adı değil,
  içeride ne olduğu.
*/
.blk-strip:has(.blk-strip-plate) { justify-content: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

@container (min-width: 48rem) {
  .blk-strip:has(.blk-strip-plate) {
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}

/*
  Yazar sütun sayısını kendisi girdiyse ızgara onu dinliyor — kabın kaç
  sütun sığdırdığını değil. Nitelik yalnız elle girilmiş sayıda basılıyor
  (bkz. logo-strip.cshtml); otomatik sayıda basılsaydı auto-fit'in işi
  elinden alınmış olurdu.

  Kural bu bloğun sonunda: özgüllüğü :has(.blk-strip-plate) ile eşit
  (sınıf + nitelik), yani kazanmasını sıra belirliyor.

  Telefonda yine de kap karar veriyor: 34rem altında dört sütun, dört tane
  okunmayan sütun demek. Ayarın anlamı "sığdığı yerde şu kadar olsun".
*/
@container (min-width: 34rem) {
  .blk-strip[data-cols] { justify-content: stretch;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}
/* Logo kendi ölçüsünü koruyor (10rem) ama artık 15rem'lik bir hücrenin
   içinde: justify-self olmadan hücrenin soluna yapışıp ızgaranın eşit
   sütunlarını yalancı çıkarıyordu. */
.blk-strip-item { margin: 0; text-align: center; max-inline-size: 10rem;
  justify-self: center; }
.blk-strip-item img { max-block-size: 4.5rem; width: auto; margin-inline: auto; }
/* Opaklık ayrı bir bildirim değil filtrenin parçası: tek bir filter zinciri
   olarak yazılınca gri tonlama ile solma birlikte okunuyor ve sonradan
   ikinci bir opaklık bildirimiyle üst üste binme ihtimali kalmıyor. Filtre
   koyu şemada da aynı: invert(1) kaldırıldı, çünkü dört logo türünden birini
   kurtarırken bir diğerini bozuyordu — koyu logoları görünür kılan şey artık
   arkalarına konan --site-plate plakası. */
.blk-strip-quiet img { filter: grayscale(1) opacity(0.7); }
.blk-strip-item figcaption { font-size: var(--step--2); color: var(--site-muted); }

/* ── kayan şerit ──────────────────────────
   Anlaşmalı kurum listesi ızgaraya sığmıyor: on beş sigorta şirketi dört
   sütunda dört satır oluyor ve bölüm sayfanın yarısını kaplıyor. Kayan
   şeritte hepsi tek satırda geçiyor ve ziyaretçi "burada bir liste var"
   bilgisini bir bakışta alıyor.

   Kenarlardaki maske kesmeyi yumuşatıyor: sert bir kenarda logolar
   "kırpılmış" değil "yarım basılmış" görünüyordu. */
.blk-marquee { overflow-x: auto; scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.blk-marquee::-webkit-scrollbar { display: none; }

.blk-marquee-track { display: flex; inline-size: max-content;
  animation: blk-marquee 42s linear infinite; }
.blk-marquee-run { display: flex; align-items: center; gap: var(--space-lg);
  padding-inline-end: var(--space-lg); }

/* Yarısı kadar kayıyor, tamamı kadar değil: ikinci kopya birincinin yerine
   geldiğinde döngü başa dönüyor ve dikiş görünmüyor. */
@keyframes blk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Okumak isteyen durdurabiliyor — fareyle üstüne gelerek ya da klavyeyle
   şeride odaklanarak. Kayan bir şeritte bir adı okumaya çalışmak, kaçan bir
   hedefi kovalamak demek. */
.blk-marquee:hover .blk-marquee-track,
.blk-marquee:focus-within .blk-marquee-track { animation-play-state: paused; }

.blk-marquee .blk-strip-item { max-inline-size: none; flex: none; }
.blk-marquee .blk-strip-item img { max-block-size: 3.25rem; }

@media (prefers-reduced-motion: reduce) {
  /* Hareket istemeyene hareket yok. Şerit kaydırılabilir kalıyor: içerik
     gizlenmiyor, yalnız kendiliğinden gitmiyor. */
  .blk-marquee-track { animation: none; }
  .blk-marquee { overflow-x: auto; scrollbar-width: thin; }
  .blk-marquee::-webkit-scrollbar { display: revert; }
}

/*
  Görselsiz öğenin plakası. Ölçü sınırı ve ortalama kalkıyor: ikisi de
  logonun altındaki yazı için doğru (dar bir sütunda ortalanmış ad), plaka
  ise adın kendi kutusu ve içeriği kadar yer kaplamalı — 10rem'e sıkışan bir
  kutu iki kelimelik bir belgeyi üç satıra bölüyordu.

  Zemin --site-soft: aynı şeridin logolarına konan --site-plate DEĞİL. O
  plaka koyu şemada logoyu görünür kılmak için var, buradaki ise yazının
  arkasındaki yüzey ve sayfanın kendi yumuşak tonunu izlemesi gerekiyor.
*/
/* Plaka hücreyi dolduruyor (sütunlar eşit, plakalar da öyle) ve içeriği
   ortalanıyor: kutu artık metninden geniş, sola yaslı bir mühür + ad ikilisi
   kutunun içinde asılı kalırdı.

   justify-self burada yeniden yazılıyor: plaka .blk-strip-item sınıfını da
   taşıyor ve oradan gelen "center", logonun kendi 10rem ölçüsü için doğru ama
   plakayı metni kadar daraltıp eşit sütunları yalancı çıkarıyordu — genişlikler
   yine içeriğe göre değişiyordu. */
.blk-strip-plate { display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; max-inline-size: none; justify-self: stretch; text-align: center;
  padding: 0.55rem 0.85rem; border: 1px solid var(--site-line);
  border-radius: var(--site-radius); background: var(--site-soft); }
/* Plakadaki yazı ikincil değil, öğenin kendisi — şeritteki logo altı
   yazısının sessizliği burada okunaksızlık olurdu. */
.blk-strip-plate figcaption { font-size: var(--step--1); color: var(--site-ink); }
.blk-strip-seal { flex: none; inline-size: 1.35rem; block-size: 1.35rem;
  fill: none; stroke: var(--site-primary-ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }

/* Seçilmiş simge. Mühürden bir tık büyük: mühür bir onay damgası, bu ise
   satırın ne anlattığını gösteren şeyin kendisi. Rengi mürekkepten değil
   ana renkten alıyor — plakadaki yazıyla aynı ağırlıkta olsaydı ikisi tek
   bir gri kütle gibi okunurdu. */
.blk-strip-icon { flex: none; inline-size: 1.5rem; block-size: 1.5rem;
  color: var(--site-primary-ink); }

/*
  Gün sola, saat sağa yaslı — klasik çalışma saati satırı. th genişliği
  içeriğe kilitleniyor (width:1% + nowrap, sütun daraltma numarası): aksi
  hâlde table-layout:auto boşluğu iki sütuna da dağıtıyor ve saat, satırın
  ortasında bir yerde asılı kalıyordu — sağ kenara değil.
*/
.blk-hours { inline-size: 100%; border-collapse: collapse; }
.blk-hours th, .blk-hours td { padding-block: 0.5rem; border-bottom: 1px solid var(--site-line); }
.blk-hours th { width: 1%; white-space: nowrap; text-align: start; font-weight: 500;
  padding-inline-end: var(--space-md); }
.blk-hours td { text-align: end; }
.blk-address { white-space: pre-line; }

/* ── iletişim: satır başı ikon, gömülü harita ──
   İkonlar blk-slot-mark ailesiyle aynı çizgi dilini konuşuyor (dolgusuz,
   yuvarlak uç) — yeni bir görsel sözlük açmıyoruz, var olanı genişletiyoruz.

   blk-heading-row'un içindeki başlığın KENDİ alt boşluğu sıfırlanıyor ve
   boşluk satırın üstüne taşınıyor — tersi denendiğinde (h2'nin marjı
   dururken align-items:center) satırın hizalama kutusu h2'nin görünmeyen alt
   marjını da sayıyordu: kutunun merkezi metnin merkezinin altında kalıyor,
   ikon de o sahte merkeze oturunca metinden düşük görünüyordu.
*/
.blk-meta { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.6rem; }
.blk-meta:last-of-type { margin-block-end: var(--space-sm); }
.blk-heading-row { display: flex; align-items: center; gap: 0.55rem; margin-block-end: var(--space-md); }
.blk-heading-row .blk-h2 { margin: 0; }
.blk-meta-icon { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.15rem;
  fill: none; stroke: var(--site-primary-ink); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.blk-heading-row .blk-meta-icon { margin-block-start: 0; inline-size: 1.5rem; block-size: 1.5rem; }

/* Harita da .blk-img'in ölçü mantığını izliyor: sabit oran, kap ne kadar
   genişse o kadar yer kaplar. Ölçüyü ve köşeyi çerçeve taşıyor, iframe değil:
   yer tutucunun tam olarak haritanın kaplayacağı yeri tutması gerekiyor,
   yoksa harita gelince sayfa zıplardı. */
.blk-map-frame { position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--site-img-radius); background: var(--site-soft); }
.blk-map { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

/* Bekleyen işaret. Sönüp yanması "yükleniyor" diyor — sabit dursaydı
   yüklenmemiş bir harita ile boş bırakılmış bir bölüm aynı görünürdü. */
.blk-map-mark { inline-size: 2.25rem; block-size: 2.25rem;
  fill: none; stroke: var(--site-primary-ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.5;
  animation: blk-map-wait 1.6s ease-in-out infinite; }
@keyframes blk-map-wait { 50% { opacity: 0.18; } }

/* Hareket kapalıysa işaret duruyor ama kalıyor: yer tutucunun asıl işi
   yeri tutmak, sönüp yanması yalnız ikinci bir ipucuydu. */
@media (prefers-reduced-motion: reduce) {
  .blk-map-mark { animation: none; }
}

/*
  Dar ekranda tek sütun (ızgaranın varsayılanı), 48rem'den sonra iki sütun.
  Ölçü artık forma sabit bir max-inline-size ile verilmiyor: kap 72rem'lik
  rayda ve iki sütuna bölününce her sütun zaten ~34rem'e düşüyor — yani eski
  ölçü korunuyor ama bölüm rayın tamamını kullanıyor.

  Mesaj alanı sağ sütunda üç satırı birden kaplıyor. Sabit satır sayısı yerine
  bunu seçmenin sebebi: soldaki üç alanın toplam yüksekliği yazı ölçeğine ve
  etiketlerin sarmasına göre değişiyor; span 3 diyerek textarea o yüksekliğe
  KENDİ uyuyor, iki sütunun alt kenarı her ölçekte aynı çizgide bitiyor.
*/
.blk-form { display: grid; gap: var(--space-sm); }
.blk-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--step--1); }

/* Alanlar geniş, cümleler değil: giriş metni ve gönderim sonrası bildirimi
   okunabilir ölçüde kalıyor. */
[data-block="contact-form"] .blk-lede,
[data-block="contact-form"] .blk-note { max-inline-size: 44rem; }

@container (min-width: 48rem) {
  .blk-form { grid-template-columns: 1fr 1fr; column-gap: var(--space-md); align-items: start; }

  /* Seçici alanın adına değil şekline bakıyor: uzun metin alanı hangi ad
     altında olursa olsun geniş olan odur.

     Yalnız klasik formda: o düzen "solda üç kısa alan, sağda mesaj" diye
     elle kurulmuş ve satır sayısı (span 3) oradaki alan sayısından geliyor.
     Alanları kullanıcının yazdığı formda ne sayı ne sıra bilinebiliyor;
     üstelik adımlı formda araya bir de "1 / 3" satırı giriyor ve sabit
     yerleşim onu ızgaranın dışına itip formu boş bir sütunla açıyordu. */
  .blk-form[data-layout="classic"] label:has(textarea) {
    grid-column: 2; grid-row: 1 / span 3; block-size: 100%; }
  .blk-form[data-layout="classic"] label:has(textarea) textarea { flex: 1; }

  /* Kullanıcının kurduğu formda uzun metin satırın tamamını alıyor; kalan
     alanlar sırasıyla iki sütuna akıyor. */
  .blk-form[data-layout="custom"] label:has(textarea) { grid-column: 1 / -1; }

  /* Onay satırı ve düğme iki sütunun altında: ikisi de tek bir alana değil
     formun tamamına ait. Düğme gerilmiyor — 72rem'lik bir "Gönder" düğmesi
     eylemi değil, kabı gösterirdi. */
  .blk-form .blk-consent, .blk-form button { grid-column: 1 / -1; }
  .blk-form button { justify-self: start; }
}
/*
  Kenarlık --site-line değil: o token tabloyu, kesikli fiyat ayıracını ve
  zaman çizgisini de çiziyor ve orada zayıf olması doğru (zemine karşı
  1.26–1.34:1 ölçüldü). Alanın kenarlığı ise dekor değil, kutunun kendisi —
  dolgusu sayfayla birebir aynı olduğu için (1.00:1) alanı gösteren tek şey o.
  WCAG 1.4.11 arayüz bileşenleri için 3:1 istiyor; --site-control-line tam
  bunun için türetiliyor ve hem alanın dolgusuna hem de zebralı bölümün
  zeminine karşı ölçülüyor.

  Dolguyu koyulaştırmak çözüm değildi: beyaz sayfada 3:1'e çıkan bir dolgu
  bağıl parlaklığı 0.30'un altında bir renk ister, yani orta gri bir metin
  kutusu. Ayrıca zebralı temada bölümün zemini --site-soft oluyor ve alanın
  dolgusuyla ilişkisi bölümden bölüme değişiyor; kenarlık iki durumda da aynı.

  Yedek --site-muted: metin eşiğini (4.5:1) geçtiği garantili olduğu için
  3:1'i de geçiyor, yani token yayımlanmadan önce de sınır görünür.
*/
.blk-form input:not([type="checkbox"], [type="radio"]),
.blk-form textarea { font: inherit; padding: 0.55rem 0.7rem;
  border: 1px solid var(--site-control-line, var(--site-muted));
  border-radius: var(--site-radius);
  background: var(--site-surface); color: inherit; min-block-size: 2.75rem; }
.blk-form textarea { min-block-size: 6rem; }

/*
  Alanın yazısı 16 pikselin altına düşmüyor.

  iOS Safari, yazı tipi 16 pikselden küçük bir alana odaklanınca sayfayı
  kendiliğinden büyütüyor ve odak kalkınca geri döndürmüyor: ziyaretçi
  randevu formunu doldurmaya başlıyor, site ekrandan taşıyor ve kalan
  alanları yatay kaydırarak arıyor. Etiketler --step--1 (dar ekranda 14px)
  ve alanlar `font: inherit` ile onu alıyordu.

  Kapatılan şey ziyaretçinin iki parmakla büyütmesi değil — o, gören
  herkesin hakkı ve az gören ziyaretçi için sitenin kullanılabilir kalmasının
  tek yolu. Ortadan kalkan şey, tarayıcının kendiliğinden yakınlaşmasını
  tetikleyen sebep.

  Seçici yukarıdaki `font: inherit` kuralıyla aynı ağırlıkta yazılmak
  zorunda: oradaki :not(...) özgüllüğü bir sınıf kadar artırıyor ve daha
  hafif bir `font-size` sessizce yeniliyordu. Açılır liste ayrıca hiçbir
  yerden yazı tipi almıyor — tarayıcının kendi ~13 pikseli de eşiğin altında.
*/
.blk-form input:not([type="checkbox"], [type="radio"]),
.blk-form select,
.blk-form textarea { font-size: max(1rem, var(--step--1)); }

/*
  ── denetimler ───────────────────────────────────────────

  Açılır liste, tarih ve dosya alanı tarayıcının kendi çizimiyle geliyordu:
  başka yükseklik, başka kenarlık, başka yazı tipi. Yan yana duran iki alandan
  biri temaya ait görünüyor, öbürü işletim sistemine.

  Denetimlerin davranışı native kalıyor — mobilde tarih için işletim
  sisteminin kendi seçicisi açılıyor, liste dokunmatikte tam ekran geliyor,
  hiçbiri betiğe bağlı değil. Değişen yalnız kutunun duruşu.
*/
.blk-control { position: relative; display: block; }

/*
  Seçici .blk-form'a değil sarmalayıcıya bakıyor. Tema forma kilitliyken
  aynı sarmalayıcıyı kullanan başka bloklar (açılış arama şeridi, açılış
  formu) tarayıcının kendi çizimiyle kalıyordu: yan yana duran iki alandan
  biri temaya ait görünüyor, öbürü işletim sistemine — üstelik ok işareti
  de biçimlenmemiş listenin dışında bir yerde asılı kalıyordu.

  .blk-control zaten tam bu iş için var (position:relative, okun çapası).
  Kural onun üstünde olmalıydı; .blk-form yazımı da duruyor, sarmalayıcısız
  bir liste ileride eklenirse temasız kalmasın.
*/
.blk-control select,
.blk-form select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit;
  inline-size: 100%; min-block-size: 2.75rem;
  /* Sağdaki boşluk okun yeri: metin okun altına girmiyor. */
  padding: 0.55rem 0.7rem; padding-inline-end: 2.6rem;
  border: 1px solid var(--site-control-line, var(--site-muted));
  border-radius: var(--site-radius);
  background: var(--site-surface); color: inherit; cursor: pointer;
}

/* Ok işaretleyici değil süs: dokunma listeye gitsin. */
.blk-control-caret {
  position: absolute; inset-inline-end: 0.85rem; inset-block-start: 50%;
  translate: 0 -50%; color: var(--site-muted); pointer-events: none;
}

/* Seçim yapılmamış liste yer tutucu tonunda: "Seçiniz" girilmiş bir cevap
   gibi okunmasın. Zorunlu ve boşken :invalid oluyor. */
.blk-control select:not(:focus):invalid,
.blk-form select:not(:focus):invalid { color: var(--site-muted); }

.blk-form input[type="date"] { inline-size: 100%; }

/* Boş tarih alanının biçim ipucu da (gg.aa.yyyy) yer tutucu tonunda. */
.blk-form input[type="date"]:not(:focus):invalid { color: var(--site-muted); }

/* Takvim düğmesi görünsün ve parmakla vurulabilsin. */
.blk-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 0.6; padding: 0.4rem; margin-inline-end: -0.25rem; }
.blk-form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/*
  Dosya alanı kesikli: içine yazı yazılan bir kutu değil, bir şey bırakılan
  bir yer. Kenarlığın dolu olduğu hâlde metin alanlarından ayırt edilmiyordu.
*/
.blk-form input[type="file"] {
  inline-size: 100%; padding: 0.45rem 0.6rem;
  border: 1px dashed var(--site-control-line, var(--site-muted));
  border-radius: var(--site-radius);
  background: var(--site-surface); color: inherit;
  min-block-size: 2.75rem; cursor: pointer;
}
.blk-form input[type="file"]::file-selector-button {
  font: inherit; font-size: max(1rem, var(--step--1));
  margin-inline-end: 0.7rem; padding: 0.4rem 0.8rem;
  border: 1px solid var(--site-control-line, var(--site-muted));
  border-radius: var(--site-radius);
  background: var(--site-soft, transparent); color: inherit; cursor: pointer;
}
.blk-form input[type="file"]::file-selector-button:hover {
  border-color: var(--site-primary-ink); color: var(--site-primary-ink); }
/*
  Seçici .blk-consent değil .blk-form .blk-consent: yalnız sınıf adı
  yazıldığında ".blk-form label" (sınıf + eleman) daha ağır kalıyordu ve
  flex-direction ile gap hiç uygulanmıyordu — onay satırı satır değil sütun
  oluyor, kutu metnin üstüne biniyordu.
*/
.blk-form .blk-consent { flex-direction: row; align-items: flex-start; gap: 0.5rem; }
/*
  Onay kutusu metin alanı değil: yukarıdaki seçici onu da yakalıyordu ve
  0.55rem dolgu + 2.75rem asgari yükseklik alıyordu. Tarayıcılar bunun ne
  kadarını uyguladığında ayrışıyor — kiminde kutu esniyor, kiminde hiç
  değişmiyor. Tıklama alanını kutu değil sarmalayan <label> veriyor zaten.
  accent-color kontrolü temaya bağlıyor; işaretin rengini tarayıcı kendi
  kontrast hesabıyla seçiyor.
*/
.blk-consent input { flex: none; inline-size: 1.15rem; block-size: 1.15rem;
  margin-block-start: 0.25rem; accent-color: var(--site-primary); }
.blk-hp { position: absolute; inset-inline-start: -9999px; }
.blk-note { background: var(--site-soft); border: 1px solid var(--site-line);
  border-radius: var(--site-radius); padding: var(--space-md); }

/* ── tema: düğme biçimi ──────────────────── */
/*
  Düğme biçimlerinin kuralları burada değil, token'larda (bkz. ButtonSystems).
  Eskiden dört nitelik seçicisi vardı ve hepsi köşe yuvarlaklığından
  ibaretti; asıl görünüm dil dosyalarındaydı ve kullanıcının seçimiyle
  çakışıyordu — editoryel dilde "hap" seçmek, altı çizili düğmenin altına
  kavis çiziyordu.

  Geriye tek bir kural kalıyor: WhatsApp düğmesi eksenin tamamen dışında.
  O yeşil marka, tema değil.
*/
.blk-wa-btn {
  border: 0;
  border-block-end: 0;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  box-shadow: none;
}
.blk-wa-btn:hover { transform: none; box-shadow: none; }

/* ── tema: bölüm ayrımı ──────────────────── */
/*
  Kendi zeminini taşıyan bölümler dışarıda: zebra onların üstüne yazarsa
  istatistik şeridi ile kampanya bandı sıradan bölüme dönerdi.

  Renkli çağrı bölümü listede yoktu ve sonucu bir bölümün sıradanlaşması
  değil, tamamen okunmaz olmasıydı: zebra zemini --site-soft yapıyor ama
  .blk-cta[data-accent="true"] kuralının verdiği açık yazı rengi yerinde
  kalıyor, yani krem zeminde beyaz yazı. Ölçüldü: 1.08–1.14:1. Zebra
  kullanan üç şablonda (bakkal doğrudan, restoran "sıcak" preset'i,
  teknik-servis "cesur" preset'i) başlık, açıklama ve telefon numarası
  görünmüyordu.

  Aynı sebeple [data-variant="boxed"] de dışarıda: o kartın kendi zemini
  zaten --site-soft (bkz. aşağıda "boxed" kuralı). Bölüm çift sıraya
  düşünce zebra ÜSTÜNE bir --site-soft daha yazıyordu — kart artık
  bölümünden hiç ayrışmıyordu, kenarlık ve gölge dışında hiçbir kontrast
  kalmıyordu. Sıra bir blok kayınca (SSS eklenip çıkarılınca gibi) bu kart
  rastgele çift/tek düşüp görünüp kaybolmamalı; zemin karta ait, bölüme
  değil.
*/
/*
  İkinci bildirim kartlar için: kartın zemini de bu bölümün zemini de
  --site-soft'tu, yani çift sıraya düşen her kart ızgarası (page-list,
  feature-grid, team-grid, collection-latest, testimonials) zeminiyle birebir aynı
  renge iniyor ve geriye yalnız kenarlık kalıyordu. Tonlu bölümde kart
  sayfanın kendi zeminine geçiyor — kontrast iki yönde de korunuyor.
  Yukarıdaki [data-variant="boxed"] istisnası aynı sorunun tek bir blok için
  elle yazılmış hâliydi.

  Değişken olarak veriliyor, karta doğrudan yazılmıyor: bu seçici kartın kendi
  kuralından ağır ve doğrudan yazsaydı kutuyu bilerek kaldıran varyantları da
  (plain, quotes, single) ezer, kaldırılan kutuyu geri getirirdi. Değişken
  yalnız varsayılanı değiştiriyor; o varyantların "background: transparent"
  bildirimi normal yoldan kazanmaya devam ediyor.
*/
[data-sections="zebra"] main > div:nth-child(even) > .blk:not(.blk-stats):not(.blk-wa):not(.blk-campaign):not(.blk-cta[data-accent="true"]):not(.blk-cta[data-variant="boxed"]):not(.blk-press[data-variant="invert"]):not(.blk-band):not(.blk-specs[data-variant="band"]):not(.blk-rule):not(.blk-scene):not(.blk-classic):not(.blk-half):not(.blk-stage2):not(.blk-svcs[data-tone="soft"]):not(.blk-specs[data-tone="soft"]):not(.blk-moments[data-tone="soft"]):not(.blk-svcs[data-overlap="true"]):not(.blk-marquee):not(.blk-stepblock[data-variant="zigzag"]):not(.blk-pulse):not(.blk-slat):not(.blk-perde) {
  background: var(--site-soft);
  --card-surface: var(--site-surface);
}
[data-sections="lined"] main > div + div > .blk {
  border-block-start: 1px solid var(--site-line);
}

/* ── üst bar ─────────────────────────────── */
/* ── alt bilgi ────────────────────────────
   İki kat: üstte sütunlar (marka + adres, bağlantılar, iletişim), altta
   tek satır telif ve yasal bağlantılar. Sütunlar içeriğe göre çıkıyor,
   auto-fit boş sütun bırakmıyor. */
/*
  Üst boşluk yok. Vardı ve son bölümün kendi alt dolgusunun (--space-lg)
  ÜSTÜNE biniyordu: iki space-lg üst üste gelince alt bilgi, biten bölümden
  bir bölüm boyu aşağıda başlıyor ve arada hiçbir şeyin olmadığı, hiçbir şey
  ayırmayan bir şerit kalıyordu. Ayrımı zaten bölümün dolgusu ile alt
  bilginin kendi zemini ve üst çizgisi yapıyor.
*/
.site-foot { background: var(--site-foot-surface); color: var(--site-foot-ink);
  border-block-start: 1px solid var(--site-foot-line);
  /* Üst bardaki gerekçenin aynısı: kendi zemini olan bir yüzeyde odak
     halkası sayfanın ana rengi olamaz, kendi zemininde kaybolur. */
  --site-focus: var(--site-foot-accent-ink);
  /* Aşağıdaki rozet kuralının kabı. Yoktu ve o kural hiç çalışmıyordu: alt
     bilgi ne .blk ne .site-head içinde, yani sorgunun bağlanacağı bir kap
     bulunmuyor ve hiçbir genişlikte eşleşmiyordu — dar ekranda rozet
     margin-inline-start:auto ile sağa yapışık kalıyordu. */
  container-type: inline-size; }

.site-foot-in { display: grid; gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

.site-foot-brand { display: flex; flex-direction: column; gap: 0.5rem; }
/*
  Logo kabı, üst bardaki .site-brand'in alt bilgideki karşılığı: plakanın
  oturacağı yer burası, görselin kendisi değil. Görsele yazılsaydı border-box
  yüzünden dolgu logoyu küçültürdü.

  Plaka ve koyu logo takası --site-foot-* değişkenlerinden geliyor (bkz.
  ThemeCss.Palette): kararı veren, sayfanın açık/koyu şeması değil alt
  bilginin kendi zemini. "contrast" duruşunda açık bir sayfanın altındaki
  bant koyu oluyor ve koyu bir logo orada kayboluyordu.

  Varsayılanlar dokunmama yönünde: tema CSS'i hiç basılmasa da alt bilgi
  eskisi gibi, tek ve dolgusuz bir logo gösteriyor.
*/
.site-foot-mark { display: inline-flex; align-items: center; align-self: start; }
.site-foot-mark[data-logo="plate"] { background: var(--site-foot-plate, transparent);
  padding: var(--site-foot-plate-pad, 0); border-radius: var(--site-radius); }

/* Koyu logo yalnız yüklendiyse devreye giriyor: kardeşi yokken açık logoyu
   gizlemek markayı komple kaybettirirdi (aynı gerekçe ThemeCss'te üst bar
   için de yazılı). */
.site-foot-mark:has(.site-foot-logo-dark) .site-foot-logo-light {
  display: var(--site-foot-logo-light, block); }
.site-foot-logo-dark { display: var(--site-foot-logo-dark, none); }

.site-foot-logo { max-block-size: 2.25rem; inline-size: auto; object-fit: contain; }
.site-foot-name { font-family: var(--site-font-heading); font-size: var(--step-1);
  font-weight: var(--site-h-weight); }

/* Adres kullanıcının yazdığı satır sonlarını koruyor: "Mahalle / İlçe"yi
   tek satıra ezmek, kartvizit gibi okunmasını bozuyor. */
.site-foot-address { font-style: normal; white-space: pre-line;
  color: var(--site-foot-muted); line-height: 1.6; }

/* Markanın altındaki tek cümle. Adresle aynı sessizlikte: alt bilginin işi
   tanıtım yapmak değil, sayfanın sonuna gelen ziyaretçiye "burası neresi"
   demek. */
.site-foot-note { margin: 0; max-inline-size: 34ch;
  color: var(--site-foot-muted); line-height: 1.6; }

.site-foot-nav, .site-foot-contact { display: flex; flex-direction: column;
  gap: 0.4rem; align-items: start; }
.site-foot-nav a, .site-foot-contact a { color: inherit; text-decoration: none; }
.site-foot-nav a:hover, .site-foot-contact a:hover { text-decoration: underline; }
.site-foot-strong { font-weight: 600; font-size: 1.0625em; }

/* Çizgi burada, yazının kabında değil: alt bilginin zemini sayfanın tamamını
   kaplıyor ve onu ikiye bölen ayıracın da o zemin kadar geniş olması gerek.
   Ölçü .blk-in'den, çizgi bu sarmalayıcıdan — biri diğerini kısaltmıyor. */
.site-foot-bar { border-block-start: 1px solid var(--site-foot-line); }
.site-foot-base { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem var(--space-md); padding-block: var(--space-sm);
  font-size: var(--step--2); color: var(--site-foot-muted); }
.site-foot-base a { color: inherit; }

/* Rozet en sağa: sitenin kendi bilgisiyle karışmasın. Sönük ama okunur —
   renk --site-muted'ten geliyor, opaklıkla soluklaştırılmıyor (0.6 opaklık
   koyu zeminde bağlantıyı 2.4:1'e düşürüyordu). */
.site-foot-badge { margin-inline-start: auto; }

/* Sütunlar hiç çıkmadıysa telif satırının üstündeki çizgi bir şeyi
   ayırmıyor; alt bilginin kendi üst çizgisiyle üst üste biniyordu. */
.site-foot > .site-foot-bar:first-child { border-block-start: 0; }

/* ── alt bilgi: panel duruşu ──────────────
   Alt bilgi iki katman: yumuşak zeminli bir panel ve altında ters renkli
   kapanış şeridi. Panelin alt köşeleri yuvarlanıyor ve kavisin arkasından
   şeridin zemini görünüyor — sayfa bir kart gibi bitiyor, düz bir kesikle
   değil.

   Zemin dağılımı ters kuruluyor: KOYU olan alt bilginin kendisi, açık olan
   panel. Tersi denenmesi bile gerekmedi — açık zemin alt bilgide olsaydı
   kapanış şeridi onun ÜSTÜNE çizilirdi ve yuvarlak köşeler şeridin altında
   kalıp hiç görünmezdi. Kavisin görünmesi için kavisin arkasında bir şey
   olması gerekiyor.

   İki zemin, iki mürekkep: şeridin yazısı panelin takımından okunamıyor
   (koyu şeritte koyu yazı). Kendi takımı ThemeCss'te ayrı ölçülüyor
   (--site-foot-base-*) ve yalnız bu duruşta basılıyor. */
.site-foot[data-stance="panel"] {
  background: var(--site-foot-base-surface);
  color: var(--site-foot-base-ink);
  border-block-start: 0;
}
.site-foot[data-stance="panel"] .site-foot-panel {
  background: var(--site-foot-surface);
  color: var(--site-foot-ink);
  /* Kavis temanın köşe ölçüsünden türüyor ama ona eşit değil: bir kartın
     köşesi ile sayfanın kapanışı aynı ölçüde olmuyor — ikincisi ekran
     genişliğinde bir yay ve aynı yarıçapta çizildiğinde hiç fark
     edilmiyor.

     Türetme ÇARPMA, toplama değil. Toplamayla yazıldığında köşeli bir
     sitede (yarıçap sıfır) sayfanın kapanışı yine de yuvarlanıyordu:
     sıfır + 2rem = 2rem. Bir site ya köşelidir ya yuvarlak; çarpma bu
     kararı bozmuyor, sıfır sıfır kalıyor. */
  border-end-start-radius: calc(var(--site-radius) * 5);
  border-end-end-radius: calc(var(--site-radius) * 5);
}
/* Çizgi de gitti: iki zemin arasındaki geçişi rengin kendisi anlatıyor ve
   üstüne bir de çizgi koymak kavisi kesiyordu. */
.site-foot[data-stance="panel"] .site-foot-bar { border-block-start: 0; }
.site-foot[data-stance="panel"] .site-foot-base { color: var(--site-foot-base-muted); }
.site-foot[data-stance="panel"] .site-foot-base a { color: inherit; }
/* Kapanış şeridi kavisin altında nefes alıyor: panelin yarıçapı kadar dikey
   pay olmazsa yay, şeridin yazısının hizasında bitiyor ve ikisi tek bir
   sıkışık satır gibi okunuyor.

   Öğeler iki uca dağılıyor: markanın işareti bir uçta, telif ve gizlilik
   öbür uçta. Hepsi sola toplandığında şerit, kavisin altında sebepsiz
   genişlikte boş bir bant gibi okunuyordu — sorun kavis değil, şeridin
   doldurulmamış olmasıydı. */
.site-foot[data-stance="panel"] .site-foot-base {
  padding-block: var(--space-md);
  justify-content: space-between;
  column-gap: var(--space-lg);
}
/* Şeritteki logo, panelin içindekinden küçük: orada markayı tanıtıyor,
   burada sayfayı imzalıyor. */
.site-foot[data-stance="panel"] .site-foot-base .site-foot-logo {
  max-block-size: 1.75rem;
}
.site-foot[data-stance="panel"] .site-foot-base .site-foot-name {
  color: var(--site-foot-base-ink);
  font-size: var(--step-0);
}

@container (max-width: 40rem) {
  .site-foot-badge { margin-inline-start: 0; }
}

/* Üst bar kendi yüzeyi: zemin, mürekkep, çizgi ve vurgu ayrı token'lardan
   geliyor. "plain" duruşunda bunlar sayfanınkilerle aynı değere çözülüyor,
   yani bugünkü görünüm bir bayt değişmiyor. */
.site-head { background: var(--site-head-surface); color: var(--site-head-ink);
  border-block-end: 1px solid var(--site-head-line);
  /* Dar ekrandaki menü paneli buna göre konumlanıyor. container-type zaten
     kapsama kuruyor ama kuralı okuyanın bunu bilmesi gerekmesin. */
  position: relative;
  /* Üst barın dört duruşunda da kendi zeminine karşı ölçülmüş tek renk bu:
     sade ve yumuşakta ana renk, ters ve markada mürekkebin kendisi. */
  --site-focus: var(--site-head-accent-ink);
  /* Menünün ne zaman katlanacağına bu kap karar veriyor. Dosyanın kuralı
     "breakpoint yazma" — ama menünün sığıp sığmadığı gerçek bir ölçü sorusu,
     tema ayarı değil. Kap sorgusu, viewport medya sorgusundan daha dar bir
     söz veriyor: kararı header'ın kendi genişliği veriyor. */
  container: site-head / inline-size; }

/* ── mobil menü ───────────────────────────
   Dar ekranda menü düğmenin arkasına giriyor ve açılınca kendi satırına
   iniyor; geniş ekranda düğme yok, panel satır içi. Aynı işaretleme, iki
   duruş — ikinci bir menü kopyası yok. */
.site-menu-toggle { display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; padding: 0; order: 1;
  border: 0; border-radius: var(--site-radius);
  background: transparent; color: var(--site-head-ink); cursor: pointer; }
.site-menu-toggle:hover { color: var(--site-head-accent-ink); }
.site-menu-close { display: none; }
.site-menu-toggle[aria-expanded="true"] .site-menu-open { display: none; }
.site-menu-toggle[aria-expanded="true"] .site-menu-close { display: block; }

.site-menu { display: none; order: 3; flex-basis: 100%; }
.site-menu[data-open] { display: flex; flex-direction: column; align-items: stretch;
  gap: var(--space-sm); padding-block-end: var(--space-sm); }
.site-menu[data-open] .site-nav { flex-direction: column; gap: 0; align-items: stretch; }
.site-menu[data-open] .site-nav a { padding-block: 0.15rem; }

@container site-head (min-width: 48rem) {
  .site-menu-toggle { display: none; }

  /* İki seçici birden: dar ekranda açık kalmış bir panelin duruşu geniş
     ekrana taşınmasın. margin-inline-start:auto ikisini de sağa itiyor —
     space-between'in dağıtacağı boşluk kalmıyor. */
  .site-menu, .site-menu[data-open] {
    display: flex; flex-direction: row; align-items: center;
    gap: var(--space-md); order: 1; flex-basis: auto;
    margin-inline-start: auto; padding-block-end: 0;
  }
  .site-menu[data-open] .site-nav { flex-direction: row; gap: var(--space-md); }
  .site-head-end { order: 2; }
}
.site-head-in { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  align-items: center; justify-content: space-between; padding-block: 0.9rem; }

/* ── menünün yeri ─────────────────────────
   Logonun yerinden ayrı bir soru ve ayrı bir ayar: logosu solda, menüsü
   ortada, düğmesi sağda duran üst bar yaygın bir düzen ve tek bir
   "hizalama" ayarıyla anlatılamıyor.

   Taban kural (yukarıdaki .site-menu) menüyü otomatik payla sağa itiyor.
   Burada yapılan tek şey o payı iki yana ya da hiçbir yana vermek; taşıma
   işini flex'in kendisi yapıyor, sabit bir ölçü yazılmıyor.

   Yalnız geniş ekranda: dar ekranda menü zaten kendi paneline iniyor ve
   orada ortalanmış bir menü, düğmenin altında asılı kalırdı. */
@container site-head (min-width: 48rem) {
  .site-head[data-nav-position="center"] .site-menu { margin-inline: auto; }
  .site-head[data-nav-position="start"] .site-menu { margin-inline-start: var(--space-md); margin-inline-end: auto; }
}

/* ── şeritsiz üst bar ─────────────────────
   Beşinci duruş. Öbür dördü "zeminin hangi renk" diye soruyor; bu "zemin
   var mı" diye soruyor ve cevabı sayfanın nerede olduğuna göre değişiyor:
   tepede yok, kaydırıldıktan sonra var.

   Neden ikisi birden: zemini olmayan bir üst bar tepede güzel duruyor —
   logo, menü ve düğme sayfanın kendi zemininde yüzüyor. Ama YAPIŞKAN bir
   üst bar kaydırıldığında altından içerik geçiyor ve zeminsiz bir bantta
   menü, altından geçen fotoğrafın üstünde okunmuyor. Ölçüldü: yapışkan
   sahnenin şeridi ("YUMUŞAK DOKU · KEMİK VE AKCİĞER") ile üst barın menüsü
   aynı piksellerde üst üste bindi.

   Bu yüzden zemin kaydırmayla kazanılıyor ve kuralın tamamı @supports
   altında: zaman çizgisini tanımayan tarayıcıda bant HER ZAMAN var, yani
   duruş sessizce "plain"e düşüyor. Yanlış tarafa düşmek okunmayan bir menü
   demekti; doğru taraf, fazladan bir bant.

   Kırpma değil zemin animasyonu: steps(1, end) ile ara değer yok — yarı
   saydam bir bant, altından geçen fotoğrafla karışıyor. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-head[data-stance="clear"] {
      animation: site-head-solid steps(1, end) both;
      /* scroll(), scroll(root) DEĞİL: "root" bu belgede kaydırma kabına
         çözülmüyor ve zaman çizgisi tek bir değerde donuyor (ölçüldü:
         currentTime kaydırmayla hiç değişmedi, %6'da kaldı). Bandın akışta
         kalmasının ikinci sebebi bu — en yakın kaydırma kabı sayfanın
         kendisi ve soru ancak öğe akıştayken doğru cevaplanıyor. */
      animation-timeline: scroll();
      animation-range: 0 4rem;
    }
  }
}
@keyframes site-head-solid {
  from { background: transparent; border-block-end-color: transparent; }
  to { background: var(--site-head-surface); border-block-end-color: var(--site-head-line); }
}

/*
  Şeritsiz üst bar açılışın ÜSTÜNE biniyor: saydamlığın görünmesi için
  arkasında sayfanın zemininden başka bir şey olması gerekiyor.

  Akıştan çıkıyor, yani altındaki bölüm sayfanın tepesinden başlıyor. Yapışkan
  değilse "absolute": bar sayfayla birlikte yukarı kayıp gidiyor, seçim
  onurlandırılıyor.

  Ölçü tek yerde ve logonun boyuna bağlı: üç logo boyu üç farklı bant
  yüksekliği demek ve pay yanlış hesaplanırsa ya açılışın üstünde ince bir
  şerit boşluk kalıyor ya da başlık barın altında.
*/
:root { --site-head-h: 4.6rem; }
:root:has(.site-head[data-logo-size="small"]) { --site-head-h: 4.25rem; }
:root:has(.site-head[data-logo-size="large"]) { --site-head-h: 5.75rem; }

/*
  Bar AKIŞTA kalıyor; üstüne binen şey açılış. Denenen ve vazgeçilen yol
  barı akıştan çıkarmaktı (position: fixed) ve tek satırda çöktü:
  akıştan çıkmış bir öğede kaydırma zaman çizgisi ölü doğuyor
  (timeline.currentTime === null, ölçüldü), yani bandın kaydırınca
  kazanılması hiç çalışmıyor. Barı yerinde bırakıp açılışı yukarı çekmek
  aynı görüntüyü veriyor ve zaman çizgisini bozmuyor.

  Çekme yalnız sahne açılışında: iletişim sayfası "location" ile, gizlilik
  "rich-text" ile başlıyor ve onların ilk satırı barın altında kalırdı.
  Öbür açılış blokları da muaf değil — yazılarını farklı yerlerde taşıyorlar
  ve hepsini tek tek denemeden üstlerine bar koymak, göremediğim bir
  çakışmayı yayına almak olurdu.
*/
.site-head[data-stance="clear"] { position: relative; z-index: 10; }
.site-head[data-stance="clear"] + main:has(> div:first-child > .blk-hero-stage) {
  margin-block-start: calc(-1 * var(--site-head-h));
}
/* Sahnenin fotoğrafı barın altından geçiyor ama YAZISI geçmiyor. */
.site-head[data-stance="clear"] + main > div:first-child > .blk-hero-stage .blk-stage-head {
  padding-block-start: calc(var(--space-md) + var(--site-head-h));
}

/* Dev kelimeli açılış da barın altından başlıyor. Farkı: orada zemin içteki
   panelde, burada bölümün kendisinde — o yüzden payı iç şeride değil bölüme
   koyuyoruz, yoksa renk barın bittiği yerde başlıyor. */
.site-head[data-stance="clear"] + main:has(> div:first-child > .blk-wordhero) {
  margin-block-start: calc(-1 * var(--site-head-h));
}
.site-head[data-stance="clear"] + main > div:first-child > .blk-wordhero {
  padding-block-start: calc(var(--space-lg) + var(--site-head-h));
}

/*
  Saydam bardaki perde. Bandın kendi zemininin sönen hâli — sabit bir siyah
  değil: mürekkep ile zemin arasındaki kontrast bandın dört duruşunda da
  ölçülmüş durumda ve perde o zeminden türeyince koyu temada da, açık
  temada da aynı payı koruyor. Sabit siyah yazılsaydı koyu temanın açık
  mürekkebi siyah perdenin üstünde kaybolurdu.

  Neden gerekiyor: referansın videosu her zaman açık, bizim şablonu kullananın
  açılış fotoğrafı bilinmiyor. Denendi — MR karesinin koyu tavan köşesinde
  logo tamamen kayboldu.

  Bant zeminini kazanınca perde kalkıyor; kalsaydı bandın altında sebepsiz
  bir tül kuyruğu kalırdı. Desteklemeyen tarayıcıda hiç çizilmiyor, çünkü
  orada bant zaten her zaman opak.
*/
.site-head[data-stance="clear"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  /* Uzun ve zayıf: kısa ve güçlü bir perde bandın kendisi gibi duruyor,
     yani kaldırdığımız şeyi geri koyuyor. Buradaki iş bandı geri getirmek
     değil, barın oturduğu yeri bir tık aydınlatmak. Oran ölçüldü: %62 krem,
     yakın siyah bir fotoğrafın üstünde bile koyu mürekkebe 5:1'in üstünde
     pay bırakıyor. */
  block-size: calc(var(--site-head-h) * 2.4);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--site-head-surface) 62%, transparent),
    color-mix(in srgb, var(--site-head-surface) 28%, transparent) 45%,
    transparent);
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-head[data-stance="clear"]::before {
      animation: site-head-veil steps(1, end) both;
      animation-timeline: scroll();
      animation-range: 0 4rem;
    }
  }
}
@keyframes site-head-veil {
  from { opacity: 1; }
  to { opacity: 0; }
}

/*
  Menü açıkken bar saydam kalamaz: açılan liste, altından geçen açılış
  fotoğrafının üstünde okunmaz.

  Yapılan tek şey animasyonu durdurmak: taban kural zaten bandın zeminini
  yazıyor, perdenin duran hâli de zaten saydam. Zemini burada ikinci kez
  yazmak, animasyonu !important ile ezmek demekti.
*/
.site-head[data-stance="clear"]:has(.site-menu[data-open]),
.site-head[data-stance="clear"]:has(.site-menu[data-open])::before {
  animation-name: none;
}


/*
  Kenardan kenara üst bar. Bölümlerin "Genişlik" alanıyla aynı mekanizma
  (.blk[data-width="full"]) ve aynı gerekçe: fotoğrafı ekranın kenarına
  dayayan bir sayfada 72rem'lik rayda kalan bir üst bar, altındaki bölümden
  dar duruyor ve ikisi iki ayrı sayfa gibi okunuyor.

  Ray kalkıyor, kenar boşluğu KALIYOR: ekranın kenarına yapışmış bir logo
  ile hemen yanındaki menü, tam kanal değil kırpılmış görünür.
*/
.site-head[data-width="full"] .site-head-in { max-width: none; }
/* inline-flex, plaka için: satır içi bir bağlantıda dikey iç boşluk
   kutunun dışına taşar ve zemin logoyu sarmazdı. */
.site-brand { display: inline-flex; align-items: center;
  font-family: var(--site-font-heading); font-weight: 600;
  color: var(--site-head-ink); text-decoration: none; }
.site-brand img { max-block-size: var(--site-logo-height); width: auto; }
.site-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/*
  Dar ekran. İki şey aynı sebepten bozuktu: marka, düğmeler ve panel tek bir
  saran flex satırındaydı.

  · Marka + randevu düğmesi + tema + menü 390 pikselde sığmıyor ve başlık
    sessizce iki kata çıkıyordu (logo bir satır, düğmeler bir satır).
  · Panel açılınca üçüncü satır olarak başlığa ekleniyor ve başlık 490
    piksele uzuyordu; listeye ulaşmak için sayfayı kaydırmak, kaydırırken de
    hedefin altından kaçması demek.

  Çözüm ikisini ayırmak: satır sarmıyor, panel akışın dışına çıkıp başlığın
  altına açılıyor ve taşarsa kendi içinde kayıyor.
*/
@container site-head (max-width: 47.99rem) {
  /* Seçicilerin hepsi .site-head ile başlıyor. Konteyner sorgusu özgüllük
     eklemiyor ve bu bloktaki kuralların bir kısmı dosyada temel
     bildirimlerden önce kalıyordu: aynı ağırlıktaki sonraki kural sessizce
     kazanıyor, flex-wrap:nowrap hiç uygulanmıyordu. */
  .site-head .site-head-in { flex-wrap: nowrap; column-gap: var(--space-sm); }

  /* Sıkışan taraf marka: logo oranını koruyarak küçülüyor. Dokunma
     hedefleri (randevu, tema, menü) hiç küçülmüyor — 44 pikselin altına
     inen bir düğme, sığdırılmış değil ıskalanan bir düğmedir. */
  .site-head .site-brand { min-inline-size: 0; flex: 0 1 auto; overflow: hidden; }
  .site-head .site-brand img { max-inline-size: 100%; }
  .site-head .site-head-end { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--space-xs); }
  .site-head .site-action { padding-inline: var(--space-sm); }

  /*
    Alt menü katlanıyor.

    Eskiden hep açıktı ve kapatmanın tek yolu başlığa dokunmaktı — dokunan
    kişi listenin kapanmasını beklerken üst sayfaya gidiyordu. Artık başlık
    yalnız bağlantı (o da bir sayfa), katlama işi yanındaki okta.

    Yalnız [data-nav-group] taşıyanlar: dil değiştirici de aynı sınıfları
    kullanıyor ama katlama düğmesi yok, kapalı kalırsa hiç açılmazdı.
  */
  .site-head .site-nav-toggle { display: inline-flex; }

  .site-head .site-nav-group[data-nav-group] {
    display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .site-head .site-nav-group[data-nav-group] > a { grid-column: 1; }
  .site-head .site-nav-group[data-nav-group] > .site-nav-toggle { grid-column: 2; }

  /* Başlığın içindeki ok süs; dar ekranda görevi düğmedeki ok devralıyor. */
  .site-head .site-nav-group[data-nav-group] > a > .site-nav-caret { display: none; }

  .site-head .site-nav-group[data-nav-group] > .site-nav-sub {
    grid-column: 1 / -1; display: none; }
  .site-head .site-nav-group[data-nav-group][data-open] > .site-nav-sub { display: flex; }
  .site-head .site-nav-toggle[aria-expanded="true"] .site-nav-caret { transform: rotate(180deg); }

  .site-head .site-menu {
    position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 12;
    background: var(--site-head-surface); color: var(--site-head-ink);
    border-block-end: 1px solid var(--site-head-line);
    box-shadow: 0 10px 24px -18px rgb(0 0 0 / 0.5);
    padding: var(--space-sm) var(--space-md) var(--space-md);

    /* Uzun menü ekranı taşmasın: panelin kendisi kayıyor, sayfa değil. */
    max-block-size: min(70dvh, 34rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
}

/*
  Telefon: tema düğmesi başlıktan düşüyor, menü panelindeki ikizine.

  Sırayla feda edilecek şeylerin en ucuzu o. Randevu düğmesi menüye
  inemiyor (inmesi istenirse bunu satırın kendisi söylüyor, data-mobile) ve
  logo okunmak zorunda; tema tercihi ise menünün içinde yazısıyla birlikte
  duruyor ve orada bir ay ikonundan daha anlaşılır.

  Sınır menünün katlandığı yerle aynı (48rem): eskiden 27rem'di ve
  aradaki her genişlikte — 432px ile 768px arası, yani yatık telefonların
  ve dar pencerelerin tamamı — düğme başlıkta kalıyor, menüde ise hiç
  görünmüyordu. İki ayrı sınır iki ayrı soruya cevap veriyormuş gibi
  duruyordu ama soru tek: menü katlandı mı.
*/
@container site-head (max-width: 47.99rem) {
  .site-head-end .site-theme { display: none; }
}



/* Sabit üst bar. Kaydırma hedefleri başlığın altında kalmasın diye
   scroll-padding da veriliyor — çapa bağlantısı tıklandığında başlık
   içeriğin üstünü örtüyordu. */
.site-head[data-sticky="true"] { position: sticky; inset-block-start: var(--preview-bar); z-index: 10; }
:root:has(.site-head[data-sticky="true"]) { scroll-padding-block-start: calc(5rem + var(--preview-bar)); }

/* ── önizleme şeridi ──
   Yalnız panelden açılan önizlemede: sayfa canlı değilse bunu sayfanın
   kendisi söylemeli. Yayındaki sitede `--preview-bar` sıfır, yani yukarıdaki
   iki kural olduğu gibi kalıyor ve şerit hiç DOM'a girmiyor.

   Sabit konum bilerek: akışa girseydi kaydırınca kaybolur ve ikinci sayfada
   kullanıcı yine neye baktığını bilmezdi. Yapışkan üst bar da onun altına
   iniyor, yoksa ikisi üst üste biniyor. */
:root { --preview-bar: 0px; }
:root[data-preview-bar="true"] { --preview-bar: 2.5rem; }
:root[data-preview-bar="true"] body { padding-block-start: var(--preview-bar); }

/* ── katalog örneği ──
   Panelde "bölüm ekle" penceresi tek bir bölümü kendi başına gösteriyor.
   Sayfanın çerçevesi orada gürültü: dar bir çerçevede üst bar ve alt bilgi,
   bakılan şeyin yarısını yiyordu — üstelik ikisi de o pencerede seçilen şey
   değil. Sayfa yine olağan yolundan çiziliyor, yalnız çerçevesi görünmüyor. */
:root[data-sample="true"] .site-head,
:root[data-sample="true"] .site-quickbar,
:root[data-sample="true"] .site-foot,
:root[data-sample="true"] .site-fab,
:root[data-sample="true"] .cookie-note { display: none; }

/* Bölüm kendi boşluğunu zaten taşıyor; üstüne bir de sayfa payı binince
   çerçevede ortalanmış gibi durmuyordu. */
:root[data-sample="true"] body { padding-block: 0; }

/* Bu şerit panelin önizleme kartındaki şeridin aynısı ve öyle kalmalı: aynı
   uyarı iki ayrı yerde iki ayrı tasarımla çıkınca, kullanıcı ikisini iki ayrı
   şey sanıyor. Değerler admin.css'teki `.preview-note` ile birebir — iki ayrı
   uygulama, iki ayrı stil dosyası, tek görünüm. Birini değiştiren ötekini de
   değiştirmeli.

   Renk sarı ailesinden: grisi vardı ve sitenin bir parçası gibi okunuyordu.
   Kırmızı değil — ortada bir hata yok, dikkat edilmesi gereken bir durum var.
   Taslak ile geçmiş sürüm aynı tonda: farkı renk değil, şeridin cümlesi
   söylüyor. */
.preview-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  block-size: var(--preview-bar);
  display: flex; align-items: center;
  gap: 0.35rem;
  padding-inline: var(--space-md);
  background: #fdf1d8; color: #6b4a05;
  border-block-end: 1px solid color-mix(in srgb, #9a6300 32%, transparent);
  font-size: 0.8125rem; line-height: 1.45;
}
.preview-bar-in { display: flex; align-items: center; gap: 0.35rem;
  inline-size: 100%; overflow: hidden; white-space: nowrap; }
.preview-bar-eye { flex: none; inline-size: 0.875rem; block-size: 0.875rem;
  color: #9a6300; }
.preview-bar-tail { color: #8a6318; overflow: hidden; text-overflow: ellipsis; }
.preview-bar-link { flex: none; margin-inline-start: auto; color: #6b4a05;
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Dar ekranda ikinci cümle düşüyor; şeridin işi tek satırda bitmeli. */
@media (max-width: 40rem) {
  .preview-bar-tail { display: none; }
}

/* Telefon: metin numara, ikon yalnız işaret. Dar ekranda numara gizlenip
   ikon kalıyor — tıkla-ara yine çalışıyor, yer kaplamıyor. */
.site-phone { display: inline-flex; align-items: center; gap: 0.4rem;
  min-block-size: 2.75rem; text-decoration: none; font-weight: 500;
  color: var(--site-head-ink); white-space: nowrap; }
.site-phone:hover { color: var(--site-head-accent-ink); }

/* İki satırlı hâli: etiket üstte sönük ve küçük, numara altta kalın.
   Simge iki satırın ortasında hizalanıyor — üste yaslandığında etiketin
   yanında duran yalnız bir nokta gibi görünüyor.

   Etiket VAR olduğunda satır yüksekliği kısalıyor (1.15): iki satır
   varsayılan aralıkla 44 pikselden uzun oluyor ve barı büyütüyordu. */
.site-phone-lines { display: inline-flex; flex-direction: column; }
.site-phone[data-lines="two"] .site-phone-lines { line-height: 1.15; }
.site-phone-label { font-size: var(--step--2); font-weight: 400;
  color: var(--site-head-muted); }
.site-phone[data-lines="two"] .site-phone-number { font-weight: 600; }

@container site-head (max-width: 34rem) {
  .site-phone .site-phone-lines { position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); }
}

/*
  Ekran okuyucunun okuduğu, gözün görmediği başlık. Yalnız bir yerde
  kullanılıyor: sayfanın ilk bölümünün kendi başlığı yoksa sayfa hiç h1
  taşımıyordu ve belge yapısı h2'den başlıyordu. Görünür bir başlık eklemek
  sayfanın tasarımını değiştirmek olurdu; eksik olan şey görüntü değil yapı.
*/
.blk-page-title { position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0; }

/* Eylem düğmesi: menüden ayrı. Üst barın kendi vurgusunu kullanıyor —
   marka rengine boyanmış bir başlıkta ana renk düğme görünmez olurdu.

   Yazı bandın zemini değil, vurgunun üstündeki mürekkep. Zemin yazılıyken
   açık bantta doğru sonuç veriyordu (beyaz bandın lacivert düğmesinde beyaz
   yazı) ama koyu bantta ikisi de koyu oluyor ve düğmenin yazısı kendi
   zemininde kayboluyordu — 1.16:1. Hesap ThemeBar'da (bkz. OnAccent). */
/* Yarıçap DÜĞME belirtecinden: --site-radius yüzeylerin (kart, görsel,
   panel) yarıçapı, düğmenin değil. Köşeli düğme kullanan bir görsel dilde
   ikisi ayrışıyor ve üst bardaki tek düğme sitedeki bütün öbür düğmelerden
   farklı duruyordu. Belirteç tanımsızsa eski davranışa düşüyor. */
.site-action { display: inline-flex; align-items: center; min-block-size: 2.75rem;
  padding-inline: 1rem; border-radius: var(--btn-radius, var(--site-radius));
  background: var(--site-head-accent); color: var(--site-head-on-accent);
  text-decoration: none; font-weight: 500; white-space: nowrap; }

/* İkinci düğme dolgusuz: iki dolu düğme yan yana iki eşit vurgu demek ve o
   noktada hangisinin asıl iş olduğu kayboluyor. Çerçeve onu ikinci sıraya
   koyuyor ama görünür tutuyor — kenarlık üst barın vurgusundan geliyor,
   yani bandın duruşu ne olursa olsun okunur kalıyor. */
.site-action-extra { background: transparent; color: var(--site-head-accent-ink);
  box-shadow: inset 0 0 0 1px var(--site-head-accent-ink); }

/* Menü panelindeki ikiz. Kural .site-action'ın ARDINDA: ikisi de tek sınıf,
   yani aynı özgüllükte ve önce yazılsaydı .site-action'ın inline-flex'i onu
   ezer, düğme masaüstünde de görünürdü — aynı tuzak .site-theme-in-menu'de
   bir kez yaşandı. */
.site-action-in-menu { display: none; }

@container site-head (max-width: 47.99rem) {
  /* Dar ekran: hangi düğmenin üst barda kalacağını düğmenin kendi ayarı
     söylüyor. Eskiden kural sıraydı — "ikinci düğme menüye" — ve CSS'te
     gömülüydü: panelde görünmüyordu, değiştirilemiyordu.

     "menu" diyen düğme buradan kalkıyor, panelin en üstündeki ikizi
     görünüyor; "hidden" diyen hiçbir yerde görünmüyor. Üç düğme, telefon
     numarası, tema ve menü düğmesi tek satıra sığmıyor ve sıkışan taraf hep
     marka oluyordu — karar bu yüzden gerçek bir karar.

     :has koşulu şart: menüsüz bir sitede ikiz hiç basılmıyor (bkz.
     Site.cshtml) ve düğmeyi burada gizlemek onu bütünüyle kaybetmek olurdu. */
  .site-head:has(.site-menu) .site-head-end .site-action[data-mobile="menu"] { display: none; }
  .site-head .site-head-end .site-action[data-mobile="hidden"] { display: none; }

  /* Panelde satırın tamamını kaplıyor: sıra hâlindeki bağlantıların üstünde
     yarım genişlikte duran bir düğme, menünün parçası değil de oraya düşmüş
     gibi okunuyordu. */
  .site-menu[data-open] .site-action-in-menu {
    display: inline-flex; justify-content: center; inline-size: 100%;
    margin-block-end: var(--space-xs); }
}

/* Açık/koyu düğmesi. Dil değiştiriciyle aynı sessizlikte: üst barın işi
   gezinme, tema tercihi ikincil bir ayar.

   Varsayılan durum açık tema — ay görünür, güneş gizli. Koyu şemada bu
   üretilen CSS'te tersine dönüyor; JavaScript ikonla hiç ilgilenmiyor. */
.site-theme { display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
  border: 0; border-radius: var(--site-radius);
  background: transparent; color: var(--site-head-muted); cursor: pointer; }
.site-theme:hover { color: var(--site-head-accent-ink); }
.site-theme-sun { display: none; }

/*
  Tema düğmesinin panel içindeki ikizi. Menü katlandığı anda devralıyor:
  üst bardaki düğme aynı sınırda düşüyor (yukarıya bkz.), yani ikisinden
  hep tam olarak biri duruyor.

  Kural .site-theme'in ARDINDA: ikisi de tek sınıf, yani aynı özgüllükte.
  Önce yazıldığında .site-theme'in display:inline-flex'i onu eziyor ve düğme
  masaüstünde de görünüyordu — bir kez oldu, bir daha olmasın.

  Panelin içinde bir satır olduğu için yazısı da var: sıra hâlindeki
  bağlantıların arasında yalnız bir ay ikonu ne olduğunu söylemiyor.
*/
.site-theme-in-menu { display: none; }

@container site-head (max-width: 47.99rem) {
  .site-menu[data-open] .site-theme-in-menu {
    display: inline-flex; gap: 0.5rem; inline-size: 100%;
    justify-content: flex-start; padding-block: 0.55rem; }
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ── alt menü ─────────────────────────────
   Dar ekranda açık duruyor: menü paneli zaten kayabiliyor ve dokunmatik
   cihazda "üstüne gelmek" diye bir şey yok. Geniş ekranda açılıyor. */
/* Alt menüyü katlayan ok. Varsayılanı kapalı: geniş ekranda menü zaten
   üstüne gelince açılıyor, düğmenin işi yok. Dar ekranda açılıyor. */
.site-nav-toggle { display: none; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
  border: 0; border-radius: var(--site-radius);
  background: transparent; color: inherit; cursor: pointer; }

.site-nav-group { display: flex; flex-direction: column; }
.site-nav-group > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.site-nav-caret { flex: none; opacity: 0.6; }

.site-nav-sub { display: flex; flex-direction: column; }
.site-nav-sub a { padding-block: 0.15rem; padding-inline-start: var(--space-md);
  font-size: 0.9375em; color: var(--site-head-muted); text-decoration: none; }
.site-nav-sub a:hover { color: var(--site-head-accent-ink); }

@container site-head (min-width: 48rem) {
  .site-nav-group { position: relative; }
  .site-nav-caret { transition: transform 140ms ease; }

  /* Açılan katman: kapanma niyetiyle fareyi çekerken aradaki boşlukta
     kaybolmasın diye üst öğeye bitişik duruyor (üstten boşluk yok). */
  .site-nav-sub {
    position: absolute; inset-block-start: 100%; inset-inline-start: -0.75rem;
    z-index: 40; min-inline-size: 11rem; padding: 0.4rem;
    background: var(--site-head-surface); color: var(--site-head-ink);
    border: 1px solid var(--site-head-line); border-radius: var(--site-radius);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
    opacity: 0; visibility: hidden; transform: translateY(-0.25rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  }
  .site-nav-sub a { padding: 0.4rem 0.6rem; padding-inline-start: 0.6rem;
    border-radius: calc(var(--site-radius) * 0.6); }
  /* Hover zemini bandın KENDİ mürekkebinin soluk hâli, sayfanın yumuşak
     zemini değil. --site-soft sayfaya göre hesaplanıyor ve marka rengine
     boyanmış ya da ters çevrilmiş bir bantta neredeyse beyaza çıkıyordu;
     yazının rengi ise (.site-nav a:hover) bandın takımından geldiği için
     orada da beyaz — beyaz zeminde beyaz yazı. Aynı hata dil değiştiricide
     bir kez daha yapılmış ve orada da aynı biçimde düzeltilmişti.

     Yazının rengi burada hiç yazılmıyor: .site-nav a:hover zaten doğru
     takımdan veriyor ve ikinci bir yerde tekrarlamak, ikisi ayrışana kadar
     doğru duran bir satır bırakmak olurdu. */
  .site-nav-sub a:hover {
    background: color-mix(in srgb, currentColor 14%, transparent); }

  /* focus-within klavyeyi de kapsıyor: sekme ile gezen biri alt öğelere
     ulaşabilmeli. */
  .site-nav-group:hover .site-nav-sub,
  .site-nav-group:focus-within .site-nav-sub {
    opacity: 1; visibility: visible; transform: none;
  }
  .site-nav-group:hover .site-nav-caret,
  .site-nav-group:focus-within .site-nav-caret { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-sub, .site-nav-caret { transition: none; }
}

/* ── logo: boyut, konum, koyu varyant ────── */
/*
  Boyut niteliği element belirtmeden yazılıyor: yalnız bir özel özellik set
  ediyor ve o zaten aşağı akıyor — nitelik başlıkta da gövdede de olsa
  logoya ulaşır.
*/
[data-logo-size="small"] { --site-logo-height: 2rem; }
[data-logo-size="normal"] { --site-logo-height: 2.5rem; }
[data-logo-size="large"] { --site-logo-height: 3.5rem; }

/* Sağda: yer değiştiren tek şey sıra. row-reverse satır kaydığında
   sarmalamayı da ters çeviriyordu; order o yan etkiyi getirmiyor. */
.site-head[data-logo-position="end"] .site-brand { order: 2; }

/* Ortada: logo kendi satırında, menü altında. Butik ve kafe şablonlarında
   en çok istenen görünüm. */
/*
  Ortalı logo: marka bir satır, menü bir satır. Üç şey birden gerekiyordu
  ve ikisi eksikti.

  · Kural artık yalnız geniş ekranda: dar ekranda üst bar sıkışık bir satır
    ve hamburger düğmesi olmak zorunda, sütuna dönünce marka, menü ve
    düğmeler alt alta dizilip telefonun yarısını yiyordu.

  · Menü satır düzeninde sağa yaslanmak için otomatik pay taşıyor
    (bkz. yukarıdaki .site-menu kuralı, margin-inline-start:auto). Sütun
    düzeninde o pay altı yüz pikselden büyük SABİT bir boşluğa dönüşüyor:
    menü rayın dışına kaçıyor ve align-items:center hiçbir şey yapamıyor.
    Ölçüldü — 1152 piksellik rayda menünün sol payı 634 piksel.

  · Taban kuralın justify-content:space-between'i sütunda dikey eksene
    geçiyor ve üç satırı birbirinden ayırıyordu; bant gereksiz yere
    uzuyordu.
*/
@container site-head (min-width: 48rem) {
  /*
    İki satır, üç değil: marka üstte, menü ve düğmeler altta YAN YANA.
    Sütuna çevirmek her çocuğu kendi satırına atıyordu ve üçüncü satırda
    tek başına bir düğme kalıyordu — bant gereksiz yere üç kat yükseliyordu.
    Satır düzeninde kalıp yalnız markaya tam genişlik vermek, sarmanın
    gerisini kendiliğinden doğru yapmasını sağlıyor.
  */
  .site-head[data-logo-position="center"] .site-head-in {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-xs);
  }
  .site-head[data-logo-position="center"] .site-brand {
    flex-basis: 100%;
    justify-content: center;
  }
  .site-head[data-logo-position="center"] .site-menu { margin-inline: 0; }
  .site-head[data-logo-position="center"] .site-menu,
  .site-head[data-logo-position="center"] .site-nav,
  .site-head[data-logo-position="center"] .site-head-end { justify-content: center; }
}

/*
  İki logo da HTML'e basılıyor, hangisinin görüneceğine CSS karar veriyor —
  JavaScript yok. Kararın kendisi ThemeCss'te ölçülüyor ve buraya iki
  değişken olarak geliyor (--site-head-logo-*): soru "sayfa koyu mu" değil,
  "ÜST BAR koyu mu". Açık bir sayfanın üstüne konan "contrast" bandı da koyu
  bir banttır ve koyu logoyu isteyen odur — katalogdaki elli altı şablonun
  yirmi dördü o duruşta ve hepsi açık logoyu koyu bantta gösteriyordu.

  ":has" şart: koyu logo yüklenmemişken açık olanı gizlemek markayı komple
  kaybettirirdi. Alt bilgideki ikizi .site-foot-mark kuralında.
*/
.site-brand:has(.site-logo-dark) .site-logo-light {
  display: var(--site-head-logo-light, block); }
.site-logo-dark { display: var(--site-head-logo-dark, none); }

/*
  Koyu ve şeffaf bir logonun arkasındaki açık plaka. İki ayrı soru, iki ayrı
  yer: plakanın GEREKLİ olduğunu sunucu söylüyor (data-logo="plate", yayın
  anında ölçülmüş parlaklık ve şeffaflık), bu bandın zemininde çizilip
  çizilmeyeceğini --site-head-plate söylüyor (bkz. ThemeCss.Palette).

  Bandın kendi zemininde, yine: koyu logonun yüklenmediği bir sitede tek
  çare bu — açık logo diye bir dosya yokken lacivert bir bandın üstünde
  lacivert bir logo, "logo yok" ile aynı şey.

  Varsayılanlar dokunmama yönünde: tema CSS'i hiç basılmasa da logo eskisi
  gibi, plakasız ve dolgusuz duruyor.
*/
.site-brand[data-logo="plate"] {
  background: var(--site-head-plate, transparent);
  padding: var(--site-head-plate-pad, 0);
  border-radius: var(--site-radius); }

/* Dil değiştirici: menüden ayrı dursun, ama menü kadar bulunur olsun. */
.site-langs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/*
  Seçili dili gösteren tek görsel işaret --site-soft zemindi ve o zemin
  sayfadan yalnız 1.04–1.14:1 ayrışıyor, yani pratikte yok. Geriye kalan
  ipucu (koyu renk + kalın yazı) metnin kendisi; durumu ayırt eden bir
  kenarlık daha doğru. Kenarlık her bağlantıda ayrılmış, seçili olmayanda
  saydam: yoksa seçili dil 2px kayar ve satır oynardı.
*/
/*
  Renkler bandın kendi takımından, sayfanınkinden değil. Dil değiştirici
  üst barın içinde duruyor ama --site-muted, --site-ink ve --site-soft
  kullanıyordu: o üçü SAYFA zeminine göre hesaplanıyor. Ana renge boyanmış
  ya da ters çevrilmiş bir bantta sonuç, mavi zeminde kahverengiye çalan
  bir "Türkçe" oluyordu — okunmuyor. Menü bağlantısı (.site-nav a) doğru
  takımı zaten kullanıyor; burası atlanmış.

  Seçili dilin zemini de sabit bir renk değil, bandın kendi mürekkebinin
  soluk hâli: hangi duruşta olursa olsun bandın üstünde ayrışıyor.
*/
.site-langs a { display: inline-flex; align-items: center; min-block-size: 2.75rem;
  padding-inline: 0.6rem; border-radius: var(--site-radius);
  border: 1px solid transparent;
  font-size: var(--step--1); text-decoration: none; color: var(--site-head-muted); }
.site-langs a:hover { color: var(--site-head-accent-ink);
  background: color-mix(in srgb, currentColor 12%, transparent); }
.site-langs a[aria-current="true"] { color: var(--site-head-ink); font-weight: 600;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: var(--site-head-line); }
.site-nav a { text-decoration: none; color: var(--site-head-ink); min-block-size: 2.75rem;
  display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--site-head-accent-ink); }

/* ── fiyat ve menü listeleri ─────────────── */
.blk-prices { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.blk-prices > li { display: flex; gap: var(--space-md); align-items: baseline;
  justify-content: space-between; padding-block: 0.6rem;
  border-block-end: 1px dashed var(--site-line); }
/* Fotoğraf opsiyonel: satırın çoğu satırda hiç olmayacak. Ad ve fotoğrafı
   tek birim olarak taşıyoruz ki üstteki space-between fiyatı sağda tutarken
   ikisini birbirinden koparmasın. */
.blk-price-lead { display: flex; align-items: center; gap: var(--space-sm); min-inline-size: 0; }
.blk-price-img { inline-size: 3rem; block-size: 3rem; border-radius: var(--site-radius);
  object-fit: cover; flex-shrink: 0; align-self: center; }
.blk-price-name { display: flex; flex-direction: column; }
.blk-price-name small { color: var(--site-muted); font-size: var(--step--1); }
.blk-price-value { font-weight: 600; white-space: nowrap; }
/* Ölçü burada da cümleye ait: "cards" varyantında bölüm rayın tamamını
   kullanıyor ve altındaki not 72rem'e yayılırdı. */
.blk-price-note { color: var(--site-muted); font-size: var(--step--1);
  max-inline-size: 44rem; }
/*
  Grup başlığı markayı zemin değil metin olarak kullanıyor; o yüzden ham
  --site-primary değil, yazı olarak okunabilir hâli. Kullanıcının seçtiği
  renk metin eşiğini geçmek zorunda değil — ölçüldü: restoranın menü
  başlıkları kart zemininde 4.40:1'de kalıyordu.
*/
.blk-menu-group { margin-block: var(--space-md) 0.35rem; color: var(--site-primary-ink); }

/* ── yorumlar ────────────────────────────── */
.blk-quote { margin: 0; }
.blk-quote blockquote { margin: 0 0 0.6rem; font-size: var(--step-1); line-height: 1.5; }
/* Künye: portre varsa yanında, yoksa hiç yer kaplamıyor — boş bir
   madalyon yuvası künyeyi ikiye bölüyordu. */
.blk-quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--site-muted);
  font-size: var(--step--1);
}
.blk-quote figcaption small { display: block; }
.blk-quote figcaption .blk-avatar {
  flex: none;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--site-avatar-radius);
  object-fit: cover;
}

/* ── ekip ────────────────────────────────── */
.blk-person { text-align: center; }
.blk-avatar { inline-size: 6rem; block-size: 6rem; border-radius: var(--site-avatar-radius);
  object-fit: cover; margin-inline: auto; margin-block-end: 0.6rem; }
/* Branş satırı yalnız renkle ayrılmıyordu ve o ayrım çoğu temada hiç
   yoktu: bu sitenin ana rengi #1b2757, mürekkebi #111827 — ikisi de koyu
   lacivert, yan yana aynı yazı. Renk temaya bağlı, biçim değil; o yüzden
   ayrımı italik ve harf aralığı taşıyor. Renk de kalıyor, ana rengin
   metinden gerçekten ayrıldığı temalarda iki işaret birden çalışsın diye.

   Unvan (.blk-person-honorific) sönük ve dik, branş renkli ve eğik: kartta
   üç satır alt alta ve üçünün de farklı bir şey söylemesi gerekiyor. */
.blk-role { color: var(--site-primary-ink); font-size: var(--step--1);
  font-style: italic; letter-spacing: 0.01em; margin-block: 0 0.35rem; }

/* Unvan adın üstünde, ondan sönük: kartta okunması gereken şey ad.
   Ad da bölünmesin diye dengeli sarıyor — "Ali / Çetin Sarıtaş" değil
   "Ali Çetin / Sarıtaş". */
.blk-person-honorific { font-size: var(--step--1); color: var(--site-muted);
  margin-block: 0 0.1rem; }
.blk-person .blk-h3 { text-wrap: balance; }

/* Kişinin kendi sayfası varsa adı bağlantı olur. Rengi metinden ayırmıyoruz:
   kart zaten tıklanabilir görünüyor ve mavi bir isim, kartın içinde asıl
   okunması gereken şeyden dikkati alıyor. Alt çizgi üstüne gelince çıkıyor. */
.blk-person-link { color: inherit; text-decoration: none; }
.blk-person-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Bağlantının tıklama alanı kartın tamamı. Bir isim satırı, parmakla
   vurulacak hedef için fazla küçük: mobilde fotoğrafa, unvana ya da kartın
   boşluğuna basan hiçbir yere gitmiyordu.

   Kartı komple <a> yapmayıp bağlantıyı yaymanın sebebi, bağlantının adının
   hekimin adı olarak kalması — kartın tamamı bağlantı olsaydı erişilebilirlik
   ağacında "Uzm. Dr. … EKG, ekokardiyografi…" diye tek bir uzun bağlantı
   görünürdü. Aynı kalıp .blk-card-link kullanan page-list'te gerekmiyor,
   orada kartın yazısı zaten yalnız başlık ve özet. */
/* İki numara alt alta, yan yana değil: adres de üstünde çok satırlı ve
   yan yana dizilen numaralar tek bir uzun numara gibi okunuyordu. Simge
   .blk-meta'nın flex-start hizasıyla ilk satırın yanında kalıyor. */
.blk-phones { display: flex; flex-direction: column; gap: 0.15rem; }

.blk-person:has(.blk-person-link) { position: relative; }
.blk-person-link::after { content: ""; position: absolute; inset: 0;
  border-radius: inherit; }

/* Üstüne gelince kart da tepki veriyor: tıklanabilir olduğunu söyleyen tek
   şey artık adın altı değil, kenarlığın kendisi (bkz. .blk-card-link:hover). */
.blk-person:has(.blk-person-link:hover),
.blk-person:has(.blk-person-link:focus-visible) { border-color: var(--site-primary-ink); }

/* Odak halkası ada değil karta: yayılan ::after yüzünden tarayıcı halkayı
   kartın dört bir yanına çiziyor ve içerideki adın etrafındaki ince halka
   ile üst üste biniyordu. */
.blk-person-link:focus-visible { outline: none; }
.blk-person:has(.blk-person-link:focus-visible) {
  outline: 2px solid var(--site-primary-ink); outline-offset: 2px; }

/* ── WhatsApp ────────────────────────────── */
.blk-wa { background: var(--site-soft); }
/*
  Yazı beyaz değil koyu yeşil. WhatsApp'ın kendi düğmesi beyaz yazıyor ve o
  bileşim 1.98:1 veriyor — AA'nın istediğinin yarısından az, yani düğmenin
  üstündeki söz okunmuyor. İki çıkış yolu vardı: yeşili koyultmak ya da yazıyı
  koyultmak. Yeşili koyultmak markayı bozardı (#075E54'e inmek gerekiyordu,
  o da artık yeşil değil), oysa yazıyı koyultmak marka rengini olduğu gibi
  bırakıyor ve 6.20:1 veriyor. Üstteki nota bağlı kalıyoruz: o yeşil marka,
  tema değil — dokunulmadı.
*/
.blk-wa-btn { background: #25d366; color: #0b3d24; }

/* ── kampanya ────────────────────────────── */
.blk-campaign { background: var(--site-primary); color: var(--site-on-primary); }
.blk-campaign .blk-h2 { margin: 0.35rem 0 0.25rem; }
/* Düğme token'ları ters zeminler bölümünde; burada tekrar edilmiyor. */
/*
  Rozet ve tarih satırı bandın, yani ana rengin üstünde duruyor. İkisi de
  eskiden soluklaştırmayı kendi başına yapıyordu: rozet beyaz alfa dolguyla
  (0.22), tarih opaklıkla (0.85). İkisi de ölçüldüğünde açık şemada AA'nın
  altındaydı — rozet 3.37–3.82:1, tarih 4.08–4.30:1.

  Sebep opaklığın temayı bilmemesi: --site-on-primary siyah ile beyazdan
  hangisi daha çok kontrast veriyorsa o seçiliyor, yani bandın üstündeki payı
  sabit değil (ölçüldü: 5.02:1 ile 17.85:1 arası, teorik tabanı 4.58:1). Payı
  dar olan temada herhangi bir soldurma eşiği deliyor.

  Soldurmayı artık palet hesaplıyor: --site-on-primary-muted her temada banda
  karşı 4.5'i geçtiği ölçülerek üretiliyor, dar temada az soluyor, geniş
  temada çok. Yedek doğrudan --site-on-primary: token henüz yayımlanmadıysa
  hiç solmayan ama garantili hâle düşüyor, hiçbir aşamada okunmaz olmuyor.

  Rozetin dolgusu da bu yüzden gitti: yarı saydam bir dolgunun üstündeki
  yazının kontrastı ana renge bağlı kalıyordu. Kenarlıklı rozette yazı
  doğrudan bandın üstünde, yani --site-on-primary'nin garantisiyle.
*/
.blk-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--site-on-primary-muted, var(--site-on-primary));
  font-size: var(--step--2); letter-spacing: 0.08em;
  text-transform: uppercase; }
.blk-until { color: var(--site-on-primary-muted, var(--site-on-primary));
  font-size: var(--step--1); margin-block-end: 0; }

/* ── sosyal ve dosyalar ──────────────────── */
.blk-social .blk-actions { justify-content: flex-start; }
.blk-files { list-style: none; padding: 0; margin: 0; }
.blk-files > li { padding-block: 0.55rem; border-block-end: 1px solid var(--site-line); }
.blk-files small { display: block; color: var(--site-muted); font-size: var(--step--1); }

/* ── video ───────────────────────────────── */
.blk-video { aspect-ratio: 16 / 9; border-radius: var(--site-radius); overflow: hidden;
  background: #000; }
.blk-video iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.blk-caption { color: var(--site-muted); font-size: var(--step--1); margin-block-start: 0.5rem; }

/* ── yüzen eylem düğmesi ──────────────────
   Sağ altta sabit. İskelet burada, duruş görsel dilde: her sistem kendi
   kenarını, gölgesini ve köşesini veriyor.

   Çerez şeridi de sayfanın altında sabit; :has ile düğme onun üstüne
   çıkıyor. Aksi hâlde ikisi üst üste biniyor ve ikisi de tıklanamıyordu. */
.site-fab {
  position: fixed;
  inset-inline-end: var(--space-md);
  inset-block-end: var(--space-md);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.22);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.site-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(0 0 0 / 0.28); }

/* WhatsApp kendi rengini taşıyor: marka, tema değil. Telefon düğmesi ise
   sitenin ana rengini alıyor.

   İşaret beyaz: WhatsApp'ın kendi markası böyle ve tanınırlık oradan
   geliyor. Yeşilin üstünde beyaz 1.98:1 — WCAG'nin metin dışı 3:1
   eşiğinin altında; düğmenin ne olduğunu rengin kendisi söylediği ve
   yanında erişilebilir bir aria-label durduğu için kabul ediliyor. */
.site-fab[data-action="whatsapp"] { background: #25d366; color: #fff; }
.site-fab[data-action="phone"] { background: var(--site-primary); color: var(--site-on-primary); }

/* Şerit ekrandayken düğme onun üstüne çıkıyor. Koşul "şerit sayfada var mı"
   değil "şu an görünüyor mu": şerit kapatıldıktan sonra da DOM'da duruyor ve
   düğme boşluğa yaslanmış gibi bir tık yukarıda kalıyordu. */
body:has(.cookie-note:not([hidden])) .site-fab {
  inset-block-end: calc(var(--space-md) + 4.5rem); }

/* ── hızlı iletişim şeridi ────────────────
   Aynı şerit iki yerde duruyor: geniş ekranda üst barın üstünde, akışta;
   dar ekranda sayfanın altına sabitlenmiş. İki ayrı bileşen yazmadık çünkü
   ikisi aynı şeyi söylüyor — değişen tek şey parmağın ve farenin nereye
   ulaştığı. Üstte fare zaten sayfanın başında; altta başparmak zaten orada.

   Zemin ana renk: şerit sayfanın parçası değil, sayfanın üstünde duran bir
   kanal. Nötr bir zeminde üst bardan ayrılmıyor ve iki katlı bir başlık
   gibi okunuyordu. */
/* Sıfır: geniş ekranda şerit akışta duruyor, hiçbir şeyin altını örtmüyor.
   Telefonda ekranın altına sabitlendiğinde gerçek boyunu kazanıyor
   (aşağıdaki dar ekran bloğu). */
:root { --site-quickbar-h: 0rem; }

.site-quickbar { background: var(--site-primary); color: var(--site-on-primary);
  font-size: var(--step--1); }
.site-quickbar-in { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem var(--space-md); padding-block: 0.45rem; }

.site-quickbar-item { display: inline-flex; align-items: center; gap: 0.45rem;
  color: inherit; text-decoration: none; font-weight: 600;
  padding-block: 0.25rem; }
/* Altı çizgi yalnız gerçekten bir yere giden öğede: saat ve düz yazı
   <span> olarak basılıyor ve tıklanabilir görünmemeli. */
a.site-quickbar-item:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Düz yazının simgesi yok — boş bir <svg> yine de yer kaplıyordu. */
.site-quickbar-item[data-kind="text"] svg { display: none; }
.site-quickbar-item svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }

/* Sağ tarafı ayıran şey bir kutu değil, ilk sağ öğeye verilen "kalanın
   tamamı" payı. Kutu olsaydı dar ekranda öğeler eşit paya bölünemezdi —
   alt çubukta hepsi doğrudan flex çocuğu olmak zorunda. */
.site-quickbar-in > [data-edge="end"] { margin-inline-start: auto; }

/* Şeritteki düğme ters kontrastta: şeridin kendisi zaten ana renk, aynı
   rengi tekrar eden bir düğme orada görünmezdi. */
.site-quickbar-action {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.85rem; border-radius: var(--btn-radius, var(--site-radius));
  background: var(--site-on-primary); color: var(--site-primary);
  font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-quickbar-action:hover { opacity: 0.9; }

/* Yalnız dar ekranda isteniyorsa geniş ekranda hiç yok, tersi de öyle.
   display:none, çünkü "görünmesin" burada gerçekten yok demek. */
/* Eskiden burada bir kural daha vardı: şerit görünürken üst bardaki eylem
   düğmesi kalkıyordu, çünkü ikisi aynı düğmeydi ve alt alta iki kez
   duruyordu. Artık ayrı listeler, ayrı içerik — biri "Hemen ara", öbürü
   "Randevu al" olabiliyor ve birini gizlemek yazılmış bir düğmeyi yok saymak
   olurdu. */
@media (min-width: 48rem) {
  .site-quickbar[data-where="mobile"] { display: none; }
}

@media (max-width: 47.99rem) {
  .site-quickbar[data-where="desktop"] { display: none; }

  /* Telefonda görünmeyecek öğeler. Karar artık satırın kendisinde: eskiden
     düğmeler koşulsuz gizleniyordu ve "alt çubuğa randevu düğmesi koyayım"
     demek mümkün değildi. Alt çubuk öğeleri eşit paya böldüğü için dörtten
     fazlası okunmuyor — panel bunu uyarı olarak söylüyor, kural olarak değil:
     kendi sitesinde beşinciyi denemek kullanıcının hakkı.

     Sağa itme de kalkıyor: alt çubukta "sağ uç" diye bir yer yok, öğelerin
     hepsi eşit pay alıyor. */
  .site-quickbar-in > [data-mobile="hidden"] { display: none; }
  .site-quickbar-in > [data-edge="end"] { margin-inline-start: 0; }

  /* Düğme de bir dokunma hedefi: alt çubukta diğerleriyle aynı payı alıyor,
     yoksa yazısı kadar yer kaplayıp sırayı bozardı. */
  .site-quickbar-action { flex: 1; justify-content: center; }

  /* Dar ekran: şerit sayfanın altına sabitleniyor ve öğeler eşit paylara
     bölünüyor — üçü de aynı genişlikte bir dokunma hedefi oluyor. Simge
     üstte, yazı altta: yan yana dizildiklerinde üç numara satıra sığmıyor
     ve yazı iki satıra kırılıyordu.

     z-index çerez şeridinin (20) altında: onay isteyen bir şeridi örtmek,
     onayı görünmez kılmak olurdu. */
  .site-quickbar { position: fixed; inset-inline: 0; inset-block-end: 0;
    z-index: 15; border-block-start: 1px solid rgb(255 255 255 / 0.18);
    padding-block-end: env(safe-area-inset-bottom, 0); }

  /* Çubuğun boyu tek yerde. Sabit bir çubuk sayfanın altını örtüyor ve
     örttüğü payı bilmesi gereken beş yer var (gövdenin dolgusu, yüzen
     düğme, çerez şeridi ve ekranı kaplayan açılış). Sayısı beş yere
     ayrı ayrı yazmak, birini değiştirip dördünü unutmak demekti. */
  body:has(.site-quickbar:not([data-where="desktop"])) { --site-quickbar-h: 3.25rem; }

  /* Yan dolgu da kalkıyor: alt çubuk ekranın kendisi kadar geniş bir
     kontrol ve dolgu, iki ucundaki dokunma hedeflerini kenardan
     uzaklaştırıyordu — parmağın en kolay vurduğu yer tam orası. */
  .site-quickbar-in { flex-wrap: nowrap; gap: 0; padding: 0; }

  .site-quickbar-item { flex: 1; flex-direction: column; gap: 0.15rem;
    justify-content: center; padding-block: 0.5rem;
    min-block-size: var(--site-quickbar-h); font-size: 0.75rem;
    text-align: center; }

  /* Ayıraç "önündeki KOMŞU" değil "önünde GÖRÜNEN bir şey olan" öğede.
     Bitişik kardeş seçicisi (+) telefonda gizlenmiş öğeyi de kardeş
     sayıyordu: çalışma saati satırı display:none olduğu hâlde ondan sonra
     gelen ilk öğe ayıracını alıyor ve çubuğun en solunda, hiçbir şeyi
     ayırmayan boş bir hücre duruyordu. */
  .site-quickbar-in > :not([data-mobile="hidden"]) ~ .site-quickbar-item {
    border-inline-start: 1px solid rgb(255 255 255 / 0.18); }
  .site-quickbar-item svg { inline-size: 1.25rem; block-size: 1.25rem; }

  /* Numaranın kendisi değil ne olduğu yazıyor: 3.25rem'lik bir hücrede
     "0 (212) 588 83 31" okunmuyor, "Telefon" okunuyor. Bağlantı zaten
     numarayı çeviriyor. */
  .site-quickbar-item[data-kind="phone"] span { font-size: 0; }
  .site-quickbar-item[data-kind="phone"] span::after {
    content: "Telefon"; font-size: 0.75rem; }
  .site-quickbar-item[data-kind="whatsapp"] span { font-size: 0; }
  .site-quickbar-item[data-kind="whatsapp"] span::after {
    content: "WhatsApp"; font-size: 0.75rem; }
  .site-quickbar-item[data-kind="email"] span { font-size: 0; }
  .site-quickbar-item[data-kind="email"] span::after {
    content: "E-posta"; font-size: 0.75rem; }

  /* Sabit şerit sayfanın sonunu örtüyordu: alt bilginin son satırı ve
     çerez onayı altında kalıyordu. Yer, gövdenin kendisinden açılıyor. */
  body:has(.site-quickbar:not([data-where="desktop"])) {
    padding-block-end: var(--site-quickbar-h); }

  body:has(.site-quickbar:not([data-where="desktop"])) .site-fab {
    inset-block-end: calc(var(--space-md) + var(--site-quickbar-h)); }

  body:has(.site-quickbar:not([data-where="desktop"])) .cookie-note {
    inset-block-end: var(--site-quickbar-h); }

  body:has(.site-quickbar:not([data-where="desktop"])):has(.cookie-note:not([hidden])) .site-fab {
    inset-block-end: calc(var(--space-md) + var(--site-quickbar-h) + 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .site-fab:hover { transform: none; }
}

/* ── çerez şeridi ─────────────────────────
   Ölçüm bağlıyken şerit onay soruyor ve iki düğme taşıyor. "Reddet" içi boş
   ama aynı ölçüde: reddetmek kabul etmekten zor olursa verilen onay geçerli
   sayılmaz — küçültülmüş ya da soluklaştırılmış bir ret düğmesi tam olarak
   bunu yapardı. */
.cookie-note { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center;
  justify-content: center; padding: 0.75rem var(--space-md);
  background: var(--site-inverse-surface); color: var(--site-inverse-ink);
  font-size: var(--step--1); }
.cookie-note p { margin: 0; }
.cookie-note a { color: var(--site-inverse-ink); text-decoration: underline; }
.cookie-note button { font: inherit; padding: 0.4rem 0.9rem; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--site-radius);
  background: var(--site-inverse-ink); color: var(--site-inverse-surface);
  min-block-size: 2.75rem; }
.cookie-note [data-cookie-deny] { background: transparent;
  border-color: var(--site-inverse-ink); color: var(--site-inverse-ink); }

/* Dekoratif bölümler dar ekranda gizlenebilir. */
/* ── YAZI SAYFASI ─────────────────────────────────────────
   Yazı bir blok dizisi değil, sabit yapılı tek bir parça: kapak,
   başlık, künye, gövde. Ölçü metin genişliğinde tutuluyor —
   uzun satır okumayı zorlaştırır. */
.blk-post-cover { margin-block: var(--space-md); }
/* Başlığın üstündeki kategori. Bağlantı olsa da kicker gibi duruyor:
   künyeden çıkarıldığı için altını çizip mavi yapmak, başlıktan önce
   gözü çeken ikinci bir vurgu olurdu. */
.blk-post-kicker a { color: inherit; text-decoration: none; }
.blk-post-kicker a:hover { text-decoration: underline; }
.blk-post-kicker > * + *::before { content: " · "; }

.blk-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-block: 0.5rem var(--space-md); font-size: var(--step--1);
  color: var(--site-muted); }
/*
  Ayıraç --site-line ile çizilirken iki şemada da görünmüyordu (1.26:1 ve
  1.33:1): künye tek bir kelime dizisi gibi okunuyordu. Çizgi token'ı zemine
  karşı zayıf olmak üzere üretiliyor — doğru yer orası değil. Ayıraç metin
  sayılmasa da metnin arasında duruyor ve künyenin kendi rengiyle, yani
  --site-muted ile çiziliyor (zemine karşı 4.5:1 garantili). Renk açıkça
  yazılıyor: künyenin içinde bağlantı olursa ayıraç ana renge kaymasın.
*/
.blk-post-meta > * + *::before { content: "·"; margin-inline-end: 0.5rem; color: var(--site-muted); }
.blk-post-meta .blk-chip::before { content: none; }

/*
  Yazı --site-muted değil --site-ink. Muted'in 4.5:1 garantisi SAYFA zeminine
  karşı veriliyor; çipin altında ise sayfa değil, sayfanın üstüne konmuş bir
  ton var ve o pay eşiği yiyordu. Ölçüldü: yirmi sekiz tema/şema
  bileşiminin hepsinde 3.76–4.59:1, yani hiçbirinde AA yok. Üstelik çip blog
  kartının içinde de çıkıyor ve orada arkası --site-soft olduğu için bir tık
  daha kötüleşiyordu.

  Mürekkeple çip, gövde metniyle aynı okunabilirliğe bağlanıyor: ne olursa
  olsun sayfanın kendi yazısı kadar okunur (ölçüldü: 12.89–15.80:1). Zemin
  tonu olduğu gibi kalıyor, çip hâlâ çip.
*/
.blk-chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--site-line) 60%, transparent);
  color: var(--site-ink); font-size: var(--step--1); }

.blk-post-tags { display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-block-start: var(--space-md); }

/*
  Liste sayfasının altındaki sayfa gezinmesi. Ortada değil kenarlarda:
  "önceki" ve "sonraki" karşılıklı dururken hangisinin ileri gittiği
  okumadan da belli oluyor. Ortadaki sayaç yalnız bilgi — bağlantı değil,
  o yüzden mürekkebi de kısık.
*/
.blk-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  justify-content: space-between; margin-block-start: var(--space-lg); }
.blk-pager-at { color: var(--site-muted); font-size: var(--step--1);
  font-variant-numeric: tabular-nums; margin-inline: auto; }

@media (max-width: 47.99rem) { [data-hidden~="mobile"] { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── blok varyantları ────────────────────── */
/*
  Aynı blok, aynı içerik, farklı duruş. Yeni bir partial ya da yeni bir blok
  değil: tanımdaki "variant" alanı bölüme nitelik olarak iniyor, gerisi burada.
  Şablon çeşitliliğini asıl bu çoğaltıyor — sekiz şablon yerine sekiz iskelet
  × düzinelerce yerleşim.

  Varsayılan varyantlar (split, cards, rows, grid, numbered, band) taban
  kuralların kendisi; burada yalnız onlardan sapanlar var.
*/

/* hero: ortalı — tek kolon, metin merkezde, görsel altta */
.blk-hero[data-variant="centered"] .blk-split { grid-template-columns: 1fr; text-align: center; }
.blk-hero[data-variant="centered"] .blk-actions { justify-content: center; }
.blk-hero[data-variant="centered"] .blk-lede { margin-inline: auto; max-inline-size: 44rem; }

/*
  Sayfanın başındaki ortalı açılış bir bölüm değil, sayfa başlığı: iç
  sayfalarda başlık ve tek cümleden ibaret (bu varyantta görsel yuvası bile
  çizilmiyor, bkz. hero.cshtml). Alt boşluğu ardından gelen bölümün kendi üst
  boşluğuyla üst üste biniyordu — iki --space-lg yan yana, geniş ekranda 9rem:
  başlıkla ilk bölüm arasında hiçbir şeyin olmadığı bir şerit. Ayrımı zaten
  sonraki bölümün üst boşluğu (ve zebrada kendi zemini) yapıyor.

  :not(:last-child) şart: açılıştan sonra hiçbir bölüm yoksa boşluğu yiyecek
  bir komşu da yok, sayfa alt bilgiye yapışırdı.
*/
main > div:first-child:not(:last-child) > .blk-hero[data-variant="centered"] {
  padding-block-end: 0;
}

/* hero: görsel üstünde — iki kolon üst üste biniyor, metin görselin üzerinde */
.blk-hero[data-variant="overlay"] .blk-split { grid-template-columns: 1fr; }
.blk-hero[data-variant="overlay"] .blk-split > .blk-col { grid-area: 1 / 1; }
.blk-hero[data-variant="overlay"] .blk-img {
  aspect-ratio: 21 / 9;
  border-radius: var(--site-img-radius);
  min-block-size: 20rem;
}
/*
  Beyaz yazı ve siyah perde yalnız GÖRSEL VARSA. Görsel bölümün kendisi
  koşullu basılıyor (hero.cshtml, "image" alanı boşsa ikinci kolon hiç
  çıkmıyor); kural buna :has ile bakıyor. Öncesinde perde şeffaftan siyaha
  gidiyordu ve arkasında hiçbir şey yoktu — görselini silen bir müşteride
  açık şemada beyaz yazı beyaz zeminde kalıyordu. Bugüne kadar patlamamasının
  tek sebebi kimsenin fotoğrafı silmemiş olması.

  Görsel yokken kural hiç uygulanmıyor: yazı --site-ink'e, üst satır
  --site-primary'ye, alt satır --site-muted'e dönüyor; üçü de zemine karşı
  paletin garantisi altında (ink 14.71–18.72:1 ölçüldü).
*/
.blk-hero[data-variant="overlay"] .blk-split:has(.blk-img) > .blk-col:first-child {
  z-index: 1;
  align-self: end;
  /* Üstteki pay perdenin sönme mesafesi; aşağısı metnin. */
  padding: var(--space-lg) var(--space-md) var(--space-md);
  color: #fff;
  /*
    Perde metnin ARKASINDA sabit, sönmesi metnin ÜSTÜNDE.

    Eskiden geçiş kutunun tamamına yayılıyordu ve kutu zaten metnin kutusuydu:
    en üstteki satır — üst yazı ya da başlık — perdenin saydam ucuna denk
    geliyordu. Açık bir fotoğrafta oradaki kontrast 1.2:1'e kadar iniyor,
    yani beyaz başlık beyaz gökyüzünde kayboluyordu. Karanlık bir fotoğrafla
    hiç fark edilmiyor; hata fotoğrafın kendisine bağlıydı ve şablonun
    fotoğrafını kullanıcı koyuyor.

    Duraklar yüzde değil uzunluk: sönme tam olarak üstteki --space-lg kadar
    sürüyor ve o alan dolgu, yani içinde yazı yok. Metnin bulunduğu her
    yerde perde tam 0.72 ve bembeyaz bir fotoğrafta bile 9.23:1 ölçüyor.
  */
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
  border-end-start-radius: var(--site-img-radius);
  border-end-end-radius: var(--site-img-radius);
}
.blk-hero[data-variant="overlay"] .blk-split:has(.blk-img) .blk-eyebrow,
.blk-hero[data-variant="overlay"] .blk-split:has(.blk-img) .blk-lede {
  color: inherit; opacity: 0.9;
}

/*
  Yer tutucu overlay'de metnin ÜSTÜNE binmiyor, altına iniyor. Bu varyantta
  iki kolon aynı ızgara gözünde duruyor; dolu bir fotoğrafta doğru olan bu,
  boş bir çerçevede iki yazı üst üste geliyor ve ikisi de okunmuyor.
  Perde de yok (yukarıdaki kural :has(.blk-img) istiyor), yani beyaz yazı
  riski de doğmuyor.
*/
.blk-hero[data-variant="overlay"] .blk-split:has(.blk-slot) > .blk-col { grid-area: auto; }
.blk-hero[data-variant="overlay"] .blk-slot { aspect-ratio: 21 / 9; }

/* kart chrome'unu kaldıran varyantlar: içerik kalıyor, kutu gidiyor */
.blk[data-variant="plain"] .blk-card,
.blk[data-variant="quotes"] .blk-card,
.blk[data-variant="single"] .blk-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* feature-grid: numaralı */
.blk[data-variant="numbered"] .blk-grid { counter-reset: feature; }
.blk[data-variant="numbered"] .blk-card { counter-increment: feature; }
/*
  Seçicide .blk-card şart: "numbered" iki ayrı bloğun varyant adı — hem
  feature-grid'in hem steps'in, ve steps'te varsayılan. steps de adım adını
  .blk-h3 ile basıyor, ama sayacı artıran .blk-card orada hiç yok. Kural
  oraya da uyunca counter(feature) tanımsız kalıyor ve CSS tanımsız sayacı
  hata saymıyor, sıfır sayıyordu: "Tanışma" yerine "0. Tanışma" yazıyordu —
  üstelik adımın kendi 1-2-3 madalyonunun yanı başında.
*/
.blk[data-variant="numbered"] .blk-card .blk-h3::before {
  content: counter(feature) ". ";
  color: var(--site-primary-ink);
  font-variant-numeric: tabular-nums;
}

/* testimonials: alıntı işareti — kutu yerine tipografi */
.blk[data-variant="quotes"] .blk-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--site-font-heading);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--site-primary-ink);
}

/* testimonials: tek büyük */
.blk[data-variant="single"] .blk-grid { grid-template-columns: 1fr; }
/*
  Başlık artık testimonials'ın kendi kuralıyla ortalı (yukarıda,
  [data-block="testimonials"] .blk-h2). Önceki hata alıntı tek başına
  ortalanıp başlık solda kalmasıydı — ikisi ayrı eksendi. Şimdi ikisi
  birlikte ortalanıyor.
*/
.blk[data-variant="single"] .blk-quote {
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--step-1);
}

/*
  price-list: kart — satır listesi ızgaraya dönüyor.

  Sütun tabanı 15rem değil 22rem, yani geniş ekranda satıra dört değil İKİ
  kart giriyor. 15rem'de kart 15.8rem'e düşüyordu: adın yanına sığmayan fiyat
  alta kaçıyor, iki kelimelik açıklama üç satıra bölünüyor ve içerik biraz
  uzayınca düzen dağılıyordu. 33.4rem'lik kartta ad solda, fiyat sağda kalıyor
  ve açıklamanın altına birkaç satır daha yazılacak yer var.

  Aralık --space-sm değil: kartlar rayın tamamına yayılıyor (bkz.
  price-list.cshtml) ve 0.75rem o genişlikte kartları birbirine yapıştırıyordu.
  Sayfadaki öbür kart ızgaralarıyla (.blk-grid) aynı aralık — ikisi aynı şeyin
  iki örneği.
*/
.blk[data-variant="cards"] .blk-prices {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.blk[data-variant="cards"] .blk-prices > li {
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  box-shadow: var(--site-shadow);
  border-radius: var(--site-radius);
  padding: var(--space-md);
}

/*
  Çift genişlikteki kart. İki işi birden yapıyor: bir paketi öne çıkarıyor ve
  tek başına kalan kartı satıra yayıyor — iki sütunlu ızgarada üç kartın
  sonuncusu yarım satırda asılı kalıyordu, "geniş" işaretlenince alt satırın
  tamamını kaplıyor.

  Kap sorgusu şart, süs değil: tek sütuna düşmüş ızgarada "span 2" olmayan bir
  ikinci sütunu var ediyor ve kart bölümün dışına taşıyordu.
*/
@container (min-width: 48rem) {
  .blk[data-variant="cards"] .blk-prices > li[data-wide] { grid-column: span 2; }
}

/* price-list: iki sütun — uzun listeyi ikiye bölüyor */
@container (min-width: 40rem) {
  .blk[data-variant="columns"] .blk-prices { columns: 2; column-gap: var(--space-md); }
  .blk[data-variant="columns"] .blk-prices > li { break-inside: avoid; }
}

/* gallery: şerit — yan yana kayan tek sıra */
.blk[data-variant="strip"] .blk-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 0.5rem;
}
/*
  Ölçü 22rem değil: geniş ekranda ray içi 68.5rem (72 − iki yandan --space-md)
  ve üç kare 3×22 + 2×1.75 = 69.5rem tutuyordu. Tam 1rem taşıyor, yani üçüncü
  kare kılpayı kesiliyor ve altında hiçbir yere gitmeyen bir kaydırma çubuğu
  beliriyordu — şerit "devamı var" demek için kesiyor, burada devamı yoktu.

  20rem'de üç kare 63.5rem: sığıyor, çubuk çıkmıyor. Dördüncüden itibaren
  gerçekten taşıyor ve kaydırma o zaman bir işe yarıyor. Dar ekranda da
  min(...) ikinci değeri devralıyor ve şerit yine kayıyor.
*/
.blk[data-variant="strip"] .blk-figure {
  flex: 0 0 min(20rem, 80%);
  scroll-snap-align: start;
}

/* gallery: mozaik — ilk görsel iki kat yer kaplıyor */
@container (min-width: 48rem) {
  .blk[data-variant="mosaic"] .blk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blk[data-variant="mosaic"] .blk-figure:first-child { grid-column: span 2; grid-row: span 2; }
  .blk[data-variant="mosaic"] .blk-figure:first-child img { block-size: 100%; aspect-ratio: auto; }
}

/* steps: zaman çizgisi — numaralar bir çizgiye diziliyor */
/*
  grid-template-columns bilerek yazılı: .blk-steps'in kendi kuralı
  auto-fit ile yan yana sütunlar açıyor ve bu varyantta o kural yürürlükte
  kalıyordu. Sonuç, solunda dikey bir çizgi olan üç sütunlu bir ızgaraydı —
  çizginin gösterdiği sıra ile adımların gerçek sırası tutmuyordu. Dikey bir
  çizgi tek sütun demek.
*/
.blk[data-variant="timeline"] .blk-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  border-inline-start: 2px solid var(--site-line);
  padding-inline-start: var(--space-md);
}

/* cta: kutulu — şerit yerine sayfa içinde duran bir kart */
/*
  Zemin ana renkten çıkınca yazı rengi de geri alınıyor. Vurgulu cta
  (data-accent="true") bölüme color: var(--site-on-primary) veriyor ve o renk
  yalnız ana rengin üstünde okunuyor: koyu modda on-primary siyah seçildiği
  için devralınan renk yumuşak zeminli kutuda görünmez bir yazı bırakıyordu —
  açık modda aynısı beyaz üstüne beyaz oluyordu.
*/
.blk[data-variant="boxed"] .blk-cta-in {
  background: var(--site-soft);
  color: var(--site-ink);
  border: 1px solid var(--site-line);
  box-shadow: var(--site-shadow);
  border-radius: var(--site-radius);
  padding: var(--space-md);
}
.blk-cta[data-variant="plain"] { background: transparent; color: var(--site-ink); }

/* ── gömülü içerik onayı ────────────────────────────────────
   Onay gelene kadar üçüncü tarafa istek gitmiyor; burada duran
   şey bir hata ekranı değil, ne olacağını söyleyen bir düğme. */
.blk-embed-ask {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 0;
  border-radius: var(--site-img-radius);
  background: var(--site-soft);
  color: var(--site-muted);
  font: inherit;
  font-size: var(--step--1);
  text-align: center;
  cursor: pointer;
}
.blk-embed-ask:hover { color: var(--site-ink); }
.blk-embed-mark { font-size: var(--step-3); line-height: 1; }
.blk-embed-text strong { display: block; margin-block-start: 0.35em; color: var(--site-primary-ink); }
.blk-video, .blk-map-frame { position: relative; }

/* ── açık / kapalı ──────────────────────────────────────────
   Rozet ziyaretçinin saatinde hesaplanıyor (site.js); sunucu
   bunu yapamaz çünkü sayfa herkese aynı önbellekten çıkıyor. */
.blk-open-state {
  margin-inline-start: auto;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  background: color-mix(in oklab, var(--site-ink) 8%, transparent);
  color: var(--site-muted);
}
/* Zemin ana rengin soluk bir tonu (dolgu tarafı), yazı mürekkep tarafı:
   koyu şemada --site-primary kullanıcının girdiği koyu lacivert ve o
   karışım kendi zemininin üstünde okunmuyordu. */
.blk-open-state[data-open="true"] {
  background: color-mix(in oklab, var(--site-primary) 14%, transparent);
  color: color-mix(in oklab, var(--site-primary-ink) 80%, var(--site-ink));
}

/* ── adımlı form ────────────────────────────────────────────
   Betik gelmezse bütün adımlar açık kalıyor ve form tek sayfa
   olarak gönderiliyor; hiçbir alan erişilemez olmuyor. */
.blk-form-step { border: 0; margin: 0; padding: 0; display: contents; }
/* display:contents tarayıcının kendi [hidden] kuralından daha özgül —
   bu satır olmadan gizlenmesi gereken adım görünmeye devam ediyordu. */
.blk-form-step[hidden] { display: none; }
.blk-form-step-mark {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--site-muted);
  letter-spacing: 0.08em;
}
/* Gezinme ve gönderme aynı satırda: "← Geri" ile "Gönder" ayrı ızgara
   hücrelerindeyken son adımda alt alta düşüyordu. İkisi de formun bütününe
   ait ve aynı anda verilen bir kararın iki yönü. */
.blk-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-xs); }
.blk-form-nav { margin: 0; display: flex; gap: var(--space-xs); }
/* --site-ink-3 diye bir token yok: ThemeCss onu hiç basmıyor ve geçersiz
   bir var() bildirimi düşürüyor, yani yazı miras aldığı rengi alıyordu —
   ipucu metni gövde metniyle aynı ağırlıkta görünüyordu. Üçüncü bir
   mürekkep düzeyi de yok; ikincil olan --site-muted. */
.blk-form-help { display: block; font-size: var(--step--2); color: var(--site-muted); }

/* ── alt bilgi sütunları ────────────────────────────────────
   Menüdeki gruplama yayında da grup kalıyor. Tek kolonluk bir
   alt bilgi eski davranışın aynısı: sıra bozulmuyor. */
.site-foot-nav { display: grid; gap: var(--space-md) var(--space-lg);
  align-content: start; }
/* Gezinme, alt bilgi ızgarasında tek bir paya sıkışmıyor. Üç gruplu bir
   menü o payda 78 pikselik sütunlara bölünüyor ve "Doktorlarımız" yan
   sütunun üstüne taşıyordu: ızgara hücresi kendi içeriğinden dar olabilir,
   içerik ise küçülmez. Menü artık iki pay alıyor ve sütun sayısı sabit
   değil — yer kalmadığında sütun üst üste binmek yerine alt satıra iniyor. */
@media (min-width: 40rem) {
  .site-foot-nav[data-columns="2"],
  .site-foot-nav[data-columns="3"],
  .site-foot-nav[data-columns="4"] { grid-column: span 2;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
}
/* min-inline-size: uzun bir bağlantı adı sütunu taşırmasın. */
.site-foot-col { display: flex; flex-direction: column; gap: 0.4em;
  min-inline-size: 0; overflow-wrap: break-word; }
/* Alt bilginin kendi mürekkebi. --site-ink sayfanın mürekkebi ve alt
   bilgi "accent" duruşundayken zemin ana renk oluyor: koyu lacivert bandın
   üstünde koyu gri başlık, 1.25:1. Bandın içindeki her şey bandın
   token'larından beslenmeli. */
.site-foot-col-head { font-weight: 600; color: var(--site-foot-ink); }

/* ═══ AÇILIŞ BÖLÜMLERİ ══════════════════════════════════════
   İkiye ayrılıyor: önce aynı bloğun yeni duruşları (hero'nun variant
   alanı), sonra kendi alanları olduğu için ayrı blok olmak zorunda kalan
   açılışlar. Ayrımın kuralı tek: yeni bir SORU soruluyorsa yeni blok,
   yalnız aynı içeriğin yerleşimi değişiyorsa varyant. Fotoğraf listesi,
   video adresi, form alanı yeni birer soru; "tam ekran mı olsun" değil.

   Ortak iskelet .blk-hero'da kalıyor ve on üç bölüm onu paylaşıyor:
   başlık ölçüsü, üst yazı, buton çifti ve iki kolonlu ızgara. Metin
   kolonunu Blocks/_HeroText.cshtml çiziyor. */

/* ── hero: tam ekran ────────────────────────────────────────
   Görsel rayın dışına taşıyor, yazı rayın içinde kalıyor. İkisi aynı
   ızgara gözünde: fotoğrafın kendisi bölümün zemini oluyor. */
.blk-hero[data-variant="full"] { padding-block: 0; }
.blk-hero[data-variant="full"] .blk-in { max-width: none; padding-inline: 0; }
.blk-hero[data-variant="full"] .blk-split { grid-template-columns: 1fr; gap: 0; }
.blk-hero[data-variant="full"] .blk-split > .blk-col { grid-area: 1 / 1; }
.blk-hero[data-variant="full"] .blk-img {
  aspect-ratio: auto;
  block-size: 100%;
  min-block-size: min(40rem, 82svh);
  border-radius: 0;
}
/*
  Perde ve beyaz yazı yalnız GÖRSEL VARSA — overlay varyantındaki kuralın
  aynı gerekçesi: fotoğrafını silen bir müşteride açık şemada beyaz yazı
  beyaz zeminde kalırdı. Görsel yokken yazı sayfanın kendi mürekkebine
  dönüyor ve paletin kontrast garantisi altında kalıyor.
*/
.blk-hero[data-variant="full"] .blk-split:has(.blk-img) > .blk-col:first-child {
  z-index: 1;
  align-self: end;
  color: #fff;
  /* Yazı rayda, perde tam genişlikte: ray hizası kaybolmadan fotoğraf
     kenardan kenara uzanıyor. */
  padding: calc(var(--space-lg) * 2) max(var(--space-md), (100% - 72rem) / 2) var(--space-lg);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg) * 2),
    rgb(0 0 0 / 0) 100%);
}
.blk-hero[data-variant="full"] .blk-split:has(.blk-img) .blk-eyebrow,
.blk-hero[data-variant="full"] .blk-split:has(.blk-img) .blk-lede {
  color: inherit; opacity: 0.9;
}
/* Görsel yoksa yazı rayına geri dönüyor: perde de yok, ortalanacak bir
   fotoğraf da. */
.blk-hero[data-variant="full"] .blk-col {
  padding-inline: max(var(--space-md), (100% - 72rem) / 2);
}
.blk-hero[data-variant="full"] .blk-slot { min-block-size: 20rem; }

/* ── hero: görsele binen kart ───────────────────────────────
   Fotoğraf üstte, yazı onun alt kenarına binen bir kartta. Perde yok:
   yazının zemini kartın kendisi, yani kontrast fotoğraftan bağımsız. */
.blk-hero[data-variant="card"] .blk-split { grid-template-columns: 1fr; gap: 0; }
.blk-hero[data-variant="card"] .blk-img { aspect-ratio: 21 / 9; min-block-size: 16rem; }
.blk-hero[data-variant="card"] .blk-split > .blk-col:first-child { order: 2; }
.blk-hero[data-variant="card"] .blk-split:has(.blk-img) > .blk-col:first-child {
  z-index: 1;
  margin-block-start: calc(var(--space-lg) * -1);
  margin-inline: var(--space-md);
  padding: var(--space-md);
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}
@container (min-width: 48rem) {
  .blk-hero[data-variant="card"] .blk-split:has(.blk-img) > .blk-col:first-child {
    margin-inline: var(--space-lg);
  }
}

/* ── hero: renkli zemin ─────────────────────────────────────
   Fotoğrafı olmayan müşteri için. Ton ana renkten türüyor, sabit bir
   renk değil: her temada kendi paletinde kalıyor. */
.blk-hero[data-variant="tint"] {
  background: color-mix(in oklab, var(--site-primary) 12%, var(--site-surface));
}

/* ── hero: sade ─────────────────────────────────────────────
   Yalnız yazı, ve yazı büyük. Avukat, mali müşavir, danışman: satılan
   şey bir cümle, fotoğrafı yok. Ölçü satır uzunluğuyla sınırlı —
   4,5rem'lik bir başlık rayın tamamına yayılırsa okunmuyor. */
.blk-hero[data-variant="minimal"] { padding-block: calc(var(--space-lg) * 1.4) var(--space-lg); }
.blk-hero[data-variant="minimal"] .blk-split { grid-template-columns: 1fr; }
.blk-hero[data-variant="minimal"] .blk-title {
  font-size: clamp(2.1rem, 1.2rem + 4vw, 4.25rem);
  max-inline-size: 18ch;
}
.blk-hero[data-variant="minimal"] .blk-lede { max-inline-size: 44rem; }

/* ── hero: dar bant ─────────────────────────────────────────
   İç sayfa başlığı. Bir bölüm değil, sayfanın adı: ana sayfa açılışının
   ölçüsüyle çizilince yirmi iç sayfanın yirmisi de ana sayfa gibi
   açılıyordu. */
.blk-hero[data-variant="band"] { padding-block: var(--space-md); }
.blk-hero[data-variant="band"] .blk-split { grid-template-columns: 1fr; }
.blk-hero[data-variant="band"] .blk-title { font-size: var(--step-2); margin-block-end: 0.25rem; }
.blk-hero[data-variant="band"] .blk-lede { font-size: var(--step-0); margin-block-end: 0; }
.blk-hero[data-variant="band"] .blk-actions { margin-block-start: var(--space-sm); }
/* Ortalı açılışla aynı gerekçe: ardından gelen bölümün üst boşluğu
   ayrımı zaten yapıyor, iki boşluk üst üste binince araya hiçbir şeyin
   olmadığı bir şerit giriyor. */
main > div:first-child:not(:last-child) > .blk-hero[data-variant="band"] {
  padding-block-end: 0;
}

/* ── açılış: görsel döngüsü ─────────────────────────────────
   Şerit betiksiz de gezilebilir: yatay kaydırılan, duraklara oturan bir
   kutu (aynı fikir .blk-marquee'de). Oklar, noktalar ve kendiliğinden
   ilerleme betikle geliyor ve gelmezse hiçbiri görünmüyor. */
.blk-slides { position: relative; }
.blk-slides-track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.blk-slides-track::-webkit-scrollbar { display: none; }
.blk-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.blk-slide figcaption {
  margin-block-start: 0.35rem;
  font-size: var(--step--1);
  color: var(--site-muted);
}
/* Oklar fotoğrafın üstünde ama fotoğrafa ait değil: kendi zeminleri var,
   yoksa açık bir karede beyaz ok kayboluyor. */
.blk-slides-arrow {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--site-line);
  border-radius: 999px;
  background: var(--site-surface);
  color: var(--site-ink);
  box-shadow: var(--site-shadow);
  cursor: pointer;
}
.blk-slides-arrow svg { inline-size: 1.25rem; block-size: 1.25rem; }
.blk-slides-arrow[data-slides-go="-1"] { inset-inline-start: var(--space-sm); }
.blk-slides-arrow[data-slides-go="1"] { inset-inline-end: var(--space-sm); }
.blk-slides-dots {
  display: flex;
  justify-content: center;
  gap: 0.1rem;
  margin-block-start: var(--space-sm);
}
/* Tıklama hedefi noktanın kendisi değil çevresindeki kutu: 0,55rem'lik
   bir daireye parmakla isabet ettirmek şans işi. */
.blk-slides-dot {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.blk-slides-dot::before {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 999px;
  background: var(--site-line);
}
.blk-slides-dot[aria-current="true"]::before { background: var(--site-primary-ink); }

/* Yazı görselin üstünde: iki kolon aynı gözde, perde metnin arkasında.
   Kural :has(.blk-slides) istiyor — yer tutucu çizilen bir bölümde
   (henüz fotoğraf yok) beyaz yazı beyaz zeminde kalırdı. */
.blk-hero-slider[data-variant="over"] .blk-split { grid-template-columns: 1fr; gap: 0; }
.blk-hero-slider[data-variant="over"] .blk-split:has(.blk-slides) > .blk-col { grid-area: 1 / 1; }
.blk-hero-slider[data-variant="over"] .blk-slide .blk-img {
  aspect-ratio: 21 / 9; min-block-size: 20rem;
}
.blk-hero-slider[data-variant="over"] .blk-split:has(.blk-slides) > .blk-col:first-child {
  z-index: 1;
  align-self: end;
  color: #fff;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
  border-end-start-radius: var(--site-img-radius);
  border-end-end-radius: var(--site-img-radius);
}
.blk-hero-slider[data-variant="over"] .blk-split:has(.blk-slides) .blk-eyebrow,
.blk-hero-slider[data-variant="over"] .blk-split:has(.blk-slides) .blk-lede {
  color: inherit; opacity: 0.9;
}
/* Metin perdenin altında dururken oklar ve noktalar onun üstünde
   kalmalı: aksi hâlde metin kolonu bütün tıklamaları yutuyor. */
.blk-hero-slider[data-variant="over"] .blk-slides-arrow { z-index: 2; }
.blk-hero-slider[data-variant="over"] .blk-slides-dots {
  position: absolute;
  inset-block-end: var(--space-xs);
  inset-inline: 0;
  z-index: 2;
  margin: 0;
}
.blk-hero-slider[data-variant="over"] .blk-slides-dot::before {
  background: rgb(255 255 255 / 0.5);
}
.blk-hero-slider[data-variant="over"] .blk-slides-dot[aria-current="true"]::before {
  background: #fff;
}

/* ── açılış: video ──────────────────────────────────────────
   Kapak fotoğrafı düğmenin İÇİNDE: tıklanacak alan fotoğrafın kendisi,
   altına iliştirilmiş ince bir satır değil. Gömme onay gelmeden
   yüklenmiyor (bkz. video bloğu) ve onay gelince betik düğmeyi tamamen
   kaldırıyor — o yüzden düğmenin gitmesi kutuyu boş bırakmıyor, altında
   iframe zaten duruyor. */
.blk-video-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--site-img-radius);
  overflow: hidden;
  background: var(--site-soft);
}
.blk-video-hero iframe {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; border: 0;
}
.blk-video-ask {
  position: absolute; inset: 0;
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  text-align: start;
}
.blk-video-ask .blk-img {
  grid-area: 1 / 1;
  block-size: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
/* Oynat işareti fotoğrafın ortasında ve kendi zemini var: açık bir
   karede beyaz üçgen görünmüyor. */
.blk-video-play {
  grid-area: 1 / 1;
  place-self: center;
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  transition: background 0.2s;
}
.blk-video-play svg { inline-size: 2rem; block-size: 2rem; }
.blk-video-ask:hover .blk-video-play { background: var(--site-primary); }
/* Uyarı satırı alt kenarda, perdenin üstünde: ziyaretçi neye onay
   verdiğini tıklamadan önce okuyor. */
.blk-video-notice {
  grid-area: 1 / 1;
  align-self: end;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  font-size: var(--step--2);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}
.blk-hero-video[data-variant="below"] .blk-split { grid-template-columns: 1fr; }
.blk-hero-video[data-variant="below"] .blk-col:first-child { text-align: center; }
.blk-hero-video[data-variant="below"] .blk-actions { justify-content: center; }
.blk-hero-video[data-variant="below"] .blk-lede { margin-inline: auto; max-inline-size: 44rem; }

/* ── açılış: fotoğraf mozaiği ───────────────────────────────
   Kareler eşit değil: ilki büyük duruyor, kalanlar yanında. Hepsi eşit
   olsaydı mozaik değil ızgara olurdu ve göz nereden başlayacağını
   bilemezdi. Kutunun kendi oranı sabit — fotoğraf sayısı değişince
   yanındaki metin kolonu zıplamıyor. */
.blk-mosaic {
  display: grid;
  gap: var(--space-sm);
  aspect-ratio: 4 / 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.blk-mosaic > * { margin: 0; block-size: 100%; }
.blk-mosaic .blk-img { aspect-ratio: auto; block-size: 100%; }
.blk-mosaic .blk-slot { block-size: 100%; }
/* İki kare yan yana, üç karede ilki tam boy. Dört karede varsayılan
   ızgara zaten doğru. */
.blk-hero-mosaic[data-count="2"] .blk-mosaic { grid-template-rows: minmax(0, 1fr); aspect-ratio: 16 / 9; }
.blk-hero-mosaic[data-count="3"] .blk-mosaic > :first-child { grid-row: span 2; }

/* Ekran boyu mozaik.

   Kutunun sabit 4/3 oranı normalde doğru: fotoğraf sayısı değişince
   yanındaki metin kolonu zıplamıyor. Ekranı kaplarken tersi geçerli —
   sabit oran bırakılmazsa mozaik uzun ekranın ortasında küçük kalır ve
   bölümün alt yarısı boş görünür. Burada kareler kolonun tamamını
   dolduruyor, yazı kolonu ise ortada duruyor.

   Yükseklik hesabı sayı kartlı açılıştakiyle aynı gerekçeye dayanıyor:
   üst bar akışta. */
.blk-hero-mosaic[data-height="screen"] {
  min-block-size: calc(100svh - var(--site-head-h));
  display: grid;
}
.blk-hero-mosaic[data-height="screen"] > .blk-in { inline-size: 100%; display: grid; }
@container (min-width: 48rem) {
  .blk-hero-mosaic[data-height="screen"] .blk-split { align-items: stretch; }
  .blk-hero-mosaic[data-height="screen"] .blk-split > .blk-col:first-child { align-self: center; }
  .blk-hero-mosaic[data-height="screen"] .blk-mosaic { aspect-ratio: auto; block-size: 100%; }
}

/* ── açılış: formlu ─────────────────────────────────────────
   Panel kart, bant değil: yarım kolonda duran bir form kendi kutusunu
   taşımak zorunda, yoksa yanındaki metinden ayrılmıyor. */
.blk-hero-panel {
  padding: var(--space-md);
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}
.blk-hero-panel-head {
  margin: 0 0 var(--space-sm);
  font-family: var(--site-font-heading);
  font-size: var(--step-1);
  font-weight: var(--site-h-weight);
}
/*
  Panelin içindeki form tek sütun. Kap sorgusu bölümün kendisini ölçüyor
  (container-type .blk'de) ve geniş ekranda 48rem'i geçiyor, yani form
  yarım kolonun içinde iki sütuna açılıyordu: 9rem genişliğinde iki alan.
  Formun ölçüsünü belirleyen şey bölümün değil panelin genişliği.
*/
.blk-hero-panel .blk-form { grid-template-columns: 1fr; }
.blk-hero-panel .blk-form label:has(textarea) { grid-column: 1; grid-row: auto; }
.blk-hero-panel .blk-form button { justify-self: stretch; }
.blk-hero-form .blk-booking-promises { margin-block-start: var(--space-md); }

/* ── açılış: arama şeridi ───────────────────────────────────
   Arka plan fotoğrafı bölümün zemini; şerit onun üstünde kendi zeminini
   taşıyor. İki katman ayrı: fotoğraf değişince kutuların okunurluğu
   değişmiyor. */
.blk-hero-search { position: relative; isolation: isolate; }
/*
  Katman sırası elle veriliyor. Perde bir ::before ve kutu ağacında
  fotoğrafın ÖNÜNDE duruyor; ikisi de konumlandırılmış ve z-index'siz
  olduğu için boyama sırası DOM sırası oluyordu — fotoğraf perdenin
  üstüne biniyor ve perde hiç görünmüyordu. Sonuç, açık bir karenin
  üstünde beyaz başlıktı: ölçüldü, gökyüzü bölgesinde 1.2:1.
*/
.blk-hero-cover {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  z-index: 0;
}
/*
  Perde ve beyaz yazı yalnız fotoğraf varken — data-cover niteliğini
  görünüm ancak görsel doluyken basıyor. Fotoğrafsız kullanımda başlık
  sayfanın kendi mürekkebinde kalıyor ve paletin garantisi altında.
*/
.blk-hero-search[data-cover]::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 0.5);
}
.blk-hero-search[data-cover] { color: #fff; }
.blk-hero-search[data-cover] .blk-eyebrow,
.blk-hero-search[data-cover] .blk-lede { color: inherit; opacity: 0.92; }
.blk-hero-search-in { position: relative; z-index: 2; text-align: center; }
.blk-hero-search-in .blk-lede { margin-inline: auto; max-inline-size: 44rem; }
.blk-hero-search-in .blk-actions { justify-content: center; }
.blk-searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  padding: var(--space-sm);
  background: var(--site-surface);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
  /* Şerit kendi zeminini taşıyor, yazısı da kendi mürekkebini: üstteki
     beyaz yazı kuralı buraya inmiyor. */
  color: var(--site-ink);
  text-align: start;
}
/*
  Kısık ton etikette, denetimde değil: liste "color: inherit" alıyor ve
  alanın tamamı soluk olduğunda seçilen değer de yer tutucu tonunda
  kalıyordu — "Kardiyoloji" seçilmiş ama "Seçiniz" gibi okunuyordu.
*/
.blk-searchbar-field {
  display: grid;
  gap: 0.25rem;
  flex: 1 1 9rem;
  font-size: var(--step--1);
  color: var(--site-ink);
}
.blk-searchbar-field > span:first-child { color: var(--site-muted); }
.blk-searchbar-field[data-grow] { flex: 2 1 13rem; }
.blk-searchbar-field input {
  font: inherit;
  font-size: max(1rem, var(--step-0));
  padding: 0.55rem 0.7rem;
  min-block-size: 2.75rem;
  border: 1px solid var(--site-control-line, var(--site-muted));
  border-radius: var(--site-radius);
  background: var(--site-surface);
  color: var(--site-ink);
}
/* Düğme alanların hizasında: şerit sarınca kendi satırına düşüyor ve
   orada tam genişlik alıyor — yarım bir "Ara" düğmesi kabı gösterirdi. */
.blk-searchbar > .blk-btn { flex: 1 1 8rem; justify-content: center; min-block-size: 2.75rem; }
@container (min-width: 48rem) {
  .blk-searchbar > .blk-btn { flex: 0 0 auto; }
}
/* Not şeride yapışıktı: 0.5rem'lik payla kutunun gölgesinin içinde
   kalıyor ve ayrı bir cümle olduğu okunmuyordu. */
.blk-searchbar-note {
  margin-block-start: var(--space-md);
  font-size: var(--step--2);
  opacity: 0.85;
}

/* ── açılış: rakamlı ────────────────────────────────────────
   Rakamlar başlığın altında, ayrı bir bölüm olarak değil: iddia ile
   kanıt aynı ekranda okunuyor. */
.blk-hero-stats .blk-narrow { text-align: center; }
.blk-hero-stats .blk-lede { margin-inline: auto; }
.blk-hero-stats .blk-actions { justify-content: center; }
.blk-hero-figures {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--site-line);
}
.blk-hero-figures .blk-stat { margin: 0; }

/* ── açılış: güven şeritli ──────────────────────────────────
   Rozetler açılışın altında, ayrı bir logo şeridi olarak değil:
   sertifikanın işi ziyaretçi daha hiçbir şey okumadan görülmek. */
.blk-badges {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: var(--space-md) 0 0;
  border-block-start: 1px solid var(--site-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
}
.blk-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--site-muted);
}
.blk-badge-icon { flex: none; inline-size: 1.75rem; block-size: 1.75rem; object-fit: contain; }
/* Koyu tonlu ve şeffaf zeminli logo koyu şemada kayboluyor; plaka onu
   kendi zemininde tutuyor (aynı kural .blk-strip-item'da). */
.blk-badge-icon[data-tone="dark"] {
  background: var(--site-plate);
  border-radius: 0.35rem;
  padding: 0.15rem;
}
.blk-badge-seal { flex: none; inline-size: 1.35rem; block-size: 1.35rem; color: var(--site-primary-ink); }

/* ── açılış: iletişim şeritli ───────────────────────────────
   Telefon, adres ve bugünkü saat açılışın altında. Üçü de sayfanın
   altındaki iletişim bölümünde duruyordu; oraya inen ziyaretçi zaten
   kararını vermiş oluyor. */
.blk-reach {
  display: grid;
  gap: var(--space-sm) var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--site-line);
}
.blk-reach-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}
.blk-reach-item small {
  display: block;
  font-size: var(--step--2);
  color: var(--site-muted);
}
.blk-reach-item strong { font-weight: 600; }
/* Bağlantı olan satırlar altını çizmiyor ama tıklanabilir olduklarını
   göstermeleri gerekiyor: renk üstüne gelince değişiyor. */
a.blk-reach-item:hover strong { color: var(--site-primary-ink); }
.blk-reach-hours .blk-open-state { margin: 0 0 0.1rem; }
.blk-reach-more { margin-block-start: var(--space-sm); font-size: var(--step--1); }
.blk-reach-more summary { cursor: pointer; color: var(--site-muted); }
.blk-reach-more .blk-hours { margin-block-start: var(--space-sm); max-inline-size: 26rem; }

/* ── açılış: yorumlu ────────────────────────────────────────
   Tek yorum, yorum listesi değil: açılışta okunacak şey bir tane.
   Kart başlığın altında, kendi zemininde — alıntı, tanıtım yazısının
   devamı gibi okunmamalı. */
.blk-hero-quote-card {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
}
.blk-hero-quote-card blockquote { margin: 0; font-size: var(--step-1); }
.blk-rating { display: flex; gap: 0.1rem; margin: 0 0 0.5rem; color: var(--site-primary-ink); }
.blk-rating svg { inline-size: 1.1rem; block-size: 1.1rem; }
.blk-hero-quote-by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: var(--space-sm);
}
/* Madalyon kartın içinde küçülüyor: ekip kartındaki 6rem'lik ölçü
   burada tek satırlık bir imzanın yanında duruyor. */
.blk-hero-quote-by .blk-avatar { inline-size: 2.75rem; block-size: 2.75rem; }
.blk-hero-quote-by small { display: block; color: var(--site-muted); font-size: var(--step--2); }

/* ── açılış: öncesi / sonrası ───────────────────────────────
   Kırpma yüzdesi --at değişkeninde; kolun tek yaptığı onu değiştirmek.
   Betik gelmezse değişken 50%'de kalıyor ve ziyaretçi yine öncesini
   solda, sonrasını sağda görüyor — kol yalnız o çizgiyi gezdiriyor. */
.blk-compare {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--site-img-radius);
  touch-action: pan-y;
}
.blk-compare > .blk-img { grid-area: 1 / 1; aspect-ratio: 4 / 3; }
/*
  Kırpma clip-path ile, genişlikle değil: kutuyu daraltmak içindeki
  fotoğrafı da daraltıyor ve iki kare artık aynı yeri göstermiyor.
  clip-path fotoğrafı olduğu yerde bırakıp yalnız görünen parçasını
  kesiyor.
*/
.blk-compare-after {
  grid-area: 1 / 1;
  clip-path: inset(0 calc(100% - var(--at, 50%)) 0 0);
}
.blk-compare-after .blk-img { aspect-ratio: 4 / 3; }
.blk-compare::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--at, 50%);
  inline-size: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
  pointer-events: none;
}
.blk-compare-tag {
  position: absolute;
  inset-block-end: var(--space-sm);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.62);
  color: #fff;
  font-size: var(--step--2);
  pointer-events: none;
}
.blk-compare-tag[data-side="before"] { inset-inline-start: var(--space-sm); }
.blk-compare-tag[data-side="after"] { inset-inline-end: var(--space-sm); }
/*
  Kol fotoğrafın tamamını kaplıyor ve rayı görünmüyor: sürüklenen şey
  çizginin kendisiymiş gibi duruyor. Tutamacın kendisi büyük — 2,75rem
  parmakla isabet ettirilebilen en küçük hedef.
*/
.blk-compare-range {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.blk-compare-range::-webkit-slider-thumb {
  appearance: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgb(0 0 0 / 0.35);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  cursor: ew-resize;
}
.blk-compare-range::-moz-range-thumb {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgb(0 0 0 / 0.35);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  cursor: ew-resize;
}
.blk-compare-range:focus-visible { outline: 3px solid var(--site-primary); outline-offset: 2px; }
.blk-compare-slots { display: grid; gap: var(--space-sm); grid-template-columns: 1fr 1fr; }
.blk-compare-consent {
  margin-block-start: var(--space-sm);
  font-size: var(--step--2);
  color: var(--site-muted);
}

/* ── açılış: ürün / menü ────────────────────────────────────
   Fiyat başlıkla aynı ekranda: fiyatı görmek için sayfayı aşağı sürmek
   gerekiyorsa fiyat gizlenmiş sayılıyor. */
.blk-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 var(--space-sm); }
.blk-price strong {
  font-family: var(--site-font-heading);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--site-primary-ink);
}
.blk-price small { color: var(--site-muted); font-size: var(--step--1); }
/* Ürün karesi kare: satılan şey ortada dursun diye. Sahne fotoğrafının
   16:10'u burada ürünü kenarlarından kırpıyordu. */
.blk-product-img { aspect-ratio: 1 / 1; }
.blk-hero-product .blk-booking-promises { margin-block-end: var(--space-md); }

/* ── açılış: haritalı ───────────────────────────────────────
   Harita adres bloğunun kutusunu olduğu gibi kullanıyor (.blk-map-frame):
   gömme onay gelene kadar yüklenmiyor ve bekleyen işaret yerini tutuyor.
   Tek fark oran — açılışta harita metin kolonuyla aynı boyu tutuyor. */
.blk-hero-map .blk-map-frame { min-block-size: 18rem; }

/* ═══ SAĞLIK BÖLÜMLERİ ══════════════════════════════════════
   Sağlık sitesinin söylemesi gereken ama katalogda kutusu olmayan şeyler.
   Hepsi aynı testten geçti: mevcut bir blokla yazıldığında bilgi tek bir
   paragrafa sıkışıyor mu — sıkışıyorsa ayrı alan, ayrı blok. */

/* ── tetkik hazırlığı ───────────────────────────────────────
   Üç soru her tetkikte aynı: nasıl hazırlanırım, ne kadar sürer, sonuç ne
   zaman. Üçü ayrı alan olduğu için hasta iki satırı yan yana koyup
   karşılaştırabiliyor; tek paragrafta bu mümkün değildi. */
.blk-prep { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.blk-prep-group { margin-block: var(--space-md) var(--space-sm); }
.blk-prep-row {
  padding: var(--space-sm) var(--space-md);
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
}
.blk-prep-name { margin: 0 0 0.4rem; font-weight: 600; }
/*
  Etiket üstte, değer altta. Yan yana konsaydı "Hazırlık" ile "Süre"
  sütunları farklı uzunlukta değerlerle hizasız kalırdı; alt alta duran
  çift, dar ekranda da aynı çift olarak okunuyor.
*/
.blk-prep-facts {
  margin: 0;
  display: grid;
  gap: var(--space-sm) var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.blk-prep-facts > div { display: grid; gap: 0.1rem; }
.blk-prep-facts dt {
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--site-muted);
}
.blk-prep-facts dd { margin: 0; font-size: var(--step--1); }
/*
  Uyarı ayrı bir tonda: "6 saat aç kalın" ile "hamileyseniz bildirin" aynı
  ağırlıkta okunursa ikincisi kaçıyor. Renk tek başına taşımıyor — üçgen
  işaret aynı şeyi renk görmeyen ziyaretçiye de söylüyor.
*/
.blk-prep-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: var(--space-sm) 0 0;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--site-line);
  font-size: var(--step--1);
}
.blk-prep-note svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.15rem; }
.blk-footnote { margin: var(--space-md) 0 0; font-size: var(--step--2); color: var(--site-muted); }

/* ── anlaşmalı kurumlar ─────────────────────────────────────
   Logo şeridi değil tablo: "anlaşmalıyız" ile "hangi işlemde anlaşmalıyız"
   arasındaki fark bir sütun ve hasta bunu telefonla soruyor. */
.blk-coverage { list-style: none; margin: 0; padding: 0; }
.blk-coverage-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--site-line);
}
.blk-coverage-row:last-child { border-block-end: 0; }
/* Plaka her satırda aynı ölçüde: logolu ve logosuz satırlar aynı sol
   eksenden başlıyor, liste tarak gibi kırılmıyor. */
.blk-coverage-mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 2.25rem;
  border-radius: 0.35rem;
  color: var(--site-primary-ink);
}
.blk-coverage-mark img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.blk-coverage-mark img[data-tone="dark"] { background: var(--site-plate); border-radius: 0.25rem; padding: 0.1rem; }
.blk-coverage-mark svg { inline-size: 1.3rem; block-size: 1.3rem; }
.blk-coverage-text { flex: 1 1 auto; min-inline-size: 0; }
.blk-coverage-text small { display: block; font-size: var(--step--2); color: var(--site-muted); }
.blk-coverage-scope { flex: none; }

/* ── cihaz künyesi ──────────────────────────────────────────
   Cihaz bir hizmet değil: adı, modeli, fotoğrafı ve teknik satırları bir
   arada durmak zorunda ki iki merkez karşılaştırılabilsin. */
.blk-devices {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.blk-device {
  display: flex;
  flex-direction: column;
  background: var(--card-surface, var(--site-soft));
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
  overflow: hidden;
}
.blk-device .blk-img, .blk-device .blk-slot { border-radius: 0; aspect-ratio: 4 / 3; }
.blk-device-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.5rem; }
.blk-device-body > * { margin: 0; }
/* Model adı başlığın altında ve kısık: "1.5 Tesla MR" satılan şey,
   "Siemens Magnetom Sola" onu doğrulayan künye. */
.blk-device-model {
  font-family: var(--site-font-heading);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--site-muted);
}
.blk-device-specs {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--site-line);
  font-size: var(--step--1);
}
/* Etiket solda değer sağda: teknik satırlar sayı taşıyor ve sayılar aynı
   kenardan hizalanınca okunuyor. */
.blk-device-specs > div { display: flex; justify-content: space-between; gap: var(--space-sm); }
.blk-device-specs dt { color: var(--site-muted); }
.blk-device-specs dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

/* ── ulaşım ─────────────────────────────────────────────────
   Adresten sonra sorulan asıl soru. Harita metroyla otobüsü ayırt
   etmiyor, otoparkın olup olmadığını hiç söylemiyor. */
.blk-directions {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.blk-direction { display: flex; align-items: flex-start; gap: 0.7rem; }
.blk-direction-mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--site-primary) 12%, var(--site-surface));
  color: var(--site-primary-ink);
}
.blk-direction-mark svg { inline-size: 1.4rem; block-size: 1.4rem; }

/* ── hekim kadrosu ──────────────────────────────────────────
   Kırk hekimlik kadro ekip ızgarasında okunmuyor: ziyaretçi bir isim değil
   bir branş arıyor. Branş başlık, altındaki satırlar kısa — kart kırk kez
   tekrarlandığında liste olmaktan çıkıyor. */
.blk-roster-group { margin-block: var(--space-md) var(--space-sm); }
.blk-roster-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.blk-roster-item { border-block-end: 1px solid var(--site-line); }
.blk-roster-item:last-child { border-block-end: 0; }
.blk-roster-face { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.6rem; }
.blk-roster-link { display: block; color: inherit; text-decoration: none; }
.blk-roster-link:hover .blk-roster-text strong { color: var(--site-primary-ink); }
/*
  Madalyon ekip kartında ortalanıyor ve altına boşluk bırakıyor
  (.blk-avatar'ın kendi kuralı, orada doğru). Satır düzeninde ikisi de
  yanlış: otomatik yan paylar madalyonu satırın ortasına itiyor ve
  yanındaki adı yüz piksel sağa kaydırıyordu — kadro listesi ortadan
  başlayan bir tarak gibi görünüyordu.
*/
.blk-roster-face .blk-avatar { margin: 0; }
.blk-roster-photo { inline-size: 3rem; block-size: 3rem; }
/* Baş harf uydurulmuş bir yüz değil: bir kişinin fotoğrafı yerine başka bir
   yüz koymak, o yüzün o kişi olduğunu iddia etmek olurdu. */
.blk-roster-initial {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  background: color-mix(in oklab, var(--site-primary) 14%, var(--site-surface));
  color: var(--site-primary-ink);
  font-family: var(--site-font-heading);
  font-size: var(--step-1);
}
.blk-roster-text { min-inline-size: 0; }
/* Ad kendi satırında ve bölünmüyor: "Ad Soyad" iki kelimelik bir bütün,
   ortasından kırıldığında iki ayrı isim gibi okunuyor. */
.blk-roster-text strong { display: block; font-weight: 600; text-wrap: balance; }
/* Unvan adın parçası değil, önündeki sıfat — üstünde ve kısık. */
.blk-roster-title { letter-spacing: 0.04em; }
.blk-roster-text small { display: block; font-size: var(--step--2); color: var(--site-muted); }

/* Satır satır: iki sütuna açılıyor, uzun kadro ekranı boşuna uzatmıyor. */
@container (min-width: 48rem) {
  .blk-roster[data-variant="rows"] .blk-roster-list,
  .blk-roster[data-variant="grouped"] .blk-roster-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
}
/* Kartlar: kadro kısa olduğunda — sekiz hekimlik bir merkez liste değil,
   tanıtım. */
.blk-roster[data-variant="cards"] .blk-roster-list {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-sm);
}
.blk-roster[data-variant="cards"] .blk-roster-item {
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: var(--card-surface, var(--site-soft));
  box-shadow: var(--site-shadow);
}
.blk-roster[data-variant="cards"] .blk-roster-face { padding: var(--space-sm) var(--space-md); }

/* ── bölümler ───────────────────────────────────────────────
   Kart bir özelliği anlatmıyor, bir kapı açıyor: simge, ad ve kendi
   sayfasına giden bağlantı. */
.blk-department { display: flex; flex-direction: column; gap: 0.35rem; }
.blk-department-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: 0.35rem;
  color: var(--site-primary-ink);
}
.blk-department .blk-h3 { margin: 0; }
.blk-department-text { margin: 0; font-size: var(--step--1); color: var(--site-muted); }

/* ── acil şeridi ────────────────────────────────────────────
   Kampanya şeridi değil: kampanya "kaçırmayın" der, bu "buradayız" der ve
   taşıdığı tek şey bir telefon numarası.

   Bant kendi düğme jetonlarını yeniden tanımlıyor — ana renk zeminin
   üstünde ana renk dolgulu bir düğme görünmez olurdu (aynı gerekçe
   .blk-campaign'de). */
.blk-emergency {
  background: var(--site-primary);
  color: var(--site-on-primary);
  --site-ink: var(--site-on-primary);
  --site-muted: var(--site-on-primary-muted);
}
.blk-emergency-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.blk-emergency-text { display: flex; flex-direction: column; gap: 0.35rem; }
.blk-emergency-text > * { margin: 0; }
.blk-emergency-hours {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  opacity: 0.9;
}
/* Sönüp yanan nokta "şu anda" diyor: sabit dursaydı bir etiket olurdu.
   Hareket kapalıysa nokta kalıyor ama yanıp sönmüyor — işaretin asıl işi
   orada olmak. */
.blk-emergency-pulse {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: currentColor;
  animation: blk-pulse 2.4s ease-in-out infinite;
}
@keyframes blk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.blk-emergency-note { font-size: var(--step--2); opacity: 0.85; }
/* Numara başlıkla aynı ağırlıkta: aranacak şey o, okunacak şey değil. */
.blk-emergency-call {
  background: var(--site-on-primary);
  color: var(--site-primary);
  border-color: var(--site-on-primary);
  font-family: var(--site-font-heading);
  font-size: var(--step-1);
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.blk-emergency-call svg { inline-size: 1.2rem; block-size: 1.2rem; }

/* ── sonuç sorgulama ────────────────────────────────────────
   Tek düğmeden fazlası: sonuca giden hasta çoğunlukla elinde ne olması
   gerektiğini bilmediği için geri dönüyor. */
.blk-lookup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
}
.blk-lookup-text { flex: 1 1 22rem; display: flex; flex-direction: column; gap: 0.5rem; }
.blk-lookup-text > * { margin: 0; }
/* Gereken belgeler numaralı: sıra bir şey söylüyor değil ama sayı
   "üç şey" diyor ve hasta çıkmadan önce sayabiliyor. */
.blk-lookup-needs {
  margin: 0;
  padding-inline-start: 1.2rem;
  font-size: var(--step--1);
  display: grid;
  gap: 0.2rem;
}
.blk-lookup-needs li::marker { color: var(--site-primary-ink); }
.blk-lookup-note { font-size: var(--step--2); color: var(--site-muted); }
.blk-lookup-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ═══ YENİ BLOK VARYANTLARI ═════════════════════════════════
   Yeni alan yok, yalnız duruş. Şablonlar arası farkı en ucuza çoğaltan
   yer burası: aynı içerik, aynı blok, başka bir okuma. */

/* feature-grid: büyük simgeli — bölüm ızgarası için. Simge kartın
   dekoru değil ilk okunan şeyi oluyor. */
.blk[data-variant="icons"] .blk-card { text-align: center; }
.blk[data-variant="icons"] .blk-icon {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-inline: auto;
  margin-block-end: var(--space-sm);
}

/*
  feature-grid: tek sütun liste. Uzun hizmet listesi kart ızgarasında
  okunmuyor — on dört kart üç sütuna bölününce göz her satırda soldan
  başlamak zorunda kalıyor. Tek sütunda ad solda, açıklama yanında.
*/
.blk[data-variant="list"] .blk-grid { grid-template-columns: 1fr; gap: 0; }
.blk[data-variant="list"] .blk-card {
  display: grid;
  gap: 0.15rem var(--space-md);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--site-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-sm) 0;
}
.blk[data-variant="list"] .blk-card:last-child { border-block-end: 0; }
.blk[data-variant="list"] .blk-card .blk-h3 { margin: 0; }
.blk[data-variant="list"] .blk-card p { margin: 0; color: var(--site-muted); }
.blk[data-variant="list"] .blk-icon { inline-size: 1.75rem; block-size: 1.75rem; margin: 0; }
@container (min-width: 48rem) {
  .blk[data-variant="list"] .blk-card { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: baseline; }
  .blk[data-variant="list"] .blk-card:has(.blk-icon) { grid-template-columns: 1.75rem minmax(0, 16rem) minmax(0, 1fr); }
  .blk[data-variant="list"] .blk-card .blk-icon { grid-row: span 1; align-self: center; }
}

/*
  team-grid: satır satır. Kalabalık kadroda kart, listeyi listelikten
  çıkarıyor; madalyon küçülüyor ve satırlar iki sütuna açılıyor.
*/
.blk[data-variant="rows"] .blk-grid { grid-template-columns: 1fr; gap: 0; }
@container (min-width: 48rem) {
  .blk[data-variant="rows"] .blk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
}
.blk[data-variant="rows"] .blk-person {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.1rem 0.85rem;
  align-items: center;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--site-line);
  border-radius: 0;
  box-shadow: none;
  padding: 0.7rem 0;
  text-align: start;
}
.blk[data-variant="rows"] .blk-person .blk-avatar,
.blk[data-variant="rows"] .blk-person .blk-slot {
  grid-row: 1 / span 3;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin: 0;
}
.blk[data-variant="rows"] .blk-person > :not(.blk-avatar, .blk-slot) { grid-column: 2; margin: 0; }
.blk[data-variant="rows"] .blk-person .blk-h3 { font-size: var(--step-0); }
.blk[data-variant="rows"] .blk-person-honorific,
.blk[data-variant="rows"] .blk-role { font-size: var(--step--1); color: var(--site-muted); }

/*
  price-list: tablo. Üçüncü sütun açıklama — sağlıkta "işlem · kapsam ·
  ücret" üçlüsü tek satırda okunmak zorunda, çünkü hasta ikisini birlikte
  soruyor. Dar ekranda satır iki kata iniyor: üç sütun 360 pikselde
  okunmuyor.
*/
.blk[data-variant="table"] .blk-prices { display: grid; gap: 0; }
.blk[data-variant="table"] .blk-prices > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem var(--space-md);
  align-items: baseline;
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--site-line);
}
.blk[data-variant="table"] .blk-prices > li:last-child { border-block-end: 0; }
.blk[data-variant="table"] .blk-price-name small {
  display: block;
  color: var(--site-muted);
  font-size: var(--step--1);
}
.blk[data-variant="table"] .blk-price-value { font-variant-numeric: tabular-nums; }
@container (min-width: 48rem) {
  .blk[data-variant="table"] .blk-prices > li {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
  }
  .blk[data-variant="table"] .blk-price-name small {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
  }
}

/*
  faq: başlık yanda. Bölüm başlığı ve giriş solda sabit dururken sorular
  sağda akıyor — uzun bir SSS listesinde başlık ekrandan çıkıp "bunlar
  neyin soruları" bilgisini götürüyordu.
*/
.blk-faq-split { align-items: start; }
@container (min-width: 48rem) {
  .blk-faq-split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-lg); }
  .blk-faq-split > .blk-col:first-child { position: sticky; inset-block-start: var(--space-md); }
}

/* faq: hepsi açık. Ok işareti kalıyor — kapatılabilir olduğu görünmeli. */
.blk[data-variant="open"] .blk-faq { padding-block-end: var(--space-sm); }

/*
  steps: yatay şerit. Hasta yolculuğu ekranı aşağı sürmeden okunuyor;
  numaralar bir çizgiyle birbirine bağlanıyor, yani sıra görsel olarak da
  duruyor. Dar ekranda dikey kuralına geri düşüyor — dört adım 360
  pikselde yan yana durmuyor.
*/
@container (min-width: 48rem) {
  /* grid-template-columns kapatılmadan auto-flow:column etkisiz kalıyor:
     taban kural auto-fit ile açık sütunlar tanımlıyor ve o tanım
     otomatik sütunları hiç doğurmuyor. */
  .blk[data-variant="horizontal"] .blk-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  /* Madalyon adımın solunda değil üstünde: yatay dizilimde sol sütun
     her adımdan bir tutam yer alıp metni 1fr'nin yarısına indiriyordu. */
  .blk[data-variant="horizontal"] .blk-steps > li {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.45rem;
  }
  .blk[data-variant="horizontal"] .blk-steps > li > *,
  .blk[data-variant="horizontal"] .blk-steps > li::before { grid-column: 1; }
  /* Adımları bağlayan çizgi madalyonun ortasından çıkıp bir sonrakine
     gidiyor; ızgara boşluğunu da geçmesi gerekiyor, yoksa şerit her
     adımda kesiliyor. Son adımda çizilmiyor: bağlanacak bir sonraki yok. */
  .blk[data-variant="horizontal"] .blk-steps > li::after {
    content: "";
    position: absolute;
    inset-block-start: 0.8rem;
    inset-inline-start: 2.25rem;
    inline-size: calc(100% - 2.25rem + var(--space-md));
    block-size: 2px;
    background: var(--site-line);
  }
  .blk[data-variant="horizontal"] .blk-steps > li:last-child::after { display: none; }
}

/* testimonials: puanlı. Yıldızlar alıntının üstünde — okumadan önce
   görülen şey puan. */
.blk[data-variant="rating"] .blk-quote { display: flex; flex-direction: column; gap: 0.5rem; }
.blk[data-variant="rating"] .blk-quote > * { margin: 0; }

/*
  stats: zemin varyantı. Varsayılan "soft" eski davranışın kendisi;
  band ana renge, cards kutulara, plain hiçbirine oturuyor.
*/
.blk-stats[data-variant="band"] {
  background: var(--site-primary);
  color: var(--site-on-primary);
  --site-muted: var(--site-on-primary-muted);
}
.blk-stats[data-variant="band"] .blk-stat-value { color: inherit; }
/*
  Görsel diller (brutal, material, cam) rakam bölümünün zeminini saydam
  yapıp içerideki rayı panel olarak boyuyor — o dillerde "Rakamlarla"
  yüzen bir kutu. Bant duruşunda o kutu yanlış: bölümün kendisi zaten
  bir bant ve panelin açık zemini üstündeki beyaz rakamı okunmaz
  bırakıyordu (ölçüldü: 1.4:1). Seçici dil dosyasınınkinden özgül,
  yani hangi sırayla yüklendiğinden bağımsız kazanıyor.
*/
.blk-stats[data-variant="band"] > .blk-in {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.blk-stats[data-variant="plain"] { background: transparent; }
.blk-stats[data-variant="cards"] { background: transparent; }
.blk-stats[data-variant="cards"] .blk-stat {
  background: var(--card-surface, var(--site-soft));
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
  padding: var(--space-md) var(--space-sm);
}

/*
  location: geniş harita. Adres tek satırlık bir bilgi, harita bakılan
  şey; yan yana durduklarında harita yarım kolona sıkışıp sokak adlarını
  okunmaz hâle getiriyordu.
*/
.blk-location[data-variant="wide"] .blk-map-frame {
  margin-block-start: var(--space-md);
  aspect-ratio: 21 / 9;
  min-block-size: 16rem;
}

/*
  collection-latest: satır listesi. Sağlık rehberi yazıları kapak görseli
  olmadan da anlamlı; kart ızgarası görselsiz yazılarda boş kutulara
  dönüyordu.
*/
.blk-posts[data-variant="list"] .blk-grid { grid-template-columns: 1fr; gap: 0; }
.blk-posts[data-variant="list"] .blk-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--site-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-sm) 0;
}
.blk-posts[data-variant="list"] .blk-card:last-child { border-block-end: 0; }
.blk-posts[data-variant="list"] .blk-card > .blk-img { display: none; }
.blk-posts[data-variant="list"] .blk-card .blk-h3 { margin: 0; font-size: var(--step-0); }
.blk-posts[data-variant="list"] .blk-card p { margin: 0; color: var(--site-muted); font-size: var(--step--1); }

/*
  cta: solda çağrı, sağda kart. Şerit varyantı ile aynı içerik ama
  düğmeler kendi kutusunda duruyor — ana renk bandının üstünde iki
  düğme birbirine yapışık okunuyordu.
*/
.blk-cta[data-variant="split"] .blk-cta-in { align-items: stretch; }

/*
  Kartın ölçüsü içeriğinden gelmiyor, düzenden geliyor.

  Taban kural saran bir flex satırı ve kart kendi içeriği kadar genişliyordu:
  "Randevu talebi" yazan bir düğme ile telefon numarası yan yana ne kadar
  yer tutuyorsa kart o kadar — 1200 piksellik bir rayda 220 piksellik bir
  kutu, solundaki başlıkla aynı bölüme ait görünmüyor. Dar ölçüde ise
  sarıyor ama genişlemiyordu: telefonun tamamı boşken kart solda küçük bir
  kutu olarak kalıyordu.

  İki cevap tek kuralda: taban "kendi satırını doldur", geniş ölçüde sabit
  bir sütun. Yazı tarafı kalanı alıyor.
*/
.blk-cta[data-variant="split"] .blk-cta-in > :first-child {
  flex: 1 1 22rem;
  min-inline-size: 0;
}
.blk-cta[data-variant="split"] .blk-actions {
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--site-surface);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
  /*
    Kart kendi zeminini taşıyor, yani bandın düğme takımı burada yanlış.
    Vurgulu bant düğmeyi ters çeviriyor (beyaz dolgu, ana renk yazı) ve o
    düğme beyaz kartın üstünde tamamen kayboluyordu: geriye yalnız mavi
    bir kelime kalıyor, tıklanacak bir şey görünmüyordu. Takım kartın
    zeminine göre yeniden kuruluyor.
  */
  --btn-fill: var(--site-primary);
  --btn-ink: var(--site-on-primary);
  --btn-fill-hover: var(--site-primary);
  --btn-ink-hover: var(--site-on-primary);
  --btn-border: 1px solid var(--site-primary);
  color: var(--site-ink);
}
.blk-cta[data-variant="split"] .blk-actions .blk-btn { justify-content: center; }

@container (min-width: 48rem) {
  .blk-cta[data-variant="split"] .blk-actions { flex: 0 0 22rem; }
}
/*
  İkincil düğme kartın içinde dolgusuz kalıyor ama kenarlığı görünür:
  ikisi de dolgulu olsaydı hangisinin asıl yol olduğu kaybolurdu.

  Token'lar --btn-quiet-*, --btn-* değil. Eskiden --btn-fill/--btn-ink
  yazıyordu ve .blk-btn-quiet onları hiç okumuyor (bkz. kuralın kendisi):
  düğme bandın verdiği --btn-quiet-ink'i, yani --site-on-primary'yi
  kullanmaya devam ediyordu — beyaz kartın üstünde beyaz yazı. Vurgulu
  bantla "split" varyantını birlikte kullanan her şablonda telefon
  numarası görünmüyordu.
*/
.blk-cta[data-variant="split"] .blk-actions .blk-btn-quiet {
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: var(--site-primary-ink);
  --btn-quiet-fill-hover: transparent;
  --btn-quiet-border: 1px solid var(--site-primary);
  --btn-quiet-edge: 1px solid var(--site-primary);
}

/* ── belirme ────────────────────────────────────────────────
   Tek bir makine, üç görünüm. Betik yalnız "bu bölüm göründü" diyor
   ([data-shown], bkz. site.js); nasıl geleceğini burası söylüyor.

   Gizleyen kuralların tamamı iki koşula bağlı:

     · <html data-motion>  — işareti <head>'deki iki satırlık betik koyuyor.
       Betiksiz bir tarayıcıda işaret hiç konmuyor, yani hiçbir şey
       gizlenmiyor: sayfa animasyonsuz ama eksiksiz açılıyor. Gözlemcisi
       olmayan eski bir tarayıcıda site.js işareti kaldırıyor.
     · prefers-reduced-motion: no-preference — hareket istemeyen ziyaretçide
       kural hiç kurulmuyor. "Animasyonu sıfır saniyeye indirmek" değil,
       başlangıç durumunu hiç yazmamak: sıfır saniyelik bir geçiş de bir
       kare boyunca boş bir bölüm demek.

   Sıra --i'den geliyor ve onu görünümler yazıyor. Betiğin zamanlayıcısı yok;
   otuz kartlık bir ızgarada otuz setTimeout kurmak, ilk kaydırmada
   kaybedilen kare demekti.
*/
.blk-word { display: inline-block; }

/* İtalik devam kendi satırına iniyor: Oura'nın da yaptığı gibi cümlenin
   ikinci yarısı ayrı bir hamle olarak okunuyor. Dar ekranda zaten alta
   düşerdi; kuralı yazmak onu her genişlikte kesinleştiriyor. */
.blk-accent { font-style: italic; }

@media (prefers-reduced-motion: no-preference) {
  [data-motion] [data-reveal="rise"] {
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  [data-motion] [data-reveal="rise"][data-shown] { opacity: 1; translate: 0 0; }

  /*
     Açılış fotoğrafı yerine oturuyor: içeri değil, dışarı doğru. Yakınlaşan
     bir görsel dikkati kendine çeker; uzaklaşan görsel sahneyi teslim eder.

     Yalnız ölçek — opaklık bilerek yok. Bu görsel sayfanın en büyük öğesi,
     yani ölçülen "içerik geldi" anı (LCP) onun boyanmasıyla başlıyor ve
     opaklığı sıfır olan bir öğe hiç boyanmamış sayılıyor. Solarak gelen bir
     açılış, sayfayı gerçekten geç açılmış gösterirdi; ölçeklenerek gelen
     açılış ilk karede zaten orada.
  */
  [data-motion] [data-reveal="zoom"] {
    scale: 1.06;
    transition: scale 1.6s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  [data-motion] [data-reveal="zoom"][data-shown] { scale: 1; }

  /* Kelime kelime netleşme. Bulanıklık kelimenin kendi kutusunda kalıyor,
     bölümün tamamına verilmiş bir filtre değil: öyle olsaydı her karede
     bütün bölüm yeniden çizilirdi. */
  [data-motion] [data-reveal="words"] .blk-word {
    opacity: 0;
    filter: blur(0.45rem);
    transition: opacity 0.7s ease, filter 0.7s ease;
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  [data-motion] [data-reveal="words"][data-shown] .blk-word {
    opacity: 1;
    filter: blur(0);
  }
}

/* ── açılış: sahne ──────────────────────────────────────────
   Fotoğraf tam kanal değil: kenarlardan içeri çekilmiş, köşeleri
   yuvarlatılmış bir panel. Sayfanın kendi zemini panelin çevresinde
   görünüyor ve açılış "sayfanın üstü" değil "sayfanın içindeki ilk şey"
   olarak okunuyor.

   Yazı üstte, düğme altta, ortası fotoğrafın konusuna ayrılmış. Diğer
   açılışlarda metin konunun üstüne biniyor; bir cihazı ya da mekânı
   göstermek isteyen bölümde bu, gösterilecek şeyin üstünü kapatmak. */
.blk-hero-stage { padding-block: var(--space-sm); }
.blk-stage-in { max-inline-size: 100rem; margin-inline: auto; padding-inline: var(--space-sm); }
.blk-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-block-size: 32rem;
  border-radius: calc(var(--site-img-radius) * 1.5);
  overflow: clip;
  background: var(--site-soft);
}
.blk-hero-stage[data-height="full"] .blk-stage { min-block-size: min(46rem, 86vh); }

.blk-stage-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
  Perde ve beyaz yazı yalnız fotoğraf VARKEN. Fotoğrafsız kurulmuş bir
  bölümde beyaz yazı krem zeminde kaybolurdu — hero-slider'ın "over"
  varyantında da aynı kural, aynı sebeple.

  Perde panele değil METNİN ŞERİDİNE ait ve tam olarak overlay hero'nun
  öğrendiği şeyi uyguluyor (bkz. .blk-hero[data-variant="overlay"]):
  perde metnin arkasında sabit 0.72, sönmesi ise yalnız yazısız dolguda.

  Ölçüldü, tahmin değil: panele yayılan bir geçiş denendi ve MR odası
  fotoğrafında başlık tamamen kayboldu — beyaz cihazın üstünde beyaz yazı,
  1.1:1. Sönmeyi metnin bulunduğu yere yaymak, açık bir fotoğrafta perdenin
  hiç olmaması demek; ve şablonun fotoğrafını kullanıcı koyuyor.

  Ortada perde yok ve olmamalı: sahnenin tamamını karartmak, gösterilecek
  şeyin üstünü kapatmak olurdu — bu bölümün var oluş sebebi tam olarak
  bunu yapmamak.
*/
.blk-stage:has(.blk-stage-img) { color: #fff; }
.blk-stage:has(.blk-stage-img) .blk-stage-head {
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}
.blk-stage:has(.blk-stage-img) .blk-stage-foot {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}
.blk-stage:has(.blk-stage-img) .blk-eyebrow,
.blk-stage:has(.blk-stage-img) .blk-lede { color: inherit; opacity: 0.92; }

/* Şerit panelin tamamını alıyor, ölçü içerideki satırlarda: perde bir kutu
   gibi değil bir bant gibi okunmalı. Metnin kendi genişliğinde duran koyu
   bir dikdörtgen, fotoğrafın üstüne yapıştırılmış bir etiket olurdu. */
.blk-stage-head {
  padding: var(--space-md) var(--space-md) var(--space-lg);
}
.blk-stage-foot {
  margin: 0;
  /* Alt kenar boşluğu üsttekiyle (.blk-stage-head'in üst kenarı) aynı
     ölçüdeydi ama düğme metinden ağır bir öğe: aynı piksel, düğmenin
     altında gözle görülür biçimde daha dar duruyordu — buton neredeyse
     sahnenin dibine yapışık kalıyordu. Burada da lg kullanmak üst
     kenarla aynı ölçüyü veriyor. */
  padding: var(--space-lg) var(--space-md) var(--space-lg);
  display: flex;
}
.blk-stage-head > * { max-inline-size: 34rem; }

.blk-hero-stage[data-align="center"] .blk-stage-head { text-align: center; }
.blk-hero-stage[data-align="center"] .blk-stage-head > * { margin-inline: auto; }
.blk-hero-stage[data-align="center"] .blk-stage-foot { justify-content: center; }

.blk-stage-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: clamp(2.4rem, 1.1rem + 5.2vw, 5rem);
  line-height: 1.04;
  text-wrap: balance;
}
.blk-stage-head .blk-lede { margin-block: var(--space-sm) 0; }

/* Yer tutucu çerçeve panelin ortasında, rayın tamamını alarak: fotoğrafın
   gelince kaplayacağı yer burası ve önizlemede o yerin görünmesi gerekiyor.
   Perde de yok (yukarıdaki kurallar :has(.blk-stage-img) istiyor), yani
   çerçeveli bölümde beyaz yazı riski hiç doğmuyor. */
.blk-stage > .blk-slot { inline-size: 100%; }

/* ── manşet ─────────────────────────────────────────────────
   Sayfayı durduran tek cümle. İki görünümü de aynı cümleyi taşıyor; farkı,
   cümlenin yalnız mı durduğu.

   Ölçü 68rem: 72rem'lik ray, bu boyda bir yazıda satır başına çok fazla
   kelime bırakıyor ve gözün satır sonundan satır başına dönüşü zorlaşıyor.
   Manşet bir paragraf değil ama okuma kuralı aynı. */
/* Manşet sayfanın rayında duruyor. Kendi 68rem'lik ölçüsü okunur satır
   için doğruydu ama sayfada üçüncü bir sol kenar açıyordu; satır
   uzunluğunu başlığın kendi `text-wrap: balance`'ı zaten dengeliyor. */
.blk-statement .blk-in { max-inline-size: var(--site-rail); }
.blk-statement-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: clamp(1.9rem, 0.8rem + 4.4vw, 4.2rem);
  line-height: 1.08;
  text-wrap: balance;
}
.blk-statement[data-variant="center"] .blk-statement-head { text-align: center; }
.blk-statement[data-variant="center"] .blk-statement-action {
  justify-content: center;
  margin-block-start: var(--space-md);
}

/*
  Bölünmüş görünüm: solda cümle, sağda onu açan paragraf. Sağ kolon dar ve
  alta hizalı — cümlenin son satırıyla aynı çizgiden başlıyor, yani iki kolon
  üstten değil alttan bağlanıyor. Üstten hizalansaydı iki ayrı başlangıç
  olurdu; manşetin işi ise tek bir giriş olmak.
*/
.blk-statement[data-variant="split"] .blk-in { display: grid; gap: var(--space-md); }
@container (min-width: 52rem) {
  .blk-statement[data-variant="split"] .blk-in {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-lg);
  }
  .blk-statement[data-variant="split"] .blk-statement-aside { padding-block-end: 0.6rem; }
}
.blk-statement-aside p { margin: 0 0 var(--space-sm); color: var(--site-muted); }
.blk-statement-aside .blk-actions { margin: 0; }

/* ── vitrin kartları ────────────────────────────────────────
   Kartın tamamı fotoğraf; rozet, ad ve düğmeler onun üstünde duruyor.
   feature-grid'den ayrıldığı yer bu: orada görsel başlığın yanındaki küçük
   simge, burada gösterilecek şeyin kendisi.

   Perde koşulsuz — fotoğraf olmasa bile. Kartın alt yarısındaki yazı
   okunabilir bir zemin istiyor ve o zemini fotoğrafın rengine bırakmak, açık
   bir karede yazıyı kaybetmek demek. */
.blk-showcase-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: end;
  aspect-ratio: 4 / 5;
  border-radius: var(--site-img-radius);
  overflow: clip;
  background: var(--site-soft);
  color: #fff;
}
.blk-showcase-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Üzerine gelince fotoğraf yaklaşıyor, kart değil: kartın kendisi
     büyüseydi ızgaradaki komşularının hizasını bozardı. */
  transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.blk-showcase-card:hover .blk-showcase-img { scale: 1.04; }
@media (prefers-reduced-motion: reduce) {
  .blk-showcase-img, .blk-showcase-card:hover .blk-showcase-img { transition: none; scale: 1; }
}

.blk-showcase-badge {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--site-surface);
  color: var(--site-ink);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/*
  Perde kartın tamamına değil yazı şeridine ait ve sönmesi yalnız üstteki
  dolguda — sahnede ve overlay hero'da olduğu gibi (bkz. .blk-stage-head).
  Karta yayılan bir geçiş, açık bir fotoğrafta adın üstündeki perdeyi
  0.3'e indiriyor ve beyaz yazı kayboluyor; kartın fotoğrafını kullanıcı
  koyuyor, yani "bu fotoğraf koyu" diye varsayamayız.
*/
.blk-showcase-body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}
.blk-showcase-text { flex: 1 1 8rem; }
.blk-showcase-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1.15;
}
.blk-showcase-note { margin: 0.2rem 0 0; font-size: var(--step--1); opacity: 0.85; }

/*
   Düğmeler kartın kendi zeminine göre kuruluyor: fotoğrafın üstünde tema
   düğmesinin ne renk olacağı bilinemez — ana renk koyu bir fotoğrafta
   kayboluyor, açık bir fotoğrafta beyaz düğme kayboluyor. Takım bu yüzden
   burada sabitleniyor: dolu düğme beyaz, ikincisi beyaz çerçeveli.

   İkincil düğme KENDİ token setini okuyor (--btn-quiet-*, bkz. .blk-btn-quiet).
   Yalnız --btn-* yazmak onu hiç etkilemiyor ve düğme temanın ana rengiyle,
   yani koyu kırmızı bir yazı olarak koyu bir fotoğrafın üstünde kalıyordu:
   kartta iki düğme olduğu görülmüyordu bile. Aynı ders .blk-cta[data-accent]
   bandında da yazılı.
*/
.blk-showcase-actions {
  margin: 0;
  flex: 0 0 auto;
  --btn-fill: #fff;
  --btn-ink: #111;
  --btn-fill-hover: #fff;
  --btn-ink-hover: #111;
  --btn-border: 0 solid transparent;
  --btn-edge: 0 solid transparent;
  --btn-radius: 999px;
  --btn-shadow: none;
  --btn-shadow-hover: none;
  --btn-lift: none;
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: #fff;
  --btn-quiet-fill-hover: rgb(255 255 255 / 0.18);
  --btn-quiet-border: 1px solid rgb(255 255 255 / 0.6);
  --btn-quiet-edge: 1px solid rgb(255 255 255 / 0.6);
  --site-focus: #fff;
}

/* Ana düğmenin tıklama alanı kartın tamamına yayılıyor — aynı kalıp
   .blk-person-link'te (bkz. orasındaki gerekçe). Kart zaten "buraya git"
   diyen bir görsel; yalnız düğmenin üstüne basınca gitmesi şaşırtıyordu,
   üzerine gelince de el işareti çıkmıyordu.
   İkincil düğme (varsa) kendi tıklama alanını korusun diye üstte kalıyor —
   yoksa ana düğmenin yayılan katmanı onu örter ve tıklanamaz hâle getirirdi. */
.blk-showcase-link::after { content: ""; position: absolute; inset: 0; }
.blk-showcase-actions .blk-btn-quiet { position: relative; z-index: 1; }

.blk-showcase-link:focus-visible { outline: none; }
.blk-showcase-card:has(.blk-showcase-link:focus-visible) {
  outline: 2px solid #fff; outline-offset: -2px;
}

/* ── kart rayı ──────────────────────────────────────────────
   Şerit hero-slider'ın makinesini kullanıyor (.blk-slides). Buradaki tek
   fark kartın genişliği: ekrana birden çok kart sığıyor ve ray bir sonraki
   karta kayıyor.

   Kart genişliği clamp: dar ekranda bir kart artı bir sonrakinin ucu
   görünüyor — "burada devamı var" demenin oktan daha doğru yolu. */
.blk-rail-box { margin-block-start: var(--space-md); }
.blk-rail-track { padding-block-end: var(--space-xs); }
.blk-rail-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(15rem, 62%, 21rem);
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--site-img-radius);
  overflow: clip;
  scroll-snap-align: start;
  background: var(--site-soft);
  color: #fff;
}
@container (min-width: 56rem) {
  .blk-rail-card { flex-basis: 21rem; }
}
.blk-rail-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blk-rail-chip {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  /* Açma düğmesine yer bırakıyor: dar bir kartta uzun bir etiket düğmenin
     altına giriyor ve ikisi de okunmuyordu. Kalan yere sığmayan etiket
     alt satıra düşüyor — kısaltmak, etiketi anlamsızlaştırırdı. */
  max-inline-size: calc(100% - var(--space-md) * 2 - 3rem);
  /* Yarı saydam koyu hap: fotoğrafın rengi ne olursa olsun etiket okunuyor
     ve karenin üstünü tamamen kapatmıyor. */
  background: rgb(0 0 0 / 0.42);
  font-size: var(--step--2);
}
.blk-rail-icon { inline-size: 1rem; block-size: 1rem; flex: none; }
/* Başlık kendi perdesini taşıyor — .blk-showcase-body ile aynı gerekçe.
   Ölçü şeridin değil yazının: perde kartın kenarına kadar gidiyor, satır
   14rem'de duruyor. */
.blk-rail-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  line-height: 1.2;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}

/* Kartın açtığı sayfa.

   Kartın tamamını bağlantı yapamıyoruz: içinde <details> var ve kartı
   kaplayan bir bağlantı açma düğmesini yutardı. Bağlantı bu yüzden
   başlığın altında ayrı bir satır.

   Kendi zemini var çünkü başlığın perdesi orada bitiyor: perdesiz bir
   satır çıplak fotoğrafın üstüne düşer ve okunmaz. Rengi perdenin en
   koyu ucuyla aynı, yani satır perdenin devamı gibi duruyor. */
.blk-rail-go {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-md) var(--space-md);
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.blk-rail-go:hover { text-decoration: underline; }
.blk-rail-card:has(.blk-rail-go) .blk-rail-title { padding-block-end: 0.4rem; }

/*
  Açılan açıklama. Kutu kartın tamamını kaplıyor ama tıklamaları yutmuyor:
  yalnız açma düğmesi ve açılan metin tıklanabilir. Aksi hâlde rayın
  kaydırılması kartın üstünde çalışmazdı.
*/
.blk-rail-more { position: absolute; inset: 0; pointer-events: none; }
.blk-rail-open {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: var(--site-surface);
  color: var(--site-ink);
  cursor: pointer;
  pointer-events: auto;
  list-style: none;
  transition: rotate 0.3s ease;
}
.blk-rail-open::-webkit-details-marker { display: none; }
.blk-rail-open svg { inline-size: 1.1rem; block-size: 1.1rem; }
/* Açıkken artı çarpıya dönüyor — ikinci bir simge indirmeden. */
.blk-rail-more[open] .blk-rail-open { rotate: 45deg; }
@media (prefers-reduced-motion: reduce) {
  .blk-rail-open { transition: none; }
}
.blk-rail-text {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  margin: 0;
  padding: var(--space-md);
  padding-block-start: var(--space-lg);
  pointer-events: auto;
  font-size: var(--step--1);
  background: linear-gradient(to top, rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.75) 60%, rgb(0 0 0 / 0));
}

/* ── anlar ──────────────────────────────────────────────────
   Sekmeler radyo düğmesi, panel değişimi CSS. Klavye gezinmesi radyo
   grubunun kendi davranışı — elle kurulmuş bir sekme takımının aria yükü
   yok.

   Paneli gizleyen kural @supports içinde: :has() tanımayan bir tarayıcıda
   koşulsuz yazılsaydı bölümün tamamı gizli kalırdı. O tarayıcıda sekme
   şeridi hiç görünmüyor (çalışmayan bir denetim, hiç denetim olmamasından
   kötü) ve paneller alt alta diziliyor — içerik eksiksiz, yalnız sekmesiz. */
.blk-moments-box { margin-block-start: var(--space-md); }
/*
  Şerit sarmıyor, kayıyor. Sarmalı düzende her sekme en az 8rem istiyordu:
  telefonda üçü sığıyor, dördüncüsü alt satıra tek başına düşüyor ve
  flex-grow onu tam genişliğe yayıyordu — seçili olan oysa vurgu çizgisi
  ekranın bir ucundan öbürüne gidiyor, sekme değil bir başlık ayıracı gibi
  okunuyordu. Beş ve altı sekmelik şablonlarda aynı kaza her ölçüde
  tekrarlanabiliyor.

  Kaydırılan kutu kataloğun kendi deyişi (.blk-slides-track, .blk-marquee):
  kaydırma çubuğu gizli, duraklara oturuyor, betik yok. flex-shrink sıfır —
  sığmayan sekme sıkışıp okunmaz olmaktansa şeridin dışında beklesin.
*/
.blk-moments-tabs { display: none; }
.blk-moments-tab {
  position: relative;
  /* Yer varken dördü de yayılıyor (grow 1), yer yokken hiçbiri
     sıkışmıyor (shrink 0) ve kutu kayıyor. */
  flex: 1 0 auto;
  scroll-snap-align: start;
  /* Tıklama hedefi etiketin kendisi değil çevresindeki kutu: iki kelimelik
     bir sekmeye parmakla isabet ettirmek zor. */
  min-block-size: 2.75rem;
  display: grid;
  place-items: center;
  padding: var(--space-sm) var(--space-sm);
  border-block-end: 2px solid var(--site-line);
  color: var(--site-muted);
  font-size: var(--step--1);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.blk-moments-tab input { position: absolute; opacity: 0; pointer-events: none; }
.blk-moments-tab:hover { color: var(--site-ink); }
/* Klavyeyle gezerken seçilinin nerede olduğu görünmeli: radyo gizli ama
   odak halkası etiketin üstünde çiziliyor.

   Halka içeri çiziliyor (offset negatif), katalogun geri kalanındaki gibi
   dışarı değil: şerit kaydırılan bir kutu ve kaydırma, kutunun dışına taşan
   boyayı kırpıyor — ilk ve son sekmede halkanın yarısı kayboluyordu. */
.blk-moments-tab:has(input:focus-visible) { outline: 2px solid var(--site-primary); outline-offset: -2px; }

/* Sekme şeridi ile panel arasındaki boşluk. Sekmenin alt çizgisi panelin
   üst kenarıydı: fotoğraf doğrudan çizgiye yapışıyor ve şerit bir sekme
   takımı değil, resmin çerçevesi gibi okunuyordu. */
.blk-moments-panels { padding-block-start: var(--space-md); }

.blk-moments-panel { display: grid; gap: var(--space-md); }

/* Ölçüm kartı ve alıntı tek sütunda, alt alta ve sütunun tamamını
   kaplayarak. Üç sütunluyken (fotoğraf / kart / alıntı) ikisi de kendi
   sütununun yarısı kadar kalıyordu ve aynı anı anlatan iki parça birbirinden
   kopuk duruyordu.

   Hizalama "start", "center" değil: fotoğraf 4/5 oranında ve yanındaki
   metinden çok daha uzun. Ortalanan sütun, başlığı fotoğrafın ortasından
   başlatıyor ve iki taraf hiçbir yerde aynı satırda buluşmuyordu. */
.blk-moments-body {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

@container (min-width: 52rem) {
  .blk-moments-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: start;
  }
}

@supports selector(:has(*)) {
  .blk-moments-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .blk-moments-tabs::-webkit-scrollbar { display: none; }
  .blk-moments-panels > .blk-moments-panel { display: none; }

  .blk-moments-box:has(.blk-moments-tab:nth-child(1) input:checked) .blk-moments-panel:nth-child(1),
  .blk-moments-box:has(.blk-moments-tab:nth-child(2) input:checked) .blk-moments-panel:nth-child(2),
  .blk-moments-box:has(.blk-moments-tab:nth-child(3) input:checked) .blk-moments-panel:nth-child(3),
  .blk-moments-box:has(.blk-moments-tab:nth-child(4) input:checked) .blk-moments-panel:nth-child(4),
  .blk-moments-box:has(.blk-moments-tab:nth-child(5) input:checked) .blk-moments-panel:nth-child(5),
  .blk-moments-box:has(.blk-moments-tab:nth-child(6) input:checked) .blk-moments-panel:nth-child(6) {
    display: grid;
  }

  .blk-moments-tab:has(input:checked) {
    color: var(--site-ink);
    border-block-end-color: var(--site-primary);
  }
}

/* Panel değişimi bir geçiş değil bir giriş: display none'dan grid'e dönen
   öğede transition çalışmıyor, animation çalışıyor. */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(:has(*)) {
    .blk-moments-panels > .blk-moments-panel { animation: blk-moment-in 0.45s ease both; }
  }
}
@keyframes blk-moment-in {
  from { opacity: 0; translate: 0 0.6rem; }
}

.blk-moments-photo .blk-img { aspect-ratio: 4 / 5; }
.blk-moments-metric {
  padding: var(--space-md);
  border-radius: var(--site-radius);
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  text-align: center;
}
.blk-moments-value {
  margin: 0;
  font-family: var(--site-font-heading);
  font-size: var(--step-3);
  line-height: 1;
}
.blk-moments-metric-label {
  margin: 0.35rem 0 0;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-muted);
}
/* Kenar boşluğu yok: artık kartın içinde değil, ızgaranın çocuğu ve
   aralığı ızgaranın gap'i veriyor. */
.blk-moments-note { margin: 0; font-size: var(--step--1); color: var(--site-muted); }

.blk-moments-more { margin: 0; }

.blk-moments-quote { margin: 0; }
.blk-moments-quote blockquote {
  margin: 0;
  font-family: var(--site-font-heading);
  font-size: var(--step-2);
  line-height: 1.3;
}
.blk-moments-quote blockquote::before { content: "\201C"; }
.blk-moments-quote blockquote::after { content: "\201D"; }
.blk-moments-quote figcaption {
  margin-block-start: var(--space-sm);
  font-size: var(--step--1);
  color: var(--site-muted);
}

/* ── basında biz ────────────────────────────────────────────
   Bant sabit bir renk değil, sayfanın kendi mürekkebi: açık şemada koyu bir
   bant, koyu şemada açık bir bant. Adı bu yüzden "koyu" değil "ters" —
   sabit bir #1c1b19 yazsaydık koyu şemada bandın sayfadan ayrıldığı yer
   tamamen kaybolurdu. */
.blk-press[data-variant="invert"] {
  background: var(--site-ink);
  color: var(--site-surface);
  --card-surface: var(--site-surface);
}
.blk-press-head {
  margin: 0 0 var(--space-md);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
.blk-press-grid { display: grid; gap: var(--space-md); }
@container (min-width: 52rem) {
  .blk-press-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

.blk-press-featured {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: end;
  /* Kart yazının boyuna göre büyüyor ve yazının perdesi var: 22rem'de
     fotoğrafa yalnız birkaç piksel kalıyordu, yani haberin kapağı hiç
     görünmüyordu. */
  min-block-size: 27rem;
  border-radius: var(--site-img-radius);
  overflow: clip;
  background: var(--site-soft);
  color: #fff;
  /* Bandın kendi düğme takımı: fotoğrafın üstünde temanın düğmesinin ne
     renk olacağı bilinemez, o yüzden dolu düğme beyaz sabitleniyor.
     İkincil takım da yazılıyor — bu kartta bugün ikinci düğme yok ama
     token'ları eksik bırakmak, eklendiği gün görünmeyen bir düğme demek. */
  --btn-fill: #fff;
  --btn-ink: #111;
  --btn-fill-hover: #fff;
  --btn-ink-hover: #111;
  --btn-border: 0 solid transparent;
  --btn-edge: 0 solid transparent;
  --btn-radius: 999px;
  --btn-shadow: none;
  --btn-shadow-hover: none;
  --btn-lift: none;
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: #fff;
  --btn-quiet-fill-hover: rgb(255 255 255 / 0.18);
  --btn-quiet-border: 1px solid rgb(255 255 255 / 0.6);
  --btn-quiet-edge: 1px solid rgb(255 255 255 / 0.6);
  --site-focus: #fff;
}
/* Perde yazı şeridinde, kartın tamamında değil — .blk-showcase-body ile
   aynı gerekçe. Haber kapağı çoğu zaman açık bir fotoğraf oluyor. */
.blk-press-featured-body {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}
.blk-press-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blk-press-badge {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--site-surface);
  color: var(--site-ink);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.blk-press-featured-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1.2;
  max-inline-size: 24rem;
}
.blk-press-featured .blk-actions { margin: 0; }

.blk-press-list { display: grid; gap: var(--space-sm); align-content: start; }
.blk-press-item {
  position: relative;
  display: block;
  padding: var(--space-md);
  padding-block-end: calc(var(--space-md) + 2rem);
  border-radius: var(--site-radius);
  background: var(--card-surface, var(--site-soft));
  color: var(--site-ink);
  text-decoration: none;
}
a.blk-press-item:hover .blk-press-go { background: var(--site-primary); color: var(--site-on-primary); }
.blk-press-source { margin: 0 0 0.25rem; font-size: var(--step--2); color: var(--site-muted); }
.blk-press-title { margin: 0; font-size: var(--step-0); line-height: 1.35; font-weight: 500; }
/* Ok bir düğme değil bir işaret: tıklanan şey kartın tamamı. İki satırlık
   bir başlığın yanındaki 2rem'lik daireye parmakla isabet ettirmek şans işi
   olurdu. */
.blk-press-go {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  display: grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 999px;
  background: var(--site-ink);
  color: var(--site-surface);
  transition: background 0.2s ease, color 0.2s ease;
}
.blk-press-go svg { inline-size: 0.95rem; block-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
  .blk-press-go { transition: none; }
}

/* ── ölçüm kartları ─────────────────────────────────────────
   "Rakamlarla" bölümünden farkı, rakamın ne anlama geldiğini söyleyen
   cümle ve isteğe bağlı yay. Yay conic-gradient ile çiziliyor: tek bir
   yüzde için ayrı bir SVG ağacı kurmak aynı işi iki katı baytla yapmak
   olurdu. Maskeyi tanımayan bir tarayıcıda daire dolu bir pasta olarak
   kalıyor — yanlış değil, yalnız daha kalın. */
.blk-metric { display: flex; flex-direction: column; }
.blk-metric-arc {
  --size: 3.25rem;
  inline-size: var(--size);
  block-size: var(--size);
  margin: 0 0 var(--space-sm);
  border-radius: 999px;
  background: conic-gradient(var(--site-primary) calc(var(--at, 0) * 1%), var(--site-line) 0);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
}
.blk-metric-value {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-3);
  line-height: 1;
}
.blk-metric-unit { font-size: var(--step-1); margin-inline-start: 0.15rem; color: var(--site-muted); }
.blk-metric-label {
  margin: 0.4rem 0 0;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-muted);
}
.blk-metric-text { margin: var(--space-sm) 0 0; color: var(--site-muted); font-size: var(--step--1); }

/* ── tam kanal ──────────────────────────────────────────────
   Bir bölümün rayı bırakıp ekranın iki kenarına dayanması.

   Neden tek bir mekanizma: kataloğun tamamı `.blk-in` içinde ve o 72rem'de
   kilitli. Bugüne kadar bu kabı kıran tek şey `hero[data-variant="full"]`
   idi ve o da kendi kuralını kendi yazıyordu. "Şu blok da tam kanal olsun"
   her istendiğinde aynı iki satırı bir daha yazmak, beşinci blokta
   birbirinden ayrılmış beş kural demekti.

   Kararı bölüm veriyor: isteyen bloğa "Genişlik" alanı konuyor, alan da
   bölüm etiketine `data-width` olarak çıkıyor. Alanı olmayan blok bu
   kuralla hiç karşılaşmıyor.

   Başlık ve giriş rayda KALIYOR. Fotoğrafın kenardan kenara gitmesi
   isteniyor; başlığın da gitmesi istenmiyor — 2560 piksellik bir ekranda
   kenara dayanmış bir cümle okunmuyor, gözün satır sonundan satır başına
   dönüşü sayfanın yarısını kat ediyor. Yani "tam kanal" bölümün değil
   içindeki medyanın ölçüsü.

   Dolgu ray genişliğine ekleniyor, içinden çıkarılmıyor: 72rem'lik metin
   ölçüsü tam kanal bölümde de öbür bölümlerdekiyle aynı kalsın, başlıklar
   sayfa boyunca aynı eksende dizilsin diye. */
.blk[data-width="full"] > .blk-in {
  max-inline-size: none;
  padding-inline: 0;
}
.blk[data-width="full"] > .blk-in > :is(.blk-title, .blk-h2, .blk-lede, .blk-eyebrow) {
  max-inline-size: calc(72rem - var(--space-md) * 2);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Sahne panelinin tam kanal hâli: kavis de gidiyor. İçeriden boşluklu bir
   panelin köşesi yuvarlak olur; ekranın kenarına dayanmış bir görselin
   köşesi yuvarlak olmaz, çünkü kavisin arkasında gösterilecek bir zemin
   kalmıyor. */
.blk-hero-stage[data-width="full"] { padding-block: 0; }
.blk-hero-stage[data-width="full"] .blk-stage-in {
  max-inline-size: none;
  padding-inline: 0;
}
.blk-hero-stage[data-width="full"] .blk-stage { border-radius: 0; }

/* Ray tam kanalken ilk kart ekranın kenarına yapışmıyor: şerit kayan bir
   şey ve kaydırmanın başladığı yerin görünmesi gerekiyor. Aynı pay sonda
   da var, yoksa son kart yarım kalmış gibi duruyor. */
.blk[data-width="full"] :is(.blk-rail-track, .blk-locs-track) {
  padding-inline: var(--space-md);
  scroll-padding-inline-start: var(--space-md);
}

/* ── tam kanal bant ─────────────────────────────────────────
   Fotoğrafın gerçekten kabı doldurduğu bölüm: kanalın tamamını kaplıyor,
   yazı ise 72rem'lik rayda kalıyor. */
.blk-band {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  overflow: clip;
  min-block-size: 26rem;
  background: var(--site-soft);
}
.blk-band[data-height="tall"] { min-block-size: 34rem; }
.blk-band:has(.blk-band-img) { color: #fff; }
.blk-band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
  Perde ayrı bir öğe, ::before değil. İki sebep: sönme yönü konteyner
  genişliğine göre değişiyor (dar ekranda yandan değil baştan sona) ve bir
  öğe kendi konteyner sorgusuyla kendi sözde öğesini boyayamıyor.

  Dar ekranda düz bir perde: kolonlar alt alta indiğinde yazı fotoğrafın
  ortasına denk geliyor ve yandan sönen bir geçiş orada hiçbir şey
  koruyamıyor.
*/
.blk-band-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.58);
}
@container (min-width: 52rem) {
  .blk-band[data-align="start"] .blk-band-veil {
    background: linear-gradient(to right, rgb(0 0 0 / 0.78) 0 44%, rgb(0 0 0 / 0) 82%);
  }
  .blk-band[data-align="end"] .blk-band-veil {
    background: linear-gradient(to left, rgb(0 0 0 / 0.78) 0 44%, rgb(0 0 0 / 0) 82%);
  }
}

.blk-band-in { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); }
@container (min-width: 52rem) {
  .blk-band-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  /*
    Yazı sağdayken ızgaradaki sırası da değişiyor: kolonu yalnız hizalamak,
    onu fotoğrafın konusunun üstünde bırakırdı.

    `order` TEK BAŞINA yetmiyor ve sebebi ızgara yerleştirmesi: `order`
    kardeşler arasındaki SIRAYI değiştiriyor, kolonu değil. Bandın `facts`
    listesi boşsa ızgaranın tek çocuğu kalıyor, tek çocuk da "order"ı ne
    olursa olsun ilk boş hücreye — yani birinci kolona — düşüyor. Sonuç:
    yazı SOLDA duruyor ama perde SAĞI koyulaştırıyor ve beyaz başlık
    fotoğrafın aydınlık yarısında kalıyor.

    Kolon açıkça yazılınca ikisi de doğru: `facts` varken o listeye birinci
    kolon kalıyor (otomatik yerleşim ilk boş hücreyi alıyor), yokken de
    yazı ikinci kolonda duruyor. `order` yine duruyor — belge sırasını
    okuyan klavye ve ekran okuyucu için anlamı var.
  */
  .blk-band[data-align="end"] .blk-band-text { order: 2; grid-column: 2; }
}
.blk-band-text { max-inline-size: 34rem; }
.blk-band:has(.blk-band-img) .blk-eyebrow { color: inherit; opacity: 0.85; }
.blk-band-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: var(--step-2);
  line-height: 1.15;
}
.blk-band-lede { margin: 0; font-size: var(--step-0); opacity: 0.92; }
.blk-band-list { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
/* İşaret kendi çizilen bir daire: liste stilini kaldırmadan koyu perdenin
   üstünde madde imi çoğu tarayıcıda metinden daha soluk çıkıyor. */
.blk-band-list li { position: relative; padding-inline-start: 1.1rem; font-size: var(--step--1); opacity: 0.92; }
.blk-band-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 999px;
  background: currentColor;
}

.blk-band-facts { display: grid; gap: var(--space-sm); align-content: center; justify-items: end; }
@container (max-width: 52rem) { .blk-band-facts { justify-items: stretch; } }
.blk-band-fact {
  inline-size: min(100%, 20rem);
  padding: var(--space-md);
  border-radius: var(--site-radius);
  /* Buzlu cam. Tanımayan tarayıcıda saydam bir kart fotoğrafın üstünde
     okunmazdı; aşağıdaki @supports zemini opak koyuya indiriyor. */
  background: rgb(255 255 255 / 0.14);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / 0.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blk-band-fact { background: rgb(0 0 0 / 0.55); }
}
.blk-band-fact-icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin-block-end: 0.4rem;
  opacity: 0.85;
}
.blk-band-fact-value {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-3);
  line-height: 1;
}
.blk-band-fact-unit { font-size: var(--step-1); margin-inline-start: 0.15rem; opacity: 0.75; }
.blk-band-fact-label {
  margin: 0.35rem 0 0;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.blk-band-fact-note { margin: 0.4rem 0 0; font-size: var(--step--1); opacity: 0.75; }

/* ── panelli kartlar ────────────────────────────────────────
   Kart fotoğrafla dolu, alt yarısında kendi zemini olan bir panel.
   showcase-pair'den farkı panelin kendisi: orada yazı perdeyle fotoğrafa
   biniyor ve kart bir şeyi tanıtıyor, burada panel bir LİSTE taşıyor. */
.blk-panel-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: end;
  aspect-ratio: 3 / 4;
  padding: var(--space-sm);
  border-radius: var(--site-img-radius);
  overflow: clip;
  background: var(--site-soft);
  color: #fff;
}
.blk-panel-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blk-panel {
  padding: var(--space-md);
  border-radius: calc(var(--site-img-radius) * 0.8);
  background: rgb(0 0 0 / 0.34);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blk-panel { background: rgb(0 0 0 / 0.72); }
}
/* İkon ile başlık tek satır. Hiza ÜSTTEN: başlık iki satıra düştüğünde
   ortalanan ikon iki satırın arasına kayıyor ve neye ait olduğu
   okunmuyor — üstte durunca başlığın ilk satırıyla aynı hizada. */
.blk-panel-head {
  display: flex;
  align-items: start;
  gap: 0.55rem;
}
/* Başlık satırda daralabilsin: flex öğesinin taban genişliği içeriği
   kadar ve `min-inline-size: 0` yazılmazsa hiç küçülmüyor — o zaman
   kırpma da üç nokta da devreye girmiyor, başlık panelin dışına
   taşıyor. Sayfası olan kartta öğe <a>, olmayanda <h3>. */
.blk-panel-head > * { min-inline-size: 0; }
/* `flex: none`: satırda yer daralınca esneyen şey başlık olmalı, ikon
   değil — küçülen bir ikon çizim olmaktan çıkıp leke oluyor. */
.blk-panel-icon { inline-size: 1.3rem; block-size: 1.3rem; flex: none; opacity: 0.9; }
/* Künye başlığı TEK satır. İki satıra düştüğünde panel yükseliyor ve
   yanındaki kartlarla aynı hizada bitmiyordu.

   Ölçü bir basamak iniyor (step-1 → step-0): tek satır kararı yazının
   boyutunu da bağlıyor, çünkü "Koroner arter hastalığı" uzunluğunda bir
   başlık üst basamakta panelin genişliğine sığmıyor. Üç nokta yine de
   duruyor — ondan da uzun bir başlık gelirse kesilmesi, panelin dışına
   taşmasından iyi. */
.blk-panel-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-0);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blk-panel-link { color: inherit; text-decoration: none; }
/* Kartın tamamı tıklanıyor: bağlantı başlıkta ama alanı karta yayılıyor.
   İki kelimelik bir başlığa parmakla isabet ettirmek şans işi. */
.blk-panel-link::after { content: ""; position: absolute; inset: 0; }
.blk-panel-card:has(.blk-panel-link:hover) .blk-panel { background: rgb(0 0 0 / 0.5); }
.blk-panel-sub { margin: 0.4rem 0 0; font-size: var(--step--2); opacity: 0.8; }
.blk-panel-lines { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.blk-panel-lines li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: var(--step--1);
  opacity: 0.92;
}
.blk-panel-lines li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: 999px;
  background: currentColor;
}

/* ── künye listesi ──────────────────────────────────────────
   Solda ne olduğunu söyleyen etiket, sağda maddeler. Kutu yok: maddeler bir
   künyenin satırları, kart değil — hiçbiri bir yere gitmiyor. */
.blk-specs[data-variant="band"] {
  background: var(--site-ink);
  color: var(--site-surface);
}
.blk-specs-in { display: grid; gap: var(--space-md); }
@container (min-width: 52rem) {
  .blk-specs-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--space-lg); }
  /* Etiket kolonu yukarıda sabit: uzun bir listenin yanında ortalanmış tek
     kelime, neyin başlığı olduğunu söylemiyor. */
  .blk-specs-head { align-self: start; }
}
.blk-specs-label {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: var(--step-2);
  line-height: 1.15;
}
.blk-specs-intro { margin: var(--space-sm) 0 0; font-size: var(--step--1); opacity: 0.75; }
.blk-specs[data-variant="plain"] .blk-specs-intro,
.blk-specs[data-variant="soft"] .blk-specs-intro { color: var(--site-muted); opacity: 1; }
.blk-specs-list { display: grid; gap: var(--space-md); }
@container (min-width: 40rem) {
  .blk-specs-list { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
}
.blk-spec-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; }
/* Simge kendi kutusunda: yalnız çizgi olarak bırakıldığında iri başlığın
   yanında kaybolan bir işaret oluyordu. */
.blk-spec-icon {
  flex: none;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  padding: 0.35rem;
  border-radius: calc(var(--site-radius) * 0.7);
  border: 1px solid currentColor;
  opacity: 0.55;
}
.blk-spec-title { margin: 0; font-size: var(--step-0); line-height: 1.3; }
.blk-spec-text { margin: 0; font-size: var(--step--1); opacity: 0.78; }
.blk-specs[data-variant="plain"] .blk-spec-text,
.blk-specs[data-variant="soft"] .blk-spec-text { color: var(--site-muted); opacity: 1; }
/* "Tonlu" zeminsizin renkli zemin taşıyan hâli: mürekkep değişmiyor, yalnız
   bölüm sayfadan bir ton ayrılıyor. Ters bant (band) mürekkebi de çeviriyor
   ve o ayrı bir karar. */
.blk-specs[data-variant="soft"] { background: var(--site-soft); }

/* Tonlu künyede etiket satırların ÜSTÜNDE, liste de rayın tamamında.
   Katalogun kuralı etiketi sola, maddeleri sağa koyuyor; iki satırlık bir
   listenin yanında sol kolon boşalıyor ve etiket ("Neden MD") bölümün
   ortasında asılı kalıyordu.

   Dış ızgara tek kolona düşüyor: etiket bir satır, liste bir satır ve
   ikisi de aynı sol kenardan başlayıp aynı sağ kenarda bitiyor. Listenin
   kendi iki kolonu böylece rayı yarı yarıya paylaşıyor — dışta kolon payı
   bıraksaydık maddeler rayın ortasında kalır, sağda etiketin altına denk
   gelen bir şerit boş dururdu. */
@container (min-width: 52rem) {
  .blk-specs[data-variant="soft"] .blk-specs-in {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ── hekim kadrosu: yatay şerit ─────────────────────────────
   Kadro bir liste değil bir vitrin olduğunda: her branşın kendi şeridi,
   kendi okları. Şeridin makinesi yine hero-slider'ınki.

   Ad ve unvan portrenin ALTINDA. Diğer kart bloklarında yazı fotoğrafın
   üstüne biniyor ve orada doğru olan bu — gösterilen şey bir mekân ya da
   cihaz. Portre öyle değil: tanıtılan şeyin kendisi yüz ve perde onun
   yarısını kapatıyor. */
.blk-roster[data-variant="rail"] .blk-roster-group { margin-block: var(--space-md) var(--space-sm); }
.blk-roster-box { margin-block-end: var(--space-md); }
.blk-roster-card {
  flex: 0 0 clamp(10rem, 40%, 15rem);
  margin: 0;
  scroll-snap-align: start;
}
@container (min-width: 56rem) {
  .blk-roster-card { flex-basis: 15rem; }
}
/* Çerçeve ayrı bir kutu: açma düğmesi ve paneli portreye göre konumlanıyor,
   altındaki ada göre değil. */
.blk-roster-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  border-radius: var(--site-img-radius);
  overflow: clip;
  background: var(--site-soft);
}
.blk-roster-portrait { inline-size: 100%; block-size: 100%; object-fit: cover; }
.blk-roster-frame > .blk-slot { block-size: 100%; }
.blk-roster-panel {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  margin: 0;
  padding: var(--space-md);
  padding-block-start: var(--space-lg);
  pointer-events: auto;
  color: #fff;
  font-size: var(--step--1);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.78) 60%, rgb(0 0 0 / 0));
}
.blk-roster-panel p { margin: 0 0 0.5rem; }
.blk-roster-panel a { color: inherit; }
.blk-roster-name { margin-block-start: var(--space-sm); }
.blk-roster-name strong { display: block; font-size: var(--step-0); line-height: 1.25; }
.blk-roster-name small { display: block; font-size: var(--step--2); color: var(--site-muted); }
.blk-roster-name a { color: inherit; text-decoration: none; }
.blk-roster-name a:hover strong { color: var(--site-primary-ink); }

/* ── basında biz: ızgara ────────────────────────────────────
   Öne çıkan kart yok, kartlar yan yana. Yayın listesi, duyuru, rapor —
   hepsinin ortak biçimi: başlık, kaynak, tarih ve köşede dışarı çıkan ok. */
.blk-press[data-variant="grid"] .blk-press-grid { display: block; }
.blk-press[data-variant="grid"] .blk-press-list {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-md);
}
.blk-press-date { margin: 0.35rem 0 0; font-size: var(--step--2); color: var(--site-muted); }

/* ── logo şeridi: açıklamalı ────────────────────────────────
   Kurum adının altında ne yaptığını söyleyen bir cümle. Şerit o zaman bir
   logo dizisi olmaktan çıkıp bir referans listesi oluyor. */
.blk-strip-text {
  margin: 0.5rem 0 0;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--site-muted);
  text-align: center;
  max-inline-size: 22rem;
  margin-inline: auto;
}
/* Açıklama gelen öğe artık tek satırlık bir ad değil: plaka satır olmaktan
   çıkıp bloğa dönüyor, simge ve ad üstte kalıyor, cümle altlarına iniyor.
   Satır düzeninde kalsaydı iki kelimelik ad ile üç satırlık cümle yan yana
   sıkışırdı. */
.blk-strip-plate:has(.blk-strip-text) {
  flex-wrap: wrap;
  align-items: start;
  text-align: start;
}
.blk-strip-plate:has(.blk-strip-text) .blk-strip-text {
  flex: 1 0 100%;
  text-align: start;
  margin-inline: 0;
}
/* Ad artık kalan alanı doldurmalı: aksi hâlde simgenin yanında kendi
   satırında ortalanmış gibi duruyor. */
.blk-strip-plate:has(.blk-strip-text) figcaption { flex: 1; }
/* Öğenin genel ölçü tavanı (10rem) bir ad için doğru, bir paragraf için
   değil: cümle o genişlikte kelime kelime alt alta iniyor. */
.blk-strip-item:has(.blk-strip-text) { max-inline-size: none; }

/* ── bölüm ayracı ───────────────────────────────────────────
   Bir işaret, bir etiket, sayfa boyu ince bir çizgi. Bölüm değil, bölümler
   arasındaki nefes: uzun bir sayfada okuyucunun "burada yeni bir konu
   başlıyor" diyeceği yer.

   Çizgi kalan boşluğu alıyor, sabit bir uzunluk verilmiyor: etiket ne kadar
   uzun olursa olsun ayracın sağ ucu hep aynı yerde bitiyor ve sayfadaki
   bütün ayraçlar aynı eksende hizalanıyor. */
.blk-rule { padding-block: var(--space-md); }
.blk-rule-in {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--site-muted);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.blk-rule-dot {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background: currentColor;
}
.blk-rule-line {
  flex: 1;
  block-size: 1px;
  background: var(--site-line);
}

/* ── yığın liste ────────────────────────────────────────────
   Ortalı bir manşetin altında satırlar: solda küçük kare fotoğraf, sağda
   adı ve tek satırlık karşılığı.

   Yığılma satırın kendi işi (position: sticky) ve --i her satırın nerede
   duracağını söylüyor: birinci en üstte, ikincisi bir parmak aşağıda, üçüncü
   bir parmak daha. Liste ekranı aşacak kadar uzunsa satırlar üst üste
   biniyor; kısaysa sticky hiçbir şey yapmıyor ve düz bir liste kalıyor.
   Betikle ölçüp karar vermek gerekmedi — kural zaten koşullu.

   Her satırın kendi zemini VAR ve olmak zorunda: saydam satırlar üst üste
   bindiğinde iki yazı aynı yerde okunur. */
.blk-stack-head {
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
}
.blk-stack-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-3);
  line-height: 1.08;
}
.blk-stack-head .blk-lede { margin-inline: auto; }
.blk-stack-list {
  list-style: none;
  margin: var(--space-lg) auto 0;
  padding: 0;
  max-inline-size: 46rem;
  display: grid;
  gap: var(--space-md);
  /* Son satırın da yapışacak yeri olsun: kutunun dibi, üst üste binmiş
     satırların yüksekliği kadar aşağıda bitiyor. */
  padding-block-end: calc(var(--n, 1) * 0.9rem);
}
.blk-stack-row {
  position: sticky;
  inset-block-start: calc(var(--space-md) + var(--i, 0) * 0.9rem);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--site-radius);
  border: 1px solid var(--site-line);
  background: var(--site-surface);
}
.blk-stack-img {
  flex: none;
  inline-size: 4.25rem;
  block-size: 4.25rem;
  object-fit: cover;
  border-radius: var(--site-img-radius);
}
.blk-stack-row .blk-slot { flex: none; inline-size: 4.25rem; }
.blk-stack-say { display: grid; gap: 0.15rem; }
.blk-stack-label {
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blk-stack-text { font-size: var(--step--1); color: var(--site-muted); }

/* ── etiketli kolaj ─────────────────────────────────────────
   Fotoğraflar bir ızgarada değil bir kolajda: her kart bir öncekinden biraz
   daha aşağıda başlıyor ve dizi düz bir sıra olmaktan çıkıyor.

   Kaydırma yalnız iki sütun varken: tek sütuna düşmüş bir kolajda kaydırma,
   kartların arasında sebepsiz bir boşluk demek. Bu yüzden kural konteyner
   sorgusunun İÇİNDE — dışarıda yazılıp dar ölçüde geri alınsaydı, ölçü
   sırası bir gün değiştiğinde sessizce geri gelirdi. */
.blk-collage-in { display: grid; gap: var(--space-lg); }
.blk-collage-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
}
@container (min-width: 56rem) {
  .blk-collage-in { grid-template-columns: 1.15fr 1fr; align-items: center; }
  /* Yazı solda isteniyorsa sıra değişiyor, işaretleme değil: kaynak sırası
     ekran okuyucuda fotoğrafların cümleden önce gelmesi demek ve o sıra
     doğru — cümle fotoğrafları anlatıyor. */
  .blk-collage[data-side="start"] .blk-collage-say { order: -1; }
  .blk-collage-card { margin-block-start: calc(var(--i, 0) * 1.6rem); }
}
.blk-collage-card {
  position: relative;
  margin: 0;
  overflow: clip;
  aspect-ratio: 4 / 5;
  border-radius: var(--site-img-radius);
  background: var(--site-soft);
}
.blk-collage-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Perde etiketin şeridine ait, kartın tamamına değil: açık bir karede karta
   yayılan bir geçiş yazının bulunduğu yerde sönmüş oluyor ve beyaz etiket
   kayboluyor. Aynı ders .blk-rail-title ve .blk-loc-body'de de yazılı. */
.blk-collage-label {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  color: #fff;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0.6) var(--space-lg),
    rgb(0 0 0 / 0) 100%);
}
.blk-collage-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1.12;
}
.blk-collage-text { margin: var(--space-sm) 0 0; color: var(--site-muted); }

/* ── konum kartları ─────────────────────────────────────────
   Dikey kart: fotoğrafın sol üstünde şehir rozeti, altında adı ve adresi.
   İki diziliş, tek kart — kap aynı öğe, yalnız sınıfları değişiyor.

   Rozet açık zeminli (beyaz hap, koyu yazı): şehir adı bir konum işareti ve
   haritaların dili bu. Kartın alt yazısı ise fotoğrafın üstünde beyaz ve
   kendi perdesini taşıyor. */
.blk-locs-box { position: relative; margin-block-start: var(--space-md); }
.blk-locs-track { padding-block-end: var(--space-xs); }
.blk-locs-group {
  grid-column: 1 / -1;
  margin: var(--space-md) 0 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1.15;
}
.blk-locs-group:first-child { margin-block-start: 0; }
.blk-loc-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--site-img-radius);
  overflow: clip;
  background: var(--site-soft);
  color: #fff;
}
/* Rayda kart genişliğini kendi söylüyor: .blk-slide'ın tam genişlik kuralı
   burada yanlış olurdu, ekrana birden çok merkez sığmalı. */
.blk-locs[data-variant="rail"] .blk-loc-card {
  flex: 0 0 clamp(12rem, 52%, 16rem);
  scroll-snap-align: start;
}
@container (min-width: 56rem) {
  .blk-locs[data-variant="rail"] .blk-loc-card { flex-basis: 16rem; }
}
.blk-loc-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blk-loc-chip {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  max-inline-size: calc(100% - var(--space-md) * 2);
  /* Beyaz plaka fotoğrafın üstünde duruyor, sayfanın zemininde değil: mürekkebi
     de temadan değil plakadan alıyor. --site-ink yazılmıştı ve koyu temada o
     mürekkep açık renge dönüp beyaz hapın içinde tamamen kayboluyordu. Aynı
     istisna kataloğun her yerinde geçerli: fotoğrafın üstündeki renk temadan
     bağımsız. */
  background: rgb(255 255 255 / 0.92);
  color: #14181d;
  font-size: var(--step--2);
}
.blk-loc-body {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.72) calc(100% - var(--space-lg)),
    rgb(0 0 0 / 0) 100%);
}
.blk-loc-name {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  line-height: 1.2;
}
.blk-loc-address { margin: 0.2rem 0 0; font-size: var(--step--2); opacity: 0.86; }
/* Bağlantı kartın tamamını kaplıyor ama yalnız ad okunuyor: adresin de
   bağlantı gibi görünmesi, iki ayrı hedef varmış izlenimi verirdi. */
.blk-loc-link { color: inherit; text-decoration: none; }
.blk-loc-link::after { content: ""; position: absolute; inset: 0; }
.blk-loc-card:has(.blk-loc-link:hover) .blk-loc-name { text-decoration: underline; }

/* ── yapışkan sahne ─────────────────────────────────────────
   Ekranı kaplayan sahneler: bir yanda tam boy fotoğraf, öbür yanda şerit,
   cümle ve açıklama.

   Buradaki kurallar TABAN hâli, yani kaydırma zaman çizgisi olmayan
   tarayıcının gördüğü hâli: sahneler alt alta ve her fotoğraf kendi sahnesi
   boyunca yapışıyor. Bölüm eksiksiz okunuyor, yalnız ekrana çakılmıyor.
   Çakılan hâli aşağıda, kaydırmaya bağlı hareket katmanında.

   Sahne boyu 150svh: 100svh'i fotoğrafın kendisi, kalan 50svh yapıştığı
   süre. Tam 100svh olsaydı yapışma hiç görünmezdi — kaydıracak yer kalmıyor. */
.blk-scene-stage { display: grid; }
.blk-scene-panel { display: grid; gap: var(--space-md); }
.blk-scene-media {
  position: relative;
  overflow: clip;
  aspect-ratio: 4 / 5;
  background: var(--site-soft);
}
.blk-scene-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Dolgu tabanda da var: "tam kanal" bölümde .blk-in kendi kenar boşluğunu
   bırakıyor (bkz. [data-width="full"]) ve o boşluk yalnız doğrudan çocuklara
   (başlık, giriş) geri veriliyor — sahnenin içindeki bu metin kutusu araya
   birkaç kat girdiği için o kuralın hiç kapsamına girmiyordu; dar ekranda
   metin ekranın kenarına yapışık kalıyordu. */
.blk-scene-say { display: grid; align-content: center; gap: var(--space-sm);
  padding-inline: var(--space-md); }
/* Şerit yalnız sahne EKRANA ÇAKILDIĞINDA bir anlam taşıyor: "dördün
   hangisindeyim" göstergesi, aynı anda tek sahne görünmediği sürece bir
   ilerleme çubuğundan farksız. Dar ekranda çakılma hiç kurulmuyor (aşağıdaki
   min-width:56rem koşulu) ve sahneler art arda akıyor — o zaman şerit her
   sahnede aynı dört adı tekrar eden, hiçbir şey söylemeyen bir satıra
   dönüşüyordu. Sahnenin kendi başlığı zaten hangi sahne olduğunu söylüyor. */
.blk-scene-tabs {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* Şeritte yalnız bulunulan sahne koyu: geri kalanı nerede olduğunuzu
   söyleyen soluk bir ölçek. Renk farkı opaklıkla değil mürekkeple veriliyor,
   yoksa fotoğrafın üstüne denk gelen bir şeritte soluk adlar okunmuyordu.

   Seçici niteliğin varlığına değil DEĞERİNE bakıyor: Razor boş bırakılan
   niteliği düşürmüyor, `data-current=""` olarak basıyor (aynısı data-width'te
   de oluyor ve orada da değerle seçiliyor). Varlıkla seçilince şeritteki
   dört adın dördü birden koyu çıkıyor ve şerit hangi sahnede olduğunu
   söylemekten çıkıyordu. */
.blk-scene-tab { color: var(--site-muted); }
.blk-scene-tab[data-current="true"] { color: var(--site-ink); font-weight: 600; }
.blk-scene-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-3);
  line-height: 1.08;
}
.blk-scene-text { margin: 0; color: var(--site-muted); max-inline-size: 30rem; }

/* "Genişlik: Kenardan kenara" seçilse bile bölüm başlığı okunaklı kalsın
   diye ~68rem'de sabitleniyor (bkz. yukarıda [data-width="full"] > .blk-in
   kuralı). Bazı sahnelerde bu ölçü kısa bir cümleyi bile boşuna ikiye
   bölüyor ve fotoğrafın kullandığı geniş alanın yanında dar kalıyor.
   "Geniş" yalnız BAŞLIĞIN ölçüsünü gevşetiyor — fotoğrafın kendi genişliği
   ayrı bir eksen, ondan etkilenmiyor. İki kat: bir satıra sığdırmak için
   çoğu zaman yetiyor, daha fazlası satırı tekrar okunaksız yapardı. */
.blk-scene[data-title-width="wide"] > .blk-in > .blk-h2,
.blk-scene[data-title-width="wide"] > .blk-in > .blk-eyebrow {
  max-inline-size: calc((72rem - var(--space-md) * 2) * 2);
}

@container (min-width: 56rem) {
  .blk-scene-panel {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-block-size: 150svh;
    align-items: start;
  }
  /* Sıra değişiyor, işaretleme değil: kaynakta fotoğraf her zaman önce
     geliyor ve ekran okuyucuda sahnenin görseli cümlesinden önce anılıyor. */
  .blk-scene[data-side="end"] .blk-scene-media { order: 2; }
  .blk-scene-media {
    position: sticky;
    inset-block-start: 0;
    block-size: 100svh;
    aspect-ratio: auto;
  }
  .blk-scene-say {
    position: sticky;
    inset-block-start: 0;
    min-block-size: 100svh;
    padding-inline: var(--space-lg);
  }
  .blk-scene-tabs { display: flex; }
}

/* Küçülerek oturan açılış ekranı kaplayarak başlıyor. Kataloğun 46rem'lik
   tavanı (.blk-hero-stage[data-height="full"]) sayfanın ortasında duran bir
   açılış için doğru; sayfanın üstünü kaplayarak başlayıp içeri çekilen bir
   açılış için değil — küçülmenin görünmesi için küçüleceği bir yer gerekiyor.
   Hareketten bağımsız yazılıyor: desteklemeyen tarayıcıda da açılış ekranı
   kaplasın, yarım bir bant olarak durmasın. */
/* Ekranın tamamı derken sabit alt çubuğun örttüğü pay hariç: telefonda
   şerit ekranın son 3.25rem'ini kaplıyor ve tam boy bir açılışın altındaki
   düğme o şeridin dibine yapışıyordu — arada kalan tek boşluk düğmenin
   kendi dolgusunun şeridin altında kalmayan kırıntısıydı. */
.blk-hero-stage[data-scroll="shrink"] .blk-stage {
  min-block-size: calc(100svh - var(--site-quickbar-h)); }

/* ── kaydırmaya bağlı hareket ───────────────────────────────
   Belirme makinesinden ayrı bir katman ve ondan farklı bir soru soruyor:
   "bu bölüm göründü mü" değil, "sayfa ne kadar kaydı". İkisi de CSS'te
   bitiyor, site.js'in ikisinden de haberi yok.

   Üç emniyet:

     · @supports — zaman çizgisini tanımayan tarayıcıda kuralın hiçbiri
       kurulmuyor. Açılış kenardan kenara, hareketsiz duruyor; sahneler
       yapışıyor ama yumuşamıyor. İkisi de eksiksiz okunuyor.
     · prefers-reduced-motion — hareket istemeyen ziyaretçide kural yok.
     · Hiçbir yerde opaklık YOK, yalnız kırpma ve ölçek. Zaman çizgisi
       beklenmedik bir yerde durursa görünen şey biraz büyük ya da biraz
       kırpılmış olur; okunmaz olmaz. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Açılış kenardan kenara başlıyor, kaydırdıkça içeri çekilip köşeleri
       yuvarlanıyor: bölümün iki ucu da katalogda zaten var (data-width
       full ↔ rail), buradaki tek yeni şey aradaki geçiş.

       Kırpma kullanılıyor, kenar boşluğu değil: margin her karede yeniden
       yerleşim demek ve bu öğe sayfanın en büyüğü. clip-path kutunun
       ölçüsünü hiç değiştirmiyor, altındaki bölüm yerinden oynamıyor. */
    .blk-hero-stage[data-scroll="shrink"] .blk-stage {
      animation: blk-stage-shrink linear both;
      animation-timeline: scroll();
      animation-range: 0 90svh;
    }

    /* Sahne fotoğrafı yapıştığı süre boyunca çok az açılıyor: duran bir
       fotoğraf, yanındaki yazı da dururken sayfayı donmuş gösteriyordu. */
    .blk-scene-img {
      animation: blk-scene-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Bölümün ekrana çakılan hâli. Taban hâlde (yukarıda) sahneler alt alta
       geçiyor ve bölüm kayıp gidiyor; burada bölüm yerinde duruyor, kaydırma
       yalnız İÇİNDEKİNİ değiştiriyor.

       Kuruluş: dış kutu (.blk-scene-run) sahne sayısı kadar ekran boyu bir
       kaydırma yolu, iç kutu (.blk-scene-stage) o yolun başında yapışan tek
       ekranlık sahne, sahneler ise iç kutunun içinde üst üste duran katmanlar.

       Zaman çizgisi yolun kendisine ait ve adı bir ata öğede duruyor; her
       katman kendi dilimini `--i` / `--n` üzerinden hesaplıyor. Böylece
       katmanların birbirine bakan bir zaman çizgisi kurmasına gerek kalmıyor.

       Yalnız dar ölçüde kapalı: 400 piksellik bir ekranda yan yana duracak
       iki sütun yok ve ekranı kaplayan bir katman, sayfayı gezilemez yapardı. */
    @container (min-width: 56rem) {
      .blk-scene-run {
        position: relative;
        block-size: calc(var(--n, 1) * 100svh);
        view-timeline-name: --blk-scene;
        view-timeline-axis: block;
      }
      .blk-scene-stage {
        position: sticky;
        inset-block-start: 0;
        block-size: 100svh;
      }
      .blk-scene-panel { position: absolute; inset: 0; min-block-size: 0; }

      /* Geçiş katmanın tamamına verilmiyor, iki sütuna ayrı ayrı veriliyor —
         ve sebebi doğrudan görülen bir hata: katmanın tamamı yarı saydamken
         altındaki sahnenin CÜMLESİ üstündekinin cümlesinin içinden okunuyor.
         İki başlık aynı yerde üst üste biniyor ve ikisi de okunmuyor.

         Fotoğrafın üst üste binmesinde sakınca yok — iki fotoğrafın birbirine
         dönüşmesi zaten istenen şey. Sakınca yazıda; o yüzden yazı sütunu
         kendi zeminini taşıyor ve saydamlıkla değil, tek adımda takas
         ediliyor. Takas fotoğrafın geçişinin ortasında oluyor, yani gözün
         zaten fotoğrafta olduğu anda. */
      .blk-scene-panel .blk-scene-media,
      .blk-scene-panel .blk-scene-say {
        animation-timeline: --blk-scene;
        animation-fill-mode: both;
      }

      .blk-scene-panel .blk-scene-media {
        opacity: 0;
        animation-name: blk-scene-enter;
        animation-timing-function: linear;
        animation-range: contain calc((var(--i) - 0.3) / var(--n) * 100%)
                         contain calc(var(--i) / var(--n) * 100%);
      }

      .blk-scene-panel .blk-scene-say {
        background: var(--site-surface);
        visibility: hidden;
        animation-name: blk-scene-plate;
        animation-timing-function: steps(1, end);
        animation-range: contain calc((var(--i) - 0.3) / var(--n) * 100%)
                         contain calc((var(--i) - 0.15) / var(--n) * 100%);
      }

      /* İlk sahne taban katman: hareketi yok ve her zaman görünür. Emniyet
         burada — zaman çizgisi herhangi bir sebeple kurulamazsa bölüm ilk
         sahnede duruyor, boş kalmıyor. */
      .blk-scene-panel:first-child .blk-scene-media { opacity: 1; animation: none; }
      .blk-scene-panel:first-child .blk-scene-say { visibility: visible; animation: none; }

      /* İç sütunlar artık yapışmıyor: katmanın kendisi tam olarak bir ekran
         ve içinde kaydırılacak bir yer yok. Konumlandırma yine de kalkmıyor:
         fotoğraf mutlak konumlu ve kabı konumsuz kalırsa kendini katmanın
         tamamına yayıyor, yani sütunun dışına taşıyor. */
      .blk-scene-media {
        position: relative;
        block-size: 100%;
      }
      .blk-scene-say { position: static; min-block-size: 0; block-size: 100%; }
    }
  }
}

@keyframes blk-stage-shrink {
  from { clip-path: inset(0 round 0); }
  to {
    clip-path: inset(var(--space-sm) var(--space-md) var(--space-md)
                     round calc(var(--site-img-radius) * 2 + 0.5rem));
  }
}
@keyframes blk-scene-zoom {
  from { scale: 1.08; }
  to { scale: 1; }
}
/* Sahne beliriyor ama sönmüyor: söndürmek gerekmiyor, üstüne gelen sahne
   zaten onu kapatıyor. Sönme de yazılsaydı iki sahnenin arasında ikisinin de
   yarı saydam olduğu bir kare olurdu. */
@keyframes blk-scene-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Yazı sütununun takası: ara değer yok, tek adım. Bu yüzden zaman
   fonksiyonu steps(1, end) — cümle ya öncekidir ya sonraki, ikisinin
   ortalaması diye bir şey yok. */
@keyframes blk-scene-plate {
  from { visibility: hidden; }
  to { visibility: visible; }
}

/* ── tam kanal bant: alıntı ─────────────────────────────────
   Bandın açıklamasından ayrı bir öğe ve ayrı bir ses: cümle başlık
   yazıtipinde, iri ve tırnaklı. Atıf küçük ve altında — atıfsız da geçerli,
   çünkü söz bir kişinin değil kurumun ilkesi olabilir. */
.blk-band-quote {
  margin: var(--space-md) 0 0;
  max-inline-size: 34rem;
}
.blk-band-quote p {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1.18;
}
.blk-band-author {
  margin-block-start: var(--space-sm);
  font-size: var(--step--2);
  opacity: 0.85;
}

/* ── özgeçmiş çizelgesi ─────────────────────────────────────
   Sırayı yıl kuruyor, o yüzden en iri duran öğe yıl. Başlık onun altında
   ve daha küçük: ziyaretçi önce "ne zaman" diye bakıyor.

   İki duruş aynı işaretlemeyi kullanıyor. Yatay şeritte satırlar yan yana
   ve taşarsa kaydırılıyor — ok yok, çünkü çalışmayan bir denetimi ölçerek
   gizlemek gerekiyordu ve kaydırma parmakla zaten mümkün. Alt alta hâlinde
   yılın hizasından tek bir çizgi geçiyor. */
.blk-cv-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.blk-cv-year {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--site-primary-ink);
  font-variant-numeric: tabular-nums;
}
.blk-cv-label {
  margin: 0.35rem 0 0;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-muted);
}
.blk-cv-title {
  margin: var(--space-xs) 0 0;
  font-size: var(--step-0);
  line-height: 1.25;
}
.blk-cv-text {
  margin: var(--space-xs) 0 0;
  color: var(--site-muted);
  font-size: var(--step--1);
}

/* Yatay şerit. Ray dışına taşan bir kaydırma kabı yerine sayfanın kendi
   rayında kalıyor: özgeçmiş beş satır ve beş satır 72rem'e sığıyor.
   Sığmadığında kaydırılıyor, kırpılmıyor. */
.blk-cv[data-variant="rail"] .blk-cv-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--space-sm);
}
.blk-cv[data-variant="rail"] .blk-cv-item {
  scroll-snap-align: start;
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--site-line);
}
/* Yılın hizasındaki nokta: çizginin üstünde durup satırın nereden
   başladığını söylüyor. */
.blk-cv[data-variant="rail"] .blk-cv-item {
  position: relative;
}
.blk-cv[data-variant="rail"] .blk-cv-item::before {
  content: "";
  position: absolute;
  inset-block-start: -0.3125rem;
  inset-inline-start: 0;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--site-primary);
}

/* Alt alta. Çizgi yılın sağından geçiyor ve son satırda bitiyor:
   sonuncunun altından sarkan bir çizgi, devamı varmış gibi duruyor. */
.blk-cv[data-variant="column"] .blk-cv-list {
  display: grid;
  gap: var(--space-lg);
}
.blk-cv[data-variant="column"] .blk-cv-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.5rem, 9rem) 1fr;

  /* Aralık yalnız SÜTUNLAR arasında. `gap` kısayolu satırlara da
     giriyordu: etiket, başlık ve açıklama kendi kenar paylarını zaten
     taşıyor ve ikisi üst üste binince üç satırlık bir kayıt, beş satırlık
     yer kaplıyordu. */
  column-gap: var(--space-md);
  row-gap: 0;
  align-items: start;
}

/* Yıl BÜTÜN satırları kaplıyor.

   `span 2` iken satırın üç satırından (etiket, başlık, açıklama) ikisini
   kaplıyordu: yıl sarınca ilk iki satır onun boyuna geriliyor, açıklama da
   üçüncü satırda yılın altına düşüyordu — başlıkla açıklamanın arasında
   bir ekran boyu boşluk. */
.blk-cv[data-variant="column"] .blk-cv-year {
  grid-row: 1 / -1;

  /* Aralık da yazılabiliyor ("1997–2003"), o yüzden sarmıyor ve ölçüsü
     tek bir yıla göre değil aralığa göre seçilmiş. Bütün satırlarda aynı
     boy: satır satır değişen bir yıl ölçüsü çizelgeyi bozar. */
  white-space: nowrap;
  font-size: var(--step-1);
}
.blk-cv[data-variant="column"] .blk-cv-label { grid-column: 2; margin-block-start: 0; }
.blk-cv[data-variant="column"] .blk-cv-title,
.blk-cv[data-variant="column"] .blk-cv-text { grid-column: 2; }
.blk-cv[data-variant="column"] .blk-cv-item::before {
  content: "";
  position: absolute;
  inset-block: 1.6rem calc(-1 * var(--space-lg));
  inset-inline-start: calc(min(9rem, max(4.5rem, 15%)) - var(--space-md) / 2);
  inline-size: 2px;
  background: var(--site-line);
}
.blk-cv[data-variant="column"] .blk-cv-item:last-child::before { display: none; }

@container (max-width: 34rem) {
  .blk-cv[data-variant="column"] .blk-cv-item { grid-template-columns: 1fr; }
  .blk-cv[data-variant="column"] .blk-cv-year { grid-row: auto; }
  .blk-cv[data-variant="column"] .blk-cv-label,
  .blk-cv[data-variant="column"] .blk-cv-title,
  .blk-cv[data-variant="column"] .blk-cv-text { grid-column: 1; }
  .blk-cv[data-variant="column"] .blk-cv-item::before { display: none; }
}

/* ── kısayol şeridi ─────────────────────────────────────────
   Karo bir kapı, bir anlatım değil: yazısı kısa, oku köşede ve tıklama
   hedefi karonun tamamı. Vurgulu karo kendi zeminini taşıyor ve iki düğme
   takımını da yazmıyor — içinde düğme yok, yalnız yazı ve ok var. */
.blk-jumps-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  margin-block-start: var(--space-md);
}
.blk-jump {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  padding-inline-end: calc(var(--space-md) + 2rem);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: var(--site-soft);
  color: inherit;
  text-decoration: none;
  min-block-size: 6.5rem;
}
a.blk-jump { transition: border-color 140ms ease, background-color 140ms ease; }
a.blk-jump:hover { border-color: var(--site-primary-ink); background: var(--site-surface); }
a.blk-jump:focus-visible { outline: 3px solid var(--site-primary); outline-offset: 2px; }

.blk-jump-icon {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--site-primary-ink);
}
.blk-jump-body { display: block; min-inline-size: 0; }
.blk-jump-title {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.2;
}
.blk-jump-note {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--step--2);
  color: var(--site-muted);
}
.blk-jump-note + .blk-jump-title { margin-block-start: 0.15rem; }
.blk-jump-phone {
  display: block;
  margin-block-start: 0.35rem;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.blk-jump-go {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--site-primary-ink);
}
.blk-jump-go svg { inline-size: 100%; block-size: 100%; }

/*
  Vurgulu karo: zemini marka rengi, mürekkebi onun üstünde okunan renk.
  --site-muted burada kullanılamaz — o sayfanın zeminine göre ölçülmüş bir
  gri ve marka zemininde kayboluyor; sönük yazı için mürekkebin kendisi
  saydamlaştırılıyor.
*/
.blk-jump[data-tone="accent"] {
  border-color: transparent;
  background: var(--site-primary);
  color: var(--site-on-primary);
}
.blk-jump[data-tone="accent"] .blk-jump-icon,
.blk-jump[data-tone="accent"] .blk-jump-go { color: inherit; }
.blk-jump[data-tone="accent"] .blk-jump-note { color: var(--site-on-primary-muted); }
/* Vurgulu karonun üstüne gelindiğinde zemin değişmiyor — marka renginin
   ikinci bir tonu tanımlı değil ve uydurulmuş bir ton kontrast
   garantisinin dışına düşer. Değişen şey kenarlık: karo o an bir kutu
   kazanıyor. */
a.blk-jump[data-tone="accent"]:hover { border-color: var(--site-on-primary); }

@container (max-width: 48rem) {
  .blk-jumps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 26rem) {
  .blk-jumps-grid { grid-template-columns: 1fr; }
}

/* ── seçilmiş yayınlar ──────────────────────────────────────
   Künye bir kart değil, okunacak bir metin: kartın tamamı bağlantı
   değil, yalnız alttaki satır. Başlık iri ve serif tarafta, dergi ve
   yazarlar sönük — göz sırayla başlığa, sonra nerede yayımlandığına
   gidiyor. */
.blk-pubs-grid { align-items: start; }
.blk-pub {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.blk-pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}
.blk-pub-title {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.28;
}
.blk-pub-venue {
  margin: 0;
  color: var(--site-muted);
  font-size: var(--step--1);
}
.blk-pub-authors {
  margin: 0;
  color: var(--site-muted);
  font-size: var(--step--2);
}
/* Bağlantı satırı kartın altına yapışıyor: yan yana duran künyelerin
   boyları farklı ve düğmeleri farklı hizada durunca liste dağılıyor. */
.blk-pub-go { margin: auto 0 0; padding-block-start: var(--space-xs); }

/* ── sonuç galerisi ─────────────────────────────────────────
   Kaydırma kolu hero-compare'in makinesi (.blk-compare*); burada yalnız
   onun etrafındaki ızgara, künye ve yan yana duruş var. */
.blk-results-track {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  margin-block-start: var(--space-md);
}
.blk-result { margin: 0; }
.blk-result-cap { margin-block-start: var(--space-sm); }
.blk-result-title {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.25;
}
.blk-result-note {
  margin: var(--space-xs) 0 0;
  color: var(--site-muted);
  font-size: var(--step--1);
}
.blk-result-consent {
  margin-block-start: var(--space-md);
  color: var(--site-muted);
  font-size: var(--step--2);
}

/* Yan yana duruş: iki kare ve altlarında etiketleri. Etiket fotoğrafın
   üstünde değil altında — kolun olmadığı yerde perdeye gerek yok ve
   fotoğrafın üstündeki yazı §3.1'in bütün tuzaklarını getiriyor. */
.blk-result-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}
.blk-result-side { display: grid; gap: 0.35rem; }
.blk-result-side .blk-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  inline-size: 100%;
  border-radius: var(--site-img-radius);
}
.blk-result-tag {
  font-size: var(--step--2);
  color: var(--site-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*
  Bir "karşılaştırma" iki kare demek: iki sütunluk bir ızgarada dört kare
  yan yana geliyor ve her biri 145 piksele düşüyor — o ölçüde öncesiyle
  sonrası arasındaki fark hiç görünmüyor. Ölçüldü ve tabana bir alt sınır
  kondu: bir karşılaştırma 22rem'in altına inmiyor, sığmadığında satır
  sayısı azalıyor.
*/
.blk-results[data-variant="pair"] .blk-results-track,
.blk-results[data-variant="slider"] .blk-results-track {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

/*
  Zaman serisi: kareler tek bir yatay şeritte ve şerit kaydırılıyor.
  Izgaraya değil şeride koymak, "bunlar bir sıra" demenin yolu — üç
  aşamayı iki satıra bölmek sırayı görünmez yapardı.
*/
.blk-results[data-variant="series"] .blk-results-track {
  grid-auto-flow: column;
  grid-auto-columns: minmax(22rem, 1fr);
  grid-template-columns: none;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--space-sm);
}
.blk-results[data-variant="series"] .blk-result { scroll-snap-align: start; }

@container (max-width: 42rem) {
  .blk-results-track { grid-template-columns: 1fr; }
}

/* ── hekim kartı: branş rozeti ──────────────────────────────
   Rozet portrenin köşesine oturuyor, kartın köşesine değil: kartta
   dursaydı fotoğrafı olmayan hekimde havada kalırdı. */
.blk-person-face { position: relative; display: inline-block; }
.blk-person-badge {
  position: absolute;
  inset-block-end: -0.35rem;
  inset-inline-start: -0.35rem;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: var(--site-primary);
  color: var(--site-on-primary);
  /* Plaka rozetin altındaki fotoğraftan ayrılsın diye: aynı renkli bir
     önlükte rozet fotoğrafın içinde kayboluyordu. */
  box-shadow: 0 0 0 3px var(--site-surface);
}
.blk-person-badge-icon { inline-size: 1.15rem; block-size: 1.15rem; }

/* ── anlaşmalı kurumlar: numaralı ve yıllı ──────────────────
   Aynı tablo bir ödül/tarihçe listesi de olabiliyor: işaret sütununda
   onay yerine sıra numarası, sağda yıl. Yılı olmayan satır boş hücre
   bırakmıyor — sütun render'da hiç çizilmiyor. */
.blk-coverage-no {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step--1);
  color: var(--site-muted);
  font-variant-numeric: tabular-nums;
}
.blk-coverage-year {
  flex: none;
  color: var(--site-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
/* Numaralı duruşta işaret sütunu daralıyor: iki hane, bir logo kadar yer
   kaplamamalı. */
.blk[data-variant="numbered"] .blk-coverage-mark {
  inline-size: 2rem;
  min-inline-size: 2rem;
}

/* ── basında biz: kapaklı kartlar ───────────────────────────
   Dördüncü duruş. Öbür üçünde haber bir satır — kaynak, başlık, tarih;
   burada kapağı var ve kapak videonun donmuş karesi olabiliyor.
   Öne çıkan haber bu duruşta hiç çizilmiyor (bkz. press-list.cshtml):
   kapaklı kartların yanında ikinci bir büyük kare iki öne çıkan demek. */
.blk-press[data-variant="cards"] .blk-press-grid { display: block; }
.blk-press[data-variant="cards"] .blk-press-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-md);
}
.blk-press[data-variant="cards"] .blk-press-item {
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--space-md);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  overflow: hidden;
  background: var(--card-surface, var(--site-soft));
}
.blk-press[data-variant="cards"] .blk-press-source,
.blk-press[data-variant="cards"] .blk-press-title,
.blk-press[data-variant="cards"] .blk-press-date {
  padding-inline: var(--space-md);
}
.blk-press[data-variant="cards"] .blk-press-source { margin-block-start: var(--space-md); }
/* Ok kartın sağ altında: kapağın üstünde dursaydı oynat işaretiyle
   çakışırdı ve ikisi de "buraya bas" diyen iki ayrı işaret olurdu. */
.blk-press[data-variant="cards"] .blk-press-go {
  position: static;
  align-self: flex-end;
  margin-inline-end: var(--space-md);
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
}

.blk-press-shot {
  position: relative;
  display: block;
}
.blk-press-shot .blk-img {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  display: block;
}
/*
  Oynat işareti: beyaz üçgen, koyu daire. İkisi de sabit renk ve olması
  gereken de bu — işaret fotoğrafın üstünde duruyor, sayfanın zemininde
  değil, ve kullanıcının koyacağı karenin açık mı koyu mu olduğu
  bilinmiyor (aynı gerekçe .blk-loc-chip'te yazılı).
*/
.blk-press-shot[data-kind="video"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
  pointer-events: none;
}
.blk-press-shot[data-kind="video"]::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -35% -50%;
  z-index: 1;
  inline-size: 0;
  block-size: 0;
  border-block: 0.55rem solid transparent;
  border-inline-start: 0.9rem solid #fff;
  border-inline-end: 0;
  pointer-events: none;
}

/* ── randevu: tek satır şerit ───────────────────────────────
   İkinci duruş. Kart yan sütun için; şerit açılışın hemen altı için —
   orada bir kart, ekranın yarısını boş bırakıp sayfanın ortasında duran
   bir kutu oluyordu.

   Aynı içerik, üç sütuna dağılıyor: solda başlık, ortada söz verilenler,
   sağda düğmeler. Dar ölçüde kartın kendi düzenine dönüyor — üç sütunu
   400 pikselde yan yana tutmak, üçünü de okunmaz yapardı. */
@container (min-width: 44rem) {
  /*
    Yerleşim SATIR NUMARASIYLA kuruluyor, otomatik yerleşimle değil.

    Denendi ve kırıldı: sağdaki iki düğme `grid-row: 1 / -1` ile bütün
    satırları kaplıyor, kestirmeler ise otomatik yerleşimle bir yer
    arıyordu. Etiket ve söz listesi olmayan bir şeritte — yani bu iki
    alanı doldurmayan her sitede — kestirmelere boş hücre kalmıyor ve
    ızgara alta yeni bir satır açıyordu. Açılan satır, bütün satırları
    kaplayan düğmeyi de uzatıyor ve şerit ortasında yarım ekran boşluk
    olan bir kutuya dönüşüyordu (ölçüldü: 500 piksel).

    Dört satır burada AÇIKÇA tanımlı. Boş kalan satırın yüksekliği sıfır,
    yani eksik alan yer kaplamıyor; ama satır VAR olduğu için düğmeler
    kendi yerlerini biliyor ve otomatik yerleşime hiç gerek kalmıyor.
  */
  .blk-book[data-variant="bar"] .blk-booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
    grid-template-rows: auto auto auto auto;
    align-items: center;
    column-gap: var(--space-lg);
    row-gap: var(--space-sm);
  }
  .blk-book[data-variant="bar"] .blk-booking > .blk-eyebrow { grid-area: 1 / 1; margin: 0; }
  /* Sınıf her zaman blk-h2; etiket ilk bölümde h1 oluyor ama sınıf
     değişmiyor (bkz. BlockHtml.SectionHeading). */
  .blk-book[data-variant="bar"] .blk-booking > .blk-h2 { grid-area: 2 / 1; margin: 0; }
  .blk-book[data-variant="bar"] .blk-booking-text { grid-area: 3 / 1; margin: 0; }
  .blk-book[data-variant="bar"] .blk-booking-promises {
    grid-area: 4 / 1;
    margin-block-start: 0;
  }
  /*
    Düğmeler sağda alt alta. "Ya da" ayıracı burada gizli: iki düğme yan
    yana değil alt alta duruyor ve aralarına giren yatay çizgi şeridin
    ortasını ikiye bölüyordu.
  */
  .blk-book[data-variant="bar"] .blk-booking-or { display: none; }
  .blk-book[data-variant="bar"] .blk-booking .blk-booking-go {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-block-start: 0;
    align-self: end;
    white-space: nowrap;
  }
  .blk-book[data-variant="bar"] .blk-booking-reach {
    grid-column: 2;
    grid-row: 3 / 5;
    align-self: start;
  }
  /* Tek başına duran kestirmeler ortada: üstünde bekleyen bir düğme yok. */
  .blk-book[data-variant="bar"] .blk-booking:not(:has(.blk-booking-go)) .blk-booking-reach {
    grid-row: 1 / 5;
    align-self: center;
  }
}

/*
  Açılışın altına biniyor — ama yalnız gerçekten bir açılışın altındaysa.
  Blokların hepsi main > div > .blk kalıbında duruyor, o yüzden "bir önceki
  kutunun içinde açılış var mı" diye sorulabiliyor. Sorulmasaydı şerit
  sayfanın ortasında da yukarı kayar ve üstündeki bölümün son satırını
  keserdi.

  @container DEĞİL @media, ve sebebi .blk-page-split'teki ile aynı: seçicinin
  öznesi `main > div`, yani bölümün DIŞI. container-type yalnız `.blk`de ve
  bir kap sorgusu ancak kabın İÇİNDEKİ öğeler için eşleşiyor — kural kap
  sorgusunun içindeyken hiçbir genişlikte tutmadı ve şerit hiç binmedi.
  Yukarıdaki ızgara kuralları kap sorgusunda kalıyor: onların öznesi
  `.blk-book`un çocukları ve orada kap doğru.
*/
@media (min-width: 44rem) {
  main > div:has(> :is(.blk-hero, .blk-classic)) + div > .blk-book[data-variant="bar"] {
    margin-block-start: calc(-1 * var(--space-lg));
    position: relative;
  }
}

/* ── açılış: sahne, arkadaki dev kelime ─────────────────────
   Başlığın arkasında duran, taşacak kadar iri ve neredeyse görünmez bir
   kelime. Rengi yok: currentColor'ı çok düşük bir opaklıkta kullanıyor,
   yani sahne beyaz mürekkebe geçtiğinde (fotoğraf varken) kelime de
   beyazlıyor. Sabit bir renk, kullanıcının koyacağı fotoğrafın açık mı
   koyu mu olduğunu bilmediğimiz için ya kaybolur ya başlığı ezerdi.

   Fotoğrafın üstünde değil ALTINDA duruyor (z-index -1, .blk-stage-img
   -2 seviyesinde): sahne fotoğrafı kaplayınca kelime görünmüyor ve bu
   doğru — kesme portreli bir açılışta arkası boş kalıyor, dolu bir
   fotoğrafta zaten yeri yok. */
.blk-stage-ghost {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: -1;
  max-inline-size: none;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(6rem, 22cqi, 18rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
/*
  Fotoğraf VARSA kelime hiç çizilmiyor. Referansta bu desen kesme bir
  portrenin arkasında, düz bir zeminde duruyor; bizim sahnemizin fotoğrafı
  kenardan kenara ve ne olduğunu bilmiyoruz. Denendi: dev kelime portrenin
  yüzüyle çakıştı ve ikisi de okunmaz oldu — §3.1'in aynı ailesi, "fotoğrafın
  üstüne yazı koyarken fotoğrafın koyu olduğunu varsayamazsın".

  Yani alan ölü değil, yeri belli: fotoğrafsız açılışlarda çalışıyor.
*/
.blk-stage:has(.blk-stage-img) .blk-stage-ghost { display: none; }

/* ── kayan şerit ────────────────────────────────────────────
   Liste iki kez basılıyor ve ikisi birlikte kendi genişliğinin yarısı
   kadar kayıyor: birinci kopya soldan çıkarken ikincisi tam onun bittiği
   yerden giriyor ve dikiş görünmüyor. Yüzde değil "-50%" olması şart —
   sabit bir piksel değeri kelime sayısı değişince dikişi açardı. */
.blk-marquee {
  padding-block: 0;
  overflow: clip;
  /* Ray yok: şerit kenardan kenara gidiyor ve .blk-in taşımıyor. */
}
.blk-marquee-track {
  display: flex;
  inline-size: max-content;
}
.blk-marquee-run {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blk-marquee-run > li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-inline-end: var(--space-md);
}
.blk-marquee-word {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.02em;
  padding-block: var(--space-sm);
  white-space: nowrap;
}
.blk-marquee-mark { font-size: var(--step-0); opacity: 0.6; }

/*
  Üç ton, üçü de kendi zeminini ve mürekkebini taşıyor. --site-muted
  hiçbirinde kullanılamaz: o sayfanın zeminine göre ölçülmüş bir gri ve
  renkli bir bandın üstünde kayboluyor.
*/
.blk-marquee[data-tone="accent"] { background: var(--site-primary); color: var(--site-on-primary); }
.blk-marquee[data-tone="invert"] { background: var(--site-ink); color: var(--site-surface); }
.blk-marquee[data-tone="soft"] { background: var(--site-soft); color: var(--site-ink); }

/* Zebra bu şeridi atlıyor: kendi zemini var. */

@media (prefers-reduced-motion: no-preference) {
  .blk-marquee-track { animation: blk-marquee-run var(--blk-marquee-time, 38s) linear infinite; }
  .blk-marquee[data-speed="slow"] { --blk-marquee-time: 60s; }
  .blk-marquee[data-speed="fast"] { --blk-marquee-time: 22s; }
}
@keyframes blk-marquee-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── tonlu kartlar ──────────────────────────────────────────
   Fotoğrafsız, rengiyle anlatan kartlar. Başlığın altındaki çizgi süs
   değil: kartın "ne olduğu" yarısını "ne yaptığı" yarısından ayırıyor.

   Kart yüksekliği içeriğe göre değil satıra göre: yan yana duran üç kartın
   biri kısa metinliyse ötekilerle aynı boyda duruyor, yoksa satır
   basamaklanıyor. */
/* Kutu rayın dışına çıkıyor: 72rem içinde üç kart her birine 330 piksel
   bırakıyor ve iki kelimelik başlık üç satıra kırılıyordu. Ölçüldü —
   referansın kartı 320 piksel GENİŞ ve 360 piksel yüksek, yani neredeyse
   kare; bizimki 270×420 ile dikey bir şerit olmuştu. */
.blk-tones .blk-in { max-inline-size: max(86rem, var(--site-rail)); }
.blk-tones-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  margin-block-start: var(--space-lg);
  align-items: stretch;
}
.blk-tone {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border-radius: var(--site-radius);
  min-block-size: 22rem;
  position: relative;
  isolation: isolate;
}
.blk-tone-eyebrow {
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  opacity: 0.75;
  /* Büyük harf yok: "BÜTÜNCÜL BAKIM" dar bir sütunda iki satıra
     kırılıyordu ve referansta da küçük harfle duruyor. */
}
.blk-tone-title {
  /* Başlık kartın ortasına değil altına yakın duruyor: üst boşluk
     bilinçli, referansın kartında da başlık aşağıda. */
  margin: auto 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.blk-tone-link { color: inherit; text-decoration: none; }
/* Bağlantının alanı kartın tamamına yayılıyor: iki kelimelik bir başlığa
   parmakla isabet ettirmek şans işi (aynı kural .blk-panel-link'te). */
.blk-tone-link::after { content: ""; position: absolute; inset: 0; }
.blk-tone-rule {
  display: block;
  block-size: 1px;
  inline-size: 100%;
  background: currentColor;
  opacity: 0.22;
}
.blk-tone-text { margin: 0; font-size: var(--step--1); opacity: 0.82; }

.blk-tone[data-tone="soft"] { background: var(--site-soft); color: var(--site-ink); }
.blk-tone[data-tone="accent"] { background: var(--site-primary); color: var(--site-on-primary); }
.blk-tone[data-tone="invert"] { background: var(--site-ink); color: var(--site-surface); }
.blk-tone[data-tone="plain"] {
  background: transparent;
  color: var(--site-ink);
  border: 1px solid var(--site-line);
}

@container (max-width: 46rem) {
  .blk-tones-grid { grid-template-columns: 1fr; }
  .blk-tone { min-block-size: 0; }
}

/* ── açılış: sayı kartları ──────────────────────────────────
   Fotoğraf sahnenin kendisi; yazı solda, rakamlar sağ altta havada duran
   beyaz kartlar. Sahne kenardan kenara değil, kenarlardan içeri çekilmiş
   ve köşeleri yuvarlatılmış — referansın açılışı da öyle duruyor. */
.blk-herofig { padding-block: var(--space-sm); }
.blk-herofig-in {
  max-inline-size: 100rem;
  margin-inline: auto;
  padding-inline: var(--space-sm);
}
.blk-herofig-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-block-size: 34rem;
  padding: var(--space-xl, var(--space-lg)) var(--space-lg);
  border-radius: calc(var(--site-img-radius) * 1.5);
  overflow: clip;
  background: var(--site-soft);
}
.blk-herofig[data-height="full"] .blk-herofig-stage { min-block-size: min(46rem, 86vh); }

/* Ekran boyu.

   Bu dilin varsayılanı sahneyi kenarlardan içeri çekmek; "ekranı kaplasın"
   denince o içe çekme de düşüyor — kenardan kenara duran bir sahnenin
   yuvarlak köşesi olmaz, kenar zaten yok.

   Yükseklik 100svh değil, ekranın üst barın altında kalan kısmı: bar
   akışta duruyor ve bu blok altına çekilmiyor, tam ekran yazsaydım açılış
   bar boyu kadar taşardı. svh, mobilde adres çubuğu açıkken vh'nin
   saymadığı yeri de doğru sayıyor.

   Sahne kenara dayanıyor ama yazı dayanmıyor: iç pay rayın kenarını
   buluyor, yoksa başlık ekranın sol köşesine yapışırdı. */
.blk-herofig[data-height="screen"] { padding-block: 0; }
.blk-herofig[data-height="screen"] .blk-herofig-in {
  max-inline-size: none;
  padding-inline: 0;
}
.blk-herofig[data-height="screen"] .blk-herofig-stage {
  min-block-size: calc(100svh - var(--site-head-h));
  border-radius: 0;
  padding-inline: max(var(--space-lg), calc((100cqi - 72rem) / 2));
}

.blk-herofig-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/*
  Perde yazının tarafına ait, karta yayılan bir geçişe değil: açık bir
  fotoğrafta karta yayılan perde yazının olduğu yerde sönüyor ve beyaz
  başlık kayboluyor. Soldan sağa, yazının bittiği yerde biten bir perde.
*/
.blk-herofig-stage:has(.blk-herofig-img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    rgb(8 54 59 / 0.86) 0%,
    rgb(8 54 59 / 0.72) 34%,
    rgb(8 54 59 / 0) 68%);
}
.blk-herofig-stage:has(.blk-herofig-img) { color: #fff; }
.blk-herofig-stage:has(.blk-herofig-img) .blk-eyebrow,
.blk-herofig-stage:has(.blk-herofig-img) .blk-lede { color: inherit; opacity: 0.92; }

.blk-herofig-body { max-inline-size: 34rem; }
.blk-herofig-title {
  margin: 0.35rem 0 var(--space-sm);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
/* Fotoğrafın üstünde ikincil düğme beyaz dolgulu: çerçeveli bir düğme
   koyu bir karede kayboluyor ve "ikinci seçenek" hiç görünmüyor. */
.blk-herofig-stage:has(.blk-herofig-img) .blk-herofig-alt {
  background: #fff;
  color: #08363b;
  border-color: #fff;
}

/*
  Kartlar sahnenin sağ altında. Akışın içinde değil mutlak konumlu:
  akışta olsalardı yazının altına düşer ve sahnenin boyu iki katına
  çıkardı. Dar ölçüde mutlaklık kalkıyor (aşağıda) — orada üst üste
  binmek okunmaz demek.
*/
.blk-herofig-figures {
  position: absolute;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: var(--space-sm);
  inline-size: min(26rem, 46%);
}
.blk-herofig-fig {
  margin: 0;
  padding: var(--space-md);
  border-radius: var(--site-img-radius);
  /* Sabit beyaz: kart fotoğrafın üstünde duruyor, sayfanın zemininde
     değil — koyu temada --site-surface koyuya dönüp kartı yok ediyordu
     (aynı ders .blk-loc-chip'te yazılı). */
  background: #fff;
  color: #08363b;
}
.blk-herofig-value {
  display: block;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--site-primary);
}
.blk-herofig-label {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--step--1);
}

@container (max-width: 52rem) {
  .blk-herofig-figures {
    position: static;
    inline-size: 100%;
    margin-block-start: var(--space-lg);
  }
  .blk-herofig-body { max-inline-size: none; }
}

/* ── bölünmüş satır ─────────────────────────────────────────
   Tek çerçeve, içinde dikey çizgiyle ayrılmış sütunlar. feature-grid'de
   her sütun kendi kartı ve aralarında boşluk var; burada kutu tek ve
   ayıran şey çizgi. */
.blk-rowbox[data-align="center"] .blk-in { text-align: center; }
.blk-rowbox[data-align="center"] .blk-split-cell { text-align: start; }

/* Kutu artık rayın DIŞINA çıkmıyor.

   Eskiden 92rem'e genişliyordu: dört sütun 72rem içinde her birine 200
   piksel bırakıyor ve tek cümlelik açıklama kelime kelime alt alta
   düşüyordu. Ama rayı aşan bir bölüm sayfada ikinci bir sol kenar
   açıyor — ve dar rayla çalışan bir sitede bu hemen görünüyor.

   Çözüm genişletmek değil sarmak: sütun alt sınırı 14rem ve sığmayan
   sütunlar alt satıra iniyor. Dört sütun geniş rayda yan yana, dar rayda
   ikişerli duruyor; ikisinde de kelime kelime kırılan bir açıklama yok. */
.blk-split-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-block-start: var(--space-lg);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  overflow: clip;
}
.blk-split-cell {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-sm);
  /* Dolgu kartın kendi dolgusu kadar (--space-md, bkz. .blk-card): --space-lg
     geniş ekranda 72 piksele çıkıyor ve dört sütuna bölünmüş bir hücrede
     yazının kendisinden çok kenar payı kalıyordu.

     16rem'lik alt sınır da bu yüzden kalktı. Dolgu 72 pikselken o sınır
     içerikle hemen hemen örtüşüyordu; küçülünce üstteki 1fr'lik satır
     sınıra yetişmek için açılıyor ve başlıkla metnin arasında hücrenin
     içine ait olmayan bir boşluk bırakıyor. Yükseklik artık içerikten
     geliyor: ızgara hücreleri en uzun olana eşitliyor, yani kutu yine tek
     parça duruyor ve 1fr yalnız satır sayısı farkını yutuyor. */
  padding: var(--space-md);
  /* Sütunları ayıran şey artık çizgi değil zeminin kendisi: her hücre
     bir öncekinden bir ton daha koyu. Ton sabit renkle değil paletin
     kendisiyle karışarak çıkıyor — sabit yazılsaydı turuncu bir sitede
     lacivert bir şerit kalırdı; böyle palet değişince üç ton da onunla
     dönüyor, koyu şemada da `--site-surface` koyu olduğu için karışım
     kendiliğinden koyulaşıyor.

     Sıra `--i`'den geliyor, `nth-child`'dan değil: hücreler dar rayda
     sarıp alt satıra düşüyor ve ton sırası orada da bozulmuyor.

     Karışımın öbür ucu `transparent`, düz bir renk değil: ton böyle
     sayfanın KENDİ zemininin üstüne biniyor ve ilk hücre (%0) tam olarak
     o zemin oluyor — dizi zeminden başlayıp ileri gidiyor. `--site-surface`
     yazılsaydı ilk hücre beyaz bir yama olur, kâğıt zeminli bir sayfada
     kutu zeminden kopardı.

     Tavan %12: dört sütundan sonrası artmıyor. Daha koyusunda açıklama
     `--site-muted` ile yazıldığı için kontrast düşüyor. */
  background: color-mix(in oklab,
    var(--site-primary) min(12%, calc(var(--i, 0) * 5%)),
    transparent);
}
.blk-split-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--site-primary);
}
/* İkonu olmayan hücre de aynı hizada başlasın: ilk satır boş kalıyor. */
.blk-split-cell > :first-child:not(.blk-split-icon) { grid-row: 3; }
.blk-split-title { margin: 0; font-size: var(--step-1); line-height: 1.2; }
.blk-split-text { margin: 0; font-size: var(--step--1); color: var(--site-muted); }

@container (max-width: 58rem) {
  .blk-split-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 30rem) {
  .blk-split-box { grid-template-columns: 1fr; }
}

/* ── galeri: şeridin ortalı etiketi ─────────────────────────
   Referansın Instagram şeridi kenardan kenara DEĞİL: kareler arasında
   boşluk var, köşeleri yuvarlak ve üstünde ortalanmış küçük bir etiket
   duruyor. Şerit varyantı zaten kaydırıyor; buradaki tek ek başlığın
   ortalanması ve küçülmesi. */
.blk[data-variant="strip"] .blk-h2 {
  text-align: center;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-muted);
  margin-block-end: var(--space-md);
}

/* ── koleksiyon kartları: kaydırılmış ───────────────────────
   İki kart yan yana ama ikincisi aşağı kaymış. Referansın blog bölümü
   böyle: eşit yükseklikte iki kart yerine, gözü soldan sağa aşağı doğru
   götüren bir basamak.

   Yalnız iki sütunda: üç kart kaydırılınca sonuncusu bölümün altından
   taşıyor ve altındaki bölüme biniyor. */
@container (min-width: 52rem) {
  /* Kaydırma yalnız ÖNE ÇIKAN düzende. Koşul önce "kart görünümü olsun
     yeter" diyordu ve zikzak, istenmediği iki yere sızıyordu: ilgili
     yazılar bölümüne (çözücü orada iki kart kurunca) ve sıradan iki
     sütunlu kart ızgaralarına. Kaydırma bir vitrin hareketi — sayfanın
     durduğu, iki büyük kareyle anlattığı yerde doğru; bir yazının altına
     iliştirilmiş "bunlar da var" listesinde kartları hizasız gösteriyor. */
  .blk-posts[data-offset="true"] .blk-grid { align-items: start; }
  .blk-posts[data-offset="true"] .blk-grid > :nth-child(even) {
    margin-block-start: var(--space-xxl, 6rem);
  }
}

/* ── sayı sütunu ────────────────────────────────────────────
   metric-card'da her rakam kendi kartında; burada kart yok — rakamlar
   sayfanın kendi zemininde, iri ve alt alta. Yanlarında tek bir fotoğraf.

   Başlık iki parçaya bölünüyor: küçük üst yazı solda, iri başlık sağda,
   ikisi aynı satırda. Okuma sırası soldan sağa ve göz aşağıya inmeden
   önce ne olduğunu öğreniyor. */
.blk-figcol .blk-in { max-inline-size: max(86rem, var(--site-rail)); }
.blk-figcol-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-lg);
  align-items: start;
}
.blk-figcol-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.blk-figcol-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-lg);
  align-items: center;
  margin-block-start: var(--space-xl, var(--space-lg));
}
.blk-figcol[data-side="end"] .blk-figcol-media { order: 2; }
.blk-figcol-media .blk-img { aspect-ratio: 3 / 4; object-fit: cover; }

.blk-figcol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Rakamlar arasındaki boşluk bilerek büyük: referansta her rakam kendi
     ekranını alıyor gibi duruyor ve sıkıştırılınca liste bir tabloya
     dönüşüyor. */
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
}
.blk-figcol-value {
  display: block;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--site-primary-ink);
  font-variant-numeric: tabular-nums;
}
.blk-figcol-label {
  display: block;
  margin-block-start: 0.5rem;
  font-size: var(--step-0);
}

@container (max-width: 52rem) {
  .blk-figcol-head,
  .blk-figcol-body { grid-template-columns: 1fr; }
  .blk-figcol[data-side="end"] .blk-figcol-media { order: 0; }
}

/* ── adımlar: zikzak ────────────────────────────────────────
   Dikey bir çizginin iki yanına dizilen adımlar; numara çizginin üstünde
   duran bir daire. Tek ve çift adımlar yer değiştiriyor, yani göz sağa
   sola inerek ilerliyor.

   Numara CSS sayacından: bir adım silindiğinde kalanların numarası
   kendiliğinden kayıyor (.blk-steps zaten counter-reset yapıyor). */
/*
  grid-template-columns bilerek yazılı — timeline'da öğrenilen dersin
  aynısı: .blk-steps'in kendi kuralı auto-fit ile yan yana sütunlar açıyor
  ve bu varyantta o kural yürürlükte kalıyordu. Sonuç, adımların dikey bir
  çizgi yerine YAN YANA dizildiği üç sütunlu bir ızgaraydı.
*/
.blk[data-variant="zigzag"] .blk-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  margin-block-start: var(--space-xl, var(--space-lg));
}
/* Çizgi ilk dairenin ortasında başlayıp sonuncunun ortasında bitiyor:
   listenin dışına taşan bir çizgi "devamı var" diyor, oysa yok. */
.blk[data-variant="zigzag"] .blk-steps::before {
  content: "";
  position: absolute;
  inset-block: 1.6rem;
  inset-inline-start: 50%;
  inline-size: 1px;
  background: var(--site-line);
}
.blk[data-variant="zigzag"] .blk-steps > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: center;
  padding: 0;
}
/* Temel kural her çocuğu ikinci sütuna itiyor (numara birinci sütunda
   dursun diye). Burada numara akışta değil, iki sütun da içeriğin. */
.blk[data-variant="zigzag"] .blk-steps > li > * { grid-column: auto; }
/* Numara dairesi çizginin üstünde, hücrenin dışında: iki sütunun tam
   ortasında duruyor ve akışa girmiyor. */
/* counter-increment YOK: temel kural zaten `.blk-steps > li` üzerinde
   artırıyor. Burada ikinci kez artırmak numaraları 2, 4, 6 yapıyordu. */
.blk[data-variant="zigzag"] .blk-steps > li::before {
  content: counter(step);
  position: absolute;
  grid-column: auto;
  grid-row: auto;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  background: var(--site-primary);
  color: var(--site-on-primary);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step--1);
  /* Sayfanın zemini dairenin arkasından geçen çizgiyi kesiyor: halka
     yerine dolu bir daire istiyoruz. */
  box-shadow: 0 0 0 0.5rem var(--site-surface);
}
.blk[data-variant="zigzag"] .blk-steps > li { position: relative; }
/* Tek adımlar fotoğrafı solda, çift adımlar sağda gösteriyor. */
.blk[data-variant="zigzag"] .blk-steps > li:nth-child(even) .blk-step-media { order: 2; }
.blk[data-variant="zigzag"] .blk-step-media .blk-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  inline-size: 100%;
}
.blk[data-variant="zigzag"] .blk-step-body > * { margin-block: 0 var(--space-sm); }
.blk[data-variant="zigzag"] .blk-step-body > :last-child { margin-block-end: 0; }
.blk[data-variant="zigzag"] .blk-step-body .blk-h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.blk-stepblock[data-align="center"] > .blk-in > .blk-eyebrow,
.blk-stepblock[data-align="center"] > .blk-in > .blk-h1,
.blk-stepblock[data-align="center"] > .blk-in > .blk-h2 { text-align: center; }

@container (max-width: 52rem) {
  .blk[data-variant="zigzag"] .blk-steps::before { display: none; }
  .blk[data-variant="zigzag"] .blk-steps > li {
    grid-template-columns: 1fr;
    row-gap: var(--space-md);
    padding-block-start: 3.25rem;
  }
  .blk[data-variant="zigzag"] .blk-steps > li::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    translate: none;
  }
  .blk[data-variant="zigzag"] .blk-steps > li:nth-child(even) .blk-step-media { order: 0; }
}

/* ── tek büyük alıntı: font ve hiza ─────────────────────────
   Alıntı gövde yazı tipinde ve künyesi sola yaslı duruyordu; referansta
   cümle BAŞLIK yazı tipinde, iri ve ortalı, künyesi de altında ortalı.
   Kart da yok — alıntı sayfanın kendi zemininde. */
.blk[data-variant="single"] .blk-quote {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-inline-size: 52rem;
  margin-inline: auto;
  text-align: center;
}
.blk[data-variant="single"] .blk-quote blockquote {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  /* Mürekkep, marka rengi DEĞİL: referansta cümle sayfanın kendi koyu
     mürekkebinde duruyor. Camgöbeği bir alıntı, bir cümleyi bir düğme
     gibi okutuyordu. */
  color: var(--site-ink);
  margin-block-end: var(--space-lg);
}
/* Künye alt alta: portre, altında koyu ve kalın ad, altında sönük yer.
   Yatay bir künye ortalanmış bir alıntının altında sola kaçmış duruyor. */
.blk[data-variant="single"] .blk-quote figcaption {
  flex-direction: column;
  gap: var(--space-sm);
}
.blk[data-variant="single"] .blk-quote figcaption > span {
  display: block;
  font-weight: 600;
  color: var(--site-ink);
}
.blk[data-variant="single"] .blk-quote figcaption small {
  font-weight: 400;
  color: var(--site-muted);
}
/* Künye ortalanıyor: figcaption flex ve varsayılan hizası sola yaslı. */
.blk[data-variant="single"] .blk-quote figcaption {
  justify-content: center;
  text-align: center;
}

/* ── galeri şeridi: sayfa genişliğinde ──────────────────────
   Şerit rayda kalıyordu; referansta ekranın iki kenarına kadar gidiyor ve
   kareler arasında boşluk var. Ray yalnız BAŞLIK için duruyor: 2560
   piksellik bir ekranda kenara dayanmış bir etiket okunmuyor. */
.blk[data-width="full"][data-variant="strip"] > .blk-in { max-inline-size: none; }
.blk[data-width="full"][data-variant="strip"] .blk-h2 {
  max-inline-size: 72rem;
  margin-inline: auto;
}
/* Kareler ekrana sığdığında kaydırma çubuğu çıkmıyor: altı kare tam
   kanalda rahat sığıyor ve şerit "devamı var" demek zorunda değil. */
@container (min-width: 72rem) {
  .blk[data-width="full"][data-variant="strip"] .blk-grid { overflow-x: visible; }
  .blk[data-width="full"][data-variant="strip"] .blk-figure { flex: 1 1 0; }
}

/* ── açılış: klasik ─────────────────────────────────────────
   Fotoğraf kanalın tamamını kaplıyor, bir yandan mürekkep rengi bir perde
   açılıyor ve yazı o perdenin üstünde. media-band ile aynı iskelet ama iki
   farkla: perde daha uzağa gidiyor (açılışın yazısı bandınkinden uzun) ve
   yazı ızgaranın yarısına değil kendi ölçüsüne oturuyor.

   Perdenin rengi mürekkepten türüyor, sabit siyahtan değil: sayfanın öbür
   koyu yüzeyleriyle (üst bar, alt bilgi, tam kanal bant) aynı aileden
   olması gerekiyor. Katalogdaki eski perdeler siyah çünkü onlar bir
   fotoğrafı KORUYOR; buradaki perde bir yüzey ÇİZİYOR. */
.blk-classic {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  overflow: clip;
  padding-block: var(--space-lg);
  /* Perde iki şemada da koyu olmalı: koyu temada `--site-inverse-surface`
     AÇIK renge dönüyor ve fotoğrafın üstündeki beyaz başlık okunmaz
     oluyor. `--klasik-scrim` görsel dilde tanımlı; dil seçilmediğinde
     yedeği ters duruşun zemini, yani bugünkü davranış. */
  background: var(--klasik-scrim, var(--site-inverse-surface));
  color: #fff;
  min-block-size: 22rem;
}
.blk-classic[data-height="short"] { min-block-size: 15rem; }
.blk-classic[data-height="tall"] { min-block-size: min(38rem, 78vh); }

/* Ekran boyu açılış.

   Üst bar akışta duruyor (bkz. saydam bar notu: barı akıştan çıkarmak
   kaydırma zaman çizgisini öldürüyor) ve bu blok — sahne açılışının aksine —
   barın altına çekilmiyor. O yüzden "ekranı kaplasın" 100svh değil,
   ekranın barın altında kalan kısmı: aksi hâlde açılış tam bar boyu kadar
   taşar ve ziyaretçi hiçbir şey kazanmadan kaydırmak zorunda kalırdı.

   svh: mobilde adres çubuğu açıkken vh ekranın görünmeyen kısmını da
   sayıyor ve açılış oraya taşıyor.

   min-block-size, block-size değil: yazı bir ekrana sığmazsa bölüm uzasın,
   kırpılmasın. */
.blk-classic[data-height="screen"] {
  min-block-size: calc(100svh - var(--site-head-h));
}

.blk-classic-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Kırpmanın odağı.

   `object-fit: cover` kareyi kutuya doldururken taşan kenarları atıyor ve
   varsayılan hizası ORTA. Geniş bir kareyi uzun bir banda koyduğunuzda
   atılan yer üst ve alt oluyor — portrede kesilen şey baş. Fotoğrafı yeniden
   kırpmak çözüm değil: aynı kare kısa bir bantta doğru duruyor, uzununda
   durmuyor. Yani odak fotoğrafın değil, KULLANIMIN özelliği.

   Yalnız dikey eksen: yatay kaydırma bu bantta bir işe yaramıyor, kare
   kutudan zaten geniş. */
.blk-classic[data-focus="top"] .blk-classic-img { object-position: 50% 0%; }
.blk-classic[data-focus="upper"] .blk-classic-img { object-position: 50% 25%; }
.blk-classic[data-focus="lower"] .blk-classic-img { object-position: 50% 75%; }
.blk-classic[data-focus="bottom"] .blk-classic-img { object-position: 50% 100%; }

/* Dar ölçüde düz perde: kolonlar alt alta indiğinde yazı fotoğrafın
   ortasına denk geliyor ve yandan sönen bir geçiş orada hiçbir şeyi
   korumuyor (media-band'deki aynı ders). */
.blk-classic-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 82%, transparent);
}
@container (min-width: 52rem) {
  .blk-classic[data-variant="side"] .blk-classic-veil {
    background: linear-gradient(to right,
      color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 96%, transparent) 0 34%,
      color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 0%, transparent) 78%);
  }

  /* Yazı sağa geçtiğinde perde de dönüyor. Perdenin işi yazının durduğu
     yarıyı koyultmak; sabit kalsaydı yazı karenin aydınlık yarısında,
     perde de boş yarısında kalırdı. Fotoğrafta özne solda olduğunda doğru
     yerleşim bu: yüz açıkta, yazı öbür yanda. */
  .blk-classic[data-variant="side"][data-align="end"] .blk-classic-veil {
    background: linear-gradient(to left,
      color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 96%, transparent) 0 34%,
      color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 0%, transparent) 78%);
  }
  .blk-classic[data-variant="side"][data-align="end"] .blk-classic-text {
    margin-inline-start: auto;
  }

  /* Ortalı seçilirse perde de her yeri eşit örtüyor: korunacak bir yarı yok. */
  .blk-classic[data-variant="side"][data-align="center"] .blk-classic-veil {
    background: color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 84%, transparent);
  }
  .blk-classic[data-variant="side"][data-align="center"] .blk-classic-text {
    margin-inline: auto;
    text-align: center;
  }
  .blk-classic[data-variant="side"][data-align="center"] .blk-classic-list { display: inline-grid; }
  .blk-classic[data-variant="side"][data-align="center"] .blk-actions { justify-content: center; }
}
/* Ortalı düzende perde her yerde eşit ve daha yoğun: yazı kareyi ortadan
   kesiyor, korunacak bir yarı yok. */
.blk-classic[data-variant="center"] .blk-classic-veil {
  background: color-mix(in oklab, var(--klasik-scrim, var(--site-inverse-surface)) 84%, transparent);
}

.blk-classic-text { max-inline-size: 38rem; }
.blk-classic[data-variant="center"] .blk-classic-text {
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
}

.blk-classic-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem);
  line-height: 1.02;
}
/* Vurgulanan kelime marka renginde ve DÜZ: katalogda `.blk-accent` italik,
   çünkü orada başlığın italik devamı. Burada vurgu renkle yapılıyor ve
   ikisi birden kelimeyi başlıktan koparıyor. */
.blk-classic-title .blk-accent {
  font-style: normal;
  color: var(--site-primary);
}
.blk-classic .blk-eyebrow { color: var(--site-primary); opacity: 1; }
.blk-classic-lede { color: inherit; opacity: 0.94; margin-block-end: var(--space-md); }

.blk-classic-list {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.blk-classic-list li { display: flex; align-items: center; gap: 0.55rem; font-size: var(--step-0); }
.blk-classic-tick {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  fill: none;
  stroke: var(--site-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fotoğrafın üstündeki ikincil düğme kendi takımını okuyor: `--btn-quiet-*`
   sayfanın zeminine göre hesaplanmış ve koyu perdenin üstünde kayboluyor
   (REFERANS-SITEDEN-SABLON §3.2'nin aynısı). İki takım da burada yeniden
   yazılıyor — beyaz, çünkü perde her temada koyu. */
.blk-classic .blk-btn-quiet {
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: #fff;
  --btn-quiet-border: 1px solid rgb(255 255 255 / 0.65);
  /* Alt kenar ayrı bir token ve sıfırlanamaz: `.blk-btn` çerçeveyi
     `border`la, ALT çizgiyi `border-block-end: var(--btn-quiet-edge)` ile
     çiziyor. `0` yazmak düğmenin altını tamamen siliyor — üç kenarı olan,
     dibi açık bir kutu kalıyordu. Katalogun kuralı: edge yazılmadığında
     border'ın kendisi (bkz. ThemeCss, `look.QuietEdge ?? look.QuietBorder`),
     yani buraya da aynı bildirim giriyor. */
  --btn-quiet-edge: 1px solid rgb(255 255 255 / 0.65);
  --btn-quiet-fill-hover: rgb(255 255 255 / 0.14);
}

/* ── hizmet kartları ────────────────────────────────────────
   Beyaz kart, üstünde fotoğraf, dibinde kartın tamamı kadar geniş bir
   düğme. Kart `grid` ve gövdesi `1fr`: üç kartta üç farklı uzunlukta metin
   varken düğmeler aynı hizada duruyor. */
.blk-svcs[data-tone="soft"] { background: var(--site-soft); }

/* Üstteki bölümün üstüne binme. Bölümün kendi üst dolgusu kalkıyor ve
   kartlar yukarı çekiliyor; bölümün ALT dolgusu duruyor, yoksa bir
   sonraki bölüm kartlara yapışıyor.

   Dar ölçüde binme yok: orada kartlar alt alta ve yukarı çekilen bir
   sütun, bandın yazısının üstüne oturuyor. */
.blk-svcs[data-overlap="true"] { padding-block-start: 0; }
@container (min-width: 52rem) {
  .blk-svcs[data-overlap="true"] > .blk-in {
    margin-block-start: calc(-1 * var(--space-lg));
    /* Konumlandırılmış öğe, konumlandırılmamışın ÜSTÜNE boyanıyor: negatif
       kenar boşluğu tek başına yetmedi, üstteki bandın fotoğraf sütunu
       (`position: relative`) kartların ilk ikisini örttü. Yığın sırasını
       DOM sırası değil konum belirliyor. */
    position: relative;
    z-index: 1;
  }
}

.blk-svc {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--card-surface, var(--site-surface));
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
  overflow: hidden;
}
/* Kartın zemini sayfanınkiyle aynıysa (beyaz bölümde beyaz kart) kartı
   ayıran tek şey ince bir çizgi kalıyor: gölgesiz temalarda kart
   sayfadan hiç ayrılmıyordu. */
.blk-svcs:not([data-tone="soft"]) .blk-svc { border: 1px solid var(--site-line); }

.blk-svc-img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.blk-svc-icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin: var(--space-md) var(--space-md) 0;
  color: var(--site-primary);
}
.blk-svc .blk-slot { margin: 0; }

.blk-svc-body { padding: var(--space-md); display: grid; align-content: start; gap: 0.6rem; }
.blk-svc-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--site-ink);
}
.blk-svc-text { margin: 0; color: var(--site-muted); font-size: var(--step--1); }

.blk-svc-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.blk-svc-lines li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--site-muted); }
.blk-svc-tick {
  flex: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  stroke: var(--site-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Düğme kartın tamamı kadar geniş: referansın imzası bu ve kartı bir
   kapıya çeviriyor. Ölçü kartın dolgusundan geliyor, sabit bir değerden
   değil. */
.blk-svc-btn {
  margin: 0 var(--space-md) var(--space-md);
  text-align: center;
}

/* ── yarım bant ─────────────────────────────────────────────
   Bir yanı fotoğraf, bir yanı yazı. Bölüm kenardan kenara ama YAZI rayda:
   kolon sayfanın rayının bir kenarından başlayıp öbür kenarında bitiyor,
   yani sayfadaki tek sütunlu bölümlerle aynı iki dikey çizgi arasında.

   "Yarım" adı düzenin niyetini anlatıyor, ölçüsünü değil: fotoğraf dar
   ölçüde yarıyı alıyor, geniş ölçüde 38rem'de duruyor ve artan genişlik
   yazıya gidiyor. Bölmeyi sabitlemek, ekran büyüdükçe yazıyı daraltmak
   demekti. */
.blk-half { padding-block: 0; }
.blk-half-grid { display: grid; }
.blk-half[data-tone="soft"] .blk-half-side { background: var(--site-soft); }

.blk-half-media { position: relative; min-block-size: 16rem; }

/* Fotoğrafa ekran yüksekliğinde tavan.

   Bandın boyunu YAZI belirliyor: fotoğraf sütuna yayılıyor, yazı uzadıkça
   o da uzuyor. Dört maddelik bir bantta bölüm bir ekranı aşıyor ve
   ziyaretçi başlıkla fotoğrafın alt kenarını aynı anda göremiyor.

   Tavan yalnız fotoğrafa: yazıya koymak onu kırpmak olurdu. Yazı yine de
   uzunsa bölüm uzamaya devam ediyor — ama fotoğraf ekranı aşmıyor ve
   kolonun ortasında duruyor. svh birimi mobilde adres çubuğu açıkken de
   doğru: vh orada ekranın görünmeyen kısmını da sayıyor. */
.blk-half[data-height="screen"] .blk-half-media {
  block-size: min(100%, 88svh);
  align-self: center;
}
.blk-half-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.blk-half-media .blk-slot { block-size: 100%; margin: 0; }

.blk-half-side { display: grid; align-items: center; padding: var(--space-lg) var(--space-md); }
.blk-half-text { max-inline-size: 36rem; inline-size: 100%; }

@container (min-width: 56rem) {
  .blk-half-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .blk-half[data-side="end"] .blk-half-media { order: 2; }

  /*
    Yazı kolonunun ölçüsünü RAY veriyor, fotoğraf değil: dış kenarı rayın
    kenarında, genişliği sabit bir tavanda. Fotoğraf ARTAKALANI alıyor.

    Bağın yönü önemli. Tersi olsaydı — fotoğraf yarıyı alsın, yazı kalana
    sığsın — yazının hem kenarı hem genişliği ekranla birlikte oynardı ve
    sayfanın geri kalanıyla hizası her ölçüde kayardı. Şimdi ekran
    büyüdükçe kayan taraf fotoğraf.

    İki duruş birbirinin aynası: yazının DIŞ kenarı rayın kenarına oturuyor
    (fotoğraf sağdayken sol, solundayken sağ), fotoğraf öbür yandan taşıp
    ekranın kenarına dayanıyor. Yazının dışında kalan boşluk da sayfanın
    kendi kenar payı kadar oluyor.
  */
  .blk-half-grid {
    --half-lead: max(var(--space-md), calc((100cqi - 72rem) / 2 + var(--space-md)));
    --half-side: calc(var(--half-lead) + 44rem + var(--space-lg));
  }
  .blk-half[data-side="end"] .blk-half-grid {
    grid-template-columns: minmax(0, var(--half-side)) minmax(20rem, 1fr);
  }
  .blk-half[data-side="start"] .blk-half-grid {
    grid-template-columns: minmax(20rem, 1fr) minmax(0, var(--half-side));
  }

  /*
    Yazı kolonu sayfanın RAYINA oturuyor, kendi yarısının kenarına değil.

    Eskiden yarının iç kenarına yaslanıyordu (`justify-self` + 36rem tavan)
    ve sonuç ölçüldü: 2545 piksellik bir ekranda yazı 624'ten başlıyor,
    oysa sayfanın geri kalanı 724'ten. Aynı sayfada iki eksen, ve üstündeki
    sayfa başlığı hiçbir zaman altındaki yazıyla hizalanmıyordu.

    Dış dolgu rayın kenar payı kadar: (kap - 72rem) / 2 + rayın kendi
    dolgusu. `max()` dar ölçüde negatife düşmesini engelliyor — orada zaten
    tek kolon var ve bu kural hiç kurulmuyor.
  */
  .blk-half-side { padding-inline: var(--space-lg); }
  .blk-half[data-side="end"] .blk-half-side {
    padding-inline-start: max(var(--space-md), calc((100cqi - 72rem) / 2 + var(--space-md)));
  }
  .blk-half[data-side="start"] .blk-half-side {
    padding-inline-end: max(var(--space-md), calc((100cqi - 72rem) / 2 + var(--space-md)));
  }
  /* Tavan 36rem'den 44rem'e açıldı — eskisi dardı, ama rayın tamamı da
     değil: bu bir yarım bant, tek sütunlu bir bölüm değil. Kolonun yeri
     ızgaranın ölçüsünden geliyor, burada yalnız tavan yazılı. */
  .blk-half[data-side="start"] .blk-half-text,
  .blk-half[data-side="end"] .blk-half-text { max-inline-size: 44rem; }
}

.blk-half-prose { margin-block: var(--space-md) 0; display: grid; gap: var(--space-md); }
.blk-half-p { margin: 0; color: var(--site-muted); font-size: var(--step--1); line-height: 1.6; }
/* İki paragraf varken ilki kalın: desen "özet + ayrıntı" ve ikisi aynı
   ağırlıkta olduğunda hangisinin önce okunacağı belirsiz. */
.blk-half-p[data-lead="true"] { color: var(--site-ink); font-weight: 700; }

.blk-half-items { margin-block-start: var(--space-md); display: grid; gap: var(--space-md); }
@container (min-width: 56rem) {
  .blk-half-items[data-layout="grid"] { grid-template-columns: 1fr 1fr; }
}
.blk-half-item-head { display: grid; gap: 0.3rem; }
.blk-half-icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--site-primary); }
.blk-half-item-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--site-ink);
}
.blk-half-item-text { margin: 0.35rem 0 0; color: var(--site-muted); font-size: var(--step--1); line-height: 1.6; }

/* Bağlantılı madde: başlık rengini koruyor, altı çizgiyi ancak imleç
   üstüne gelince gösteriyor. Altı maddelik bir listede altı mavi altı
   çizili satır, listeyi bir bağlantı yığınına çeviriyordu. */
.blk-half-item-link { color: inherit; text-decoration: none; }
.blk-half-item-link:hover .blk-half-item-title,
.blk-half-item-link:focus-visible .blk-half-item-title {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* "Satır" dizilimi: üstte simge ve başlık yan yana, altta açıklama satırın
   tamamını kaplıyor, satırlar arasında ince bir çizgi. Izgaradan farkı
   yalnız düzen değil ritim — satırlar bir listeyi okutuyor, ızgara ayrı
   şeyleri gösteriyor.

   Başlık eskiden solda 9rem'lik SABİT bir sütundaydı. Sabit olduğu için
   iki kelimelik başlıkların çoğu orada ikiye bölünüyordu ("Koroner arter /
   hastalığı"), yanındaki tek cümlelik açıklamanın sağında ise geniş bir
   boşluk kalıyordu. Sütunu kaldırmak ikisini birden çözüyor ve genişlikten
   bağımsız: kap ne olursa olsun başlık kendi satırını buluyor. */
.blk-half-items[data-layout="rows"] .blk-half-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/* Simge küçülmesin: esnek kapta uzun başlık ilk onu eziyor. */
.blk-half-items[data-layout="rows"] .blk-half-icon { flex: none; }
.blk-half-items[data-layout="rows"] .blk-half-item-text {
  margin-block-start: var(--space-sm);
}
.blk-half-items[data-layout="rows"] .blk-half-item + .blk-half-item {
  border-block-start: 1px solid var(--site-line);
  padding-block-start: var(--space-md);
}

.blk-half-facts {
  margin-block-start: var(--space-md);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
}
.blk-half-fact-value,
.blk-half-ring-value {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--site-ink);
}
.blk-half-fact-value { margin: 0 0 0.35rem; }

/* Halka conic-gradient, SVG değil — tek bir yüzde için ayrı bir çizim
   ağacı kurmak aynı şeyi iki katı baytla yapmak olurdu (metric-card'da
   yazılı aynı gerekçe). Farkı sayının halkanın İÇİNDE olması: dışarıda
   duran bir halka neyin oranı olduğunu söylemiyor. */
.blk-half-ring {
  --size: 5rem;
  margin: 0 0 0.5rem;
  inline-size: var(--size);
  block-size: var(--size);
  display: grid;
  place-items: center;
  border-radius: 999px;
  /* `closest-side` şart: yazılmadığında yarıçap `farthest-corner` oluyor
     (80 piksellik bir karede ~57 piksel) ve %84'ü kutunun yarıçapını
     aşıyor — beyaz daire halkanın tamamını örtüyor ve hiçbir şey
     görünmüyordu. Ölçüldü: dolgu doğru basılıyordu, görünen yoktu. */
  background:
    radial-gradient(circle closest-side, var(--site-surface) 0 84%, transparent 85%),
    conic-gradient(var(--site-primary) calc(var(--at, 0) * 1%), var(--site-line) 0);
}
.blk-half-fact-label {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--site-ink);
}
.blk-half-fact-text { margin: 0.2rem 0 0; color: var(--site-muted); font-size: var(--step--2); line-height: 1.5; }

.blk-half-sign { margin-block-start: var(--space-md); }
/* İmza marka renginde: siyah bir çizgi tarama gibi duruyor, marka renginde
   olan bir imza sayfanın parçası. Görsel tek renk olduğu için maske
   yeterli — ikinci bir dosya gerekmiyor. */
.blk-half-sign-img {
  block-size: 3rem;
  inline-size: auto;
  display: block;
  margin-block-end: 0.4rem;
}
.blk-half-sign-name { margin: 0; font-weight: 700; font-size: var(--step--1); color: var(--site-ink); }
.blk-half-sign-role { margin: 0; font-size: var(--step--2); color: var(--site-muted); }

/* Bandın düğmesi: fotoğrafın üstünde beyaz çerçeve. İkincil düğme kendi
   token setini okuyor (`--btn-quiet-*`) ve o set sayfanın zeminine göre
   hesaplanmış — koyu perdenin üstünde çizgisi de yazısı da kayboluyordu.
   Fotoğraf her temada koyu perdeyle örtülü olduğu için burada beyaz sabit;
   temadan gelemeyecek tek renk bu (§3.1'in aynı ailesi). */
.blk-band:has(.blk-band-img) .blk-btn-quiet {
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: #fff;
  --btn-quiet-border: 1px solid rgb(255 255 255 / 0.65);
  /* Alt kenar ayrı bir token ve sıfırlanamaz: `.blk-btn` çerçeveyi
     `border`la, ALT çizgiyi `border-block-end: var(--btn-quiet-edge)` ile
     çiziyor. `0` yazmak düğmenin altını tamamen siliyor — üç kenarı olan,
     dibi açık bir kutu kalıyordu. Katalogun kuralı: edge yazılmadığında
     border'ın kendisi (bkz. ThemeCss, `look.QuietEdge ?? look.QuietBorder`),
     yani buraya da aynı bildirim giriyor. */
  --btn-quiet-edge: 1px solid rgb(255 255 255 / 0.65);
  --btn-quiet-fill-hover: rgb(255 255 255 / 0.14);
}
.blk-band .blk-actions { margin-block-start: var(--space-md); }

/* ── künye listesi: "fotoğraflı" düzen ──────────────────────
   Öbür iki varyantta başlık satırların SOLUNDA duruyor ve künye iki
   kolon. Burada üç kat var: rayın tamamını kaplayan bir başlık, altında
   solda fotoğraf sağda satırlar.

   Sebebi başlığın kendisi: bu düzende başlık üç satırlık tam bir cümle
   ("Stres laboratuvarımızda … yapıyoruz") ve bir kolona sığmıyor. Sola
   sıkıştırıldığında altı kelime alt alta iniyor ve künye bir başlığın
   değil bir sütunun altında kalıyor. */
/* Bölümün kendi zemini. Zebra kapalı bir sayfada arka arkaya gelen beyaz
   bölümleri ayırmanın yolu; kutunun değil BÖLÜMÜN zemini, o yüzden ray
   değil kanal boyanıyor. */
.blk-specs[data-tone="soft"] { background: var(--site-soft); }

.blk-specs[data-variant="media"] .blk-specs-in {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
.blk-specs[data-variant="media"] .blk-specs-head {
  max-inline-size: 46rem;
  margin-block-end: var(--space-md);
}
.blk-specs[data-variant="media"] .blk-specs-label { font-size: var(--step-2); line-height: 1.15; }

.blk-specs-img {
  inline-size: 100%;
  border-radius: var(--site-img-radius);
  object-fit: cover;
  align-self: start;
}
img.blk-specs-img { aspect-ratio: 3 / 4; display: block; }

@container (min-width: 56rem) {
  .blk-specs[data-variant="media"] .blk-specs-in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-lg);
    align-items: start;
  }
  /* Başlık iki kolonu birden kaplıyor: fotoğrafın üstünde kalan bir başlık,
     yanındaki satırlarla aynı cümlenin parçası olduğunu söylemiyor. */
  .blk-specs[data-variant="media"] .blk-specs-head { grid-column: 1 / -1; }
}

/* Satırlar arasında ince çizgi: künye burada bir liste, bir ızgara değil.
   İlk satırın üstünde çizgi yok — başlığın altındaki boşluk zaten ayırıyor
   ve iki çizgi üst üste biniyor. */
.blk-specs[data-variant="media"] .blk-spec + .blk-spec {
  border-block-start: 1px solid var(--site-line);
  padding-block-start: var(--space-md);
}
/* Satırın içi: simge ve başlık yan yana (bunu .blk-spec-head zaten yapıyor),
   açıklama altlarında satırın tamamını kaplıyor.

   Eskiden başlık solda SABİT 9rem'lik bir sütundaydı. Sabit olduğu için iki
   kelimelik başlıklar orada ikiye bölünüyor, yanındaki açıklamanın sağında
   ise geniş bir boşluk kalıyordu — künye satırının kendisi zaten dar bir
   kolonda duruyor ve onu bir daha ikiye bölmek yeri iki kez harcıyordu.
   yarim-bant'ın satır diziliminde aynı kusur vardı, aynı şekilde kaldırıldı. */

/* ── adres: harita zemin, bilgiler üstünde kart ─────────────
   "split" ve "wide"da harita bir KOLON; burada bölümün kendisi. Kart onun
   üstünde duruyor ve rayın sol kenarına yaslı — sayfanın geri kalanıyla
   aynı eksende.

   Dar ölçüde katman olmaktan çıkıyor: kart haritanın altına iniyor.
   Telefonda haritanın üstünde duran bir kart, haritanın görünen yarısını
   kapatıyor ve kaydırarak açılamıyor. */
.blk-location[data-variant="float"] { padding-block: 0; }
.blk-loc-stage { position: relative; display: grid; }
/* Harita kutusunun katalogdaki oranı 4/3 ve burada yükseklik verildiği için
   GENİŞLİĞİ o oran belirliyordu: 480 piksellik bir kutu 640 piksel geniş
   çıkıyor ve kenardan kenara gitmesi gereken harita, kanalın dörtte birinde
   duruyordu. Oran burada iptal, ölçüyü yükseklik veriyor. */
.blk-loc-canvas {
  border-radius: 0;
  aspect-ratio: auto;
  inline-size: 100%;
  block-size: clamp(20rem, 46vh, 30rem);
}
.blk-loc-rail { padding-block: var(--space-md); }
.blk-loc-float {
  background: var(--site-surface);
  box-shadow: 0 10px 30px rgb(16 32 47 / 0.14);
  border-radius: var(--site-radius);
  padding: var(--space-md);
  max-inline-size: 22rem;
}
@container (min-width: 48rem) {
  .blk-loc-stage > .blk-loc-canvas { grid-area: 1 / 1; }
  .blk-loc-stage > .blk-loc-rail { grid-area: 1 / 1; align-self: center; pointer-events: none; }
  /* Yalnız kart tıklanabilir: rayın kendisi haritanın üstünde saydam bir
     katman ve tıklamayı yutuyordu — harita sürüklenemez oluyordu. */
  .blk-loc-float { pointer-events: auto; }
}
.blk-loc-float-img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--site-img-radius);
  display: block;
  margin-block-end: var(--space-sm);
}
.blk-loc-float-head { margin: 0 0 var(--space-sm); font-size: var(--step-1); }
.blk-loc-row { padding-block: 0.65rem; }
.blk-loc-row + .blk-loc-row { border-block-start: 1px solid var(--site-line); }
.blk-loc-key { margin: 0 0 0.15rem; font-weight: 700; font-size: var(--step--1); color: var(--site-ink); }
.blk-loc-value { margin: 0; font-size: var(--step--1); color: var(--site-muted); font-style: normal; }
.blk-loc-value a { color: inherit; }
.blk-loc-mail a { color: var(--site-primary-ink); font-weight: 600; }

/* Yarım bandın "ters" duruşu: yazı yarısı mürekkep renginde. Fotoğraf
   yarısı zaten kendi karesi, yani bölüm ikiye ayrılmış görünüyor ve
   ayıran şey renk. Sayfanın öbür koyu yüzeyleriyle (bant, alt bilgi) aynı
   zemin — ayrı bir koyu ton ikinci bir siyah demek olurdu. */
.blk-half[data-tone="invert"] .blk-half-side {
  background: var(--site-inverse-surface);
  color: var(--site-inverse-ink);
}
.blk-half[data-tone="invert"] :is(.blk-h2, .blk-half-item-title, .blk-half-fact-label,
  .blk-half-fact-value, .blk-half-ring-value, .blk-half-sign-name) { color: inherit; }
.blk-half[data-tone="invert"] :is(.blk-half-p, .blk-half-item-text, .blk-half-fact-text,
  .blk-half-sign-role) { color: inherit; opacity: 0.82; }
.blk-half[data-tone="invert"] .blk-half-p[data-lead="true"] { color: inherit; opacity: 1; }
.blk-half[data-tone="invert"] .blk-eyebrow { color: var(--site-primary); }
.blk-half[data-tone="invert"] .blk-half-item + .blk-half-item,
.blk-half[data-tone="invert"] .blk-half-items[data-layout="rows"] .blk-half-item + .blk-half-item {
  border-block-start-color: color-mix(in oklab, var(--site-inverse-ink) 22%, transparent);
}
/* Halkanın göbeği sayfanın zemini değil bandın zemini: beyaz bir daire
   koyu bandın ortasında delik gibi duruyordu. */
.blk-half[data-tone="invert"] .blk-half-ring {
  background:
    radial-gradient(circle closest-side, var(--site-inverse-surface) 0 84%, transparent 85%),
    conic-gradient(var(--site-primary) calc(var(--at, 0) * 1%),
                   color-mix(in oklab, var(--site-inverse-ink) 25%, transparent) 0);
}

/* ── etiketli eylem çifti ───────────────────────────────────
   Küçük etiket, altında iri ve simgeli bir bağlantı. İkisi varken
   aralarında dikey bir çizgi: iki ayrı yol olduğunu boşluk tek başına
   söylemiyordu, "88 700 600 Online randevu" tek bir satır gibi okundu. */
.blk-half-reach {
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.blk-half-reach-item { text-decoration: none; color: inherit; display: grid; gap: 0.15rem; }
.blk-half-reach-item + .blk-half-reach-item {
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--site-line);
}
.blk-half[data-tone="invert"] .blk-half-reach-item + .blk-half-reach-item {
  border-inline-start-color: color-mix(in oklab, var(--site-inverse-ink) 30%, transparent);
}
.blk-half-reach-note { font-size: var(--step--2); opacity: 0.75; }
.blk-half-reach-value {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: var(--step-1);
  line-height: 1.1;
}
.blk-half-reach-icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  fill: none;
  stroke: var(--site-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blk-half-reach-item:hover .blk-half-reach-value { text-decoration: underline; }

/* ── koleksiyon: öne çıkan ──────────────────────────────────
   Referansın blog bölümü. "cards" düzeninden üç farkı var ve üçü de
   ölçülerek alındı:

   1. KUTU YOK. Kart bir çerçeve ya da dolgu taşımıyor; görsel doğrudan
      sayfanın zemininde duruyor ve altındaki yazı da öyle. Kutulu kart
      bölümü ikiye bölüyor, kutusuz olan sayfanın kendisi gibi okunuyor.
   2. GÖRSEL İRİ. Kart genişliğinin tamamı, 4:3'e yakın — küçük bir kapak
      "haber listesi", büyük olanı "yazı" diye okunuyor.
   3. KATEGORİ BAŞLIĞIN ÜSTÜNDE, künye altında.

   Bölüm başlığı da iki sütun: solda eyebrow + iri başlık, sağda paragraf.
   Tek ortalanmış bir başlık bu bölümü bir listeye çeviriyordu. */
.blk-posts[data-variant="feature"] .blk-in { max-inline-size: max(86rem, var(--site-rail)); }
.blk-posts-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  margin-block-end: clamp(2rem, 1rem + 3vw, 4rem);
}
/*
  İki sütun yalnız giriş cümlesi VARSA. Yoksa başlık ikinci sütunun
  boşluğu yüzünden rayın yarısında kalıyor ve altındaki kart sırasıyla
  aynı hizada bitmiyordu — başlığın altına çizgi çizen bir görsel dilde
  bu doğrudan görünüyor, çizgisiz dillerde de başlık sebepsiz yere dar
  kalıyordu.
*/
.blk-posts-head:not(:has(.blk-posts-intro)) {
  grid-template-columns: minmax(0, 1fr);
}
.blk-posts-head .blk-h1,
.blk-posts-head .blk-h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.blk-posts-intro > p {
  margin: 0 0 var(--space-md);
  color: var(--site-muted);
  max-inline-size: 34rem;
}
.blk-posts-intro > p:last-child { margin-block-end: 0; }

/* Kutusuz kart: çerçeve, dolgu ve gölge sıfırlanıyor. Görsel dilin
   (ferah, material, cam…) .blk-card kuralını da ezmesi gerekiyor, o
   yüzden üçü de açıkça yazılı. */
.blk-posts[data-variant="feature"] .blk-card[data-bare] {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.blk-posts[data-variant="feature"] .blk-card > .blk-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  inline-size: 100%;
  margin-block-end: var(--space-md);
}
.blk-post-kicker {
  margin: 0 0 0.5rem;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-primary-ink);
}
.blk-posts[data-variant="feature"] .blk-card .blk-h3 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.blk-posts[data-variant="feature"] .blk-post-meta {
  font-size: var(--step--1);
  color: var(--site-muted);
}
/* Üstüne gelince çerçeve değil BAŞLIK tepki veriyor: kutusuz bir kartta
   kenarlık rengi değiştirmek görünmez bir jest. */
.blk-posts[data-variant="feature"] .blk-card-link:hover { border-color: transparent; }
.blk-posts[data-variant="feature"] .blk-card-link:hover .blk-h3 { color: var(--site-primary-ink); }

@container (max-width: 52rem) {
  .blk-posts-head { grid-template-columns: 1fr; }
}

/* ── tam kanal bant: beyaz panel ────────────────────────────
   İkinci duruş. "Fotoğrafın üstünde"de yazı perdeyle korunuyor ve o perde
   kullanıcının koyacağı fotoğrafa göre bazen yetmiyor (§3.1). Burada yazı
   fotoğrafın üstüne hiç binmiyor: kendi beyaz panelinde, fotoğrafın
   yanında duruyor. Perde de basılmıyor — korunacak bir yazı yok.

   Panel bandın yüksekliğini kaplamıyor, ortasında yüzüyor: kaplayan bir
   panel fotoğrafı ikiye bölüyor ve "bant" olmaktan çıkıyor. */
.blk-band[data-variant="panel"] .blk-band-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  align-items: center;
  gap: var(--space-lg);
}
.blk-band[data-variant="panel"][data-align="start"] .blk-band-text { grid-column: 2; }
.blk-band[data-variant="panel"][data-align="end"] .blk-band-in {
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
}
.blk-band[data-variant="panel"][data-align="end"] .blk-band-text { grid-column: 1; }

.blk-band[data-variant="panel"] .blk-band-text {
  /* Sabit beyaz: panel fotoğrafın üstünde duruyor, sayfanın zemininde
     değil — koyu temada --site-surface koyuya dönüp paneli yok ediyordu
     (aynı ders .blk-loc-chip ve .blk-herofig-fig'de yazılı). */
  background: #fff;
  color: #08363b;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--site-img-radius);
  max-inline-size: none;
}
.blk-band[data-variant="panel"] .blk-band-title {
  color: inherit;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.blk-band[data-variant="panel"] .blk-band-text p { color: #4a6266; }
/* Panelin içindeki ikincil düğme kendi token setini okuyor
   (--btn-quiet-*) ve o set sayfanın zeminine göre ölçülmüş; beyaz panelde
   beyaz bir düğme çıkıyordu. Burada bağlantı gibi duruyor. */
.blk-band[data-variant="panel"] .blk-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: #08363b;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

@container (max-width: 52rem) {
  .blk-band[data-variant="panel"] .blk-band-in,
  .blk-band[data-variant="panel"][data-align="end"] .blk-band-in {
    grid-template-columns: 1fr;
  }
  .blk-band[data-variant="panel"] .blk-band-text { grid-column: 1 !important; }
}

/* Ray ızgara çocuğuyken esnemiyor: `margin-inline: auto` gerginliği (stretch)
   iptal ediyor ve kutu içeriği kadar daralıp ortalanıyor. Ölçüldü — 1152
   piksellik ray 664 piksele düşüyor ve sol eksende başlaması gereken açılış
   yazısı sayfanın ortasında duruyordu. `inline-size: 100%` gerginliğin
   yerini alıyor; `max-width` yine 72rem'de kesiyor, otomatik kenar boşluğu
   yine ortalıyor. Aynı tuzak haritanın üstündeki kart rayında da var. */
.blk-classic > .blk-in,
.blk-loc-stage > .blk-loc-rail { inline-size: 100%; }

/* Sekmenin simgesi: adın üstünde, sabit ölçüde. Ölçü yazılmadığında SVG
   kendi doğal boyutunda çiziliyor ve beş sekme beş farklı yükseklikte
   duruyordu — etiketler de onunla birlikte kayıyordu. Izgara yerine
   sütun: `place-items: center` etiketi ortalıyor ama simgeyle etiket aynı
   hücreye düşüyor. */
.blk-moments-tab:has(.blk-moments-icon) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 0.45rem;
  padding-block: var(--space-sm);
}
.blk-moments-icon {
  flex: none;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  color: var(--site-primary-ink);
}
/* Seçili sekmenin simgesi de seçili görünüyor: yalnız yazının koyulaşması,
   göz simgedeyken sekmenin değiştiğini söylemiyordu. */
.blk-moments-tab:has(input:checked) .blk-moments-icon { color: var(--site-primary); }

/* ── açılış: dev kelimeler ──────────────────────────────────
   Sayfanın en tepesinden başlayan tipografik açılış. Arkada zemine
   kazınmış bir–iki dev kelime, önlerinde arka planı silinmiş bir figür,
   dipte solda manşet sağda güven künyesi.

   Zemin BÖLÜMÜN kendisinde. hero-stage'de renk içteki panele boyanıyor ve
   orada doğru: o panel sayfanın içinde duran bir kutu. Burada bölüm
   sayfanın tepesi ve üst bar onun üstünde yüzüyor — renk içteki bir kutuya
   boyandığında barın altı sayfanın beyazı olarak kalıyor ve tepede sebepsiz
   bir şerit görünüyordu (ölçüldü: rengin başladığı yer 97 piksel, sayfanın
   tepesi değil).

   Barın payını bölüm KENDİ eklemiyor: onu görsel dil koyuyor (systems/
   ferah.css) ya da şeritsiz bar kuralı (.site-head[data-stance="clear"]).
   İki yerde birden eklenirse pay iki kere sayılıyor.

   Dizilim sütun ve dip `margin-block-start:auto` ile aşağı itiliyor: dar
   kapta figür akışta, sırayla kelimeler → figür → dip; geniş kapta figür
   akıştan çıkıp ortaya oturuyor ve dip iki sütuna ayrılıyor. Tek kural
   değişiyor, iki ayrı düzen yazılmıyor. */
.blk-wordhero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline: var(--space-md);
  padding-block: var(--space-lg);
  color: var(--site-ink);
}
.blk-wordhero[data-height="full"] { min-block-size: 100svh; }
.blk-wordhero[data-height="tall"] { min-block-size: min(46rem, 86svh); }

/* Soldan sağa açılan zemin: referansın açılışı düz bir renk değil, sol
   kenarda koyulaşan bir geçiş. Uçları palete bağlı — sabit iki renk
   yazsaydık şablonun rengini değiştiren herkeste bu açılış eski renkte
   kalırdı. */
.blk-wordhero[data-tone="gradient"] {
  background-image: linear-gradient(90deg,
    color-mix(in oklab, var(--site-primary) 22%, var(--site-soft)) 0%,
    var(--site-soft) 52%);
}
.blk-wordhero[data-tone="soft"] { background: var(--site-soft); }

/* ── arkadaki kelimeler ── */
.blk-wordhero-words {
  display: grid;
  gap: 0;
  z-index: 0;
}
.blk-wordhero-word {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  text-transform: uppercase;
  /* Satır kutusu harfin boyundan kısa: iki kelime alt alta gelince
     aralarında boşluk kalmıyor, referanstaki gibi üst üste biniyorlar. */
  line-height: 0.8;
  letter-spacing: -0.03em;
  white-space: nowrap;
  /* Zeminin açılmış hâli: sayfanın zemini, saydamlıkla. Sabit beyaz
     yazsaydık koyu şemada zeminin üstünde parlayan bir yazı olurdu;
     buradaki iş yazmak değil, zemini bir tık açmak. */
  color: color-mix(in oklab, var(--site-surface) 50%, transparent);
  font-size: calc(var(--wh-word, 10.5) * 1cqi);
}
.blk-wordhero-word[data-size="dev"] { --wh-word: 15.5; }
.blk-wordhero-word[data-size="iri"] { --wh-word: 10.5; }
.blk-wordhero-word[data-size="orta"] { --wh-word: 7.5; }
.blk-wordhero-word[data-align="start"] { justify-self: start; }
.blk-wordhero-word[data-align="center"] { justify-self: center; }
.blk-wordhero-word[data-align="end"] { justify-self: end; }

/* ── ortadaki figür ── */
/* Dar kapta akışta ve ortalı; `contain` çünkü kesilmiş bir figür
   kırpıldığında omzundan kesilmiş bir insan oluyor. */
.blk-wordhero-figure {
  z-index: 1;
  align-self: center;
  inline-size: min(62%, 17rem);
  block-size: auto;
  object-fit: contain;
  object-position: bottom center;
}
.blk-wordhero-slot { inline-size: min(62%, 17rem); }

/* ── dip: manşet ve künye ── */
.blk-wordhero-foot {
  position: relative;
  z-index: 2;
  margin-block-start: auto;
  display: grid;
  gap: var(--space-md);
  align-items: end;
}
.blk-wordhero-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  /* Kendi clamp'i: tip ölçeği --step-3'te bitiyor ve bu boy oranın çok
     üstünde. Ölçüldü — referansta 2545 piksellik kapta 132 piksel, yani
     kabın %5.2'si. */
  font-size: clamp(2.4rem, 0.9rem + 4.7cqi, 8.25rem);
  line-height: 0.92;
  text-wrap: balance;
}
.blk-wordhero-lede {
  margin: var(--space-sm) 0 0;
  color: var(--site-muted);
  font-size: var(--step-0);
  max-inline-size: 42ch;
}
.blk-wordhero-cta { margin: var(--space-md) 0 0; }

.blk-wordhero-proof { display: grid; gap: 0.5rem; justify-items: start; }
.blk-wordhero-proof > p { margin: 0; }
.blk-wordhero-proof-text {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  line-height: 1.25;
  max-inline-size: 20ch;
}

/* ── üst üste binen portre halkası ──────────────────────────
   İki yerde geçiyor (bu açılış ve hastane açılışının formu), o yüzden
   bloka değil kendi adına yazıldı. Halka değil ZİNCİR: negatif kenar
   boşluğu ile her yüz bir öncekinin üstüne biniyor ve halkanın kaç kişi
   olduğu bir bakışta okunuyor. Beyaz kenar payı olmadan iki koyu portre
   tek bir leke gibi duruyordu. */
.blk-faces { display: flex; align-items: center; }
.blk-faces > * + * { margin-inline-start: -0.9rem; }
.blk-faces .blk-avatar {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  border: 2px solid var(--site-surface);
  object-fit: cover;
  margin: 0;
}
.blk-faces-more {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background: var(--site-surface);
  color: var(--site-ink);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  line-height: 1;
  box-shadow: 0 2px 12px color-mix(in oklab, var(--site-ink) 14%, transparent);
}

/* Geniş kapta figür akıştan çıkıp ortaya oturuyor, dip iki sütuna ayrılıyor.
   Manşetin sütunu %34 ile sınırlı: figür kabın ortasında ~%40 yer kaplıyor
   ve manşet o payı geçerse yazı figürün üstüne biner. */
@container (min-width: 56rem) {
  /* Ortalama `translate` ile: mutlak konumlu, genişliği oranından türeyen
     bir öğe `inset-inline: 0; margin-inline: auto` ile ortalanamıyor —
     iki uç da yazılınca genişlik kabın tamamına eşitleniyor.
     Bu yüzden figürde `data-reveal` YOK: beliriş de `translate` yazıyor
     ve ortalamayı siliyordu (ölçüldü: figür 276 piksel sağda kalıyordu).
     Zaten açılışın ilk boyamasında görünmesi gereken tek görsel bu. */
  .blk-wordhero-figure {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: auto;
    /* Referansta figür açılışın %83'ünü kaplıyor; 56rem tavanı 2560'lık bir
       ekranda %73'te kesiyordu ve figür bölümün ortasında küçük kalıyordu. */
    block-size: min(84%, 62rem);
    max-inline-size: 42%;
    pointer-events: none;
  }
  .blk-wordhero-slot { inline-size: 40%; block-size: auto; }

  .blk-wordhero-foot { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .blk-wordhero-proof { justify-self: end; justify-items: end; text-align: end; }
}

/* ── formlu açılış: arka fotoğraf, iri sayı, portre halkası ──
   Fotoğraf bölümün zemini, formun arkası değil: form kendi beyaz kartını
   taşıyor ve fotoğrafın üstünde duruyor. Perde yalnız fotoğraf VARKEN
   kuruluyor (:has) — fotoğrafsız kurulmuş bir açılışta beyaz yazı krem
   zeminde kaybolurdu; sahnede ve overlay hero'da da aynı kural, aynı
   sebeple.

   Perde soldan sağa açılıyor, düz bir karartma değil: referansta yazının
   durduğu yarı koyu, formun durduğu yarı fotoğrafın kendisi. Düz perde
   fotoğrafı bütünüyle söndürüyor ve "arkada bir yer var" hissi kalmıyor.
   Yön hizayla dönüyor: form solda ise koyu taraf da sağa geçiyor. */
.blk-hero-form { position: relative; isolation: isolate; overflow: clip; }
/* Fotoğraflı hâlde ray 72rem değil sayfanın kendisi: kenardan kenara bir
   fotoğrafın üstünde ortalanmış dar bir sütun, fotoğrafı bir zemin değil
   bir çerçeve gibi gösteriyor. Ölçü kaba bağlı — referansta 2560'lık
   ekranda kenar payı 127 piksel, yani kabın %5'i. */
.blk-hero-form:has(.blk-heroform-img) > .blk-in {
  max-inline-size: none;
  padding-inline: clamp(var(--space-md), 5cqi, 9rem);
}
.blk-heroform-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blk-hero-form:has(.blk-heroform-img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--site-ink) 86%, transparent) 0%,
    color-mix(in srgb, var(--site-ink) 58%, transparent) 42%,
    color-mix(in srgb, var(--site-ink) 20%, transparent) 100%);
}
.blk-hero-form[data-align="left"]:has(.blk-heroform-img)::before {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--site-ink) 86%, transparent) 0%,
    color-mix(in srgb, var(--site-ink) 58%, transparent) 42%,
    color-mix(in srgb, var(--site-ink) 20%, transparent) 100%);
}
/* Beyaz mürekkep yalnız METİN kolonunda: form kolonunda beyaz kart var ve
   orada mürekkep kartın kendi mürekkebi. */
.blk-hero-form:has(.blk-heroform-img) .blk-col:not(:has(.blk-hero-panel)) { color: #fff; }
.blk-hero-form:has(.blk-heroform-img) .blk-col:not(:has(.blk-hero-panel)) :is(.blk-eyebrow, .blk-lede) {
  color: inherit;
  opacity: 0.92;
}

/* Tek iri sayı. Ölçüldü: referansta 2560'lık kapta 90 piksel (%3.5).
   Kendi clamp'i — tip ölçeği --step-3'te bitiyor ve bu boy onun üstünde. */
.blk-heroform-count {
  margin: var(--space-md) 0 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(2.75rem, 1.4rem + 3.4cqi, 6rem);
  color: var(--site-primary);
}
/* Fotoğrafın üstünde marka rengi yeterince ayrılmıyor; koyu perdenin
   üstünde markanın açık hâli okunuyor. */
.blk-hero-form:has(.blk-heroform-img) .blk-heroform-count {
  color: color-mix(in oklab, var(--site-primary) 78%, #fff);
}

.blk-heroform-proof {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}
.blk-heroform-proof > p {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.35;
  max-inline-size: 26ch;
}

/* Bu bölümde "hiza" FORMU söylüyor, metni değil — alanın adı da
   "Form hangi tarafta olsun?". Ortak kural (satır 547) ilk kolonu, yani
   METNİ taşıyor; o yüzden "sağ" seçildiğinde form sola geçiyordu. Ölçüldü:
   form x=724, metin x=1286. Burada ortak kural iki yönde de eziliyor. */
@container (min-width: 48rem) {
  .blk-hero-form[data-align="right"] .blk-split > .blk-col:first-child { order: 0; }
  .blk-hero-form[data-align="left"] .blk-split > .blk-col:first-child { order: 2; }
}

/* ── liste sayfası: kenar sütunu ve geniş satırlar ──────────
   Blog listesi bugüne kadar tek biçimdi: eşit kartlardan bir ızgara ve
   yanında hiçbir şey. Bir blog sayfasının ziyaretçiye borçlu olduğu iki
   şey eksikti — okuduğu şeyin hangi kümeden geldiği (kategoriler) ve
   sıradaki ne (son yazılar). İkisi de listenin YANINDA duruyor; altına
   konulduklarında yirmi kartın ardında kalıyor ve kimse oraya inmiyor.

   Kenar sütunu bir sayfa özelliği değil bloğun kendi ayarı: platformda
   sayfa dikey bir blok yığını ve "sayfanın sağ sütunu" diye bir kat yok.
   Bloğun kendi içinde iki kolon açmak, o katı icat etmeden aynı yapıyı
   veriyor.

   Ölçü referanstan: 2560'lık ekranda içerik 850, kenar sütunu 330 piksel,
   yani 2.6 : 1. */
.blk-posts-body { display: grid; gap: var(--space-lg); align-items: start; }
/* Sütunun kendi içindeki ara, sütunlar arasındakinden KÜÇÜK: ikisi de
   --space-lg olduğunda (ferah'ın "havadar" ritminde 112 piksel) kategoriler
   ile son yazılar iki ayrı bölüm gibi duruyordu. Ölçüldü — referansta
   kutular arası 48 piksel, kolonlar arası 110. */
.blk-posts-side { display: grid; gap: calc(var(--space-md) * 1.7); align-content: start; }

/* Geniş ray bölümün KENDİ kararı, kenar sütununun yan etkisi değil.

   Kural önce "kenar sütunu varsa geniş" diye yazılmıştı ve iki kez kırıldı.
   Önce seçici varlığa bakıyordu (`[data-side]`) ve kenar sütunsuz her liste
   de genişliyordu — o düzeldi. Kalan hata niyetin kendisiydi: listenin
   yanında başka bölümler de olan bir sayfada o bölüm öbürlerinden 128
   piksel geniş duruyor ve sayfa iki eksene bölünüyor (ölçüldü: başlık
   724'ten, liste 660'tan başlıyordu). Sayfayı tek başına taşıyan bir blog
   dizininde geniş ray doğru, karışık bir sayfada değil — ve bunu blok
   bilemez, yazan bilir.

   Ölçü 86rem: kataloğun zaten kullandığı geniş ray (.blk-tones,
   .blk-figcol, feature düzeni). Dördüncü bir sayı uydurmak, sayfada
   dördüncü bir eksen demekti. */
.blk-posts[data-width="wide"] > .blk-in { max-inline-size: max(86rem, var(--site-rail)); }

@container (min-width: 56rem) {
  .blk-posts-body { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }
  /* Kenar sütunu solda: kolonların ölçüsü de yer değiştiriyor, yalnız
     sıraları değil. Yalnız `order` yazılsaydı dar sütun geniş hücreye
     otururdu. */
  .blk-posts[data-side="start"] .blk-posts-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  }
  .blk-posts[data-side="start"] .blk-posts-side { order: 1; }
  .blk-posts[data-side="start"] .blk-posts-main { order: 2; }
}

.blk-side-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  font-size: var(--step-1);
  line-height: 1.2;
}

.blk-side-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.blk-side-terms li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: var(--step-0);
  color: var(--site-muted);
}
/* Nokta liste imi değil işaret: tarayıcının kendi imi mürekkebin rengini
   alıyor ve satırla aynı ağırlıkta duruyordu. */
.blk-side-terms li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: var(--site-primary);
}
.blk-side-terms a { color: inherit; text-decoration: none; }
.blk-side-terms a:hover { color: var(--site-primary-ink); }

.blk-side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
/* Izgara değil kutu dizisi: küçük resim yüklenmemiş bir kayıtta ızgaranın
   tek çocuğu ilk hücreye düşüyor ve yazı resmin yerine kayıyordu. */
.blk-side-post { display: flex; gap: var(--space-sm); align-items: start; }
.blk-side-thumb {
  flex: none;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  object-fit: cover;
  border-radius: var(--site-img-radius);
}
.blk-side-post-title {
  display: block;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-0);
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
}
a.blk-side-post-title:hover { color: var(--site-primary-ink); }
.blk-side-post .blk-post-kicker { margin-block-end: 0.15rem; }
.blk-side-post .blk-post-meta { margin-block-start: 0.3rem; }

.blk-side-note {
  padding: var(--space-md);
  background: var(--site-soft);
  border-radius: var(--site-radius);
  display: grid;
  gap: var(--space-sm);
}
.blk-side-note p { margin: 0; }
/* Düğme kutunun tamamı kadar geniş. `justify-items: start` ile içeriği
   kadardı ve dar kenar sütununda kutunun içinde yarım kalıyordu; kenar
   sütunundaki kutu zaten bir çağrı, tıklama hedefi de o kadar olmalı.
   `inline-block` olduğu için etiketi ayrıca ortalanıyor. */
.blk-side-note .blk-btn { text-align: center; }

/* ── geniş satırlar ─────────────────────────────────────────
   Kart ızgarasının tek sütunlu, iri görselli hâli. "Satır listesi"nden
   farkı görselin kendisi: orada fotoğraf hiç çizilmiyor ve liste bir
   içindekiler tablosu; burada her kayıt kendi karesiyle geliyor ve liste
   okunacak bir akış. Kutu yok — tek sütunda kart kenarlığı, sayfayı üst
   üste dizilmiş kutulara bölüyor. */
.blk-posts[data-variant="standard"] .blk-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.blk-posts[data-variant="standard"] .blk-card {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.blk-posts[data-variant="standard"] .blk-card > .blk-img {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  object-fit: cover;
  border-radius: var(--site-img-radius);
  margin-block-end: var(--space-md);
}
.blk-posts[data-variant="standard"] .blk-card .blk-h3 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.3rem, 1rem + 1.1cqi, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.blk-posts[data-variant="standard"] .blk-card p { color: var(--site-muted); }
.blk-posts[data-variant="standard"] .blk-card-link:hover { border-color: transparent; }
.blk-posts[data-variant="standard"] .blk-card-link:hover .blk-h3 { color: var(--site-primary-ink); }

/* ── açılış: künye duruşu (sayfa başlığı) ───────────────────
   "Ortalı" duruş bir sayfa başlığı için fazla tanıdık: yazı fotoğrafın
   ÜSTÜNDE, ortalanmış ve perdeyle okutuluyor. Bu duruş aynı anda dört
   şeyi birden değiştiriyor ve tanıdıklığı asıl kıran şey dördünün
   birlikteliği:

   1. Eksen sola geçiyor — sayfanın geri kalanı da soldan başlıyor, yani
      başlık artık sayfanın parçası, üstüne yapıştırılmış bir afiş değil.
   2. Yazı fotoğrafın üstüne HİÇ binmiyor.
   3. Fotoğraf arka plan değil: sağ kenarda sert kenarlı bir şerit.
   4. Başlığın altında sayfanın kendi künyesi var — dekor değil bilgi.

   Perde yok, çünkü perdenin tek işi yazıyı fotoğrafın üstünde okutmaktı. */
.blk-classic[data-variant="kunye"] {
  position: relative;
  display: block;
  min-block-size: auto;
  padding-block: var(--space-lg);
  background: var(--klasik-scrim, var(--site-inverse-surface));
}

/* Fotoğrafsız künye daha ince bir şerit. Yüksekliği belirleyen şey artık
   fotoğrafın kendisi değil yazı: iki satırlık bir başlığın çevresinde
   bölüm payı kadar boşluk bırakmak, şeridi bir "bant" yapıyor — oysa
   fotoğrafsız hâlinde işi yalnız sayfanın adını söylemek. */
.blk-classic[data-variant="kunye"]:not(:has(.blk-classic-strip)) {
  /*
    Fotoğrafsız künye bandı sayfanın başlığı ve üst barın hemen altında
    duruyor. `--space-md` kadar bir payla başlık bara yapışıyordu: üst bar
    her zaman içeriğin ÜSTÜNDE durmalı ve altında nefes payı olmalı.

    Pay ritim ölçüsünden bağımsız: "geniş" ritimde --space-lg 7rem'e
    çıkıyor ve tek satırlık bir başlığın altında ekranın yarısını kaplayan
    bir bant demek (aynı hata monitör dilinde de yapılmıştı).

    Eklenen şey yalnız boşluk; zemin bandın kendi zemini, yani başlıkla
    aynı renk ve ikisi tek parça duruyor.

    Ölçü değişkende, çünkü barı üstüne bindiren dillerin (ferah) buna bar
    boyunu EKLEMESİ gerekiyor: sayı iki dosyada birden yazılsaydı biri
    değişince başlıkla hapın arası sessizce kayardı.
  */
  --klasik-kunye-pad: clamp(2.25rem, 1.4rem + 1.8vw, 3.5rem);
  padding-block: var(--klasik-kunye-pad);
}

/* Şerit mutlak konumlu: rayı bozmadan sayfanın SAĞ kenarına dayanıyor.
   Izgara kolonu olsaydı ray daralır ve başlık, altındaki bölümlerle aynı
   hizadan başlamazdı — künyenin bütün iddiası o hizada. */
.blk-classic-strip {
  display: none;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 26%;
  block-size: 100%;
  object-fit: cover;
}
/*
  Künyede tavan ŞERİDE bağlı, duruşa değil.

  42rem'lik tavanın tek işi vardı: yazı sağdaki fotoğraf şeridinin altına
  girmesin. Şerit yokken de durunca, yanında bolca yer varken alt satırı
  erkenden ikiye bölüyordu — ortalı duruşta iyice göze batıyor, çünkü iki
  satırın ikisi de kısa kalıyor. Şerit yoksa yazıyı zaten rayın kendisi
  sınırlıyor; ikinci bir tavana gerek yok.
*/
.blk-classic[data-variant="kunye"] .blk-classic-text { max-inline-size: none; }

@container (min-width: 52rem) {
  .blk-classic-strip { display: block; }
  .blk-classic[data-variant="kunye"]:has(.blk-classic-strip) .blk-classic-text {
    max-inline-size: min(42rem, 68cqi);
  }
}

/* Başlık burada açılış başlığı kadar iri değil: sayfa başlığı sayfanın
   girişi, sayfanın kendisi değil. */
.blk-classic[data-variant="kunye"] .blk-classic-title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
}
.blk-classic[data-variant="kunye"] .blk-classic-lede {
  margin-block-end: 0;
  /* Yine de sarması gerekirse satırlar eşit bölünsün: ortalı bir başlığın
     altında tek kelimelik ikinci satır kazara gibi duruyor. */
  text-wrap: balance;
}

/* Hizalama tercihe bağlı: varsayılan sola yaslı, çünkü sayfanın geri kalanı
   da soldan başlıyor ve başlığın işi o eksene katılmak. Ortalı ve sağa
   yaslı duruşlar duruyor — bazı sayfalarda (tek cümlelik bir kapanış
   sayfası gibi) ortalı bir başlık doğru olabiliyor. */
.blk-classic[data-variant="kunye"][data-align="center"] .blk-classic-text {
  margin-inline: auto;
  text-align: center;
}
.blk-classic[data-variant="kunye"][data-align="end"] .blk-classic-text {
  margin-inline-start: auto;
  text-align: end;
}
.blk-classic[data-variant="kunye"][data-align="center"] .blk-classic-meta { justify-content: center; }
.blk-classic[data-variant="kunye"][data-align="end"] .blk-classic-meta { justify-content: flex-end; }

/* Künye satırı: üstünde ince bir çizgi, öğeler orta noktayla ayrılmış.
   Ayıraç ::before ile basılıyor ve ilk öğede yok — işaretlemede ayrı bir
   öğe olsaydı ekran okuyucu onu da okurdu. */
.blk-classic-meta {
  margin: var(--space-md) 0 0;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgb(255 255 255 / 0.25);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  font-size: var(--step--1);
  opacity: 0.88;
}
.blk-classic-meta li { display: flex; align-items: center; gap: 0.9rem; }
.blk-classic-meta li + li::before {
  content: "·";
  opacity: 0.5;
}

/* ── yazı gövdesi: serbest metnin tipografisi ───────────────
   `.blk-prose` altı yerde kullanılıyor (yazı gövdesi, rich-text, SSS
   cevabı, image-text, yazının ek bölümleri) ve bugüne kadar iki kuralı
   vardı: ilk ve son çocuğun kenar boşluğu. Gerisi genel etiket stillerine
   bırakılmıştı.

   Bugünkü içerikte görünmüyordu çünkü yazılarımız paragraf ve listeden
   ibaret. Ama gövde kullanıcının yazdığı yer: bir ara başlık, bir alıntı
   ya da ikinci bir görsel koyduğu anda ortada tasarım yoktu. Ölçüldü —
   referansın gövdesinde başlık, damla harf, yuvarlak köşeli görsel ve
   zeminli alıntı kutusu var; bizde dördü de yoktu.

   Seçiciler `>` ile değil serbest: editörden çıkan işaretleme sarmalayıcı
   üretebiliyor ve doğrudan çocuk kuralı ilk sarmalayıcıda kopuyor. */
.blk-prose { color: var(--site-muted); }
.blk-prose p { margin-block: 0 var(--space-sm); }
.blk-prose > :first-child { margin-block-start: 0; }
.blk-prose > :last-child { margin-block-end: 0; }

/* Ara başlık gövdenin mürekkebiyle değil sayfanın mürekkebiyle: paragraf
   sönük, başlık değil. Ölçek tip merdiveninden — referansın 23/19 pikseli
   bizim --step-1/--step-0'a denk geliyor ve tema ölçeği değişince
   başlıklar da onunla birlikte gidiyor. */
.blk-prose :is(h2, h3, h4, h5, h6) {
  margin-block: var(--space-md) var(--space-sm);
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  line-height: 1.22;
  color: var(--site-ink);
}
.blk-prose h2 { font-size: var(--step-2); }
.blk-prose h3 { font-size: var(--step-1); }
.blk-prose :is(h4, h5, h6) { font-size: var(--step-0); }

.blk-prose :is(ul, ol) { margin-block: 0 var(--space-sm); padding-inline-start: 1.4em; }
.blk-prose li { margin-block-end: 0.35rem; }
.blk-prose li::marker { color: var(--site-primary); }
.blk-prose :is(ul, ol) :is(ul, ol) { margin-block-start: 0.35rem; }

.blk-prose a { color: var(--site-primary-ink); text-underline-offset: 0.18em; }

/* Gövdenin içindeki görsel kolonun tamamını alıyor ve kendi köşesini
   taşıyor: yazının ortasında keskin köşeli bir kare, sayfanın geri
   kalanıyla aynı dili konuşmuyor. */
.blk-prose :is(img, video) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block: var(--space-md);
  border-radius: var(--site-img-radius);
}
.blk-prose figure { margin: var(--space-md) 0; }
.blk-prose figure :is(img, video) { margin-block: 0; }

/* Gövdeye gömülen video. Sağlayıcının verdiği iframe sabit ölçüde geliyor
   (genellikle 560×315) ve dar ekranda kolonu taşırıyor; oranı burada
   kuruluyor, yükseklik hesaplanmıyor. Köşe görselle aynı: yazının ortasında
   iki farklı köşe iki ayrı dil konuşuyor. */
.blk-prose iframe {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--site-img-radius);
  margin-block: var(--space-md);
}
.blk-prose figure iframe { margin-block: 0; }

/* Onay kapılı gömme kendi kutusunu taşıyor: oranı .blk-video veriyor ve
   çerçeve kutuyu dolduruyor. Yukarıdaki kural yalnız çıplak yapıştırılmış
   bir iframe için — ikisi aynı özgüllükte ve sonra gelen kazanıyor, o yüzden
   burada açıkça geri alınıyor. */
.blk-prose .blk-video { margin-block: var(--space-md); }
.blk-prose .blk-video iframe {
  aspect-ratio: auto;
  block-size: 100%;
  margin-block: 0;
  border-radius: 0;
}
.blk-prose figcaption {
  margin-block-start: 0.5rem;
  font-size: var(--step--1);
  color: var(--site-muted);
}

/* Alıntı kutu, çizgi değil: dar bir sol çizgi alıntıyı paragraftan yeterince
   ayırmıyor ve uzun bir alıntıda çizgi metnin yanında kayboluyor. Zemin
   bölümün değil ALINTININ kendi zemini — yazı sayfası beyaz kalıyor. */
.blk-prose blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--site-soft);
  border-radius: var(--site-radius);
  color: var(--site-ink);
}
.blk-prose blockquote > :last-child { margin-block-end: 0; }
/* Künye satırı: adın önünde kısa bir marka çizgisi. Tırnak içindeki adı
   italikten kurtarıyor — bir isim vurgu değil, künye. */
.blk-prose blockquote :is(cite, footer) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: var(--space-sm);
  font-style: normal;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-0);
}
.blk-prose blockquote :is(cite, footer)::before {
  content: "";
  inline-size: 1.6rem;
  block-size: 2px;
  background: var(--site-primary);
  flex: none;
}

.blk-prose hr {
  margin-block: var(--space-lg);
  border: 0;
  border-block-start: 1px solid var(--site-line);
}

/* Tablo dar ekranda kendi içinde kayıyor: sayfayı yatay kaydıran bir gövde,
   telefonda bütün metni okunmaz yapıyor. */
.blk-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--space-md);
  font-size: var(--step--1);
}
.blk-prose :is(th, td) {
  padding: 0.6rem 0.75rem;
  border-block-end: 1px solid var(--site-line);
  text-align: start;
}
.blk-prose th { color: var(--site-ink); font-weight: 600; }

.blk-prose :is(code, kbd, samp) {
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: calc(var(--site-radius) * 0.5);
  background: var(--site-soft);
}
.blk-prose pre {
  margin-block: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--site-radius);
  background: var(--site-soft);
  overflow-x: auto;
}
.blk-prose pre code { padding: 0; background: none; }

/* Yazının gövdesi rayda ama SATIRI raya yaymıyor.

   Kap rayın tamamı: altındaki "ilgili yazılar" kartlarıyla aynı sol kenardan
   başlıyor ve fotoğraf, tablo, gömülü video rayın tamamını kullanabiliyor.
   Akan metin ise 44rem'de duruyor — rich-text'in "geniş" seçeneğiyle birebir
   aynı kural ve aynı gerekçe (bkz. yukarısı): 72rem'lik rayda paragraf 110
   karakteri aşıyor, okunabilir aralık 45–75.

   Eskiden kap da 44rem'di ve ORTALIYDI: yazı sayfanın ortasında, kartlar
   rayın solunda, aynı sayfada iki eksen. Düzeltilen şey buydu. */
.blk-post-body > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
  max-inline-size: 44rem;
}

/* ── damla harf ─────────────────────────────────────────────
   Yalnız YAZI gövdesinde ve yalnız ilk paragrafta. `.blk-prose`ın öbür beş
   kullanıcısında yanlış olurdu: bir SSS cevabının ilk harfini büyütmek,
   cevabı bir makale gibi gösterir.

   Markup gerektirmiyor — ::first-letter, editörden çıkan düz bir <p>'de de
   çalışıyor. Referans harfi ayrı bir <span>'e sarıyor; o yol, yazan kişiden
   her yazıda bir işaretleme bekler.

   Ölçü ölçüldü: referansta 16 piksellik paragrafta 50 piksel, yani 3.1em. */
.blk-post-body > p:first-child::first-letter {
  float: inline-start;
  margin-inline-end: 0.1em;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: 3.1em;
  line-height: 0.84;
  color: var(--site-ink);
}
/* Neden `:first-child`, `:first-of-type` değil: niyet "gövde bir
   PARAGRAFLA BAŞLIYORSA" idi, ":first-of-type" ise "ilk paragraf" diyor —
   listeyle açılan bir gövdede listeden sonraki kapanış cümlesi de ilk
   paragraf sayılıyor ve damla harf oraya düşüyordu.

   Önce bunu bir sıfırlama kuralıyla kapatmaya çalıştım
   (`> :is(ul, ol, …) ~ p`) ve o kural HİÇ çalışmadı: `:first-of-type` bir
   pseudo-SINIF, yani kurala (0,2,2) veriyor; `:is()` ise argümanlarının en
   yükseğini alıyor ve tip seçicilerden oluşan liste sıfırlamayı (0,1,3)'te
   bırakıyor. Diğer oturum ölçüp yakaladı.

   `:first-child` ile sıfırlamaya hiç gerek kalmıyor — ve sayılacak bir
   etiket listesi de kalmıyor. O liste `pre`, `table`, `hr`, `dl`'yi zaten
   atlıyordu. */

/* ── yazının komşuları ──────────────────────────────────────
   Listede yan yana duran iki kayda giden bağlantı. "İlgili yazılar"
   bölümünün üstünde ve ondan sade: orası kart, burası satır — ikisi de
   kart olsaydı yazının altında üst üste iki kart ızgarası olurdu.

   Tek komşusu olan yazıda tek bağlantı ve o da kendi yanına yaslanıyor:
   boş bir yarı bırakmak, eksik bir şey varmış gibi duruyor. */
.blk-post-nav {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--site-line);
}
@container (min-width: 34rem) {
  .blk-post-nav { grid-template-columns: 1fr 1fr; }
  /* Sonraki sağa yaslı: yön bilgisini hizanın kendisi taşıyor. Önceki
     yoksa sonraki yine ikinci kolonda kalıyor. */
  .blk-post-nav-link[data-dir="next"] { grid-column: 2; text-align: end; }
}
.blk-post-nav-link {
  display: grid;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.blk-post-nav-label {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-muted);
}
.blk-post-nav-title {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-0);
  line-height: 1.3;
  color: var(--site-ink);
}
.blk-post-nav-link:hover .blk-post-nav-title { color: var(--site-primary-ink); }


/* ── yarım sahne ────────────────────────────────────────────
   Sayfa başlığı + yarım bant tek parça. Üç kural taşıyor:

   1. Bölüm bir EKRAN. Boyu içeriğe değil ekrana bağlı; ziyaretçi sayfaya
      girdiğinde başlığı da içeriği de görüyor. Aşarsa uzuyor — kırpmıyor.
   2. Fotoğraf MUTLAK konumlu, ızgaranın kolonu değil: kolon olsaydı başlık
      şeridi onun üstüne binemezdi, oysa şerit bölümün tamamı kadar geniş.
   3. İçerik yarının içinde ama rayın kenarından başlıyor. Ray ortalanmış
      olduğu için rayın orta noktası ekranın da orta noktası; içeriğe
      "%50 sağdan boşluk" demek onu tam olarak fotoğrafın kenarına kadar
      uzatıyor.
*/
.blk-stage2 {
  position: relative;
  padding-block: 0;
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
}
/* overflow: hidden YOK. Fotoğraf zaten bölümün içine sıkışmış (inset: 0),
   taşacak bir şey değil; ama içerik bir ekrana sığmazsa bölüm uzuyor ve
   orada gizlenen taşma, yazının kesilmesi demek olurdu. */

.blk-stage2-media { position: absolute; inset-block: 0; inline-size: 50%; z-index: 0; }
.blk-stage2[data-side="end"] .blk-stage2-media { inset-inline-end: 0; }
.blk-stage2[data-side="start"] .blk-stage2-media { inset-inline-start: 0; }
.blk-stage2-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.blk-stage2-media .blk-slot { block-size: 100%; margin: 0; }

/* Kırpmanın odağı — açılış bandındaki kuralın aynısı. */
.blk-stage2[data-focus="top"] .blk-stage2-media img { object-position: 50% 0%; }
.blk-stage2[data-focus="upper"] .blk-stage2-media img { object-position: 50% 25%; }
.blk-stage2[data-focus="lower"] .blk-stage2-media img { object-position: 50% 75%; }
.blk-stage2[data-focus="bottom"] .blk-stage2-media img { object-position: 50% 100%; }

/* Başlık şeridi fotoğrafın üstünde: kendi zeminini taşıyor ve bölümün
   tamamı kadar geniş. */
.blk-stage2-head {
  position: relative;
  z-index: 1;
  background: var(--klasik-scrim, var(--site-inverse-surface));
  color: var(--site-on-inverse, #fff);
  padding-block: var(--space-md);
}
.blk-stage2[data-align="center"] .blk-stage2-head { text-align: center; }
.blk-stage2-title { margin: 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.blk-stage2-lede { color: inherit; opacity: 0.94; margin-block: 0.5rem 0; }
.blk-stage2[data-align="center"] .blk-stage2-lede { margin-inline: auto; max-inline-size: 46rem; }
.blk-stage2-head .blk-eyebrow { color: var(--site-primary); }

/* Gövdenin dikey payı bölüm payından dar: bölümün boyu ekrana sabit ve
   pay ne kadar büyükse içeriğe kalan yer o kadar azalıyor. */
.blk-stage2-body { position: relative; z-index: 1; padding-block: var(--space-md); }
.blk-stage2-intro { margin: 0 0 var(--space-md); color: var(--site-muted); }

/* Dar ölçüde fotoğraf yarım kalmıyor: üstte tam genişlikte bir şerit
   oluyor, içerik altına iniyor. 50%'lik bir sütunda ne fotoğraf ne yazı
   okunuyor. */
@media (max-width: 55.99rem) {
  .blk-stage2 { min-block-size: 0; }
  .blk-stage2-media { position: relative; inline-size: 100%; block-size: 46vh; }
  .blk-stage2-head { order: -1; }
}

/* Yazı kolonu fotoğrafın kenarında bitiyor.

   Sınır rayın üstüne YÜZDEYLE konulamıyor: yüzde dolgu, öğenin kendi
   genişliğine değil kapsayıcısına göre hesaplanıyor. Ray 72rem ama
   kapsayıcısı bölümün tamamı; "%50 dolgu" rayın kendisinden geniş çıkıyor,
   yazı kutusu sıfıra iniyor ve satırlar tek kelimeye düşüyor. Ölçü burada
   doğrudan hesaplanıyor:

     yarım kanal − rayın sol payı − rayın dolgusu − fotoğrafla arasındaki boşluk

   Kap sorgusu birimi (cqi) bölümün kendi genişliğini veriyor; yatay kaydırma
   çubuğu hesaba katılmış oluyor. */
@media (min-width: 56rem) {
  .blk-stage2-text {
    max-inline-size: calc(
      50cqi - max(0px, (100cqi - 72rem) / 2) - var(--space-md) - var(--space-lg));
  }
  .blk-stage2[data-side="start"] .blk-stage2-body > .blk-in { display: flex; justify-content: flex-end; }
}

.blk-stage2-items { display: grid; gap: var(--space-md); margin-block-start: var(--space-md); }
.blk-stage2-item + .blk-stage2-item {
  border-block-start: 1px solid var(--site-line);
  padding-block-start: var(--space-md);
}
.blk-stage2-item-head { display: flex; align-items: center; gap: var(--space-sm); }
.blk-stage2-icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--site-primary); flex: none; }
.blk-stage2-item-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: 700;
  font-size: var(--step-0);
}
.blk-stage2-item-text {
  margin: 0.35rem 0 0;
  color: var(--site-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   AÇILIŞ: NABIZ
   ═══════════════════════════════════════════════════════════
   Fotoğraf ekranı kaplıyor, altından bir nabız çizgisi geçiyor ve
   rakamlar o çizginin vuruşlarına asılı duruyor.

   Çizgi ile rakamın hizası GÖRÜNÜMDE hesaplanıyor (bkz. nabiz-acilis.cshtml):
   tepe noktalarının yeri hem yolu hem `--at`/`--top` değerlerini kuruyor.
   Burada o değerlerin dışında bir konum bilgisi YOK — CSS'e ikinci bir
   koordinat yazmak, madde sayısı değişince ikisinin ayrışması demekti. */
.blk-pulse {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: 0;
  min-block-size: 34rem;
  background: var(--site-ink);
  color: #fff;
}
.blk-pulse[data-height="screen"] {
  /* Üst bar akışta duruyor ve bu blok altına çekilmiyor: tam 100svh
     yazsaydım açılış bar boyu kadar taşardı. svh, mobilde adres çubuğu
     açıkken vh'nin saymadığı yeri de doğru sayıyor. */
  min-block-size: calc(100svh - var(--site-head-h));
}

.blk-pulse-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Kırpmanın odağı — açılış bandındaki kuralın aynısı. */
.blk-pulse[data-focus="top"] .blk-pulse-img { object-position: 50% 0%; }
.blk-pulse[data-focus="upper"] .blk-pulse-img { object-position: 50% 25%; }
.blk-pulse[data-focus="lower"] .blk-pulse-img { object-position: 50% 75%; }
.blk-pulse[data-focus="bottom"] .blk-pulse-img { object-position: 50% 100%; }

/*
  Perde iki iş yapıyor: yazının durduğu yarıyı koyultuyor ve bandın
  altını karartıyor ki nabız çizgisi her fotoğrafta okunsun. Rengi
  mürekkepten türüyor, sabit siyahtan değil — palet değişince perde de
  onunla ısınıyor.

  Öbür taraf için ikinci bir degrade yazmak yerine perde AYNALANIYOR:
  iki degradeyi elde tutmak, birini düzeltip öbürünü unutmak demekti.
*/
.blk-pulse-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--site-ink) 92%, transparent) 0%,
      color-mix(in oklab, var(--site-ink) 74%, transparent) 34%,
      color-mix(in oklab, var(--site-ink) 22%, transparent) 68%,
      transparent 100%);
}
.blk-pulse[data-align="end"] .blk-pulse-veil { scale: -1 1; }
.blk-pulse-veil::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 48%;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--site-ink) 88%, transparent), transparent);
}

.blk-pulse-slot { position: absolute; inset: 0; z-index: -2; }

/*
  Ray genişliği ızgara içinde kendiliğinden gelmiyor.

  `.blk-in`'in `margin-inline: auto`'su ızgara öğesinde "esneme, alanında
  ortalan" demek. Esneme kalkınca kutu içeriği kadar daralıyor ve 72rem'lik
  ray hiç kurulmuyor — yazı sayfanın ortasında dar bir sütuna sıkışıyor.
  Ölçüldü: 2560 piksellik ekranda ray 1152 yerine 696 çıkıyordu.

  Çözüm kutuya tam genişlik vermek; ortalamayı yine `margin-inline: auto`
  yapıyor, yalnız artık ortalanacak bir genişlik var.
*/
.blk-pulse-in {
  inline-size: 100%;
  display: grid;
  align-content: center;
  padding-block: calc(var(--space-lg) * 2) var(--space-lg);
}
.blk-pulse-text { max-inline-size: 40rem; }
/* Hiza yazının YERİ, satır hizası değil: sağa alınmış bir metin bloğunun
   satırları yine soldan başlıyor. */
.blk-pulse[data-align="end"] .blk-pulse-text { margin-inline-start: auto; }

.blk-pulse-eyebrow { color: color-mix(in oklab, var(--site-primary) 45%, #fff); }

.blk-pulse-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
/* Marka rengi koyu perdenin üstünde okunmuyor: aynı renk beyaza doğru
   karıştırılıyor, yani rengin kendisi kalıyor ama kontrast kazanıyor. */
.blk-pulse-title .blk-accent {
  color: color-mix(in oklab, var(--site-primary) 42%, #fff);
  font-style: normal;
}
.blk-pulse-lede { color: inherit; opacity: 0.88; max-inline-size: 34rem; }
.blk-pulse-alt { color: #fff; border-color: color-mix(in oklab, #fff 45%, transparent); }

/* ── nabız bandı ──────────────────────────── */
.blk-pulse-band {
  position: relative;
  z-index: 1;
  block-size: clamp(11rem, 17vh, 15rem);
}
.blk-pulse-line {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.blk-pulse-line path {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* preserveAspectRatio="none" kutuyu yatay olarak esnetiyor; bu olmadan
     çizginin kalınlığı da eziliyor ve dikey kenarlar kalın, yataylar ince
     çıkıyor. */
  vector-effect: non-scaling-stroke;
}

.blk-pulse-beats { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.blk-pulse-beat {
  position: absolute;
  inset-inline-start: var(--at);
  /* Alt kenarı tepenin biraz üstünde: `--top` görünümden geliyor ve
     tepenin bandın neresine düştüğünü söylüyor. */
  inset-block-end: calc(100% - var(--top) + 0.55rem);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  text-align: center;
  white-space: nowrap;
}
/* Vuruşun tepesindeki nokta: rakam ile çizgi arasındaki bağ. */
.blk-pulse-beat::after {
  content: "";
  position: absolute;
  inset-block-end: -0.55rem;
  inset-inline-start: 50%;
  translate: -50% 50%;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 999px;
  background: #fff;
}
.blk-pulse-value {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.blk-pulse-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

/*
  Hareket: çizgi kendini çiziyor, rakamlar sırayla asılıyor.

  Kaydırmaya bağlı değil çünkü bu bölüm sayfanın ilk ekranı — zaten
  görünüyor ve "göründüğünde başla" diye bir an yok.

  Emniyet: fill-mode `both` ve bitiş hâli tam görünür. Animasyon herhangi
  bir sebeple çalışmazsa çizgi tam çizili, rakamlar yerinde duruyor —
  taban hâlde kesik çizgi ya da saydam rakam YOK, o yüzden hareket
  kuralları sadece prefers-reduced-motion içinde.
*/
@media (prefers-reduced-motion: no-preference) {
  /*
     Çizgi soldan sağa açılıyor.

     Kesik çizgiyle (stroke-dasharray) denendi ve çalışmadı: kutu
     preserveAspectRatio="none" ile yatay olarak esnetiliyor ve
     `vector-effect: non-scaling-stroke` kesiği CİHAZ uzayında ölçüyor.
     İki uzay arasındaki oran yolun yönüne göre değiştiği için "yolun
     tamamı" kadar bir kesik yolun ancak yarısını kaplıyordu —
     ölçüldü, çizgi %56'da bitiyordu.

     Perde bu hesabın tamamından kurtarıyor: geometriyi hiç bilmiyor,
     madde sayısı değişince de doğru kalıyor.
  */
  /*
     Kural [data-motion] altında: o işaret <html>'de duruyor ve betik onu
     hareket istenmediğinde KALDIRIYOR. Yani işaret varsa betik çalışmış ve
     animasyon kurulabilir demek.

     Neden önemli: burada başlangıç hâli "görünmez" (perde kapalı, rakam
     saydam). Betiksiz bir sayfada bu hâl kalıcı olsaydı çizgi de rakamlar
     da hiç görünmezdi. İşaretin altında olunca betiksiz sayfada kural hiç
     kurulmuyor ve her şey tam görünür kalıyor.
  */
  [data-motion] .blk-pulse-line {
    animation: blk-pulse-draw 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
  }
  [data-motion] .blk-pulse-beat {
    opacity: 0;
    animation: blk-pulse-beat-in 0.6s ease-out both;
    animation-delay: calc(0.55s + var(--i) * 0.42s);
  }
}
@keyframes blk-pulse-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* Taban `translate: -50% 0` korunuyor: animasyon onu ezerse rakam
   vuruşun yarım genişlik sağına kayıyor. */
@keyframes blk-pulse-beat-in {
  from { opacity: 0; translate: -50% 0.7rem; }
  to { opacity: 1; translate: -50% 0; }
}

@container (max-width: 46rem) {
  /* Dar ekranda dört rakam yan yana okunmuyor; band büyüyor ve rakamlar
     küçülüyor — çizgi yine tek parça kalıyor. */
  .blk-pulse-band { block-size: 9rem; }
  .blk-pulse-label { font-size: 0.62rem; letter-spacing: 0.1em; }
}

/* ═══════════════════════════════════════════════════════════
   KATMANLI KARTLAR
   ═══════════════════════════════════════════════════════════
   Kartlar kaydırdıkça üst üste yığılıyor: sırası gelen kart ekranda
   duruyor, bir sonraki üstüne biniyor ve öncekinin yalnız üst kenarı
   görünür kalıyor. Kaçıncı kartta olduğunuz yığının kalınlığından
   okunuyor.

   Makinesi `position: sticky`, betik değil. Her kart kendi sırasına göre
   bir tık aşağıda yapışıyor (--i) ve üst üste binen kenarlar o farkı
   gösteriyor.

   Emniyet gerekmiyor: sticky çalışmazsa ortaya düz bir kart listesi
   çıkıyor ve tek bir kelime bile eksilmiyor. Bu yüzden burada @supports
   ya da prefers-reduced-motion kuralı YOK — hareket diye bir şey yok,
   yalnız konumlanma var. */
.blk-deck-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.blk-deck-item {
  position: sticky;
  /* Üst bar akışta ama yapışkan: kartın altına girmemesi için pay onun
     boyu kadar. Sıra farkı 1.1rem — iki kartın arasındaki görünen kenar
     bu kadar. */
  inset-block-start: calc(var(--site-head-h) + var(--space-sm) + var(--i) * 1.1rem);
}
.blk-deck-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Zemin donuk olmak ZORUNDA: saydam olsaydı altındaki kart bunun
     içinden okunur ve iki metin üst üste binerdi. */
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: calc(var(--site-img-radius) * 1.5);
  overflow: clip;
  min-block-size: min(30rem, 62svh);
}
@container (min-width: 52rem) {
  .blk-deck-card { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
  .blk-deck[data-side="end"] .blk-deck-media { order: 2; }
  .blk-deck[data-side="alternate"] .blk-deck-item:nth-child(even) .blk-deck-media { order: 2; }
}

.blk-deck-media { position: relative; min-block-size: 13rem; background: var(--site-soft); }
.blk-deck-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Sıra numarası fotoğrafın üstünde ve iri: kart kapandığında görünen dar
   şeritte de okunan tek şey bu. */
.blk-deck-no {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-md);
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.55);
}

.blk-deck-say {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
}
.blk-deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-primary);
}
.blk-deck-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.blk-deck-title { margin: 0; font-size: var(--step-2); line-height: 1.15; }
.blk-deck-text { margin: 0; max-inline-size: 44rem; }
.blk-deck-go { margin: var(--space-sm) 0 0; }

@container (max-width: 52rem) {
  /* Dar ekranda yapışan kartlar ekranı yiyor: yığın bırakılıyor, kartlar
     sırayla akıyor. */
  .blk-deck-item { position: static; }
  .blk-deck-card { min-block-size: 0; }
}

/* ═══════════════════════════════════════════════════════════
   ALINTI PERDESİ
   ═══════════════════════════════════════════════════════════
   Cümle sayfa boyunda ve harflerin İÇİNDEN fotoğraf görünüyor.
   Manşetten farkı bu: orada cümle mürekkeple yazılı, burada cümlenin
   kendisi bir pencere. */
.blk-cut { padding-block: calc(var(--space-lg) * 2); }
.blk-cut[data-align="center"] { text-align: center; }
.blk-cut-quote { margin: 0; }
.blk-cut-say {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(2rem, 0.6rem + 6.4vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* Taban hâl: mürekkeple yazılmış cümle. Aşağıdaki dolgu bunun üstüne
     biniyor ve binemezse buraya düşüyor. */
  color: var(--site-ink);
}
/*
  Harf dolgusu.

  Üç şey aynı anda yanlış gidebilir: tarayıcı background-clip: text
  bilmiyor olabilir, `--cut` yazılmamış olabilir, fotoğraf yüklenmeyebilir.
  Üçünde de metnin görünmesi gerekiyor.

    · Birincisini @supports kesiyor.
    · İkincisi ve üçüncüsü için ZEMİN RENGİ var: background-color mürekkep
      ve fotoğraf onun üstüne biniyor. Fotoğraf gelmezse harfler
      mürekkeple dolu kalıyor, yani taban hâlin aynısı.

  Saf `color: transparent` + yalnız görüntü yazılsaydı, fotoğrafın
  gelmediği her durumda cümle görünmez olurdu.
*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .blk-cut-say {
    background-color: var(--site-ink);
    background-image: var(--cut, none);
    background-size: cover;
    background-position: 50% 40%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.blk-cut-body {
  margin: var(--space-lg) 0 0;
  display: grid;
  gap: var(--space-sm);
  max-inline-size: 44rem;
}
.blk-cut[data-align="center"] .blk-cut-body { margin-inline: auto; }
.blk-cut-body p { margin: 0; }

/*
  Kaydırdıkça harflerin içindeki fotoğraf kayıyor. Yalnız arka plan konumu
  değişiyor: zaman çizgisi beklenmedik bir yerde dursa bile görünen şey
  "fotoğrafın başka bir yeri" oluyor, okunmaz bir şey değil.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .blk-cut-say {
      animation: blk-cut-pan linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes blk-cut-pan {
  from { background-position: 50% 18%; }
  to { background-position: 50% 82%; }
}

/* ═══════════════════════════════════════════════════════════
   AÇILIŞ: ŞERİTLER
   ═══════════════════════════════════════════════════════════
   Tek fotoğraf dikey dilimlere bölünüyor ve dilimler sırayla yerine
   oturuyor. Mozaikten farkı: orada birden çok kare bir ızgaraya diziliyor,
   burada TEK kare kesiliyor ve kesik kapandığında yeniden bütün bir
   fotoğraf oluyor.

   Her dilim kendi penceresi; içindeki <img> bölümün tamamı kadar geniş ve
   kendi payı kadar sola kaydırılmış. Yani beş dilim yan yana geldiğinde
   ortaya çıkan şey tek bir fotoğraf — kesikler dışında hiçbir yerinde
   ölçek ya da hiza farkı yok. */
.blk-slat {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  padding-block: 0;
  min-block-size: 32rem;
  background: var(--site-ink);
  overflow: clip;
}
.blk-slat[data-height="screen"] { min-block-size: calc(100svh - var(--site-head-h)); }

.blk-slat-strips {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  /* Kesik: dilimlerin arası. Zemin mürekkep olduğu için aralık siyah bir
     çizgi gibi okunuyor. */
  gap: 3px;
}
.blk-slat-strip { position: relative; overflow: clip; }
.blk-slat-img {
  position: absolute;
  inset-block: 0;
  /* Fotoğraf bölümün tamamı kadar geniş; dilim onun bir penceresi. */
  inline-size: calc(var(--n) * 100%);
  max-inline-size: none;
  block-size: 100%;
  object-fit: cover;
  inset-inline-start: calc(var(--i) * -100%);
}
.blk-slat[data-focus="top"] .blk-slat-img { object-position: 50% 0%; }
.blk-slat[data-focus="upper"] .blk-slat-img { object-position: 50% 25%; }
.blk-slat[data-focus="lower"] .blk-slat-img { object-position: 50% 75%; }
.blk-slat[data-focus="bottom"] .blk-slat-img { object-position: 50% 100%; }
.blk-slat-slot { position: absolute; inset: 0; z-index: -1; }

.blk-slat-in { inline-size: 100%; position: relative; z-index: 1; padding-block: calc(var(--space-lg) * 2); }
/*
  Levha kendi zeminini taşıyor. Perde denendi ve olmadı: dilimlerin arası
  açıkken perdenin altında koyu şeritler ve açık aralıklar birlikte
  duruyor, yazı bir harfte okunup öbüründe kayboluyordu. Donuk bir levha
  fotoğrafın dokusundan tamamen bağımsız.
*/
.blk-slat-plate {
  max-inline-size: 38rem;
  padding: var(--space-lg) var(--space-md);
  background: var(--site-surface);
  color: var(--site-ink);
  border-radius: calc(var(--site-img-radius) * 1.5);
}
.blk-slat[data-align="center"] .blk-slat-plate { margin-inline: auto; }
.blk-slat[data-align="end"] .blk-slat-plate { margin-inline-start: auto; }
.blk-slat-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.blk-slat-lede { max-inline-size: 32rem; }

/*
  Jaluzi. Dilimler yukarıdan/aşağıdan sırayla yerine oturuyor.

  Emniyet: taban hâlde dilimler zaten yerinde ve fotoğraf bütün. Hareket
  yalnız prefers-reduced-motion: no-preference içinde ve fill-mode `both`
  ile bitiş hâli tabanın aynısı. Animasyon kurulamazsa görünen şey bütün
  bir fotoğraf — eksik bir şey değil.
*/
@media (prefers-reduced-motion: no-preference) {
  /* [data-motion] gerekçesi nabız bölümünde yazılı: başlangıç hâli
     kırpılmış ve yarı saydam, yani betiksiz bir sayfada kalıcı olamaz. */
  [data-motion] .blk-slat-strip {
    animation: blk-slat-in 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--i) * 0.09s);
  }
}
/* Tek dilim aşağıdan, komşusu yukarıdan: hepsi aynı yönden gelseydi
   fotoğraf kayan tek bir blok gibi görünürdü, kesilmiş gibi değil. */
@keyframes blk-slat-in {
  from { clip-path: inset(50% 0); opacity: 0.2; }
  to { clip-path: inset(0 0); opacity: 1; }
}

@container (max-width: 46rem) {
  /* Dar ekranda beş dilim çizgiye dönüyor: sayı düşürülüyor. Değer
     görünümden geliyor ama burada ezilebiliyor çünkü asıl kısıt ekran. */
  .blk-slat-strips { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); }
  .blk-slat-img { inline-size: calc(min(var(--n), 3) * 100%); }
  .blk-slat-strip:nth-child(n + 4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   YATAY AKIŞ
   ═══════════════════════════════════════════════════════════
   Bölüm ekrana çakılıyor ve sayfayı aşağı kaydırdıkça kartlar yana
   akıyor.

   Taban hâl — aşağıdaki @supports'un DIŞI — sıradan bir yatay şerit:
   parmakla ve kaydırma çubuğuyla geziliyor, bölüm uzamıyor, hiçbir şey
   yapışmıyor. Yapışan kuruluşun tamamı guard'ın içinde; zaman çizgisi
   yoksa ya da ziyaretçi hareket istemiyorsa ortada uzun ve boş bir
   kaydırma yolu KALMIYOR. */
.blk-flow { padding-block: calc(var(--space-lg) * 1.5); }
/* Başlık yapışan sahnenin ızgara öğesi; `inline-size: 100%` verildiğinde
   .blk-in'in `margin-inline: auto`'su devre dışı kalıyor ve ray
   ortalanmıyordu (ölçüldü: 704 yerine 770). Ortalamayı ızgaranın kendisi
   yapıyor. */
.blk-flow-head { justify-self: center; inline-size: 100%; margin-block-end: var(--space-md); }
.blk-flow-title { margin: 0; }
.blk-flow-intro { max-inline-size: 44rem; }

.blk-flow-rail { overflow-x: auto; overscroll-behavior-x: contain; }
.blk-flow-track {
  display: flex;
  gap: var(--space-md);
  padding-inline: var(--space-md);
  scroll-snap-type: x proximity;
}
/* En çok üç kart görünüyor: ray ne kadar genişlerse genişlesin dördüncüsü
   tam olarak görünmüyor. Ölçü rayın KENDİSİNDEN türüyor; sabit bir tavan
   (eski 24rem) geniş ekranda dört buçuk kart bırakıyordu ve şeridin
   "devamı var" işareti kayboluyordu. Yüzde şeridin iç genişliğine göre,
   yani iki uçtaki payın dışı; aradaki iki boşluk da düşülüyor.
   Dar ekranda üçte bir okunmaz olurdu — orada 16rem tabanı geçerli ve
   şerit yine parmakla geziliyor. */
.blk-flow-card {
  flex: 0 0 max(16rem, calc((100% - var(--space-md) * 2) / 3));
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: calc(var(--site-img-radius) * 1.5);
  overflow: clip;
  scroll-snap-align: start;
}
.blk-flow-media { position: relative; aspect-ratio: 4 / 3; background: var(--site-soft); }
.blk-flow-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.blk-flow-no {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.55);
}
.blk-flow-say { display: grid; align-content: start; gap: 0.5rem; padding: var(--space-md); }
.blk-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-primary);
}
.blk-flow-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.blk-flow-name { margin: 0; font-size: var(--step-1); line-height: 1.2; }
.blk-flow-text { margin: 0; font-size: var(--step--1); }
.blk-flow-go { justify-self: start; font-weight: 600; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
      Kuruluş sahne bloğundakiyle aynı iskelet: dış kutu bir kaydırma yolu,
      iç kutu o yolun başında yapışan tek ekran, zaman çizgisi yolun
      kendisine ait ve adı ata öğede duruyor.

      Yolun boyu ŞERİDİN TAŞAN KISMI kadar; kart sayısı kadar değil.

      İki ayrı hata bir aradaydı. Biri: yol kart başına 46svh'ti, yani
      hareketten bağımsız. Geniş bir ekranda altı kart neredeyse tamamen
      görünüyor — yana gidecek yol birkaç yüz piksel — ama bölüm yine üç
      ekran boyu yapışıyordu. Öbürü: hareketin kendisi `-100%` ile
      yazılıydı ve translate'in yüzdesi öğenin KENDİ kutusuna göre.
      Şerit blok seviyesinde bir flex kabı, yani kutusu rayın genişliği
      (kartlar dışarı taşıyor, kutu büyümüyor): `-100% + 100vw` neredeyse
      sıfır ediyordu. Sonuç, ziyaretçinin gördüğü şey: bölüm ekrana
      çakılıyor, sayfa üç ekran boyu kaydırılıyor ve kartlar yalnız birkaç
      piksel kımıldıyor.

      İkisinin de kaynağı aynı: taşan kısım hiç hesaplanmıyordu. Artık tek
      bir yerde hesaplanıyor ve hem yol hem hareket ondan türüyor —
      kaydırma birebir: bir piksel aşağı, bir piksel yana. Taşma yoksa yol
      da yok.
    */
    .blk-flow {
      /* Kart genişliği tek yerde: ölçü iki ayrı yere yazılsaydı biri
         değişince yol yalan söylerdi.

         Taban hâldeki üç kart kuralının aynısı, tek farkı ölçünün
         nereden alındığı: burada şerit taşıyor ve yüzdenin dayanacağı
         bir kap yok, ölçü bölümün genişliğinden (cqi) alınıyor. Üç kart
         ile dört pay tam olarak bölümü dolduruyor; üç kartlık bir şeritte
         taşma sıfır çıkıyor, yani bölüm yapışmıyor — doğrusu da bu,
         kaydırılacak bir şey yok. */
      --flow-card: max(18rem, calc((100cqi - var(--space-md) * 4) / 3));
      /* Kartlar `flex: 0 0` — ne büyüyor ne küçülüyor, yani şeridin
         genişliği tam olarak bu: n kart + aralarındaki n-1 boşluk + iki
         uçtaki pay (`gap` ile `padding-inline` aynı ölçü). */
      --flow-track: calc(var(--n) * var(--flow-card)
                         + (var(--n) + 1) * var(--space-md));
      /* cqi, vw değil: taşmayı belirleyen genişlik bölümün kendi
         genişliği; 100vw dikey kaydırma çubuğunu da sayıyor. */
      --flow-over: max(0px, calc(var(--flow-track) - 100cqi));
    }
    .blk-flow-run {
      view-timeline: --blk-flow block;
      block-size: calc(100svh + var(--flow-over));
    }
    .blk-flow-stage {
      /* Sütun bölümün genişliği kadar: yazılmazsa ızgara sütunu içindeki
         yatay şeridin TAM genişliğine büyüyor (ölçüldü: 2692px) ve
         başlığın rayı o sütunun ortasına göre hesaplanıp sayfadan 66
         piksel kayıyordu. */
      grid-template-columns: minmax(0, 1fr);
      position: sticky;
      inset-block-start: var(--site-head-h);
      block-size: calc(100svh - var(--site-head-h));
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: center;
      overflow: clip;
    }
    /* Yapışan hâlde şerit kendi kaydırmasını bırakıyor: iki kaydırma
       (sayfanınki ve şeridinki) aynı anda çalışınca parmak hangisini
       sürdüğünü bilemiyor. */
    /* Şerit dikeyde ortalanıyor, KARTLAR değil: kartların boyu metnine
       göre değişiyor ve ortalandıklarında her birinin tepesi bir başka
       yerde başlıyordu — göz sıradaki kartı ararken satır satır aşağı
       kayıyor. Ortalama şeridin kendisine taşındı; kartlar esneyip
       en uzun kartın boyunu alıyor ve altları da üstleri de hizalı. */
    .blk-flow-rail { overflow: visible; align-self: center; }
    .blk-flow-track {
      animation: blk-flow-run linear both;
      animation-timeline: --blk-flow;
      animation-range: contain 0% contain 100%;
    }
    .blk-flow-card { flex-basis: var(--flow-card); }
  }
}
/*
  Yol: şeridin sağ ucu bölümün sağ kenarına gelene kadar, yani tam olarak
  taşan kısım. Ölçü yukarıda (--flow-over) ve yapışan yolun boyuyla aynı
  sayı — ikisi ayrı yazıldığında kaydırma ile hareket birbirini tutmuyor.
*/
@keyframes blk-flow-run {
  from { translate: 0 0; }
  to { translate: calc(var(--flow-over, 0px) * -1) 0; }
}

/* ═══════════════════════════════════════════════════════════
   KEMER KÜNYESİ
   ═══════════════════════════════════════════════════════════
   Portrenin üstü yay çiziyor ve metin yayın etrafından akıyor.

   Yarım banttan farkı kolonun olmaması: orada iki kolon var ve metin
   kolonun düz kenarında bitiyor, burada metin karenin kavisini takip
   ediyor. `shape-outside` bunu yapan tek şey — float olmadan çalışmıyor,
   o yüzden portre gerçekten float. */
.blk-arch-body { max-inline-size: 62rem; }
.blk-arch-figure {
  margin: 0 0 var(--space-md);
  inline-size: clamp(12rem, 34%, 22rem);
  aspect-ratio: 3 / 4;
  /* Yay yalnız ÜST iki köşede: alt köşeler durursa portre bir hap olur ve
     kemer okunmaz. */
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
  overflow: clip;
  background: var(--site-soft);
}
.blk-arch-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

@container (min-width: 46rem) {
  .blk-arch[data-side="start"] .blk-arch-figure {
    float: inline-start;
    margin-inline-end: var(--space-lg);
  }
  .blk-arch[data-side="end"] .blk-arch-figure {
    float: inline-end;
    margin-inline-start: var(--space-lg);
  }
  /*
    Metnin izlediği biçim. `inset(...)` kutunun kendisi ve yuvarlaklığı
    aynı yerden alıyor: iki yarıçapı ayrı yazmak, birini değiştirip
    öbürünü unutmak demekti — o zaman kavis fotoğrafın kavisine
    uymuyor ve metin ya çarpıyor ya boşluk bırakıyor.

    margin: satırlar yaya değmesin diye.
  */
  .blk-arch-figure {
    shape-outside: inset(0 round 999px 999px 0.5rem 0.5rem);
    shape-margin: 1.1rem;
  }
}

.blk-arch-title { margin: 0 0 var(--space-sm); }
.blk-arch-lede { margin: 0 0 var(--space-sm); }
.blk-arch-text { margin: 0 0 var(--space-sm); }

.blk-arch-sign { margin: var(--space-md) 0 0; display: grid; gap: 0.1rem; }
.blk-arch-sign-name { font-weight: 700; }
.blk-arch-sign-role { font-size: var(--step--1); opacity: 0.75; }

/* Rakamlar akışın dışında ve float'ın altında: kavisin etrafında
   kırılsalardı basamakları alt alta düşerdi. */
.blk-arch-facts {
  clear: both;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.blk-arch-fact { margin: 0; }
.blk-arch-fact-head { display: grid; gap: 0.1rem; margin: 0; }
.blk-arch-value {
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--site-primary);
}
.blk-arch-label {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.blk-arch-note { margin: 0.35rem 0 0; font-size: var(--step--1); }

/* ═══════════════════════════════════════════════════════════
   PERDE KARTLARI
   ═══════════════════════════════════════════════════════════
   Kenardan kenara fotoğraf; üstünde başlık ve altında bir kart sırası.

   Tam kanal bandın tek panelli hâlinden farkı fotoğrafın hakkı: orada
   ekranı kaplayan bir karenin üstünde tek küçük kutu duruyor ve karenin
   geri kalanı boşa gidiyor. Burada aynı kare hem başlığı hem kartları
   taşıyor.

   Başlığın kutusu YOK, kartların var. Bilerek: başlık iri ve perdeyle
   okunuyor; kart metni küçük ve fotoğrafın dokusuna karşı kendi zeminine
   ihtiyacı var. Perdeyi ikisine birden yüklemek fotoğrafı tamamen
   karartmak demekti. */
.blk-perde {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--space-lg) * 2);
  background: var(--site-ink);
  color: #fff;
}
.blk-perde-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blk-perde[data-focus="top"] .blk-perde-img { object-position: 50% 0%; }
.blk-perde[data-focus="upper"] .blk-perde-img { object-position: 50% 25%; }
.blk-perde[data-focus="lower"] .blk-perde-img { object-position: 50% 75%; }
.blk-perde[data-focus="bottom"] .blk-perde-img { object-position: 50% 100%; }
.blk-perde-slot { position: absolute; inset: 0; z-index: -2; }

/* Perde mürekkepten türüyor, sabit siyahtan değil: palet değişince perde
   de onunla ısınıyor ve koyu şemada da aynı payı koruyor. Üstte daha
   koyu — başlık orada; altta açılıyor çünkü kartlar kendi zeminini
   getiriyor ve ikinci bir karartma fotoğrafı öldürüyordu. */
.blk-perde-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--site-ink) 82%, transparent) 0%,
    color-mix(in oklab, var(--site-ink) 62%, transparent) 45%,
    color-mix(in oklab, var(--site-ink) 40%, transparent) 100%);
}

.blk-perde-head { max-inline-size: 40rem; }
.blk-perde-eyebrow { color: color-mix(in oklab, var(--site-primary) 45%, #fff); }
.blk-perde-title { margin: 0 0 var(--space-sm); }
.blk-perde-lede { color: inherit; opacity: 0.9; max-inline-size: 34rem; }
.blk-perde-lines {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.blk-perde-lines li { position: relative; padding-inline-start: 1.1rem; }
.blk-perde-lines li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--site-primary) 45%, #fff);
}

.blk-perde-cards {
  margin-block-start: calc(var(--space-lg) * 1.5);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.blk-perde-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--space-md);
  background: var(--site-surface);
  color: var(--site-ink);
  border-radius: var(--site-radius);
}
.blk-perde-icon { inline-size: 1.4rem; block-size: 1.4rem; color: var(--site-primary); }
.blk-perde-name { margin: 0; font-size: var(--step-1); line-height: 1.2; }
/* Bağlantı başlıkta ama alanı kartın tamamına yayılıyor: iki kelimelik
   bir başlığa parmakla isabet ettirmek şans işi (aynı ders panel-cards'ta). */
.blk-perde-link { color: inherit; text-decoration: none; }
.blk-perde-link::after { content: ""; position: absolute; inset: 0; }
.blk-perde-card:has(.blk-perde-link:hover) .blk-perde-name { color: var(--site-primary); }
.blk-perde-text { margin: 0; font-size: var(--step--1); color: var(--site-muted); }
.blk-perde-card-lines {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  font-size: var(--step--1);
}
.blk-perde-card-lines li { position: relative; padding-inline-start: 1rem; }
.blk-perde-card-lines li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 999px;
  background: var(--site-primary);
}

/* ═══════════════════════════════════════════════════════════
   KÜNYE TABLOSU
   ═══════════════════════════════════════════════════════════
   Solda etiket, sağda değer; her satır çizgiyle ayrılmış. Adres
   bölümünden farkı okuma biçimi: orada üç satır düz yazı, burada bir
   çizelge — göz etiket sütununu tarayıp aradığı satırda duruyor.

   Harita yanında ve dikey: sokak adları yarım kolonda da okunuyor çünkü
   kutu geniş değil UZUN. Adres yoksa harita da yok ve tablo rayın
   tamamını alıyor (aynı gerekçe adres bölümünde de yazılı: boş bir
   harita kutusu boş bir görselden farksız). */
.blk-sheet-in { display: grid; gap: var(--space-lg); }
@container (min-width: 52rem) {
  .blk-sheet-in:has(.blk-sheet-map) {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
  .blk-sheet-head { grid-column: 1 / -1; }
  .blk-sheet[data-side="start"] .blk-sheet-map { order: -1; }
}
.blk-sheet-head > :last-child { margin-block-end: 0; }

.blk-sheet-rows { margin: 0; padding: 0; }
.blk-sheet-row {
  display: grid;
  gap: 0.1rem var(--space-md);
  padding-block: 0.55rem;
  border-block-start: 1px solid var(--site-line);
}
.blk-sheet-row:last-child { border-block-end: 1px solid var(--site-line); }
@container (min-width: 34rem) {
  /* Etiket sütunu iki kelimelik gün aralıklarını ("Pazartesi – Çarşamba")
     tek satırda tutacak kadar geniş: kırılan etiket satırı iki katına
     çıkarıyordu. */
  .blk-sheet-row { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); align-items: baseline; }
}
.blk-sheet-label {
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-muted);
}
/* Değer birden çok satır olabiliyor (adres): satır sonları korunuyor,
   yoksa sokak ile ilçe tek satıra biniyor. */
.blk-sheet-value { margin: 0; }
/* Satır sonları yalnız değerin KENDİSİNDE korunuyor (adres iki satır). */
.blk-sheet-text { white-space: pre-line; }
.blk-sheet-link { color: inherit; text-decoration: none; border-block-end: 1px solid currentColor; }
.blk-sheet-link:hover { color: var(--site-primary); }
.blk-sheet-note { display: block; font-size: var(--step--1); color: var(--site-muted); white-space: normal; }

.blk-sheet-canvas { aspect-ratio: 1 / 1; min-block-size: 16rem; }
.blk-sheet-go { margin: var(--space-sm) 0 0; }
@container (max-width: 52rem) {
  .blk-sheet-canvas { aspect-ratio: 4 / 3; }
}
