/* ============================================================================
   Mesleki Eğitim Merkezi — CHROME / ALT CTA BANDI
   Kaynak: dc-mem/Ana Sayfa.dc.html (satır 433-456)

   Yeniden kullanılabilir parça: Ana Sayfa, Hakkımızda, SSS, Sertifika Süreci,
   Blog Detay, Eğitim Alanları. Zemin varyantı şablondan gelir
   (--alt varsayılan · --beyaz · --yok).
   ========================================================================== */

.mem-ctaband {
	padding: 0 0 clamp(56px, 6vw, 96px);
}

.mem-ctaband--alt   { background: var(--mem-surface-alt, #F5FAFD); }
.mem-ctaband--beyaz { background: var(--mem-surface, #FFFFFF); }
.mem-ctaband--yok   { background: transparent; }

.mem-ctaband__wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 6vw, 96px) clamp(20px, 4vw, 40px) 0;
}

.mem-ctaband--yok .mem-ctaband__wrap { padding-top: 0; }

/* Ana Sayfa v2: bant kendi üst boşluğunu taşımaz — ayrımı önceki bölümün alt
   dolgusu ve zemin geçişi yapar (tasarım: `padding:0 0 clamp(84px,8vw,148px)`). */
.mem-ctaband--genis { padding-bottom: clamp(84px, 8vw, 148px); }
.mem-ctaband--genis .mem-ctaband__wrap { padding-top: 0; }

.mem-ctaband__card {
	display: flex;
	flex-wrap: wrap;
	/* KENARLIK YOK: tasarımda her iki varyantta da kart yalnız `border-radius`
	   + `background:#03568A` taşır (ölçüldü: computed border-width 0px). 1px'lik
	   kenarlık koyu kartın çevresinde açık bir hale bırakıyor ve kart
	   yüksekliğini 2px şişiriyordu. */
	border-radius: var(--mem-r-band, 28px);
	overflow: hidden;
	background: var(--mem-blue, #03568A);
	/* Metin+aksiyon varyantı (varsayılan): dolgu KARTTA, tasarımdaki gibi. */
	align-items: center;
	gap: 24px;
	padding: clamp(32px, 4vw, 56px);
}

/* Fotoğraflı varyant (Ana Sayfa): sütunlar kenara dayanır, dolgu metinde. */
.mem-ctaband__card--media {
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.mem-ctaband__text {
	/* FOTOĞRAFSIZ varyantın tasarım ölçüsü (Hakkimizda / Sikca Sorulan Sorular /
	   Sertifika Sureci / Egitim Alanlari .dc.html): `flex:1 1 420px`. */
	flex: 1 1 420px;
	min-width: min(100%, 300px);
}

/* FOTOĞRAFLI varyant (Ana Sayfa.dc.html satır 328/343) — sütunlar 460/380
   tabanlıdır, 420/420 DEĞİL. 1280px kapta (1200px kart) 460/380 → 640/560;
   420/420 → 599/599 veriyordu. Metin sütununun dolgusu `clamp(36px,4vw,64px)`;
   `clamp(32px,4vw,56px)` üst genişliklerde 56px'te kapanıyordu (1512'de 60.48px
   olmalı). Başlığın 3 satıra sarması bu varyantta TASARIMIN kendisidir. */
.mem-ctaband__card--media .mem-ctaband__text {
	flex: 1 1 460px;
	min-width: min(100%, 300px);
	padding: clamp(36px, 4vw, 64px);
}

/* Taban = FOTOĞRAFSIZ varyantın tasarım ölçüsü (Hakkimizda.dc.html:104 vb.):
   `margin:0 0 12px`. Fotoğraflı varyant `--media` bloğunda 18px'e çıkarır. */
.mem-app .mem-ctaband__title {
	margin: 0 0 12px;
	font-family: var(--mem-font-head, 'Source Serif 4', Georgia, serif);
	font-weight: 600;
	/* Tasarım ölçüsü (Ana Sayfa / Egitim Alanlari .dc.html CTA bandı):
	   clamp(26px,2.8vw,40px). 3vw/44px'te 1512px'te 44px çiziliyordu (tasarım 40px). */
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.1;
	letter-spacing: -.012em;
	color: #ffffff;
}

/* Taban = FOTOĞRAFSIZ varyant: tasarımda `margin:0` — o düzende metnin ALTINDA
   buton yoktur, aksiyonlar yan sütundadır, dolayısıyla alt boşluk gerekmez.
   Fotoğraflı varyantta butonlar metnin altındadır → `--media` bloğu 32px verir. */
.mem-ctaband__desc {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
	max-width: 52ch;
}

/* Fotoğrafsız varyantın aksiyon sütunu — tasarımda `flex:0 1 auto` (274px). */
.mem-ctaband__side { flex: 0 1 auto; }

/* Taban = FOTOĞRAFSIZ varyant: dört tasarımda da (Hakkimizda / Egitim Alanlari /
   Sikca Sorulan Sorular / Sertifika Sureci .dc.html) aksiyon satırı `gap:12px`.
   14px, yan sütunu tam 2px genişletiyordu (265.44 yerine 263.44 olmalı).
   Fotoğraflı varyantta tasarım 14px'tir → `--media` bloğunda geri verilir. */
.mem-ctaband__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Ana Sayfa.dc.html:331 — fotoğraflı varyantın buton satırı `gap:14px`. (0,2,0) */
.mem-ctaband__card--media .mem-ctaband__actions { gap: 14px; }

.mem-app .mem-ctaband__btn {
	height: 52px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: background .2s, border-color .2s;
}

.mem-app .mem-ctaband__btn--light {
	border: 0;
	background: #ffffff;
	color: var(--mem-blue, #03568A);
}

.mem-app .mem-ctaband__btn--light:hover,
.mem-app .mem-ctaband__btn--light:focus-visible {
	background: var(--mem-tint, #EAF6FC);
	color: var(--mem-blue, #03568A);
	text-decoration: none;
}

.mem-app .mem-ctaband__btn--ghost {
	border: 1px solid rgba(255, 255, 255, .6);
	background: transparent;
	color: #ffffff;
}

.mem-app .mem-ctaband__btn--ghost:hover,
.mem-app .mem-ctaband__btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .6);
	color: #ffffff;
	text-decoration: none;
}

.mem-app .mem-ctaband__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	min-height: 44px;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
}

.mem-app .mem-ctaband__phone:hover,
.mem-app .mem-ctaband__phone:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

/* Görsel sütunu yalnız fotoğraflı varyantta vardır — tasarım `flex:1 1 380px`. */
/* Fotoğraflı varyantın tipografi ölçüleri Ana Sayfa.dc.html'de fotoğrafsız
   varyanttan FARKLIDIR (başlık 42/mb18, metin lh1.7/mb32, telefon mt28).
   (0,3,0) — yukarıdaki (0,2,0) taban kurallarını yener, fotoğrafsız varyanta
   (Hakkımızda/SSS/Sertifika Süreci/Eğitim Alanları) dokunmaz. */
.mem-app .mem-ctaband__card--media .mem-ctaband__title {
	margin: 0 0 18px;
	font-size: clamp(28px, 3vw, 42px);
}
.mem-app .mem-ctaband__card--media .mem-ctaband__desc {
	margin: 0 0 32px;
	line-height: 1.7;
}
.mem-app .mem-ctaband__card--media .mem-ctaband__phone { margin-top: 28px; }

.mem-ctaband__media {
	flex: 1 1 380px;
	min-width: min(100%, 280px);
}

.mem-app .mem-ctaband__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	object-position: 60% center;
}

@media (max-width: 860px) {
	/* Dar ekranda dikeye yakın varyant kullanılır (bkz. <picture>). */
	.mem-app .mem-ctaband__img { object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mem-ctaband * { transition: none !important; }
}