/**
 * Odo Project Blocks – APY.com.tr imageblock benzeri zigzag layout
 * Sitedeki proje blokları: resim solda/sağda değişimli, metin karşı tarafta
 */

.odo-project-blocks {
	--odo-pb-height: 70vh;
	--odo-pb-pad: clamp(1.5rem, 4vw, 2.5rem);
	--odo-pb-bg: var(--apy-surface, #ffffff);
	--odo-pb-surface: var(--apy-surface, #ffffff);
	--odo-pb-text: var(--apy-text, #1d1d1b);
	--odo-pb-muted: var(--apy-muted, #6b6b67);
	--odo-pb-border: var(--apy-border, #dfddd7);
	--odo-pb-primary: var(--apy-primary, #8f7452);
}

.odo-pb-empty {
	margin: 2rem;
	padding: 1rem;
	color: var(--odo-pb-muted);
}

/* Her bir section – zigzag için img-right / img-left */
.odo-project-blocks .odo-pb-section {
	position: relative;
	min-height: var(--odo-pb-height);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	overflow: hidden;
	background: var(--odo-pb-surface);
}

/* Resim sağda */
.odo-project-blocks .odo-pb--img-right {
	grid-template-areas: "content media";
}

.odo-project-blocks .odo-pb--img-right .odo-pb__media {
	grid-area: media;
}

.odo-project-blocks .odo-pb--img-right .odo-pb__content-wrap {
	grid-area: content;
	justify-content: flex-end;
	text-align: right;
}

/* Resim solda – zigzag */
.odo-project-blocks .odo-pb--img-left {
	grid-template-areas: "media content";
}

.odo-project-blocks .odo-pb--img-left .odo-pb__media {
	grid-area: media;
}

.odo-project-blocks .odo-pb--img-left .odo-pb__content-wrap {
	grid-area: content;
	justify-content: flex-start;
	text-align: left;
}

/* Resim alanı – cardların altında (derinlik için z-index); grid satırı yüksekliğini doldurur */
.odo-project-blocks .odo-pb__media {
	position: relative;
	overflow: hidden;
	z-index: 0;
	align-self: stretch;
	min-height: 100%;
}

/* Link, grid öğesi .odo-pb__media içinde olmalı (dış sarmalayıcı grid'i bozuyordu). */
.odo-project-blocks .odo-pb__media .odo-pb__media-link,
.odo-project-blocks .odo-pb__media a {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	position: relative;
}

/* Görsel üzeri overlay (blok bazında renk + metin) */
.odo-project-blocks .odo-pb__media-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vw, 1.5rem);
	text-align: center;
	pointer-events: none;
	background-color: var(--odo-pb-mo-bg, transparent);
	transition: background-color 0.28s ease;
}

.odo-project-blocks .odo-pb__media-link:hover .odo-pb__media-overlay,
.odo-project-blocks .odo-pb__media:hover .odo-pb__media-overlay {
	background-color: var(--odo-pb-mo-hover, var(--odo-pb-mo-bg, transparent));
}

.odo-project-blocks .odo-pb__media-overlay--has-text .odo-pb__media-overlay-text {
	color: #ffffff;
	font-size: clamp(0.95rem, 1.8vw, 1.2rem);
	font-weight: 600;
	line-height: 1.35;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
	max-width: 90%;
}

/*
 * Parallax translateY için üst/alt pay: bölüm min-height büyüdükçe eski %130 yetmezdi (scroll’da boşluk).
 * %200 yükseklik + top -%50 ≈ medya yüksekliğinin yarısı kadar yukarı/aşağı güvenli hareket alanı.
 */
.odo-project-blocks .odo-pb__img-holder {
	position: absolute;
	left: -15%;
	top: -50%;
	width: 130%;
	height: 200%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
}

.odo-project-blocks .odo-pb__img-holder img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.odo-project-blocks .odo-pb__img-placeholder {
	inset: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--odo-pb-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--odo-pb-muted);
	font-size: 0.9rem;
}

/* İçerik alanı – kart üstte, resim altta hissi */
.odo-project-blocks .odo-pb__content-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: var(--odo-pb-pad);
	background: var(--odo-pb-bg);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06), 8px 0 24px rgba(0, 0, 0, 0.04);
}

.odo-project-blocks .odo-pb--img-left .odo-pb__content-wrap {
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.06), -8px 0 24px rgba(0, 0, 0, 0.04);
}

/* Büyük arka plan yılı – dekoratif, içerikle ortalanmış */
.odo-project-blocks .odo-pb__year-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: clamp(5rem, 14vw, 11rem);
	font-weight: 800;
	line-height: 1;
	color: black;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 0;
	letter-spacing: -0.02em;
}

.odo-project-blocks .odo-pb__content {
	position: relative;
	z-index: 1;
	width: 100%;
	
}

.odo-pb--img-right .odo-pb__content {
	margin-right: 0;
	text-align: center;
	margin: auto;
}

.odo-pb--img-left .odo-pb__content {
	margin-left: 0;
	text-align: center;
	margin: auto;
}

/* Tipografi */
.odo-project-blocks .odo-pb__year {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--odo-pb-primary);
	letter-spacing: 0.05em;
}

.odo-project-blocks .odo-pb__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--odo-pb-text);
}

.odo-project-blocks .odo-pb__subtitle {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--odo-pb-muted);
}

.odo-project-blocks .odo-pb__stats {
	margin: 0 0 1rem;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 600;
	color: var(--odo-pb-text);
	line-height: 1.35;
}

.odo-project-blocks .odo-pb__services-label {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--odo-pb-text);
}

.odo-project-blocks .odo-pb__services {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--odo-pb-muted);
}

/* İçerik kartındaki link stillerini ezmek için içerik + a sınıfı; background shorthand !important teması için !important */
.odo-project-blocks .odo-pb__content a.odo-pb__btn {
	display: inline-block;
	box-sizing: border-box;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-align: center;
	color: var(--odo-pb-btn-color, var(--odo-pb-primary)) !important;
	background-color: var(--odo-pb-btn-bg, transparent) !important;
	background-image: none !important;
	border: 0;
	border-radius: var(--odo-pb-btn-radius, 0);
	padding: var(--odo-pb-btn-padding, 0);
	text-decoration: none !important;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
	box-shadow: none;
}

/*
 * Yapılandırılmış butonlar (odo-pb__btn-cfg-*) hover’ı wp_footer’daki dinamik CSS ile gelir;
 * bu kural onlara uygulanmaz — aksi halde !important + var() çakışması hover arka planını bozar.
 */
.odo-project-blocks .odo-pb__content a.odo-pb__btn:not([class*='odo-pb__btn-cfg-']):hover,
.odo-project-blocks .odo-pb__content a.odo-pb__btn:not([class*='odo-pb__btn-cfg-']):focus-visible {
	color: var(--odo-pb-btn-hover-color, var(--odo-pb-text)) !important;
	background-color: var(--odo-pb-btn-hover-bg, var(--odo-pb-btn-bg, transparent)) !important;
	background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.odo-project-blocks .odo-pb__img-holder {
		will-change: auto;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

/* Responsive */
@media (max-width: 900px) {
	.odo-project-blocks .odo-pb-section {
		grid-template-columns: 1fr;
		grid-template-areas: "media" "content";
		min-height: auto;
	}

	.odo-project-blocks .odo-pb--img-right,
	.odo-project-blocks .odo-pb--img-left {
		grid-template-areas: "media" "content";
	}

	.odo-project-blocks .odo-pb__media {
		min-height: 56vh;
		grid-area: media;
	}

	.odo-project-blocks .odo-pb__img-holder {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: translate3d(0, 0, 0) !important;
	}

	.odo-project-blocks .odo-pb__content-wrap {
		grid-area: content;
		justify-content: center;
		text-align: center;
		padding: 2rem 1.5rem;
	}

	.odo-project-blocks .odo-pb__content {
		margin-left: auto;
		margin-right: auto;
	}

	/* Mobil: arka plan yılı boyutu */
	.odo-project-blocks .odo-pb__year-bg {
		font-size: clamp(4rem, 25vw, 7rem);
	}
}