/*
  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; }
a { color: var(--site-primary); }
/*
  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)); 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; }

.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); 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="blog-latest"] .blk-h2,
[data-block="page-list"] .blk-h2,
[data-block="logo-strip"] .blk-h2 {
  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); }
.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);
  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;
}

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

/*
  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); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }

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

.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-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); color: var(--site-primary); }
/*
  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, blog-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"]) {
  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);
  /* 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; }

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

  Sırayla feda edilecek şeylerin en ucuzu o. Koyu/açık tercih zaten işletim
  sisteminden kendiliğinden geliyor; randevu düğmesi ise gelmiyor ve logo da
  okunmak zorunda. Düğme dururken 390 pikselde markaya 78 piksel kalıyor ve
  logo yarı boyuna iniyor — o hâlde başlıkta duran şey marka değil, markanın
  küçültülmüş bir hatırası oluyor.

  27rem (432px) sınırı: taşınabilir cihazların dikey genişliği bunun
  altında kalıyor, tabletler zaten 48rem'deki geniş düzene geçiyor.
*/
@container site-head (max-width: 27rem) {
  .site-head .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); }

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

@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ı ve tek. Üst barın kendi vurgusunu kullanıyor —
   marka rengine boyanmış bir başlıkta ana renk düğme görünmez olurdu. */
.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-surface);
  text-decoration: none; font-weight: 500; white-space: nowrap; }

/* 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); }
.site-theme-sun { display: none; }
.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); }

@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); }
  .site-nav-sub a:hover { background: var(--site-soft); color: var(--site-head-ink); }

  /* 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. */
.site-head[data-logo-position="center"] .site-head-in { flex-direction: column; }
.site-head[data-logo-position="center"] .site-head-end,
.site-head[data-logo-position="center"] .site-nav { justify-content: center; }

/*
  İki logo da HTML'e basılıyor, hangisinin görüneceğine CSS karar veriyor —
  JavaScript yok. Koyu logo varsayılan olarak gizli; koyu moddaki takas
  ThemeCss'in ürettiği blokta, çünkü ColorScheme "light" olan bir sitede o
  kural hiç basılmamalı.
*/
.site-logo-dark { display: none; }

/* 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ı.
*/
.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-muted); }
.site-langs a:hover { color: var(--site-primary); background: var(--site-soft); }
.site-langs a[aria-current="true"] { color: var(--site-ink); font-weight: 600;
  background: var(--site-soft);
  border-color: var(--site-control-line, var(--site-muted)); }
.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); }

/* ── 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; }
.blk-role { color: var(--site-primary); font-size: var(--step--1); 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; }

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

@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);
  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);
}

/* 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-surface-2);
  color: var(--site-ink-2);
  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); }
.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-ink-2);
}
.blk-open-state[data-open="true"] {
  background: color-mix(in oklab, var(--site-primary) 14%, transparent);
  color: color-mix(in oklab, var(--site-primary) 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-ink-3);
  letter-spacing: 0.08em;
}
.blk-form-nav { grid-column: 1 / -1; display: flex; gap: var(--space-xs); }
.blk-form-help { display: block; font-size: var(--step--2); color: var(--site-ink-3); }

/* ── 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); align-content: start; }
@media (min-width: 40rem) {
  .site-foot-nav[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot-nav[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-foot-nav[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.site-foot-col { display: flex; flex-direction: column; gap: 0.4em; }
.site-foot-col-head { font-weight: 600; color: var(--site-ink); }
