/*
  MONİTÖR — kutu yok, çizgi var.

  Tezi bir ölçüm aleti: sayfada hiçbir şey kutunun içinde durmuyor, her şey
  bir taban çizgisine asılı. Kart dolgusuz VE çerçevesiz — onu ayıran şey
  üstünden geçen tek bir hairline ve altındaki boşluk, tıpkı bir çizelgenin
  satırları gibi.

  Kardiyoloji, laboratuvar, görüntüleme, mühendislik: ölçtüğünü gösteren
  her iş.

  Katalogdaki `ferah` ile karıştırmamak lazım. Orada kart bir çerçeveyle
  çiziliyor ve sonuçta yine bir kutu — ince bir kutu. Burada kutu hiç
  kurulmuyor. Fark küçük duruyor ama okuma yönünü değiştiriyor: çerçeveli
  sayfada göz kutudan kutuya sıçrıyor, çizgili sayfada soldan sağa tarıyor.

  Köşe yuvarlaklığı ayarı yok: keskin köşe dilin kendisi. Yuvarlanınca
  geriye `sade`nin bir kopyası kalırdı.
*/

/*
  Köşe yarıçapı bu dilde AYAR DEĞİL, tanım. Katalogdaki Radius ve
  ImageRadius düğmelerini onurlandırmıyor (bkz. ThemeSystems) — bir dilin
  onurlandırmadığı ayarı ThemeCss de uygulamıyor ve belirteç varsayılanında
  kalıyordu. Yani kart, fotoğraf ve randevu şeridi, dilin tezine rağmen
  yuvarlak çıkıyordu.

  Seçici `:root:root`, tek `:root` DEĞİL: tema kendi belirteçlerini sayfanın
  içindeki <style> bloğunda yayımlıyor ve o blok bu dosyadan SONRA geliyor.
  Eşit özgüllükte sonraki kazanıyor, yani tek `:root` ile yazılan sıfır
  sessizce eziliyordu (ölçüldü: --site-radius sayfada 0.5rem çıkıyordu).
  Sınıfı iki kez yazmak özgüllüğü bir basamak yükseltiyor ve sıra artık
  önemli olmuyor.
*/
:root:root {
  --site-radius: 0;
  --site-img-radius: 0;

  /* Dilin ray ölçüsü. Katalogdaki bütün ray istisnaları bu değişkeni
     okuyor, yani sayfada tek bir sol kenar kalıyor. */
  --site-rail: 96rem;
}

:root {



  --mon-line: color-mix(in oklab, var(--site-ink) 16%, transparent);
  --mon-line-soft: color-mix(in oklab, var(--site-ink) 9%, transparent);
  /* Etiketlerin ölçüsü tek yerde: dokuz ayrı yerde 0.68rem yazmak,
     birini büyütünce sekizini unutmak demekti. */
  --mon-label: 0.72rem;
  --mon-track: 0.14em;
}

/* ── kart: kutu değil satır ───────────────── */
.blk-card,
.blk-note,
.blk-stack-row,
.blk[data-variant="cards"] .blk-prices > li,
.blk[data-variant="boxed"] .blk-cta-in {
  background: transparent;
  border: 0;
  /* Çizgi bu dilde kartın TEK sınırı: dolgu da çerçeve de yok. O yüzden
     saç teli değil, 2 piksel mürekkep — bölüm başlığının çizgisiyle aynı
     ağırlık. Soluk bir çizgi denendi ve kartlar birbirine aktı: tonlu
     zeminde %16'lık bir çizgi hiç okunmuyor. */
  border-block-start: 2px solid var(--site-ink);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-sm) 0 var(--space-lg);
}

/* Üstüne gelince dolmuyor, çizgisi kalınlaşıyor: dolgu değişimi kartın
   ağırlığını değiştirir ve satırdaki öbür kartlar kaymış gibi görünür. */
.blk-card-link { transition: border-color 160ms ease; }
.blk-card:has(.blk-card-link:hover) { border-block-start-color: var(--site-primary); }

/* Köşeler keskin — dilin tezi. Fotoğraf da dahil: yuvarlatılmış bir kare,
   çizgiyle kurulmuş bir sayfada tek yumuşak öğe olarak sırıtıyor. */
.blk-img,
.blk-figure img,
.blk-panel-card,
.blk-collage-card,
.blk-loc-card,
.blk-scene-media,
.blk-rail-card,
.blk-roster-frame,
.blk-deck-card,
.blk-press-featured { border-radius: 0; }

/* ── bölüm başlığı: çizginin üstünde ──────── */
/*
  Başlık bölümün tepesinde tek başına durmuyor; kendi çizgisinin üstüne
  oturuyor ve çizginin başında küçük bir kare işaret var — imleç. Bölümün
  nerede başladığını boşluk değil bu işaret söylüyor.
*/
.blk-h2,
.blk-title {
  position: relative;
  padding-block-start: var(--space-sm);
  border-block-start: 2px solid var(--site-ink);
}
/*
  Çizginin başında marka renkli kısa bir parça vardı — "bölüm burada
  başlıyor" diyen bir imleç. Kaldırıldı: okuyan onu imleç değil YARI DOLU
  BİR ÇUBUK sanıyor ve olmayan bir orana bakıyor. Bir işaret,
  taşımadığı anlamı düşündürüyorsa yanlış işarettir.

  Çizginin kendisi zaten bu dilin imzası: bölüm başlıkları da kartlar da
  aynı 2 piksel mürekkepten asılı duruyor.
*/

/* ── etiket: küçük, büyük harf, geniş ─────── */
.blk-eyebrow {
  font-size: var(--mon-label);
  letter-spacing: var(--mon-track);
  text-transform: uppercase;
  font-weight: 700;
  opacity: 1;
  color: var(--site-primary);
}

/* ── rakam: tablo rakamı ──────────────────── */
/*
  Alt alta duran rakamların basamakları hizalanmalı; oransal rakamda "1"
  dar, "4" geniş ve sütun titriyor. Bu dilin bütün rakamları tek kural.
*/
.blk-stat-value,
.blk-metric-value,
.blk-fact-value,
.blk-num-value,
.blk-herofig-value,
.blk-pulse-value,
.blk-band-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── bölüm ayrımı: tek çizgi ──────────────── */
/*
  Zebra kapalıyken de bölümler ayrılsın: ayıran şey ikinci bir zemin değil,
  bölümün üstünden geçen çizgi. Kendi zeminini taşıyanlar dışarıda — onların
  zaten kenarı var ve üstüne 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-cta[data-variant="band"], .blk-hero, .blk-pulse, .blk-cut,
  .blk-flow, .blk-slat, [data-tone="soft"], [data-tone="accent"], [data-tone="invert"]
) {
  border-block-start: 1px solid var(--mon-line-soft);
}

/* ── üst bar ──────────────────────────────── */
.site-head { border-block-end: 1px solid var(--site-ink); box-shadow: none; }
.site-menu a { letter-spacing: 0.01em; }

/* ── düğme: kare ve çizgili ───────────────── */
.blk-btn { border-radius: 0; letter-spacing: 0.02em; }

/* ── koyu şema ────────────────────────────── */
/*
  Ayrı bir kural gerekmiyor: çizgi mürekkepten türüyor ve `--site-ink`
  koyu şemada açık renge dönüyor, yani kendiliğinden doğru tarafta kalıyor.
*/

/* ── ray: geniş ölçü ──────────────────────── */
/*
  Bu dilin rayı katalogun 72rem'inden geniş. Gerekçe tezin kendisi:
  çizelge sayfanın kenarına dayanır, kutuya sığmaz. Kutulu dillerde dar
  ray doğru — orada kenarı kutu çiziyor; burada kenarı çizen bir şey yok
  ve dar ray sayfayı ortada asılı bırakıyor.

  Satır uzunluğu bundan etkilenmemeli: geniş rayda büyüyen şey fotoğraf,
  kart ve çizgi. Serbest metin kendi okunur ölçüsünde kalıyor (aşağıda).
*/
/* Ray ölçüsü artık --site-rail değişkeninde (yukarıda); .blk-in onu
   katalogdan okuyor ve burada ayrıca ezilmesi gerekmiyor. */

/* Geniş ray satırı uzatmasın. `.blk-prose` yazı gövdesi, serbest metin ve
   SSS cevaplarının ortak sınıfı; katalogda genişlik sınırı yok çünkü dar
   rayda gerekmiyordu. */
.blk-prose { max-inline-size: 46rem; }

/* ── ara tonlar ───────────────────────────── */
/*
  Mavi ile beyaz arasında bir kademe: bölümlerin bir kısmı gri-mavi
  zemine oturuyor (tema ayarında Sections: zebra). Sayfa böylece iki
  renkten üçe çıkıyor.

  Kart tonlu bölümde de dolgusuz kalıyor. Beyaza boyamak denendi ve
  yanlıştı: fotoğrafın etrafında beyaz bir çerçeve kalıyor, kart bu dilin
  değil kutulu dillerin kartına benziyordu. Gri-mavi zemin çizgiyi
  yutmuyor — çizgi mürekkepten türüyor ve o zeminde de okunuyor.
*/

/* Tonlu kart bu dilde boyunu içeriğinden alıyor: katalog 22rem taban
   veriyor ve iki satırlık bir kartın altında yarım ekran boşluk kalıyordu. */
.blk-tone { min-block-size: 0; padding-block-end: var(--space-md); }

/* ── sayfa başlığı ────────────────────────── */
/*
  Sayfanın ilk bölümü başlıktır ve kendi zeminini taşımalı.

  Beyaz zeminde duran bir manşet, altındaki bölüm başlayana kadar sayfanın
  boş olduğunu düşündürüyordu: ekranın üstünde iki satır yazı ve başka
  hiçbir şey.

  Zemin önce TONLU yapıldı ve yanlıştı: zebra ikinci bölümü de tonluyor ve
  ikisi birleşip sayfayı tek bir gri alana çeviriyordu — başlığın nerede
  bittiği hiç okunmuyordu. Mürekkep zemin her durumda ayrışıyor, altında
  ne gelirse gelsin.

  Yalnız ilk bölüm: fotoğraflı ya da kendi zeminini taşıyan açılışların
  üstüne ikinci bir zemin koymak görünmeyen bir katman demek.
*/
main > div:first-child > .blk-statement {
  background: var(--site-ink);
  color: var(--site-surface);
  /*
    Pay ritim ölçüsünden BAĞIMSIZ. "Geniş" ritimde --space-lg 7rem'e kadar
    çıkıyor ve iki katı, tek kelimelik bir başlığın altında ekranın yarısını
    kaplayan bir bant demekti (ölçüldü: 440 piksel). Bant başlığı taşıyacak
    kadar; sayfanın kendisi hemen altında başlamalı.
  */
  padding-block: clamp(2.5rem, 1.5rem + 2vw, 4rem);
}
main > div:first-child > .blk-statement :is(.blk-statement-title, .blk-statement-text, p) {
  color: inherit;
}
main > div:first-child > .blk-statement .blk-eyebrow {
  color: color-mix(in oklab, var(--site-primary) 45%, #fff);
}

/* ── saydamlık yok ────────────────────────── */
/*
  Buzlu cam başka bir dilin tezi (bkz. cam). Burada fotoğrafın üstündeki
  yazı kendi DONUK zeminini taşıyor: bulanıklaştırılmış bir panelde
  arkadaki kare hâlâ görünüyor ve yazının kontrastı fotoğrafa göre
  değişiyor — bu dilin ölçülü duruşuyla bağdaşmıyor.

  Beyaz saç teli kenarlık da kalkıyor: kenarı çizen tek şey panelin
  kendi zemini.
*/
.blk-panel {
  background: var(--site-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
}

/* ── tek eksen ────────────────────────────── */
/*
  Bu dilde her şey aynı sol kenardan başlar. Başlığın çizgisi soldan
  çıkıyor ve imleç orada duruyor; ortalanmış bir başlık o çizginin
  ortasında asılı kalıyor, sayfa da iki eksenli görünüyordu.

  Ölçüldü: tek bir sayfada üç ayrı sol kenar vardı — sayfa başlığı 375'te
  (kendi dar rayında), gövde 118'de (dilin rayında), bölüm başlığı ise
  ortada. Aşağıdaki iki kural ikisini de tek eksene topluyor.

  Seçiciler katalogdakilerle AYNI yazıldı: özgüllükleri eşit ve bu dosya
  sonra yükleniyor, yani kazanan bu. Daha güçlü bir seçici yazmak, ileride
  katalogda kural değişince buranın sessizce ayrışması demekti.
*/

/* 1. Sayfa başlığı dilin rayında. Manşet bloğu kendi ölçüsünü 68rem'e
      çekiyor — okunur satır için doğru ama sayfa başlığı olarak
      kullanıldığında gövdeyle aynı kenardan başlaması gerekiyor. */
.blk-statement .blk-in { max-inline-size: var(--site-rail); }

/* 2. Ortalanan bölüm başlıkları sola. */
[data-block="page-list"] .blk-h2,
[data-block="showcase-pair"] .blk-h2,
[data-block="feature-rail"] .blk-h2,
[data-block="moments"] .blk-h2,
[data-block="metric-card"] .blk-h2,
[data-block="panel-cards"] .blk-h2,
[data-block="logo-strip"] .blk-h2 {
  text-align: start;
}
[data-block="showcase-pair"] .blk-lede,
[data-block="feature-rail"] .blk-lede,
[data-block="moments"] .blk-lede,
[data-block="metric-card"] .blk-lede,
[data-block="panel-cards"] .blk-lede {
  margin-inline: 0;
  text-align: start;
}
.blk-posts > .blk-in > :is(.blk-eyebrow, .blk-lede) { text-align: start; }
.blk-posts > .blk-in > .blk-lede { margin-inline: 0; }

/* ── ters bant ────────────────────────────── */
/*
  WhatsApp şeridi kendi zeminini mürekkepten alıyor.

  Katalogda zemini `--site-soft` — tonlu bölümlerin de zemini o, yani
  bu dilde şerit üstündeki ve altındaki bölümlerle aynı renge düşüyor ve
  hiç ayrışmıyordu. Ters bant üçüncü bir kademe: sayfa başlığı da aynı
  zemini taşıyor, yani iki uçta aynı ses.

  Başlığın çizgisi mürekkep zeminde görünmez; yüzeyin rengine dönüyor.
*/
.blk-wa {
  background: var(--site-ink);
  color: var(--site-surface);
}
.blk-wa :is(.blk-h2, .blk-lede, .blk-eyebrow, p) { color: inherit; }
.blk-wa .blk-h2 { border-block-start-color: var(--site-surface); }

/* ── randevu şeridi: kutu değil satır ─────── */
/*
  Katalogda şerit dolgulu ve çerçeveli bir kutu; kendi payı da olduğu için
  içindeki yazı rayın 28 piksel içinden başlıyordu. Sayfadaki her bölüm
  rayın kenarından başlarken tek bir bölümün içeri kaçması, ikinci bir sol
  kenar demek.

  Bu dilde kutu zaten yok: dolgu ve çerçeve kalkıyor, yerini üstten geçen
  çizgi alıyor — kartlarda olduğu gibi.
*/
.blk-booking {
  background: transparent;
  border: 0;
  border-block-start: 2px solid var(--site-ink);
  padding-inline: 0;
}
/* Ters bantta çizgi mürekkep zeminde görünmez. */
.blk-wa .blk-booking { border-block-start-color: var(--site-surface); }