/*
  KLASİK — ağır sans başlık, serif italik alt başlık, keskin köşe.

  Tezi tek cümlede: **başlığın altındaki cümle serif ve italik.** Kurumsal
  kliniklerin, hastanelerin ve büyük kurumların en çok kullandığı duruş bu
  ve katalogda karşılığı yoktu. İki aile birden çalışıyor ve ikisi ayrı iş
  yapıyor: kalın sans "ne" diyor, serif italik "nasıl" diyor. Aradaki
  karakter farkı, iki satırın iki ayrı ses olduğunu tek bakışta anlatıyor —
  aynı ailenin ince bir kesimiyle yapılamayan şey bu.

  Serif ailesi SİSTEM fontu (Georgia): font çifti başlık ve gövdeyi
  söylüyor, üçüncü bir rol yok ve üçüncü bir webfont indirmek bu tek satır
  için ödenecek bir bedel değil. Georgia her masaüstünde ve telefonda
  kurulu; olmadığı yerde `serif`e düşüyor ve italik yine italik kalıyor.

  `Radius`ı onurlandırmıyor: keskin köşe dilin kendisi. Kutunun kenarı
  yuvarlanınca yukarıdaki tez de yumuşuyor ve geriye `sade`nin bir kopyası
  kalıyor.

  Renk yok — bu dosyada tek bir sabit renk geçmiyor. Lacivert/camgöbeği
  bileşimi `lacivert` paletinde duruyor ve dil onunla da, `bordo` ile de,
  `orman` ile de çalışıyor.
*/

:root {
  --klasik-serif: Georgia, "Times New Roman", serif;

  /* Çizgi mürekkepten türüyor: koyu şemada da aynı payı koruyor ve palet
     değişince çizgi de onunla ısınıyor. */
  --klasik-line: color-mix(in oklab, var(--site-ink) 12%, transparent);
  --klasik-line-strong: color-mix(in oklab, var(--site-ink) 20%, transparent);

  /* Fotoğrafın üstündeki perdenin rengi. Açık şemada ters duruşun zemini,
     yani mürekkebin kendisi — bandın açık kalan yarısı sayfanın öbür koyu
     yüzeyleriyle aynı renk oluyor.

     Koyu şemada `--site-inverse-surface` AÇIK renge dönüyor (tersi
     sayfanın tersidir) ve perde bir anda beyaz bir sis oluyordu: ölçüldü,
     koyu temada açılış fotoğrafının üstündeki beyaz başlık okunmaz hâle
     geldi. Orada doğru cevap sayfanın kendi zemini — o zaten koyu.

     Perdenin her iki şemada da KOYU olması gerekiyor ve bu, katalogun
     "fotoğrafın üstündeki renk temadan bağımsızdır" istisnasının aynısı;
     tek farkı siyah yerine markanın koyusunu kullanması. */
  --klasik-scrim: var(--site-inverse-surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --klasik-scrim: var(--site-surface); }
}
:root[data-theme="dark"] { --klasik-scrim: var(--site-surface); }

/* ── 1. dilin tezi: serif italik ikinci satır ───────────────
   Tek kural bütün kataloğu kapsıyor çünkü giriş cümlesinin sınıfı her
   blokta aynı: `.blk-lede`. Açılışın alt başlığı, bölüm girişleri, kart
   ızgaralarının açıklaması — hepsi buradan geçiyor.

   Ölçü bir tık büyüyor: italik serif aynı puntoda sanstan küçük okunuyor
   (x-yüksekliği daha alçak) ve alt başlık başlığın altında kaybolmamalı. */
.blk-lede,
.blk-band-lede,
.blk-specs-intro,
.blk-slot-subject {
  font-family: var(--klasik-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.45;
}

/* Kart içindeki küçük açıklamalar serif OLMUYOR. Denendi: üç kartın
   üçünde de dört satırlık italik bir paragraf, sayfayı okunması yorucu bir
   yere çeviriyor. İtalik burada bir vurgu ve vurgu ancak seyrekken vurgu. */
.blk-card .blk-lede,
.blk-panel-card .blk-lede { font-family: inherit; font-style: normal; font-size: var(--step-0); }

/* ── 2. üst yazı: kısa bir çizgi, sonra kalın etiket ────────
   Katalogun varsayılanı BÜYÜK HARF + geniş aralık. Bu dilde üst yazı
   normal yazılıyor, kalın ve marka renginde — bölüm başlığının bir üst
   satırı gibi değil, onun etiketi gibi duruyor.

   Önündeki kısa çizgi dilin imzası ve sayfada on beş yerde görünüyor:
   bölüm başlıklarının hepsi aynı işaretle başlayınca sayfa tek bir ritim
   kazanıyor. `::before` ile basılıyor, ayrı bir öğe değil — ekran okuyucu
   onu etiketin parçası sanmasın diye. Rengi currentColor: üst yazı koyu
   bandın üstünde beyaza döndüğünde çizgi de onunla dönüyor. */
.blk-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: var(--step-0);
  margin-block-end: 0.35rem;
}
.blk-eyebrow::before {
  content: "";
  display: inline-block;
  inline-size: 1.6rem;
  block-size: 2px;
  margin-inline-end: 0.6rem;
  vertical-align: 0.25em;
  background: currentColor;
}
/* Ortalı bölümlerde çizgi etiketi merkezden kaydırıyor: iki kelimelik bir
   etiketin solunda 2.2rem, sağında hiçbir şey yok ve göz kaymayı görüyor.
   Orada işaret hiç basılmıyor — ortalı bir etiket zaten kendi ekseninde. */
.blk-classic[data-variant="center"] .blk-eyebrow::before,
[data-block="feature-grid"] .blk-eyebrow::before,
[data-block="metric-card"] .blk-eyebrow::before,
[data-block="panel-cards"] .blk-eyebrow::before { display: none; }

/*
  KÖŞE KARARI TEK YERDE.

  Aşağıdaki sınıf listesi bir BEYAZ LİSTE ve beyaz liste eksik kalıyor:
  kataloga yeni bir blok girdiğinde onun köşesi listede olmadığı için
  varsayılan yarıçapta kalıyor ve sayfada köşeli kutuların arasında tek
  bir yuvarlak kutu beliriyordu. Bir site ya köşelidir ya yuvarlak.

  Belirtecin kendisini burada tanımlamak bu sızıntıyı kapatıyor: listede
  olsun olmasın, yarıçapı belirteçten okuyan her şey dilin kararına uyuyor.

  Seçici `:root:root`, tek `:root` DEĞİL: tema belirteçleri sayfanın
  içindeki <style> bloğunda, yani bu dosyadan SONRA yayımlanıyor ve eşit
  özgüllükte sonraki kazanıyor.
*/
:root:root {
  --site-radius: 0;
}

/* ── 3. keskin köşe ─────────────────────────────────────────
   `Radius` bu dilde sorulmuyor (bkz. ThemeSystems), yani `--site-radius`
   varsayılanında kalıyor ve kutuları burada sıfırlıyoruz. Görselin köşesi
   ayrı bir ayar ve o SORULUYOR: kare fotoğraf dilin doğal tercihi ama
   yuvarlatmak isteyen sayfayı bozmuyor. */
.blk-card,
.blk-note,
.blk-panel,
.blk-panel-card,
.blk-jump,
.blk-loc-card,
.blk-collage-card,
.blk-roster-frame,
.blk-press-featured,
.blk-press[data-variant="cards"] .blk-press-item,
.blk-svc,
.blk-btn,
.blk-form input:not([type="checkbox"], [type="radio"]),
.blk-form select,
.blk-form textarea {
  border-radius: 0;
}

/* ── 4. düğme: küçük, büyük harfli, aralıklı ────────────────
   Referans ölçüsü: 12 piksel, 700 ağırlık, 0.08em aralık, geniş yatay
   dolgu. Düğmenin RENGİ buraya yazılmıyor — o düğme kataloğundan geliyor
   (bkz. ButtonSystems); burada yalnız harfin duruşu var. */
.blk-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--2);
  font-weight: 700;
  padding: 0.95em 1.9em;
}

/* ── 5. kart: dolgu değil, zeminden bir ton açık ────────────
   Bu dilin kartı gri bir bandın üstündeki BEYAZ bir dikdörtgen. Çerçevesi
   ve gölgesi yok; onu kart yapan şey zeminle arasındaki ton farkı. Beyaz
   bir bölümde kart ile zemin aynı renge düşüyor ve o zaman ayıran şey
   yalnız boşluk oluyor — istenen de bu, iki kutu değil tek yüzey. */
.blk-card {
  background: var(--card-surface, var(--site-surface));
  border: 1px solid var(--site-line);
  box-shadow: none;
}

/* ── 6. tam kanal bandın perdesi: siyah değil, mürekkep ─────
   Katalogun perdesi saf siyah ve bu dilde yanlış: bandın açık kalan yarısı
   sayfanın öbür koyu yüzeyleriyle (üst bar, alt bilgi, ters duruşlu CTA)
   aynı renk olmalı. `--site-inverse-surface` zaten mürekkebin kendisi,
   yani ters duruşun zemini — perde ondan türeyince bant o ailenin parçası
   oluyor.

   Opaklık artıyor (0.58 → 0.72 ve gradyanda 0.92): renkli bir perde
   siyahtan daha az örtüyor, fotoğrafın açık bölgelerinde beyaz başlık
   ölçülebilir biçimde zayıflıyordu. */
.blk-band-veil {
  background: color-mix(in oklab, var(--klasik-scrim) 72%, transparent);
}
@container (min-width: 52rem) {
  .blk-band[data-align="start"] .blk-band-veil {
    background: linear-gradient(to right,
      color-mix(in oklab, var(--klasik-scrim) 94%, transparent) 0 40%,
      color-mix(in oklab, var(--klasik-scrim) 0%, transparent) 86%);
  }
  .blk-band[data-align="end"] .blk-band-veil {
    background: linear-gradient(to left,
      color-mix(in oklab, var(--klasik-scrim) 94%, transparent) 0 40%,
      color-mix(in oklab, var(--klasik-scrim) 0%, transparent) 86%);
  }
}
/* Fotoğrafsız bant da aynı aileden: katalogda `--site-soft` (açık gri)
   duruyor, bu dilde koyu. Bandın işi sayfayı bölmek ve açık gri bir bant
   iki beyaz bölümün arasında bölmüyor. */
.blk-band:not(:has(.blk-band-img)) {
  background: var(--site-inverse-surface);
  color: var(--site-inverse-ink);
}
/* Bandın başlığı sayfanın en iri yazısı: referansta bölüm başlıklarının
   iki katı. Rayda kaldığı için taşma riski yok. */
.blk-band-title { font-size: var(--step-3); line-height: 1.05; }

/* ── 7. üst bar: ince çizgi ve altı çizili sayfa ────────────
   Bandın kendi zemini `headerStyle`ten geliyor; buraya yalnız alt çizgi
   ve "hangi sayfadayız" işareti yazılıyor.

   İşaret bandın altına taşan 3 piksellik bir vurgu şeridi. `aria-current`
   sunucudan geliyor (bkz. Site.cshtml) — CSS'in kendi başına bilebileceği
   bir şey değil. */
.site-head { border-block-end: 1px solid var(--site-head-line); }

.site-nav a[aria-current="page"] { position: relative; font-weight: 700; }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.75rem;
  block-size: 3px;
  background: var(--site-head-accent);
}
/* Dar ekranda menü bir panel: alt çizgi orada bandın dışına taşıyor ve
   satırın altında kopuk bir çubuk olarak duruyor. Panelde işaret sola
   geçiyor. */
@container (max-width: 47.99rem) {
  .site-nav a[aria-current="page"]::after {
    inset-block: 0;
    inset-inline: -0.75rem auto;
    inline-size: 3px;
    block-size: auto;
  }
}

/* ── 8. bölüm başlığı: sıkı ve iri ──────────────────────────
   Referansın bölüm başlıkları 800 ağırlıkta ve satır arası 1.15. Ağırlık
   temadan geliyor (`Heading: tight` → 700; `kurumsal` çifti 900'e kadar
   gerçek kesim taşıyor), satır arası burada. */
.blk-h2,
.blk-title,
.blk-stage-title,
.blk-statement-title { line-height: 1.14; }

/* ── 9. form: çizgi kutu, dolgu yok ─────────────────────────
   Referansın form alanları beyaz zeminde ince çerçeveli, gri bir panelin
   içinde. Panel bloğun kendi işi; alanın duruşu burada. */
.blk-form input:not([type="checkbox"], [type="radio"]),
.blk-form select,
.blk-form textarea {
  border: 1px solid var(--klasik-line-strong);
  background: var(--site-surface);
}
.blk-form label { font-weight: 700; }

/* ── 10. alt bilgi: sütun başlıkları kalın, çizgi ince ──────
   Alt bilginin zemini `footerStyle`ten (ters duruş) geliyor. Burada yalnız
   sütun başlığının ağırlığı var: referansta "Services" / "Pricing & Fees"
   bağlantılardan bir tık kalın ve o fark sütunu okunur yapan tek şey. */
.site-foot-col-head { font-weight: 700; }

/* Fotoğrafsız bant bu dilde koyu (bkz. §6) ve içindeki ikincil düğme
   sayfanın açık zeminine göre hesaplanmış takımı okuyor. blocks.css beyaz
   takımı yalnız FOTOĞRAFLI banda veriyor — orada perde her temada koyu.
   Fotoğrafsız hâli bu dile özgü, kuralı da burada. */
.blk-band:not(:has(.blk-band-img)) .blk-btn-quiet {
  --btn-quiet-fill: transparent;
  --btn-quiet-ink: var(--site-inverse-ink);
  --btn-quiet-border: 1px solid color-mix(in oklab, var(--site-inverse-ink) 60%, transparent);
  /* Alt kenar border'ın kendisi; `0` düğmenin dibini siliyor (blocks.css'te
     aynı notun uzunu var). */
  --btn-quiet-edge: 1px solid color-mix(in oklab, var(--site-inverse-ink) 60%, transparent);
  --btn-quiet-fill-hover: color-mix(in oklab, var(--site-inverse-ink) 14%, transparent);
}
.blk-band:not(:has(.blk-band-img)) .blk-eyebrow { color: var(--site-inverse-ink); opacity: 0.85; }

/* ── randevu şeridi: tek satır, beyaz kart ──────────────────
   Katalogdaki şerit üç satır varsayıyor: üst yazı, başlık, açıklama. Bu
   dilde şerit açılışın altına binen BEYAZ bir kart ve tek satır — üç
   satırlık bir kutu, açılışın alt kenarını yiyor.

   Üst yazı yazılmadığında başlık birinci satıra çıkıyor. Katalogun kuralı
   başlığı koşulsuz ikinci satıra koyuyor ve maddeler bütün satırları
   kapsadığı için birinci satır boş kalıp şeridi ikiye bölüyordu. */
@container (min-width: 44rem) {
  .blk-book[data-variant="bar"] .blk-booking:not(:has(> .blk-eyebrow)) > .blk-h2 {
    grid-row: 1;
  }
  .blk-book[data-variant="bar"] .blk-booking:not(:has(> .blk-eyebrow)) > .blk-booking-text {
    grid-row: 2;
  }
}
/* Kart beyaz: koyu bir açılışın altına binen tonlu bir kutu, açılışın
   kendi rengiyle karışıyor ve "binmiş" değil "taşmış" görünüyor. */
.blk-booking {
  background: var(--site-surface);
  border-color: var(--site-line);
  border-radius: 0;
}

/* Bandın üst yazısı marka renginde. Katalogda fotoğraflı bandın üst yazısı
   "beyazın soluğu" (color: inherit + opacity) — bu dilde üst yazı her
   yerde marka rengi ve bandın içinde de öyle olmalı; koyu perdenin üstünde
   camgöbeği okunuyor, ölçüldü. */
.blk-band:has(.blk-band-img) .blk-eyebrow { color: var(--site-primary); opacity: 1; }

/* Sekmenin paneli: kutu değil, sayfanın kendisi. Katalogdaki panel bir
   ÖLÇÜM kartı — ortalı, çerçeveli, tonlu zeminli, rakam için kurulmuş.
   Bu dilde sekmenin taşıdığı şey bir rakam değil bir konu: başlık ve iki
   paragraf. Ortalı bir paragraf üç satırdan sonra okunmuyor ve çerçeve,
   panelin kendisi zaten bir kutuyken ikinci bir kutu oluyor. */
.blk-moments-metric {
  padding: 0;
  background: none;
  border: 0;
  text-align: start;
}
.blk-moments-value {
  font-size: var(--step-2);
  font-weight: var(--site-h-weight);
  letter-spacing: var(--site-h-tracking);
  color: var(--site-ink);
  line-height: 1.15;
}
.blk-moments-note { color: var(--site-muted); }

/* Künyenin "zeminsiz" düzeninde başlık kolonu geniş. Katalogun ölçüsü
   1 / 2.2 ve orada soldaki şey tek kelimelik bir ETİKET ("Künye"); bu
   dilde soldaki şey bölümün kendi başlığı ve dört satıra kırılıyordu. */
@container (min-width: 48rem) {
  .blk-specs[data-variant="plain"] .blk-specs-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}
.blk-specs[data-variant="plain"] .blk-specs-label { font-size: var(--step-2); line-height: 1.15; }
.blk-specs-intro { opacity: 1; color: var(--site-muted); }

/* Halka biraz daha büyük: 80 pikselde "%97" halkanın iki yanından taşıyor. */
.blk-half-ring { --size: 5.75rem; }
.blk-half-ring-value { font-size: var(--step-1); }

/* ── bandın alıntısı: serif italik, üstünde tırnak ──────────
   Katalogda alıntı başlık ailesiyle ve düz çiziliyor — bir manşet gibi.
   Bu dilde alıntı bir SES: serif italik, ve üstünde onu alıntı yapan bir
   işaret var. İşaret bir görsel değil, `::before`la basılan bir karakter;
   ayrı bir dosya, ayrı bir istek demezdi ama ayrı bir öğe demek olurdu ve
   ekran okuyucu onu alıntının parçası sanardı (aria-hidden gerekirdi). */
.blk-band-quote { position: relative; }
.blk-band-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--klasik-serif);
  font-size: 4rem;
  line-height: 0.7;
  margin-block-end: 0.35rem;
  opacity: 0.85;
}
.blk-band-quote p {
  font-family: var(--klasik-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}
/* Atıf iki satır: ad kalın, altında rol. Katalogda tek satır ve sönük;
   referansta ad okunuyor, rol fısıldıyor. */
.blk-band-author { opacity: 1; font-weight: 700; font-size: var(--step--1); }

/* Randevu şeridi açılışın altına GERÇEKTEN biniyor. Katalogun kuralı
   bölümü `--space-lg` kadar yukarı çekiyor ve bu, bölümün kendi üst
   dolgusunu iptal etmekten ibaret: kart açılışın alt kenarına tam
   yapışıyor, üstüne binmiyordu (ölçüldü, binme = 0 piksel). Bu dilde
   binme bilerek bir tasarım kararı, o yüzden fazladan 2.5rem çekiliyor —
   kartın üst şeridi koyu açılışın içinde kalıyor.

   Dar ölçüde katalogun kuralı zaten devrede değil (44rem eşiği) ve bu da
   onun altında kalıyor: alt alta inen bir sayfada yukarı çekilen bir kart,
   açılışın yazısının üstüne oturur. */
@media (min-width: 44rem) {
  main > div:has(> .blk-classic) + div > .blk-book[data-variant="bar"] {
    margin-block-start: calc(-1 * var(--space-lg) - 2.5rem);
  }
}