/* ══════════════════════════════════════════════════════════════
   TANIXALIM BÖLÜMÜ — metin + büro fotoğrafı

   YER TUTUCU DÜZELTMESİ (2026-09-29)
   `::before` bir yer tutucuydu (yükleme sırasında sayfa zıplamasın diye
   padding-top ile yükseklik ayırıyordu) ama `<img>` de akışta olduğu
   için ikisi ÜST ÜSTE BİNMİYOR, ALTTA YIĞILIYORDU. Sonuç: kap 383px,
   görsel 191px, fotoğrafın üstünde 191px boşluk. Görselin yarısı
   görünmüyordu.

   Çözüm: `<img>` `position: absolute; inset: 0` ile yer tutucunun
   ÜZERİNE binir. Yer tutucu arkasında kalır, yükleme sırasında yükseklik
   doğru ölçüde durur, görsel tam kapı doldurur.
   ══════════════════════════════════════════════════════════════ */

.yo-about {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 48px;
	align-items: center;          /* metin ve görsel orta eksende hizalı */
}

.yo-about__text > :first-child { margin-top: 0; }

/* ── Fotoğraf ── */

.yo-about__media {
	position: relative;
	border-radius: var(--yo-r-lg, 12px);
	overflow: hidden;
	box-shadow: 0 2px 0 var(--yo-gold, #c9a227),
				0 18px 40px -22px rgba(16, 49, 79, .45);
	background: var(--yo-navy, #10314f);
	/* Yükleme sırasında doğru yükseklik ayırt (574/960 = %59.79) */
	aspect-ratio: 960 / 574;
}

.yo-about__media img {
	position: absolute;
	inset: 0;                    /* yer tutucunun üstüne biner */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%; /* yüz ve masa kadrajda kalsın */
}

/* Eski yöntem: padding-top yer tutucusu artık gerekmiyor, ama
   JS kapalıyken kutu yine de doğru yüksekliği korusun diye aspect-ratio
   yeterlidir. Aşağıdaki ::before yalnızca aspect-ratio desteklenmeyen
   çok eski tarayıcılar içindir. */
@supports not (aspect-ratio: 1 / 1) {
	.yo-about__media::before {
		content: "";
		display: block;
		padding-top: 59.79%;
	}
}

/* Künye: "Yasemin Okatan — SMMM" */
.yo-about__figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;                  /* img'nin üstünde kalsın */
	padding: 30px 18px 14px;
	background: linear-gradient(to top, rgba(9, 30, 50, .94), rgba(9, 30, 50, 0));
	color: #fff;
	font-size: .88rem;
	line-height: 1.35;
}
.yo-about__figcaption b { display: block; font-size: .98rem; letter-spacing: .01em; }
.yo-about__figcaption span { color: #cfe0ef; font-size: .82rem; }

/* İçerik içinde kullanım (Hakkımızda sayfası) */
.yo-about__media--inline {
	max-width: 560px;
	margin: 0 0 28px;
}

/* ── Duyarlı ── */

@media (max-width: 1080px) {
	.yo-about { grid-template-columns: 1fr 360px; gap: 34px; }
}

@media (max-width: 900px) {
	.yo-about { grid-template-columns: 1fr; gap: 26px; }
	/* Fotoğraf metinden SONRA: okuma akışı bozulmasın */
	.yo-about__media { order: 2; max-width: 520px; }
	.yo-about__media--inline { order: 0; }
}

@media (max-width: 640px) {
	.yo-about__figcaption { padding: 24px 14px 12px; }
	.yo-about__media { border-radius: 10px; }
}

/* ── Portre monogramı (2026-09-29) ─────────────────────────────
   Doğrulanmış gerçek portre yokken gösterilir. Stok bir ofis
   karesini "Yasemin Okatan" diye sunmak yerine markanın kendi
   işareti basılır. Gerçek portre yüklenince bu blok kullanılmaz. */
.yo-about__mono {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px;
	text-align: center;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, .16), transparent 60%),
		linear-gradient(160deg, var(--yo-navy-900, #0b2239), var(--yo-navy, #10314f));
	color: #fff;
}
.yo-about__mono-mark {
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1;
	color: var(--yo-gold-300, #e5c767);
}
.yo-about__mono-name {
	font-size: 1.02rem;
	font-weight: 700;
}
.yo-about__mono-role {
	font-size: .86rem;
	color: #cfe0ef;
}

/* ── Kısa ilkeler listesi (tanışma bölümü) ── */
.yo-ilkeler {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.yo-ilkeler li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--yo-navy, #10314f);
}
.yo-ilkeler svg { color: var(--yo-gold, #c9a227); flex: 0 0 auto; }