/*
  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: '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;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  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: 400 700;
  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; }
.blk-in { max-width: 72rem; 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;
}

/* 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; }

/* 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) {
  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. */
  border-end-start-radius: calc(var(--site-radius) + 2rem);
  border-end-end-radius: calc(var(--site-radius) + 2rem);
}
/* Ç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));
}

/*
  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); }

@container site-head (max-width: 34rem) {
  .site-phone span { 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). */
.site-action { display: inline-flex; align-items: center; min-block-size: 2.75rem;
  padding-inline: 1rem; border-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; }
.blk-quote figcaption { color: var(--site-muted); font-size: var(--step--1); }
.blk-quote figcaption small { display: block; }

/* ── 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(--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-end: var(--space-md); }

.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; }

/* ── 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) + 0.25rem);
  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ı. */
.blk-statement .blk-in { max-inline-size: 68rem; }
.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%);
}

/*
  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);
}
.blk-moments-note { margin: var(--space-sm) 0 0; font-size: var(--step--1); color: var(--site-muted); }

.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ı. */
  .blk-band[data-align="end"] .blk-band-text { order: 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); }
}
.blk-panel-icon { inline-size: 1.3rem; block-size: 1.3rem; margin-block-end: 0.5rem; opacity: 0.9; }
.blk-panel-title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-weight: var(--site-h-weight);
  font-size: var(--step-1);
  line-height: 1.2;
}
.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 { 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 { color: var(--site-muted); opacity: 1; }

/* ── 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;
}
