/*
  FERAH — çerçeve ve çizgi, dolgu değil.

  Tezi şu: bir kart, zemininden dolguyla değil ince bir çerçeveyle ayrılır.
  Sayfa baştan sona aynı beyazlıkta kalıyor ve ayrımı yapan şey renk değil
  çizgi. Bölümleri birbirinden ayıran da kutu değil, yatay bir hairline.

  Klinik, muayenehane, laboratuvar; "ferah ama boş değil" isteyen her yer.

  Katalogdaki `sade` ile farkı tek bir yerde toplanıyor: orada kart
  `--site-soft` dolgusuyla çiziliyor, burada dolgusuz ve çerçeveli. Bu
  küçük görünen fark bütün sayfanın ısısını değiştiriyor — dolgulu kartlar
  sayfayı bloklara bölüyor, çerçeveli kartlar tek bir yüzey bırakıyor.

  Köşe 10 piksel: ölçülerek alındı, yuvarlatılmış ama hap değil.
*/

:root {
  --ferah-radius: 0.625rem;
  /* Çizgi mürekkepten türüyor, sabit bir gri değil: koyu şemada da aynı
     payı koruyor ve palet değiştiğinde çizgi de onunla ısınıyor. */
  --ferah-line: color-mix(in oklab, var(--site-ink) 12%, transparent);
}

/*
  Köşe kararı tek yerde: aşağıdaki sınıf listesi bir beyaz liste ve
  kataloga yeni giren blok listede olmadığı için varsayılan yarıçapta
  kalıyordu — yuvarlak bir sayfada 0.625 ile 0.5 iki ayrı köşe demek.
  Belirteci tanımlamak listeyi tamamlıyor. (`:root:root` gerekçesi:
  tema belirteçleri sayfa içindeki <style>'da, bu dosyadan sonra.)
*/
:root:root {
  --site-radius: var(--ferah-radius);
  --site-img-radius: var(--ferah-radius);
}

/* ── kart: dolgusuz, çerçeveli ───────────── */
.blk-card,
.blk-note,
.blk[data-variant="cards"] .blk-prices > li {
  background: transparent;
  border: 1px solid var(--ferah-line);
  border-radius: var(--ferah-radius);
  box-shadow: none;
}
/* Üstüne gelince dolan değil, çizgisi koyulaşan kart: dolgu değişimi
   kartın ağırlığını değiştiriyor ve satırdaki öbür kartlar kayıyormuş
   gibi duruyor. */
.blk-card-link { transition: border-color 160ms ease; }
.blk-card-link:hover { border-color: var(--site-primary); }

.blk-panel-card,
.blk-jump,
.blk-press[data-variant="cards"] .blk-press-item,
.blk-collage-card,
.blk-loc-card,
.blk-scene-media,
.blk-roster-frame,
.blk-press-featured { border-radius: var(--ferah-radius); }

.blk-img,
.blk-figure img { border-radius: var(--ferah-radius); }

/* ── bölüm ayrımı: kutu değil çizgi ───────── */
/*
  Zebra kapalı olsa da bölümler birbirinden ayrılsın istiyoruz. Ayıran şey
  ikinci bir zemin değil, bölümün üstünden geçen tek bir çizgi. Kendi
  zeminini taşıyan bölümler dışarıda: onların zaten kendi kenarı var ve
  üstlerine bir çizgi daha koymak iki kenar demek.
*/
main > div + div > .blk:not(
  .blk-stats, .blk-wa, .blk-campaign, .blk-band, .blk-rule, .blk-scene,
  .blk-hero, .blk-jumps, .blk-marquee,
  .blk-stepblock[data-variant="zigzag"],
  .blk-cta[data-accent="true"], .blk-cta[data-variant="boxed"],
  .blk-press[data-variant="invert"], .blk-specs[data-variant="band"]
) {
  border-block-start: 1px solid var(--ferah-line);
}

/* ── formlar ─────────────────────────────── */
.blk-form input:not([type="checkbox"], [type="radio"]),
.blk-form select,
.blk-form textarea {
  border-radius: var(--ferah-radius);
  border: 1px solid var(--ferah-line);
  background: transparent;
}

/* ── başlık: sıkı ve negatif aralıklı ─────── */
/*
  Referansın imzası bu: iri başlıklar birbirine yaklaşıyor ve harfler
  sıkışıyor. Ölçüldü — 47 piksellik başlıkta satır arası 53 piksel
  (1.13) ve harf aralığı eksi.

  Yalnız iri başlıklarda: küçük bir h4'te negatif aralık okunurluğu
  düşürüyor ve kazandığı bir şey yok.
*/
.blk-h2,
.blk-stage-title,
.blk-statement-title,
.blk-scene-title {
  letter-spacing: -0.03em;
  line-height: 1.13;
}

/* ── üst bar: bant değil, hap ──────────────────────────────
   Bu dilin üst barı sayfanın üstüne yapışmış bir bant değil, kenarlardan
   içeri çekilmiş, köşeleri yuvarlatılmış beyaz bir kutu. Zemin bandın
   kendisinde değil rayında: bant saydam kalıyor ki hap sayfanın zemininin
   üstünde yüzsün.

   Gölge sabit siyah değil mürekkepten türüyor — koyu temada siyah bir
   gölge zaten koyu bir zeminde görünmüyor ve hap düz bir dikdörtgene
   dönüyordu. */
.site-head { background: transparent; border-block-end: 0; }
.site-head-in {
  background: var(--site-head-surface);
  border-radius: var(--ferah-radius);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--site-ink) 8%, transparent),
    0 10px 30px color-mix(in oklab, var(--site-ink) 7%, transparent);
  padding-inline: var(--space-md);
}
/* Hap kenara yapışmıyor: tam kanal bir üst barda bile iki yanında
   sayfanın zemini görünüyor, yoksa "hap" değil yine bant olur. */
.site-head[data-width="full"] .site-head-in {
  margin-inline: var(--space-sm);
  max-inline-size: none;
}
/* Yapışkan bar kaydırıldığında hap yukarı yapışıyor; üstündeki boşluk
   kalkarsa ekranın tepesine değen bir hap yamuk duruyor. */
.site-head[data-sticky="true"] { padding-block: var(--space-sm); }

/* Barın GERÇEK boyu. --site-head-h yalnız hapın kendi boyunu söylüyor;
   bu dilde hapın iki yanında bir de ray boşluğu var ve açılışı o payı
   saymadan yukarı çekince tepede ince bir şerit kalıyordu (ölçüldü: bar
   97 piksel, çekme 73.6 — aradaki 23 piksel sayfanın beyazı olarak
   görünüyordu). */
:root { --ferah-head-h: var(--site-head-h, 4.5rem); }
:root:has(.site-head[data-sticky="true"]) {
  --ferah-head-h: calc(var(--site-head-h, 4.5rem) + var(--space-sm) * 2);
}

/* ── üst bar açılışın ÜSTÜNE biniyor ───────────────────────
   Referansın açılışı sayfanın en tepesinden başlıyor ve hap bar onun
   üstünde yüzüyor. Bizde bar akışta duruyordu ve açılışı kendi boyu kadar
   aşağı itiyordu.

   Bar `position: fixed` YAPILMIYOR: akıştan çıkan bir öğede kaydırmaya
   bağlı zaman çizgileri ölü doğuyor (bkz. REFERANS-SITEDEN-SABLON §4c).
   Bar yerinde kalıyor, açılış onun boyu kadar yukarı çekiliyor ve kendi
   yazısını o kadar aşağı itiyor.

   Çekme yalnız SAHNE açılışlarında: bir iletişim sayfası `location` ile,
   gizlilik `rich-text` ile başlıyor ve onların ilk satırı barın altında
   kalırdı. */
main > div:first-child > .blk-hero {
  margin-block-start: calc(-1 * var(--ferah-head-h));
  padding-block-start: calc(var(--ferah-head-h) + var(--space-md));
}

/* Klasik açılış da barın altından başlıyor — ama yalnız AÇILIŞ boyundayken.

   `.blk-classic` bu dildeki tek fotoğraflı açılış ve `.blk-hero` sınıfını
   taşımıyor (kendi ailesi var), o yüzden yukarıdaki kurala yakalanmıyordu:
   sayfanın tepesinde beyaz bir bant, onun altında fotoğraf başlıyordu.

   Yükseklik koşulu FOTOĞRAFLI duruşlarda şart. Aynı blok iç sayfaların
   BAŞLIK şeridi olarak da kullanılıyor (`kısa` / `normal`) ve orada bölümün
   tamamı 154 piksel: yazı kendi payıyla ortalanmış, barın açtığı yeri
   kapatacak fotoğraf yok. `yüksek` ve `ekran boyu` ise ana sayfa açılışının
   iki ölçüsü — barı taşıyacak boy yalnız onlarda var. */
main > div:first-child > .blk-classic:not([data-variant="kunye"]):is(
  [data-height="screen"], [data-height="tall"]) {
  margin-block-start: calc(-1 * var(--ferah-head-h));
  padding-block-start: calc(var(--ferah-head-h) + var(--space-md));
}

/* Künye şeridi de çekiliyor — ama boyu için değil RENGİ için.

   Künyenin zemini bir fotoğraf değil, bölümün kendi düz rengi. Şerit barın
   altında kalınca o rengin üstünde sayfanın beyazından bir bant duruyor ve
   hap, başlığın bandıyla değil sayfanın zeminiyle bütünleşiyor: tepede
   birbirine yapışmış iki ayrı katman okunuyor. Renk barın ardından da devam
   edince hap, ana sayfada fotoğrafın üstünde durduğu gibi başlık bandının
   üstünde duruyor — aradaki tek fark zeminin düz renk olması.

   Boy koşulu burada yok: künye zaten hiçbir boyu dinlemiyor
   (`min-block-size: auto`), kendi yazısının boyuna oturuyor.

   Şeridin kendi payı korunuyor — çekilen kadarı payına geri ekleniyor, yani
   başlığın hapla arasındaki boşluk değişmiyor; değişen tek şey rengin
   nereden başladığı. Pay `--klasik-kunye-pad`'den okunuyor: fotoğrafsız
   künyenin payı ritim ölçüsünden bağımsız ve o hesap katalogda duruyor,
   buraya kopyalanmıyor. Fotoğraflı künyede o değişken yok, yedeği bloğun
   kendi payı. */
main > div:first-child > .blk-classic[data-variant="kunye"] {
  margin-block-start: calc(-1 * var(--ferah-head-h));
  padding-block-start: calc(var(--ferah-head-h) + var(--klasik-kunye-pad, var(--space-lg)));
}

/* Yarım sahne de çekiliyor — künye şeridiyle aynı gerekçe: RENK.

   Bölümün ilk satırı (`.blk-stage2-head`) koyu bir başlık şeridi. Çekme
   olmadan o şerit barın ALTINDAN başlıyor ve arada sayfanın beyazından
   bir bant kalıyor: hap, başlığın bandıyla değil sayfanın zeminiyle
   bütünleşiyor. Renk barın ardından da devam edince hap şeridin üstünde
   duruyor — uzmanlık listesindeki künye şeridinde görünen düzenin aynısı.

   Pay ŞERİDİN kendi dolgusuna ekleniyor, bölümün payına değil: bölüme
   yazıldığında çekilen yeri kapatan şey şerit değil bölümün zemini
   oluyor ve barın arkasına, koyu şerit yerine fotoğrafın üstü geliyor.
   Şerit zaten fotoğrafın üstünde (`z-index: 1`), yani barın ardındaki
   renk onun rengi.

   Boy: bölüm `100svh` dinliyor ve yukarı çekilen kadarı ekranın içinden
   eksiliyordu — altındaki bölümün ilk şeridi açılışın içinde görünüyordu.
   Çekilen kadarı boya geri ekleniyor. */
main > div:first-child > .blk-stage2 {
  margin-block-start: calc(-1 * var(--ferah-head-h));
  min-block-size: calc(100svh + var(--ferah-head-h));
}
main > div:first-child > .blk-stage2 > .blk-stage2-head {
  padding-block-start: calc(var(--ferah-head-h) + var(--space-md));
}

/* Barın altına çekilen açılışta "ekran boyu" gerçekten ekran boyu.

   Katalogdaki kural barın payını düşüyor (`calc(100svh - --site-head-h)`)
   ve gerekçesi orada doğru: bar akışta, açılış onun ALTINDAN başlıyor.
   Burada başlamıyor — açılış sayfanın tepesinden başlıyor ve o payı ikinci
   kez düşmek, açılışı bar boyu kadar kısa bırakıyor. Ölçüldü: 900 piksellik
   ekranda açılış 826 piksel, yani altındaki bölümün ilk şeridi ekranın
   içinde kalıyordu. */
main > div:first-child > .blk-classic:not([data-variant="kunye"])[data-height="screen"] {
  min-block-size: 100svh;
}
/* Bar saydam zeminin üstünde duruyor; kendi hapı zaten beyaz. */
.site-head { position: relative; z-index: 3; }

/* ── zikzak: kendi zemini ──────────────────────────────────
   Referansta bu bölüm soluk mavi bir zeminde duruyor ve beyaz sayfadan
   ayrılıyor. Bölüm kendi zeminini taşıdığı için ferah dilinin üst çizgisi
   de ona uygulanmıyor (aşağıdaki :not zincirinde). */
.blk-stepblock[data-variant="zigzag"] {
  background: var(--site-soft);
  padding-block: clamp(3rem, 1.5rem + 5vw, 7rem);
}
/* Numara dairesinin arkasındaki halka sayfanın değil bölümün zeminini
   almalı; beyaz bir halka soluk mavi zeminde göze batıyordu. */
.blk-stepblock[data-variant="zigzag"] .blk-steps > li::before {
  box-shadow: 0 0 0 0.5rem var(--site-soft);
}

/* ── vurgu: italik değil renk ──────────────────────────────
   Katalogda başlığın vurgulu yarısı italik bir <em>. Bu dilde vurgu
   RENKLE yapılıyor: referansın manşetinde ikinci cümle marka renginde ve
   düz duruyor. İtalik, geometrik bir sans'ta eğik bir kopya üretiyor ve
   başlığın sıkı harf aralığını bozuyor.

   Yalnız bu dilde: öbür altı dilde italik vurgu yerinde kalıyor. */
.blk-accent {
  font-style: normal;
  color: var(--site-primary);
}

/* ── manşet: bölünmüş görünüm alt alta ─────────────────────
   Katalogda "split" iki kolon: solda cümle, sağda onu açan paragraf, iki
   kolon alttan hizalı. Bu dilde o düzen tutmuyor, sebebi başlığın ölçeği:
   .blk-statement-title 4.2rem'e kadar çıkıyor ve buradaki negatif harf
   aralığıyla birlikte 1.5fr'lik kolona sığmıyor — cümle kelime kelime alt
   alta düşüyor ("Tıbbi / yolculuğunuzu / birlikte / iyileştiriyoruz"),
   yani dört satırlık bir sütun oluyor. Aynı cümle rayın tamamında iki
   satır.

   Cümle üstte rayın tamamında, paragraf altında. Paragraf rayı DOLDURMUYOR:
   68rem'lik bir satır bir açıklama için fazla uzun, ölçü katalogun giriş
   yazılarındaki 44rem'de kalıyor.

   Yalnız bu dilde: öbür beş şablonun "split" manşeti (hepsi `sade`) iki
   kolonda kalıyor — orada başlık bu boyda değil. */
.blk-statement[data-variant="split"] .blk-in {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.blk-statement[data-variant="split"] .blk-statement-aside {
  /* Alttan hizalama kalktı, kolonun payı da kalkıyor. */
  padding-block-end: 0;
  max-inline-size: 44rem;
}

/* ── beyaz panel: ortada yüzmüyor, alt kenara oturuyor ──────
   media-band'in "panel" duruşu katalogda bandın ortasında yüzüyor
   (.blk-band-in'de align-items: center) ve yüksekliği de panelin kendi
   içeriğinden geliyor: üstte ve altta eşit ölü alan, hiçbir kenara
   tutunmayan bir kutu. Bu dilde o duruş sırıtıyor, çünkü ferah'ın tezi
   dolgu değil çizgi (bkz. dosyanın başı) ve sayfadaki tek büyük dolgulu
   yüzey bu panel. Gölge eklenmedi — yukarıdaki kart kuralı gölgeyi bilerek
   kaldırıyor, panele gölge koymak bir sırıtmayı başkasıyla değiştirmek
   olurdu. Sırıtan şey kutunun kendisi değil, havada durması.

   Panel bandın alt kenarına oturuyor: bölümün kendi alt payı sıfırlanıyor,
   panel de kolonun altına hizalanıyor. Alt köşeler kare — kenara yapışmış
   bir kutunun yuvarlak alt köşesi hata gibi okunuyor. */
.blk-band[data-variant="panel"] { padding-block-end: 0; }
.blk-band[data-variant="panel"] .blk-band-in { align-items: end; }
.blk-band[data-variant="panel"] .blk-band-text {
  border-radius: var(--ferah-radius) var(--ferah-radius) 0 0;
}

/* Panel 27rem'de dar kalıyordu: başlık üç satıra, paragraf altı satıra
   kırılıp uzun ve ince bir sütun oluyordu. 34rem'de başlık iki satır.
   Ölçü yalnız iki kolonlu genişlikte değişiyor — dar ekranda panel
   katalogun kuralıyla tek kolona yayılıyor (max-width: 52rem) ve buradaki
   sabit ölçü onu ezerdi, o yüzden kural o eşiğin üstünde. */
@container (min-width: 52.5rem) {
  .blk-band[data-variant="panel"] .blk-band-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  }
  .blk-band[data-variant="panel"][data-align="end"] .blk-band-in {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }
}

/* ── öne çıkan koleksiyon: başlık üstte, kartlar hizada ─────
   Katalogda bölüm başlığı iki kolon (solda eyebrow + iri başlık, sağda
   paragraflar) ve iki sütunlu ızgarada ikinci kart aşağı kaydırılıyor.
   İkisi de bu dilde tutmuyor, sebebi yine başlık ölçeği: 3.4rem'e çıkan
   bir başlık yarım kolonda satırlara bölünüyor — manşetle aynı ders
   (yukarıdaki .blk-statement kuralı).

   Başlık üstte rayın tamamında, paragraflar altında. Paragrafın ölçüsü
   34rem'den 44rem'e çıkıyor: 86rem'lik rayın altında 34rem, tam genişlikte
   duran bir başlığın altında fazla ince bir şerit bırakıyordu.

   Kaydırma da kalktı: iki kart aynı hizada. */
.blk-posts-head { grid-template-columns: 1fr; gap: var(--space-md); }
.blk-posts-intro > p { max-inline-size: 44rem; }
.blk-posts[data-offset="true"] .blk-grid > :nth-child(even) { margin-block-start: 0; }