/* ============================================================================
   Mesleki Eğitim Merkezi — BLOG ARŞİVİ
   Kaynak tasarım: dc-mem/"Blog 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.
   - Kart, çip, buton ve kapak görünümü paylaşımlı atomlardan gelir
     (core/cards.css, core/hover.css) — bu dosya onları yeniden tanımlamaz.

   v1.2.1 — KATEGORİ PANELİ VE IZGARA KOLONU
   - Kırılımlar Eğitim Arşivi'yle (pages/courses.css §2) birebir aynıdır:
       ≥1024        → 280px yapışkan sol panel (liste kendi içinde kayar)
       <1024 + JS   → alt-sayfa (bottom sheet) + perde
       <1024, JS yok→ ızgaranın üstünde blok (liste yine sınırlı + kaydırmalı)
   - Izgara artık dar kapta: ölçüm (1280px kap, 1200 iç genişlik, 280 panel +
     32 boşluk → 888px) 3 kolonda kart genişliğini 280px'e düşürüyordu; bu
     yüzden `core/cards.css` `.mem-card-grid--3`'ün ≥1200 kuralı burada
     (0,3,0) ile 2 kolona çevrilir → kart 432px. Kap 1280px'te sabitlendiği
     için daha geniş ekranda da 3. kolon açılmaz (kart 300px'in altına
     düşerdi).
       <768 → 1 | ≥768 → 2 | ≥1200 → 2

   ÖZGÜLLÜK NOTU (hello-elementor reset + Elementor Kit bu dosyadan SONRA yüklenir)
   - Zırhın `:where(a){color:inherit}` nötrü (0,1,0) → link renkleri
     `.mem-blog .sınıf` (0,2,0) ile geri verilir.
   - Sayfalama adımları <a>'dır (buton değil) → reset'in `button:hover`
     pembe dolgusu onlara ulaşmaz; yine de hover renkleri açıkça yazılır.
   ========================================================================== */


/* === 1. GEZİNME YOLU ======================================================
   Tasarımın reset'i `a{color:#03568A}` / `a:hover{color:#02466F}` veriyordu;
   zırh linkleri `inherit`e çektiği için burada açıkça geri veriliyor.
   ========================================================================== */
.mem-app .mem-blog-crumbs a {
	color: var(--mem-blue);
	transition: color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-blog-crumbs a:hover,
.mem-app .mem-blog-crumbs a:focus {
	color: var(--mem-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* === 2. ARAMA KUTUSU ======================================================
   Alan `.mem-input-bare` ile kenarlıksızdır (zırh §7.5). Kabın kendisi
   odaklanınca sinyal versin — tasarımda durum stili yoktu, erişilebilirlik
   için eklendi (renk token'dan).
   ========================================================================== */
.mem-app .mem-blog-search {
	transition: border-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-blog-search:focus-within { border-color: var(--mem-cyan); }

/* Safari'nin arama alanı "x" düğmesi tasarımda yok. */
.mem-app .mem-blog-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }


/* === 3. KATEGORİ PANELİ ===================================================
   Desen kaynağı: pages/courses.css §2 (`.mem-courses-side`). İçerik ÜÇ
   durumda da erişilebilir; gizleme `hidden` niteliğiyle YAPILMAZ (masaüstüne
   dönüldüğünde `[hidden]{display:none!important}` paneli kalıcı yok ederdi).
   ========================================================================== */
.mem-app .mem-blog-layout > * { min-width: 0; }

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

.mem-blog .mem-blog-side {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	background: var(--mem-surface);
	border: 1px solid var(--mem-border);
	border-radius: 20px;
	padding: 20px 18px;
}

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

/* Kapatma düğmesi yalnız alt-sayfa modunda görünür. */
.mem-app .mem-blog-side__close {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--mem-border);
	background: var(--mem-surface);
	color: var(--mem-text);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-blog-side__close:hover,
.mem-app .mem-blog-side__close:focus {
	background-color: var(--mem-tint);
	border-color: var(--mem-border);
	color: var(--mem-text);
}

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

/* Aktif kategori çipi (yalnız <1024; ≥1024'te panel zaten gösterir).
   İKİ tuzak birden: (a) `display` ŞABLONDA INLINE OLAMAZ — media query'yi
   ezer; (b) bu taban kural ≥1024 media bloğundan ÖNCE gelmeli — aynı
   özgüllükte (0,2,0) sonra gelen kazanır (ikisi de ölçülerek bulundu). */
.mem-blog .mem-blog-active {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}


/* --- Kategori araması: yalnız JS varken (ölü kontrol basmayız) ------------ */
.mem-blog .mem-blog-side__search { display: none; }
.mem-blog--js .mem-blog-side__search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	height: 44px;
	margin-bottom: 12px;
	padding: 0 12px;
	border: 1px solid var(--mem-border);
	border-radius: 12px;
	background: var(--mem-surface);
	transition: border-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-blog--js .mem-blog-side__search:focus-within { border-color: var(--mem-cyan); }
.mem-app .mem-blog-side__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	font-size: 14px;
	font-weight: 600;
	color: var(--mem-text);
	outline: none;
}
.mem-app .mem-blog-side__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Eşleşme yoksa — JS `hidden` niteliğini kaldırır (inline display YASAK). */
.mem-blog .mem-blog-side__empty {
	margin: 10px 2px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mem-text-faint);
}
.mem-app .mem-blog [data-mem-cats-empty][hidden] { display: none; }

/* --- Liste: panelin KENDİ kaydırma alanı --------------------------------
   Taban kural JS'siz/mobil blok durumu içindir; ≥1024 ve alt-sayfada yerini
   esneyen (flex) yüksekliğe bırakır. */
.mem-blog .mem-blog-catlist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* Kaydırma çubuğu tasarım paletiyle: ince, #DCE8F0 */
	scrollbar-width: thin;
	scrollbar-color: var(--mem-border) transparent;
}
.mem-blog .mem-blog-catlist::-webkit-scrollbar { width: 8px; }
.mem-blog .mem-blog-catlist::-webkit-scrollbar-track { background: transparent; }
.mem-blog .mem-blog-catlist::-webkit-scrollbar-thumb {
	background: var(--mem-border);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.mem-blog .mem-blog-catlist::-webkit-scrollbar-thumb:hover { background: var(--mem-cyan); background-clip: content-box; }

/* Kategori satırı — çip DEĞİL: 97 karaktere kadar ad sarmalı (`.mem-chip`
   nowrap + sabit 42px yükseklikle bunu kırpardı). SANS (serif yalnız H1/H2). */
.mem-app .mem-blog-cat {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	background: transparent;
	color: var(--mem-text);
	font-family: var(--mem-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color var(--mem-dur-fast) var(--mem-ease),
	            color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-blog-cat > span:first-child { min-width: 0; }
.mem-app .mem-blog-cat:hover,
.mem-app .mem-blog-cat:focus {
	background-color: var(--mem-tint);
	color: var(--mem-blue);
	text-decoration: none;
}
.mem-app .mem-blog-cat.is-active,
.mem-app .mem-blog-cat[aria-current="page"] {
	background: var(--mem-blue);
	color: #fff;
}
.mem-app .mem-blog-cat.is-active:hover,
.mem-app .mem-blog-cat.is-active:focus,
.mem-app .mem-blog-cat[aria-current="page"]:hover,
.mem-app .mem-blog-cat[aria-current="page"]:focus {
	background-color: var(--mem-blue-dark);
	color: #fff;
}

.mem-blog .mem-blog-cat__n {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--mem-text-faint);
}
.mem-app .mem-blog-cat.is-active .mem-blog-cat__n,
.mem-app .mem-blog-cat[aria-current="page"] .mem-blog-cat__n { color: rgba(255, 255, 255, .78); }

/* Arama süzgeci gizlediği satırlar (JS `.is-hidden` ekler). */
.mem-app .mem-blog-cat.is-hidden { display: none; }

/* --- ≥1024: yapışkan kenar çubuğu --------------------------------------- */
@media (min-width: 1024px) {
	.mem-blog .mem-blog-side {
		flex: 0 0 280px;
		position: sticky;
		top: 120px;
		max-height: calc(100vh - 150px);
	}
	/* Liste kalan yüksekliği alır ve KENDİ içinde kayar (sayfa kaydırması
	   bozulmaz); `min-height:0` olmadan flex öğe kısalmaz ve panel taşardı. */
	.mem-blog .mem-blog-catlist { flex: 1 1 auto; min-height: 0; max-height: none; }
	.mem-blog .mem-blog-scrim { display: none; }
	/* Panel aktif kategoriyi zaten gösteriyor → çip tekrarı gereksiz. */
	.mem-blog .mem-blog-active { display: none; }
}

/* --- <1024 + JS: alt-sayfa (bottom sheet) -------------------------------- */
@media (max-width: 1023px) {
	.mem-blog--js .mem-blog-side {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 86;
		max-height: 86vh;
		border-width: 1px 0 0;
		border-radius: 24px 24px 0 0;
		padding: 20px 18px 28px;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .22s var(--mem-ease), visibility .22s;
	}
	.mem-blog--js .mem-blog-side.is-open {
		transform: none;
		visibility: visible;
		animation: mem-blog-sheet .22s var(--mem-ease) both;
	}
	.mem-blog--js .mem-blog-catlist { flex: 1 1 auto; min-height: 0; max-height: none; }
	.mem-blog--js .mem-blog-side__close { display: flex; }
	/* Dokunma hedefi alt-sayfada büyür (Eğitim Arşivi'yle aynı ölçü). */
	.mem-blog--js .mem-blog-cat { min-height: 44px; font-size: 15px; }
}

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

/* Alt-sayfa açıkken sabit iletişim butonları paneli ÖRTMESİN.
   Kök neden (ölçüldü): shortcode sarmalayıcısı `.mem-app.mem-main`
   `position:relative;z-index:0` ile bir YIĞIN BAĞLAMI yaratıyor → panelin
   z-index:86'sı, bağlamın DIŞINDAKİ `.mem-floating` (z-index:70) katmanını
   geçemiyor ve WhatsApp/Ara butonları listenin alt satırlarını kapatıyordu.
   Panel modaldir (perde var); açıkken FAB'ı gizlemek doğru davranıştır.
   Ölçümleme kancaları (tel:/WhatsApp <a>) DOM'da kalır, yalnız görünmez. */
html.mem-blog-lock .mem-app.mem-floating { visibility: hidden; }

/* "Kategoriler" düğmesi — yalnız JS varken ve panel gizliyken anlamlıdır. */
.mem-app .mem-blog-catbtn {
	display: none;
	height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--mem-blue);
	background: var(--mem-surface);
	color: var(--mem-blue);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-blog-catbtn:hover,
.mem-app .mem-blog-catbtn:focus,
.mem-app .mem-blog-catbtn:active {
	background-color: var(--mem-tint);
	border-color: var(--mem-blue);
	color: var(--mem-blue);
}
@media (max-width: 1023px) {
	.mem-blog--js .mem-blog-catbtn { display: inline-flex; }
}


/* === 4. IZGARA (dar kap) ==================================================
   `core/cards.css` `.mem-card-grid--3` ≥1200'de 3 kolon verir; sol panelle
   birlikte kart 280px'e düşerdi (ölçüm). (0,3,0) ile 2 kolonda kalır.
   ========================================================================== */
@media (min-width: 1200px) {
	.mem-app .mem-blog .mem-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* === 5. SAYFALAMA =========================================================
   Tasarım ölçüleri birebir: numara 46×46 / radius 12 / 15px-700,
   adım butonu 46px yükseklik / 0 18px / 14px-700 / 8px ikon boşluğu.
   Hover içerdiği için kutu metrikleri de burada tutulur (parçalanmasın).
   ========================================================================== */
.mem-app .mem-blog .mem-pg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--mem-border);
	border-radius: 12px;
	background: var(--mem-surface);
	color: var(--mem-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--mem-dur-fast) var(--mem-ease),
	            border-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-blog a.mem-pg:hover,
.mem-app .mem-blog a.mem-pg:focus {
	background-color: var(--mem-tint);
	border-color: var(--mem-cyan);
	color: var(--mem-text);
	text-decoration: none;
}

/* Geçerli sayfa — tıklanamaz <span>; kenarlık yalnız kutu ölçüsünü eşitler. */
.mem-app .mem-blog .mem-pg--current {
	background: var(--mem-blue);
	border-color: var(--mem-blue);
	color: #fff;
}

/* "Önceki" / "Sonraki" adımı: metin + ok */
.mem-app .mem-blog .mem-pg--step {
	gap: 8px;
	min-width: 0;
	padding: 0 18px;
	font-size: 14px;
}
.mem-app .mem-blog .mem-pg--step svg { flex: 0 0 auto; }

/* Atlanan aralık göstergesi */
.mem-app .mem-blog .mem-pg-gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 46px;
	color: var(--mem-text-faint);
	font-weight: 700;
}


/* === 6. BOŞ DURUM =========================================================
   Tasarımdaki buton 50px yüksekliğindedir; paylaşımlı `.mem-btn` 52px →
   yalnız bu kutuda ölçü düzeltilir (renk/hover atomdan gelir).
   ========================================================================== */
.mem-app .mem-blog-empty__cta { height: 50px; padding: 0 22px; }


/* === 7. HAREKET AZALTMA =================================================== */
@media (prefers-reduced-motion: reduce) {
	.mem-blog .mem-blog-side,
	.mem-blog .mem-blog-side.is-open,
	.mem-blog .mem-blog-cat,
	.mem-blog .mem-blog-side__close,
	.mem-blog .mem-blog-catbtn {
		animation: none !important;
		transition: none !important;
	}
}