/* ============================================================================
   Mesleki Eğitim Merkezi — TEMEL CSS (token + tipografi + zırh)

   Tüm eklenti çıktısı `.mem-app` sarmalayıcısı altındadır:
     - sayfa shortcode'ları  → <main id="content" class="mem-app mem-main">
     - chrome partial'ları   → header/footer kendini `.mem-app` ile sarar
   Hiçbir kural global `body`/`header` seçicisine dokunmaz; istisnalar
   (skip-link, tema genişlik kısıtı, Elementor location kabı) §7'de ve
   gerekçesiyle birlikte yazılıdır.

   Yükleme sırası: base.css → hover.css → cards.css → chrome/* → pages/*.
   Zırh bu dosyanın SONUNDA (§7) durur: temayı nötrler ama sonra yüklenen
   component dosyalarının eşit özgüllüklü kuralları onu rahatça yener.
   Değerlerin tamamı dc-mem/DESIGN_TOKENS.md ve *.dc.html'den birebir gelir.
   ========================================================================== */


/* === 1. TASARIM TOKENLARI (DESIGN_TOKENS.md) ==============================
   :root üzerinde tanımlıdır; chrome, sayfa ve Elementor içi bileşenler de
   aynı değişkenleri okuyabilsin diye `.mem-app` yerine kökte durur.
   ========================================================================== */
:root {
	/* --- Marka --- */
	--mem-navy:        #092E4D; /* başlık, footer zemini, koyu metin */
	--mem-blue:        #03568A; /* birincil aksiyon, link */
	--mem-blue-dark:   #02466F; /* birincil hover */
	--mem-cyan:        #019EE3; /* aksan, alt çizgi, dekoratif */

	/* --- Yüzey --- */
	--mem-bg:          #FBFCFE; /* sayfa zemini */
	--mem-surface:     #FFFFFF; /* kart */
	--mem-surface-alt: #F5FAFD; /* alternatif bölüm zemini */
	--mem-tint:        #EAF6FC; /* çip, ikon kutusu */

	/* --- Çizgi --- */
	--mem-border:      #DCE8F0; /* kart/input kenarı */
	--mem-border-soft: #EEF4F8; /* bölüm ayracı */

	/* --- Metin --- */
	--mem-text:        #092E4D; /* başlık ve güçlü metin */
	--mem-text-muted:  #566B7F; /* gövde metni (beyaz üzerinde 5.4:1) */
	--mem-text-faint:  #617487; /* yardımcı/etiket metni */

	/* --- Durum --- */
	--mem-accent:      #C2452F; /* eyebrow numarası, uyarı vurgusu */
	--mem-success:     #0F5F50; /* doğrulanmış / E-Devlet (mint üzerinde 7.0:1) */
	--mem-success-bg:  #EFF8F5;
	--mem-focus:       #006A9E; /* :focus-visible halkası */

	/* Kullanılmayacak: #F05A43 (kontrast düşük → --mem-accent),
	   #17836F (mint zeminde 4.3:1 → --mem-success). */

	/* --- Tipografi --- */
	--mem-font-head: 'Source Serif 4', Georgia, serif;   /* 600 */
	--mem-font-body: 'Source Sans 3', Arial, sans-serif; /* 400 500 600 700 800 */

	/* --- Boşluk ve ölçü --- */
	--mem-container:    1280px;
	--mem-gutter:       clamp(20px, 4vw, 40px);
	--mem-section-y:    clamp(56px, 6vw, 96px);   /* standart bölüm */
	--mem-section-y-lg: clamp(64px, 7vw, 120px);  /* geniş bölüm */
	--mem-gap-card:     clamp(16px, 1.6vw, 22px);

	/* --- Yarıçap --- */
	--mem-r-pill:  999px; /* buton, çip */
	--mem-r-card:  18px;  /* eğitim/blog kartı */
	--mem-r-panel: 22px;  /* büyük panel */
	--mem-r-band:  28px;  /* CTA bandı, geniş kart */
	--mem-r-input: 14px;

	/* --- Gölge --- */
	--mem-shadow-card:  0 14px 40px rgba(3,86,138,.06);
	--mem-shadow-hover: 0 18px 46px rgba(3,86,138,.10);
	--mem-shadow-pop:   0 18px 40px rgba(3,86,138,.12); /* arama paneli, modal */
	--mem-shadow-fab:   0 10px 28px rgba(9,46,77,.22);  /* sabit iletişim */

	/* --- Motion --- */
	--mem-ease:     cubic-bezier(.2,.8,.2,1);
	--mem-dur-fast: .2s;  /* renk, kenar */
	--mem-dur-base: .26s; /* hover, dönüşüm */
	--mem-dur-slow: .55s; /* scroll reveal */

	/* --- Uygulamaya özgü (tasarımdan ölçülmüş sabitler) --- */
	--mem-logo-h:   52px; /* Site Header.dc.html: height:52px;width:auto */
	--mem-heading:  var(--mem-text); /* zırhtaki h1-h6 renk kancası */
	--mem-header-h: 96px; /* dc-import hint-size: 100%,96px */
}


/* === 2. SARMALAYICI ======================================================= */
.mem-app {
	font-family: var(--mem-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mem-text-muted); /* gövde metni varsayılanı; başlıklar §3'te koyulaşır */
	background: var(--mem-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Kök TAM GENİŞLİKTİR: hero, CTA bantları ve footer kenardan kenara akar;
	   ölçü `.mem-container` (1280px) ile korunur. `clip` seçildi çünkü `hidden`
	   scrollport üretip içerideki `position:sticky` yan sütunu bozardı. */
	width: 100%;
	overflow-x: clip;
}
.mem-app *,
.mem-app *::before,
.mem-app *::after { box-sizing: border-box; }

/* Elementor "Tam Genişlik" şablonunda tema <main id="content"> basmadığı için
   onu shortcode çıktısı üretiyor; sarmalayıcı görünüme hiç karışmamalı.
   tabindex="-1" yalnız atlama bağlantısının hedefi olmak için var → odak
   halkası çıkmasın. */
.mem-main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.mem-main:focus { outline: none; }


/* === 3. TİPOGRAFİ (DESIGN_TOKENS.md tipografi tablosu) ====================
   `:where()` = (0,1,0): bileşen sınıfları tek sınıfla bunu yener; sayfa
   ajanlarının her başlıkta özgüllük yarışına girmesi gerekmez.
   ========================================================================== */
/* `text-wrap` YAZILMAZ. Tasarım (dc-mem/*.dc.html) yalnız `p{text-wrap:pretty}`
   tanımlar; başlıklarda değer `wrap`tır. `balance` başlıkları tasarımdakinden
   farklı noktalardan kırıyordu (ör. Ana Sayfa "Sertifikanız E-Devlet'te
   Görünür" → "Sertifikanız E-" / "Devlet'te Görünür"). */
.mem-app :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	color: var(--mem-text);
}
.mem-app :where(h1) {
	font-family: var(--mem-font-head);
	font-weight: 600;
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1.05;
	letter-spacing: -.015em;
}
.mem-app :where(h2) {
	font-family: var(--mem-font-head);
	font-weight: 600;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.10;
	letter-spacing: -.015em;
}
/* H3 kart başlığı: serif değil, sans 700 (tasarımda 17–21px aralığı) */
.mem-app :where(h3) {
	font-family: var(--mem-font-body);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.35;
}
.mem-app :where(h4) {
	font-family: var(--mem-font-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
}
.mem-app :where(p) {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--mem-text-muted);
	text-wrap: pretty;
}
.mem-app :where(ul, ol) { margin: 0; padding-left: 1.25em; }
.mem-app :where(li) { line-height: 1.65; text-wrap: pretty; }
.mem-app :where(blockquote) {
	margin: 0;
	padding-left: 18px;
	border-left: 3px solid var(--mem-cyan);
	color: var(--mem-text);
}
.mem-app :where(figure) { margin: 0; }
.mem-app :where(figcaption) { font-size: 13px; line-height: 1.55; color: var(--mem-text-faint); }
/* Görseller blok: satır-içi taban çizgisi boşluğu kart kapaklarında 4px açık
   bırakıyordu. `height:auto` YAZILMAZ — kapak/logo kendi yüksekliğini verir. */
.mem-app :where(img, svg, video) { display: block; max-width: 100%; }
.mem-app :where(a) { color: inherit; text-decoration: none; }
.mem-app :where(strong, b) { font-weight: 700; color: var(--mem-text); }
.mem-app :where(hr) { border: 0; border-top: 1px solid var(--mem-border-soft); margin: 0; }

/* --- Rol yardımcıları (tablo satırlarının birebir karşılığı) -------------- */
/* Yardımcı metin: 13–14px / 1.55 / 600 */
.mem-app .mem-small { font-size: 13px; line-height: 1.55; font-weight: 600; color: var(--mem-text-muted); }
.mem-app .mem-small--14 { font-size: 14px; }
/* Eyebrow: 12px / 800 / .12em. Türkçe'de `text-transform:uppercase` "i→I"
   hatası ürettiği için ZORLANMAZ; metin içerikten büyük harf gelir. */
.mem-app .mem-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.4;
	color: var(--mem-eyebrow-color, var(--mem-text-muted));
}
.mem-app .mem-eyebrow--accent   { --mem-eyebrow-color: var(--mem-accent); }
.mem-app .mem-eyebrow--blue     { --mem-eyebrow-color: var(--mem-blue); }
.mem-app .mem-eyebrow--on-dark  { --mem-eyebrow-color: rgba(255,255,255,.55); }
/* Giriş paragrafı (hero altı): 18px */
.mem-app .mem-lead { font-size: 18px; line-height: 1.65; color: var(--mem-text-muted); max-width: 62ch; }

/* --- Serbest içerik (uzun açıklama, blog gövdesi) -------------------------
   `long description` ham HTML olarak basılır; sınıfsız etiketlere burada
   ritim verilir. (0,2,0) → zırhtaki `:where(a)` nötrünü yener. */
.mem-app .mem-prose > * + * { margin-top: 1em; }
.mem-app .mem-prose :where(h2, h3, h4) { margin-top: 1.6em; }
.mem-app .mem-prose :where(ul, ol) { padding-left: 1.35em; }
.mem-app .mem-prose :where(li) + li { margin-top: .4em; }
.mem-app .mem-prose a { color: var(--mem-blue); text-decoration: underline; text-underline-offset: 3px; }
.mem-app .mem-prose a:hover { color: var(--mem-blue-dark); }


/* === 4. DÜZEN (container + bölüm ritmi) =================================== */
.mem-app .mem-container {
	width: 100%;
	max-width: var(--mem-container);
	margin-inline: auto;
	padding-inline: var(--mem-gutter);
}
.mem-app .mem-section     { padding-block: var(--mem-section-y); }
.mem-app .mem-section--lg { padding-block: var(--mem-section-y-lg); }
/* Alternatif bölüm zemini + üst ayraç (tasarımda hep birlikte gelir) */
.mem-app .mem-section--alt {
	background: var(--mem-surface-alt);
	border-top: 1px solid var(--mem-border-soft);
}
.mem-app .mem-stack > * + * { margin-top: 14px; }


/* === 5. ERİŞİLEBİLİRLİK =================================================== */
/* Tasarımdaki değer: 2px #006A9E, offset 3px, radius 4px */
.mem-app :focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 3px;
	border-radius: 4px;
}
/* Dokunma hedefi ≥44px (DESIGN_TOKENS "Kırılımlar" notu) */
.mem-app .mem-tap {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mem-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mem-app [disabled],
.mem-app .is-disabled { opacity: .5; cursor: not-allowed; }


/* === 6. SCROLL REVEAL — CSS tarafı =======================================
   Sözleşme: markup `data-mem-reveal` taşır, gizleme sınıfını `.mem-rv` JS
   ekler. Böylece JS kapalı/hatalıyken içerik GÖRÜNÜR kalır (asla opacity:0
   ile başlamaz). Süre/easing token'dan; yalnız transform+opacity → CLS yok.
   ========================================================================== */
.mem-app .mem-rv {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--mem-dur-slow) var(--mem-ease),
		transform var(--mem-dur-slow) var(--mem-ease);
	will-change: opacity, transform;
}
.mem-app .mem-rv.is-in {
	opacity: 1;
	transform: none;
}


/* === 7. HELLO-ELEMENTOR + ELEMENTOR ZIRHI ================================
   Kök neden: hello-elementor `reset.css` ve Elementor Kit bu dosyadan SONRA
   yüklenir ve `a`, `button`, `button:hover`, `h1-h6`, `input:focus`,
   `table td`, `img` gibi GENEL ELEMAN seçicileriyle tek-sınıf component
   kurallarını yener. Sorun renk seçimi değil, cascade. Zırh yalnızca temayı
   NÖTRLER; görünümü hover.css / cards.css / sayfa dosyaları verir.
   #c36 = #cc3366 pembe → tasarımda yok, çıkarsa temadandır.
   ========================================================================== */

/* 7.1 Linkler — reset: a{color:#c36}; a:active,a:hover{color:#336} pembe/mor link */
.mem-app :where(a) { color: inherit; text-decoration: none; }
.mem-app :where(a:hover, a:focus) { color: inherit; }

/* 7.2 Başlıklar — reset `h1..h6{color:inherit;font-weight:500}` + Kit renk dayatması */
.mem-app :where(h1, h2, h3, h4, h5, h6) { color: var(--mem-heading, inherit); }

/* 7.3 Buton (durağan) — reset: `[type=button],[type=submit],button
   {border:1px solid #c36;color:#c36;white-space:nowrap}` → pembe metin+kenar,
   ayrıca nowrap uzun SSS sorularını yatayda taşırıyor. */
.mem-app :where(button, [type="button"], [type="submit"], [type="reset"]) {
	color: inherit;
	background: none;
	border: 0;
	font-family: inherit;
	white-space: normal; /* mobilde uzun akordeon sorusu kırpılmasın */
	min-width: 0;
	cursor: pointer;
}

/* 7.4 Buton hover/focus/active — #1 BUG: reset (0,2,0) ile PEMBE DOLGU basar
   (tab, akordeon, FAB, çip). `:is()` = (0,3,0) ile nötrlenir. Gerçek butonlar
   marka hover'ını hover.css'te `.mem-app .mem-btn--primary:hover` (0,3,0) ile
   geri alır — bu yüzden her solid CTA'ya açık `:hover` yazılmıştır. */
.mem-app :is(button, [type="button"], [type="submit"], [type="reset"]):hover,
.mem-app :is(button, [type="button"], [type="submit"], [type="reset"]):focus,
.mem-app :is(button, [type="button"], [type="submit"], [type="reset"]):active {
	background-color: transparent;
	border-color: transparent;
	color: inherit;
	box-shadow: none;
}

/* 7.5 Form alanları — reset: `input,select,textarea{border:1px solid #666}`
   (0,1,1) ve `:focus{border-color:#333}` (0,2,1). `:is()` ile (0,2,0)/(0,3,0)
   yaparak tasarımın alan görünümünü geri veriyoruz. */
.mem-app :is(input, select, textarea) {
	font-family: inherit;
	font-size: 16px; /* iOS'ta 16px altı odaklanınca sayfayı zoomlar */
	color: var(--mem-text);
	background: var(--mem-bg);
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-input);
}
.mem-app :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--mem-cyan);
	background: var(--mem-surface);
}
.mem-app :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 3px;
}
/* Pill/panel içine gömülü kenarlıksız input (arama kutusu): reset'in (0,1,1)
   `border:1px solid #666` kuralı `.mem-input-bare` (0,2,0) kuralını yener →
   `:is()` ile (0,3,0)'a çıkarılır. */
.mem-app :is(input, select, textarea).mem-input-bare {
	border: 0;
	background: transparent;
	border-radius: 0;
	min-width: 0;
}
.mem-app :is(input, select, textarea).mem-input-bare:focus { border: 0; background: transparent; }

/* 7.5b Arama alanı dolgusu — reset: `input[type="search"]{padding:.5rem 1rem}`
   (0,1,1). Tasarımda arama alanı hiç dolgu tanımlamaz (kap pill'in kendi
   `padding:0 8px 0 18px` dolgusu vardır), yani tarayıcı varsayılanı `1px 2px`
   ile çizilir. Tema 8px/16px basınca placeholder 375px'te kırpılıyor ve arşiv
   alanı 500px yerine 444px çiziliyordu.
   `:where(input)` özgüllük katmaz → kural (0,2,0): reset'i (0,1,1) yener, ama
   header/sayfa dosyalarındaki (0,2,0) bileşen kuralları SONRA yüklendiği için
   (ör. `.mem-app .mem-sfield__input{padding:0}`) onları bozmaz. */
.mem-app :where(input)[type="search"] { padding: 1px 2px; }

.mem-app :where(::placeholder) { color: var(--mem-text-faint); opacity: 1; }

/* 7.6 Elementor Pro form alanları — widget kendi gri/köşeli stilini basar;
   formu `.mem-elform` ile sarıp tasarım diline çeviriyoruz. (0,3,0)+ */
.mem-app .mem-elform .elementor-field-textual,
.mem-app .mem-elform .elementor-field-group .elementor-field-textual {
	height: 52px;
	padding: 0 16px;
	font-family: var(--mem-font-body);
	font-size: 16px;
	color: var(--mem-text);
	background: var(--mem-bg);
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-input);
	box-shadow: none;
}
.mem-app .mem-elform textarea.elementor-field-textual { height: auto; padding: 14px 16px; line-height: 1.6; }
.mem-app .mem-elform .elementor-field-textual:focus {
	border-color: var(--mem-cyan);
	background: var(--mem-surface);
	box-shadow: none;
}
.mem-app .mem-elform .elementor-field-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--mem-text);
	margin-bottom: 8px;
}
.mem-app .mem-elform .elementor-button,
.mem-app .mem-elform button[type="submit"] {
	height: 52px;
	padding: 0 24px;
	border-radius: var(--mem-r-pill);
	background: var(--mem-blue);
	color: #fff;
	font-family: var(--mem-font-body);
	font-size: 15px;
	font-weight: 700;
	border: 0;
}
/* (0,4,0) — reset'in (0,2,0) pembe dolgusunu ve 7.4 nötrünü birlikte yener */
.mem-app .mem-elform .elementor-button:hover,
.mem-app .mem-elform .elementor-button:focus,
.mem-app .mem-elform button[type="submit"]:hover,
.mem-app .mem-elform button[type="submit"]:focus {
	background: var(--mem-blue-dark);
	color: #fff;
}

/* 7.7 Tablolar — reset: `td,th{border:1px solid hsla(0,0%,50%,.5);padding:15px}`
   + tek satır zebra + satır hover grisi (WooCommerce sepet/checkout/attribute). */
.mem-app :where(table, table td, table th) { background: none; border: 0; }
.mem-app table tbody > tr:nth-child(odd) > td,
.mem-app table tbody > tr:nth-child(odd) > th,
.mem-app table tbody tr:hover > td,
.mem-app table tbody tr:hover > th { background: none; }

/* 7.8 Logo — Elementor `.elementor img{height:auto}` (0,1,1) sabit ölçülü
   logoyu devleştirir; (0,2,1) ile tasarımdaki 52px'e sabitlenir. */
.mem-app .mem-logo img,
.mem-app .mem-footer-logo img { height: var(--mem-logo-h); width: auto; }
/* E-Devlet amblemi de sabit yükseklikli basılır (aynı çakışma) */
.mem-app .mem-edevlet-logo img { height: 26px; width: auto; }

/* 7.9 [hidden] — tema/Elementor'ün `display:flex|block` kuralları `[hidden]`
   (0,1,0) niteliğini yener ve gizli paneller görünür kalır. Not: JS'te asla
   inline `display` ile toggle YAPILMAZ, `hidden` niteliği kullanılır. */
.mem-app [hidden] { display: none !important; }

/* 7.10 Burger — tema/Elementor menü stilleri hamburgeri masaüstünde de
   gösteriyor; masaüstünde gizliyoruz.

   EŞİK 1180px'DİR, 1024 DEĞİL. Tasarımın header component'i kendi eşiğini
   `Site Header.dc.html` içinde `const wide = s.w >= 1180` ile tanımlar ve
   `chrome/header.css` de tam menüyü `@media (max-width:1179px)` altında
   gizler. Burada 1024 yazıldığında 1024–1179px aralığında NE tam menü NE de
   hamburger görünüyordu (bu kural 0,2,0 ile header.css'in taban
   `.mem-burger{display:flex}` kuralını yeniyor) → o aralıkta navigasyon
   tamamen erişilemez kalıyordu. DESIGN_TOKENS'taki "≥1024 masaüstü" satırı
   grid kolonları içindir, header kırılımı için değil.

   `.mem-header` ile (0,3,0) → chrome.css'teki (0,2,0) kuralını da yener. */
@media (min-width: 1180px) {
	.mem-app .mem-header .mem-burger,
	.mem-app .mem-burger { display: none; }
}

/* 7.11 Sticky header — shortcode header, Elementor'ün konum kabının içinde
   yaşar. `position:sticky` yalnız kendi kabında çalışır; `.mem-header`'a
   sticky vermek yetmez, KAP sticky olmalı. `.mem-app` dışıdır. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Sticky kabın altındaki içerik onun üstüne binmesin */
.elementor-location-header + * { position: relative; z-index: 0; }

/* 7.12 Atlama bağlantısı — `.mem-app` dışında yaşadığı için zırhın kapsamına
   girmiyor ve reset'in `a{color:#c36}` pembesi Tab'lanınca görünüyordu. */
.skip-link.screen-reader-text:focus {
	color: var(--mem-blue);
	outline-color: var(--mem-focus);
}

/* 7.13 Tam genişlik — hello-elementor theme.css:
     body:not([class*=elementor-page-]) .site-main{max-width:1140px;padding-inline:10px}
   `elementor-page-*` yalnız Elementor ile inşa edilmiş sayfalara eklendiği
   için shortcode sayfalarımız bu kurala yakalanıp 1140px'e sıkışıyor.
   `body.mem-fullwidth` ile kapılıdır → sepet/ödeme/hesabım etkilenmez. */
body.mem-fullwidth .site-main,
body.mem-fullwidth .page-content {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}
body.mem-fullwidth .site-main > .page-content,
body.mem-fullwidth .elementor-widget-shortcode,
body.mem-fullwidth .elementor-widget-shortcode > .elementor-widget-container {
	max-width: none;
	width: 100%;
}


/* === 8. REDUCED MOTION ====================================================
   DESIGN_TOKENS: "prefers-reduced-motion: reduce altında tüm animasyon ve
   geçişler kapalı." Reveal öğeleri de anında görünür duruma düşer.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mem-app *,
	.mem-app *::before,
	.mem-app *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.mem-app .mem-rv,
	.mem-app .mem-rv.is-in {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}


/* ============ AKORDEON SORUSU: GÖVDE FONTU ==============================
   Akordeon soruları semantik olarak başlık etiketiyle (h2/h3) sarılır ve
   §7'deki `:where(h1..h6)` serif kuralına yakalanıyordu. Tasarımda bu metin
   GÖVDE fontudur (ölçüm: SSS'de 13 soru "Source Serif 4" → tasarım
   "Source Sans 3"; Sertifika Süreci ve Ana Sayfa'da da aynı).
   Serif YALNIZCA inline `font-family` verilen bölüm/sayfa başlıklarındadır.
   ========================================================================= */
.mem-app :is([data-mem-acc-btn], :has(> [data-mem-acc-btn])) {
	font-family: var(--mem-font-body);
}