/* ============================================================================
   Mesleki Eğitim Merkezi — PAYLAŞILAN KARTLAR
   Kaynak: `Egitim Arsivi.dc.html` (eğitim kartı, 16:9 kapak) ve
           `Blog Arsivi.dc.html` (blog kartı). Ölçüler birebir alındı.

   Kart kullanan her yüzey bu dosyayı paylaşır: ana sayfa, katalog, eğitim
   detay (ilgili eğitimler), blog arşiv/detay, arama sonuçları.
   base.css ve hover.css'ten SONRA yüklenir → `.mem-tag`, `.mem-btn-icon`,
   `.mem-link--arrow` atomları kart içinde doğrudan kullanılabilir.
   ========================================================================== */


/* ============================== KAPAK ====================================
   Kapak kabı `position:relative`tir: PHP görseli olmayan içerikte
     <img class="mem-cover-img mem-cover-img--fallback" …>
     <span class="mem-cover-brand" aria-hidden="true"></span>
   basar; marka katmanı fotoğrafın ÜSTÜNE biner (yalnız renk tonlaması —
   metin/logo yok). Oran kabı sabit olduğu için iki durumda da CLS oluşmaz.
   ========================================================================== */
.mem-app .mem-cover {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--mem-tint);
	border-bottom: 1px solid var(--mem-border-soft);
}
.mem-app .mem-cover-img {
	display: block;
	width: 100%;
	height: 100%; /* Elementor `.elementor img{height:auto}` bunu ezmesin diye (0,2,0) */
	object-fit: cover;
	object-position: center;
}
/* Marka katmanı — TASARIMDA ÖRTÜ YOK.
   Burada bir zamanlar `rgba(9,46,77,.66)` merkezli radial + mavi linear örtü
   vardı; ölçümde fallback fotoğrafını neredeyse tamamen kapatıyordu (eğitim
   detay hero'su bulanık mavi bir kareye dönüşmüştü). Tasarım dosyaları
   (Ana Sayfa / Egitim Arsivi / Egitim Detay .dc.html) `course-fallback-*.webp`
   görsellerini DÜZ basıyor: yalnız `object-fit:cover`, hiçbir katman yok —
   fotoğraflar zaten markaya özel üretilmiş ve metinsiz. Handoff'taki "marka
   katmanı" ifadesinin karşılığı bu fotoğrafların kendisidir.

   Kanca korunuyor (kabın köşe yumuşatması ve ileride istenirse ÇOK hafif bir
   ton için), ama görünür bir örtü basmıyor. */
.mem-app .mem-cover-brand {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: none;
}
/* Fallback'in ortasındaki beyaz çizgi ikon (opsiyonel, marka katmanı üstünde) */
.mem-app .mem-cover-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	pointer-events: none;
}
/* Kare kapak — eğitim detay ana görseli 1:1 fallback kullanır */
.mem-app .mem-cover--square { aspect-ratio: 1 / 1; }


/* =========================== EĞİTİM KARTI ================================ */
.mem-app .mem-card {
	display: flex;
	flex-direction: column;
	height: 100%; /* grid satırında kartlar eşit boyda kalsın */
	min-width: 0;
	background: var(--mem-surface);
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-card);
	overflow: hidden;
	box-shadow: var(--mem-shadow-card);
	transition:
		transform .22s var(--mem-ease),
		border-color .22s var(--mem-ease),
		box-shadow .22s var(--mem-ease);
}
/* `:focus-within` de yükseltir → klavyeyle gezerken kart hover'ıyla aynı geri bildirim */
.mem-app .mem-card:hover,
.mem-app .mem-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(1,158,227,.38);
	box-shadow: var(--mem-shadow-hover);
}

.mem-app .mem-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px;
}
.mem-app .mem-card-body > .mem-tag { margin-bottom: 12px; }

.mem-app .mem-card-title {
	margin: 0 0 14px;
	font-family: var(--mem-font-body);
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--mem-text);
	/* 3 satırda kırp — kart yükseklikleri ızgarada tutarlı kalsın */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mem-app .mem-card-title a { color: inherit; }
.mem-app .mem-card-title a:hover,
.mem-app .mem-card-title a:focus { color: var(--mem-blue); }

/* Meta satırı: eğitim biçimi rozeti vb. Süre/saat bilgisi KULLANILMAZ. */
.mem-app .mem-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 14px;
}
.mem-app .mem-card-meta > * {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mem-text-muted);
}
/* Doğrulama rozeti kart gövdesinde tek başına dururken alt boşluk alır */
.mem-app .mem-card-body > .mem-tag--verified { margin-bottom: 16px; }

/* Alt aksiyon şeridi: dibe yapışır (kart yükseklikleri eşitlensin) */
.mem-app .mem-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--mem-border-soft);
}


/* ============================ BLOG KARTI ================================= */
.mem-app .mem-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--mem-surface);
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-card);
	overflow: hidden;
	transition:
		transform .22s var(--mem-ease),
		box-shadow .22s var(--mem-ease);
}
.mem-app .mem-pcard:hover,
.mem-app .mem-pcard:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 46px rgba(3,86,138,.09);
}

.mem-app .mem-pcard-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}
.mem-app .mem-pcard-body > .mem-tag { margin-bottom: 12px; }

.mem-app .mem-pcard-title {
	margin: 0 0 14px;
	font-family: var(--mem-font-body);
	font-size: 19px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--mem-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mem-app .mem-pcard-title a { color: inherit; }
.mem-app .mem-pcard-title a:hover,
.mem-app .mem-pcard-title a:focus { color: var(--mem-blue); }

.mem-app .mem-pcard-excerpt {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mem-text-muted);
}
/* Tarih • okuma süresi — dibe yapışır */
.mem-app .mem-pcard-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--mem-text-muted);
}
/* Meta ayracı: 4px nokta */
.mem-app .mem-dot {
	width: 4px;
	height: 4px;
	flex: 0 0 auto;
	border-radius: var(--mem-r-pill);
	background: var(--mem-border);
}


/* =============================== IZGARA ==================================
   Kolon sayıları `auto-fit` DEĞİL, kırılıma göre AÇIK tanımlıdır
   (DESIGN_TOKENS: öksüz kart oluşmasın).
     mobil <768   → 1
     tablet ≥768  → 2
     geniş  ≥1200 → 4 (eğitim) / 3 (blog, `--3`)
   ========================================================================== */
.mem-app .mem-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mem-gap-card);
}
.mem-app .mem-card-grid > * { min-width: 0; }

@media (min-width: 768px) {
	.mem-app .mem-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.mem-app .mem-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mem-app .mem-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mem-app .mem-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Blog ızgarası tasarımda biraz daha geniş boşluk kullanır */
.mem-app .mem-card-grid--3 { gap: clamp(16px, 1.8vw, 24px); }


/* ========================== REDUCED MOTION =============================== */
@media (prefers-reduced-motion: reduce) {
	.mem-app .mem-card:hover,
	.mem-app .mem-card:focus-within,
	.mem-app .mem-pcard:hover,
	.mem-app .mem-pcard:focus-within { transform: none; }
}


/* ===================== KART BAŞLIĞI: GÖVDE FONTU =========================
   DESIGN_TOKENS: "H3 (kart) | 17–21px / 1.35 | 700 | sans".

   Tasarımda serif YALNIZCA inline `font-family:'Source Serif 4'` verilen
   sayfa/bölüm başlıklarındadır; kart başlıkları gövde fontunu miras alır.
   base.css tüm h1–h6'ya serif verdiği ve ported şablonlardaki kart başlıkları
   inline font-family taşımadığı için serif çiziliyorlardı.

   Ölçüm: eğitim arşivinde 10, eğitim alanlarında 8 kart başlığı
   "Source Serif 4" → tasarımda "Source Sans 3".
   ========================================================================= */
.mem-app :is(.mem-card, .mem-pcard, .mem-cats-card, .mem-courses-card, .mem-card-grid, [class*="-card"]) :where(h2, h3, h4),
.mem-app :where(.mem-card-title, .mem-pcard-title, .mem-courses-card__title, .mem-cats-card__title) {
	font-family: var(--mem-font-body);
}