/* Akıllı Yem Görselli Metin Alanı — yapısal (responsive) stiller.
 * Renk/boyut/boşluk gibi ayarlanabilir değerler, her bölüm için
 * ayrıca üretilen satır-içi <style> bloğunda (id ile scope'lanmış) gelir. */

.akilliyem-gvma {
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}
.akilliyem-gvma *,
.akilliyem-gvma *::before,
.akilliyem-gvma *::after {
	box-sizing: border-box;
}

.akilliyem-gvma__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	/* align-items varsayılanı (stretch) kasıtlı olarak override edilmiyor:
	   böylece medya ve metin kutusu sütunları, masaüstünde, aralarından
	   hangisi daha uzunsa onun yüksekliğine otomatik olarak eşitlenir
	   (bkz. aşağıdaki masaüstüne özel kurallar). */
}

.akilliyem-gvma--media_right .akilliyem-gvma__media-col {
	order: 2;
}
.akilliyem-gvma--media_right .akilliyem-gvma__text-col {
	order: 1;
}
.akilliyem-gvma--media_left .akilliyem-gvma__media-col {
	order: 1;
}
.akilliyem-gvma--media_left .akilliyem-gvma__text-col {
	order: 2;
}

.akilliyem-gvma__media-col {
	position: relative;
	width: 100%;
}

.akilliyem-gvma__video,
.akilliyem-gvma__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.akilliyem-gvma__video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	border-radius: 16px;
	overflow: hidden;
}
.akilliyem-gvma__video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.akilliyem-gvma__video-fallback-link {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 8px;
	background: #f2f2f2;
	color: #222;
	text-decoration: none;
	font-weight: 600;
}

.akilliyem-gvma__text-box {
	width: 100%;
	box-sizing: border-box;
}

.akilliyem-gvma__heading {
	margin: 0 0 24px;
}

.akilliyem-gvma__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.akilliyem-gvma__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.akilliyem-gvma__item-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
}
.akilliyem-gvma__item-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.akilliyem-gvma__item-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.akilliyem-gvma__item-title,
.akilliyem-gvma__item-desc {
	margin: 0;
	display: block;
}

@media (max-width: 782px) {
	.akilliyem-gvma__inner {
		grid-template-columns: 1fr !important;
	}
	.akilliyem-gvma--media_left .akilliyem-gvma__media-col,
	.akilliyem-gvma--media_right .akilliyem-gvma__media-col {
		order: 1;
	}
	.akilliyem-gvma--media_left .akilliyem-gvma__text-col,
	.akilliyem-gvma--media_right .akilliyem-gvma__text-col {
		order: 2;
	}
}

/* --- Masaüstünde (yan yana 2 sütun) medya alanı ile metin kutusu
   yüksekliği birbirine EŞİTLENİR: Grid'in varsayılan "stretch" davranışı
   sayesinde her iki sütun da satırdaki en uzun sütunun yüksekliğini alır;
   burada medyanın (görsel/video/embed) bu tam yüksekliği doldurması,
   metin kutusunun da içeriğini dikeyde ortalaması sağlanıyor. Mobilde
   (yukarıdaki 782px kuralı ile tek sütuna düşünce) bu kurallar devre
   dışı kalır ve medya kendi doğal en-boy oranına döner. --- */
@media (min-width: 783px) {
	.akilliyem-gvma__media-col {
		height: 100%;
	}
	.akilliyem-gvma__video,
	.akilliyem-gvma__image {
		height: 100%;
		object-fit: cover;
	}
	.akilliyem-gvma__video-embed {
		height: 100%;
		padding-top: 0; /* 16:9 tuzağı yerine tam yükseklik kullanılıyor */
	}
	.akilliyem-gvma__text-col {
		height: 100%;
		display: flex;
	}
	.akilliyem-gvma__text-box {
		display: flex;
		flex-direction: column;
		justify-content: center; /* medya daha uzunsa metin dikeyde ortalanır */
	}
}

/* Kullanıcı azaltılmış hareket istiyorsa animasyonları devre dışı bırak. */
@media (prefers-reduced-motion: reduce) {
	.akilliyem-gvma__anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}