/*
  YUMUŞAK — sıcak ve davetkâr.

  Tezi şu: keskin kenar mesafe koyar. Bir pastanenin sitesinde kart kutu
  değil, tepsi olmalı. Köşeler iri, gölge geniş ve yumuşak, zemin hafif
  tonlu — kimse kenarlık görmüyor ama her şey birbirinden ayrılıyor.

  Kafe, pastane, kuaför, veteriner, butik, çocukla ilgili her şey.

  Not: bu dil "clay" ailesinden ama neumorphism DEĞİL. Orada nesne ile zemin
  aynı renk olur ve ayrımı yalnız gölge yapar — kontrastı tanımı gereği
  düşüktür. Burada zemin gerçekten farklı; gölge sadece yumuşatıyor.
*/

/*
  Köşe kararı tek yerde. Bu dil kutularını 1.5rem, fotoğraflarını 1.15rem
  yuvarlıyor ama belirteçlere dokunmuyordu; belirteçten okuyan her şey
  (yeni bloklar dahil) katalog varsayılanı 0.5rem'de kalıyor ve yuvarlak
  bir sayfada üçüncü bir köşe ölçüsü çıkıyordu. (`:root:root` gerekçesi:
  tema belirteçleri sayfa içindeki <style>'da, bu dosyadan sonra.)
*/
:root:root {
  --site-radius: 1.15rem;
  --site-img-radius: 1.15rem;
}

/* Ölçüler tema ayarından bağımsız: "yumuşak" seçen kullanıcı köşe
   yuvarlaklığını da seçmiş oluyor, ikisini ayrı ayrı ayarlatmak bu dilin
   ne olduğunu belirsizleştirirdi. */
.blk-card,
.blk-stack-row,
.blk-note,
.blk[data-variant="cards"] .blk-prices > li,
.blk[data-variant="boxed"] .blk-cta-in {
  border: 0;
  border-radius: 1.5rem;
  background: var(--site-soft);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 28px rgb(0 0 0 / 0.07);
  padding: calc(var(--space-md) * 1.15);
}

.blk-card-link:hover {
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.05), 0 18px 40px rgb(0 0 0 / 0.11);
  transform: translateY(-2px);
}
.blk-card-link { transition: box-shadow 180ms ease, transform 180ms ease; }

/* Görsel de yuvarlanıyor; kart içindeki görselin köşesi karttan bir tık
   küçük olmalı, yoksa iç içe iki yay uyumsuz görünüyor. */
.blk-img, .blk-figure img { border-radius: 1.15rem; }
.blk-card .blk-img { border-radius: 1rem; }

/* Hap biçim bu dilin doğal hâli ve DefaultButtons olarak bildiriliyor;
   kullanıcının seçimi onu eziyor. */

/* ── bölümler ─────────────────────────────
   Zebra yerine yuvarlatılmış bant: kenardan kenara giden düz bir zemin bu
   dilde sert duruyor. */
[data-sections="zebra"] main > div:nth-child(even) > .blk:not(.blk-stats):not(.blk-wa):not(.blk-campaign) {
  background: transparent;
}
[data-sections="zebra"] main > div:nth-child(even) > .blk:not(.blk-stats):not(.blk-wa):not(.blk-campaign) > .blk-in {
  background: var(--site-soft);
  border-radius: 2rem;
  padding-block: var(--space-lg);
}

[data-sections="lined"] main > div + div > .blk { border-block-start: 0; }

/* Kendi zeminini taşıyan bölümler de yuvarlanıyor. */
.blk-stats > .blk-in,
.blk-wa > .blk-in,
.blk-campaign > .blk-in {
  border-radius: 2rem;
  padding-block: var(--space-md);
}
.blk-stats, .blk-wa { background: transparent; }
.blk-stats > .blk-in, .blk-wa > .blk-in { background: var(--site-soft); }
.blk-campaign { background: transparent; }
.blk-campaign > .blk-in { background: var(--site-primary); }

/* ── formlar ──────────────────────────────
   Alan da yumuşuyor ama sınırı kalıyor: kontrol sınırı 3:1 garantili tek
   çizgi, onu gölgeye çevirmek erişilebilirliği bozardı. */
.blk-form input, .blk-form textarea {
  border-radius: 1rem;
  padding: 0.7rem 0.9rem;
}

/* ── üst bar ──────────────────────────────
   Çizgi yerine hafif bir gölge: bu dilde ayrım keskin değil. */
.site-head { border-block-end: 0; box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05); }
.site-theme, .site-menu-toggle, .site-langs a { border-radius: 999px; }
.site-action { border-radius: 999px; padding-inline: 1.25rem; }

/* ── koyu mod ─────────────────────────────
   Siyah gölge koyu zeminde görünmez: parlaklığı sayfadan düşük olan bir
   gölge, sayfadan koyu bir yerde iş görmüyor. Ayrımı ince bir üst ışık
   çizgisi devralıyor — malzemenin kenarına düşen ışık. */
@media (prefers-color-scheme: dark) {
  html[data-scheme="auto"]:not([data-theme="light"]) .blk-card,
  html[data-scheme="auto"]:not([data-theme="light"]) .blk-note,
  html[data-scheme="auto"]:not([data-theme="light"]) .blk[data-variant="cards"] .blk-prices > li,
  html[data-scheme="auto"]:not([data-theme="light"]) .blk[data-variant="boxed"] .blk-cta-in {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 16px 36px rgb(0 0 0 / 0.5);
  }

  html[data-scheme="auto"]:not([data-theme="light"]) .site-head {
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.07);
  }
}

html[data-theme="dark"] .blk-card,
html[data-theme="dark"] .blk-note,
html[data-scheme="dark"] .blk-card,
html[data-scheme="dark"] .blk-note {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 16px 36px rgb(0 0 0 / 0.5);
}

html[data-theme="dark"] .site-head,
html[data-scheme="dark"] .site-head {
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.07);
}

/* Yüzen düğme bu dilin doğal hâli: biraz daha iri ve daha yumuşak gölge. */
.site-fab { inline-size: 3.75rem; block-size: 3.75rem;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.10), 0 16px 36px rgb(0 0 0 / 0.16); }

/* Fotoğrafın kendisi olan yüzeyler. Kart mı görsel mi ayrımı burada
   kayboluyor: sahne, vitrin kartı, ray kartı ve öne çıkan haber hem kart
   hem fotoğraf. Ölçüyü kartın köşesinden alıyorlar — yanlarında duran
   .blk-card ile aynı yayı çizmeleri gerekiyor. */
.blk-stage,
.blk-showcase-card,
.blk-rail-card,
.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: 1.5rem; }

/* ── gölgesiz kullanım ────────────────────
   Bu dilin tezinde gölge var ama tema ayarında "Gölge: yok" seçilmişse
   kullanıcının açık tercihi bu — sistem onu ezmemeli. Belirteci sıfırlamak
   yetmiyordu: yukarıdaki kurallar gölgeyi kendi elleriyle çiziyor, o yüzden
   burada tek tek düşürülüyor.

   Yuvarlak köşe ve tonlu zemin kalıyor: dilin geri kalanı gölgeye bağlı
   değil, kart gölgesiz de zemininden ayrılıyor. Üst bar ise ayrımını
   yalnız gölgeden alıyordu; ona ince çizgi geri veriliyor, yoksa bar
   sayfaya yapışık kalırdı. */
body[data-shadow="none"] :is(
  .blk-card, .blk-stack-row, .blk-note,
  .blk[data-variant="cards"] .blk-prices > li,
  .blk[data-variant="boxed"] .blk-cta-in,
  .blk-card-link:hover,
  .site-fab
) {
  box-shadow: none;
}

body[data-shadow="none"] .site-head {
  box-shadow: none;
  border-block-end: 1px solid var(--site-head-line);
}