/**
 * Frontend stilleri.
 *
 * Yalnızca token kullanır — ham renk veya ham ölçü yoktur. Bir token
 * değiştiğinde bu dosyadaki her kural onunla birlikte değişir.
 *
 * Kapsam dar tutuldu: eklenti global bir üründür ve kurulduğu temanın
 * tipografisini/ızgarasını ele geçirmemeli. Yalnızca kendi ürettiği
 * bölümleri ve sticky navigasyonu biçimlendirir.
 */

/* ── Sticky bölüm navigasyonu ── */
.hl-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--hl-color-surface);
	border-block-end: var(--hl-line-hair) solid var(--hl-color-border);
	margin-block-end: var(--hl-space-md);
}

.hl-nav__list {
	display: flex;
	gap: var(--hl-space-xs);
	overflow-x: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	scrollbar-width: none;
}

.hl-nav__list::-webkit-scrollbar {
	display: none;
}

.hl-nav__item {
	margin: 0;
	flex: 0 0 auto;
}

.hl-nav__link {
	display: block;
	padding: var(--hl-space-2xs) var(--hl-space-xs);
	font-size: var(--hl-text-sm);
	line-height: var(--hl-leading-sm);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-ink-muted);
	text-decoration: none;
	white-space: nowrap;
	border-block-end: var(--hl-line-thick) solid transparent;
}

.hl-nav__link:hover {
	color: var(--hl-color-primary);
}

.hl-nav__link.is-active {
	color: var(--hl-color-primary);
	border-block-end-color: var(--hl-color-primary);
}

/* ── Menü hedefleri ──
   Sticky menü bir anchor'a atlarken tarayıcı hedefi pencerenin TEPESİNE
   hizalıyor; menü orada durduğu için hedefin ilk satırı altında kalıyor.
   Menüye girebilen HER hedef bu payı taşımak zorunda — biri atlanırsa hata
   yalnızca o bölümde görünür ve sebebi anlaşılmaz.

   `.hl-anchor` düz H2'lere `HL_Nav::ensure_heading_anchor()` tarafından
   ekleniyor; diğerleri kendi bloklarının başlıkları. */
.hl-anchor,
.hl-sechead[id],
.hl-linked__title,
.hl-faq__title {
	scroll-margin-top: var(--hl-layout-nav-offset);
}

/* ── Bölümler ── */
.hl-section {
	/* Sticky başlık, hedefe atlanınca bölümün üstünü örtmesin. */
	scroll-margin-top: var(--hl-layout-nav-offset);
	padding-block: var(--hl-space-md);
	border-block-start: var(--hl-line-hair) solid var(--hl-color-border);
}

.hl-section:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.hl-section__title {
	font-size: var(--hl-text-xl);
	line-height: var(--hl-leading-xl);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-ink);
	margin: 0 0 var(--hl-space-2xs);
}

.hl-section__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink);
}

.hl-section__body > :first-child {
	margin-block-start: 0;
}

.hl-section__body > :last-child {
	margin-block-end: 0;
}

/**
 * Tanımdan kaldırılmış bir bölüm.
 * İçerik GİZLENMEZ — sessiz içerik kaybı en kötü sonuçtur. Görsel olarak
 * işaretlenir ki yöneten kişi durumu fark etsin.
 */
.hl-section--orphan {
	border-inline-start: var(--hl-line-thick) solid var(--hl-color-border);
	padding-inline-start: var(--hl-space-xs);
}

/* ── İlişki listeleri ── */
.hl-related {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hl-related__item {
	margin: 0;
}

.hl-related__link {
	display: inline-block;
	padding: var(--hl-space-3xs) var(--hl-space-xs);
	font-size: var(--hl-text-sm);
	line-height: var(--hl-leading-sm);
	color: var(--hl-color-primary);
	background: var(--hl-color-primary-tint);
	border-radius: var(--hl-radius-pill);
	text-decoration: none;
}

.hl-related__link:hover {
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}

/* ══════════════════════════════════════════════════════════════════
 * TEMA SIZINTISI KALKANI
 *
 * Ölçülmüş çakışma — bu sitedeki tema kuralı:
 *     .article-body ul { list-style: disc; padding-left: 45px; margin: 12px 0 18px }
 * Özgüllüğü 0-1-1. İlk denemede kalkanı `.hl-hub ul` ile yazmıştım; o da
 * 0-1-1 ve eşitlikte SONRA yüklenen kazanıyor — tema sonra yükleniyor, bizim
 * kural eziliyordu. Sonuç: çiplerin yanında madde işareti ve kart ızgarasında
 * 45px sol girinti (filtre paneliyle hizasızlık).
 *
 * Çözüm: kendi SINIFLARIMIZI hedeflemek. `:is(.hl-hub, .hl-related-info) .hl-chips` = 0-2-0 ve
 * 0-1-1'i yükleme sırasından bağımsız yener. Element seçici kullanmıyoruz.
 *
 * `!important` yok — tema bilerek override edebilsin, kazara değil.
 * ══════════════════════════════════════════════════════════════════ */

:is(.hl-hub, .hl-related-info) .hl-chips,
.hl-hub .hl-az,
:is(.hl-hub, .hl-related-info) .hl-grid,
.hl-hub .hl-pagination,
.hl-hub .hl-related,
.hl-single .hl-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}

:is(.hl-hub, .hl-related-info) .hl-chips > li,
.hl-hub .hl-az > li,
:is(.hl-hub, .hl-related-info) .hl-grid > li,
.hl-hub .hl-related > li,
.hl-linked .hl-linked__grid > li,
.hl-single .hl-nav__list > li {
	list-style: none;
	list-style-type: none;
	margin: 0;
}

/* İç boşluğu sıfırlamak yalnızca kendi kutusu olmayan listelerde doğru.
   `.hl-grid > li` ve `.hl-linked__grid > li` KARTIN KENDİSİDİR; iç boşluğunu
   kartın kendi kuralı verir. Bu seçici 0-2-1, kartınki 0-2-0 — buraya dahil
   edilen bir kart listesi padding'ini SESSİZCE kaybeder. İki kez oldu: önce
   hub kartlarında, sonra bağlı içerik kartlarında. İkisinde de kart kenardan
   kenara dolu göründü ve sebep tema sanıldı. Yeni bir kart listesi eklerken
   YUKARIDAKİ gruba yaz, buraya DEĞİL. */
:is(.hl-hub, .hl-related-info) .hl-chips > li,
.hl-hub .hl-az > li,
.hl-hub .hl-related > li,
.hl-single .hl-nav__list > li {
	padding: 0;
}

:is(.hl-hub, .hl-related-info) .hl-chips > li::marker,
.hl-hub .hl-az > li::marker,
:is(.hl-hub, .hl-related-info) .hl-grid > li::marker,
.hl-hub .hl-related > li::marker,
.hl-linked .hl-linked__grid > li::marker,
.hl-single .hl-nav__list > li::marker {
	content: "";
}

:is(.hl-hub, .hl-related-info) .hl-chips > li::before,
.hl-hub .hl-az > li::before,
:is(.hl-hub, .hl-related-info) .hl-grid > li::before,
.hl-hub .hl-related > li::before,
.hl-linked .hl-linked__grid > li::before,
.hl-single .hl-nav__list > li::before {
	content: none;
	display: none;
}

/* Bağlantı renkleri: bileşen kendi rengini belirler, temanın genel `a` rengi değil. */
/* Çip ve A–Z metinleri ink-muted (#64748B) — tasarımda gövde metniyle aynı ton,
   aktif olan beyaz. Öncesinde ink (#001727) kullanıyordum, fazla sertti. */
.hl-hub a.hl-chip,
.hl-hub a.hl-az__key,
.hl-hub a.hl-page {
	color: var(--hl-color-ink-muted);
}

.hl-hub a.hl-chip[aria-current="true"],
.hl-hub a.hl-az__key[aria-current="true"],
.hl-hub a.hl-page.is-current {
	color: var(--hl-color-ink-on-primary);
}

.hl-hub a.hl-chip:hover,
.hl-hub a.hl-az__key:hover,
.hl-hub a.hl-page:hover {
	color: var(--hl-color-primary);
}

/* Başlık hover'ı `primary-strong` (#057DAB) idi; o renk cam göbeği tarafında
   ve yanındaki parlak maviyle birlikte yeşilimsi okunuyordu. Marka paletindeki
   lacivert (`ink`) hem net bir hover hem de tartışmasız Liv rengi. */
:is(.hl-hub, .hl-related-info) .hl-card__title a { color: var(--hl-color-primary); }
/* HOVER'DA RENK DEĞİŞMİYOR. Başlık markanın mavisi; üzerine gelince koyu
   griye dönmesi kartı "pasifleşmiş" gibi gösteriyordu. Geri bildirimi kartın
   kendi kenarlık ve gölge değişimi veriyor, rengin bozulmasına gerek yok. */
:is(.hl-hub, .hl-related-info) .hl-card__title a:hover,
:is(.hl-hub, .hl-related-info) .hl-card:hover .hl-card__title a { color: var(--hl-color-primary); }
/* Figma: düğme metni primary (#1C92E9), koyu tonu değil. Bu seçici 0-2-1
   olduğu için bileşen kuralını (0-2-0) eziyor — değeri burada tutuyoruz. */
:is(.hl-hub, .hl-related-info) a.hl-linkbtn { color: var(--hl-color-primary); }
:is(.hl-hub, .hl-related-info) a.hl-linkbtn:hover { color: var(--hl-color-ink-on-primary); }

/* Panel ve ızgara AYNI genişlikte — ikisi de kapsayıcının tam eni. */
.hl-hub .hl-filter,
.hl-hub .hl-hub__results,
:is(.hl-hub, .hl-related-info) .hl-grid {
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
 * Hub / filtre paneli + sonuç kartları
 * Kaynak: tasarım ekran görüntüleri + Figma ölçüleri.
 * Yalnızca token — ham renk/ölçü yok.
 * ══════════════════════════════════════════════════════════════════ */
.hl-hub {
	font-family: var(--hl-font-family);
	color: var(--hl-color-ink);
}

/* ── Panel kabı ── */
.hl-hub .hl-filter {
	margin-block-end: var(--hl-space-lg);
}
.hl-hub .hl-filter__card {
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-lg);
	box-shadow: var(--hl-shadow-card);
	padding: var(--hl-space-panel);
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-panel-gap);
}

/* ── Satır 1 ── */
.hl-hub .hl-filter__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-space-xs);
	align-items: stretch;
}

/* Arama: hap biçimi, solda ikon, sağda buton ALANIN İÇİNDE */
.hl-hub .hl-search {
	flex: 1 1 var(--hl-layout-card-min);
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--hl-space-2xs);
	block-size: var(--hl-layout-field-h);
	padding-inline: var(--hl-space-sm);
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-pill);
}
.hl-hub .hl-search:focus-within {
	border-color: var(--hl-color-primary);
}
.hl-hub .hl-search__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--hl-color-label);
}
.hl-hub .hl-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink);
}
.hl-hub .hl-search__input::placeholder {
	color: var(--hl-color-label);
}
.hl-hub .hl-search__btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--hl-text-base);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-ink-on-primary);
	background: var(--hl-color-primary);
	border-radius: var(--hl-radius-pill);
	padding-inline: var(--hl-space-md);
	padding-block: var(--hl-space-2xs);
}
.hl-hub .hl-search__btn:hover {
	background: var(--hl-color-primary-strong);
}

/* Etiketli kutu: üstte küçük büyük-harf etiket, altında değer */
/* KONTROLLER TEK YARIÇAPTA. Arama kutusu ve çipler tam yuvarlakken
   uzmanlık seçicisi 12px, A–Z tuşları ve sayfa numaraları 8px idi; aynı
   panelde üç ayrı köşe ölçüsü vardı. Kartlar kendi yarıçapını koruyor —
   onlar kontrol değil ve Figma'ya göre ölçülüp doğrulandı. */
.hl-hub .hl-field {
	flex: 0 1 auto;
	min-inline-size: var(--hl-layout-card-min);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--hl-space-3xs);
	block-size: var(--hl-layout-field-h);
	padding-inline: var(--hl-space-sm);
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-pill);
}
.hl-hub .hl-field:focus-within {
	border-color: var(--hl-color-primary);
}
.hl-hub .hl-field__label {
	font-size: var(--hl-text-2xs);
	line-height: var(--hl-leading-2xs);
	font-weight: var(--hl-font-weight-bold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-label);
}
.hl-hub .hl-field__select {
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--hl-text-base);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-ink);
	padding: 0;
	inline-size: 100%;
}

/* ── Grup etiketleri (CONTENT TYPE / BROWSE A–Z) ── */
.hl-hub .hl-filter__group {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-xs);
}
.hl-hub .hl-filter__label {
	font-size: var(--hl-text-2xs);
	line-height: var(--hl-leading-2xs);
	font-weight: var(--hl-font-weight-bold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-label);
}

/* ── Çipler: OUTLINE, aktif olan dolu ── */
:is(.hl-hub, .hl-related-info) .hl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-space-chip-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
:is(.hl-hub, .hl-related-info) .hl-chips li { margin: 0; }
.hl-hub .hl-chip {
	display: inline-flex;
	align-items: center;
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink-muted);
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-pill);
	padding: var(--hl-space-2xs) var(--hl-space-sm);
	text-decoration: none;
	white-space: nowrap;
}
.hl-hub .hl-chip:hover {
	border-color: var(--hl-color-primary);
	color: var(--hl-color-primary);
}
.hl-hub .hl-chip[aria-current="true"] {
	background: var(--hl-color-primary);
	border-color: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
	font-weight: var(--hl-font-weight-bold);
}
.hl-hub .hl-divider {
	block-size: var(--hl-line-hair);
	background: var(--hl-color-divider);
	border: 0;
	margin: 0;
}

/* ── A–Z: outline kare tuşlar ── */
.hl-hub .hl-az {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-space-key-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.hl-hub .hl-az li { margin: 0; }
.hl-hub .hl-az__key {
	display: inline-grid;
	place-items: center;
	/* Figma: A–Z / Keys 1352x38, gap 6, 26 tuş → tek satır.
	   Kare (44x44) yapınca 27. tuşla birlikte ikinci satıra taşıyordu. */
	min-inline-size: var(--hl-layout-key-size);
	block-size: var(--hl-layout-key-h);
	padding-inline: var(--hl-space-3xs);
	font-size: var(--hl-text-sm);
	font-weight: var(--hl-font-weight-regular);
	color: var(--hl-color-ink-muted);
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-pill);
	text-decoration: none;
}
.hl-hub .hl-az__key:hover {
	border-color: var(--hl-color-primary);
	color: var(--hl-color-primary);
}
.hl-hub .hl-az__key[aria-current="true"] {
	background: var(--hl-color-primary);
	border-color: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}

/* Karşılığı olmayan harf: tıklanabilir değil. Görselde hepsi aynı görünüyor
   ama boş sonuca yollamamak için soluklaştırıyoruz. */
.hl-hub .hl-az__key--off {
	color: var(--hl-color-label);
	opacity: 0.55;
	cursor: default;
}
.hl-hub .hl-filter__clear {
	margin: 0;
	font-size: var(--hl-text-sm);
}
.hl-hub .hl-filter__clear a { color: var(--hl-color-primary-strong); }

/* ── Sonuç başlığı ── */
.hl-hub .hl-results__head {
	margin-block-end: var(--hl-space-md);
}
.hl-hub .hl-results__title {
	font-size: var(--hl-text-2xl);
	line-height: var(--hl-leading-2xl);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	margin: 0;
}
.hl-hub .hl-results__count {
	font-size: var(--hl-text-sm);
	line-height: var(--hl-leading-sm);
	color: var(--hl-color-ink-muted);
	margin: var(--hl-space-3xs) 0 0;
}

/* ── Kart ızgarası ── */
:is(.hl-hub, .hl-related-info) .hl-grid {
	display: grid;
	/* Figma: 1400 kapta 450px kartlar → 3 kolon (450*3 + 25*2 = 1400).
	   auto-fill + 320px minimum 4 kolon üretiyordu.
	   `min(...,100%)` şart: çıplak minmax(400px,1fr) dar ekranda kolonu
	   400px'te tutuyor ve kart viewport'tan taşıyordu. */
	grid-template-columns: repeat(auto-fill, minmax(min(var(--hl-layout-card-min), 100%), 1fr));
	gap: var(--hl-space-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* ══════════════════════════════════════════════════════════════════
 * TEMA ÖĞE SEÇİCİLERİNE KARŞI SIFIRLAMA
 *
 * Ölçülen tema kuralları (özgüllük 0-1-1):
 *   .article-body h3 { margin: 24px 0 16px }
 *   .article-body p  { margin-bottom: 18px }
 * Bizim sınıflarımız 0-1-0 olduğu için kaybediyordu. Kapsayıcıyla
 * niteleyip (0-2-0) sıfırlıyoruz; gerçek boşluğu bileşen kuralları verir.
 *
 * Bu blok BİLEŞEN KURALLARINDAN ÖNCE durmalı. Sonra dursaydı aynı
 * özgüllükte olduğu için kartın kendi margin'lerini de sıfırlardı —
 * daha önce tam olarak bu oldu ve başlık/açıklama boşlukları kayboldu.
 * ══════════════════════════════════════════════════════════════════ */
:is(.hl-hub, .hl-related-info) .hl-card > * { margin-block: 0; }

/* ══ Kart ══
 * Figma `library-card` (450x213) birebir ölçüldü:
 *   kutu       radius 12.85 · gölge 0 0 29.75 rgba(0,0,0,.07) · KENARLIK YOK
 *   iç boşluk  24 üst/alt · 34 sol/sağ
 *   rozet      30 yükseklik · pad 6/16 · 10/18 w400 · primary %10 zemin
 *   bölüm adı  rozetten 8 sonra · 12/18 w400 · ink-muted
 *   başlık     rozet satırından 20 sonra · 17.85/29.98 w700 · primary
 *   açıklama   başlıktan 12 sonra · 14.99/22.49 w400 · ink-muted · 311 geniş
 *   görsel     sağ üst · 98 yükseklik · %37 opaklık · taşan kısım kırpılır
 *   düğme      sağ alt (17/21) · 27 yükseklik · 9.64/14.47 w700
 */
:is(.hl-hub, .hl-related-info) .hl-card {
	position: relative;
	display: block;
	box-sizing: border-box;
	min-block-size: var(--hl-layout-card-h);
	background: var(--hl-color-surface);
	/* Tasarımda kenarlık YOK — gölgeyle birlikte verilince kutu sertleşiyordu. */
	border: 0;
	border-radius: var(--hl-radius-card);
	box-shadow: var(--hl-shadow-card);
	padding: var(--hl-space-card-pad) var(--hl-layout-card-pad-x);
	margin: 0;
	/* Figma: clipsContent — dekoratif görsel sağ kenardan taşar ve kırpılır. */
	overflow: hidden;
}
:is(.hl-hub, .hl-related-info) .hl-card:hover { box-shadow: var(--hl-shadow-lift); }

/* Üst satır: rozet + bölüm adı yan yana, ortak taban çizgisinde */
:is(.hl-hub, .hl-related-info) .hl-card__meta {
	display: flex;
	align-items: center;
	gap: var(--hl-space-2xs);
	min-block-size: var(--hl-layout-badge-h);
	/* dekoratif görselin altına girmesin */
	padding-inline-end: var(--hl-layout-card-art-reserve);
}
:is(.hl-hub, .hl-related-info) .hl-card__badge {
	display: inline-flex;
	align-items: center;
	block-size: var(--hl-layout-badge-h);
	padding: 0 var(--hl-layout-badge-pad-x);
	font-size: var(--hl-text-badge);
	line-height: var(--hl-leading-badge);
	/* Figma: 400. Daha önce bold'du ve rozet tasarımdakinden ağır görünüyordu. */
	font-weight: var(--hl-font-weight-regular);
	color: var(--hl-color-primary);
	background: var(--hl-color-primary-tint);
	border-radius: var(--hl-radius-pill);
	white-space: nowrap;
}
:is(.hl-hub, .hl-related-info) .hl-card__ctx {
	font-size: var(--hl-text-xs);
	line-height: var(--hl-leading-xs);
	color: var(--hl-color-ink-muted);
}

/* Sağ üstteki dekoratif uzmanlık görseli. İçerik taşımaz.
   Tasarımda 26 uzmanlığın genişliği farklı, yüksekliği hep 98 — bu yüzden
   kutu sağ-üste dayalı ve görsel yükseklikten boyutlanıyor. */
:is(.hl-hub, .hl-related-info) .hl-card__art {
	position: absolute;
	inset-block-start: var(--hl-layout-card-art-top);
	inset-inline-end: var(--hl-layout-card-art-right);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	inline-size: var(--hl-layout-card-art-w);
	block-size: var(--hl-layout-card-art-h);
	color: var(--hl-color-primary);
	opacity: var(--hl-layout-art-opacity);
	pointer-events: none;
}
:is(.hl-hub, .hl-related-info) .hl-card__art svg,
:is(.hl-hub, .hl-related-info) .hl-card__art-img {
	inline-size: auto;
	block-size: 100%;
	max-inline-size: 100%;
	object-fit: contain;
	object-position: right top;
}
/* Uzmanlık görseli maske olarak basılır; rengi `currentColor`, yani token. */
:is(.hl-hub, .hl-related-info) .hl-card__art--mask {
	background-color: currentColor;
	-webkit-mask-image: var(--hl-art);
	        mask-image: var(--hl-art);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: right top;
	        mask-position: right top;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

:is(.hl-hub, .hl-related-info) .hl-card__title {
	margin-block-start: var(--hl-layout-card-gap);
	font-size: var(--hl-text-card-title);
	line-height: var(--hl-leading-card-title);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	padding-inline-end: var(--hl-layout-card-art-reserve);
}
:is(.hl-hub, .hl-related-info) .hl-card__title a {
	color: inherit;
	text-decoration: none;
}
/* KARTIN TAMAMI TIKLANABİLİR.
   Başlıktaki bağlantı kartın üstüne yayılıyor; böylece tek bir gerçek
   bağlantı var (erişilebilir adı da başlık, "Learn More" değil) ama hedef
   alan kartın tamamı. Kartı `<a>` içine almak başlık + düğme iç içe
   bağlantı üretirdi; her karta ikinci bir bağlantı koymak da klavye ve
   ekran okuyucuda her kaydı iki kez dolaştırırdı. */
:is(.hl-hub, .hl-related-info) .hl-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
:is(.hl-hub, .hl-related-info) .hl-card__title a:focus-visible::after {
	outline: var(--hl-line-thick) solid var(--hl-color-primary);
	outline-offset: calc(var(--hl-line-thick) * -1);
	border-radius: var(--hl-radius-card);
}
/* Yayılan katman EN ÜSTTE. Önce metni üstüne almıştım ki seçilebilsin, ama
   o zaman kartın metin olan kısımları tıklanmıyordu — istenen tam tersi.
   Kart içi metin seçimini kaybediyoruz; tıklanabilir kartlarda olağan takas. */
:is(.hl-hub, .hl-related-info) .hl-card__title a:hover { color: var(--hl-color-primary); }

:is(.hl-hub, .hl-related-info) .hl-card__desc {
	margin-block-start: var(--hl-space-xs);
	font-size: var(--hl-text-card-desc);
	line-height: var(--hl-leading-card-desc);
	color: var(--hl-color-ink-muted);
	/* Sağ altta duran düğmenin altına girmesin (Figma: metin 311 / kart 450). */
	padding-inline-end: var(--hl-layout-card-desc-inset);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Düğme akıştan çıkarıldı: tasarımda açıklamanın son satırıyla aynı bantta,
   kartın sağ alt köşesine sabit. Akışta bırakılsaydı kısa açıklamalı
   kartlarda yukarı kayardı ve kartlar birbirini tutmazdı. */
:is(.hl-hub, .hl-related-info) .hl-card__cta {
	position: absolute;
	inset-inline-end: var(--hl-layout-card-cta-right);
	inset-block-end: var(--hl-layout-card-cta-bottom);
}
/* Metin düğmesi hem hub kartlarında hem koleksiyon kartlarında kullanılıyor.
   Kural yalnızca `.hl-hub` altında olduğu için koleksiyon tarafında hiç
   uygulanmıyordu: düğme 79px yüksekliğinde bir blok, ok 30x50 çıkıyordu. */
:is(.hl-hub, .hl-related-info) .hl-linkbtn,
.hl-collection .hl-linkbtn {
	display: inline-flex;
	align-items: center;
	gap: var(--hl-space-btn-gap);
	block-size: var(--hl-layout-btn-h);
	padding: 0 var(--hl-layout-btn-pad-x);
	font-size: var(--hl-text-btn);
	line-height: var(--hl-leading-btn);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	background: var(--hl-color-primary-tint);
	border-radius: var(--hl-radius-pill);
	text-decoration: none;
	white-space: nowrap;
}
:is(.hl-hub, .hl-related-info) .hl-linkbtn svg,
.hl-collection .hl-linkbtn svg {
	inline-size: auto;
	block-size: var(--hl-text-btn);
	flex: none;
}
:is(.hl-hub, .hl-related-info) .hl-linkbtn:hover,
:is(.hl-hub, .hl-related-info) .hl-card:hover .hl-linkbtn,
.hl-collection .hl-collection__card:hover .hl-linkbtn {
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}

/* ── Sayfalama / boş durum ── */
.hl-hub .hl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-space-key-gap);
	margin-block-start: var(--hl-space-lg);
}
.hl-hub .hl-page {
	display: inline-grid;
	place-items: center;
	inline-size: var(--hl-layout-key-size);
	block-size: var(--hl-layout-key-size);
	font-size: var(--hl-text-base);
	color: var(--hl-color-ink);
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-pill);
	text-decoration: none;
}
.hl-hub .hl-page.is-current {
	background: var(--hl-color-primary);
	border-color: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
	font-weight: var(--hl-font-weight-bold);
}
.hl-hub .hl-empty {
	background: var(--hl-color-surface-subtle);
	border-radius: var(--hl-radius-md);
	padding: var(--hl-space-lg);
	text-align: center;
	color: var(--hl-color-ink-muted);
	font-size: var(--hl-text-base);
}
.hl-hub--empty {
	border: var(--hl-line-hair) dashed var(--hl-color-divider);
	border-radius: var(--hl-radius-md);
	padding: var(--hl-space-md);
	color: var(--hl-color-ink-muted);
}

/* ── Dar ekranlar ──
   Tasarımda mobil karşılığı yok; kararlar burada verildi. Amaç:
   hiçbir öğe taşmasın, dokunma hedefleri küçülmesin. */
@media (max-width: 782px) {
.hl-hub .hl-filter__card { padding: var(--hl-space-sm); }
.hl-hub .hl-search { flex-basis: 100%; }
.hl-hub .hl-field { flex-basis: 100%; min-inline-size: 0; }
:is(.hl-hub, .hl-related-info) .hl-chips,
.hl-hub .hl-az { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
:is(.hl-hub, .hl-related-info) .hl-chips::-webkit-scrollbar,
.hl-hub .hl-az::-webkit-scrollbar { display: none; }
/* Dar ekranda kart daralır; görselin ve düğmenin ayırdığı sağ boşluk
   metne yer bırakmaz hâle gelir. Görseli küçültüp payları kısıyoruz. */
:is(.hl-hub, .hl-related-info) .hl-card {
	min-block-size: 0;
	padding-inline: var(--hl-space-panel);
}
:is(.hl-hub, .hl-related-info) .hl-card__art {
	inline-size: calc(var(--hl-layout-card-art-w) / 2);
	block-size: calc(var(--hl-layout-card-art-h) / 2);
}
:is(.hl-hub, .hl-related-info) .hl-card__meta,
:is(.hl-hub, .hl-related-info) .hl-card__title { padding-inline-end: calc(var(--hl-layout-card-art-reserve) / 2); }
:is(.hl-hub, .hl-related-info) .hl-card__desc { padding-inline-end: 0; }
:is(.hl-hub, .hl-related-info) .hl-card__cta {
	position: static;
	display: flex;
	justify-content: flex-end;
	margin-block-start: var(--hl-space-xs);
}
}
/* Yenilemesiz filtre: istek sürerken sonuçlar soluyor ama YERİNDE kalıyor.
   İçeriği boşaltmak sayfa boyunu zıplatır ve kaydırma konumunu kaybettirir. */
.hl-hub .hl-hub__results { transition: opacity 0.12s linear; }
.hl-hub.is-loading .hl-hub__results { opacity: 0.45; }
.hl-hub.is-loading .hl-filter { pointer-events: none; }

.hl-hub .hl-flush { margin: 0; }
.hl-hub .hl-sr {
	position: absolute;
	inline-size: var(--hl-line-hair);
	block-size: var(--hl-line-hair);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
 * ÖĞE SEÇİCİ ÇAKIŞMALARI — sonuç başlığı
 *
 * Tema `.article-body h2 { font-weight:600 }` (0-1-1) bizim 0-1-0
 * sınıfımızı eziyordu. Kapsayıcıyla niteleyerek (0-2-0) geri alınıyor.
 * ══════════════════════════════════════════════════════════════════ */

.hl-hub .hl-results__head > * { margin-block: 0; }

.hl-hub .hl-results__title {
	font-size: var(--hl-text-2xl);
	line-height: var(--hl-leading-2xl);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
}

/* ══════════════════════════════════════════════════════════════════
 * KOLEKSİYON BÖLÜMLERİ
 *
 * Tek blok, üç düzen. Tasarımdaki Medical Technologies, Top Accredited
 * Hospitals ve Branches Directory bölümlerinin farkı yalnızca düzen ve
 * içerik tipi; iskelet ortak.
 *
 * Kapsam `.hl-collection` ile daraltıldı ve her kural en az iki sınıf
 * taşıyor (0-2-0): temanın `.article-body h2/h3/p/ul li` kuralları 0-1-1
 * ve niteliksiz sınıfları yener. Bu bölümde üç kez yaşandı.
 * ══════════════════════════════════════════════════════════════════ */

/* Bölümler arası dikey ritim. Yoktu: üç bölüm ve üstlerindeki hub sıfır
   boşlukla uç uca duruyordu, `--aside` düzeninde de ızgara bölümün en
   üstünden başladığı için kartlar bir önceki bölüme binmiş görünüyordu. */
.hl-collection {
	font-family: var(--hl-font-family);
	color: var(--hl-color-ink);
	margin-block-start: var(--hl-layout-coll-section-gap);
}
/* Sayfadaki ilk bölüm üstten pay almasın — kendinden önce bir şey yok. */
.hl-collection:first-child { margin-block-start: 0; }
.hl-collection > *,
.hl-collection .hl-collection__body > * { margin-block: 0; }

/* ── Başlık satırı ── */
.hl-collection .hl-collection__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hl-space-md);
	flex-wrap: wrap;
	margin-block-end: var(--hl-layout-coll-head-gap);
}
.hl-collection .hl-collection__title {
	font-size: var(--hl-text-2xl);
	line-height: var(--hl-leading-2xl);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	margin: 0;
}
.hl-collection .hl-collection__lead {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink-muted);
	margin: var(--hl-space-2xs) 0 0;
	max-inline-size: var(--hl-layout-coll-media-min);
}
.hl-collection .hl-collection__more {
	display: inline-flex;
	align-items: center;
	gap: var(--hl-space-btn-gap);
	font-size: var(--hl-text-lg);
	line-height: var(--hl-leading-lg);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}
.hl-collection .hl-collection__more:hover { color: var(--hl-color-ink); }
.hl-collection .hl-collection__more svg {
	inline-size: var(--hl-text-lg);
	block-size: var(--hl-text-lg);
	flex: none;
}

/* ── Izgara ── */
.hl-collection .hl-collection__grid {
	display: grid;
	gap: var(--hl-layout-coll-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.hl-collection .hl-collection__grid > li { list-style: none; margin: 0; }

.hl-collection--media .hl-collection__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--hl-layout-coll-media-min), 100%), 1fr));
}
.hl-collection--feature .hl-collection__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--hl-layout-coll-feature-min), 100%), 1fr));
}
/* Figma: 319x85 kartlar, 2 sütun, 14 boşluk. */
.hl-collection--compact .hl-collection__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--hl-layout-coll-compact-min), 100%), 1fr));
	gap: var(--hl-layout-coll-compact-gap);
}

/* ── Kart gövdesi (üç düzende ortak) ── */
.hl-collection .hl-collection__card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--hl-color-surface);
	border: 0;
	border-radius: var(--hl-radius-card);
	box-shadow: var(--hl-shadow-card);
	overflow: hidden;
}
.hl-collection .hl-collection__card:hover { box-shadow: var(--hl-shadow-lift); }

.hl-collection .hl-collection__media {
	block-size: var(--hl-layout-coll-media-h);
	overflow: hidden;
	flex: none;
}
/* ══ Görsel: tema kuralını geçmek için kasten uzun zincir ══
 * Ölçülen tema kuralı (özgüllük 0-4-1):
 *   .article-body img:not(.info-card-icon-img):not(.mechanism-icon-img):not(.benefit-icon-img)
 *   { border-radius: 0; max-width: 100%; height: auto }
 * Bizim 0-2-0 kuralımızı eziyor, `height:auto` dayatıyordu: görsel kutuyu
 * doldurmuyor, kendi en-boy oranında üstte asılı kalıyordu. Aşağıdaki zincir
 * 0-5-1; yükleme sırasından bağımsız kazanır.
 * `!important` KULLANILMADI — tema bilerek override edebilmeli, kazara değil. */
.hl-collection .hl-collection__grid .hl-collection__card .hl-collection__media img.hl-collection__img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	display: block;
}
.hl-collection .hl-collection__body {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-xs);
	padding: var(--hl-layout-coll-media-pad);
	flex: 1 1 auto;
}
.hl-collection .hl-collection__label {
	align-self: flex-start;
	block-size: var(--hl-layout-badge-h);
	display: inline-flex;
	align-items: center;
	padding: 0 var(--hl-layout-badge-pad-x);
	font-size: var(--hl-text-badge);
	line-height: var(--hl-leading-badge);
	color: var(--hl-color-primary);
	background: var(--hl-color-primary-tint);
	border-radius: var(--hl-radius-pill);
}
.hl-collection .hl-collection__name {
	font-size: var(--hl-text-card-title);
	line-height: var(--hl-leading-card-title);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	margin: 0;
}
.hl-collection .hl-collection__name a {
	color: inherit;
	text-decoration: none;
}
/* Kartın tamamı tıklanabilir — hub kartlarıyla aynı desen. */
.hl-collection .hl-collection__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hl-collection .hl-collection__name a:focus-visible::after {
	outline: var(--hl-line-thick) solid var(--hl-color-primary);
	outline-offset: calc(var(--hl-line-thick) * -1);
	border-radius: var(--hl-radius-card);
}
.hl-collection .hl-collection__card:hover .hl-collection__name a { color: var(--hl-color-primary); }

.hl-collection .hl-collection__meta { display: flex; align-items: center; }
.hl-collection .hl-collection__meta,
.hl-collection .hl-collection__desc {
	font-size: var(--hl-text-card-desc);
	line-height: var(--hl-leading-card-desc);
	color: var(--hl-color-ink-muted);
	margin: 0;
}
.hl-collection .hl-collection__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hl-collection .hl-collection__cta { align-self: flex-start; margin-block-start: auto; }

/* ── Düzen: görsel yanda ── */
.hl-collection--feature .hl-collection__card { flex-direction: row; align-items: stretch; }
/* Görsel sütunu kartın tam boyunu kaplar. Yüksekliği MUTLAK konumla veriyoruz:
   esnek kutuda yükseklik `auto` kaldığı için `block-size:100%` çözülmüyordu ve
   görsel kutunun üstünde doğal boyutunda asılı kalıyordu. */
.hl-collection--feature .hl-collection__media {
	position: relative;
	inline-size: var(--hl-layout-coll-feature-img);
	flex: none;
}
.hl-collection--feature .hl-collection__grid .hl-collection__card .hl-collection__media img.hl-collection__img {
	position: absolute;
	inset: 0;
}

/* ── Düzen: yalnız ad ve meta ──
   Ad üstte tam genişlik; meta ve düğme AYNI satırda. Alt alta dizilseydi
   kart tasarımdaki 85px'in çok üstüne çıkardı. */
.hl-collection--compact .hl-collection__body {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name name"
		"meta cta";
	align-items: center;
	gap: var(--hl-space-3xs) var(--hl-space-2xs);
	padding: var(--hl-layout-coll-compact-pad);
}
.hl-collection--compact .hl-collection__name {
	grid-area: name;
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
}
.hl-collection--compact .hl-collection__meta { grid-area: meta; }
.hl-collection--compact .hl-collection__cta  { grid-area: cta; margin-block-start: 0; justify-self: end; }

/* ── Başlık solda, ızgara sağda ── */
@media (min-width: 1024px) {
/* Figma: iki eşit sütun (651 + 652), aralarında 68. Kopya solda, ızgara
   sağda ve İKİSİ DE bölümün üstünden hizalı başlar. */
.hl-collection--aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--hl-layout-coll-aside-gap);
	align-items: start;
	margin-block-start: var(--hl-layout-coll-section-gap);
}
.hl-collection--aside .hl-collection__head {
	flex-direction: column;
	align-items: flex-start;
	margin-block-end: 0;
}
/* Bu düzende "hepsini gör" bir metin bağlantısı değil, kopyanın altında
   duran DOLU bir hap düğme (Figma: Open the Branches hub). */
.hl-collection--aside .hl-collection__more {
	margin-block-start: var(--hl-space-md);
	padding: var(--hl-layout-coll-cta-pad-y) var(--hl-layout-coll-cta-pad-x);
	font-size: var(--hl-text-card-desc);
	line-height: var(--hl-leading-card-desc);
	color: var(--hl-color-ink-on-primary);
	background: var(--hl-color-primary);
	border-radius: var(--hl-radius-pill);
}
.hl-collection--aside .hl-collection__more:hover {
	background: var(--hl-color-primary-strong);
	color: var(--hl-color-ink-on-primary);
}
.hl-collection--aside .hl-collection__more svg {
	inline-size: var(--hl-text-card-desc);
	block-size: var(--hl-text-card-desc);
}
}

@media (max-width: 782px) {
.hl-collection .hl-collection__head { margin-block-end: var(--hl-space-md); }
.hl-collection--feature .hl-collection__card { flex-direction: column; }
.hl-collection--feature .hl-collection__media {
	inline-size: 100%;
	block-size: var(--hl-layout-coll-media-h);
}
}

/* ══════════════════════════════════════════════════════════════════
 * HERO EYLEM DÜĞMELERİ
 *
 * Hero'yu tema basıyor; bu iki düğme eklentinin `liv_hero_after_lead`
 * kancasından geliyor (bkz. class-hl-hero.php). Kapsam `.hl-hero-ctas` —
 * temanın hero'sundaki hiçbir şeye dokunulmuyor.
 * Figma: 200x40 ve 206x40, hap köşe, aralarında 10, lead'den 34 sonra.
 * ══════════════════════════════════════════════════════════════════ */
.hl-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-layout-hero-cta-gap);
	margin-block-start: var(--hl-layout-hero-cta-top);
}
.hl-hero-ctas .hl-hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: var(--hl-layout-hero-cta-h);
	padding-inline: var(--hl-layout-hero-cta-pad-x);
	border-radius: var(--hl-radius-pill);
	font-family: var(--hl-font-family);
	font-size: var(--hl-text-cta);
	line-height: var(--hl-leading-cta);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s linear, color 0.15s linear;
}
/* Birincil: beyaz zemin, marka rengi metin */
.hl-hero-ctas .hl-hero-cta--solid {
	background: var(--hl-color-ink-on-primary);
	color: var(--hl-color-primary);
	font-weight: var(--hl-font-weight-semibold);
}
/* ZEMİN AÇIK KALMALI. `primary-tint` %10 opaklıkta; bu düğme KOYU hero'nun
   üstünde durduğu için hover'da arkadaki lacivert görünüyor ve koyu mavi metin
   okunmaz hâle geliyordu. Hover, açık zemin varsayan bir kural değil — düğmenin
   gerçek bağlamına göre yazılmalı. */
.hl-hero-ctas .hl-hero-cta--solid:hover {
	background: var(--hl-color-surface-subtle);
	color: var(--hl-color-primary-strong);
}
/* İkincil: hero'nun üstünde saydam — kendi zemini yok, gradientin üstünde durur */
.hl-hero-ctas .hl-hero-cta--ghost {
	background: var(--hl-color-hero-ghost);
	color: var(--hl-color-ink-on-primary);
	font-weight: var(--hl-font-weight-regular);
}
.hl-hero-ctas .hl-hero-cta--ghost:hover {
	background: var(--hl-color-hero-ghost-hover);
	color: var(--hl-color-ink-on-primary);
}

/* Hero eyebrow'un önündeki kısa çizgi (Figma: 28x2, #9BCBDD) */
.hero-eyebrow .hero-eyebrow-text::before {
	content: "";
	display: inline-block;
	inline-size: var(--hl-layout-eyebrow-bar-w);
	block-size: var(--hl-line-thick);
	margin-inline-end: var(--hl-space-2xs);
	vertical-align: middle;
	background: var(--hl-color-accent-soft);
}

/* ══════════════════════════════════════════════════════════════════
 * PAGE NAV — hub rolündeki kayıtlarda (Branch)
 *
 * Sticky bölüm menüsünden farklı: burada sekmeler sayfanın H2'leri değil,
 * bu bölüme bağlı İÇERİK TİPLERİ. Gövdede o listeler yok, dolayısıyla
 * bağlantılar filtrelenmiş hub sayfasına gidiyor.
 * Figma: 60 yükseklik, sekmeler arası 28, aktif primary w600, pasif
 * ink-muted w500, altında 1px ayırıcı.
 * ══════════════════════════════════════════════════════════════════ */
.hl-nav--tabs {
	background: var(--hl-color-surface);
	border-block-end: var(--hl-line-hair) solid var(--hl-color-divider);
	border-block-start: 0;
	margin-block-end: var(--hl-space-lg);
}
.hl-nav--tabs .hl-nav__list {
	gap: var(--hl-layout-pagenav-gap);
	min-block-size: var(--hl-layout-pagenav-h);
	align-items: center;
}
.hl-nav--tabs .hl-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--hl-space-3xs);
	/* Dikey pay ŞART. `padding: 0` ile bağlantı kutusu satır kutusuyla
	   (19.5px) birebir aynı oluyordu; liste yatay kaydırma için
	   `overflow-x: auto` taşıdığından `overflow-y` de `auto` oluyor ve
	   "y, g, p" gibi harflerin altı kırpılıyordu. */
	padding-block: var(--hl-space-2xs);
	padding-inline: 0;
	font-size: var(--hl-text-cta);
	line-height: var(--hl-leading-cta);
	/* Tasarımda pasif sekmeler 500; 400 fazla soluk kalıyordu. */
	font-weight: var(--hl-font-weight-medium);
	color: var(--hl-color-ink-muted);
	border-block-end: 0;
}
.hl-nav--tabs .hl-nav__link:hover { color: var(--hl-color-primary); }
.hl-nav--tabs .hl-nav__link.is-active {
	color: var(--hl-color-primary);
	font-weight: var(--hl-font-weight-semibold);
}
.hl-nav--tabs .hl-nav__count {
	font-size: var(--hl-text-badge);
	line-height: var(--hl-leading-badge);
	color: var(--hl-color-primary);
	background: var(--hl-color-primary-tint);
	border-radius: var(--hl-radius-pill);
	padding-inline: var(--hl-space-3xs);
}

/* ══════════════════════════════════════════════════════════════════
 * RELATED HEALTH INFORMATION
 *
 * Tekil sayfaların altında; kartlar hub'dakiyle AYNI bileşen. Bu yüzden
 * ızgara da `.hl-grid` — kart kuralları `.hl-hub` altında tanımlı olduğu
 * için burada aynı kapsamı sağlamak üzere `.hl-related-info` da o kuralların
 * kapsamına alınıyor (bkz. aşağıdaki takma seçici).
 * Figma: H2 30.26/45.4 w700 primary, başlık ile ızgara arası 82.
 * ══════════════════════════════════════════════════════════════════ */
.hl-related-info {
	margin-block-start: var(--hl-layout-coll-section-gap);
}
.hl-related-info .hl-related-info__title {
	font-size: var(--hl-text-h2);
	line-height: var(--hl-leading-h2);
	font-weight: var(--hl-font-weight-semibold);
	color: var(--hl-color-primary);
	margin: 0 0 var(--hl-space-xl);
}

/* Tam genişlik: bölüm iki sütunlu satırın DIŞINDA, temanın kapsayıcı
   ölçüsünü kendi içinde kuruyor (Figma: 1400 kap, 3 kart, 25 aralık). */
.hl-related-info {
	inline-size: 100%;
	max-inline-size: var(--hl-layout-container);
	margin-inline: auto;
	padding-inline: var(--hl-space-md);
	box-sizing: border-box;
	padding-block-end: var(--hl-layout-coll-section-gap);
}

/* ══════════════════════════════════════════════════════════════════
 * MAKALE İÇİ BLOKLAR
 *
 * Kapsam bilerek `.hl-*` sınıflarına dayanıyor, kapsayıcıya değil: bu
 * bloklar makalenin İÇİNDE, temanın `.article-body` alanında duruyor ve
 * o alanın element seçicileri (0-1-1) niteliksiz sınıfları yener. Her
 * kural en az iki sınıf taşıyor.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Vurgu kutusu (Figma: 946x203, r21.75, #E9F5FD) ── */
.hl-highlight {
	background: var(--hl-color-primary-tint);
	border-radius: var(--hl-radius-highlight);
	padding: var(--hl-layout-highlight-pad);
	margin-block: var(--hl-space-lg);
}
.hl-highlight .hl-highlight__title {
	margin: 0 0 var(--hl-space-2xs);
	font-size: var(--hl-text-lg);
	line-height: var(--hl-leading-lg);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary-strong);
}
.hl-highlight .hl-highlight__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink);
}
.hl-highlight .hl-highlight__body > :first-child { margin-block-start: 0; }
.hl-highlight .hl-highlight__body > :last-child { margin-block-end: 0; }

/* ── Bağlı içerik grubu ── */
.hl-linked { margin-block: var(--hl-space-xl); }
.hl-linked .hl-linked__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hl-space-md);
	flex-wrap: wrap;
	margin-block-end: var(--hl-space-md);
}
.hl-linked .hl-linked__label {
	margin: 0 0 var(--hl-space-3xs);
	font-size: var(--hl-text-2xs);
	line-height: var(--hl-leading-2xs);
	font-weight: var(--hl-font-weight-bold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-primary);
}
.hl-linked .hl-linked__title {
	margin: 0;
	font-size: var(--hl-text-h2);
	line-height: var(--hl-leading-h2);
	font-weight: var(--hl-font-weight-semibold);
	color: var(--hl-color-primary);
}
.hl-linked .hl-linked__count {
	margin: 0;
	font-size: var(--hl-text-xs);
	line-height: var(--hl-leading-xs);
	color: var(--hl-color-ink-muted);
}
.hl-linked .hl-linked__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--hl-layout-linked-min), 100%), 1fr));
	gap: var(--hl-layout-linked-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Kartın TAMAMI tıklanabilir. Başlığın üstüne isabet ettirmek zorunda
   kalmak, kart görünümündeki bir listede gereksiz bir nişancılık testi. */
.hl-linked .hl-linked__name a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.hl-linked .hl-linked__card {
	position: relative;
	background: var(--hl-color-surface);
	border: var(--hl-line-hair) solid var(--hl-color-card-line);
	border-radius: var(--hl-radius-lg);
	padding: var(--hl-layout-linked-pad);
	transition: border-color 0.12s linear, box-shadow 0.12s linear;
}
.hl-linked .hl-linked__card:hover {
	border-color: var(--hl-color-primary);
	box-shadow: var(--hl-shadow-card);
}
.hl-linked .hl-linked__name {
	margin: 0 0 var(--hl-layout-linked-title-gap);
	font-size: var(--hl-text-linked-title);
	line-height: var(--hl-leading-linked-title);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	/* 22 + 14 + 8 + 26 + 8 + 19.5 + 22 + 2 = 121.5 ≈ Figma'daki 122px. */
}
.hl-linked .hl-linked__name a { color: inherit; text-decoration: none; }
/* Kartın tamamı tıklanabilir — kütüphane kartlarıyla aynı desen. */
.hl-linked .hl-linked__name a::after { content: ""; position: absolute; inset: 0; }
.hl-linked .hl-linked__card:hover .hl-linked__name a { color: var(--hl-color-primary-strong); }
/* `inline-flex` DEĞİL. Satır içi bir kutu, kartın kendi yazı tipinden gelen
   satır kutusunun içine oturuyor ve altına ~6px görünmez pay bırakıyordu;
   kart Figma'daki 122px yerine 147px oluyordu. Blok seviyesinde flex, o
   payı ortadan kaldırır. */
.hl-linked .hl-linked__more {
	display: flex;
	align-items: center;
	gap: var(--hl-space-2xs);
	font-size: var(--hl-text-cta);
	line-height: var(--hl-leading-cta);
	font-weight: var(--hl-font-weight-semibold);
	color: var(--hl-color-primary);
}
.hl-linked .hl-linked__more svg {
	inline-size: var(--hl-text-sm);
	block-size: auto;
	stroke: currentColor;
}

/* ── SSS — sitedeki varsayılan desenle aynı görünüm ── */
.hl-faq { margin-block: var(--hl-space-xl); }
.hl-faq .hl-faq__title {
	margin: 0 0 var(--hl-space-md);
	font-size: var(--hl-text-h2);
	line-height: var(--hl-leading-h2);
	font-weight: var(--hl-font-weight-semibold);
	color: var(--hl-color-primary);
}
.hl-faq .hl-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--hl-layout-faq-gap);
}
.hl-faq .hl-faq__item {
	border: var(--hl-line-hair) solid var(--hl-color-divider);
	border-radius: var(--hl-radius-md);
	background: var(--hl-color-surface);
	overflow: hidden;
}
.hl-faq .hl-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hl-space-sm);
	padding: var(--hl-layout-faq-pad-y) var(--hl-layout-faq-pad-x);
	margin: 0;
	font-size: var(--hl-text-lg);
	line-height: var(--hl-leading-lg);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-ink);
	cursor: pointer;
	list-style: none;
}
/* Tarayıcının kendi üçgenini kaldır — kendi okumuzu basıyoruz. */
.hl-faq .hl-faq__q::-webkit-details-marker { display: none; }
.hl-faq .hl-faq__q:hover { background: var(--hl-color-surface-subtle); }
.hl-faq .hl-faq__chev {
	inline-size: var(--hl-text-sm);
	block-size: auto;
	flex: none;
	color: var(--hl-color-ink-muted);
	transition: transform 0.25s ease;
}
.hl-faq .hl-faq__item[open] .hl-faq__chev { transform: rotate(180deg); }
.hl-faq .hl-faq__a {
	padding: 0 var(--hl-layout-faq-pad-x) var(--hl-layout-faq-pad-y);
	font-size: var(--hl-text-card-desc);
	line-height: var(--hl-leading-card-desc);
	color: var(--hl-color-ink-muted);
}
.hl-faq .hl-faq__a > :first-child { margin-block-start: 0; }
.hl-faq .hl-faq__a > :last-child { margin-block-end: 0; }

/* ── Sonraki adım kartı (Figma: 951x318, r17.9, sağda 165x102 ikon) ── */

@media (max-width: 782px) {
}

/* ══════════════════════════════════════════════════════════════════
   BİLGİ PANELİ — Figma: div.rounded-[20px] 946x203, zemin #E9F5FD
   Üst etiket + kısa açıklama + yuvarlak eylem düğmeleri.
   ══════════════════════════════════════════════════════════════════ */
.hl-panel {
	margin-block: var(--hl-space-lg);
	padding: var(--hl-layout-panel-pad);
	border-radius: var(--hl-radius-highlight);
	background: var(--hl-color-primary-tint);
}
.hl-panel .hl-panel__eyebrow {
	margin: 0 0 var(--hl-space-xs);
	font-size: var(--hl-text-panel-eyebrow);
	line-height: var(--hl-leading-panel-eyebrow);
	font-weight: var(--hl-font-weight-medium);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-primary);
}
.hl-panel .hl-panel__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink);
}
.hl-panel .hl-panel__body > :first-child { margin-block-start: 0; }
.hl-panel .hl-panel__body > :last-child { margin-block-end: 0; }

/* Düğmeler sarabilir. Tasarımda üçü tek satıra sığıyor ama etiketler
   çeviriyle uzuyor; sabit bir satır, dördüncü düğmede taşma demek olur. */
.hl-panel .hl-panel__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-layout-panel-cta-gap);
	margin-block-start: var(--hl-space-sm);
}
.hl-panel .hl-panel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--hl-layout-panel-cta-h);
	padding-inline: var(--hl-layout-panel-cta-pad);
	border-radius: var(--hl-radius-pill);
	font-size: var(--hl-text-panel-cta);
	line-height: var(--hl-leading-panel-cta);
	font-weight: var(--hl-font-weight-semibold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s linear, color 0.15s linear;
}
.hl-panel .hl-panel__cta--solid {
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}
.hl-panel .hl-panel__cta--solid:hover,
.hl-panel .hl-panel__cta--solid:focus-visible {
	background: var(--hl-color-primary-strong);
	color: var(--hl-color-ink-on-primary);
}
.hl-panel .hl-panel__cta--ghost {
	background: var(--hl-color-surface);
	color: var(--hl-color-primary);
}
.hl-panel .hl-panel__cta--ghost:hover,
.hl-panel .hl-panel__cta--ghost:focus-visible {
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}

/* ══════════════════════════════════════════════════════════════════
   SAYI KARTLARI — Figma: kart 274x87, köşe 12, aralık 14
   ══════════════════════════════════════════════════════════════════ */
.hl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--hl-layout-stat-min), 100%), 1fr));
	gap: var(--hl-layout-stat-gap);
	margin-block: var(--hl-space-lg);
}
.hl-stats .hl-stats__card {
	padding: var(--hl-layout-stat-pad);
	border-radius: var(--hl-radius-md);
	background: var(--hl-color-surface);
	/* Beyaz kart beyaz zeminde: sınırı yalnızca gölge çiziyor. Gölge
	   olmayınca kartlar kayboluyor ve üç sayı havada duruyor gibi görünüyordu. */
	box-shadow: var(--hl-shadow-card);
}
.hl-stats .hl-stats__value {
	margin: 0;
	font-size: var(--hl-text-stat-value);
	line-height: var(--hl-leading-stat-value);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
}
.hl-stats .hl-stats__label {
	margin: 0;
	font-size: var(--hl-text-stat-label);
	line-height: var(--hl-leading-stat-label);
	font-weight: var(--hl-font-weight-regular);
	color: var(--hl-color-label);
}

/* Üst etiket stil varyasyonu — çekirdek paragrafa eklenen görünüm.
   Tasarımdaki "Overview" satırı: küçük, mavi, büyük harf, seyrek. */
.article-body p.is-style-hl-eyebrow,
.hl-single p.is-style-hl-eyebrow {
	margin-block-end: var(--hl-space-2xs);
	font-size: var(--hl-text-panel-cta);
	line-height: var(--hl-leading-panel-cta);
	font-weight: var(--hl-font-weight-semibold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-primary);
}

/* ══════════════════════════════════════════════════════════════════
   MAKALE MADDE LİSTESİ — Figma: nokta 7px #1C92E9, metin 32px'de
   Temanın `disc` + 45px girinti varsayılanı tasarımla uyuşmuyor. Kapsam
   yalnızca kendi tekil sayfalarımız; sitenin geri kalanı değişmez.
   `.hl-single .hl-single__body` (0-2-1) temanın `.article-body ul`
   kuralını (0-1-1) geçiyor — eşit olsalardı yükleme sırası karar verirdi.
   ══════════════════════════════════════════════════════════════════ */
.hl-single .hl-single__body ul {
	list-style: none;
	margin-block: var(--hl-space-sm);
	padding-inline-start: 0;
}
.hl-single .hl-single__body ul > li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--hl-layout-list-indent);
	font-size: var(--hl-text-list);
	line-height: var(--hl-leading-list);
	/* TON VARSA ONU DEVRAL. Bu seçici (0-2-3) renkli kutuların içindeki
	   maddelerin de üstüne düşüyor ve bileşen kuralından (0-2-1) daha
	   özgül. Ayrı bir kuralla yarışmak yerine değişkeni devralmak, aynı
	   özgüllük savaşını her yeni kutu bileşeninde tekrar etmekten kurtarıyor. */
	color: var(--hl-tone-body, var(--hl-color-ink-muted));
	list-style: none;
}
.hl-single .hl-single__body ul > li + li { margin-block-start: var(--hl-layout-list-gap); }
.hl-single .hl-single__body ul > li::marker { content: ""; }
.hl-single .hl-single__body ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--hl-layout-list-dot-top);
	inline-size: var(--hl-layout-list-dot);
	block-size: var(--hl-layout-list-dot);
	border-radius: 50%;
	/* TON VARSA ONU KULLAN. Uyarı Bölümü gibi renkli kutuların içindeki
	   maddeler kutunun tonunda olmalı; bu kural onların da üstüne düşüyor
	   (aynı özgüllükte, daha fazla öğe seçtiği için kazanıyor). Ayrı bir
	   kuralla yarışmak yerine değişkeni devralmak, özgüllük savaşını
	   tamamen ortadan kaldırıyor. Ton yoksa varsayılan mavi. */
	background: var(--hl-tone-ink, var(--hl-color-primary));
}

/* Numaralı listelere ve iç içe listelere dokunmuyoruz: tasarımda yoklar ve
   hepsini tek görünüme zorlamak yazarın kurduğu yapıyı bozardı. */
.hl-single .hl-single__body ul ul > li::before { opacity: 0.5; }

/* ══════════════════════════════════════════════════════════════════
   TON SİSTEMİ
   Kutu bileşenleri (Not Şeridi, İkili Kart, Uyarı Bölümü) rengi doğrudan
   yazmıyor; bir TON sınıfı iki değişken atıyor ve bileşenler onları
   kullanıyor. Üçüncü bir ton eklemek burada tek kural — bileşenlerde
   sıfır değişiklik. Renkleri bileşen bileşen yazsaydık birini
   değiştirdiğimizde diğerleri geride kalırdı.
   ══════════════════════════════════════════════════════════════════ */
/* Her ton ÜÇ değer taşıyor: mürekkep (etiket, başlık, madde işareti),
   zemin ve GÖVDE METNİ. Üçüncüsü ayrı olmak zorunda: tasarımda turuncu
   kutunun her şeyi turuncu, ama mavi kutunun yalnızca üst etiketi mavi —
   satırları gövde grisinde kalıyor. Mürekkebi gövdeye de uygulasaydık mavi
   kart baştan sona mavi olurdu. */
.hl-tone--info {
	--hl-tone-ink: var(--hl-color-info);
	--hl-tone-bg: var(--hl-color-info-tint);
	--hl-tone-body: var(--hl-color-ink-muted);
}
.hl-tone--warn {
	--hl-tone-ink: var(--hl-color-warn);
	--hl-tone-bg: var(--hl-color-warn-tint);
	--hl-tone-body: var(--hl-color-warn);
}

/* Kutu bileşenlerinin ortak üst etiketi: küçük, büyük harf, seyrek, ton rengi.
   İKİ SINIFLA yazılmak zorunda. Tek sınıfla (`0-1-0`) yazılmıştı ve tema
   `.article-body p` (`0-1-1`) ile yazı ölçüsünü, kalınlığını ve rengini
   geri alıyordu: etiket 11px/700/mavi yerine 17.29px/400/gri çıkıyordu.
   `text-transform` ve `letter-spacing` tutuyordu — temanın onlara
   dokunmadığı için. Yarısı çalışan bir kural, çalıştığı sanılan bir
   kuraldan daha kötü. */
.hl-note .hl-note__eyebrow,
.hl-pair .hl-pair__eyebrow,
.hl-advisory .hl-advisory__eyebrow {
	margin: 0 0 var(--hl-space-2xs);
	font-size: var(--hl-text-tone-eyebrow);
	line-height: var(--hl-leading-tone-eyebrow);
	font-weight: var(--hl-font-weight-bold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-tone-ink);
}

/* KUTU İÇİNDEKİ METİN ÖĞELERİ.
   Rengi sarmalayıcıya yazmak YETMİYOR: tema `.article-body p` ve
   `.article-body li` ile çocuk öğeyi DOĞRUDAN boyuyor ve devralınan renk
   oraya hiç ulaşmıyor. Sarmalayıcı doğru renkte ölçülüyor, içindeki
   paragraf gri kalıyordu — sayısal denetim bunu kaçırdı çünkü yanlış
   düğümü ölçüyordu. Çocukları da adlandırmak zorunlu. */
.hl-note .hl-note__body p,
.hl-note .hl-note__body li,
.hl-panel .hl-panel__body p,
.hl-panel .hl-panel__body li,
.hl-nextstep .hl-nextstep__body p,
.hl-nextstep .hl-nextstep__body li {
	margin-block: 0;
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink-muted);
}
.hl-pair .hl-pair__body p,
.hl-pair .hl-pair__body li,
.hl-advisory .hl-advisory__body p,
.hl-advisory .hl-advisory__body li {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-tone-body);
}
/* Kutu içinde ardışık paragraflar arası: tasarımda satır aralığı kadar. */
.hl-note .hl-note__body p + p,
.hl-panel .hl-panel__body p + p,
.hl-nextstep .hl-nextstep__body p + p,
.hl-pair .hl-pair__body p + p,
.hl-advisory .hl-advisory__body p + p {
	margin-block-start: var(--hl-space-xs);
}
.hl-pair .hl-pair__body p,
.hl-advisory .hl-advisory__body > p {
	margin-block: 0;
}

/* ── NOT ŞERİDİ ── */
.hl-note {
	margin-block: var(--hl-space-md);
	padding: var(--hl-layout-note-pad-y) var(--hl-layout-note-pad-x);
	border-radius: var(--hl-radius-note);
	background: var(--hl-tone-bg);
}
.hl-note .hl-note__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink-muted);
}
.hl-note .hl-note__body > :first-child { margin-block-start: 0; }
.hl-note .hl-note__body > :last-child { margin-block-end: 0; }

/* ── İKİLİ RENKLİ KART ── */
.hl-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--hl-layout-pair-min), 100%), 1fr));
	gap: var(--hl-layout-pair-gap);
	margin-block: var(--hl-space-md);
}
.hl-pair .hl-pair__card {
	padding: var(--hl-layout-pair-pad);
	border-radius: var(--hl-radius-advisory);
	background: var(--hl-tone-bg);
}
.hl-pair .hl-pair__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-tone-body);
}
.hl-pair .hl-pair__body > :first-child { margin-block-start: 0; }
.hl-pair .hl-pair__body > :last-child { margin-block-end: 0; }
/* Satırlar madde işaretsiz: tasarımda düz satırlar hâlinde duruyorlar. */
.hl-pair .hl-pair__body ul { list-style: none; margin: 0; padding: 0; }
.hl-pair .hl-pair__body li { margin-block: var(--hl-space-2xs); }
.hl-pair .hl-pair__body li::before { content: none; }

/* ── UYARI BÖLÜMÜ ── */
.hl-advisory { margin-block: var(--hl-space-lg); }
.hl-advisory .hl-advisory__box {
	padding: var(--hl-layout-advisory-pad);
	border-radius: var(--hl-radius-advisory);
	background: var(--hl-tone-bg);
}
.hl-advisory .hl-advisory__title {
	margin: 0 0 var(--hl-space-sm);
	font-size: var(--hl-text-advisory-title);
	line-height: var(--hl-leading-advisory-title);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-tone-ink);
}
.hl-advisory .hl-advisory__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-tone-body);
}
.hl-advisory .hl-advisory__body > :first-child { margin-block-start: 0; }
.hl-advisory .hl-advisory__body > :last-child { margin-block-end: 0; }
/* Madde işaretleri kutunun tonunda — sayfa genelindeki mavi nokta burada
   yanlış renk olurdu. */
.hl-advisory .hl-advisory__body ul {
	list-style: none;
	margin-block: var(--hl-space-sm);
	padding-inline-start: 0;
}
.hl-advisory .hl-advisory__body li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--hl-layout-list-indent);
	list-style: none;
}
.hl-advisory .hl-advisory__body li + li { margin-block-start: var(--hl-layout-list-gap); }
.hl-advisory .hl-advisory__body li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--hl-layout-list-dot-top);
	inline-size: var(--hl-layout-list-dot);
	block-size: var(--hl-layout-list-dot);
	border-radius: 50%;
	background: var(--hl-tone-ink);
}

/* ── KARŞILAŞTIRMA TABLOSU ──
   `!important` BURADA ZORUNLU, tercih değil. Tema `.article-body` altındaki
   tabloların TÜM görünümünü `!important` ile dayatıyor: genişlik, kenarlık,
   dolgu, zemin, yazı ölçüsü, hatta `display:block` (tabloyu tablo olmaktan
   çıkarıp yatay kaydırma kutusuna çeviriyor) ve çift satırlarda zebra zemin.
   Bu, yazarın elle kurduğu tabloların derli toplu görünmesi için konmuş —
   ama bizim bloğumuz tasarlanmış bir bileşen ve o dayatmadan çıkması gerekiyor.
   Eşit güçte tek yol aynı silahı kullanmak; seçicileri de iki sınıfa
   çıkarıyoruz ki hangi kuralın kazandığı tesadüfe kalmasın. */
.hl-table {
	margin-block: var(--hl-space-md) !important;
	border: var(--hl-line-hair) solid var(--hl-color-table-line);
	border-radius: var(--hl-radius-table);
	/* Dar ekranda tablo kırpılmasın; yatay kaydırma KUTUNUN içinde kalsın,
	   sayfa gövdesi yana kaymasın. */
	overflow-x: auto;
}
.hl-table .hl-table__grid {
	display: table !important;
	inline-size: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	border-collapse: collapse !important;
	overflow: visible !important;
	background: none !important;
	text-align: start;
}
.hl-table .hl-table__grid th,
.hl-table .hl-table__grid td {
	padding: var(--hl-layout-table-pad-y) var(--hl-layout-table-pad-x) !important;
	text-align: start !important;
	vertical-align: top;
	border: 0 !important;
	border-block-start: var(--hl-line-hair) solid var(--hl-color-table-line) !important;
}
.hl-table .hl-table__grid thead th {
	border-block-start: 0 !important;
	background: var(--hl-color-table-head) !important;
	font-size: var(--hl-text-tone-eyebrow) !important;
	line-height: var(--hl-leading-tone-eyebrow);
	font-weight: var(--hl-font-weight-bold) !important;
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-ink-muted) !important;
}
.hl-table .hl-table__grid tbody th {
	background: var(--hl-color-surface) !important;
	font-size: var(--hl-text-base) !important;
	line-height: var(--hl-leading-base);
	font-weight: var(--hl-font-weight-bold) !important;
	color: var(--hl-color-primary) !important;
	white-space: nowrap;
}
/* Zebra zemin tasarımda yok — tema onu çift satırlara `!important` ile
   basıyor, satırlar arasında olmayan bir ritim yaratıyordu. */
.hl-table .hl-table__grid tbody td,
.hl-table .hl-table__grid tbody tr:nth-child(2n) td {
	background: var(--hl-color-surface) !important;
	font-size: var(--hl-text-table-cell) !important;
	line-height: var(--hl-leading-table-cell);
	color: var(--hl-color-ink-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SONRAKİ ADIM — beyaz kart, üç düğme, sağ üstte dekoratif daireler
   ══════════════════════════════════════════════════════════════════ */
.hl-nextstep {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hl-space-md);
	margin-block: var(--hl-space-lg);
	padding: var(--hl-layout-nextstep-pad);
	border: var(--hl-line-hair) solid var(--hl-color-card-line);
	border-radius: var(--hl-radius-lg);
	background: var(--hl-color-surface);
}
.hl-nextstep .hl-nextstep__copy { min-inline-size: 0; }
.hl-nextstep .hl-nextstep__eyebrow {
	margin: 0 0 var(--hl-space-2xs);
	font-size: var(--hl-text-tone-eyebrow);
	line-height: var(--hl-leading-tone-eyebrow);
	font-weight: var(--hl-font-weight-semibold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-ink-muted);
}
.hl-nextstep .hl-nextstep__title {
	margin: 0 0 var(--hl-space-xs);
	font-size: var(--hl-text-nextstep-title);
	line-height: var(--hl-leading-nextstep-title);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
}
.hl-nextstep .hl-nextstep__body {
	font-size: var(--hl-text-base);
	line-height: var(--hl-leading-base);
	color: var(--hl-color-ink-muted);
}
.hl-nextstep .hl-nextstep__body > :first-child { margin-block-start: 0; }
.hl-nextstep .hl-nextstep__body > :last-child { margin-block-end: 0; }

.hl-nextstep .hl-nextstep__btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-layout-nextstep-btn-gap);
	margin-block-start: var(--hl-space-md);
}
.hl-nextstep .hl-nextstep__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--hl-layout-nextstep-btn-h);
	padding-inline: var(--hl-layout-nextstep-btn-pad);
	border: var(--hl-line-hair) solid transparent;
	border-radius: var(--hl-radius-pill);
	font-size: var(--hl-text-sm);
	line-height: var(--hl-leading-sm);
	font-weight: var(--hl-font-weight-semibold);
	text-decoration: none;
	transition: background 0.15s linear, color 0.15s linear;
}
.hl-nextstep .hl-nextstep__btn--success {
	background: var(--hl-color-success);
	color: var(--hl-color-ink-on-primary);
}
.hl-nextstep .hl-nextstep__btn--success:hover,
.hl-nextstep .hl-nextstep__btn--success:focus-visible {
	background: var(--hl-color-success-strong);
	color: var(--hl-color-ink-on-primary);
}
.hl-nextstep .hl-nextstep__btn--solid {
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}
.hl-nextstep .hl-nextstep__btn--solid:hover,
.hl-nextstep .hl-nextstep__btn--solid:focus-visible {
	background: var(--hl-color-primary-strong);
	color: var(--hl-color-ink-on-primary);
}
.hl-nextstep .hl-nextstep__btn--outline {
	border-color: var(--hl-color-primary);
	background: var(--hl-color-surface);
	color: var(--hl-color-primary);
}
.hl-nextstep .hl-nextstep__btn--outline:hover,
.hl-nextstep .hl-nextstep__btn--outline:focus-visible {
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}

.hl-nextstep .hl-nextstep__art {
	flex: 0 0 auto;
	inline-size: var(--hl-layout-nextstep-art);
	color: var(--hl-color-accent-soft);
}
.hl-nextstep .hl-nextstep__art svg { inline-size: 100%; block-size: auto; display: block; }
/* Dar ekranda süs, metnin yerini almasın. */
@media (max-width: 720px) {
	.hl-nextstep { flex-direction: column; }
	.hl-nextstep .hl-nextstep__art { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   KOLEKSİYON KARTI — ek alanlar
   Rozet, özellik listesi, etiket hapları, sayaç ve tam genişlik düğme.
   Hepsi veriden sürülüyor; alan boşsa hiçbir şey basılmıyor.
   ══════════════════════════════════════════════════════════════════ */
.hl-collection .hl-collection__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hl-space-2xs);
}
.hl-collection .hl-collection__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--hl-space-3xs);
	color: var(--hl-color-primary);
	font-size: var(--hl-text-badge);
	line-height: var(--hl-leading-badge);
	font-weight: var(--hl-font-weight-bold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
}
.hl-collection .hl-collection__badge svg {
	inline-size: var(--hl-text-sm);
	block-size: auto;
	flex: 0 0 auto;
}
/* Konum iğnesi: metinle aynı optik hizada dursun diye satır ortasına değil
   yazı tabanına yakın yerleşiyor. */
.hl-collection .hl-collection__pin {
	inline-size: var(--hl-text-xs);
	block-size: auto;
	margin-inline-end: var(--hl-space-3xs);
	vertical-align: -1px;
	flex: 0 0 auto;
}

.hl-collection .hl-collection__features {
	list-style: none;
	margin: var(--hl-space-2xs) 0 0;
	padding: 0;
}
.hl-collection .hl-collection__features li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--hl-space-sm);
	font-size: var(--hl-text-card-desc);
	line-height: var(--hl-leading-card-desc);
	color: var(--hl-color-ink-muted);
	list-style: none;
}
.hl-collection .hl-collection__features li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--hl-layout-list-dot-top);
	inline-size: var(--hl-layout-list-dot);
	block-size: var(--hl-layout-list-dot);
	border-radius: 50%;
	background: var(--hl-color-primary);
}

.hl-collection .hl-collection__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-layout-tag-gap);
	list-style: none;
	margin: var(--hl-space-2xs) 0 0;
	padding: 0;
}
.hl-collection .hl-collection__tag {
	margin: 0;
	padding: var(--hl-layout-tag-pad-y) var(--hl-layout-tag-pad-x);
	border-radius: var(--hl-radius-pill);
	background: var(--hl-color-surface-subtle);
	color: var(--hl-color-ink-muted);
	font-size: var(--hl-text-xs);
	line-height: var(--hl-leading-xs);
	list-style: none;
}
.hl-collection .hl-collection__tag::before { content: none; }

.hl-collection .hl-collection__count {
	margin: var(--hl-space-2xs) 0 0;
	font-size: var(--hl-text-xs);
	line-height: var(--hl-leading-xs);
	color: var(--hl-color-label);
}

/* Tam genişlik düğme: kartın alt kenarına oturur ve tıklama alanı
   metin bağlantısından çok daha büyüktür. */
.hl-collection .hl-collection__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--hl-layout-coll-btn-h);
	margin-block-start: var(--hl-space-sm);
	padding-inline: var(--hl-space-sm);
	border-radius: var(--hl-radius-pill);
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
	font-size: var(--hl-text-sm);
	line-height: var(--hl-leading-sm);
	font-weight: var(--hl-font-weight-semibold);
	text-decoration: none;
	transition: background 0.15s linear;
}
.hl-collection .hl-collection__btn:hover,
.hl-collection .hl-collection__btn:focus-visible {
	background: var(--hl-color-primary-strong);
	color: var(--hl-color-ink-on-primary);
}

/* ══════════════════════════════════════════════════════════════════
   BÖLÜM BAŞLIĞI — küçük mavi üst başlık + bölüm başlığı
   Üst başlık menüye giren metin; anchor da ondan türetiliyor.
   ══════════════════════════════════════════════════════════════════ */
.hl-sechead { margin-block: var(--hl-space-lg) var(--hl-space-sm); }
/* İki sınıf ŞART: temanın `.article-body p` kuralı (0-1-1) tek sınıflı bir
   seçiciyi ezip ölçüyü, kalınlığı ve rengi geri alıyor. */
.hl-sechead .hl-sechead__eyebrow {
	margin: 0 0 var(--hl-space-3xs);
	font-size: var(--hl-text-tone-eyebrow);
	line-height: var(--hl-leading-tone-eyebrow);
	font-weight: var(--hl-font-weight-bold);
	letter-spacing: var(--hl-tracking-wide);
	text-transform: uppercase;
	color: var(--hl-color-primary);
}
/* ÖLÇÜ, SATIR YÜKSEKLİĞİ VE KALINLIK TEMADAN GELİYOR — burada sabit
   `--hl-text-h2` yazılıydı ve h1 de h6 da aynı boyutta basılıyordu; seviye
   seçmek hiçbir şeyi değiştirmiyordu. Artık başlık, yazarın gövdede yazdığı
   h1–h6 ile AYNI ölçeği kullanıyor (Gutenberg'in başlık seçicisiyle de aynı
   sistem). Boyutu burada tekrar tanımlamak, temanın ölçeğiyle ayrışan ikinci
   bir ölçek demekti.

   Yalnızca DIŞ boşluk sıfırlanıyor: temanın h2 margin'i (32px) üst başlıkla
   başlığın arasına girip ikisini koparıyordu; bölümün dış boşluğunu
   sarmalayıcı veriyor. Renk marka token'ında kalıyor — boyut belge yapısı,
   renk markadır. */
.hl-sechead .hl-sechead__title {
	margin: 0;
	color: var(--hl-color-primary);
}

/* ══════════════════════════════════════════════════════════════════
   UZMANLIK REHBERİ — Figma: 5 kolon, ~292px kutucuk, köşe 20
   ══════════════════════════════════════════════════════════════════ */
.hl-dir { margin-block: var(--hl-space-lg); }

/* Sayaç başlığın ALTINDA ve sola yaslı — Figma böyle. Sağa yaslamak,
   geniş ekranda başlıkla arasında kopuk bir boşluk bırakıyordu ve sayı
   neyin sayısı olduğunu söylemekten uzaklaşıyordu. */
.hl-dir .hl-dir__head { margin-block-end: var(--hl-space-md); }
.hl-dir .hl-dir__title {
	margin: 0;
	font-size: var(--hl-text-h2);
	line-height: var(--hl-leading-h2);
	font-weight: var(--hl-font-weight-semibold);
	color: var(--hl-color-primary);
}
.hl-dir .hl-dir__count {
	margin: var(--hl-space-3xs) 0 0;
	font-size: var(--hl-text-dir-count);
	line-height: var(--hl-leading-dir-count);
	color: var(--hl-color-ink-muted);
}

/* ── Çipler ── */
.hl-dir .hl-dir__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hl-space-2xs);
	list-style: none;
	margin: 0 0 var(--hl-space-md);
	padding: 0;
}
.hl-dir .hl-dir__chips > li { margin: 0; padding: 0; list-style: none; }
.hl-dir .hl-dir__chips > li::before { content: none; }
.hl-dir .hl-dir__chip {
	padding: var(--hl-layout-dir-chip-pad-y) var(--hl-layout-dir-chip-pad-x);
	border: var(--hl-line-hair) solid var(--hl-color-card-line);
	border-radius: var(--hl-radius-pill);
	background: var(--hl-color-surface);
	color: var(--hl-color-ink-muted);
	font-size: var(--hl-text-sm);
	line-height: var(--hl-leading-sm);
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.12s linear, background 0.12s linear, color 0.12s linear;
}
.hl-dir .hl-dir__chip:hover { border-color: var(--hl-color-primary); color: var(--hl-color-primary); }
.hl-dir .hl-dir__chip.is-on {
	border-color: var(--hl-color-primary);
	background: var(--hl-color-primary);
	color: var(--hl-color-ink-on-primary);
}

/* ── Izgara ── */
/* KOLON SAYISI SABİT, `auto-fill` DEĞİL.
   Tasarım beş kolon; `auto-fill` kapsayıcı genişliğine göre dörde de altıya
   da düşüyor ve aynı sayfa iki temada farklı görünüyordu. Kırılma
   noktalarını açıkça yazmak, sayının tesadüfe kalmasını engelliyor. */
.hl-dir .hl-dir__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	/* TÜM KUTULAR AYNI YÜKSEKLİK. Izgara satırları varsayılan olarak kendi
	   en uzun kartına göre boyutlanıyor; bir satırda üç satırlık başlık varsa
	   o satır uzuyor, tek satırlık başlıkların olduğu satır kısa kalıyordu ve
	   ızgara dalgalı görünüyordu. `1fr` her satıra eşit yükseklik veriyor. */
	grid-auto-rows: 1fr;
	gap: var(--hl-layout-dir-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 1180px) { .hl-dir .hl-dir__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .hl-dir .hl-dir__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hl-dir .hl-dir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .hl-dir .hl-dir__grid { grid-template-columns: 1fr; } }
/* `isolation: isolate` bir yığın bağlamı kuruyor; filigran ve madalyon
   NEGATİF z-index ile kartın zemininin üstüne ama metnin altına
   yerleşebiliyor. Alternatif, metinlere `position: relative` vermekti —
   ama o zaman başlığın içindeki gerilmiş bağlantı kartı DEĞİL başlığı
   kaplıyordu ve kartın yalnızca başlığı tıklanabiliyordu. */
.hl-dir .hl-dir__tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* CTA HER KARTTA ALTTA DURSUN. Kutucuk dikey esnek kutu; CTA'nın üst
	   kenar boşluğu `auto` olduğu için kalan tüm boşluk onun ÜSTÜNE yığılıyor
	   ve düğme tabana yapışıyor. Başlık bir satır da olsa üç satır da olsa
	   düğmeler aynı hizada kalıyor. Mutlak konumlu filigran ve madalyon akış
	   dışında olduğu için etkilenmiyor. */
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--hl-layout-dir-pad);
	border-radius: var(--hl-radius-lg);
	background: var(--hl-color-surface);
	box-shadow: var(--hl-shadow-card);
	list-style: none;
	transition: box-shadow 0.15s linear;
}
.hl-dir .hl-dir__tile::before { content: none; }
.hl-dir .hl-dir__tile:hover { box-shadow: var(--hl-shadow-lift); }

/* Kutucuğun TAMAMI tıklanabilir: bağlantı kartı kaplıyor. Kartın kendisi
   konumlandırılmış olduğu için `inset: 0` kartın sınırlarına oturuyor. */
.hl-dir .hl-dir__name a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Arkadaki büyük filigran: içeriğin OKUNURLUĞUNU bozmamalı, o yüzden çok
   soluk ve taşan kısmı kırpılıyor. */
.hl-dir .hl-dir__art {
	position: absolute;
	inset-block-start: calc(var(--hl-layout-dir-pad) * -0.5);
	inset-inline-end: calc(var(--hl-layout-dir-pad) * -0.5);
	inline-size: var(--hl-layout-dir-art);
	block-size: var(--hl-layout-dir-art);
	/* KISA KARTTA KÜÇÜLÜR. Kart yalnızca başlıktan oluşabiliyor (açıklama
	   boş, CTA kapalı); o zaman kart ~70px, filigran 150px kalıyor ve
	   kırpılmış dev bir şekil olarak görünüyordu. Kutu kartı aşmıyor;
	   `mask-size: contain` oranı koruduğu için çizim bozulmadan küçülür. */
	max-block-size: 100%;
	z-index: -1;
	background: var(--hl-color-ink);
	/* Tasarımda filigran ancak fark edilir; 0.045'te çizim metnin üstünde
	   okunuyordu ve kartı gürültülü gösteriyordu. */
	opacity: 0.03;
	-webkit-mask-image: var(--hl-art);
	        mask-image: var(--hl-art);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	/* Sağ üste yaslı ve taşan kısmı kırpılıyor — tasarımda filigran kartın
	   köşesinden giriyor, ortasında durmuyor. */
	-webkit-mask-position: right top;
	        mask-position: right top;
	-webkit-mask-size: contain;
	        mask-size: contain;
	pointer-events: none;
}

/* Renkli madalyon: zemin kaydın rengi, glif beyaz. Görsel MASKE olarak
   basıldığı için dosyanın kendi rengi yok sayılıyor. */
.hl-dir .hl-dir__badge {
	position: absolute;
	inset-block-start: var(--hl-layout-dir-pad);
	inset-inline-end: var(--hl-layout-dir-pad);
	inline-size: var(--hl-layout-dir-badge);
	block-size: var(--hl-layout-dir-badge);
	border-radius: 50%;
	background: var(--hl-tint, var(--hl-color-primary));
	pointer-events: none;
	z-index: -1;
}
.hl-dir .hl-dir__badge::after {
	content: '';
	position: absolute;
	inset: 22%;
	background: var(--hl-color-ink-on-primary);
	-webkit-mask-image: var(--hl-art);
	        mask-image: var(--hl-art);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.hl-dir .hl-dir__name {
	/* Madalyonun altına girmesin. Madalyon metnin ARKASINDA (z-index:-1),
	   o yüzden yalnızca madalyon genişliği kadar yer ayrılıyor; ek boşluk
	   başlığa kalan alanı gereksiz daraltıyordu. */
	margin: 0 var(--hl-layout-dir-badge) var(--hl-space-2xs) 0;
	font-size: var(--hl-text-dir-title);
	line-height: var(--hl-leading-dir-title);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-primary);
	/* TEK UZUN KELİME. "Gastroenterology" beş kolonlu ızgarada kalan ~178px'e
	   sığmıyor; tarayıcı kelimeyi rastgele kesip ikinci satıra tek harf
	   bırakıyordu ("Gastroenterolog / y"). Tireleme geçerli hece sınırından
	   böler ve tireyi gösterir. `break-word` yalnızca tireleme başarısız
	   olursa devreye giren güvenlik ağı; `pretty` de yalnız kalan kelimeyi
	   alt satıra taşır. */
	hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: pretty;
}
.hl-dir .hl-dir__name a { color: inherit; text-decoration: none; }
.hl-dir .hl-dir__desc {
	margin: 0 0 var(--hl-space-sm);
	font-size: var(--hl-text-dir-desc);
	line-height: var(--hl-leading-dir-desc);
	color: var(--hl-color-ink-muted);
	/* İKİ SATIRA SABİT. Kutucuklar ızgarada yan yana duruyor; açıklama
	   uzunluğuna göre üç dört satıra çıkınca satırdaki tüm kutucuklar
	   onun boyuna uzuyor ve ızgara dalgalanıyordu. Tasarımda iki satır. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hl-dir .hl-dir__cta {
	display: inline-flex;
	align-items: center;
	/* `margin-block-start: auto` düğmeyi tabana iter. `align-self` şart:
	   esnek kutunun varsayılan `stretch` hizalaması hapı kartın tamamına
	   yayardı. */
	margin-block-start: auto;
	align-self: flex-start;
	gap: var(--hl-space-2xs);
	padding: var(--hl-space-3xs) var(--hl-space-xs);
	border-radius: var(--hl-radius-pill);
	background: var(--hl-color-info-tint);
	font-size: var(--hl-text-dir-cta);
	line-height: var(--hl-leading-dir-cta);
	color: var(--hl-color-primary);
}
.hl-dir .hl-dir__cta svg { inline-size: var(--hl-text-sm); block-size: auto; stroke: currentColor; }

.hl-dir .hl-dir__empty {
	margin: var(--hl-space-md) 0 0;
	font-size: var(--hl-text-base);
	color: var(--hl-color-ink-muted);
}