/* ============================================================================
   Mesleki Eğitim Merkezi — SERTİFİKA SÜRECİ
   Kaynak tasarım: dc-mem/"Sertifika Sureci.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:
       cols4   : <768 → 1 | ≥768 → 2 | ≥1200 → 4
       colsFaq : <900 → 1 | ≥900 → 2

   ÖZGÜLLÜK NOTU (hello-elementor + Elementor Kit bu dosyadan SONRA yüklenir)
   - Buton/link 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 KABI ======================================================== */
.mem-process {
	font-family: 'Source Sans 3', Arial, sans-serif;
	color: #092E4D;
	background: #FBFCFE;
	-webkit-font-smoothing: antialiased;
}

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

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


/* === 1. KONUM ÇUBUĞU ======================================================
   Renk tasarımda global `a{color:#03568A}`dan geliyordu; zırh
   `.mem-app :where(a){color:inherit}` ile nötrlediği için AÇIK verilir.
   ========================================================================== */
.mem-app .mem-process-crumb__link {
	font-weight: 600;
	color: #03568A;
	text-decoration: none;
	transition: color .2s;
}
.mem-app .mem-process-crumb__link:hover,
.mem-app .mem-process-crumb__link:focus {
	color: #02466F;
	text-decoration: underline;
}


/* === 2. HERO CTA'LARI ===================================================== */
.mem-app .mem-process-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, color .2s, border-color .2s;
}

/* Dolu birincil CTA — hover'ı AÇIK verilmezse tema reset'i pembeye çevirir. */
.mem-app .mem-process-btn--primary {
	background: #03568A;
	border: 0;
	color: #ffffff;
}
.mem-app .mem-process-btn--primary:hover,
.mem-app .mem-process-btn--primary:focus,
.mem-app .mem-process-btn--primary:active {
	background-color: #02466F;
	color: #ffffff;
	border-color: transparent;
	text-decoration: none;
}

/* Çerçeveli ikincil CTA */
.mem-app .mem-process-btn--ghost {
	padding: 0 22px;
	background: #ffffff;
	border: 1px solid #03568A;
	color: #03568A;
}
.mem-app .mem-process-btn--ghost:hover,
.mem-app .mem-process-btn--ghost:focus,
.mem-app .mem-process-btn--ghost:active {
	background-color: #EAF6FC;
	border-color: #03568A;
	color: #03568A;
	text-decoration: none;
}


/* === 3. IZGARALAR ========================================================= */
/* Adım kartlarının auto-fit ızgarası şablonda inline durur (statik, kırılıma
   bağlı değil); burada yalnız doğrulanan-alan ızgarası tanımlanır. */
.mem-process .mem-process-grid--quad {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

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


/* === 4. SSS AKORDEONU ====================================================
   Sözleşme: [data-mem-acc] > [data-mem-acc-item] > button[data-mem-acc-btn]
   (core/accordion.js). Paneller AÇIK basılır, JS kapatır; gizleme yalnız
   `hidden` niteliğiyle (base.css §7.9 `[hidden]{display:none!important}`).
   `align-items:start` tasarımdan gelir: bir öğe açıldığında satır arkadaşı
   boyuna uzamaz. Tüm öğeler kapalı başladığı için kutular eşit yükseklikte.
   ========================================================================== */
.mem-process .mem-process-faq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 24px;
	align-items: start;
}

@media (min-width: 900px) {
	.mem-process .mem-process-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mem-process .mem-process-faq-item {
	border: 1px solid #DCE8F0;
	border-radius: 16px;
	background: #ffffff;
	overflow: hidden;
}

.mem-app .mem-process-faq-btn {
	width: 100%;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #092E4D;
	/* Tema `button{white-space:nowrap}` uzun soruyu mobilde kırpıyordu. */
	white-space: normal;
}
.mem-app .mem-process-faq-btn:hover,
.mem-app .mem-process-faq-btn:focus {
	background-color: #F5FAFD;
	color: #092E4D;
	border-color: transparent;
}

.mem-process .mem-process-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-process .mem-process-faq-panel {
	padding: 0 20px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: #566B7F;
}


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