/* MK Alt Sayfa Kartları — "Pratik Bilgiler" / "Hesaplamalar" gibi üst menü
   sayfalarının altındaki sayfaları, temanın .mk-card bileşeniyle listeler. */

.mkask-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 8px 0 32px;
}

/* .mk-card zaten temada tanımlı (arka plan/kenarlık/gölge/hover);
   burada sadece kartın iç düzenini ve metin tipografisini ekliyoruz.
   Tema bulunamazsa diye makul bir yedek (fallback) da tanımlanır. */
.mkask-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	background: var(--surface, #ffffff);
	border: 1px solid var(--border, #e4e7ec);
	border-radius: var(--radius-md, 20px);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 21, 27, 0.04));
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mkask-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md, 0 8px 24px rgba(16, 21, 27, 0.08));
}

.mkask-card__thumb {
	display: block;
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: var(--bg, #f7f8fa);
}

.mkask-card__body {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	flex: 1;
}

.mkask-card__title {
	font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--navy, #0b2545);
	margin-bottom: 8px;
	line-height: 1.3;
}

.mkask-card__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-soft, #4b5563);
	margin-bottom: 16px;
	flex: 1;
}

.mkask-card__arrow {
	font-size: 13px;
	font-weight: 700;
	color: var(--seal-dark, #0a6347);
	margin-top: auto;
}

.mkask-card:hover .mkask-card__arrow {
	text-decoration: underline;
}

/* Alt sayfa yoksa gösterilen boş durum kutusu — temadaki .mk-placeholder
   bulunamazsa diye kendi yedeği. */
.mkask-empty {
	min-height: 140px;
	margin: 8px 0 32px;
}

.mkask-empty.mk-placeholder {
	/* tema sınıfı zaten border/radius/desen sağlıyor */
}

.mkask-empty:not(.mk-placeholder) {
	border: 2px dashed var(--border, #e4e7ec);
	border-radius: var(--radius-lg, 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px;
}

.mkask-empty p {
	color: var(--ink-faint, #8a93a1);
	font-weight: 700;
	font-size: 14px;
	max-width: 420px;
	margin: 0 auto;
}