/* ============================================================================
   Mesleki Eğitim Merkezi — PAYLAŞILAN AKSİYON ATOMLARI (buton / çip / link)

   Tasarımdaki `style-hover="..."` niteliği Claude Design runtime'ına özgüdür
   ve production'da çalışmaz. 30 farklı değere inen 175 kullanım burada gerçek
   sınıflara çevrildi; ölçüler *.dc.html'den birebir alındı
   (52px yükseklik, 999px yarıçap, 15px/700 tipografi, 42px çip vb.).

   Özgüllük notu: bu dosya base.css'ten SONRA yüklenir. `.mem-app .mem-btn`
   (0,2,0) zırhın `:where(button)` (0,1,0) nötrünü; `.mem-app .mem-btn:hover`
   (0,3,0) ise hem reset'in (0,2,0) pembe dolgusunu hem zırhın (0,3,0)
   nötrünü (sıra avantajıyla) yener. Bu yüzden HER solid CTA'nın açık bir
   `:hover` kuralı vardır — yoksa tema onu şeffaf bırakır.
   ========================================================================== */


/* ============================== BUTON ==================================== */
.mem-app .mem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--mem-r-pill);
	font-family: var(--mem-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--mem-dur-fast) var(--mem-ease),
		border-color var(--mem-dur-fast) var(--mem-ease),
		color var(--mem-dur-fast) var(--mem-ease),
		transform var(--mem-dur-base) var(--mem-ease),
		box-shadow var(--mem-dur-base) var(--mem-ease);
}
/* İkonlar metinle aynı renkte aksın (stroke="currentColor") */
.mem-app .mem-btn svg { flex: 0 0 auto; }
/* Uzun etiketli butonlar (mobil, "Ücretsiz Bilgi Al" gibi) sarabilsin */
.mem-app .mem-btn--wrap { white-space: normal; height: auto; min-height: 52px; padding-block: 12px; }

/* --- Birincil: dolu mavi (tasarımda 4+5 kez) ----------------------------- */
.mem-app .mem-btn--primary {
	background: var(--mem-blue);
	color: #fff;
	border-color: var(--mem-blue);
}
.mem-app .mem-btn--primary:hover,
.mem-app .mem-btn--primary:focus {
	background: var(--mem-blue-dark);
	border-color: var(--mem-blue-dark);
	color: #fff;
}

/* --- İkincil / outline: beyaz zemin, mavi kenar -------------------------- */
.mem-app .mem-btn--ghost {
	background: var(--mem-surface);
	color: var(--mem-blue);
	border-color: var(--mem-blue);
}
.mem-app .mem-btn--ghost:hover,
.mem-app .mem-btn--ghost:focus {
	background: var(--mem-tint);
	color: var(--mem-blue);
	border-color: var(--mem-blue);
}

/* --- Sessiz outline: nötr kenar (filtre/sayfalama komşuluğu) ------------- */
.mem-app .mem-btn--quiet {
	background: var(--mem-surface);
	color: var(--mem-text);
	border-color: var(--mem-border);
}
.mem-app .mem-btn--quiet:hover,
.mem-app .mem-btn--quiet:focus {
	background: var(--mem-tint);
	border-color: var(--mem-cyan);
	color: var(--mem-text);
}

/* --- Koyu/mavi zemin üstü: dolu beyaz (CTA bandı) ------------------------ */
.mem-app .mem-btn--light {
	background: #fff;
	color: var(--mem-blue);
	border-color: #fff;
}
.mem-app .mem-btn--light:hover,
.mem-app .mem-btn--light:focus {
	background: var(--mem-tint);
	color: var(--mem-blue);
	border-color: var(--mem-tint);
}

/* --- Koyu zemin üstü outline: yarı saydam beyaz kenar -------------------- */
.mem-app .mem-btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.6);
}
.mem-app .mem-btn--outline-light:hover,
.mem-app .mem-btn--outline-light:focus {
	background: rgba(255,255,255,.12);
	color: #fff;
	border-color: rgba(255,255,255,.7);
}
/* Koyu zeminde odak halkası #006A9E görünmez → beyaza çevrilir */
.mem-app .mem-btn--outline-light:focus-visible,
.mem-app .mem-btn--light:focus-visible { outline-color: #fff; }

/* --- Pill: kompakt ikincil aksiyon (46px, tasarımda liste/kart altı) ----- */
.mem-app .mem-btn--pill {
	height: 46px;
	padding: 0 18px;
	font-size: 14px;
	border-radius: var(--mem-r-pill);
	background: var(--mem-surface-alt);
	color: var(--mem-blue);
	border-color: var(--mem-border);
}
.mem-app .mem-btn--pill:hover,
.mem-app .mem-btn--pill:focus {
	background: var(--mem-tint);
	border-color: var(--mem-cyan);
	color: var(--mem-blue);
}

/* --- Ölçü ve yerleşim değiştiricileri ------------------------------------ */
.mem-app .mem-btn--sm    { height: 46px; padding: 0 18px; font-size: 14px; }
.mem-app .mem-btn--lg    { height: 52px; padding: 0 26px; }
.mem-app .mem-btn--block { width: 100%; }
.mem-app .mem-btn--grow  { flex: 1; }

/* --- Yuvarlak ikon butonu (46×46, dokunma hedefi ≥44px) ------------------ */
.mem-app .mem-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-pill);
	background: var(--mem-surface);
	color: var(--mem-text);
	cursor: pointer;
	transition: background-color var(--mem-dur-fast) var(--mem-ease),
	            border-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-btn-icon:hover,
.mem-app .mem-btn-icon:focus {
	background: var(--mem-tint);
	border-color: var(--mem-cyan);
	color: var(--mem-blue);
}
/* WhatsApp aksiyonu: 44×44, dolu marka rengi (v2). Glif `stroke="currentColor"`
   taşıdığı için beyazı buradan alır; tasarımdaki dolu yeşil zemin üstüne
   basılan `stroke="#25D366"` görünmez glif tasarım hatasıdır, uygulanmadı. */
.mem-app .mem-btn-icon--wa {
	width: 44px;
	height: 44px;
	border: none;
	background: #25D366;
	color: #fff;
}
.mem-app .mem-btn-icon--wa:hover,
.mem-app .mem-btn-icon--wa:focus,
.mem-app .mem-btn-icon--wa:focus-visible {
	background: #1FBE5B;
	border-color: transparent;
	color: #fff;
}


/* ================================ ÇİP ====================================
   Filtre çipi: 42px, seçili durum `aria-pressed="true"` ile İŞARETLENİR —
   sınıf `.is-active` yalnız görsel yedek. İkisi de aynı kuralı tetikler.
   ========================================================================== */
.mem-app .mem-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-pill);
	background: var(--mem-surface);
	color: var(--mem-blue);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--mem-dur-fast) var(--mem-ease),
	            border-color var(--mem-dur-fast) var(--mem-ease),
	            color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-chip:hover,
.mem-app .mem-chip:focus {
	background: var(--mem-tint);
	border-color: var(--mem-cyan);
	color: var(--mem-blue);
}
/* Seçili çip — (0,3,0) sıra avantajıyla yukarıdaki hover'ı da korur */
.mem-app .mem-chip[aria-pressed="true"],
.mem-app .mem-chip.is-active {
	background: var(--mem-blue);
	border-color: var(--mem-blue);
	color: #fff;
}
.mem-app .mem-chip[aria-pressed="true"]:hover,
.mem-app .mem-chip[aria-pressed="true"]:focus,
.mem-app .mem-chip.is-active:hover,
.mem-app .mem-chip.is-active:focus {
	background: var(--mem-blue-dark);
	border-color: var(--mem-blue-dark);
	color: #fff;
}
/* Kaldırılabilir aktif filtre çipi (38px, dolu tint) */
.mem-app .mem-chip--removable {
	height: 38px;
	padding: 0 14px;
	font-size: 13px;
	background: var(--mem-tint);
}

/* Etiket çipi — tıklanmaz, kart/hero kategori rozeti (11px/800/.08em) */
.mem-app .mem-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1;
	color: var(--mem-blue);
	background: var(--mem-tint);
	border-radius: var(--mem-r-pill);
	padding: 6px 12px;
}
/* Doğrulanmış / E-Devlet rozeti (12px, mint) */
.mem-app .mem-tag--verified {
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--mem-success);
	background: var(--mem-success-bg);
	padding: 7px 12px;
}


/* ================================ LİNK =================================== */
.mem-app .mem-link {
	color: var(--mem-blue);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--mem-dur-fast) var(--mem-ease),
	            gap var(--mem-dur-base) var(--mem-ease),
	            padding-left var(--mem-dur-base) var(--mem-ease);
}
.mem-app .mem-link:hover,
.mem-app .mem-link:focus { color: var(--mem-blue-dark); }

/* Oklu link — tasarımda 14px/700, dokunma hedefi için min 44px yükseklik */
.mem-app .mem-link--arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
}
.mem-app .mem-link--arrow:hover,
.mem-app .mem-link--arrow:focus { gap: 11px; }

/* Liste linki — hover'da içeri kayar (style-hover="color:#03568A;padding-left:8px") */
.mem-app .mem-link--slide { display: inline-block; color: var(--mem-text-muted); }
.mem-app .mem-link--slide:hover,
.mem-app .mem-link--slide:focus { color: var(--mem-blue); padding-left: 8px; }

/* Altı çizili gövde linki */
.mem-app .mem-link--underline { text-decoration: underline; text-underline-offset: 3px; }

/* Koyu zeminde link (footer) */
.mem-app .mem-link--on-dark { color: rgba(255,255,255,.82); }
.mem-app .mem-link--on-dark:hover,
.mem-app .mem-link--on-dark:focus { color: #fff; }
.mem-app .mem-link--on-dark:focus-visible { outline-color: #fff; }

/* Sessiz/yardımcı link */
.mem-app .mem-link--muted { color: var(--mem-text-muted); font-weight: 600; }
.mem-app .mem-link--muted:hover,
.mem-app .mem-link--muted:focus { color: var(--mem-blue); }


/* ============================ YÜKSELME =================================== */
/* Tıklanabilir yüzey hover'ı — kartlar dışında panel/kutu için (cards.css
   kendi `.mem-card:hover` kuralını taşır). */
.mem-app .mem-lift {
	transition: transform var(--mem-dur-base) var(--mem-ease),
	            border-color var(--mem-dur-base) var(--mem-ease),
	            box-shadow var(--mem-dur-base) var(--mem-ease);
}
.mem-app .mem-lift:hover,
.mem-app .mem-lift:focus-within {
	transform: translateY(-3px);
	border-color: rgba(1,158,227,.38);
	box-shadow: var(--mem-shadow-hover);
}
/* Yatay kayan satır öğesi (style-hover="border-color:...;transform:translateX(4px)") */
.mem-app .mem-slide-x {
	transition: transform var(--mem-dur-base) var(--mem-ease),
	            border-color var(--mem-dur-base) var(--mem-ease);
}
.mem-app .mem-slide-x:hover,
.mem-app .mem-slide-x:focus-within {
	transform: translateX(4px);
	border-color: rgba(1,158,227,.4);
}


/* ========================== REDUCED MOTION =============================== */
@media (prefers-reduced-motion: reduce) {
	.mem-app .mem-lift:hover,
	.mem-app .mem-lift:focus-within,
	.mem-app .mem-slide-x:hover,
	.mem-app .mem-slide-x:focus-within { transform: none; }
	.mem-app .mem-link--arrow:hover,
	.mem-app .mem-link--arrow:focus { gap: 8px; }
	.mem-app .mem-link--slide:hover,
	.mem-app .mem-link--slide:focus { padding-left: 0; }
}