/* ============================================================================
   Mesleki Eğitim Merkezi — HAKKIMIZDA
   Kaynak tasarım: dc-mem/"Hakkimizda.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 olanı taşır.
   - Kırılımlar tasarımın Component script'iyle birebir:
       cols4 : <768 → 1 | ≥768 → 2 | ≥1200 → 4

   ÖZGÜLLÜK NOTU (hello-elementor + Elementor Kit bu dosyadan SONRA yüklenir)
   - Link/buton kuralları `.mem-app` önekiyle (0,2,0)+ yazılır.
   - Tema `a{color:#c36}` ve `button:hover{background:#c36}` → renk veren her
     kural AÇIK yazılır; sayfadaki tek CTA grubu paylaşımlı chrome/cta-band'dir
     ve kendi hover'larını taşır.
   ========================================================================== */

/* === 0. SAYFA KABI ======================================================== */
.mem-about {
	font-family: 'Source Sans 3', Arial, sans-serif;
	color: #092E4D;
	background: #FBFCFE;
	-webkit-font-smoothing: antialiased;
}

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

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


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


/* === 2. IZGARA (değer kartları + koşullu metrik şeridi) ===================
   Tasarımın Component script'indeki cols4 değerinin gerçek media query karşılığı.
   ========================================================================== */
.mem-about .mem-about-grid { display: grid; }
.mem-about .mem-about-grid--quad {
	grid-template-columns: 1fr;
	gap: 14px;
}

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


/* === 3. ALT CTA BANDI (paylaşımlı parça) =================================
   Tasarımda CTA bölümü sayfa zemininde durur ve üstünde tam bölüm boşluğu
   vardır. Parçanın `--yok` varyantı üst boşluğu sıfırlar (0,2,0) → burada
   (0,3,0) ile tasarımdaki değere geri çekiyoruz. Parça dosyası DEĞİŞMEZ.
   ========================================================================== */
.mem-about .mem-ctaband--yok .mem-ctaband__wrap {
	padding-top: clamp(56px, 6vw, 96px);
}


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