/**
 * sl-about-box widget stilleri. Bağımlılık: eloria-tokens.
 */

.sl-about__inner {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: var(--sl-space-5);
	align-items: center;
}

.sl-about__portrait {
	max-width: 380px;
	width: 100%;
}

/*
 * Portre, tokens.css'teki kemer (arch) biçimi yerine dört köşesi de yuvarlak.
 * `.sl-media--arch` tek sınıf olduğu için buradaki üç sınıflık seçici kazanır.
 */
.sl-about .sl-about__portrait .sl-media {
	border-radius: 200px;
}

.sl-about .sl-about__portrait .sl-media img {
	border-radius: inherit;
}

.sl-about__title {
	margin: 0 0 var(--sl-space-2);
}

.sl-about__text {
	color: var(--sl-text);
	max-width: 56ch;
}

.sl-about__signature {
	font-family: var(--sl-font-display);
	font-style: italic;
	font-size: 2rem;
	color: var(--sl-ember);
	margin: var(--sl-space-3) 0 var(--sl-space-3);
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Kolaj varyantı — üç kadraj hafif eğik, birbirinin üstüne binerek.
 * Kapsayıcı orandan yükseklik alır; kadrajlar yüzdeyle konumlanır, böylece
 * düzen her genişlikte aynı kompozisyonu korur.
 * ---------------------------------------------------------------------- */

.sl-about__collage {
	position: relative;
	width: 100%;
	/*
	 * Kompozisyon referanstan ölçülüp yüzdeye çevrildi. Tuval oranı sabit
	 * olduğu için üç kadrajın konumu, boyu ve örtüşmesi her genişlikte
	 * birebir korunur — hepsi kapsayıcı genişliğinden türer.
	 */
	aspect-ratio: 3 / 2;
}

.sl-about__shot {
	position: absolute;
}

.sl-about__shot .sl-media {
	width: 100%;
	height: 100%;
	/* Eğik kadrajların kenarı beyaz zeminde kaybolmasın. */
	box-shadow: 0 10px 30px rgba(25, 22, 20, 0.12);
}

.sl-about__shot .sl-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sol: en geride, hafif sola yatık, altı diğerleriyle aynı bantta biter. */
.sl-about__shot--1 {
	left: 0;
	top: 32%;
	width: 35%;
	aspect-ratio: 7 / 8;
	z-index: 1;
	transform: rotate(-2deg);
}

/* Orta: en büyük ve en yukarıda; en belirgin eğim burada. */
.sl-about__shot--2 {
	left: 31%;
	top: 5%;
	width: 47%;
	aspect-ratio: 5 / 6;
	z-index: 3;
	transform: rotate(-8deg);
}

/* Sağ: ortayla ağır örtüşür, ters yöne yatarak yelpazeyi kapatır. */
.sl-about__shot--3 {
	left: 56%;
	top: 23%;
	width: 44%;
	aspect-ratio: 19 / 20;
	z-index: 2;
	transform: rotate(2.5deg);
}

/* Hover'da öne çıkar — mevcut sl-zoom yakınlaşmasına eşlik eder. */
.sl-about__shot:hover {
	z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
	.sl-about__shot {
		transition: none;
	}
}

/* Kapsayıcı kapalıyken genişliği Elementor bölümü belirler. */
.sl-about__wrap {
	width: 100%;
}

/* Medya sağda: gövde ilk kolona geçer, kolon oranları da yer değiştirir. */
.sl-about--media-right .sl-about__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sl-about--media-right .sl-about__collage,
.sl-about--media-right .sl-about__portrait {
	order: 2;
}

/* -------------------------------------------------------------------------
 * Dar ekran
 *
 * Bu blok dosyanın sonunda ve varyant seçicileriyle aynı özgüllükte yazıldı:
 * `.sl-about--media-right .sl-about__inner` iki sınıf taşıdığı için yukarıdaki
 * tek sınıflık `.sl-about__inner` kuralını medya sorgusunun içinde bile
 * eziyordu — medya sağdayken düzen telefonda da iki kolonda kalıyor,
 * kolaj avuç içi kadar bir sütuna sıkışıyordu.
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.sl-about__inner,
	.sl-about--media-right .sl-about__inner,
	.sl-about--media-left .sl-about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sl-space-4);
	}

	/* Medya her iki varyantta da üstte kalır. */
	.sl-about--media-right .sl-about__collage,
	.sl-about--media-right .sl-about__portrait,
	.sl-about--media-left .sl-about__collage,
	.sl-about--media-left .sl-about__portrait {
		order: 0;
	}

	.sl-about__portrait {
		max-width: 300px;
	}

	/*
	 * Kolaj tek kolonda tam genişliğe yayılınca kadrajlar gereğinden büyük
	 * duruyor; okuma kolonuyla aynı ölçüde bir üst sınır kompozisyonu
	 * toparlıyor ve ortalıyor.
	 */
	.sl-about__collage {
		max-width: 520px;
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	/*
	 * Telefonda tuval biraz kareye yaklaşır: 3/2'de üç kadraj da 150px'in
	 * altına düşüp okunmaz hâle geliyordu. Eğimler ve gölge de yumuşatılır —
	 * küçük ölçekte aynı eğim dağınıklık gibi görünüyor.
	 */
	.sl-about__collage {
		aspect-ratio: 5 / 4;
	}

	.sl-about__shot--1 {
		transform: rotate(-1.5deg);
	}

	.sl-about__shot--2 {
		transform: rotate(-5deg);
	}

	.sl-about__shot--3 {
		transform: rotate(2deg);
	}

	.sl-about__shot .sl-media {
		box-shadow: 0 6px 18px rgba(25, 22, 20, 0.14);
	}

	.sl-about__signature {
		font-size: 1.625rem;
	}
}