/* ============================================================================
   Mesleki Eğitim Merkezi — ANA SAYFA
   Kaynak tasarım: dc-mem/"Ana Sayfa.dc.html" (v2 devir paketi)

   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 eşikleri):
       colsCourse   : <768 → 1 | ≥768 → 2 | ≥1024 → 3
       colsTrust    : <768 → 1 | ≥768 → 2 | ≥1200 → 4
       colsFaq      : <900 → 1 | ≥900 → 2
       blog         : core/cards.css `.mem-card-grid--3` (1 / 2 / 3)
       heroRadius   : ≥768
       heroCardX/Y  : ≥1024
       processImgMax / processImgPos (sticky) : ≥1024

   Ö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.
   ========================================================================== */

/* === 0. SAYFA TOKENLARI (DESIGN_TOKENS.md) ================================ */
.mem-home {
	--mem-navy: #092E4D;
	--mem-blue: #03568A;
	--mem-blue-dark: #02466F;
	--mem-cyan: #019EE3;
	--mem-bg: #FBFCFE;
	--mem-surface: #FFFFFF;
	--mem-surface-alt: #F5FAFD;
	--mem-tint: #EAF6FC;
	--mem-border: #DCE8F0;
	--mem-border-soft: #EEF4F8;
	--mem-text: #092E4D;
	--mem-text-muted: #566B7F;
	--mem-text-faint: #617487;
	--mem-accent: #C2452F;
	--mem-success: #0F5F50;
	--mem-success-bg: #EFF8F5;

	--mem-ease: cubic-bezier(.2,.8,.2,1);

	font-family: 'Source Sans 3', Arial, sans-serif;
	color: var(--mem-text);
	background: var(--mem-surface);
	-webkit-font-smoothing: antialiased;
}

.mem-home :where(h1,h2,h3,h4,h5,h6) { color: inherit; }
.mem-home :where(p) { text-wrap: pretty; }
.mem-home :where(img) { display: block; max-width: 100%; }

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

@keyframes mem-home-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}


/* === 1. BUTONLAR / BAĞLANTILAR =========================================== */
.mem-app .mem-home-btn {
	height: 52px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color .2s var(--mem-ease), color .2s, border-color .2s, transform .2s var(--mem-ease);
}

/* Dolu birincil CTA — hover'ı AÇIK verilmezse tema reset'i pembeye çevirir. */
.mem-app .mem-home-btn--primary {
	padding: 0 26px;
	background: #03568A;
	border: 0;
	color: #ffffff;
}
.mem-app .mem-home-btn--primary:hover,
.mem-app .mem-home-btn--primary:focus,
.mem-app .mem-home-btn--primary:active {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
	transform: translateY(-1px);
}

/* E-Devlet bölümünün CTA'ları tasarımda 2px dar dolguludur
   (primary 0 24px, ghost 0 22px — hero'da 0 26px / 0 24px). Özgüllük
   (0,3,0) → `--primary` (0,2,0) kuralını yener. */
.mem-app .mem-home-btn.mem-home-btn--tight { padding: 0 22px; }
.mem-app .mem-home-btn--primary.mem-home-btn--tight { padding: 0 24px; }

/* Çerçeveli ikincil CTA (<a> ve <button> olarak ikisi de kullanılıyor) */
.mem-app .mem-home-btn--ghost {
	background: #ffffff;
	border: 1px solid #03568A;
	color: #03568A;
}
.mem-app .mem-home-btn--ghost:hover,
.mem-app .mem-home-btn--ghost:focus,
.mem-app .mem-home-btn--ghost:active {
	background-color: #EAF6FC;
	border-color: #03568A;
	color: #03568A;
}

/* Koyu bant üzerindeki beyaz CTA */
.mem-app .mem-home-btn--white {
	background: #ffffff;
	border: 0;
	color: #03568A;
}
.mem-app .mem-home-btn--white:hover,
.mem-app .mem-home-btn--white:focus,
.mem-app .mem-home-btn--white:active {
	background-color: #EAF6FC;
	color: #03568A;
	border-color: transparent;
	transform: translateY(-1px);
}

/* Koyu bant üzerindeki çerçeveli CTA */
.mem-app .mem-home-btn--outline {
	background: transparent;
	border: 1px solid rgba(255,255,255,.62);
	color: #ffffff;
}
.mem-app .mem-home-btn--outline:hover,
.mem-app .mem-home-btn--outline:focus,
.mem-app .mem-home-btn--outline:active {
	background-color: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.62);
	color: #ffffff;
}

/* Ok bağlantısı (bölüm başlıklarındaki "Tümünü gör") */
.mem-app .mem-home-link {
	font-size: 15px;
	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-home-link:hover,
.mem-app .mem-home-link:focus { color: #02466F; text-decoration: underline; }


/* === 2. HERO ============================================================= */
/* heroRadius: <768 küçük yay, ≥768 tasarımın uzun yayı. */
.mem-home .mem-home-hero__img { border-radius: 120px 24px 120px 24px; }

/* heroCardX / heroCardY: kart ≥1024'te sütunun dışına taşar. */
.mem-home .mem-home-hero__card { left: 12px; bottom: -16px; }

@media (min-width: 768px) {
	.mem-home .mem-home-hero__img { border-radius: 240px 28px 240px 28px; }
}
@media (min-width: 1024px) {
	.mem-home .mem-home-hero__card { left: -14px; bottom: -22px; }
}

/* Arama kutusu — kendi sonuç panelini çizmez, `mem:search` olayını fırlatır. */
.mem-app .mem-home-search-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 16px;
	font-family: inherit;
	color: #092E4D;
	outline: none;
}
/* Tema `input:focus{border-color:#333}` (0,2,1) → (0,3,0) ile nötrle. */
.mem-app .mem-home-searchbar .mem-home-search-input:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
}
.mem-app .mem-home-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.mem-app .mem-home-search-btn {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 11px;
	border: 0;
	background: #03568A;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s var(--mem-ease);
}
.mem-app .mem-home-search-btn:hover,
.mem-app .mem-home-search-btn:focus,
.mem-app .mem-home-search-btn:active {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
}


/* === 3. IZGARALAR (tasarımın Component eşikleriyle birebir) =============== */
.mem-home .mem-home-grid { display: grid; }

.mem-home .mem-home-grid--course { grid-template-columns: 1fr; gap: clamp(16px,1.6vw,22px); }
.mem-home .mem-home-grid--quad   { grid-template-columns: 1fr; gap: clamp(16px,1.6vw,22px); }
.mem-home .mem-home-grid--faq    { grid-template-columns: 1fr; gap: 14px 24px; align-items: start; }

@media (min-width: 768px) {
	.mem-home .mem-home-grid--course { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.mem-home .mem-home-grid--quad   { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 900px) {
	.mem-home .mem-home-grid--faq { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1024px) {
	.mem-home .mem-home-grid--course { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 1200px) {
	.mem-home .mem-home-grid--quad { grid-template-columns: repeat(4,minmax(0,1fr)); }
}


/* === 4. GÜVEN VE ŞEFFAFLIK KARTI (+ koşullu metrik şeridi) ===============
   Tasarım v2: ikon çıplak durur (ton kutusu YOK), dolgu her yönde eşit.
   ========================================================================== */
.mem-home .mem-home-tcard {
	background: #ffffff;
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-card);
	padding: clamp(26px,2.2vw,32px);
	box-shadow: var(--mem-shadow-card);
	transition: transform .26s var(--mem-ease), box-shadow .26s var(--mem-ease);
}
.mem-home .mem-home-tcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--mem-shadow-hover);
}


/* === 5. EĞİTİM KARTI ===================================================== */
.mem-home .mem-home-course {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-card);
	overflow: hidden;
	box-shadow: var(--mem-shadow-card);
	transition: transform .26s var(--mem-ease), box-shadow .26s var(--mem-ease);
}
.mem-home .mem-home-course:hover,
.mem-home .mem-home-course:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--mem-shadow-hover);
}

/* Kapak alanı sabittir → görsel olsa da olmasa da CLS yok. */
.mem-home .mem-home-course__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #EAF6FC;
}
.mem-home .mem-home-course__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mem-home .mem-home-chip {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: #03568A;
	background: #EAF6FC;
	border-radius: 999px;
	padding: 6px 12px;
	margin-bottom: 14px;
}

.mem-app .mem-home-course__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-home-course__link:hover,
.mem-app .mem-home-course__link:focus { color: #02466F; text-decoration: underline; }

/* WhatsApp ikon butonu: marka rengi dolu zemin + beyaz glif (handoff §6). */
.mem-app .mem-home-wa {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: #25D366;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color .2s var(--mem-ease);
}
.mem-app .mem-home-wa:hover,
.mem-app .mem-home-wa:focus {
	background-color: #1FBE5B;
	color: #ffffff;
	text-decoration: none;
}


/* === 6. SÜREÇ ADIMLARI =================================================== */
.mem-home .mem-home-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 24px 26px;
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-card);
	background: #ffffff;
	box-shadow: var(--mem-shadow-card);
}

/* processImgMax / processImgPos: yan sütun yalnız ≥1024'te daralır ve yapışır. */
@media (min-width: 1024px) {
	.mem-home .mem-home-process__media {
		max-width: 440px;
		position: sticky;
		top: 120px;
	}
}


/* === 7. SSS AKORDEONU ====================================================
   Sözleşme: [data-mem-acc] / [data-mem-acc-item] / [data-mem-acc-btn] +
   [data-mem-acc-sign] (core/accordion.js). Paneller AÇIK basılır, JS kapatır →
   ekranda hepsi kapalı başlar. Gizleme YALNIZ `hidden` niteliğiyle olur
   (inline display kullanılmaz — `[hidden]` inline display'e kaybeder).
   ========================================================================== */
.mem-home .mem-home-faq-item {
	border: 1px solid var(--mem-border);
	border-radius: var(--mem-r-card);
	background: #FBFCFE;
	overflow: hidden;
}

.mem-app .mem-home-faq-btn {
	width: 100%;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: 'Source Sans 3', Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #092E4D;
	/* Tema `button{white-space:nowrap}` uzun soruyu kırpıyordu. */
	white-space: normal;
	transition: background-color .2s var(--mem-ease);
}
.mem-app .mem-home-faq-btn:hover,
.mem-app .mem-home-faq-btn:focus {
	background-color: #F5FAFD;
	color: #092E4D;
	border-color: transparent;
}

.mem-home .mem-home-faq-sign {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #EAF6FC;
	color: #03568A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.mem-home .mem-home-faq-panel {
	padding: 0 22px 22px;
	font-size: 15px;
	line-height: 1.7;
	color: #566B7F;
}
.mem-home .mem-home-faq-panel[hidden] { display: none; }


/* === 8. BİLGİ TALEBİ MODALI (kabuk) ======================================
   Alanlar paylaşımlı parçadan gelir (templates/parts/lead-form.php).
   ========================================================================== */
.mem-home .mem-home-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(9,46,77,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.mem-home .mem-home-modal[hidden] { display: none; }

.mem-home .mem-home-modal__overlay { position: absolute; inset: 0; }

.mem-home .mem-home-modal__box {
	position: relative;
	width: min(520px,100%);
	max-height: 92dvh;
	overflow: auto;
	background: #ffffff;
	border-radius: 24px;
	padding: clamp(24px,3vw,34px);
	margin: auto;
	box-shadow: 0 20px 60px rgba(9,46,77,.28);
	animation: mem-home-in .22s var(--mem-ease) both;
}

.mem-app .mem-home-modal__close {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid #DCE8F0;
	background: #ffffff;
	color: #092E4D;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .18s;
}
.mem-app .mem-home-modal__close:hover,
.mem-app .mem-home-modal__close:focus {
	background-color: #F5FAFD;
	border-color: #DCE8F0;
	color: #092E4D;
}

.mem-app .mem-home-modal__legal { color: #03568A; font-weight: 700; text-decoration: underline; }
.mem-app .mem-home-modal__legal:hover { color: #02466F; }

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


/* === 9. FORM ALANLARI (Elementor varsayılan stilini ez) ==================
   Parça Elementor Pro Form ile gelirse alanlar gri/dar görünür; tasarım
   ölçülerine çekiyoruz. Native form gelirse bu kurallar zararsızdır.
   ========================================================================== */
.mem-app .mem-elform :is(input[type="text"],input[type="tel"],input[type="email"],input[type="search"],select,textarea),
.mem-app .mem-elform .elementor-field-textual {
	width: 100%;
	height: 52px;
	border: 1px solid #DCE8F0 !important;
	border-radius: 14px !important;
	padding: 0 16px !important;
	font-family: inherit;
	font-size: 16px !important;
	color: #092E4D !important;
	background-color: #FBFCFE !important;
	box-shadow: none !important;
	transition: border-color .18s;
}
.mem-app .mem-elform textarea,
.mem-app .mem-elform .elementor-field-textual.elementor-size-md[rows] {
	height: auto;
	padding: 14px 16px !important;
}
.mem-app .mem-elform :is(input,select,textarea):focus,
.mem-app .mem-elform .elementor-field-textual:focus {
	border-color: #03568A !important;
	background-color: #ffffff !important;
	outline: none;
}
.mem-app .mem-elform :is(label,.elementor-field-label) {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #092E4D;
	margin-bottom: 8px;
}
.mem-app .mem-elform :is(button[type="submit"],.elementor-button) {
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 999px;
	background-color: #03568A;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s;
}
.mem-app .mem-elform :is(button[type="submit"],.elementor-button):hover,
.mem-app .mem-elform :is(button[type="submit"],.elementor-button):focus {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
}


/* === 10. HAREKET AZALTMA ================================================= */
@media (prefers-reduced-motion: reduce) {
	.mem-home *,
	.mem-home *::before,
	.mem-home *::after {
		animation: none !important;
		transition: none !important;
	}
	.mem-home .mem-home-tcard:hover,
	.mem-home .mem-home-course:hover,
	.mem-app .mem-home-btn:hover,
	.mem-app .mem-home-btn:focus { transform: none; }
}