/* ============================================================================
   Mesleki Eğitim Merkezi — EĞİTİM ARŞİVİ
   Kaynak tasarım: dc-mem/"Egitim Arsivi.dc.html"

   PORT KURALI
   - Statik görsel/yerleşim stilleri şablonda INLINE durur (piksel sadakati +
     Elementor cascade'ine bağışıklık).
   - Bu dosya YALNIZCA responsive / hover / durum / JS'e bağlı olanı taşır.
   - Kırılımlar tasarımın Component script'iyle birebir:
       showSidebar / showFilterButton : ≥1024 (wide)
       kart ızgarası (auto-fit 255px) : DESIGN_TOKENS "açık kolon" kuralı gereği
                                        768 / 1200 eşiklerinde SABİT kolona
                                        çevrildi (öksüz kart oluşmasın).

   ÖZGÜLLÜK NOTU (hello-elementor + Elementor Kit bu dosyadan SONRA yüklenir)
   - Buton/alan kuralları `.mem-app` önekiyle (0,2,0)+ yazılır.
   - Tema `button:hover/:focus{background:#c36}` (0,2,0) → her dolu CTA'ya
     AÇIK :hover verilir (0,3,0) — aksi halde hover'da pembeleşir.
   - `core/base.css` §7.5 `:is(input,select,textarea)` kuralı radio/checkbox'a
     da kenarlık+zemin basar → §3'te (0,3,0) ile nötrlenir.
   ========================================================================== */

.mem-courses {
	font-family: var(--mem-font-body);
	color: var(--mem-text);
	background: var(--mem-bg);
}
.mem-courses :where(p) { text-wrap: pretty; }

/* Izgara öğesi kendi min-content'inden taşmasın (klasik grid-overflow düzeltmesi). */
.mem-app .mem-courses-grid > * { min-width: 0; }

@keyframes mem-courses-sheet {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}


/* === 1. BAŞLIK ALANI ===================================================== */
.mem-app .mem-courses-crumb { color: #03568A; text-decoration: none; }
.mem-app .mem-courses-crumb:hover,
.mem-app .mem-courses-crumb:focus { color: #02466F; text-decoration: underline; }

/* Arama kutusu: kap pill'dir, alan kenarlıksızdır (`.mem-input-bare` çekirdekten). */
.mem-app .mem-courses-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	font-size: 16px;
	color: #092E4D;
	outline: none;
}
.mem-app .mem-courses-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.mem-app .mem-courses-search__go {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 0;
	background: #03568A;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s;
}
.mem-app .mem-courses-search__go:hover,
.mem-app .mem-courses-search__go:focus,
.mem-app .mem-courses-search__go:active {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
}


/* === 2. FİLTRE KENAR ÇUBUĞU ==============================================
   Üç durum vardır ve içerik HER ÜÇÜNDE de erişilebilir:
     a) JS yok, <1024      → ızgaranın üstünde normal blok,
     b) JS var, <1024      → tasarımdaki alt-sayfa (bottom sheet),
     c) ≥1024              → yapışkan kenar çubuğu.
   Gizleme `hidden` niteliğiyle YAPILMAZ: masaüstüne dönüldüğünde
   `[hidden]{display:none!important}` çubuğu kalıcı olarak yok ederdi.
   ========================================================================== */
.mem-courses .mem-courses-side {
	flex: 1 1 100%;
	background: #ffffff;
	border: 1px solid #DCE8F0;
	border-radius: 20px;
	padding: 24px 22px;
}

.mem-courses .mem-courses-side__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

/* Kapatma düğmesi yalnız alt-sayfa modunda görünür. */
.mem-app .mem-courses-side__close {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid #DCE8F0;
	background: #ffffff;
	color: #092E4D;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .18s;
}
.mem-app .mem-courses-side__close:hover,
.mem-app .mem-courses-side__close:focus {
	background-color: #F5FAFD;
	border-color: #DCE8F0;
	color: #092E4D;
}

/* Alt-sayfa perdesi — yalnız JS açıkken ve <1024px'te anlamlıdır. */
.mem-courses .mem-courses-scrim {
	position: fixed;
	inset: 0;
	z-index: 85;
	background: rgba(9,46,77,.45);
}

@media (min-width: 1024px) {
	.mem-courses .mem-courses-side {
		flex: 0 0 280px;
		position: sticky;
		top: 120px;
		/* 87 kategoriye kadar büyüyebilen liste ekranı aşmasın: çubuk KENDİ
		   içinde kayar (sayfa kaydırması bozulmaz). */
		max-height: calc(100vh - 150px);
		overflow: auto;
		overscroll-behavior: contain;
	}
	.mem-courses .mem-courses-scrim { display: none; }
}

@media (max-width: 1023px) {
	.mem-courses--js .mem-courses-side {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 86;
		max-height: 86vh;
		overflow: auto;
		overscroll-behavior: contain;
		border-width: 1px 0 0;
		border-radius: 24px 24px 0 0;
		padding: 24px 22px 32px;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .22s var(--mem-ease), visibility .22s;
	}
	.mem-courses--js .mem-courses-side.is-open {
		transform: none;
		visibility: visible;
		animation: mem-courses-sheet .22s var(--mem-ease) both;
	}
	.mem-courses--js .mem-courses-side__close { display: flex; }
}

/* Alt-sayfa açıkken arka plan kaymasın (sınıfı pages/courses.js ekler/kaldırır). */
html.mem-courses-lock,
body.mem-courses-lock { overflow: hidden; }

/*
 * Sabit iletişim hapları filtre alt-sayfasının ÜSTÜNE biniyordu.
 *
 * `.mem-app.mem-main` (`position:relative; z-index:0`) bir YIĞIN BAĞLAMI yaratıyor;
 * alt-sayfanın `z-index:86`'sı o bağlamın içinde kalıyor ve bağlam dışındaki
 * `.mem-floating` (z-index:70) katmanını geçemiyor. z-index'i büyütmek çözmez —
 * karşılaştırma farklı bağlamlarda yapılıyor. Panel AÇIKKEN hapları gizliyoruz;
 * `visibility` kullanıldı, `display` değil: ölçümleme kancaları (`tel:`, WhatsApp
 * `<a>`) DOM'da kalsın. Aynı hata blog panelinde de vardı (blog.css:301).
 */
html.mem-courses-lock .mem-app.mem-floating { visibility: hidden; }


/* === 3. FİLTRE SEÇENEKLERİ ===============================================
   `core/base.css` §7.5 tüm input'lara kenarlık/zemin/yarıçap veriyor; radio ve
   checkbox'ta bu, kutucuğu bozar. (0,3,0) ile yerel appearance'a döneriz.
   ========================================================================== */
.mem-app .mem-courses-side :is(input[type="radio"], input[type="checkbox"]) {
	appearance: auto;
	-webkit-appearance: auto;
	border: 0;
	background: none;
	border-radius: 0;
	accent-color: #03568A;
}

.mem-courses .mem-courses-optlist {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mem-courses .mem-courses-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: #092E4D;
	cursor: pointer;
}
.mem-courses .mem-courses-opt--top { align-items: flex-start; }
.mem-courses .mem-courses-opt__n {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: #566B7F;
}

/* Dokunma hedefi mobil alt-sayfada 44px'e çıkar (tasarımdaki drawer ölçüsü). */
@media (max-width: 1023px) {
	.mem-courses--js .mem-courses-opt { min-height: 44px; font-size: 15px; }
}

/* Kenar çubuğu butonları */
.mem-app .mem-courses-sbtn {
	width: 100%;
	height: 46px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.mem-app .mem-courses-sbtn--solid {
	border: 0;
	background: #03568A;
	color: #ffffff;
	margin-bottom: 10px;
}
.mem-app .mem-courses-sbtn--solid:hover,
.mem-app .mem-courses-sbtn--solid:focus,
.mem-app .mem-courses-sbtn--solid:active {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
}
.mem-app .mem-courses-sbtn--soft {
	border: 1px solid #DCE8F0;
	background: #F5FAFD;
	color: #03568A;
}
.mem-app .mem-courses-sbtn--soft:hover,
.mem-app .mem-courses-sbtn--soft:focus,
.mem-app .mem-courses-sbtn--soft:active {
	background-color: #EAF6FC;
	border-color: #DCE8F0;
	color: #03568A;
	text-decoration: none;
}
.mem-app .mem-courses-sbtn--mini {
	width: auto;
	padding: 0 16px;
	border: 1px solid #03568A;
	background: #ffffff;
	color: #03568A;
	margin: 0;
}
.mem-app .mem-courses-sbtn--mini:hover,
.mem-app .mem-courses-sbtn--mini:focus,
.mem-app .mem-courses-sbtn--mini:active {
	background-color: #EAF6FC;
	border-color: #03568A;
	color: #03568A;
}

/* JS varken formlar değişince kendiliğinden gönderilir → "Uygula" gereksiz. */
.mem-courses--js .mem-courses-apply { display: none; }


/* === 4. ARAÇ ÇUBUĞU ====================================================== */
.mem-courses .mem-courses-sortform {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* "Filtrele" yalnız JS varken ve kenar çubuğu gizliyken anlamlıdır. */
.mem-app .mem-courses-filterbtn {
	display: none;
	height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid #03568A;
	background: #ffffff;
	color: #03568A;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background-color .2s;
}
.mem-app .mem-courses-filterbtn:hover,
.mem-app .mem-courses-filterbtn:focus,
.mem-app .mem-courses-filterbtn:active {
	background-color: #EAF6FC;
	border-color: #03568A;
	color: #03568A;
}
@media (max-width: 1023px) {
	.mem-courses--js .mem-courses-filterbtn { display: inline-flex; }
}


/* === 5. AKTİF FİLTRE ÇİPLERİ ============================================= */
.mem-app .mem-courses-chip {
	height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid #DCE8F0;
	background: #EAF6FC;
	color: #03568A;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background-color .18s, border-color .18s;
}
.mem-app .mem-courses-chip:hover,
.mem-app .mem-courses-chip:focus {
	background-color: #DDF0FA;
	border-color: rgba(1,158,227,.38);
	color: #03568A;
	text-decoration: none;
}


/* === 6. EĞİTİM IZGARASI VE KARTI ========================================= */
.mem-courses .mem-courses-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 1.6vw, 22px);
}
@media (min-width: 768px) {
	.mem-courses .mem-courses-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1200px) {
	.mem-courses .mem-courses-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.mem-courses .mem-courses-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #DCE8F0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(3,86,138,.06);
	transition: transform .22s var(--mem-ease), border-color .22s, box-shadow .22s;
}
.mem-courses .mem-courses-card:hover,
.mem-courses .mem-courses-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(1,158,227,.38);
	box-shadow: 0 18px 46px rgba(3,86,138,.10);
}

/* Kapak kabı `core/cards.css` → `.mem-cover` (16:9, sabit alan → CLS yok). */
.mem-courses .mem-courses-card__media { border-bottom: 1px solid #EEF4F8; }

.mem-courses .mem-courses-cat {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	color: #03568A;
	background: #EAF6FC;
	border-radius: 999px;
	padding: 6px 12px;
	margin-bottom: 12px;
}

.mem-app .mem-courses-card__title { color: inherit; text-decoration: none; }
.mem-app .mem-courses-card__title:hover,
.mem-app .mem-courses-card__title:focus { color: #03568A; text-decoration: none; }

.mem-courses .mem-courses-card__excerpt {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: #566B7F;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mem-app .mem-courses-card__link {
	font-size: 14px;
	font-weight: 700;
	color: #03568A;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	text-decoration: none;
	transition: color .2s;
}
.mem-app .mem-courses-card__link:hover,
.mem-app .mem-courses-card__link:focus { color: #02466F; text-decoration: none; }

.mem-app .mem-courses-wa {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	/* v2: dolu marka yeşili + beyaz glif (Egitim Arsivi.dc.html:134). Ana sayfa,
	   eğitim detay ilgili programlar ve mobil sticky bar aynı bileşeni kullanıyor;
	   v1'in açık mint varyantı yalnız burada kalmıştı. */
	border: none;
	background: #25D366;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color .18s;
}
.mem-app .mem-courses-wa:hover,
.mem-app .mem-courses-wa:focus,
.mem-app .mem-courses-wa:focus-visible { background-color: #1FBE5B; color: #ffffff; text-decoration: none; }


/* === 7. SAYFALAMA ======================================================== */
.mem-courses .mem-courses-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(32px, 4vw, 52px);
}

.mem-app .mem-courses-pager__num,
.mem-app .mem-courses-pager__edge {
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid #DCE8F0;
	background: #ffffff;
	color: #092E4D;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	transition: background-color .18s, border-color .18s;
}
.mem-app .mem-courses-pager__edge { font-size: 14px; padding: 0 18px; }
.mem-app .mem-courses-pager__num:hover,
.mem-app .mem-courses-pager__num:focus,
.mem-app .mem-courses-pager__edge:hover,
.mem-app .mem-courses-pager__edge:focus {
	background-color: #EAF6FC;
	border-color: #DCE8F0;
	color: #092E4D;
	text-decoration: none;
}
.mem-app .mem-courses-pager__num.is-current {
	background: #03568A;
	border-color: #03568A;
	color: #ffffff;
}
.mem-courses .mem-courses-pager__gap {
	min-width: 20px;
	text-align: center;
	color: #566B7F;
	font-weight: 700;
}


/* === 8. BOŞ DURUM BUTONLARI ============================================== */
.mem-app .mem-courses-btn {
	height: 50px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.mem-app .mem-courses-btn--primary {
	border: 0;
	background: #03568A;
	color: #ffffff;
}
.mem-app .mem-courses-btn--primary:hover,
.mem-app .mem-courses-btn--primary:focus,
.mem-app .mem-courses-btn--primary:active {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
	text-decoration: none;
}
.mem-app .mem-courses-btn--ghost {
	border: 1px solid #03568A;
	background: #ffffff;
	color: #03568A;
}
.mem-app .mem-courses-btn--ghost:hover,
.mem-app .mem-courses-btn--ghost:focus,
.mem-app .mem-courses-btn--ghost:active {
	background-color: #EAF6FC;
	border-color: #03568A;
	color: #03568A;
	text-decoration: none;
}


/* === 9. HAREKET AZALTMA ================================================== */
@media (prefers-reduced-motion: reduce) {
	.mem-courses *,
	.mem-courses *::before,
	.mem-courses *::after {
		animation: none !important;
		transition: none !important;
	}
	.mem-courses .mem-courses-card:hover { transform: none; }
}