/*
 * Yankı Ötesi Core — tema stilleri
 *
 * Mimari : CR-12 classic/hybrid. Selector'lar PHP template'lerdeki yo-
 *          sınıf sistemini hedefler (08B §0 namespace kuralı).
 * Token   : theme.json. Bu dosyada yeni marka rengi, yeni font veya yeni
 *          radius/spacing ölçeği TANIMLANMAZ.
 * Kural   : CSS önem bayrağı (important) kullanılmaz. Global override yok.
 *
 * Yaratıcı bölge: SECOND READING / İKİNCİ OKUMA.
 * İlk bakışta net; ikinci bakışta ilişki, indeks ve detay katmanı.
 */

/* ===============================================================
   1. Kök, gutter, temel
   =============================================================== */

.yo-body {
	--yo-gutter: var(--wp--custom--gutter--mobile);
	--yo-section-space: var(--wp--custom--section--mobile);
	--yo-rule: 1px solid var(--wp--preset--color--border);
	--yo-rule-strong: 1px solid rgba(48, 47, 47, 0.18);
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

@media (min-width: 600px) {
	.yo-body {
		--yo-gutter: var(--wp--custom--gutter--tablet);
		--yo-section-space: var(--wp--custom--section--tablet);
	}
}

@media (min-width: 900px) {
	.yo-body {
		--yo-gutter: var(--wp--custom--gutter--desktop);
		--yo-section-space: var(--wp--custom--section--desktop);
	}
}

@media (max-width: 359px) {
	.yo-body {
		--yo-gutter: var(--wp--custom--gutter--min);
	}
}

html,
.yo-body {
	overflow-x: clip;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
	margin: 0;
}

ul, ol {
	padding: 0;
}

/* ===============================================================
   2. Layout
   =============================================================== */

.yo-container {
	width: 100%;
	max-width: calc(var(--wp--custom--container-max, 1240px) + (var(--yo-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--yo-gutter);
}

.yo-section {
	padding-block: var(--yo-section-space);
}

.yo-measure {
	max-width: var(--wp--custom--measure);
}

/* ===============================================================
   3. Tipografi
   =============================================================== */

.yo-page-title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--brand-graphite);
	max-width: 20ch;
}

.yo-section-title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-graphite);
	max-width: 22ch;
	text-wrap: balance;
}

.yo-eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.yo-lead {
	font-size: var(--wp--preset--font-size--lead);
	margin-block: var(--wp--preset--spacing--5) 0;
}

.yo-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

a {
	color: var(--wp--preset--color--primary);
}

a:hover {
	color: var(--wp--preset--color--primary-hover);
}

/* Bölüm başlığı bloğu */
.yo-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--7);
}

.yo-section-head--split > div {
	max-width: 26ch;
}

.yo-section-head__note {
	max-width: 46ch;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.yo-section-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--8);
	}
}

/* ===============================================================
   4. Butonlar ve metin bağlantıları
   =============================================================== */

.yo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.yo-button--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse-text);
}

.yo-button--primary:hover {
	background-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--inverse-text);
}

.yo-button--primary:active {
	background-color: var(--wp--preset--color--primary-active);
}

/* Kobalt zemin üzerinde ters buton */
.yo-button--on-cobalt {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.yo-button--on-cobalt:hover {
	background-color: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--primary-active);
}

/* Metin bağlantısı — ikincil aksiyon */
.yo-textlink {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: 44px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--brand-cobalt);
	padding-bottom: 2px;
}

.yo-textlink:hover {
	color: var(--wp--preset--color--primary);
}

.yo-textlink__arrow {
	transition: transform 180ms ease;
}

.yo-textlink:hover .yo-textlink__arrow {
	transform: translateX(4px);
}

.yo-textlink--invert {
	color: var(--wp--preset--color--inverse-text);
	border-bottom-color: var(--wp--preset--color--inverse-text);
}

.yo-textlink--invert:hover {
	color: var(--wp--preset--color--inverse-text);
}

/* ===============================================================
   5. Erişilebilirlik
   =============================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.yo-skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	overflow: visible;
	clip-path: none;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: 0 0 0 2px var(--wp--preset--color--focus);
	text-decoration: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.yo-surface-dark :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--inverse-text);
}

/* ===============================================================
   6. Header
   =============================================================== */

.yo-header {
	position: relative;
	background-color: var(--wp--preset--color--canvas);
	border-bottom: var(--yo-rule);
}

.yo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--5);
	min-height: var(--wp--custom--header--height);
}

.yo-logo-slot {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Final onaylı logo. Genişlik hedefi 08 v1.1 §3: desktop 168–196px,
 * mobile 136–160px. Asset oranı 1560:360 (4.33) olduğu için yükseklik
 * buradan türetilir; 80px header içinde optik denge korunur.
 */
.yo-logo,
.yo-logo-slot .custom-logo-link {
	display: block;
	line-height: 0;
}

.yo-logo img,
.yo-logo-slot .custom-logo {
	display: block;
	width: 150px;
	height: auto;
}

@media (min-width: 600px) {
	.yo-logo img,
	.yo-logo-slot .custom-logo {
		width: 168px;
	}
}

@media (min-width: 900px) {
	.yo-logo img,
	.yo-logo-slot .custom-logo {
		width: 182px;
	}
}

.yo-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
}

.yo-nav-toggle__bars,
.yo-nav-toggle__bars::before,
.yo-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 1.5px;
	background-color: var(--wp--preset--color--brand-graphite);
}

.yo-nav-toggle__bars {
	position: relative;
}

.yo-nav-toggle__bars::before,
.yo-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.yo-nav-toggle__bars::before { top: -6px; }
.yo-nav-toggle__bars::after  { top: 6px; }

.yo-header__nav {
	display: none;
}

/*
 * Mobil menü tam panel olarak açılır. Kısmi açılır panelde arkadaki hero
 * görünür kalıyor ve ikinci bir "Durumunuzu Anlatın" butonu aynı anda
 * görünerek CTA hiyerarşisini bozuyordu (runtime QA bulgusu).
 */
.yo-nav-open {
	overflow: hidden;
}

.yo-nav-open .yo-header__nav {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	position: fixed;
	top: var(--wp--custom--header--height);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--7) var(--yo-gutter) var(--wp--preset--spacing--8);
	background-color: var(--wp--preset--color--canvas);
	border-top: var(--yo-rule);
}

.yo-nav-open .yo-menu a {
	font-size: 1.125rem;
	min-height: 52px;
}

.yo-menu {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
}

.yo-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
}

.yo-menu a:hover {
	color: var(--wp--preset--color--primary);
}

.yo-menu .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

@media (min-width: 900px) {
	.yo-nav-toggle {
		display: none;
	}

	.yo-header__nav,
	.yo-nav-open .yo-header__nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--7);
		position: static;
		padding: 0;
		border-bottom: 0;
		background-color: transparent;
	}

	.yo-menu {
		flex-direction: row;
		gap: var(--wp--preset--spacing--6);
	}

	.yo-menu a {
		font-size: 0.9375rem;
	}
}

/* ===============================================================
   7. HERO
   =============================================================== */

/*
 * Hero yüksekliği bilinçli olarak ilk viewport'un ~%75-85'i hedeflenir:
 * güçlü giriş, ama kullanıcı altta içeriğin başladığını görsün.
 * Ölçüm gerçek tarayıcıda yapılır (build/qa/phase2).
 */
.yo-hero {
	padding-block: clamp(36px, 6vw, 72px) clamp(32px, 4vw, 56px);
	border-bottom: var(--yo-rule);
}

.yo-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.yo-hero__eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
}

.yo-hero__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-graphite);
	max-width: 17ch;
	margin-top: var(--wp--preset--spacing--6);
	text-wrap: balance;
}

/* İkinci okuma: vaat cümlesinin çekirdeği kobalt ile ayrışır. */
.yo-hero__accent {
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-hero__body {
	margin-top: var(--wp--preset--spacing--7);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

.yo-hero__lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--text);
	max-width: 52ch;
}

.yo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7);
}

/* İkinci okuma katmanı — disiplin indeksi */
.yo-hero__index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
	list-style: none;
	margin-top: clamp(20px, 2.5vw, 40px);
	padding-top: var(--wp--preset--spacing--5);
	border-top: var(--yo-rule);
}

.yo-hero__index-item {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--3);
}

.yo-hero__index-num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-hero__index-label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 600px) and (max-width: 899px) {
	/* Tablet dikeyde hero fazla kısa kalıyordu (%64). */
	.yo-hero {
		padding-block: clamp(72px, 11vw, 112px) clamp(56px, 8vw, 88px);
	}
}

@media (min-width: 900px) {
	.yo-hero {
		padding-block: clamp(40px, 4vw, 64px) clamp(32px, 3vw, 48px);
	}

	/* Kontrollü asimetri: gövde sağa kayar, başlık geniş kalır. */
	.yo-hero__body {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--9);
		margin-top: var(--wp--preset--spacing--9);
		margin-left: auto;
		width: min(100%, 92%);
	}

	.yo-hero__lead {
		max-width: 44ch;
	}

	.yo-hero__index {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ===============================================================
   8. PROBLEM SELECTOR
   =============================================================== */

.yo-problems__grid {
	list-style: none;
	display: grid;
	gap: 0;
	border-top: var(--yo-rule);
}

.yo-problem {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"num  title"
		".    desc"
		".    service";
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--3);
	padding-block: var(--wp--preset--spacing--6);
	border-bottom: var(--yo-rule);
	transition: background-color 200ms ease;
}

.yo-problem:hover {
	background-color: var(--wp--preset--color--surface);
}

.yo-problem:focus-within {
	background-color: var(--wp--preset--color--surface);
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: -2px;
}

.yo-problem__num {
	grid-area: num;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-cobalt);
	min-width: 2.5ch;
}

.yo-problem__title {
	grid-area: title;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-problem__link {
	color: inherit;
	text-decoration: none;
}

/* Tüm satır tıklanabilir; metin seçilebilir kalır. */
.yo-problem__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.yo-problem__desc {
	grid-area: desc;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 48ch;
}

.yo-problem__service {
	grid-area: service;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-problem__arrow {
	transition: transform 180ms ease;
}

.yo-problem:hover .yo-problem__arrow,
.yo-problem:focus-within .yo-problem__arrow {
	transform: translateX(4px);
}

@media (min-width: 900px) {
	.yo-problems__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--9);
	}

	.yo-problem {
		padding-block: var(--wp--preset--spacing--7);
		padding-inline: 0;
	}
}

/* ===============================================================
   9. HİZMETLER — editoryal service index
   =============================================================== */

.yo-services__list {
	list-style: none;
	border-top: var(--yo-rule-strong);
}

.yo-service {
	border-bottom: var(--yo-rule);
}

.yo-service__link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"num  name  arrow"
		".    desc  .";
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--3);
	padding-block: var(--wp--preset--spacing--6);
	text-decoration: none;
	color: inherit;
	will-change: transform;
	transition: transform 220ms ease;
}

/*
 * Hover'da padding DEĞİŞTİRİLMEZ: grid kolonlarını yeniden hesaplatıp
 * açıklama metnini farklı sardırıyor ve satır yüksekliğini oynatıyordu
 * (runtime QA'de layout shift ölçüldü). transform yalnız boyama katmanında
 * çalışır, düzeni etkilemez.
 */
.yo-service__link:hover,
.yo-service__link:focus-visible {
	transform: translateX(8px);
}

.yo-service__num {
	grid-area: num;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--wp--preset--color--brand-cobalt);
	min-width: 2.5ch;
}

.yo-service__name {
	grid-area: name;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-service__link:hover .yo-service__name {
	color: var(--wp--preset--color--primary);
}

.yo-service__desc {
	grid-area: desc;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 62ch;
}

.yo-service__arrow {
	grid-area: arrow;
	align-self: start;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--wp--preset--color--brand-cobalt);
	transition: transform 180ms ease;
}

.yo-service__link:hover .yo-service__arrow {
	transform: translateX(6px);
}

@media (min-width: 900px) {
	/*
	 * Hizmet adı kolonu, en uzun adın ("AI Search & GEO Danışmanlığı")
	 * en fazla iki satırda oturmasına yetecek genişlikte tutulur.
	 * Runtime QA'de 22ch'te üç satıra kırıldığı ve sağda büyük boşluk
	 * oluştuğu ölçüldü.
	 */
	.yo-service__link {
		grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr) auto;
		grid-template-areas: "num name desc arrow";
		align-items: baseline;
		column-gap: var(--wp--preset--spacing--6);
		padding-block: var(--wp--preset--spacing--7);
	}

	.yo-service__name {
		font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	}
}

@media (min-width: 1200px) {
	.yo-service__link {
		grid-template-columns: auto minmax(0, 19rem) minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--7);
	}
}

/* ===============================================================
   10. NASIL ÇALIŞIYORUZ
   =============================================================== */

.yo-process {
	list-style: none;
	display: grid;
	gap: 0;
	border-top: var(--yo-rule-strong);
}

.yo-step {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding-block: var(--wp--preset--spacing--6);
	border-bottom: var(--yo-rule);
}

.yo-step__num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-step__title {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--subsection);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-step__desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 38ch;
}

@media (min-width: 900px) {
	.yo-process {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--7);
	}

	.yo-step {
		padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--8);
		border-bottom: 0;
		position: relative;
	}

	/* Editoryal ilerleme çizgisi — adımlar arası ince bağ. */
	.yo-step::after {
		content: "";
		position: absolute;
		top: var(--wp--preset--spacing--7);
		right: calc(var(--wp--preset--spacing--7) / -2);
		width: 1px;
		height: calc(100% - var(--wp--preset--spacing--7));
		background-color: var(--wp--preset--color--border);
	}

	.yo-step:last-child::after {
		display: none;
	}
}

/* ===============================================================
   11. ORHAN ŞAHİN — koyu editoryal imza
   =============================================================== */

.yo-surface-dark {
	background-color: var(--wp--preset--color--brand-graphite);
	color: var(--wp--preset--color--inverse-text);
}

.yo-founder :where(h2, h3, p) {
	color: var(--wp--preset--color--inverse-text);
}

.yo-founder .yo-eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

.yo-founder__grid {
	display: grid;
	gap: var(--wp--preset--spacing--7);
}

.yo-founder__title {
	color: var(--wp--preset--color--inverse-text);
	max-width: 16ch;
	margin-top: var(--wp--preset--spacing--4);
}

.yo-founder__name {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--subsection);
	margin-top: var(--wp--preset--spacing--7);
}

.yo-founder__role {
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.68);
	margin-top: var(--wp--preset--spacing--2);
}

.yo-founder__bio {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.65;
}

.yo-founder__cta {
	margin-top: var(--wp--preset--spacing--6);
}

.yo-founder__portrait {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/*
 * Portre slotu. Onaylı production portresi YOK.
 * Sahte portre veya stock CEO görseli üretilmez; alan dürüstçe boş
 * bırakılır ve yalnız oran rezerve edilir (CLS koruması).
 */
.yo-founder__portrait-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--wp--custom--radius--md);
	background-color: rgba(255, 255, 255, 0.04);
}

/* Nötr dev placeholder etiketi — marka işareti değildir. */
.yo-founder__slot-note {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

@media (min-width: 900px) {
	.yo-founder__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: var(--wp--preset--spacing--9);
	}

	.yo-founder__figure {
		max-width: 380px;
	}
}

/* ===============================================================
   12. İÇGÖRÜLER — editoryal yayın
   =============================================================== */

.yo-insights__grid {
	display: grid;
	gap: var(--wp--preset--spacing--7);
	border-top: var(--yo-rule-strong);
	padding-top: var(--wp--preset--spacing--6);
}

.yo-insight__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--3);
	max-width: 27ch;
}

.yo-insight__title--sm {
	font-size: var(--wp--preset--font-size--subsection);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
}

/*
 * Başlık bağlantıları inline-block: satır içi kutu yüksekliği WCAG 2.2
 * SC 2.5.8 (Target Size Minimum, 24px) altına düşmesin. Runtime QA'de
 * tek satırlık destek başlıklarının 23px kaldığı ölçüldü.
 */
.yo-insight__title a,
.yo-entry__title a {
	display: inline-block;
	min-height: 24px;
	color: inherit;
	text-decoration: none;
}

.yo-insight__title a:hover {
	color: var(--wp--preset--color--primary);
}

.yo-insight__excerpt {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 56ch;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.65;
}

.yo-insight .yo-meta {
	margin-top: var(--wp--preset--spacing--4);
}

.yo-insights__side {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

.yo-insights__side .yo-insight {
	padding-top: var(--wp--preset--spacing--5);
	border-top: var(--yo-rule);
}

.yo-insights__more {
	margin-top: var(--wp--preset--spacing--7);
}

@media (min-width: 900px) {
	.yo-insights__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: var(--wp--preset--spacing--9);
	}

	.yo-insights__grid--single {
		grid-template-columns: minmax(0, 8fr);
	}
}

/* ===============================================================
   13. FINAL CTA — kararlı kapanış
   =============================================================== */

.yo-closing {
	padding-block: var(--yo-section-space);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse-text);
}

.yo-closing__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	max-width: 62ch;
}

.yo-closing__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--inverse-text);
	max-width: 18ch;
}

.yo-closing__lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	max-width: 52ch;
}

.yo-closing__action {
	margin-top: var(--wp--preset--spacing--4);
}

/* ===============================================================
   14. İçerik akışı (the_content) — Classic Editor çıktısı
   =============================================================== */

.yo-entry-content {
	max-width: calc(var(--wp--custom--measure) + (var(--yo-gutter) * 2));
	margin-inline: auto;
	padding-bottom: var(--yo-section-space);
}

.yo-entry-content > * + * {
	margin-top: var(--wp--preset--spacing--5);
}

.yo-entry-content h2 {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading);
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--8);
}

.yo-entry-content h3 {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--subsection);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--7);
}

.yo-entry-content ul,
.yo-entry-content ol {
	padding-left: var(--wp--preset--spacing--5);
}

.yo-entry-content li + li {
	margin-top: var(--wp--preset--spacing--2);
}

.yo-entry-content blockquote {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--lead);
	border-left: 2px solid var(--wp--preset--color--brand-cobalt);
	padding-left: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--brand-graphite);
}

.yo-entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.yo-entry-content th,
.yo-entry-content td {
	border: var(--yo-rule);
	padding: var(--wp--preset--spacing--3);
	text-align: left;
}

.yo-entry-content .wp-block-table,
.yo-entry-content figure.wp-block-table {
	overflow-x: auto;
}

.yo-entry-content pre {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--surface-soft);
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--small);
}

.yo-entry-content figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--2);
}

/* ===============================================================
   15. Liste görünümleri ve iç sayfalar
   =============================================================== */

.yo-page__header,
.yo-single__header,
.yo-archive__header {
	padding-bottom: var(--wp--preset--spacing--6);
}

.yo-post-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--wp--preset--spacing--7);
	border-top: var(--yo-rule-strong);
}

.yo-entry {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding-block: var(--wp--preset--spacing--6);
	border-bottom: var(--yo-rule);
}

.yo-entry__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-entry__title a:hover {
	color: var(--wp--preset--color--primary);
}

.yo-link-list {
	list-style: none;
	margin-top: var(--wp--preset--spacing--7);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.yo-link-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.yo-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin-bottom: var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* WCAG 2.2 SC 2.5.8: breadcrumb bağlantısı satır içi istisnaya güvenmeden
   24px hedef yüksekliğine ulaşır. Yatay ölçü değişmez. */
.yo-breadcrumb__item,
.yo-breadcrumb__item a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.yo-breadcrumb__item + .yo-breadcrumb__item::before {
	content: "/";
	margin-right: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--border);
}

.yo-search-form-wrap {
	margin-top: var(--wp--preset--spacing--6);
}

.yo-search-form-wrap input[type="search"] {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--3);
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--sm);
	font-family: inherit;
	font-size: inherit;
}

.yo-post-nav,
.pagination {
	margin-top: var(--wp--preset--spacing--8);
	padding-top: var(--wp--preset--spacing--5);
	border-top: var(--yo-rule);
}

/* ===============================================================
   16. Footer
   =============================================================== */

.yo-footer {
	padding-block: var(--wp--preset--spacing--9) var(--wp--preset--spacing--7);
}

.yo-footer :where(h2, p, li) {
	color: var(--wp--preset--color--inverse-text);
}

.yo-footer .yo-eyebrow {
	color: rgba(255, 255, 255, 0.55);
}

.yo-footer a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.yo-footer a:hover {
	color: var(--wp--preset--color--inverse-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.yo-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--8);
}

@media (min-width: 600px) {
	.yo-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.yo-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		gap: var(--wp--preset--spacing--7);
	}
}

/* Footer'da onaylı ters (beyaz) logo. */
.yo-footer__logo {
	display: block;
	width: 168px;
	height: auto;
}

.yo-footer__descriptor {
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--3);
	color: rgba(255, 255, 255, 0.68);
	max-width: 30ch;
}

.yo-footer__list {
	list-style: none;
	margin-top: var(--wp--preset--spacing--4);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--small);
}

.yo-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
}

.yo-footer__rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--5);
}

.yo-footer__copyright {
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.6);
}

/* ===============================================================
   17. Reduced motion
   =============================================================== */

/*
 * `!important` ZORUNLUDUR. Evrensel seçicinin özgüllüğü 0'dır; sınıf tabanlı
 * her geçiş kuralı (ör. `.yo-related__arrow { transition: transform 180ms }`)
 * bu bloğu geçersiz kılar. Phase 5 QA'sinde reduced-motion açıkken 30 öğenin
 * hâlâ hareketli olduğu ölçüldü — sebep buydu.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===============================================================
   18. İÇ SAYFA SİSTEMİ — hub + hizmet sayfaları (Phase 3A)
   ---------------------------------------------------------------
   Ana sayfa görsel dilinin akrabası; kopyası değil.
   İç sayfada: daha yüksek bilgi yoğunluğu, daha dar measure,
   daha az hero gösterisi, daha güçlü okuma ritmi.
   =============================================================== */

/* --- Kompakt sayfa hero'su --- */

.yo-page-hero {
	padding-block: clamp(28px, 4vw, 52px) clamp(28px, 3.5vw, 48px);
	border-bottom: var(--yo-rule);
}

/*
 * Hizmet sayfasında gövde kendi hero'sunu taşıyorsa şablon hero'su
 * basılmaz (bkz. template-service.php, REVISION 2) ve breadcrumb tek
 * başına kalır. Hero'nun üst boşluğunu devralır ki başlık bloğu
 * header'a yapışmasın.
 */
.yo-service-breadcrumb {
	padding-block: clamp(20px, 3vw, 36px) 0;
}

.yo-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.yo-page-hero__eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
}

/* Ana sayfa H1'inden belirgin biçimde küçük — iç sayfa hiyerarşisi. */
.yo-page-hero__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--brand-graphite);
	max-width: 22ch;
	margin-top: var(--wp--preset--spacing--4);
	text-wrap: balance;
}

.yo-page-hero__lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	max-width: 58ch;
	margin-top: var(--wp--preset--spacing--5);
}

.yo-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7);
	margin-top: var(--wp--preset--spacing--6);
}

/* --- /hizmetler/ karar indeksi: editoryal liste/grid hibriti --- */

.yo-hub-index__list {
	list-style: none;
	display: grid;
	gap: 0;
	border-top: var(--yo-rule-strong);
}

.yo-hub-item {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"num problem"
		".   service"
		".   plain"
		".   desc"
		".   go";
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--2);
	padding-block: var(--wp--preset--spacing--6);
	border-bottom: var(--yo-rule);
	transition: background-color 200ms ease;
}

.yo-hub-item:hover {
	background-color: var(--wp--preset--color--surface);
}

.yo-hub-item:focus-within {
	background-color: var(--wp--preset--color--surface);
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: -2px;
}

.yo-hub-item__num {
	grid-area: num;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--brand-cobalt);
	min-width: 2.5ch;
}

/* Problem cümlesi bağlam; hizmet adı karardır — hiyerarşi buna göre. */
.yo-hub-item__problem {
	grid-area: problem;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted);
}

.yo-hub-item__service {
	grid-area: service;
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-hub-item__link {
	color: inherit;
	text-decoration: none;
}

.yo-hub-item__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.yo-hub-item:hover .yo-hub-item__service {
	color: var(--wp--preset--color--primary);
}

/*
 * CR-26 netlik katmanı — "bu bana mı?" sorusunun jargonsuz cevabı.
 *
 * Hiyerarşi bilinçlidir: `plain` gövde metni ağırlığında ve TAM kontrastta
 * basılır; kilitli `desc` onun altında muted kalır. Ziyaretçi ilk okumada
 * `plain`i okur; `desc` kapsamı netleştiren ikinci satırdır.
 */
.yo-hub-item__plain {
	grid-area: plain;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--wp--preset--color--text);
	max-width: 52ch;
}

.yo-hub-item__desc {
	grid-area: desc;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 46ch;
}

.yo-hub-item__go {
	grid-area: go;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-hub-item__arrow {
	transition: transform 180ms ease;
}

.yo-hub-item:hover .yo-hub-item__arrow,
.yo-hub-item:focus-within .yo-hub-item__arrow {
	transform: translateX(4px);
}

@media (min-width: 900px) {
	.yo-hub-index__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--9);
	}

	.yo-hub-item {
		padding-block: var(--wp--preset--spacing--7);
	}
}

/* --- Hizmet sayfası içerik akışı: dar measure, güçlü okuma ritmi --- */

/*
 * Okuma ölçüsü: iç sayfada genel 72ch'ten daha DAR bir editoryal measure
 * kullanılır (68ch). 60–75ch hedef bandının ortasına oturur ve uzun
 * hizmet gövdesinde satır dönüşünü kolaylaştırır.
 */
.yo-entry-content--service,
.yo-entry-content--hub {
	max-width: calc(68ch + (var(--yo-gutter) * 2));
	margin-inline: auto;
	padding-block: var(--yo-section-space);
}

.yo-entry-content--service h2 {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--9);
	padding-top: var(--wp--preset--spacing--5);
	border-top: var(--yo-rule);
	max-width: 28ch;
	text-wrap: balance;
}

.yo-entry-content--service > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.yo-entry-content--service h3 {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--6);
}

.yo-entry-content--service h3 + p {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-muted);
}

.yo-entry-content--service ul,
.yo-entry-content--service ol {
	padding-left: 0;
	list-style: none;
}

.yo-entry-content--service li {
	position: relative;
	padding-left: var(--wp--preset--spacing--5);
}

.yo-entry-content--service li + li {
	margin-top: var(--wp--preset--spacing--3);
}

.yo-entry-content--service ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 10px;
	height: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
}

.yo-entry-content--service ol {
	counter-reset: yo-ol;
}

.yo-entry-content--service ol > li {
	counter-increment: yo-ol;
	padding-left: var(--wp--preset--spacing--6);
}

.yo-entry-content--service ol > li::before {
	content: counter(yo-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 0.8125rem;
	line-height: 1.9;
	color: var(--wp--preset--color--brand-cobalt);
}

/* Second Reading: kapanış/aktarım cümlesi için editoryal vurgu. */
.yo-entry-content--service blockquote {
	border-left: 2px solid var(--wp--preset--color--brand-cobalt);
	padding-left: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	color: var(--wp--preset--color--brand-graphite);
	/* Punto büyük olduğu için kendi ölçüsünde de okunur bir satır uzunluğu. */
	max-width: 52ch;
}

/* ---------------------------------------------------------------
   Liste ritmi (CR yok — yalnız sunum; copy'ye dokunulmaz)
   ---------------------------------------------------------------
   Ardışık liste bölümleri (Teslimatlar / Kimler için / Ne değildir)
   tek kolonda monoton bir şerit oluşturuyordu. Kısa maddeli listeler
   iki kolona alınır; uzun cümleli listeler tek kolonda kalır çünkü
   dar kolonda okunmuyorlar. Sınıf, içeriğe elle yazılmaz —
   `the_content` filtresi ölçerek ekler (functions.php).
   --------------------------------------------------------------- */

@media (min-width: 860px) {
	.yo-entry-content--service .yo-list--compact {
		columns: 2;
		column-gap: var(--wp--preset--spacing--7);
	}

	.yo-entry-content--service .yo-list--compact li {
		break-inside: avoid;
	}

	.yo-entry-content--service .yo-list--compact li:first-child {
		margin-top: 0;
	}
}

/* Listeden sonra gelen bölüm başlığına ek nefes: bölüm sınırı belirginleşir. */
.yo-entry-content--service ul + h2,
.yo-entry-content--service ol + h2 {
	margin-top: var(--wp--preset--spacing--9, 5rem);
}

/* Kriz sayfası bağlamsal ikincil yolu — ayrı bir primary CTA DEĞİLDİR. */
.yo-textlink--urgent {
	font-weight: 600;
}

.yo-textlink--urgent::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.55em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-cobalt);
	vertical-align: baseline;
}

/* İlgili İçgörüler, İlgili Hizmetler ile aynı görsel grameri kullanır. */
.yo-insights-related {
	border-top: var(--yo-rule);
	background-color: var(--wp--preset--color--surface);
}

/* --- İlgili hizmetler --- */

.yo-related {
	border-top: var(--yo-rule);
	background-color: var(--wp--preset--color--surface);
}

.yo-related__title {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--subsection);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-related__list {
	list-style: none;
	margin-top: var(--wp--preset--spacing--5);
	display: grid;
	gap: 0;
	border-top: var(--yo-rule);
}

.yo-related__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	min-height: 56px;
	padding-block: var(--wp--preset--spacing--3);
	border-bottom: var(--yo-rule);
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
}

.yo-related__link:hover {
	color: var(--wp--preset--color--primary);
}

.yo-related__name {
	font-weight: 500;
}

.yo-related__arrow {
	color: var(--wp--preset--color--brand-cobalt);
	transition: transform 180ms ease;
}

.yo-related__link:hover .yo-related__arrow {
	transform: translateX(4px);
}

@media (min-width: 900px) {
	.yo-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--8);
	}
}

/* --- Entity imzası (kompakt, satış bloğu değil) --- */

.yo-entity {
	padding-block: var(--yo-section-space);
}

.yo-entity__inner {
	max-width: var(--wp--custom--measure);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 2px solid var(--wp--preset--color--brand-graphite);
}

.yo-entity__name {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--subsection);
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--4);
}

.yo-entity__role {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--1);
}

.yo-entity__bio {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 60ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-entity__link {
	margin-top: var(--wp--preset--spacing--4);
}

/* WCAG 2.2 SC 2.5.8 — entity bağlantısı 24px hedef yüksekliği. */
.yo-entity__link a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
/* ===============================================================
   20. Phase 4A — Person entity, Organization, Contact
   =============================================================== */

/* --- /orhan-sahin/ hero: kimlik önce, satış yok --- */

.yo-entity-hero {
	padding-block: clamp(28px, 4vw, 52px) clamp(36px, 4.5vw, 64px);
}

.yo-entity-hero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--7);
}

.yo-entity-hero__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2.75rem, 5.2vw, 4.5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--4);
}

.yo-entity-hero__lead {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--4);
	max-width: 34ch;
}

.yo-entity-hero__intro {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 62ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-entity-hero__org {
	margin-top: var(--wp--preset--spacing--5);
}

.yo-entity-hero__figure {
	margin: 0;
}

/*
 * Portre 4:5 sunulur. Asset kare (1024×1024) olduğu için oran CSS'te verilir;
 * `object-fit: cover` esnetmeden yanlardan ortalayarak kırpar.
 * `object-position` yüz için hafif üst kadraj bırakır.
 */
.yo-entity-hero__portrait {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 32%;
	border-radius: var(--wp--custom--radius--md);
	display: block;
}

/*
 * Portre alanı: onaylı asset gelene kadar NÖTR kalır. Monogram, harf,
 * silüet, ikon veya dekoratif doku kullanılmaz — sahte kimlik üretmez.
 */
.yo-entity-hero__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
}

.yo-entity-hero__slot-note {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.yo-entity-hero__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--9);
		align-items: start;
	}
}

/* --- Entity gövdesi: bio okunabilirliği --- */

.yo-entry-content--entity {
	max-width: calc(68ch + (var(--yo-gutter) * 2));
	margin-inline: auto;
	padding-block: var(--yo-section-space);
}

.yo-entry-content--entity h2 {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.14;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--9);
	padding-top: var(--wp--preset--spacing--6);
	border-top: var(--yo-rule);
	text-wrap: balance;
}

.yo-entry-content--entity > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.yo-entry-content--entity ul {
	padding-left: 0;
	list-style: none;
}

.yo-entry-content--entity li {
	position: relative;
	padding-left: var(--wp--preset--spacing--5);
}

.yo-entry-content--entity li + li {
	margin-top: var(--wp--preset--spacing--3);
}

.yo-entry-content--entity ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
}

/* --- Uzmanlık indeksi: kart ordusu değil, editoryal indeks --- */

.yo-expertise {
	border-top: var(--yo-rule);
	background-color: var(--wp--preset--color--surface);
}

.yo-expertise__list {
	list-style: none;
	margin-top: var(--wp--preset--spacing--7);
	display: grid;
	gap: 0;
	border-top: var(--yo-rule);
}

.yo-expertise__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--5);
	padding-block: var(--wp--preset--spacing--5);
	border-bottom: var(--yo-rule);
}

.yo-expertise__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--brand-cobalt);
	padding-top: 0.35em;
	grid-row: span 2;
}

.yo-expertise__name {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin: 0;
}

.yo-expertise__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: 24px;
	color: inherit;
	text-decoration: none;
}

.yo-expertise__link:hover {
	color: var(--wp--preset--color--primary);
}

.yo-expertise__arrow {
	color: var(--wp--preset--color--brand-cobalt);
	transition: transform 180ms ease;
}

.yo-expertise__link:hover .yo-expertise__arrow {
	transform: translateX(4px);
}

.yo-expertise__role {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-muted);
	max-width: 52ch;
}

@media (min-width: 900px) {
	.yo-expertise__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--8);
	}
}

/* --- Yazarlık / profil blokları --- */

.yo-authorship__meta {
	margin-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-authorship__all {
	margin-top: var(--wp--preset--spacing--5);
}

.yo-profiles__list {
	list-style: none;
	margin-top: var(--wp--preset--spacing--5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
}

/* --- /hakkimizda/ --- */

.yo-about-hero__title {
	max-width: 26ch;
}

.yo-about-hero__actions {
	margin-top: var(--wp--preset--spacing--5);
}

.yo-entry-content--about {
	max-width: calc(68ch + (var(--yo-gutter) * 2));
	margin-inline: auto;
	padding-block: var(--yo-section-space);
}

.yo-entry-content--about h2 {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.14;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--9);
	padding-top: var(--wp--preset--spacing--6);
	border-top: var(--yo-rule);
	text-wrap: balance;
}

.yo-entry-content--about > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.yo-entry-content--about h3 {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--6);
}

.yo-entry-content--about h3 + p {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-muted);
}

/*
 * "Ne Değiliz?" listesi: altı dev yasak kartı YAPILMAZ. Ayrım tipografi
 * ve boşlukla kurulur; madde işareti nötr bir çizgidir, kırmızı/uyarı
 * rengi kullanılmaz.
 */
.yo-entry-content--about ul {
	padding-left: 0;
	list-style: none;
	margin-top: var(--wp--preset--spacing--5);
}

.yo-entry-content--about ul > li {
	position: relative;
	padding-left: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-entry-content--about ul > li + li {
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: var(--yo-rule);
}

.yo-entry-content--about ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 18px;
	height: 1px;
	background-color: var(--wp--preset--color--border);
}

/* --- Kurucu ilişkisi --- */

.yo-relation {
	border-top: var(--yo-rule);
	background-color: var(--wp--preset--color--surface);
}

.yo-relation__title {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 24ch;
}

.yo-relation__split {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--6);
}

.yo-relation__text {
	max-width: 58ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-relation__roles {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	border-top: var(--yo-rule);
	padding-top: var(--wp--preset--spacing--5);
}

.yo-relation__role dt {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--subsection);
	color: var(--wp--preset--color--brand-graphite);
}

.yo-relation__role dd {
	margin: var(--wp--preset--spacing--1) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-relation__cta {
	margin-top: var(--wp--preset--spacing--6);
}

@media (min-width: 900px) {
	.yo-relation__split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--9);
		align-items: start;
	}
}

/* --- /iletisim/ --- */

.yo-contact {
	padding-block: clamp(28px, 4vw, 52px) var(--yo-section-space);
}

.yo-contact__grid {
	display: grid;
	gap: var(--wp--preset--spacing--8);
}

.yo-contact__title {
	max-width: 16ch;
}

.yo-contact__legal {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--5);
	border-top: var(--yo-rule);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	max-width: 46ch;
}

.yo-entry-content--contact {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 52ch;
}

@media (min-width: 900px) {
	.yo-contact__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--9);
		align-items: start;
	}

	.yo-contact__intro {
		position: sticky;
		top: var(--wp--preset--spacing--7);
	}
}

/* --- Form: sakin, editoryal; SaaS onboarding değil --- */

.yo-form-shell {
	background-color: var(--wp--preset--color--surface);
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--md);
	padding: clamp(20px, 3vw, 40px);
}

.yo-form__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--subsection);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite);
	margin: 0;
}

.yo-form__req-note {
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-field {
	margin-top: var(--wp--preset--spacing--6);
}

.yo-label {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
}

/*
 * Zorunluluk yalnız renkle anlatılmaz: yıldız işareti + görünür
 * "(zorunlu)" ekran okuyucu metni + required özniteliği birlikte.
 */
.yo-req {
	color: var(--wp--preset--color--brand-cobalt);
	font-weight: 700;
}

.yo-hint {
	margin-top: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* WCAG 2.2 SC 2.5.8 — ipucu ve hata özeti bağlantıları 24px hedef yüksekliği. */
.yo-hint a,
.yo-form-note__list a,
.yo-contact__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.yo-input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: var(--wp--preset--spacing--2);
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--canvas);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text);
}

.yo-input:hover {
	border-color: var(--wp--preset--color--brand-graphite);
}

.yo-textarea {
	min-height: 168px;
	line-height: 1.55;
	resize: vertical;
}

.yo-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--brand-graphite) 50%),
		linear-gradient(135deg, var(--wp--preset--color--brand-graphite) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.yo-field--invalid .yo-input {
	border-color: var(--wp--preset--color--error);
	border-width: 2px;
}

.yo-error {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--error);
}

/* Hata yalnız renkle değil, işaretle de belirtilir. */
.yo-error__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--error);
	color: var(--wp--preset--color--inverse-text);
	font-size: 0.6875rem;
	font-weight: 700;
}

/* Onay kutuları: dokunma alanı 44px. */
.yo-field--check {
	margin-top: var(--wp--preset--spacing--6);
}

.yo-check {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	min-height: 44px;
	padding-block: 10px;
	cursor: pointer;
}

.yo-check__input {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--wp--preset--color--brand-cobalt);
}

.yo-check__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	padding-top: 1px;
}

.yo-form__submit {
	margin-top: var(--wp--preset--spacing--7);
	width: 100%;
}

/* --- Form durum bildirimleri --- */

.yo-form-note {
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--radius--sm);
	border-left: 3px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface-soft);
	margin-bottom: var(--wp--preset--spacing--5);
}

.yo-form-note__title {
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-form-note__list {
	margin: var(--wp--preset--spacing--3) 0 0;
	padding-left: var(--wp--preset--spacing--5);
}

.yo-form-note__list li + li {
	margin-top: var(--wp--preset--spacing--2);
}

.yo-form-note--error {
	border-left-color: var(--wp--preset--color--error);
}

.yo-form-note--success {
	border-left-color: var(--wp--preset--color--success);
}

.yo-form-note--urgent {
	border-left-color: var(--wp--preset--color--brand-cobalt);
}

@media (min-width: 900px) {
	.yo-form__submit {
		width: auto;
		min-width: 240px;
	}
}

/* ===============================================================
   20. İÇGÖRÜLER HUB & TEKİL MAKALE SİSTEMİ
   ---------------------------------------------------------------
   Content Authority Hub ve tekil makale editoryal tasarım sistemi.
   Brand tokens: Source Serif 4 + Manrope, Strategic Ink / Cobalt / Graphite,
   Canvas #F7F5F0, Surface Soft #EEF1F8, 68ch measure.
   =============================================================== */

/* --- Badges & Meta --- */

.yo-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--sm);
	line-height: 1.2;
}

/*
 * Kobalt zeminde kobalt metin 4.37:1 kalıyordu (gerekli 4.5). Metin
 * grafite çekildi; kobalt zemin aksanı korunuyor. Ayrıca bağlantı
 * olduğu için WCAG 2.2 SC 2.5.8 gereği 24px hedef yüksekliği verildi.
 */
.yo-badge--cluster {
	background-color: rgba(0, 127, 255, 0.08);
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	min-height: 24px;
}

.yo-badge--cluster:hover {
	background-color: rgba(0, 127, 255, 0.15);
}

.yo-badge--pillar {
	background-color: var(--wp--preset--color--brand-graphite);
	color: var(--wp--preset--color--inverse-text);
}

.yo-badge--sub {
	background-color: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--text-muted);
	border: 1px solid var(--wp--preset--color--border);
}

/*
 * CR-13 (LOCKED): Strategic Ink #315364 YALNIZ logo rengidir; UI primary
 * veya aksan rengi DEĞİLDİR. Bu rozet daha önce #315364'ü doğrudan UI
 * rengi olarak kullanıyordu — aktif token sistemine geri çekildi.
 */
.yo-badge--source {
	background-color: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--brand-graphite);
	border: 1px solid var(--wp--preset--color--border);
}

/*
 * Ayraç görünür bir karakterdir ("·"), dolayısıyla kontrast kuralına
 * tabidir. Border rengi 1.22:1 veriyordu — text-muted'a çekildi.
 */
.yo-meta__sep {
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
	margin-inline: 4px;
}

/* --- 1. İçgörüler Hero --- */

.yo-insights-hero {
	padding-top: clamp(24px, 4vw, 48px);
	padding-bottom: clamp(32px, 5vw, 64px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--canvas);
}

.yo-insights-hero__content {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 58rem;
}

.yo-insights-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--brand-graphite);
	letter-spacing: -0.025em;
	margin-top: var(--wp--preset--spacing--3);
}

.yo-insights-hero__lead {
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--4);
	max-width: 64ch;
}

/* --- 2. Topic Nav --- */

.yo-topic-nav {
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface-soft);
	padding-block: var(--wp--preset--spacing--3);
}

.yo-topic-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: wrap;
}

.yo-topic-nav__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted);
}

.yo-topic-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.yo-topic-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	background-color: var(--wp--preset--color--canvas);
	border: 1px solid var(--wp--preset--color--border);
	transition: all 0.2s ease;
}

.yo-topic-nav__link:hover {
	border-color: var(--wp--preset--color--brand-cobalt);
	color: var(--wp--preset--color--brand-cobalt);
	background-color: rgba(0, 127, 255, 0.04);
}

.yo-topic-nav__num {
	font-size: 0.6875rem;
	color: var(--wp--preset--color--brand-cobalt);
	font-weight: 700;
}

/* --- 3. Featured Insight --- */

.yo-insights-featured {
	padding-block: clamp(40px, 6vw, 72px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.yo-featured-card {
	margin-top: var(--wp--preset--spacing--5);
	padding: clamp(24px, 4vw, 48px);
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color 0.2s ease;
}

.yo-featured-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt);
}

.yo-featured-card__meta-top {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-featured-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--4);
}

.yo-featured-card__title a {
	color: inherit;
	text-decoration: none;
}

.yo-featured-card__title a:hover {
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-featured-card__excerpt {
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--4);
	max-width: 68ch;
}

.yo-featured-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--border);
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
}

.yo-featured-card__author {
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--ui);
}

.yo-author-name {
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite);
	font-size: var(--wp--preset--font-size--body);
}

.yo-author-role {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* --- 4. Publication Index --- */

.yo-insights-index {
	padding-block: clamp(48px, 7vw, 88px);
}

.yo-cluster-groups {
	margin-top: var(--wp--preset--spacing--8);
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 80px);
}

.yo-cluster-group {
	scroll-margin-top: 80px;
}

.yo-cluster-group__head {
	padding-bottom: var(--wp--preset--spacing--4);
	border-bottom: 2px solid var(--wp--preset--color--brand-graphite);
	margin-bottom: var(--wp--preset--spacing--5);
}

.yo-cluster-group__meta {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--3);
}

.yo-cluster-group__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-cluster-group__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	letter-spacing: -0.015em;
}

.yo-cluster-group__desc {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--2);
	max-width: 60ch;
}

/*
 * `divide-y` bir Tailwind yardımcı adıdır, geçerli bir CSS özelliği DEĞİLDİR —
 * tarayıcı onu yok sayıyordu (ölü kural, Phase 5.2'de kaldırıldı).
 * Ayraç zaten `.yo-pub-item` üzerindeki `border-bottom` ile çiziliyor.
 */
.yo-publication-list {
	display: flex;
	flex-direction: column;
}

.yo-pub-item {
	padding-block: clamp(20px, 3vw, 32px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: var(--wp--preset--spacing--4);
	align-items: start;
	transition: background-color 0.15s ease;
}

@media (min-width: 768px) {
	.yo-pub-item {
		grid-template-columns: 1fr auto;
		gap: var(--wp--preset--spacing--6);
	}
}

.yo-pub-item--pillar {
	background-color: rgba(0, 127, 255, 0.02);
	padding-inline: var(--wp--preset--spacing--3);
	margin-inline: calc(-1 * var(--wp--preset--spacing--3));
	border-radius: var(--wp--custom--radius--sm);
}

.yo-pub-item__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-pub-item__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--2);
	letter-spacing: -0.01em;
}

.yo-pub-item__title a {
	color: inherit;
	text-decoration: none;
}

.yo-pub-item__title a:hover {
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-pub-item__excerpt {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--2);
	max-width: 68ch;
}

.yo-pub-item__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--1);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	min-width: 140px;
}

@media (min-width: 768px) {
	.yo-pub-item__side {
		align-items: flex-end;
		text-align: right;
	}
}

.yo-pub-item__author {
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-pub-item__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	margin-top: var(--wp--preset--spacing--2);
	transition: all 0.2s ease;
}

.yo-pub-item__arrow:hover {
	background-color: var(--wp--preset--color--brand-cobalt);
	color: var(--wp--preset--color--inverse-text);
	border-color: var(--wp--preset--color--brand-cobalt);
}

/* --- 5. Authority Bridge --- */

.yo-insights-bridge {
	padding-block: clamp(48px, 6vw, 80px);
	border-top: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface-soft);
}

.yo-insights-bridge__box {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
}

@media (min-width: 860px) {
	.yo-insights-bridge__box {
		grid-template-columns: 1.2fr 1fr;
		align-items: center;
	}
}

.yo-insights-bridge__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--2);
}

.yo-insights-bridge__text {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--3);
	max-width: 54ch;
}

.yo-insights-bridge__link {
	margin-top: var(--wp--preset--spacing--4);
}

.yo-insights-bridge__cta {
	padding: clamp(24px, 3.5vw, 40px);
	background-color: var(--wp--preset--color--canvas);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.yo-insights-bridge__cta-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-insights-bridge__cta-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--2);
}

.yo-insights-bridge__cta-desc {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
}

/* ===============================================================
   21. TEKİL MAKALE SİSTEMİ (ARTICLE DESIGN SYSTEM)
   =============================================================== */

.yo-article-single {
	background-color: var(--wp--preset--color--canvas);
}

.yo-article-header {
	padding-top: clamp(24px, 4vw, 48px);
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.yo-article-header__meta-top {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-article-header__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 600;
	line-height: 1.18;
	color: var(--wp--preset--color--brand-graphite);
	letter-spacing: -0.025em;
	margin-top: var(--wp--preset--spacing--4);
	max-width: 48rem;
}

.yo-article-header__lead {
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(1.125rem, 2vw, 1.25rem);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--4);
	max-width: 68ch;
	font-weight: 400;
}

.yo-article-header__byline {
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
	flex-wrap: wrap;
}

.yo-article-byline__author,
.yo-article-byline__date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
}

.yo-byline-label {
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
}

.yo-byline-name {
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
}

.yo-byline-name:hover {
	color: var(--wp--preset--color--brand-cobalt);
	text-decoration: underline;
}

.yo-byline-role {
	color: var(--wp--preset--color--text-muted);
}

.yo-article-byline__date time {
	color: var(--wp--preset--color--brand-graphite);
	font-weight: 500;
}

/* Öne çıkan görsel */
.yo-article-hero-media {
	margin-top: var(--wp--preset--spacing--7);
	margin-bottom: 0;
}

.yo-article-hero-media__img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--border);
	display: block;
}

.yo-article-hero-media__caption {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--2);
	font-style: italic;
	line-height: 1.4;
}

/* Makale Gövdesi */
.yo-article-body {
	padding-block: clamp(32px, 5vw, 64px);
}

.yo-article-body > * {
	max-width: 68ch;
}

.yo-article-body h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--brand-graphite);
	letter-spacing: -0.015em;
	margin-top: clamp(36px, 5vw, 56px);
	margin-bottom: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
}

.yo-article-body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.yo-article-body h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: clamp(24px, 3.5vw, 36px);
	margin-bottom: var(--wp--preset--spacing--2);
}

.yo-article-body p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
	line-height: 1.72;
	color: var(--wp--preset--color--text);
	margin-bottom: var(--wp--preset--spacing--4);
}

.yo-article-body ul,
.yo-article-body ol {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--text);
	padding-left: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--5);
}

.yo-article-body li + li {
	margin-top: var(--wp--preset--spacing--2);
}

.yo-article-body hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block: clamp(32px, 4vw, 48px);
	max-width: 68ch;
}

.yo-article-body a {
	color: var(--wp--preset--color--brand-cobalt);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yo-article-body a:hover {
	color: var(--wp--preset--color--brand-graphite);
}

/* --- Kaynaklar & Dış Referanslar Bileşeni --- */

.yo-article-sources {
	margin-block: clamp(32px, 4vw, 56px);
	padding: clamp(24px, 3.5vw, 40px);
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	max-width: 68ch;
}

.yo-article-sources__head {
	margin-bottom: var(--wp--preset--spacing--4);
}

.yo-article-sources__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--2);
}

.yo-article-sources__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.yo-article-sources__item {
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--border);
}

.yo-article-sources__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.yo-article-sources__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
}

.yo-source-num {
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-source-publisher {
	font-weight: 600;
}

.yo-source-link {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	transition: color 0.15s ease;
}

.yo-source-link:hover {
	color: var(--wp--preset--color--brand-cobalt);
	text-decoration: underline;
}

.yo-source-icon {
	font-size: 0.8em;
	color: var(--wp--preset--color--brand-cobalt);
}

/* --- İlgili Ana Hizmet Kartı --- */

.yo-article-service {
	margin-block: clamp(32px, 4vw, 56px);
}

.yo-article-service__box {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	padding: clamp(28px, 4vw, 48px);
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--brand-cobalt);
	border-radius: var(--wp--custom--radius--md);
	align-items: center;
	max-width: 68ch;
}

@media (min-width: 640px) {
	.yo-article-service__box {
		grid-template-columns: 1fr auto;
	}
}

.yo-article-service__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--1);
}

.yo-article-service__desc {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--2);
}

/* --- İlgili İçgörüler Izgarası --- */

.yo-article-related {
	padding-block: clamp(48px, 6vw, 72px);
	border-top: 1px solid var(--wp--preset--color--border);
}

.yo-article-related__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--1);
}

.yo-article-related__grid {
	margin-top: var(--wp--preset--spacing--6);
	display: grid;
	gap: var(--wp--preset--spacing--6);
}

@media (min-width: 768px) {
	.yo-article-related__grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

.yo-related-card {
	padding: var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color 0.2s ease;
}

.yo-related-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt);
}

.yo-related-card__meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-related-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 1.5vw, 1.25rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--3);
}

.yo-related-card__title a {
	color: inherit;
	text-decoration: none;
}

.yo-related-card__title a:hover {
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-related-card__excerpt {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--4);
	flex-grow: 1;
}


/*
 * WCAG 2.2 SC 2.5.8 — İçgörüler/makale bileşenlerindeki tema bağlantıları
 * 24px hedef yüksekliğine çıkarılır. Makale GÖVDESİ içindeki satır içi
 * bağlantılar bu kuraldan istisnadır (inline exception) ve değiştirilmez.
 */
.yo-article-meta a,
.yo-pub-item__author a,
.yo-author-signature a,
.yo-source-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Gerçek sınıf adlarına göre hedef boyutu (audit sonrası düzeltme). */
.yo-byline-name,
.yo-author-sig__link,
.yo-measure > p > a,
.yo-source-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* author-signature bağlantısı — gerçek sınıf. */
.yo-author-signature__link a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* --- Yazar İmzası & Avatar Stilleri (Orhan Şahin Portre Entegrasyonu) --- */

.yo-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	min-height: 24px;
	border-radius: var(--wp--custom--radius--sm);
	line-height: 1.2;
}

.yo-author-signature {
	margin-block: clamp(32px, 5vw, 64px);
	padding: clamp(24px, 4vw, 40px);
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	max-width: 68ch;
}

.yo-author-signature__inner {
	display: flex;
	gap: var(--wp--preset--spacing--5);
	align-items: flex-start;
}

.yo-author-signature__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--border);
	flex-shrink: 0;
}

.yo-author-signature__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: 2px;
}

.yo-author-signature__bio {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--3);
}

.yo-author-signature__link {
	margin-top: var(--wp--preset--spacing--3);
}

.yo-insights-bridge__bio-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--2);
}

.yo-insights-bridge__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--border);
	flex-shrink: 0;
}


/* --- Phase 5.2: portre yokken hero tek kolona döner --- */

/*
 * Onaylı portre yoksa boş çerçeve YAYINLANMAZ (Phase 5.2 §6). Portre kolonu
 * tamamen kalkar; hero metin-öncelikli tek kolon olur. Ölçü, kimliğin
 * seyrelmemesi için sınırlanır.
 */
.yo-entity-hero__grid--no-portrait .yo-entity-hero__lead {
	max-width: 44ch;
}

.yo-entity-hero__grid--no-portrait .yo-entity-hero__intro {
	max-width: 66ch;
}

@media (min-width: 900px) {
	.yo-entity-hero__grid--no-portrait {
		grid-template-columns: minmax(0, 1fr);
	}

	.yo-entity-hero__grid--no-portrait .yo-entity-hero__title {
		max-width: 18ch;
	}
}

/* ===============================================================
   22. PHASE 5.4 — ana sayfa yeniden kompozisyonu
   =============================================================== */

/* --- Header: dairesel ikincil menü düğmesi --- */

.yo-header__inner {
	gap: var(--wp--preset--spacing--5);
}

.yo-header__analysis {
	white-space: nowrap;
}

.yo-menu-orb {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.yo-menu-orb:hover {
	border-color: var(--wp--preset--color--brand-graphite);
	background-color: var(--wp--preset--color--canvas);
}

.yo-menu-orb__bars,
.yo-menu-orb__bars::before,
.yo-menu-orb__bars::after {
	display: block;
	width: 16px;
	height: 1.5px;
	background-color: var(--wp--preset--color--brand-graphite);
	content: "";
}

.yo-menu-orb__bars {
	position: relative;
}

.yo-menu-orb__bars::before { position: absolute; top: -5px; }
.yo-menu-orb__bars::after  { position: absolute; top: 5px; }

@media (min-width: 900px) {
	.yo-menu-orb { display: inline-flex; }
}

/* --- İkincil menü çekmecesi --- */

.yo-drawer {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.yo-drawer__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(27, 32, 36, 0.45);
}

.yo-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(420px, 92vw);
	overflow-y: auto;
	padding: var(--wp--preset--spacing--7);
	background-color: var(--wp--preset--color--canvas);
	border-left: var(--yo-rule);
}

.yo-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--6);
}

.yo-drawer__close,
.yo-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--brand-graphite);
	cursor: pointer;
}

.yo-drawer__group-title {
	margin-top: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.yo-drawer__list {
	list-style: none;
	border-top: var(--yo-rule);
}

.yo-drawer__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	border-bottom: var(--yo-rule);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 500;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
}

.yo-drawer__list a:hover { color: var(--wp--preset--color--primary); }

.yo-drawer__list--legal a {
	min-height: 40px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-drawer__cta { margin-top: var(--wp--preset--spacing--7); }
.yo-drawer__cta .yo-button { width: 100%; }

body.yo-layer-open { overflow: hidden; }

/* --- Lead modalı --- */

.yo-modal {
	position: fixed;
	inset: 0;
	z-index: 140;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--5);
}

.yo-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(27, 32, 36, 0.6);
}

.yo-modal__dialog {
	position: relative;
	width: min(1040px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	background-color: var(--wp--preset--color--canvas);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 24px 64px rgba(27, 32, 36, 0.22);
}

.yo-modal__close {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--4);
	inset-inline-end: var(--wp--preset--spacing--4);
	z-index: 2;
	background-color: var(--wp--preset--color--canvas);
}

.yo-modal__grid { display: grid; }

.yo-modal__aside {
	padding: clamp(24px, 4vw, 48px);
	background-color: var(--wp--preset--color--brand-graphite);
	color: var(--wp--preset--color--inverse-text);
}

.yo-modal__aside .yo-eyebrow { color: rgba(255, 255, 255, 0.62); }

.yo-modal__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	font-weight: 400;
	line-height: 1.12;
	color: var(--wp--preset--color--inverse-text);
	margin-top: var(--wp--preset--spacing--4);
	max-width: 20ch;
	text-wrap: balance;
}

.yo-modal__desc {
	margin-top: var(--wp--preset--spacing--5);
	color: rgba(255, 255, 255, 0.78);
	max-width: 46ch;
}

.yo-modal__benefit-label {
	margin-top: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--inverse-text);
}

.yo-modal__benefits {
	list-style: none;
	margin-top: var(--wp--preset--spacing--3);
}

.yo-modal__benefits li {
	position: relative;
	padding-left: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.82);
}

.yo-modal__benefits li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--brand-cobalt);
	font-weight: 700;
}

.yo-modal__form-col { padding: clamp(24px, 4vw, 48px); }

.yo-modal__textarea { min-height: 104px; }

.yo-modal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--6);
}

.yo-modal__submit { gap: var(--wp--preset--spacing--2); }

.yo-modal__skip {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--3);
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.yo-modal__preview-note {
	margin-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 860px) {
	.yo-modal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Ana sayfa içgörü slider'ı --- */

.yo-hp-insights { border-top: var(--yo-rule); }

.yo-hp-insights__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--5);
	margin-bottom: var(--wp--preset--spacing--7);
}

.yo-hp-insights__controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
}

.yo-hp-insights__counter {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
}

.yo-hp-insights__counter-current { color: var(--wp--preset--color--brand-graphite); }

.yo-hp-insights__buttons { display: flex; gap: var(--wp--preset--spacing--2); }

.yo-slider-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand-graphite);
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease;
}

.yo-slider-btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--brand-cobalt);
	color: var(--wp--preset--color--primary);
}

.yo-slider-btn:disabled { opacity: 0.35; cursor: default; }

.yo-slider { overflow: hidden; }

.yo-slider__track {
	display: flex;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.yo-slide { flex: 0 0 86%; }

.yo-slide__card {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	height: 100%;
	background-color: var(--wp--preset--color--surface);
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	opacity: 0.55;
	transition: opacity 320ms ease;
}

.yo-slide.is-active .yo-slide__card { opacity: 1; }

.yo-slide__media { display: block; }

.yo-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.yo-slide__body { padding: var(--wp--preset--spacing--6); }

.yo-slide__meta {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--text-muted);
}

.yo-slide__cluster { color: var(--wp--preset--color--brand-graphite); }

.yo-slide__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.35rem, 2.1vw, 1.95rem);
	font-weight: 400;
	line-height: 1.16;
	margin-top: var(--wp--preset--spacing--3);
	text-wrap: balance;
}

.yo-slide__title a {
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
}

.yo-slide__title a:hover { color: var(--wp--preset--color--primary); }

.yo-slide__excerpt {
	margin-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-muted);
	max-width: 56ch;
}

.yo-slide__byline {
	margin-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-slide__cta { margin-top: var(--wp--preset--spacing--5); }

.yo-hp-insights__all { margin-top: var(--wp--preset--spacing--6); }

@media (min-width: 900px) {
	/*
	 * SIFIR KIRPMA DÜZENİ.
	 * Yan yana sütun kompozisyonu 16:9 kapağı zorunlu olarak kesiyordu:
	 * medya sütunu metin sütununun yüksekliğine uzuyor, oran dikeye
	 * düşüyordu. Kart dikey akışa alındı — kapak tam genişlikte 16:9,
	 * editoryal metin altında. Slayt payı %70'ten %46'ya indirildiği için
	 * sonraki slayt hâlâ görünüyor (peek korunur).
	 */
	.yo-slide { flex: 0 0 46%; }

	.yo-slide__card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		align-items: stretch;
		gap: 0;
	}

	.yo-slide__media,
	.yo-slide__body { min-height: 0; }

	/* Sabit yükseklikte taşmayı önlemek için başlık ve özet kırpılır. */
	.yo-slide__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.yo-slide__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.yo-slide__body {
		display: flex;
		flex-direction: column;
		padding: clamp(24px, 2.2vw, 32px);
		overflow: hidden;
	}

	/*
	 * Flex öğeleri varsayılan olarak daralır: satır-kırpmalı başlık kutusu
	 * küçülünce metin kendi kutusunun dışına taşıp alttaki paragrafın
	 * üzerine biniyordu.
	 */
	.yo-slide__body > * { flex-shrink: 0; }

	/* CTA her kartta aynı hizada kalsın. */
	.yo-slide__cta { margin-top: auto; padding-top: var(--wp--preset--spacing--5); }
}
/* --- Çalışmalar / Hazır Çözümler boş durumları --- */

.yo-hp-cases { border-top: var(--yo-rule); }

.yo-hp-cases__intro,
.yo-hp-solutions__intro,
.yo-method__intro {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 62ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-case-grid {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--7);
}

.yo-case__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.yo-case__sector {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--4);
}

.yo-case__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	font-weight: 400;
	margin-top: var(--wp--preset--spacing--2);
}

.yo-case__problem {
	margin-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-muted);
}

.yo-case__services {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin-top: var(--wp--preset--spacing--4);
}

.yo-case__services li {
	padding: 4px 10px;
	border: var(--yo-rule);
	border-radius: 999px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
}

.yo-case-empty,
.yo-solution-empty,
.yo-social-empty {
	margin-top: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--7);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
}

.yo-case-empty__text,
.yo-solution-empty__text,
.yo-social-empty__text {
	max-width: 62ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-case-empty__cta,
.yo-solution-empty__cta { margin-top: var(--wp--preset--spacing--5); }

.yo-hp-cases__all { margin-top: var(--wp--preset--spacing--6); }

@media (min-width: 900px) {
	.yo-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yo-case--lead { grid-column: 1 / -1; }
	.yo-case--lead .yo-case__img { aspect-ratio: 21 / 9; }
}

/* --- Hazır Çözümler --- */

.yo-surface-soft { background-color: var(--wp--preset--color--surface-soft); }

.yo-solution-list {
	margin-top: var(--wp--preset--spacing--7);
	border-top: var(--yo-rule);
}

.yo-solution {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--5);
	padding-block: var(--wp--preset--spacing--6);
	border-bottom: var(--yo-rule);
}

.yo-solution__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-solution__type {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.yo-solution__name {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 1.5rem;
	font-weight: 400;
	margin-top: var(--wp--preset--spacing--2);
}

.yo-solution__desc { margin-top: var(--wp--preset--spacing--3); color: var(--wp--preset--color--text-muted); }

/* --- Çalışma modelimiz: editoryal zaman çizelgesi --- */

.yo-method { border-top: var(--yo-rule); }

.yo-method__timeline {
	list-style: none;
	margin-top: var(--wp--preset--spacing--8);
	display: grid;
	gap: var(--wp--preset--spacing--7);
}

.yo-method__step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--5);
	padding-bottom: var(--wp--preset--spacing--7);
	border-bottom: var(--yo-rule);
}

.yo-method__step:last-child { border-bottom: 0; padding-bottom: 0; }

.yo-method__num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1;
	color: var(--wp--preset--color--border);
}

.yo-method__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-method__desc {
	margin-top: var(--wp--preset--spacing--3);
	max-width: 62ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-method__points {
	list-style: none;
	margin-top: var(--wp--preset--spacing--4);
	display: grid;
	gap: var(--wp--preset--spacing--2);
}

.yo-method__points li {
	position: relative;
	padding-left: var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--small);
}

.yo-method__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
}

.yo-method__note {
	margin-top: var(--wp--preset--spacing--7);
	padding-top: var(--wp--preset--spacing--5);
	border-top: var(--yo-rule);
	max-width: 62ch;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 900px) {
	.yo-method__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--9); }

	/* İki kolonda son satırın tamamı çizgisiz kalır; :last-child tek
	   başına yalnız sağ sütunu temizlediği için satır asimetrik olurdu. */
	.yo-method__step:nth-last-child(-n + 2) {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* --- Uzman ekibimiz (koyu yüzey) --- */

.yo-team .yo-section-title,
.yo-team__intro { color: var(--wp--preset--color--inverse-text); }

.yo-team .yo-eyebrow { color: rgba(255, 255, 255, 0.6); }

.yo-team__intro {
	margin-top: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--lead);
}

.yo-team__copy {
	margin-top: var(--wp--preset--spacing--3);
	max-width: 58ch;
	color: rgba(255, 255, 255, 0.72);
}

.yo-team__list {
	margin-top: var(--wp--preset--spacing--8);
	display: grid;
	gap: var(--wp--preset--spacing--8);
}

.yo-member {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--7);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.yo-member__portrait {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 32%;
	border-radius: var(--wp--custom--radius--md);
}

.yo-member__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-member__expertise {
	margin-top: var(--wp--preset--spacing--2);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.yo-member__headline {
	margin-top: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.4rem, 2.4vw, 2.1rem);
	line-height: 1.16;
	color: var(--wp--preset--color--inverse-text);
	max-width: 24ch;
	text-wrap: balance;
}

.yo-member__name {
	margin-top: var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--inverse-text);
}

.yo-member__role {
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.6);
}

.yo-member__desc {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 58ch;
	color: rgba(255, 255, 255, 0.78);
}

.yo-member__cta { margin-top: var(--wp--preset--spacing--5); }

@media (min-width: 900px) {
	.yo-member {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--wp--preset--spacing--9);
		align-items: start;
	}

	/* Onaylı portre yoksa kolon tamamen çöker — boş çerçeve yayınlanmaz. */
	.yo-member--no-portrait { grid-template-columns: minmax(0, 1fr); }
	.yo-member--no-portrait .yo-member__headline { max-width: 32ch; }
}

/* --- Kısa görüşler (sosyal video) --- */

.yo-social { border-top: var(--yo-rule); }

.yo-social__grid {
	list-style: none;
	margin-top: var(--wp--preset--spacing--7);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
}

.yo-reel {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-soft);
}

.yo-reel__poster { width: 100%; height: 100%; object-fit: cover; display: block; }

.yo-reel__play {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--4);
	inset-inline-start: var(--wp--preset--spacing--4);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-cobalt);
	color: var(--wp--preset--color--inverse-text);
	cursor: pointer;
}

.yo-reel__frame { width: 100%; height: 100%; border: 0; }

.yo-social__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--6);
}

@media (min-width: 900px) {
	.yo-social__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- SSS --- */

.yo-faq { border-top: var(--yo-rule); }

.yo-faq__list {
	margin-top: var(--wp--preset--spacing--7);
	border-top: var(--yo-rule);
	max-width: 76ch;
}

.yo-faq__item { border-bottom: var(--yo-rule); }

.yo-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	min-height: 64px;
	padding-block: var(--wp--preset--spacing--4);
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-faq__q::-webkit-details-marker { display: none; }

.yo-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.yo-faq__icon::before,
.yo-faq__icon::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 18px;
	height: 1.5px;
	background-color: var(--wp--preset--color--brand-cobalt);
	transition: transform 200ms ease;
}

.yo-faq__icon::after { transform: rotate(90deg); }
.yo-faq__item[open] .yo-faq__icon::after { transform: rotate(0deg); }

.yo-faq__a {
	padding-bottom: var(--wp--preset--spacing--5);
	max-width: 68ch;
	color: var(--wp--preset--color--text-muted);
}

/* --- İçgörüler arşivi düzeltmeleri (Phase 5.4 §22) --- */

/* H1 editoryal serif olmalı — sistem tutarlılığı. */
.yo-insights-hero__title,
.yo-article-title,
.yo-article-header h1 {
	font-family: var(--wp--preset--font-family--editorial) !important;
	font-weight: 400;
}

/* Konu navigasyonu: mobilde sarma yerine tek satır yatay kaydırma.
   Satır sayısı değişmediği için font yüklenirken kayma oluşmaz (CLS). */
/* Konu navigasyonu tek satırda kalır; satır sayısı sabit olduğu için
   yazı tipi geç yüklendiğinde yeniden akış (CLS) oluşmaz. */
.yo-topic-nav__inner { flex-wrap: nowrap; }

.yo-topic-nav__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	/* Kaydırma çubuğu görünüp kaybolurken yükseklik zıplamasın. */
	min-height: 44px;
	padding-bottom: 2px;
}

.yo-topic-nav__item { flex: 0 0 auto; }
.yo-topic-nav__link { white-space: nowrap; }

/* Etiket, kaydırılabilir listeyle birlikte daralmaz. */
.yo-topic-nav__label { flex: 0 0 auto; }

/* --- Header: 900–1199px aralığında logo daralmasın (WCAG 2.2 SC 2.5.8) --- */

.yo-logo-slot { flex: 0 0 auto; }

.yo-header__nav { min-width: 0; }

@media (min-width: 900px) and (max-width: 1199px) {
	/* Baskı navigasyona bindirilir, marka işaretine değil. */
	.yo-menu { gap: var(--wp--preset--spacing--2); }
	.yo-header__analysis { padding-inline: var(--wp--preset--spacing--4); }
}

/* Öne çıkan içgörü: geniş kobalt zemin kaldırıldı. */
.yo-insights-featured,
.yo-featured-insight,
.yo-insights-featured__card {
	background-color: var(--wp--preset--color--surface) !important;
	border: var(--yo-rule);
}
/* --- [hidden] koruması --------------------------------------------------
   `.yo-modal { display: flex }` gibi yazar kuralları, tarayıcının
   `[hidden] { display: none }` UA kuralını ezer; katman görünmez görünse
   bile tıklamaları yakalamaya devam eder. Bu kural sözleşmeyi geri kurar.
   ---------------------------------------------------------------------- */
[hidden] {
	display: none !important;
}
/* ==========================================================================
   Bölüm 23 — PHASE 5.4 VISUAL CLOSURE
   Kapak görselleri: SIFIR ANLAMLI KIRPMA
   ========================================================================== */

/*
 * Kapaklar editoryal kompozisyondur; içlerinde büyük başlık, fotoğraf ve
 * özne bulunur. `cover` bu içeriği keser. Kapsayıcı sabit 16:9 tutulur,
 * görsel `contain` ile TAM gösterilir.
 *
 * Kapakların tamamı 16:9 değildir (8 adet 16:9, 2 adet 3:2). 3:2 olanlar
 * kırpılmak yerine tasarım sistemi yüzeyi üzerinde yanlardan boşluk bırakır.
 */
.yo-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--surface-soft);
	overflow: hidden;
}

.yo-cover__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Slaytta kapak kartın üst köşelerine oturur. */
.yo-slide__media .yo-cover { border-bottom: var(--yo-rule); }

/* --- İçgörüler arşivi: kapak artık kimliğin parçası --- */

.yo-pub-item__media {
	display: block;
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	transition: border-color 200ms ease;
}

.yo-pub-item__media:hover { border-color: var(--wp--preset--color--brand-cobalt); }

/* --- Öne çıkan içgörü --- */

.yo-featured-card__media {
	display: block;
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

@media (min-width: 900px) {
	/*
	 * Editoryal arşiv satırı: solda 16:9 kapak, sağda metin.
	 * Küçük resim ızgarası değil — kapak sütunu satırın üçte birini alır.
	 */
	.yo-pub-item {
		display: grid;
		grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--6);
		align-items: start;
	}

	/* Ana rehber satırında kapak daha baskın. */
	.yo-pub-item--pillar {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) auto;
	}

	.yo-featured-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--7);
		align-items: center;
	}
}

@media (max-width: 899px) {
	/*
	 * Mobil: doğal dikey editoryal akış — tam genişlik 16:9 kapak,
	 * ardından kategori, başlık, özet ve meta.
	 */
	.yo-pub-item__media,
	.yo-featured-card__media { margin-bottom: var(--wp--preset--spacing--4); }
}
/* --- Kısa görüşler: poster-only kart (gerçek video adresi yokken) --- */

.yo-reel {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--4);
	border: var(--yo-rule);
}

.yo-reel--poster-only {
	background: linear-gradient(
		170deg,
		var(--wp--preset--color--surface-soft) 0%,
		var(--wp--preset--color--surface) 100%
	);
}

.yo-reel__platform {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--4);
	inset-inline-start: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.yo-reel__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 1.05rem;
	line-height: 1.22;
	color: var(--wp--preset--color--brand-graphite);
	text-wrap: balance;
}

.yo-reel__glyph {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--brand-cobalt);
	font-size: 0.75rem;
}

/* Gerçek poster görseli varsa metin okunabilirliği için üstünde kalır. */
.yo-reel__poster + .yo-reel__platform,
.yo-reel__poster ~ .yo-reel__title { color: var(--wp--preset--color--inverse-text); }

/* --- Vaka kartı gövdesi --- */

.yo-case__body { margin-top: var(--wp--preset--spacing--4); }
.yo-case--lead .yo-case__body { margin-top: var(--wp--preset--spacing--5); }
.yo-case__cta { margin-top: var(--wp--preset--spacing--4); }

/* Kapak görseli olmayan vaka kartında başlık üstte nefes alsın. */
.yo-case:not(:has(.yo-case__media)) .yo-case__body { margin-top: 0; }

.yo-case:not(:has(.yo-case__media)) {
	padding-top: var(--wp--preset--spacing--6);
	border-top: var(--yo-rule);
}

/* --- Çözüm kartı ek alanları --- */

.yo-solution__deliverable {
	margin-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-solution__price {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
}
/* --- Öne çıkan içgörü zemini (Phase 5.4 §22 düzeltmesi, doğru öğe) ---
   Kural daha önce `.yo-insights-featured` bölümüne yazılmıştı; kobalt tonu
   ise iç kart olan `.yo-featured-card` üzerindeydi (ölçüm: rgb(238,241,248)).
   Geniş kobalt zemin yerine Canvas + Border kullanılır. */
.yo-featured-card {
	background-color: var(--wp--preset--color--surface) !important;
	border: var(--yo-rule);
	border-radius: var(--wp--custom--radius--md);
	padding: clamp(20px, 2.4vw, 36px);
}

/* Arşiv satırında kapak daha baskın: küçük resim izlenimi vermemeli. */
@media (min-width: 900px) {
	.yo-pub-item { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr) auto; }
	.yo-pub-item--pillar { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) auto; }
}
/* ==========================================================================
   Bölüm 24 — ANA SAYFA REVİZE / FINAL MASTER
   ========================================================================== */

/* --- Header: marka kilidi --- */

.yo-logo-slot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
}

.yo-logo-slot__tagline {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

@media (max-width: 599px) {
	/* Dar ekranda konumlandırma satırı logoyla yarışır. */
	.yo-logo-slot__tagline { display: none; }
}

/* --- HERO: bölünmüş kompozisyon --- */

.yo-hero--split {
	padding: 0;
	border-bottom: var(--yo-rule);
	overflow: hidden;
}

.yo-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.yo-hero__col--text {
	padding-inline: var(--wp--preset--spacing--6);
	padding-block: clamp(48px, 7vw, 96px);
	max-width: 720px;
	margin-inline: auto;
	width: 100%;
}

.yo-hero__eyebrow { color: var(--wp--preset--color--text-muted); }

.yo-hero__title {
	margin-top: var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2.4rem, 6.2vw, 4.4rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--brand-graphite);
	text-wrap: balance;
}

/* Kobalt aksan çizgisi — dekor değil, başlığı okumadan ayırır. */
.yo-hero__rule {
	display: block;
	width: 56px;
	height: 2px;
	margin-top: var(--wp--preset--spacing--6);
	background-color: var(--wp--preset--color--brand-cobalt);
}

.yo-hero__lead {
	margin-top: var(--wp--preset--spacing--6);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--text-muted);
}

.yo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--7);
}

.yo-hero__secondary {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Uzmanlık şeridi — ikon yok, ayrım hairline kuralla. */
.yo-hero__domains { margin-top: clamp(40px, 5vw, 72px); }

.yo-hero__domains-label { color: var(--wp--preset--color--text-muted); }

.yo-hero__domain-list {
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--5);
}

.yo-hero__domain-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.yo-hero__domain-name {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	transition: color 180ms ease;
}

.yo-hero__domain-link:hover .yo-hero__domain-name { color: var(--wp--preset--color--primary); }

.yo-hero__domain-desc {
	display: block;
	margin-top: 6px;
	max-width: 24ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-hero__col--media { position: relative; }

.yo-hero__art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}

@media (min-width: 900px) {
	.yo-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
		align-items: stretch;
		min-height: min(84vh, 820px);
	}

	.yo-hero__col--text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: none;
		margin-inline: 0;
		padding-inline-start: max(var(--wp--preset--spacing--8), calc((100vw - 1240px) / 2));
		padding-inline-end: var(--wp--preset--spacing--8);
	}

	.yo-hero__domain-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.yo-hero__domain { padding-inline: var(--wp--preset--spacing--5); }
	.yo-hero__domain:first-child { padding-inline-start: 0; }
	.yo-hero__domain + .yo-hero__domain { border-inline-start: var(--yo-rule); }

	/* Görsel, metin sütununun soluna taşmadan tam yüksekliği doldurur. */
	.yo-hero__col--media { min-height: 100%; }
}

@media (max-width: 899px) {
	.yo-hero__col--media { aspect-ratio: 16 / 10; }
	.yo-hero__art { object-position: center; }
	.yo-hero__domain + .yo-hero__domain {
		padding-top: var(--wp--preset--spacing--5);
		border-top: var(--yo-rule);
	}
}

/* --- HİZMETLER: daha tok tipografi, daha iyi yatay kullanım --- */

.yo-service__name {
	/* Önceki 1.35rem tabanından ~%15 artış. */
	font-size: clamp(1.28rem, 2.1vw, 1.85rem);
	line-height: 1.16;
}

.yo-service__desc {
	/* Önceki small (0.875rem) tabanından ~%14 artış. */
	font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	/*
	 * Açıklama kolonu sağa doğru daha iyi açılır; "container erken bitmiş"
	 * hissi veren dar açıklama sütunu genişletildi.
	 */
	.yo-service__link {
		grid-template-columns: auto minmax(0, 0.86fr) minmax(0, 1.14fr) auto;
		column-gap: var(--wp--preset--spacing--7);
		align-items: baseline;
	}

	.yo-service__desc { max-width: 62ch; }
}

/* --- SSS: soru metni ile ikon ayrımı --- */

.yo-faq__q-text { flex: 1 1 auto; }

/* --- Çalışma modeli: gövde sarmalayıcı --- */

.yo-method__body { min-width: 0; }
/* --- Header menüsü: öğe içi sarmayı engelle ---
   Ölçüm: liste tek satırdaydı; sarma "Birlikte Ürettiklerimiz" ve
   "Uzmanlık Alanlarımız" etiketlerinin KENDİ İÇİNDE oluyordu. nowrap tek
   başına satırı 1304px kabın dışına taşırdı; bu yüzden tipografi ve
   boşluk ölçülü biçimde daraltıldı. */
@media (min-width: 900px) {
	.yo-menu {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--4);
	}

	.yo-menu__link {
		white-space: nowrap;
		font-size: 0.9375rem;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.yo-menu { gap: var(--wp--preset--spacing--3); }
	.yo-menu__link { font-size: 0.875rem; }
}

/* --- Hero görseli: kadraj ---
   Kolon 16:9 kaynağı dikey bir alana sığdırdığı için aşırı yakınlaşıyordu.
   Hero yüksekliği düşürülerek kolon oranı yatağa yaklaştırıldı; yüzeyin
   çevresindeki boşluk yeniden görünür oldu. */
@media (min-width: 900px) {
	.yo-hero__inner { min-height: min(76vh, 700px); }
	.yo-hero__art { object-position: center; }
}
/* --- Navigasyon kırılım noktası: 900px → 1200px ---
   Ölçüm: 1024px'te logo (251) + satır içi menü (669) + CTA (183) + orb (48)
   = 1152px, kap ise 1024px. Yedi uzun Türkçe etiket, birincil CTA ve
   ikincil menü aynı satıra bu genişlikte SIĞMIYOR. Tipografiyi okunmaz
   hale getirecek kadar küçültmek yerine, 900–1199 aralığı zaten var olan
   ve çalışan çekmece navigasyonuna bırakılır. */
@media (min-width: 900px) and (max-width: 1199px) {
	.yo-nav-toggle { display: inline-flex; }

	.yo-header__nav {
		display: none;
		flex-direction: column;
		gap: var(--wp--preset--spacing--5);
		position: fixed;
		top: var(--wp--custom--header--height);
		inset-inline: 0;
		bottom: 0;
		padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
		background-color: var(--wp--preset--color--surface);
		overflow-y: auto;
		z-index: 110;
	}

	.yo-nav-open .yo-header__nav { display: flex; }

	.yo-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--3);
	}

	.yo-menu__link { font-size: 1.0625rem; white-space: normal; }

	/* Panel açıkken header CTA'sı listenin sonunda kalır. */
	.yo-header__cta { margin-top: var(--wp--preset--spacing--4); }
}

/* 1200px ve üzeri: satır içi menü. Etiketler sarmaz. */
@media (min-width: 1200px) {
	.yo-menu {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--5);
	}

	.yo-menu__link { white-space: nowrap; font-size: 0.9375rem; }
}

/* --- Hero başlığı: iki satır ---
   4.4rem tabanda "gerçek neden değildir." ikinci satıra taşıp başlığı üç
   satıra çıkarıyor, hero'yu 919px'e uzatıyordu. Ölçek ve sütun genişliği
   iki satırı garanti edecek şekilde ayarlandı. */
@media (min-width: 900px) {
	.yo-hero__title { font-size: clamp(2.6rem, 4.4vw, 3.75rem); }
	.yo-hero__lead { max-width: 44ch; }
}
/* --- Header satırı: orb kaldırıldı ---
   Ölçüm: logo (251) + doğal nav (menü 741 + CTA 207 + boşluk) + orb (46)
   = 1349px doğal genişlik, 1440'ta kap 1304px. Satır gerçekten sığmıyor;
   `min-width: 0` yüzünden nav daralıyor ve CTA butonu kabının dışına
   taşarak orb'un altında kalıyordu.

   Çözüm daraltmak değil, tekrarı kaldırmak: yedi maddelik birincil menü
   satır içinde tamamen görünürken, aynı bağlantıları tekrar sunan ikinci
   bir hamburger bilgi taşımıyor. Bu yüzden orb header'dan çıkarıldı.
   1200px altında navigasyon zaten `.yo-nav-toggle` ile açılıyor; iki ayrı
   hamburger yan yana durmasın diye orb orada da gizli. Çekmece işaretlemesi
   yerinde duruyor — ileride farklı bir içerikle geri getirilebilir. */
.yo-menu-orb { display: none !important; }

@media (min-width: 1200px) {
	/* Nav daralmasın: daralınca CTA kabının dışına taşıyor. */
	.yo-header__nav { min-width: auto; flex: 0 1 auto; }
	.yo-header__cta { flex: 0 0 auto; }
}
/* --- Navigasyon kırılım noktası: nihai ölçüm ---
   Orb kaldırıldıktan sonra doğal nav genişliği 996px'ti; 1200 ve 1280'de
   hâlâ taşıyordu. Etiketler kısaltılamaz (menü yapısı sabit), bu yüzden
   yalnız yoğunluk ayarlandı: menü tipografisi 15px→14px, öğe arası boşluk
   24px→16px, menü ile CTA arası 56px→32px. Ölçülen yeni doğal genişlik bu
   bloğun altındaki QA'da doğrulanır. Eşik, bu genişliğin gerçekten sığdığı
   ilk kırılım olan 1240px'e alındı. */
@media (min-width: 900px) and (max-width: 1239px) {
	.yo-nav-toggle { display: inline-flex; }
	.yo-header__nav { display: none; }
	.yo-nav-open .yo-header__nav { display: flex; }
}

@media (min-width: 1240px) {
	.yo-nav-toggle { display: none; }

	.yo-header__nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--5);
		position: static;
		inset: auto;
		padding: 0;
		background-color: transparent;
		overflow: visible;
		min-width: auto;
		flex: 0 1 auto;
	}

	.yo-menu {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--wp--preset--spacing--4);
	}

	.yo-menu__link {
		white-space: nowrap;
		font-size: 0.875rem;
	}

	.yo-header__cta { flex: 0 0 auto; margin-top: 0; }
}
/* --- Hero başlığı: iki satırda okunmalı ---
   Ölçüm: 1440'ta metin sütunu ~610px, başlık 60px'te render oluyor ve
   "gerçek neden değildir." satırı sığmayıp üçüncü satıra taşıyordu.
   Ölçek 3.4rem'e çekilip sütun payı bir miktar artırıldı; satır sayısı
   aşağıdaki QA'da doğrulanıyor. */
@media (min-width: 900px) {
	.yo-hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
	.yo-hero__title { font-size: clamp(2.6rem, 4vw, 3.4rem); }
}
/* Satır kırılımı `<br>` ile ELLE kuruluyor; `balance` bunun üzerine
   ikinci parçayı yeniden bölüştürüp başlığı üç satıra çıkarıyordu. */
.yo-hero__title { text-wrap: pretty; }
/* Genel başlık ölçüsü (max-width ≈ 489px) hero H1'i kullanılabilir 577px
   sütunun altında tutuyor ve "gerçek neden değildir." satırını ikiye
   bölüyordu. Hero başlığı ölçü disiplininin dışındadır: satır kırılımı
   `<br>` ile elle kurulur. */
.yo-hero__title { max-width: none; }
/* --- Bölüm başlığı (split): oranlar sabitlendi ---
   Ölçüm: başlığın max-width'i 586px ama flex içinde 273px'e daralıyor,
   "Her problem aynı araçla çözülmez." dört satıra sıkışıyordu. Not sütunu
   sabitlenip başlığa gerçek genişlik verildi. */
@media (min-width: 900px) {
	.yo-section-head--split {
		align-items: end;
		gap: var(--wp--preset--spacing--8);
	}

	.yo-section-head--split > :first-child { flex: 1 1 58%; min-width: 0; }

	.yo-section-head__note {
		flex: 0 1 34%;
		min-width: 0;
		max-width: 42ch;
		margin-bottom: 0.4em;
	}
}
/* 26ch'lik sarmalayıcı ölçüsü `flex-basis`i eziyordu; masaüstünde
   başlığın kendi ölçüsü (max-width ≈ 586px) belirleyici olur. */
@media (min-width: 900px) {
	.yo-section-head--split > div { max-width: none; }
}
/* --- Hero mobil: görsel metnin üstünde ---
   Ölçüm: 390px'te medya kolonu y=1142'de, yani tüm metnin altında
   kalıyordu; ilk ekranda görsel hiç görünmüyordu. Dikey akışta görsel
   öne alınır — okuyucu tezle birlikte yüzeyi de görür. */
@media (max-width: 899px) {
	.yo-hero__inner { display: flex; flex-direction: column; }
	.yo-hero__col--media { order: -1; }
	.yo-hero__col--text { padding-block-start: clamp(32px, 6vw, 56px); }
}
/* ==========================================================================
   Bölüm 25 — HERO ÜÇLÜ SLIDER + VİDEO
   ========================================================================== */

.yo-hero__stage { position: relative; }

.yo-hero__slide { display: block; }
.yo-hero__slide[hidden] { display: none !important; }

.yo-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* --- Video ve görsel aynı kutuyu paylaşır --- */

.yo-hero__col--media {
	position: relative;
	background-color: var(--wp--preset--color--surface-soft);
	overflow: hidden;
}

.yo-hero__art,
.yo-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Slayt sekmeleri --- */

.yo-hero__controls {
	border-top: var(--yo-rule);
	background-color: var(--wp--preset--color--surface);
}

.yo-hero__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--6);
}

.yo-hero__tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 68px;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) 0;
	border: 0;
	border-top: 2px solid transparent;
	background: none;
	text-align: start;
	cursor: pointer;
	transition: border-color 200ms ease;
}

.yo-hero__tab + .yo-hero__tab { padding-inline-start: var(--wp--preset--spacing--5); }

.yo-hero__tab-num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--text-muted);
	transition: color 200ms ease;
}

.yo-hero__tab-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted);
	transition: color 200ms ease;
}

.yo-hero__tab.is-active { border-top-color: var(--wp--preset--color--brand-cobalt); }
.yo-hero__tab.is-active .yo-hero__tab-num { color: var(--wp--preset--color--brand-cobalt); }
.yo-hero__tab.is-active .yo-hero__tab-label { color: var(--wp--preset--color--brand-graphite); }

.yo-hero__tab:hover .yo-hero__tab-label { color: var(--wp--preset--color--brand-graphite); }

/* --- Uzmanlık şeridi: slaytların dışında, sabit --- */

.yo-hero__domains {
	border-top: var(--yo-rule);
	background-color: var(--wp--preset--color--surface-soft);
}

.yo-hero__domains-inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--6);
}

@media (min-width: 900px) {
	.yo-hero__inner {
		grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: min(70vh, 640px);
	}

	.yo-hero__domains-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--8);
		padding-block: var(--wp--preset--spacing--6);
	}

	.yo-hero__domains-label { margin: 0; }
	.yo-hero__domain-list { margin-top: 0; }
}

@media (max-width: 899px) {
	/* Görsel metnin üstünde: ilk ekranda tez ve yüzey birlikte görünür. */
	.yo-hero__inner { display: flex; flex-direction: column; }
	.yo-hero__col--media { order: -1; aspect-ratio: 16 / 10; }

	.yo-hero__tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-inline: var(--wp--preset--spacing--5);
	}

	.yo-hero__tab-label {
		font-size: 0.625rem;
		/* Etiket iki satırı geçmesin: sekme yüksekliği sabit kalır. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Hareket tercihi: video oynatılmaz (JS), geçişler de sadeleşir. */
@media (prefers-reduced-motion: reduce) {
	.yo-hero__tab { transition: none !important; }
}
/* --- Hero: bölüm dolgusu ve slayt yüksekliği ---
   Ölçüm: `.yo-hero` taban dolgusu sekme çubuğu ile uzmanlık şeridi
   arasında 72px boş bant bırakıyordu. Ayrıca slayt yükseklikleri
   640/764/675 arasında oynadığı için sekme çubuğu her geçişte yer
   değiştiriyordu — yükseklik sabitlendi. */
.yo-hero--split { padding-block: 0; }

@media (min-width: 900px) {
	.yo-hero__inner { min-height: 700px; }
}
/* Şerit artık metin sütununun içinde değil, tam genişlik bir bant.
   Eski yapıdan kalan 72px üst boşluk sekme çubuğuyla şerit arasında
   boş bir bant bırakıyordu. */
.yo-hero__domains { margin-top: 0; }

/* Slayt 2 metni diğerlerinden uzun; taban yükseklik en uzun slayta
   çekilerek sekme çubuğunun geçişlerde yer değiştirmesi engellendi. */
@media (min-width: 900px) {
	.yo-hero__inner { min-height: 732px; }
}
/* ==========================================================================
   Bölüm 26 — HERO: TEK PARÇA SİNEMATİK SAHNE (baskın karar)
   Bölüm 25'teki bölünmüş kompozisyonun yerine geçer.
   ========================================================================== */

/* --- Header sahnenin üstünde --- */

.yo-header--overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 60;
	background-color: transparent;
	border-bottom: 1px solid rgba(27, 32, 36, 0.08);
}

/* Sahnenin sol üst bölgesi açık olduğu için koyu marka rengi okunur. */
.yo-header--overlay .yo-menu__link,
.yo-header--overlay .yo-logo-slot__tagline { color: var(--wp--preset--color--brand-graphite); }

.yo-header--overlay .yo-logo-slot__tagline { opacity: 0.72; }

/* Header hero'nun üstündeyken menü aralıkları genişler: rafine ve sakin. */
@media (min-width: 1240px) {
	.yo-header--overlay .yo-menu { gap: var(--wp--preset--spacing--5); }
}

/* Sayfa akışı bozulmasın: hero header'ın altından başlar. */
.yo-site { position: relative; }

/* --- Sahne --- */

.yo-hero--scene {
	padding: 0;
	border-bottom: 0;
}

.yo-scene {
	position: relative;
	min-height: 88vh;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-soft);
}

.yo-scene__slide { position: relative; }

.yo-scene__slide[hidden] { display: none !important; }

/* Medya tam kanama zemin. */
.yo-scene__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.yo-scene__img,
.yo-scene__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Yoğun görsel kütle sağda kalsın, sol nefes alsın. */
	object-position: 72% 50%;
}

/*
 * Perde ağır karartma değil: zemin renginden türeyen, yalnız sol yarıda
 * etkili yumuşak bir geçiş. Görseli bastırmaz, metin kontrastını ölçülebilir
 * eşiğin üstünde tutar.
 */
.yo-scene__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(250, 249, 246, 0.94) 0%,
			rgba(250, 249, 246, 0.86) 26%,
			rgba(250, 249, 246, 0.45) 48%,
			rgba(250, 249, 246, 0) 68%
		);
}

/* --- İçerik --- */

.yo-scene__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 88vh;
	padding-block: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--7)) var(--wp--preset--spacing--9);
	padding-inline: var(--wp--preset--spacing--6);
}

.yo-scene__copy { width: 100%; }

.yo-scene__eyebrow { color: var(--wp--preset--color--text-muted); }

.yo-scene__title {
	margin-top: var(--wp--preset--spacing--5);
	max-width: none;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2.5rem, 5.6vw, 4.25rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.yo-scene__title-lead,
.yo-scene__title-accent { display: block; }

.yo-scene__title-lead { color: var(--wp--preset--color--brand-graphite); }

/*
 * Vurgu rastgele renk değil, tipografik ritim: aynı ailede daha yumuşak
 * bir ton. Kontrast metin eşiğinin üstünde kalır.
 */
.yo-scene__title-accent { color: #5A6470; }

.yo-scene__lead {
	margin-top: var(--wp--preset--spacing--6);
	max-width: 38ch;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--text-muted);
}

.yo-scene__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--7);
}

/* Birincil CTA: dolu, koyu, sakin. Parlak SaaS butonu değil. */
.yo-scene__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding-inline: var(--wp--preset--spacing--7);
	border-radius: 2px;
	background-color: var(--wp--preset--color--brand-graphite);
	color: var(--wp--preset--color--inverse-text);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.yo-scene__cta:hover { background-color: #000; }

.yo-scene__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cobalt);
	outline-offset: 3px;
}

.yo-scene__secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 32, 36, 0.3);
	transition: border-color 200ms ease, color 200ms ease;
}

.yo-scene__secondary:hover {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--brand-cobalt);
}

/* --- Slayt sekmeleri: sahnenin alt kenarında --- */

.yo-scene__tabs {
	position: absolute;
	z-index: 2;
	inset-block-end: 0;
	inset-inline: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--6);
}

.yo-scene__tab {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-height: 44px;
	padding: var(--wp--preset--spacing--3) 0;
	border: 0;
	background: none;
	text-align: start;
	cursor: pointer;
}

.yo-scene__tab-rule {
	display: block;
	height: 2px;
	background-color: rgba(27, 32, 36, 0.18);
	transition: background-color 220ms ease;
}

.yo-scene__tab-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	color: var(--wp--preset--color--text-muted);
	transition: color 220ms ease;
}

.yo-scene__tab.is-active .yo-scene__tab-rule { background-color: var(--wp--preset--color--brand-cobalt); }
.yo-scene__tab.is-active .yo-scene__tab-label { color: var(--wp--preset--color--brand-graphite); }
.yo-scene__tab:hover .yo-scene__tab-label { color: var(--wp--preset--color--brand-graphite); }

@media (min-width: 900px) {
	.yo-scene { min-height: 92vh; }

	.yo-scene__content {
		min-height: 92vh;
		padding-inline-start: max(var(--wp--preset--spacing--8), calc((100vw - 1240px) / 2));
		padding-inline-end: var(--wp--preset--spacing--8);
	}

	/* Metin bloğu sahne genişliğinin ~%40'ı (§4). */
	.yo-scene__copy { max-width: min(40%, 620px); }

	.yo-scene__tabs {
		max-width: 1240px;
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--6);
		padding-bottom: var(--wp--preset--spacing--7);
	}
}

@media (max-width: 899px) {
	/*
	 * Mobilde sahne mantığı korunur ama perde dikeye döner: görsel üst
	 * bölgede nefes alır, metin alt bölgede okunur kalır.
	 */
	.yo-scene,
	.yo-scene__content { min-height: 88vh; }

	.yo-scene__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(250, 249, 246, 0.55) 0%,
				rgba(250, 249, 246, 0.82) 38%,
				rgba(250, 249, 246, 0.95) 62%
			);
	}

	.yo-scene__img,
	.yo-scene__video { object-position: 64% 50%; }

	.yo-scene__content {
		align-items: flex-end;
		padding-bottom: 132px;
	}

	.yo-scene__lead { max-width: 34ch; }

	.yo-scene__tabs {
		gap: var(--wp--preset--spacing--3);
		padding: var(--wp--preset--spacing--5);
	}

	.yo-scene__tab-label {
		font-size: 0.5625rem;
		letter-spacing: 0.08em;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* --- Uzmanlık şeridi: hero'nun dışında, ince bant --- */

.yo-domains {
	border-block: var(--yo-rule);
	background-color: var(--wp--preset--color--surface);
}

.yo-domains__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--6);
}

.yo-domains__label { color: var(--wp--preset--color--text-muted); }

.yo-domains__list {
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--5);
}

.yo-domains__link { display: block; text-decoration: none; color: inherit; }

.yo-domains__name {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite);
	transition: color 180ms ease;
}

.yo-domains__link:hover .yo-domains__name { color: var(--wp--preset--color--primary); }

.yo-domains__desc {
	display: block;
	margin-top: 6px;
	max-width: 26ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.yo-domains__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--8);
	}

	.yo-domains__label { margin: 0; }

	.yo-domains__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		margin-top: 0;
	}

	.yo-domains__item { padding-inline: var(--wp--preset--spacing--5); }
	.yo-domains__item:first-child { padding-inline-start: 0; }
	.yo-domains__item + .yo-domains__item { border-inline-start: var(--yo-rule); }
}
/* --- Sahne düzeltmeleri (ölçüm sonrası) --- */

/* 1) Header çizgisi sahneyi kesiyordu: kesintisiz sahne için kaldırıldı. */
.yo-header--overlay { border-bottom: 0; }

/* 2) Header CTA'sı: dolu kobalt buton sahnenin sakin dilini bozuyordu.
      Rafine, çerçeveli, ağırbaşlı bir aksiyona çevrildi. */
.yo-header--overlay .yo-header__analysis {
	background-color: transparent;
	color: var(--wp--preset--color--brand-graphite);
	border: 1px solid rgba(27, 32, 36, 0.28);
	border-radius: 2px;
	box-shadow: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.yo-header--overlay .yo-header__analysis:hover {
	background-color: var(--wp--preset--color--brand-graphite);
	border-color: var(--wp--preset--color--brand-graphite);
	color: var(--wp--preset--color--inverse-text);
}

/* 3) Sekme etiketleri 2 ve 3, koyu görsel kütlenin üzerine denk gelip
      okunmuyordu (ölçüldü). Sekme şeridinin arkasına, zemin renginden
      türeyen yumuşak bir taban perdesi eklendi; görsel bastırılmaz,
      etiketler her slaytta okunur kalır. */
.yo-scene__tabs::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 190px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(250, 249, 246, 0) 0%,
		rgba(250, 249, 246, 0.72) 46%,
		rgba(250, 249, 246, 0.96) 100%
	);
}

/* Perde sekmelerin arkasında kalsın. */
.yo-scene__tabs { isolation: isolate; }
/* Taban perdesi sekme kabına bağlıydı; kap masaüstünde 1240px ile
   sınırlandığı için sahnenin sağında görünür bir dikdörtgen kenar
   bırakıyordu. Perde sahnenin kendisine taşındı: tam genişlik. */
.yo-scene__tabs::before { content: none; }

.yo-scene__slide::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 210px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(250, 249, 246, 0) 0%,
		rgba(250, 249, 246, 0.70) 48%,
		rgba(250, 249, 246, 0.96) 100%
	);
}
/* ==========================================================================
   Bölüm 27 — HOMEPAGE v3.0
   Hero kontrol rayı · uzman değiştirici · süreç rayı · ritim
   Önceki bölümlerdeki çakışan kurallar burada geçersiz kılınır.
   ========================================================================== */

/* --- Header: kilitli navigasyon, daha fazla nefes --- */

.yo-header--overlay .yo-header__inner {
	padding-inline: clamp(24px, 3.4vw, 48px);
	max-width: 1600px;
}

/* Minimal ikincil menü (hamburger) geri geldi: ana menü beş maddeye
   indiği için artık tekrar değil, gerçek bir tamamlayıcı. */
.yo-menu-orb { display: none !important; }

@media (min-width: 1024px) {
	.yo-menu-orb {
		display: inline-flex !important;
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.yo-menu-orb__bars,
	.yo-menu-orb__bars::before,
	.yo-menu-orb__bars::after {
		width: 18px;
		height: 1px;
		background-color: var(--wp--preset--color--brand-graphite);
	}

	.yo-menu-orb__bars::before { top: -6px; }
	.yo-menu-orb__bars::after  { top: 6px; }
}

/* Beş maddelik menü rahat sığar: 1024'ten itibaren satır içi. */
@media (min-width: 1024px) {
	.yo-nav-toggle { display: none; }

	.yo-header__nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: clamp(24px, 2.6vw, 44px);
		position: static;
		inset: auto;
		padding: 0;
		background-color: transparent;
		overflow: visible;
		min-width: auto;
		flex: 0 1 auto;
	}

	.yo-menu {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: clamp(18px, 1.9vw, 32px);
	}

	.yo-menu__link { white-space: nowrap; font-size: 0.9375rem; }
	.yo-header__cta { flex: 0 0 auto; margin-top: 0; }
}

@media (min-width: 900px) and (max-width: 1023px) {
	.yo-nav-toggle { display: inline-flex; }
	.yo-header__nav { display: none; }
	.yo-nav-open .yo-header__nav { display: flex; }
}

/* CTA daha sakin: ~%12 küçük, çerçeveli. */
.yo-header--overlay .yo-header__analysis {
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--5);
	font-size: 0.875rem;
	background-color: transparent;
	color: var(--wp--preset--color--brand-graphite);
	border: 1px solid rgba(27, 32, 36, 0.26);
	border-radius: 2px;
	box-shadow: none;
}

.yo-header--overlay .yo-header__analysis:hover {
	background-color: var(--wp--preset--color--brand-graphite);
	border-color: var(--wp--preset--color--brand-graphite);
	color: var(--wp--preset--color--inverse-text);
}

/* --- Hero sahnesi: yükseklik ve metin sütunu --- */

.yo-scene { min-height: 88vh; }

@media (min-width: 900px) {
	.yo-scene { min-height: 94vh; }
	.yo-scene__content { min-height: 94vh; }
	/* Metin sütunu ~%10 genişletildi (§12). */
	.yo-scene__copy { max-width: min(46%, 700px); }
}

/* Vurgu satırı aşırı soluk griye düşmesin (§12): Strategic Ink. */
.yo-scene__title-accent { color: var(--wp--preset--color--brand-strategic-ink, #315364); }

/* Slayt geçişi: crossfade + hafif kayma (§15). */
.yo-scene__slide.is-active .yo-scene__copy {
	animation: yo-scene-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes yo-scene-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes yo-rail-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --- Editoryal kontrol rayı (nokta YOK) --- */

.yo-rail {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
}

.yo-rail__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 clamp(24px, 3.4vw, 48px) clamp(20px, 2.4vw, 36px);
	display: grid;
	gap: var(--wp--preset--spacing--5);
}

.yo-rail__track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 28px);
}

.yo-rail__seg {
	display: grid;
	gap: 10px;
	padding: var(--wp--preset--spacing--3) 0 0;
	min-height: 44px;
	border: 0;
	background: none;
	text-align: start;
	cursor: pointer;
}

.yo-rail__line {
	display: block;
	height: 2px;
	background-color: rgba(27, 32, 36, 0.16);
	overflow: hidden;
}

.yo-rail__progress {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background-color: var(--wp--preset--color--brand-cobalt);
}

.yo-rail__meta { display: flex; align-items: baseline; gap: 10px; }

.yo-rail__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
	transition: color 220ms ease;
}

.yo-rail__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	color: var(--wp--preset--color--text-muted);
	transition: color 220ms ease;
}

.yo-rail__label--short { display: none; }

.yo-rail__seg.is-active .yo-rail__line { background-color: rgba(27, 32, 36, 0.24); }
.yo-rail__seg.is-active .yo-rail__num { color: var(--wp--preset--color--brand-cobalt); }
.yo-rail__seg.is-active .yo-rail__label { color: var(--wp--preset--color--brand-graphite); }
.yo-rail__seg:hover .yo-rail__label { color: var(--wp--preset--color--brand-graphite); }

.yo-rail__nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

.yo-rail__count {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted);
	margin-inline-end: auto;
}

.yo-rail__count-current { color: var(--wp--preset--color--brand-graphite); }
.yo-rail__count-sep { margin-inline: 4px; }

.yo-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(27, 32, 36, 0.22);
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--brand-graphite);
	cursor: pointer;
	transition: border-color 200ms ease, color 200ms ease;
}

.yo-rail__btn:hover {
	border-color: var(--wp--preset--color--brand-cobalt);
	color: var(--wp--preset--color--primary);
}

@media (min-width: 900px) {
	.yo-rail__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: clamp(24px, 3vw, 56px);
	}
}

@media (max-width: 899px) {
	.yo-rail__label { display: none; }
	.yo-rail__label--short { display: inline; font-size: 0.625rem; }
	.yo-rail__inner { padding-inline: var(--wp--preset--spacing--5); }
	.yo-rail__nav { justify-content: flex-start; }
}

/* --- Uzman ekibi: tek aktif uzman --- */

.yo-experts {
	background-color: var(--wp--preset--color--brand-graphite);
	padding-block: clamp(72px, 9vw, 140px);
}

.yo-experts__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--6);
}

.yo-experts__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 4vw, 3.1rem);
	font-weight: 400;
	line-height: 1.06;
	color: var(--wp--preset--color--inverse-text);
	margin-top: var(--wp--preset--spacing--3);
}

.yo-experts__intro {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.68);
}

.yo-experts .yo-eyebrow { color: rgba(255, 255, 255, 0.55); }

.yo-experts__stage { margin-top: clamp(40px, 5vw, 72px); }

.yo-expert { display: grid; gap: var(--wp--preset--spacing--7); }
.yo-expert[hidden] { display: none !important; }

.yo-expert__media { align-self: start; }

.yo-expert__portrait,
.yo-expert__slot {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 2px;
}

.yo-expert__portrait { object-fit: cover; object-position: center 30%; }

/* Boş portre yuvası: tasarımın parçası gibi davranmaz, nötr kalır. */
.yo-expert__slot {
	display: grid;
	place-items: center;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px dashed rgba(255, 255, 255, 0.16);
}

.yo-slot-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.34);
}

.yo-expert__expertise {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.yo-expert__name {
	margin-top: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--wp--preset--color--inverse-text);
}

.yo-expert__role {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.6);
}

.yo-expert__thesis {
	margin-top: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.4rem, 2.4vw, 2.05rem);
	line-height: 1.16;
	color: var(--wp--preset--color--inverse-text);
	max-width: 22ch;
	text-wrap: balance;
}

.yo-expert__desc {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.76);
}

.yo-expert__cta { margin-top: var(--wp--preset--spacing--6); }

.yo-experts__rail {
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: var(--wp--preset--spacing--5);
}

.yo-experts__names {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2vw, 36px);
}

.yo-experts__name {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.42);
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

.yo-experts__name:hover { color: rgba(255, 255, 255, 0.8); }

.yo-experts__name.is-active {
	color: var(--wp--preset--color--inverse-text);
	border-bottom-color: var(--wp--preset--color--brand-cobalt);
}

.yo-experts__nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--4); }

.yo-experts__count {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.55);
	margin-inline-end: auto;
}

.yo-experts__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--inverse-text);
	cursor: pointer;
	transition: border-color 200ms ease;
}

.yo-experts__btn:hover { border-color: var(--wp--preset--color--brand-cobalt); }

@media (min-width: 900px) {
	.yo-expert {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
		gap: clamp(40px, 5vw, 88px);
		align-items: center;
	}

	.yo-experts__rail {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
}

/* --- Kompakt süreç rayı --- */

.yo-process {
	background-color: var(--wp--preset--color--surface);
	padding-block: clamp(56px, 6vw, 96px);
}

.yo-process__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--6);
}

.yo-process__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-process__rail {
	list-style: none;
	margin-top: clamp(32px, 3.6vw, 56px);
	display: grid;
	gap: var(--wp--preset--spacing--6);
}

.yo-process__step { position: relative; }

.yo-process__num {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-process__name {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 1.3rem;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-process__desc {
	display: block;
	margin-top: 6px;
	max-width: 28ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-process__arrow { display: none; }

@media (min-width: 900px) {
	.yo-process__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--7); }

	.yo-process__arrow {
		display: block;
		position: absolute;
		inset-block-start: -2px;
		inset-inline-end: calc(var(--wp--preset--spacing--7) * -0.5);
		transform: translateX(-50%);
		color: var(--wp--preset--color--border);
	}
}

/* --- Ortak CTA dili --- */

.yo-linkline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.yo-arrow { display: inline-block; transition: transform 200ms ease; }
a:hover > .yo-arrow,
.yo-linkline:hover .yo-arrow,
.yo-scene__secondary:hover .yo-arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.yo-arrow { transition: none !important; }
	.yo-scene__slide.is-active .yo-scene__copy { animation: none !important; }
	.yo-rail__progress { animation: none !important; }
}
/* --- Sahne üst perdesi ---
   Ölçüm: header CTA'sı slayt 1'de 2.10:1, slayt 3'te 2.50:1 kontrastla
   okunmuyordu; 5. menü maddesi slayt 3'te 3.95:1 ile sınırdaydı.
   Blur/glassmorphism YOK — yalnız zemin renginden türeyen çok hafif sıcak
   bir geçiş. Görseli bastırmaz, header'ın oturduğu bandı okunur kılar. */
.yo-scene__slide::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 200px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(250, 249, 246, 0.88) 0%,
		rgba(250, 249, 246, 0.62) 42%,
		rgba(250, 249, 246, 0) 100%
	);
}

/* Header CTA çerçevesi biraz daha belirgin: ince çerçeve açık zeminde
   kayboluyordu. */
.yo-header--overlay .yo-header__analysis { border-color: rgba(27, 32, 36, 0.42); }
/* Katman sırası düzeltmesi.
   `::before` sözde öğesi kutunun İLK çocuğu gibi boyanır; `.yo-scene__media`
   ondan sonra geldiği için üst perde videonun ALTINDA kalıyor ve hiçbir
   etkisi olmuyordu (ölçüm: header CTA 2.10 → 1.99, yani değişmedi).
   Perdeler medyanın üstüne, içerik de perdelerin üstüne alınır. */
.yo-scene__media { z-index: 0; }
.yo-scene__slide::before,
.yo-scene__slide::after { z-index: 1; }
.yo-scene__content { z-index: 2; }
.yo-rail { z-index: 3; }
/* Sol perde biraz güçlendirildi ve sahne gövde metni koyulaştırıldı.
   Ölçüm: slayt 1'in yeni kadrajında gövde metni 3.52:1'e düşmüştü
   (eşik 4.5). Muted ton sahne üzerinde yeterli değil. */
.yo-scene__scrim {
	background:
		linear-gradient(
			100deg,
			rgba(250, 249, 246, 0.96) 0%,
			rgba(250, 249, 246, 0.92) 30%,
			rgba(250, 249, 246, 0.52) 52%,
			rgba(250, 249, 246, 0) 72%
		);
}

.yo-scene__lead { color: #3C444C; }

@media (max-width: 899px) {
	.yo-scene__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(250, 249, 246, 0.55) 0%,
				rgba(250, 249, 246, 0.84) 38%,
				rgba(250, 249, 246, 0.96) 62%
			);
	}
}
/* ==========================================================================
   Bölüm 28 — TEŞHİS · İÇGÖRÜLER · RİTİM (v3.0)
   ========================================================================== */

/* --- TEŞHİS: premium editoryal yeniden tasarım (§19) --- */

.yo-problems {
	background-color: var(--wp--preset--color--surface);
	padding-block: clamp(88px, 10vw, 176px);
	border-top: 0;
}

.yo-problems .yo-section-head { max-width: 26ch; }

.yo-problems .yo-section-title {
	max-width: none;
	font-size: clamp(2.1rem, 4.2vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.016em;
}

.yo-problems__grid {
	list-style: none;
	margin-top: clamp(56px, 6vw, 104px);
	display: grid;
	gap: clamp(48px, 5vw, 88px) clamp(40px, 5vw, 96px);
}

/* Ayraç bağımlılığı azaltıldı: hiyerarşi boşluk ve tipografiyle kurulur. */
.yo-problem {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(20px, 2.2vw, 36px);
	border: 0;
	padding: 0;
}

.yo-problem__num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1;
	color: var(--wp--preset--color--border);
	grid-row: 1 / span 3;
	padding-top: 0.14em;
}

.yo-problem__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.45rem, 2.4vw, 2.05rem);
	font-weight: 400;
	line-height: 1.14;
	max-width: 20ch;
	margin: 0;
}

.yo-problem__link {
	color: var(--wp--preset--color--brand-graphite);
	text-decoration: none;
	transition: color 200ms ease;
}

.yo-problem:hover .yo-problem__link { color: var(--wp--preset--color--primary); }

.yo-problem__desc {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 38ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

.yo-problem__service {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--5);
}

.yo-problem__service-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-problem__arrow {
	color: var(--wp--preset--color--brand-cobalt);
	transition: transform 200ms ease;
}

.yo-problem:hover .yo-problem__arrow { transform: translateX(5px); }

@media (min-width: 900px) {
	.yo-problems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Asimetrik editoryal kompozisyon: sağ sütun dikeyde kaydırılır. */
	.yo-problem:nth-child(even) { margin-top: clamp(24px, 3vw, 56px); }
}

/* --- İÇGÖRÜLER: premium editoryal vitrin (§20–24) --- */

.yo-hp-insights {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	padding-block: clamp(88px, 10vw, 176px);
	border-top: 0;
}

.yo-hp-insights .yo-section-title,
.yo-hp-insights__title {
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	line-height: 1.06;
}

/* İki güçlü kart + kontrollü üçüncü peek (§21 Option B). */
@media (min-width: 900px) {
	.yo-slide { flex: 0 0 42%; height: 468px; }
}

/*
 * Pasif kartlar "devre dışı" gibi solmaz: fark opaklıkta değil,
 * yükseklik ve kenarlık tonunda kurulur (§21).
 */
.yo-slide__card {
	opacity: 1;
	border-color: var(--wp--preset--color--border);
	border-radius: 3px;
	transition: border-color 260ms ease, transform 260ms ease;
}

.yo-slide:not(.is-active) .yo-slide__card {
	opacity: 0.92;
	transform: scale(0.985);
}

.yo-slide.is-active .yo-slide__card {
	opacity: 1;
	transform: none;
	border-color: rgba(27, 32, 36, 0.18);
}

/* Editoryal sayfalama: jenerik carousel düğmesi değil. */
.yo-slider-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border-color: rgba(27, 32, 36, 0.2);
	background-color: transparent;
}

.yo-hp-insights__counter {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

/* --- HİZMETLER: yatay kullanım (§26) --- */

.yo-services {
	background-color: var(--wp--preset--color--surface);
	padding-block: clamp(88px, 10vw, 168px);
	border-top: 0;
}

@media (min-width: 1200px) {
	/* Bölüm genişliği ~%12 artırıldı: "kap erken bitti" hissi azalır. */
	.yo-services .yo-container { max-width: 1400px; }
}

/* Ayraç azaltma: yalnız satırlar arası ince ayrım kalır, çerçeve yok. */
.yo-services__list { border-top: 0; }

/* --- Bölüm yüzeyleri ve ritim (§38–40) --- */

.yo-hp-cases { background-color: var(--wp--preset--color--canvas, #F7F5F0); border-top: 0; }
.yo-hp-solutions { background-color: var(--wp--preset--color--surface-soft); border-top: 0; }
.yo-social { background-color: var(--wp--preset--color--surface); border-top: 0; }
.yo-faq { background-color: var(--wp--preset--color--canvas, #F7F5F0); border-top: 0; }

.yo-hp-cases,
.yo-hp-solutions,
.yo-social,
.yo-faq { padding-block: clamp(80px, 9vw, 152px); }

/* --- Boş medya yuvası (gerçek görsel beklenen alanlar, §3/§44) --- */

.yo-slot {
	display: grid;
	place-items: center;
	width: 100%;
	background-color: rgba(27, 32, 36, 0.035);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 2px;
}

.yo-slot--16x9 { aspect-ratio: 16 / 9; }
.yo-slot--4x5 { aspect-ratio: 4 / 5; }
.yo-slot--9x16 { aspect-ratio: 9 / 16; }

.yo-slot .yo-slot-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--text-muted);
	opacity: 0.7;
}
/* Teşhis başlığı sekiz satıra sıkışıyordu: bölüm başlığı ölçüsü 3.5rem'lik
   serif için fazla dar. Başlığa gerçek genişlik verilir. */
.yo-problems .yo-section-head { max-width: none; }
.yo-problems .yo-section-title { max-width: 17ch; }

@media (min-width: 900px) {
	.yo-problems .yo-section-title { max-width: 22ch; }
}
/* ==========================================================================
   Bölüm 29 — FINAL: TRUST RAIL · TEŞHİS GÖRSELİ · İÇGÖRÜLER ÖN SAYFASI
   ========================================================================== */

/* --- HERO PREMIUM POLISH (§10) ---
   Sol perde videoyu gereğinden fazla öldürüyordu. Opaklıklar ~%12
   düşürüldü; kontrast eşiği aşağıdaki QA'da yeniden ölçülür. */
.yo-scene__scrim {
	background:
		linear-gradient(
			100deg,
			rgba(250, 249, 246, 0.90) 0%,
			rgba(250, 249, 246, 0.84) 30%,
			rgba(250, 249, 246, 0.44) 54%,
			rgba(250, 249, 246, 0) 74%
		);
}

/* Üç videoya ortak hafif renk düzenlemesi: beyaz denge, kontrast ve
   siyah seviyeleri hizalanır; üçü aynı kampanyanın parçası gibi okunur. */
.yo-scene__video {
	filter: saturate(0.94) contrast(1.04) brightness(1.01);
}

/* --- BİRLİKTE ÇALIŞTIKLARIMIZ (trust rail) --- */

.yo-trust {
	background-color: var(--wp--preset--color--surface);
	border-bottom: var(--yo-rule);
	overflow: hidden;
}

.yo-trust__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
	display: grid;
	gap: var(--wp--preset--spacing--5);
	align-items: center;
	min-height: 118px;
	padding-block: var(--wp--preset--spacing--5);
}

.yo-trust__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.yo-trust__viewport {
	position: relative;
	display: flex;
	overflow: hidden;
	/* Kenarlarda yumuşak kesim: logolar kaba biçimde kırpılmış görünmesin. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.yo-trust__track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: clamp(40px, 4.4vw, 88px);
	padding-inline-end: clamp(40px, 4.4vw, 88px);
	list-style: none;
	margin: 0;
	animation: yo-trust-marquee 34s linear infinite;
}

.yo-trust__viewport:hover .yo-trust__track,
.yo-trust__viewport:focus-within .yo-trust__track { animation-play-state: paused; }

@keyframes yo-trust-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

.yo-trust__item { flex: 0 0 auto; display: flex; align-items: center; }

/*
 * Logolar aynı genişliğe ZORLANMAZ; optik yükseklik normalize edilir.
 * `--yo-logo-scale` her marka için ayrı ayarlanır.
 * Monokrom yalnız sunum katmanında; dosya recolor EDİLMEZ.
 */
.yo-trust__logo {
	display: block;
	width: auto;
	height: calc(30px * var(--yo-logo-scale, 1));
	max-width: 180px;
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: 0.62;
	transition: filter 260ms ease, opacity 260ms ease;
}

.yo-trust__item:hover .yo-trust__logo {
	filter: none;
	opacity: 1;
}

@media (min-width: 900px) {
	.yo-trust__inner {
		grid-template-columns: minmax(0, 20%) minmax(0, 1fr);
		gap: clamp(28px, 3vw, 56px);
		min-height: 132px;
	}
	.yo-trust__logo { height: calc(34px * var(--yo-logo-scale, 1)); max-width: 210px; }
}

@media (max-width: 899px) {
	.yo-trust__inner { min-height: 104px; }
	.yo-trust__label br { display: none; }
	.yo-trust__track { gap: clamp(28px, 8vw, 48px); padding-inline-end: clamp(28px, 8vw, 48px); }
	.yo-trust__logo { height: calc(26px * var(--yo-logo-scale, 1)); max-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
	.yo-trust__track { animation: none !important; }
	/* Hareket yoksa kopya set gereksiz — yalnız görsel olarak gizlenir. */
	.yo-trust__track[aria-hidden="true"] { display: none; }
	.yo-trust__viewport { overflow-x: auto; }
}

/* --- TEŞHİS: üst kompozisyon + onaylı görsel --- */

.yo-diagnosis__top { display: grid; gap: clamp(40px, 5vw, 72px); }

.yo-diagnosis__head { align-self: center; }

.yo-diagnosis__media { margin: 0; }

.yo-diagnosis__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 2px;
}

@media (min-width: 900px) {
	.yo-diagnosis__top {
		grid-template-columns: minmax(0, 60%) minmax(0, 40%);
		align-items: center;
	}
	.yo-diagnosis__top--noimg { grid-template-columns: minmax(0, 1fr); }
	.yo-problems .yo-section-title { max-width: 18ch; }
}

/* --- İÇGÖRÜLER: editoryal ön sayfa --- */

.yo-insights {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	padding-block: clamp(88px, 10vw, 176px);
}

.yo-insights__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
}

.yo-insights__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.014em;
	max-width: none;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-insights__grid {
	margin-top: clamp(48px, 5vw, 88px);
	display: grid;
	gap: clamp(40px, 4vw, 64px);
}

/* Ortak meta satırı */
.yo-meta-line {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	color: var(--wp--preset--color--text-muted);
}

.yo-meta-line__cat { color: var(--wp--preset--color--brand-graphite); }
.yo-meta-line__sep { margin-inline: 6px; }

/* 01 — Featured */
.yo-lead__media { display: block; }

.yo-lead__media .yo-cover {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--surface);
	border: var(--yo-rule);
	border-radius: 2px;
}

.yo-lead__body { margin-top: var(--wp--preset--spacing--5); }

.yo-lead__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.6rem, 2.8vw, 2.5rem);
	font-weight: 400;
	line-height: 1.12;
	max-width: 22ch;
	text-wrap: balance;
}

.yo-lead__title a { color: var(--wp--preset--color--brand-graphite); text-decoration: none; }
.yo-lead__title a:hover { color: var(--wp--preset--color--primary); }

.yo-lead__deck {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 56ch;
	color: var(--wp--preset--color--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yo-lead__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--5);
}

.yo-lead__byline {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-inline-end: auto;
}

/* 02–03 — İkincil */
.yo-secondaries { display: grid; gap: clamp(32px, 3.4vw, 48px); }

.yo-second__media { display: block; }

.yo-second__media .yo-cover {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--surface);
	border: var(--yo-rule);
	border-radius: 2px;
}

.yo-second__body { margin-top: var(--wp--preset--spacing--4); }

.yo-second__title {
	margin-top: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	font-weight: 400;
	line-height: 1.2;
	max-width: 26ch;
}

.yo-second__title a { color: var(--wp--preset--color--brand-graphite); text-decoration: none; }
.yo-second__title a:hover { color: var(--wp--preset--color--primary); }

/* 04–06 — Editoryal indeks */
.yo-index {
	list-style: none;
	margin-top: clamp(48px, 5vw, 80px);
	border-top: var(--yo-rule);
}

.yo-index__item { border-bottom: var(--yo-rule); }

.yo-index__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: clamp(16px, 2vw, 32px);
	row-gap: 6px;
	padding-block: clamp(20px, 2.2vw, 30px);
	text-decoration: none;
	color: inherit;
}

.yo-index__num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	color: var(--wp--preset--color--border);
	grid-row: 1 / span 2;
}

.yo-index__cat {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--brand-cobalt);
	grid-column: 2;
}

.yo-index__title {
	grid-column: 2;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	line-height: 1.2;
	color: var(--wp--preset--color--brand-graphite);
	transition: color 200ms ease;
}

.yo-index__link:hover .yo-index__title { color: var(--wp--preset--color--primary); }

.yo-index__read {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

.yo-index__arrow { grid-column: 4; grid-row: 1 / span 2; color: var(--wp--preset--color--brand-cobalt); }
.yo-index__link { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.yo-insights__all { margin-top: clamp(32px, 3.4vw, 52px); }

@media (min-width: 900px) {
	.yo-insights__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	.yo-lead__media .yo-cover { aspect-ratio: 3 / 2; }
}
/* --- Uzman seçici: güçlü editoryal sekmeler (§42) --- */

.yo-experts__names {
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.yo-experts__name {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--4);
	row-gap: 2px;
	align-items: baseline;
	min-height: 64px;
	padding-block: var(--wp--preset--spacing--4);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: none;
	text-align: start;
	cursor: pointer;
	transition: border-color 220ms ease;
}

.yo-experts__name-num {
	grid-row: 1 / span 2;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.34);
	transition: color 220ms ease;
}

.yo-experts__name-text {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	transition: color 220ms ease;
}

.yo-experts__name-role {
	grid-column: 2;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.32);
	transition: color 220ms ease;
}

.yo-experts__name:hover .yo-experts__name-text { color: rgba(255, 255, 255, 0.86); }

.yo-experts__name.is-active { border-bottom-color: var(--wp--preset--color--brand-cobalt); }
.yo-experts__name.is-active .yo-experts__name-num { color: var(--wp--preset--color--brand-cobalt); }
.yo-experts__name.is-active .yo-experts__name-text { color: var(--wp--preset--color--inverse-text); }
.yo-experts__name.is-active .yo-experts__name-role { color: rgba(255, 255, 255, 0.62); }

@media (min-width: 900px) {
	.yo-experts__names { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); }
}

/* --- Koyu bölüm derinliği (§44): düz boşluk yerine kontrollü yüzey --- */

.yo-experts {
	background-color: #1B2024;
	background-image:
		radial-gradient(120% 90% at 12% 0%, rgba(49, 83, 100, 0.30) 0%, rgba(49, 83, 100, 0) 62%);
}

.yo-experts__inner { max-width: 1400px; padding-inline: clamp(24px, 3.4vw, 48px); }

@media (min-width: 900px) {
	/* Ekran kullanımı artırıldı: portre daha büyük, metin daha yoğun. */
	.yo-expert { grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr); gap: clamp(48px, 5.5vw, 96px); }
	.yo-experts__rail { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
/* Hero polish kuralı sıralamada mobil perdeden SONRA geldiği için onu
   eziyordu; mobilde yatay gradyan uygulanınca metin alanı açıkta kalıp
   kontrast 2.89–3.77:1'e düştü (ölçüldü). Mobil dikey perde geri veriliyor
   ve alt bölge biraz güçlendiriliyor. */
@media (max-width: 899px) {
	.yo-scene__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(250, 249, 246, 0.42) 0%,
				rgba(250, 249, 246, 0.80) 34%,
				rgba(250, 249, 246, 0.94) 58%,
				rgba(250, 249, 246, 0.97) 100%
			);
	}
}
/* ==========================================================================
   Bölüm 30 — CR-19 TİCARİ NETLİK
   ========================================================================== */

/* --- TRUST RAIL: büyütülmüş kanıt bölümü (§05–07) --- */

.yo-trust { border-bottom: 0; padding-block: clamp(40px, 4vw, 56px); }

.yo-trust__inner {
	display: block;
	min-height: 0;
	padding-block: 0;
}

.yo-trust__label {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.14;
	text-transform: none;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-trust__label br { display: none; }

.yo-trust__support {
	margin-top: var(--wp--preset--spacing--3);
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.yo-trust__viewport { margin-top: clamp(28px, 3vw, 44px); }

.yo-trust__track {
	gap: clamp(56px, 6vw, 96px);
	padding-inline-end: clamp(56px, 6vw, 96px);
}

.yo-trust__logo {
	height: calc(48px * var(--yo-logo-scale, 1));
	max-width: 260px;
	opacity: 0.78;
}

@media (min-width: 900px) {
	.yo-trust { padding-block: clamp(48px, 4.4vw, 64px); }
	.yo-trust__inner { grid-template-columns: none; }
	.yo-trust__logo { height: calc(54px * var(--yo-logo-scale, 1)); max-width: 300px; }
}

@media (max-width: 899px) {
	.yo-trust__logo { height: calc(40px * var(--yo-logo-scale, 1)); max-width: 190px; }
	.yo-trust__track { gap: clamp(36px, 9vw, 56px); padding-inline-end: clamp(36px, 9vw, 56px); }
}

/* --- İŞİNİZE NE KAZANDIRIYORUZ (§09–14) --- */

.yo-outcomes {
	background-color: var(--wp--preset--color--surface);
	padding-block: clamp(80px, 9vw, 152px);
}

.yo-outcomes__inner,
.yo-caps__inner,
.yo-works__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
}

.yo-outcomes__title,
.yo-works__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.014em;
	max-width: none;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-outcomes__grid {
	margin-top: clamp(48px, 5vw, 88px);
	display: grid;
	gap: clamp(40px, 4.4vw, 72px);
}

.yo-outcome__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-outcome__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	font-weight: 400;
	line-height: 1.12;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-outcome__result {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-outcome__support {
	margin-top: var(--wp--preset--spacing--3);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.yo-outcomes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(56px, 6vw, 112px); }
	/* Asimetri: sağ sütun dikeyde kayar, dört eşit kutu görüntüsü kırılır. */
	.yo-outcome:nth-child(even) { margin-top: clamp(20px, 2.6vw, 44px); }
}

/* --- SOMUT ÜRETİM KAPASİTESİ — Editorial Service Matrix (CR-28 rev.2) ---
   Statik fiyat tablosu hissinden çıkaran premium davranış katmanı.
   Kart yüzeyi yok, gradient yok, shadow yok, radius 0.
   Ayrım: tipografi, spacing, subtle border, micro hierarchy.
   Second Reading fikri hover'da UI davranışına dönüşür.
   -------------------------------------------------------------------- */

.yo-caps {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	/*
	 * Uzak plandan bakıldığında blok tek düz bir ton olarak okunuyordu.
	 * Çok düşük genlikli dikey derinlik: gradyan olarak fark edilmez,
	 * yokluğu ise düzlük olarak fark edilir.
	 */
	background-image: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 46%,
		rgba(255, 255, 255, 0) 100%
	);
	padding-block: clamp(80px, 9vw, 152px);
}

/* --- Section Header: editorial split --- */

.yo-caps__head--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--5);
	margin-bottom: clamp(48px, 5vw, 80px);
}

@media (min-width: 900px) {
	.yo-caps__head--split {
		grid-template-columns: 1.4fr 0.6fr;
		gap: var(--wp--preset--spacing--8);
		align-items: end;
	}
}

.yo-caps__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--brand-graphite);
	margin-top: var(--wp--preset--spacing--3);
}

.yo-caps__intro {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 54ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-caps__head-method {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.yo-caps__head-method {
		text-align: right;
		padding-bottom: 4px;
	}
}

/* ==========================================================================
   Bölüm 45 — CR-38 · KAPASİTE MATRİSİ (premium etkileşim katmanı)

   Kullanıcı kararı (30.08.2026): bu alan "en ileri, en güncel, modern ve
   premium" görüntüye kavuşacak, hover efekti olacak.

   CR-28'in özgün sınırları (gölge yok, kart havaya kalkmaz, motion
   150-300ms) 08 LOCKED §20/§25'ten türemişti. CR-34 DESIGN AUTHORITY RESET
   bu iki bölümü veto mekanizması olmaktan çıkardı; yeni kullanıcı kararı
   karar sırasının en üstünde. Sınırlar bu blok için bilinçli gevşetildi.

   YAPI DEĞİŞİKLİĞİ
     Yatay dolgu li'den a'ya taşındı. Eskiden dolgu li'de olduğu için hover
     yüzeyi hücrenin 32px içinde kalıyor, kenar çizgilerine değmiyor ve
     yarım kalmış görünüyordu. Artık bağlantı hücreyi kenardan kenara
     doldurur; beyaz yüzeyi grid çizgileri çerçeveler.

   İMZA HAREKETİ — hayalet rakam
     Hover'da kartın kendi numarası arka planda dev bir filigran olarak
     belirir (content: attr(data-num)). Startup klişesi değil, editoryal
     sayfa numarası dili; markanın serif ailesiyle yazılır.

   BU BLOKTA HÂLÂ YASAK
     neon yok, glassmorphism yok, gradyan buton yok, parallax yok.
     Kart yukarı zıplamaz — grid çizgileri kırılır; yükseklik hissi
     yalnız beyaz yüzey ve gölgeyle verilir.
   ========================================================================== */

/* --- Grid — 4x2 matris --- */

.yo-caps__grid {
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	border-top: var(--yo-rule);
}

.yo-cap {
	border-bottom: var(--yo-rule);
	position: relative;
}

/* --- Kart bağlantısı — hücreyi kenardan kenara doldurur --- */

.yo-cap__link {
	display: grid;
	grid-template-rows: auto auto 1fr auto auto;
	row-gap: var(--wp--preset--spacing--2);
	block-size: 100%;
	min-block-size: 44px;
	padding-block: clamp(32px, 3.2vw, 48px);
	padding-inline: var(--wp--preset--spacing--4);
	text-decoration: none;
	color: inherit;
	position: relative;
	isolation: isolate;
	/*
	 * Hayalet rakam hücreden taşıp alt satırın kartına giriyordu; ölçüldü,
	 * yatay kuralı kesiyordu. Kırpma burada. Kutu gölgesi elemanın KENDİ
	 * boyaması olduğu için bundan etkilenmez.
	 */
	overflow: hidden;
	background-color: transparent;
	transition:
		background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * ÜST KURAL — soldan sağa çizilir.
 * Sol kural yerine üst kural: grid'in yatay çizgileriyle aynı eksende
 * durduğu için hücre "etkinleşiyormuş" gibi okunuyor ve dikey ayraçla
 * çakışmıyor.
 */
.yo-cap__link::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	background-color: var(--wp--preset--color--brand-cobalt);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 2;
}

/* --- HAYALET RAKAM — imza hareketi --- */

.yo-cap__link::after {
	content: attr(data-num);
	position: absolute;
	inset-block-end: -0.18em;
	inset-inline-end: 0.06em;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(6rem, 8.5vw, 10rem);
	font-weight: 300;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: rgba(0, 127, 255, 0.055);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(0.12em, 0.12em, 0) scale(0.94);
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}

a.yo-cap__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: -3px;
}

/* --- Numara — editoryal indeks --- */

.yo-cap__num {
	font-family: var(--wp--preset--font-family--editorial);
	/*
	 * Uzak plandan kart bloğu "özellik tablosu" gibi okunuyordu; indeks
	 * en zayıf halkaydı. Büyütüldü ve tonu ısıtıldı: mavi-gri (#BAC3D3)
	 * sıcak zemin üzerinde tozlu duruyordu, grafit yarı saydamı zeminle
	 * aynı aileden.
	 */
	font-size: clamp(2.125rem, 3.2vw, 3rem);
	font-weight: 300;
	line-height: 1;
	color: rgba(48, 47, 47, 0.22);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	transition: color 260ms ease;
}

/* --- Başlık --- */

/* İndeks ile başlık arasında ayrı bir nefes — satır aralığından fazlası. */
.yo-cap__num + .yo-cap__title {
	margin-block-start: clamp(10px, 1vw, 16px);
}

.yo-cap__title {
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--brand-graphite);
	transition:
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
		color 260ms ease;
}

/* --- Spot metin --- */

.yo-cap__lead {
	font-size: clamp(0.875rem, 1vw, 0.9375rem);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-inline-size: 34ch;
}

/* --- İkinci okuma — hover'a kadar gizli --- */

.yo-cap__second {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-cobalt);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 260ms ease 60ms,
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
	margin-block-start: var(--wp--preset--spacing--2);
}

/* --- CTA --- */

.yo-cap__go {
	align-self: end;
	justify-self: start;
	margin-block-start: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-cobalt);
	position: relative;
}

/* CTA altına çizilen ince kural — hover'da soldan büyür. */
.yo-cap__go::after {
	content: "";
	position: absolute;
	inset-block-end: -4px;
	inset-inline: 0;
	block-size: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}

.yo-cap__go .yo-arrow {
	display: inline-block;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   HOVER — yalnız işaretçili cihazlar
   ========================================================================== */

@media (hover: hover) {

	/* İmleci izleyen ışık. JS --_glow-x / --_glow-y yazar. */
	.yo-cap__link {
		background-image: radial-gradient(
			240px circle at var(--_glow-x, 50%) var(--_glow-y, 50%),
			rgba(0, 127, 255, 0.055) 0%,
			rgba(0, 127, 255, 0) 100%
		);
		background-repeat: no-repeat;
	}

	/* Gölgeli kart komşu hücrenin çizgisinin üstünde kalmalı. */
	.yo-cap:hover {
		z-index: 3;
	}

	/*
	 * A. Yüzey beyaza döner ve altına geniş, düşük opaklıklı gölge alır.
	 * Kart YUKARI ZIPLAMAZ.
	 */
	.yo-cap__link:hover {
		background-color: #FFFFFF;
		box-shadow:
			0 1px 2px rgba(27, 32, 36, 0.04),
			0 18px 44px -28px rgba(27, 32, 36, 0.30);
	}

	/* B. Üst kural soldan çizilir */
	.yo-cap__link:hover::before { transform: scaleX(1); }

	/* C. Hayalet rakam belirir */
	.yo-cap__link:hover::after {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}

	/* D. İndeks kobalta döner */
	.yo-cap__link:hover .yo-cap__num { color: var(--wp--preset--color--brand-cobalt); }

	/* E. Başlık sağa kayar */
	.yo-cap__link:hover .yo-cap__title {
		transform: translateX(6px);
		color: var(--wp--preset--color--brand-cobalt);
	}

	/* F. İkinci okuma açılır */
	.yo-cap__link:hover .yo-cap__second {
		opacity: 1;
		transform: translateY(0);
	}

	/* G. CTA kuralı çizilir, ok yürür (yalnız bağlantılı kartlarda) */
	a.yo-cap__link:hover .yo-cap__go::after { transform: scaleX(1); }
	a.yo-cap__link:hover .yo-arrow { transform: translateX(4px); }

	/* H. Kardeş kartlar geri çekilir — JS grid'e .yo-caps--has-hover ekler */
	.yo-caps--has-hover .yo-cap {
		opacity: 0.62;
		transition: opacity 260ms ease;
	}

	.yo-caps--has-hover .yo-cap:hover { opacity: 1; }
}

/* ==========================================================================
   DOKUNMATİK — hover yok, bilgi de yok olmasın.
   `@media (hover: hover)` bloğu dokunmatikte hiç çalışmadığı için ikinci
   okuma satırı telefonda ASLA görünmüyordu. Orada baştan açık duruyor.
   ========================================================================== */

@media (hover: none) {
	.yo-cap__second {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   KLAVYE — hover'ın tamamı :focus-visible ile aynen tekrarlanır.
   Fareyle görülebilen hiçbir bilgi klavyeden gizli kalmaz.
   ========================================================================== */

a.yo-cap__link:focus-visible {
	background-color: #FFFFFF;
	box-shadow:
		0 1px 2px rgba(27, 32, 36, 0.04),
		0 18px 44px -28px rgba(27, 32, 36, 0.30);
}

a.yo-cap__link:focus-visible::before { transform: scaleX(1); }

a.yo-cap__link:focus-visible::after {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

a.yo-cap__link:focus-visible .yo-cap__num { color: var(--wp--preset--color--brand-cobalt); }

a.yo-cap__link:focus-visible .yo-cap__title {
	transform: translateX(6px);
	color: var(--wp--preset--color--brand-cobalt);
}

a.yo-cap__link:focus-visible .yo-cap__second {
	opacity: 1;
	transform: translateY(0);
}

a.yo-cap__link:focus-visible .yo-cap__go::after { transform: scaleX(1); }
a.yo-cap__link:focus-visible .yo-arrow { transform: translateX(4px); }

/* --- Scroll reveal stagger — JS .yo-cap--reveal ekler --- */

.yo-cap {
	opacity: 0;
	transform: translateY(12px);
}

.yo-cap--reveal {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 300ms ease, transform 300ms ease;
}

@media (hover: hover) {
	.yo-caps--has-hover .yo-cap.yo-cap--reveal { transform: translateY(0); }
}

/* --- "Yakında" durumu — bağlantısız kartlar --- */

.yo-cap--soon .yo-cap__title { color: var(--wp--preset--color--text); }
.yo-cap--soon .yo-cap__link { cursor: default; }

/* ==========================================================================
   REDUCED MOTION — hareket kapanır, BİLGİ KAPANMAZ.
   İkinci okuma ve hayalet rakam yerinde belirir; yalnız yol alma iptal.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.yo-cap {
		opacity: 1;
		transform: none;
	}

	.yo-cap--reveal,
	.yo-cap__link,
	.yo-cap__link::before,
	.yo-cap__link::after,
	.yo-cap__title,
	.yo-cap__num,
	.yo-cap__second,
	.yo-cap__go::after,
	.yo-cap__go .yo-arrow {
		transition: none;
	}

	.yo-cap__link::after { transform: none; }
	.yo-cap__second { transform: none; }

	@media (hover: hover) {
		.yo-cap__link:hover .yo-cap__title,
		a.yo-cap__link:hover .yo-arrow { transform: none; }

		.yo-caps--has-hover .yo-cap { transition: none; }
	}

	a.yo-cap__link:focus-visible .yo-cap__title,
	a.yo-cap__link:focus-visible .yo-arrow { transform: none; }
}

/* --- RESPONSIVE GRID --- */

@media (min-width: 600px) {
	.yo-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Sütunlar arası dikey kural */
	.yo-cap:nth-child(odd) { border-inline-end: var(--yo-rule); }

	/*
	 * Dolgu li'de değil a'da: hover yüzeyi hücreyi kenardan kenara
	 * doldursun, kenar çizgileri onu çerçevelesin.
	 */
	.yo-cap:nth-child(odd) .yo-cap__link {
		padding-inline: 0 clamp(20px, 2.4vw, 40px);
	}

	.yo-cap:nth-child(even) .yo-cap__link {
		padding-inline: clamp(20px, 2.4vw, 40px) 0;
	}
}

@media (min-width: 1024px) {
	.yo-caps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.yo-cap:nth-child(odd),
	.yo-cap:nth-child(even) { border-inline-end: var(--yo-rule); }

	.yo-cap:nth-child(odd) .yo-cap__link,
	.yo-cap:nth-child(even) .yo-cap__link {
		padding-inline: clamp(18px, 1.8vw, 32px);
	}

	.yo-cap:nth-child(4n) { border-inline-end: 0; }

	.yo-cap:nth-child(4n) .yo-cap__link { padding-inline-end: 0; }
	.yo-cap:nth-child(4n+1) .yo-cap__link { padding-inline-start: 0; }
}

/* --- SEÇİLMİŞ ÇALIŞMALAR (§27–29) --- */

.yo-works {
	background-color: var(--wp--preset--color--surface);
	padding-block: clamp(80px, 9vw, 152px);
}

.yo-works__intro {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 58ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-works__list {
	list-style: none;
	margin-top: clamp(40px, 4.4vw, 72px);
	border-top: var(--yo-rule);
}

/*
 * CR-26 Kademe 1 — kapsam vakasi.
 * Onceki hal "logo + yetkinlik etiketi" tek satiriydi ve dikeyde
 * ortalaniyordu. Artik her vaka bir govde tasiyor (durum + ustlendigimiz
 * is + bekleme notu), bu yuzden hizalama ust satira alindi.
 */
.yo-work {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(20px, 2.4vw, 40px);
	row-gap: var(--wp--preset--spacing--4);
	padding-block: clamp(32px, 3.4vw, 52px);
	border-bottom: var(--yo-rule);
	align-items: start;
}

.yo-work__num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	color: var(--wp--preset--color--border);
}

.yo-work__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

/* Sektor: kurumun ne is yaptigini bilmeyen ziyaretci icin. Marka adinin
   altinda tam genislikte kirilir, adla ayni satirda yarismaz. */
.yo-work__sector {
	flex-basis: 100%;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}

.yo-work__logo {
	display: block;
	width: auto;
	height: 34px;
	max-width: 140px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
}

.yo-work__name {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-work__body {
	display: grid;
	row-gap: var(--wp--preset--spacing--2);
}

/* Kucuk yapisal etiket — "Durum" / "Ustlendigimiz is". Bolum basligi
   degildir, bu yuzden heading seviyesi kullanilmaz. */
.yo-work__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.yo-work__label:not(:first-child) {
	margin-top: var(--wp--preset--spacing--4);
}

.yo-work__problem {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--wp--preset--color--text);
	max-width: 56ch;
}

/*
 * Sonuc beklemede notu. Bilincli olarak SESSIZ: bir eksigi duyurmak
 * icin degil, dururust olmak icin var. Rozet, uyari rengi veya ikon
 * kullanilmaz — 08 §8 kart/rozet dilini yasakliyor.
 */
.yo-work__pending {
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--3);
	border-top: var(--yo-rule);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 52ch;
}

.yo-work__caps {
	list-style: none;
	display: grid;
	row-gap: 4px;
	margin: 0;
	max-width: 52ch;
}

/*
 * Yetkinlik etiketi degil, TESLIM SATIRI. Onceki hal noktayla ayrilmis
 * yatay etiket dizisiydi ("Web · SEO · Icerik"); okunmasi kolaydi ama ne
 * teslim edildigini anlatmiyordu. Dikey liste her satiri tek tek okutur.
 */
.yo-work__caps li {
	position: relative;
	padding-inline-start: 16px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.yo-work__caps li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	width: 8px;
	height: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
}

.yo-works__note {
	margin-top: clamp(28px, 3vw, 44px);
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	/* Marka kolonu sabit; govde kalan genisligi alir. Onceki 1fr/1fr
	   bolusumu govde uzadikca marka blogunu gereksiz genisletiyordu. */
	.yo-work { grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); }
}

/* İçgörüler aşağı taşındı; yüzey ritmi bozulmasın diye zemin değişir. */
.yo-insights { background-color: var(--wp--preset--color--surface-soft); }
/* ==========================================================================
   Bölüm 31 — v5.1 FINAL
   CR-19.1 statik trust grid · CR-20 Başarı Hikayeleri
   ========================================================================== */

/* --- CR-19.1: MARQUEE KALDIRILDI, STATİK EDİTORYAL IZGARA ---
   Önceki marquee kuralları burada geçersiz kılınır. */

.yo-trust__viewport,
.yo-trust__track,
.yo-trust__item { all: unset; }

.yo-trust { padding-block: clamp(48px, 5vw, 68px); }

.yo-trust__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
}

/* Başlık → destek: 12–16px */
.yo-trust__support { margin-top: 14px; }

/* Destek → ızgara: 52–64px */
.yo-trust__grid {
	list-style: none;
	margin: clamp(52px, 4.4vw, 64px) 0 0;
	padding: 0;
	display: grid;
	/* Son satır eksik kalırsa görsel olarak ortalanır — yetim logo
	   sola yapışık durmaz. */
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: clamp(20px, 2.4vw, 36px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Görünmez hizalama hücresi. Logolar aynı GENİŞLİĞE zorlanmaz; optik
 * denge sabit hücre yüksekliği + marka bazlı ölçek çarpanıyla kurulur.
 */
.yo-trust__cell {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100px;
}

.yo-trust__logo {
	display: block;
	width: auto;
	max-width: 150px;
	max-height: calc(41px * var(--yo-logo-scale, 1));
	object-fit: contain;
	/*
	 * Kanıt dekorasyona dönüşmesin: gri tonlama var ama opaklıkla
	 * silikleştirilmiyor. Beyaz/Canvas zeminde okunur kalır.
	 */
	filter: grayscale(1) contrast(1.08) brightness(0.86);
	opacity: 1;
	transition: filter 220ms ease;
}

.yo-trust__cell:hover .yo-trust__logo,
.yo-trust__cell:focus-within .yo-trust__logo { filter: none; }

/* Kart, çerçeve, gölge, logo paneli veya beyaz kutu YOK. */

@media (min-width: 768px) {
	.yo-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.yo-trust__cell { height: 108px; }
	.yo-trust__logo { max-width: 165px; max-height: calc(45px * var(--yo-logo-scale, 1)); }
}

@media (min-width: 1024px) {
	.yo-trust__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.yo-trust__cell { height: 112px; }
	.yo-trust__logo { max-width: 180px; max-height: calc(47px * var(--yo-logo-scale, 1)); }
}

@media (min-width: 1280px) {
	/* Altı gerçek logo tek satıra sığar; hiçbiri kırpılmaz veya gizlenmez. */
	.yo-trust__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.yo-trust__cell { height: 116px; }
	.yo-trust__logo { max-width: 190px; max-height: calc(49px * var(--yo-logo-scale, 1)); }
}

@media (max-width: 767px) {
	.yo-trust__cell { height: 96px; }
	.yo-trust__logo { max-width: 132px; max-height: calc(38px * var(--yo-logo-scale, 1)); }
}

/* --- CR-20: BAŞARI HİKAYELERİ --- */

.yo-stories {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	padding-block: clamp(80px, 9vw, 152px);
}

.yo-stories__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
}

.yo-stories__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.014em;
	max-width: none;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-stories__intro {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 58ch;
	color: var(--wp--preset--color--text-muted);
}

.yo-stories__grid {
	margin-top: clamp(48px, 5vw, 80px);
	display: grid;
	gap: clamp(40px, 4vw, 64px);
}

.yo-story__media { display: block; }

.yo-story__media .yo-cover {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--surface);
	border: var(--yo-rule);
	border-radius: 2px;
}

.yo-story--lead .yo-story__media .yo-cover { aspect-ratio: 3 / 2; }

.yo-story__body { margin-top: var(--wp--preset--spacing--4); }

/* Format göstergesi: editoryal ve sessiz — renkli pill değil. */
.yo-story__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.yo-story__format {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand-graphite);
}

.yo-story__format-detail { font-weight: 500; color: var(--wp--preset--color--text-muted); }

/* Dış marka örneği, bizim işimiz gibi okunmasın diye açıkça ayrışır. */
.yo-story__proof {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted);
	padding-inline-start: 14px;
	border-inline-start: 1px solid var(--wp--preset--color--border);
}

.yo-story__title {
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	font-weight: 400;
	line-height: 1.12;
	max-width: 24ch;
	text-wrap: balance;
}

.yo-story__title--sm { font-size: clamp(1.1rem, 1.5vw, 1.35rem); max-width: 28ch; }

.yo-story__title a { color: var(--wp--preset--color--brand-graphite); text-decoration: none; }
.yo-story__title a:hover { color: var(--wp--preset--color--primary); }

.yo-story__deck {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 54ch;
	color: var(--wp--preset--color--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yo-story__cta { margin-top: var(--wp--preset--spacing--5); }

.yo-stories__rest { display: grid; gap: clamp(28px, 3vw, 44px); }

@media (min-width: 900px) {
	.yo-stories__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
/* Logo genişliği hücreyi AŞMAMALI. Sabit px üst sınır 6 kolonlu ızgarada
   hücre genişliğinden büyük kalıyordu (ölçüm: GOVISEC 190px, hücre ~165px)
   ve logo taşıyordu. Üst sınır hücreye göre kısıtlanır. */
.yo-trust__logo { max-width: min(150px, 100%); }

@media (min-width: 768px) { .yo-trust__logo { max-width: min(165px, 100%); } }
@media (min-width: 1024px) { .yo-trust__logo { max-width: min(180px, 100%); } }
@media (min-width: 1280px) { .yo-trust__logo { max-width: min(190px, 100%); } }
@media (max-width: 767px)  { .yo-trust__logo { max-width: min(132px, 100%); } }
/* Saydam zemini olmayan logo dosyaları (govisec.jpg, tosla-isim.png) logonun
   arkasında beyaz/gri kutu bırakıyordu — §10 bunu yasaklıyor. Dosya
   düzenlenmez; zemin yalnız sunumda yüzeye karıştırılır. Kalıcı çözüm
   saydam PNG/SVG teslimidir (bkz. Visual Asset Requests). */
.yo-trust__cell--opaque .yo-trust__logo { mix-blend-mode: multiply; }
/* Düzeltme: `mix-blend-mode: multiply` tek başına yetmedi.
   `filter` önce uygulanıyor ve `brightness(0.86)` logonun BEYAZ zeminini
   griye çeviriyordu; gri × beyaz = gri, yani kutu görünür kalıyordu.
   Saydam olmayan dosyalarda parlaklık düşürmesi kaldırılır: zemin beyaz
   kalır ve multiply ile yüzeye karışır. */
.yo-trust__cell--opaque .yo-trust__logo {
	filter: grayscale(1) contrast(1.06);
	mix-blend-mode: multiply;
}

.yo-trust__cell--opaque:hover .yo-trust__logo,
.yo-trust__cell--opaque:focus-within .yo-trust__logo { filter: none; }
/* ==========================================================================
   Bölüm 32 — v5.2 DELTA
   Hero ticari copy · bölüm navigasyonu · header CR-19.2
   ========================================================================== */

/* --- HERO: ticari başlık baskın, tez ikincil --- */

.yo-scene__title {
	max-width: none;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.016em;
	color: var(--wp--preset--color--brand-graphite);
	text-wrap: balance;
}

.yo-scene__lead {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #3C444C;
}

/*
 * Editoryal tez: ticari başlıkla YARIŞMAZ. Serif, küçük, italik ve
 * Strategic Ink tonunda; CTA'ların altında ince bir kuralla ayrılır.
 */
.yo-scene__thesis {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid rgba(27, 32, 36, 0.14);
	max-width: 38ch;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.4;
	color: #315364;
}

.yo-scene__actions { margin-top: var(--wp--preset--spacing--6); }

@media (min-width: 900px) {
	.yo-scene__copy { max-width: min(48%, 720px); }
	.yo-scene__title { font-size: clamp(2.2rem, 3.1vw, 2.9rem); }
}

/* --- BÖLÜM NAVİGASYONU: pasif kontrast +%25–30 --- */

.yo-rail__line { background-color: rgba(27, 32, 36, 0.22); }

.yo-rail__num { color: #6E767D; }
.yo-rail__label { color: #5D666D; }

.yo-rail__seg {
	/* Tüm bölüm alanı tıklanabilir — yalnız metin değil. */
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2) var(--wp--preset--spacing--3) 0;
	transition: opacity 200ms ease;
}

.yo-rail__seg:hover .yo-rail__line { background-color: rgba(27, 32, 36, 0.34); }
.yo-rail__seg:hover .yo-rail__label { color: var(--wp--preset--color--brand-graphite); }

.yo-rail__seg:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cobalt);
	outline-offset: 4px;
}

/* Aktif bölüm: kobalt numara, koyu grafit başlık, 3px kobalt kural. */
.yo-rail__seg.is-active .yo-rail__line { height: 3px; background-color: rgba(27, 32, 36, 0.18); }
.yo-rail__seg.is-active .yo-rail__num { color: var(--wp--preset--color--brand-cobalt); font-weight: 700; }
.yo-rail__seg.is-active .yo-rail__label { color: var(--wp--preset--color--brand-graphite); font-weight: 600; }

.yo-rail__progress { background-color: var(--wp--preset--color--brand-cobalt); }

/* --- Oklar ve folyo --- */

.yo-rail__btn {
	width: 50px;
	height: 50px;
	border-color: rgba(27, 32, 36, 0.34);
	font-size: 1rem;
}

.yo-rail__btn:hover {
	border-color: var(--wp--preset--color--brand-cobalt);
	color: var(--wp--preset--color--primary);
	background: none;
}

.yo-rail__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cobalt);
	outline-offset: 3px;
}

.yo-rail__count { color: #6E767D; }

/* --- HEADER CR-19.2: hero görsel önceliği geri kazanır --- */

.yo-header--overlay .yo-header__inner {
	min-height: 94px;
	gap: clamp(20px, 2.2vw, 34px);
}

/* Logo ~%17 küçüldü: optik yükseklik 48–54px bandına iner. */
.yo-header--overlay .yo-logo img,
.yo-header--overlay .yo-logo-slot .custom-logo { width: 168px; }

@media (min-width: 1240px) {
	.yo-header--overlay .yo-logo img,
	.yo-header--overlay .yo-logo-slot .custom-logo { width: 178px; }

	.yo-header--overlay .yo-menu { gap: clamp(32px, 2.6vw, 40px); }
	.yo-header--overlay .yo-menu__link { font-size: 1rem; font-weight: 500; }
}

/* CTA: pano gibi değil, net ama ölçülü. */
.yo-header--overlay .yo-header__analysis {
	min-height: 52px;
	padding-inline: 33px;
	font-size: 0.9375rem;
	font-weight: 600;
	border-width: 1px;
}

/* CTA ile hamburger tek grup gibi okunsun. */
.yo-header--overlay .yo-header__nav { margin-inline-end: 32px; }

@media (min-width: 1024px) {
	.yo-menu-orb {
		width: 46px !important;
		height: 46px !important;
	}
	.yo-menu-orb__bars,
	.yo-menu-orb__bars::before,
	.yo-menu-orb__bars::after { width: 27px; }
	.yo-menu-orb__bars::before { top: -8px; }
	.yo-menu-orb__bars::after  { top: 8px; }
}

.yo-menu-orb:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cobalt);
	outline-offset: 3px;
}

/*
 * GRID HİZASI — header ve hero AYNI yatay güvenli alanı paylaşır.
 * İkisi de 1600px kap + clamp(24px, 3.4vw, 48px) dolgu kullanır; ayrı
 * ızgaralar yaklaşık hizalanmaz, aynı eksende durur.
 */
.yo-header--overlay .yo-header__inner,
.yo-scene__content {
	max-width: 1600px;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.yo-scene__content {
		padding-inline: clamp(24px, 3.4vw, 48px);
	}
}

/* --- Sticky durum --- */

.yo-header--overlay {
	position: fixed;
	transition: background-color 180ms ease, border-color 180ms ease, min-height 180ms ease;
}

.yo-header--overlay.is-stuck {
	background-color: #FBFAF7;
	border-bottom: 1px solid rgba(27, 32, 36, 0.10);
}

.yo-header--overlay.is-stuck .yo-header__inner { min-height: 84px; }

.yo-header--overlay.is-stuck .yo-logo img,
.yo-header--overlay.is-stuck .yo-logo-slot .custom-logo { width: 156px; }

/* Blur / glassmorphism / ağır gölge YOK. */

@media (prefers-reduced-motion: reduce) {
	.yo-header--overlay { transition: none !important; }
}

/* --- TRUST §17: optik yükseklik 42–56px bandına çekildi --- */

.yo-trust { padding-block: clamp(44px, 4.2vw, 60px); }

.yo-trust__grid { margin-top: clamp(48px, 4vw, 60px); }

.yo-trust__cell { height: 84px; }

.yo-trust__logo { max-height: calc(38px * var(--yo-logo-scale, 1)); }

@media (min-width: 768px) {
	.yo-trust__cell { height: 92px; }
	.yo-trust__logo { max-height: calc(41px * var(--yo-logo-scale, 1)); }
}

@media (min-width: 1024px) {
	.yo-trust__cell { height: 96px; }
	.yo-trust__logo { max-height: calc(43px * var(--yo-logo-scale, 1)); }
}

@media (min-width: 1280px) {
	.yo-trust__cell { height: 100px; }
	.yo-trust__logo { max-height: calc(45px * var(--yo-logo-scale, 1)); }
}

@media (max-width: 767px) {
	.yo-trust__cell { height: 80px; }
	.yo-trust__logo { max-height: calc(34px * var(--yo-logo-scale, 1)); }
}
/* Ölçüm düzeltmeleri (v5.2 QA).
   1) Slayt 3 mobilde 5 satıra çıkıyordu — §4 en fazla 3–4 diyor. Mobil
      taban ölçek düşürüldü; tipografi agresif biçimde küçültülmedi.
   2) Elif Sultan (60px), YAYDER (59px) ve Suadiye (56px) optik yükseklik
      42–56px bandını aşıyordu — çarpanlar düşürüldü.
   3) Dokuz logo iki satıra çıktığı için bölüm 502px'e uzamıştı; hücre
      yüksekliği ve üst boşluk gerçek kompozisyona göre kısıldı. */

@media (max-width: 767px) {
	.yo-scene__title { font-size: 1.72rem; line-height: 1.12; }
	.yo-scene__lead { font-size: 1rem; }
}

.yo-trust__grid { margin-top: clamp(44px, 3.4vw, 52px); }
.yo-trust__cell { height: 76px; }
@media (min-width: 768px)  { .yo-trust__cell { height: 82px; } }
@media (min-width: 1024px) { .yo-trust__cell { height: 86px; } }
@media (min-width: 1280px) { .yo-trust__cell { height: 90px; } }
@media (max-width: 767px)  { .yo-trust__cell { height: 72px; } }
/* Son satır ortalama düzeltmesi (§8).
   `grid-template-columns: repeat(n, 1fr)` sabit iz ürettiği için dokuz
   logonun ikinci satırındaki üç öğe 1–3. sütunlara yapışıyor ve sola
   hizalı kalıyordu (ölçüldü). Flex sarma, eksik son satırı kendiliğinden
   ortalar; kolon sayısı yüzdelik taban genişliğiyle korunur. */
.yo-trust__grid {
	--yo-trust-gap: clamp(20px, 2.4vw, 36px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--yo-trust-gap);
	grid-template-columns: none;
}

.yo-trust__cell {
	flex: 0 0 auto;
	/* Mobil: 2 sütun */
	width: calc((100% - 1 * var(--yo-trust-gap)) / 2);
}

@media (min-width: 768px) {
	.yo-trust__cell { width: calc((100% - 3 * var(--yo-trust-gap)) / 4); }
}

@media (min-width: 1024px) {
	.yo-trust__cell { width: calc((100% - 4 * var(--yo-trust-gap)) / 5); }
}

@media (min-width: 1280px) {
	.yo-trust__cell { width: calc((100% - 5 * var(--yo-trust-gap)) / 6); }
}
/* Çakışma düzeltmesi (§4).
   Ölçüm: 390 ve 768'de bölüm navigasyonu 148px yükseklikte ama sahne
   içeriğinin alt dolgusu 132px'ti — editoryal tez satırı rayın üstüne
   16px biniyordu. Dolgu rayın gerçek yüksekliğine göre ayarlandı. */
@media (max-width: 1023px) {
	.yo-scene__content { padding-bottom: 184px; }
}
/* ==========================================================================
   Bölüm 33 — CR-19.3 · HERO EDİTORYAL NAVİGASYON RAYI
   Yalnız hero alt navigasyonunun görsel işlemini değiştirir. Copy, video,
   slayt sayısı, bölüm adları, autoplay süresi ve header'a DOKUNULMAZ.
   ========================================================================== */

/*
 * §2 — TEK SÜREKLİ EDİTORYAL YÜZEY
 * Sorun: kontroller sinematik arka plana gömülüyordu. Çözüm yalnız metin
 * kontrastı değil; rayın kendisi bir yüzey kazanır. Blur/glassmorphism yok,
 * ağır gölge yok — sıcak kırık beyaz bir kâğıt şeridi.
 * Alttaki Trust bölümü saf beyaz (#FFFFFF) olduğu için sıcak ton (#FBFAF6)
 * ve üst saç çizgisi ikisini birbirinden ayırır; hero'nun alt kenarı kaybolmaz.
 */
.yo-rail {
	background-color: rgba(251, 250, 246, 0.94);
	border-top: 1px solid rgba(27, 32, 36, 0.10);
}

.yo-rail__inner {
	padding-block: 0;
	align-items: center;
}

/*
 * §3 — ÜÇ EŞİT GENİŞLİKTE BÖLÜM SÜTUNU
 * Kart, tab arka planı, pill veya ayrı panel YOK. Sütunlar arasında boşluk
 * bırakılmaz: üç kural yan yana gelip kesintisiz tek bir çizgi kurar, böylece
 * "üç bölümlü hero" ilk bakışta okunur. Ayrışma boşlukla değil renkle olur.
 */
.yo-rail__track {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.yo-rail__seg {
	/* Sütunun TAMAMI tıklanabilir — yalnız metin kutusu değil. */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 13px;
	padding: 0;
	min-height: 44px;
}

/* Tüm kurallar aynı yükseklikte: çizgi basamaklanmaz, sürekli okunur. */
.yo-rail__line,
.yo-rail__seg.is-active .yo-rail__line { height: 3px; }

/* Etiket nefes payı kuralın sürekliliğini bozmadan içeriden verilir. */
.yo-rail__meta { padding-inline-end: clamp(16px, 2vw, 32px); }

/*
 * §5 — PASİF BÖLÜMLER: algılanan kontrast ~%35 artar
 * #5D666D → #4A525A: sıcak kırık beyaz üzerinde 5.53:1 → 7.43:1 (+%34).
 * İkincil kalır ama artık soluk değildir.
 */
.yo-rail__line { background-color: rgba(27, 32, 36, 0.20); }
.yo-rail__num { color: #5A636B; }
.yo-rail__label { color: #4A525A; font-weight: 500; }

.yo-rail__seg:hover .yo-rail__line { background-color: rgba(27, 32, 36, 0.34); }
.yo-rail__seg:hover .yo-rail__num,
.yo-rail__seg:hover .yo-rail__label { color: var(--wp--preset--color--brand-graphite); }

/*
 * §4 — AKTİF BÖLÜM
 * Kural her durumda kobalttır. Autoplay çalışırken solgun kobalt bir yatak
 * üzerinde dolu kobalt sol → sağ dolar; kullanıcı elle gezindiğinde autoplay
 * durur ve yatak solgun kobalt olarak kalır — aktif bölüm gri pasiflerden
 * hâlâ ayrışır. (Dolgu boşaldığında kural gri görünseydi §4 bozulurdu.)
 */
.yo-rail__seg.is-active .yo-rail__line { background-color: rgba(0, 127, 255, 0.26); }
.yo-rail__seg.is-active .yo-rail__num { color: var(--wp--preset--color--brand-cobalt); font-weight: 700; }
.yo-rail__seg.is-active .yo-rail__label {
	color: var(--wp--preset--color--brand-graphite);
	font-weight: 600;
}

.yo-rail__progress { background-color: var(--wp--preset--color--brand-cobalt); }

.yo-rail__seg:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cobalt);
	outline-offset: -3px;
}

/*
 * §7 — FOLYO + OK KONTROL GRUBU
 * Tek kompakt grup: 01 / 03   ←   →
 * Oklar arası ~9px, folyo ile oklar arası ~20px (nav gap 9 + folyo sağ payı 11).
 */
.yo-rail__nav {
	align-self: center;
	align-items: center;
	gap: 9px;
}

.yo-rail__count {
	margin-inline-end: 11px;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #4A525A;
}

.yo-rail__count-current { color: var(--wp--preset--color--brand-graphite); font-weight: 600; }
.yo-rail__count-sep { margin-inline: 5px; color: #7E858B; }

.yo-rail__btn {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	/* Varsayılan yüzey: sessiz sıcak beyaz — dolu kobalt buton DEĞİL. */
	background-color: rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(27, 32, 36, 0.28);
	color: var(--wp--preset--color--brand-graphite);
	font-size: 1.25rem;
	line-height: 1;
	transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.yo-rail__btn:hover,
.yo-rail__btn:focus-visible {
	border-color: var(--wp--preset--color--brand-cobalt);
	background-color: rgba(0, 127, 255, 0.07);
	color: var(--wp--preset--color--primary);
}

/* --- §2 · §8 — MASAÜSTÜ: 82–92px yükseklik, header/hero ile aynı ızgara --- */

@media (min-width: 900px) {
	.yo-rail__inner {
		/* §8: header ve hero metniyle AYNI kap + güvenli alan. Üçüncü bir
		   ızgara kurulmaz. */
		max-width: 1600px;
		padding-inline: clamp(24px, 3.4vw, 48px);
		min-height: 86px;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: clamp(28px, 3vw, 56px);
	}

	.yo-rail__num { font-size: 0.75rem; }
	.yo-rail__label { font-size: 0.6875rem; letter-spacing: 0.11em; }
}

/*
 * §6 — TEZ AYRIMI
 * Editoryal tez rayla birleşmez. Sahne içeriğinin alt dolgusu rayın gerçek
 * yüksekliğini + net bir ayrım payını kapsar.
 */
@media (min-width: 900px) {
	.yo-scene__content { padding-bottom: 118px; }
}

/* --- §9 — TABLET / MOBİL --- */

@media (max-width: 899px) {
	.yo-rail__inner {
		padding-block: 12px;
		gap: 12px;
	}

	/* Dokunma hedefi ≥44px (WCAG 2.2 SC 2.5.8). */
	.yo-rail__seg { min-height: 46px; gap: 10px; }

	.yo-rail__num { font-size: 0.6875rem; }
	.yo-rail__label--short {
		display: inline;
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}

	.yo-rail__meta { padding-inline-end: 10px; }

	/* Dar ekranda folyo solda, oklar sağda: yatay alan israf edilmez. */
	.yo-rail__nav { justify-content: space-between; }
	.yo-rail__count { margin-inline-end: auto; font-size: 0.875rem; }

	.yo-rail__btn { width: 48px; height: 48px; font-size: 1.125rem; }
}

@media (max-width: 480px) {
	.yo-rail__meta { padding-inline-end: 8px; }
	.yo-rail__label--short { font-size: 0.625rem; letter-spacing: 0.06em; }
	.yo-rail__count { font-size: 0.8125rem; }
}
/* --- CR-19.3 ölçüm düzeltmeleri --------------------------------------
   1) §8 IZGARA: Ray <900px'te eski `spacing--5` (24px) dolgusunu kullanıyor,
      hero metni ise 32px'ti — ölçüldü, ray metnin soluna kaçıyordu. Ray,
      altında durduğu hero metniyle aynı güvenli alana çekildi.
      NOT: Header mobilde 24–26px kullanıyor, yani header ile hero metni
      zaten birbirinden farklı. Header "değiştirilmeyecek" listesinde
      olduğu için hizalama hero metni referans alınarak yapıldı; yeni bir
      üçüncü ızgara KURULMADI, var olan ikisinden biri seçildi.
   2) §6 TEZ AYRIMI: Ray 148px'ten 131px'e indiği için eski 184px alt dolgu
      53px boşluk bırakıyordu — hedef bant 24–32px.
   3) §7 KOMPAKT GRUP: `space-between` folyo ile okları 768'de 556px,
      390'da 182px ayırıyordu; grup dağılıyordu. Sağa yaslı kompakt grup,
      masaüstündeki kavramla aynı.
   -------------------------------------------------------------------- */

@media (max-width: 899px) {
	.yo-rail__inner { padding-inline: 32px; }

	.yo-rail__nav { justify-content: flex-end; }
	.yo-rail__count { margin-inline-end: 11px; }
}

@media (max-width: 1023px) {
	.yo-scene__content { padding-bottom: 159px; }
}
/* --- CR-19.3 ölçüm düzeltmeleri · 2. tur -----------------------------
   Ölçüm (1440px, gerçek piksel örneklemesi, en koyu ray yüzeyi #F8F7F4):
   4) Ok kenarı 1.80:1 — WCAG 1.4.11 arayüz sınırı için 3:1 istiyor ve §7
      "kenar görünürlüğünü artır" diyor. Alfa 0.28 → 0.52.
   5) Pasif kural 1.50:1 — §5 "görünür nötr gri" diyor. Alfa 0.20 → 0.50.
   6) §3 SÜTUNUN TAMAMI: Segment 44px ölçüldü, ray ise 87px. `align-items:
      center` iz yüksekliğini içeriğe kilitliyordu; sütunun tamamı değil
      yalnız üst yarısı tıklanabilirdi. İz artık rayın tam yüksekliğine
      uzanıyor, içerik dikeyde ortada duruyor — konum değişmiyor.
   7) §4 AKTİF KURAL HER ZAMAN KOBALT: Kullanıcı elle gezindiğinde autoplay
      duruyor, dolgu scaleX(0)'a düşüyor ve aktif kural solgun kalıyordu.
      Dolgunun aktif segmentteki dinlenme durumu scaleX(1) yapıldı:
        · autoplay çalışıyor  → animasyon 0'dan 1'e sürüyor (sol → sağ)
        · autoplay durdu      → dolu kobalt kural kalır
        · pasif segmentler    → scaleX(0), etkilenmez
      JS'e dokunulmadı; sıfırlama yolları zaten doğruydu.
   -------------------------------------------------------------------- */

.yo-rail__btn { border-color: rgba(27, 32, 36, 0.52); }
.yo-rail__line { background-color: rgba(27, 32, 36, 0.50); }

.yo-rail__track { align-self: stretch; }
.yo-rail__seg { align-self: stretch; height: 100%; }

/* Kalan süre yatağı: geçmiş süre dolu kobalt olduğu için sessiz kalabilir. */
.yo-rail__seg.is-active .yo-rail__line { background-color: rgba(0, 127, 255, 0.22); }

/* Dinlenme durumu: aktif kural dolu kobalt. Animasyon `from { scaleX(0) }`
   ile başladığı için sol → sağ dolum korunur. */
.yo-rail__seg.is-active .yo-rail__progress { transform: scaleX(1); }

/* Odak halkası ray yüzeyinin dışına taşmasın. */
.yo-rail__seg:focus-visible { outline-offset: -3px; }
/* 8) §5 HOVER KOYULAŞMASI: Bölüm 32'deki hover değeri (0.34) yeni 0.50
      tabanından AÇIK kaldı — hover kuralı koyulaştırmak yerine
      açıyordu (ölçüldü). Ters yön düzeltildi. */
.yo-rail__seg:hover .yo-rail__line { background-color: rgba(27, 32, 36, 0.62); }
.yo-rail__seg.is-active:hover .yo-rail__line { background-color: rgba(0, 127, 255, 0.22); }
/* 9) §9 "küçük ekranda anlaşılır kalsın": 768'de sütun 235px ölçüldü ve
      tam bölüm adı buraya sığıyor (1024'te 243px sütunda sığdığı görüldü).
      Kısaltmayı yalnız gerçekten dar olan ekranlara bırakıyoruz; 700px ve
      üzerinde kilitli tam adlar okunur. Bölüm adları DEĞİŞTİRİLMEDİ. */
@media (min-width: 700px) and (max-width: 899px) {
	.yo-rail__label { display: inline; font-size: 0.6875rem; letter-spacing: 0.09em; }
	.yo-rail__label--short { display: none; }
}
/* 10) ETİKET SARMASI — iki dar bant, ölçülmüş açık farklarla:
       · 900px: "AI SEARCH & GÖRÜNÜRLÜK" 167px istiyor, sütunda 160px
         kalıyordu (sütun 205 − dolgu 18 − numara 17 − boşluk 10). Masaüstü
         tek sırada nav grubu da yer kapladığı için sütun 1024'tekinden
         DAR; bu yüzden yalnız bu bantta iç paylar kısıldı.
       · 320px: "AI SEARCH" 55px istiyor, 52px kalıyordu.
       İki durumda da tipografi küçültülmedi; kaybedilen yer dolgu, öğe
       arası boşluk ve harf aralığından karşılandı. Bölüm adları AYNI. */

@media (min-width: 900px) and (max-width: 1023px) {
	.yo-rail__meta { padding-inline-end: 6px; gap: 8px; }
	.yo-rail__label { letter-spacing: 0.09em; }
}

@media (max-width: 400px) {
	.yo-rail__meta { padding-inline-end: 4px; gap: 6px; }
	.yo-rail__label--short { letter-spacing: 0.04em; }
}
/* ==========================================================================
   Bölüm 34 — HERO PREMIUM OPTICAL PASS
   CR-19.3'ün yönü korunur; yeni konsept yok. Rafine + bütünleşme geçişi.
   Hero ticari copy, videolar, bölüm adları, autoplay süresi ve ana sayfa
   mimarisi DEĞİŞMEZ.
   ========================================================================== */

/* --- §1 RAY HERO'YA BİNDİRİLİR -----------------------------------------
   Ray artık hero'nun alt kenarında bitmiyor; 14px yukarı çekildi. Altında
   kalan ince hero şeridi rayın "bir sonraki bölüm" değil, hero
   kompozisyonunun parçası olduğunu okutur. Gölge/blur/glassmorphism yok —
   sıcak kırık beyaz yüzey + saç çizgisi yeterli.
   -------------------------------------------------------------------- */

@media (min-width: 900px) {
	.yo-rail { inset-block-end: 14px; }

	/* Ray 14px yukarı çıktı; içerik payı da 14px büyür ki tez rayla
	   arasındaki nefes aynı kalsın. */
	.yo-scene__content { padding-bottom: 132px; }
}

@media (max-width: 899px) {
	/* Mobilde de bindirme var ama rayın kendi yüksekliği aynı ölçüde
	   kısıldı: rayın ÜST kenarı yerinde kalır, yalnız alt kenarı yukarı
	   gelir. Böylece kısa telefonlarda katlanın altındaki pay artmaz. */
	.yo-rail { inset-block-end: 10px; }
	.yo-rail__inner { padding-block: 7px; }
}

/* --- §2 MASAÜSTÜ RAY IZGARASI: 1fr / 1fr / 1fr / sabit kontrol kolonu --- */

@media (min-width: 900px) {
	.yo-rail__inner {
		grid-template-columns: minmax(0, 1fr) 218px;
		gap: 0;
		min-height: 88px;
		/*
		 * §3 İÇ PAY vs §8 IZGARA HİZASI
		 * Kural kolon kenarlarından 10px içeri alınacak; ama 01'in numarası
		 * hero H1'i ve header ile AYNI eksende kalmalı. Kabın dolgusundan
		 * 10px düşülüp aynı 10px segmentin içine verilerek ikisi birden
		 * sağlanır: içerik yine tam clamp(24px, 3.4vw, 48px) hizasında.
		 */
		padding-inline: calc(clamp(24px, 3.4vw, 48px) - 10px);
	}

	.yo-rail__track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.yo-rail__seg { padding-inline: 10px; }

	/* §5 · §6 — kontrol grubu sağ kenara yaslı, kapla aynı eksende biter. */
	.yo-rail__nav {
		position: relative;
		justify-content: flex-end;
		padding-inline: 30px 10px;
		gap: 9px;
	}

	/*
	 * §6 — Bölüm alanı ile kontrol grubu arasında ÇOK İNCE dikey ayraç.
	 * Panel değil: 1px, 46px yükseklikte, dikeyde ortalı. Kontrol kolonu
	 * için ayrı bir zemin veya çerçeve YOK.
	 */
	.yo-rail__nav::before {
		content: '';
		position: absolute;
		inset-inline-start: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 46px;
		background-color: rgba(27, 32, 36, 0.14);
	}
}

/* --- §3 KURAL: pasif 1px nötr, aktif 3px kobalt, dolum kendi alanında --- */

.yo-rail__line {
	position: relative;
	height: 3px;              /* yerleşim kutusu sabit: kurallar aynı eksende */
	background-color: transparent;
	overflow: hidden;
}

/* Pasif yatak — ince nötr çizgi. */
.yo-rail__line::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 1px;
	background-color: rgba(27, 32, 36, 0.34);
}

.yo-rail__seg:hover .yo-rail__line::before { background-color: rgba(27, 32, 36, 0.52); }

/* Aktif yatak — kalan süre; geçmiş süre dolu kobalt olduğu için sessiz. */
.yo-rail__seg.is-active .yo-rail__line::before,
.yo-rail__seg.is-active:hover .yo-rail__line::before {
	height: 3px;
	background-color: rgba(0, 127, 255, 0.20);
}

/* Dolum yalnız kendi bölümünün kural alanında sol → sağ ilerler. */
.yo-rail__progress {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- §4 BÖLÜM TİPOGRAFİSİ: editoryal indeks ---------------------------- */

.yo-rail__meta { align-items: baseline; }

.yo-rail__num {
	font-size: 1rem;          /* 16px */
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #5A636B;
}

.yo-rail__label {
	font-size: 0.8125rem;     /* 13px */
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #4A525A;
}

.yo-rail__seg.is-active .yo-rail__num {
	color: var(--wp--preset--color--brand-cobalt);
	font-weight: 600;
}

.yo-rail__seg.is-active .yo-rail__label {
	color: var(--wp--preset--color--brand-graphite);
	font-weight: 600;
}

@media (min-width: 1200px) {
	.yo-rail__num { font-size: 1.0625rem; }     /* 17px */
	.yo-rail__label { font-size: 0.875rem; letter-spacing: 0.07em; }  /* 14px */
}

/*
 * ETİKET BÜTÇESİ (ölçüldü, tahmin değil)
 * "AI SEARCH & GÖRÜNÜRLÜK": 14px/0.07em → 205px · 13px/0.06em → 185px
 * Kolon içi kullanılabilir genişlik = kolon − 20 (segment payı) − numara − boşluk
 *   1024 → 204px kullanılabilir, 13px için 185px gerekir  ✓
 *    900 → 166px kullanılabilir, 13px için 185px gerekir  ✗
 * Bu yüzden 900–1023 bandında kilitli KISA varyant gösterilir. Bölüm adları
 * yeniden adlandırılmadı; yalnız hangi varyantın basıldığı değişti.
 */
@media (min-width: 900px) and (max-width: 1023px) {
	.yo-rail__label { display: none; }
	.yo-rail__label--short { display: inline; font-size: 0.8125rem; letter-spacing: 0.06em; }
	.yo-rail__meta { gap: 8px; padding-inline-end: 0; }
}

@media (min-width: 1024px) {
	.yo-rail__meta { gap: 10px; padding-inline-end: 0; }
}

/* --- §5 SAĞ KONTROL GRUBU: bölümlere baskın gelmez -------------------- */

.yo-rail__btn {
	width: 49px;
	height: 49px;
	border-width: 1px;
	font-size: 1.125rem;      /* ok ikonu ~18px */
}

.yo-rail__count {
	font-size: 0.875rem;      /* 14px */
	font-weight: 500;
	margin-inline-end: 12px;
}

/* --- §7 HERO İÇERİK BOŞLUKLARI: optik yeniden ayar -------------------- */

@media (min-width: 900px) {
	/* H1 → gövde: 24px fazla sıkışıktı. */
	.yo-scene__lead {
		margin-top: 30px;
		max-width: 28em;      /* ölçülen 477px satır uzunluğunu kilitler */
	}

	.yo-scene__actions { margin-top: 34px; }

	/* Editoryal tez biraz daha sessiz; ikincil olduğu netleşir. */
	.yo-scene__thesis {
		margin-top: 36px;
		padding-top: 18px;
		border-top-color: rgba(27, 32, 36, 0.10);
		font-size: 0.875rem;  /* 15px → 14px */
	}
}
/* --- Bölüm 34 ölçüm düzeltmeleri -------------------------------------
   1) §6 AYRAÇ BOŞLUĞU: Ayraç, nav kolonunun sol kenarında duruyordu ve iz
      boşluğu 0 olduğu için 3. bölümün kolon kenarına yapışıktı — kuralın
      sağ ucundan yalnız 10px uzaktaydı, hedef 28–32px. İzin sağına 20px
      pay verildi: kural ucu → ayraç artık 30px.
   2) §4 vs dar ekran: Etiket 13px'e çıkınca 320px'te 3. bölüm iki satıra
      düştü (kolon 85px, kullanılabilir 57px, "AI SEARCH" 13px'te 75px).
      Dar ekranlarda tipografi kademeli küçülür — bu layout'u zorlamak için
      değil, kolonun gerçekten yetmemesinden.
   3) §1 BİNDİRME: Mobilde 10px ölçüldü, hedef bant 12–16. 12px'e çıkarıldı;
      rayın iç dolgusu aynı ölçüde kısıldı, böylece rayın ÜST kenarı yerinde
      kalır ve kısa telefonlarda katlanın altındaki pay artmaz.
   -------------------------------------------------------------------- */

@media (min-width: 900px) {
	.yo-rail__track { padding-inline-end: 20px; }
}

@media (max-width: 899px) {
	.yo-rail { inset-block-end: 12px; }
	.yo-rail__inner { padding-block: 6px; }
}

/* Dar ekran tipografi kademeleri — kolon genişliği ölçülerek belirlendi. */
@media (max-width: 480px) {
	.yo-rail__num { font-size: 0.9375rem; }                        /* 15px */
	.yo-rail__label--short { font-size: 0.75rem; }                 /* 12px */
	.yo-rail__meta { gap: 6px; }
}

@media (max-width: 400px) {
	.yo-rail__num { font-size: 0.875rem; }                         /* 14px */
	.yo-rail__label--short { font-size: 0.6875rem; }               /* 11px */
}

@media (max-width: 340px) {
	.yo-rail__num { font-size: 0.8125rem; }                        /* 13px */
	.yo-rail__label--short { font-size: 0.625rem; letter-spacing: 0.03em; }
	.yo-rail__meta { gap: 5px; }
}
/* --- Bölüm 34 ölçüm düzeltmeleri · 2. tur ----------------------------
   4) §1 BİNDİRME OPTİK OLARAK GÖRÜNMÜYORDU. Ölçüm (1440, gerçek piksel):
        ray yüzeyi          rgb(249,248,245)
        ray altındaki şerit rgb(240,239,236) → rgb(244,243,240)
      Fark 5–9 RGB; yani bindirme vardı ama GÖZLE YOKTU. Sebep: hero'nun
      alt scrim'i (`.yo-scene__slide::after`, 210px, sonu %96) videoyu tam
      o şeritte rayın kendi rengine kadar yıkıyordu.
      Scrim, ray SURFACE'i olmadan önce metin kontrastı için yapılmıştı;
      artık rayın kendi yüzeyi var ve scrim'in en alt dilimi hiçbir metne
      hizmet etmiyor (1440'ta tez scrim'in üstünde bitiyor). Scrim rayın
      alt kenarında sonlandırıldı: gradyanın biçimi ve tez üzerindeki
      etkisi AYNI kalır, yalnız bindirme şeridi gerçek videoyu gösterir.
   5) §5 FOLYO İKİ SATIRA DÜŞMÜŞTÜ ("01 /" / "03"). Nav kolonu 218px,
      iç paylardan sonra folyoya 59px kalıyordu, gereken ~62px. Paylar
      belirtilen bantların İÇİNDE kalarak kısıldı (ok 49→48, ayraç payı
      30→28, folyo payı 12→10) ve satır kırılması kilitlendi.
   -------------------------------------------------------------------- */

.yo-scene__slide::after { inset-block-end: 14px; }

@media (max-width: 899px) {
	.yo-scene__slide::after { inset-block-end: 12px; }
}

.yo-rail__count {
	white-space: nowrap;
	letter-spacing: 0.05em;
}

@media (min-width: 900px) {
	.yo-rail__nav { padding-inline: 28px 10px; }
	.yo-rail__count { margin-inline-end: 10px; }
	.yo-rail__btn { width: 48px; height: 48px; }
}
/* 6) ÖNCEDEN VAR OLAN KUSUR — bu pasta ölçümle yakalandı.
      Hero eyebrow'u (`DİJİTAL SATIŞ & BÜYÜME` vb.) #5D666D idi ve videonun
      koyu yamaları üzerinde WCAG AA'yı karşılamıyordu:
        1440 → 2.46:1 · 1024 → 2.87:1 · 900 → 3.14:1 · 768 → 3.72:1 · 390 → 3.22:1
      (metin kutusunun hemen üstü/altından 436–940 arka plan pikseli
      örneklenip en koyusu alınarak; glif pikseline çarpmadan.)
      Bindirme/scrim değişikliğinin etkilediği bant hero'nun ALT 210px'i;
      eyebrow orada değil — yani bu bir regresyon değil, mevcut bir eksik.
      Yalnız hero eyebrow'u koyulaştırıldı; paylaşılan `.yo-eyebrow` sınıfına
      ve diğer bölümlere dokunulmadı. */
.yo-scene__eyebrow { color: #333A41; }
/* 7) 900–1023 BANDINDA METİN KOYU VİDEO BÖLGESİNE KAYMIŞTI — bu pasın
      getirdiği bir regresyon, açıkça bildiriyorum.
      Bölüm 33'te bu bant `max-width: 1023px` kuralından 159px alt dolgu
      alıyordu; Bölüm 34'ün `min-width: 900px` kuralı (132px) kaynak
      sırasında sonra geldiği için onu ezdi ve hero metni aşağı indi.
      Ölçüm (slayt 1): lead 1024→3.36:1, 900→3.39:1; tez 1024→4.15:1,
      900→3.76:1 — dördü de AA altında.
      Bant, eski 159px değerine + rayın 14px yükselmesine göre geri alındı. */

/* 7) DÜZELTME — ilk teşhisim yanlıştı, açıkça düzeltiyorum.
      900–1023'te alt dolguyu 173px'e geri aldığımda kontrast DÜZELMEDİ
      (lead 1024 yine 3.36:1) ve 900/slayt2 lead 4.04:1'e düşerek bir kusur
      daha çıktı. Yani metnin dikey konumu sebep değil; değişiklik geri
      alındı.

      GERÇEK NEDEN — soldan sağa scrim'in erişimi:
      `.yo-scene__scrim` = linear-gradient(100deg, .94 0%, .86 26%, .45 48%, 0 68%)
      1440'ta metin sütunu 48+476=524px, yani viewport'un %36'sında biter →
      scrim orada ~0.78 → geçer.
      1024'te 35+458=493px, yani %48'inde biter → scrim tam 0.45'e düşmüş →
      video metnin altından güçlü çıkıyor. Sütun daralmıyor ama viewport
      daraldığı için metin scrim'in zayıf bölgesine giriyor.
      Bu, bu pastan önce de böyleydi; dar masaüstünde ölçülmemişti.

      Çözüm: yalnız 900–1200 bandında scrim'in durakları sağa kaydırıldı.
      Gradyanın karakteri ve 1200+ davranışı AYNI; hero görselinin sağdaki
      ana kütlesi bu bantta da açıkta kalır. */
@media (min-width: 900px) and (max-width: 1200px) {
	.yo-scene__scrim {
		background:
			linear-gradient(
				100deg,
				rgba(250, 249, 246, 0.95) 0%,
				rgba(250, 249, 246, 0.90) 34%,
				rgba(250, 249, 246, 0.62) 58%,
				rgba(250, 249, 246, 0) 80%
			);
	}
}
/* 8) MOBİLDE BİNDİRME ŞERİDİ GÖRÜNMÜYORDU. Ölçüm (768 ve 390):
      ray rgb(251,250,246) · şerit rgb(244,243,240) → |ΔL| %5.9, en büyük
      kanal farkı 9. Masaüstünde aynı ölçüm %58–70 ve 220–250.
      Sebep masaüstündekinden farklı: mobilde `.yo-scene__scrim` dikey bir
      gradyan (180deg, %62'de 0.95) ve `inset: 0` ile rayın altına kadar
      iniyor. Scrim, rayın alt kenarında sonlandırıldı; gradyanın metni
      koruyan gövdesi (750px'in 12px'i) pratik olarak değişmez. */
@media (max-width: 899px) {
	.yo-scene__scrim { inset-block-end: 12px; }
}
/* 9) Mobil şerit ÇOK sert çıktı: scrim'i tamamen kaldırınca ham koyu video
      göründü (ort. rgb(72,59,51), |ΔL| %90.8) — masaüstündeki şerit
      rgb(149,141,134) / %68. Rayın altındaki 12px, açık ray ile beyaz Trust
      bölümü arasında keskin bir bant gibi duruyordu.
      Scrim tamamen kesilmek yerine o 12px'te 0.40'a düşürüldü: video
      görünür kalır, ton masaüstüyle aynı bantta buluşur. */
@media (max-width: 899px) {
	.yo-scene__scrim {
		inset-block-end: 0;
		background:
			linear-gradient(
				180deg,
				rgba(250, 249, 246, 0.55) 0%,
				rgba(250, 249, 246, 0.82) 38%,
				rgba(250, 249, 246, 0.95) 62%,
				rgba(250, 249, 246, 0.95) calc(100% - 12px),
				rgba(250, 249, 246, 0.40) calc(100% - 12px),
				rgba(250, 249, 246, 0.40) 100%
			);
	}
}
/* 10) 700px EŞİĞİ ARTIK GEÇERSİZ. CR-19.3'te tam ad eşiği 700px'ti; o
       eşik 11px etikete göre hesaplanmıştı. Bölüm 34 etiketi 13px'e
       çıkarınca 700'de sütun 212px, gereken 223px → sarma.
       Ölçümle yeni eşik: gereken sütun 223px, sütun = (genişlik − 64) / 3
       → tam ad için en az 733px. Eşik 760px'e alındı (768'de sütun 235px,
       12px pay). Bölüm adları değişmedi. */
@media (min-width: 700px) and (max-width: 759px) {
	.yo-rail__label { display: none; }
	.yo-rail__label--short { display: inline; font-size: 0.8125rem; letter-spacing: 0.06em; }
}
/* ==========================================================================
   Bölüm 35 — ANASAYFA REVİZE
   Hero slayt sırası · tek satırlı referans bandı
   Premium editoryal dil, tipografik hiyerarşi ve marka karakteri korunur.
   ========================================================================== */

/* --- §5 REFERANS BANDI: tek satır, daha büyük logo, kontrollü hareket --- */

.yo-trust {
	background-color: var(--wp--preset--color--surface);
	border-bottom: 0;
	overflow: hidden;
	padding-block: clamp(56px, 5.4vw, 84px);
}

/* Bölüm 32'deki blok yerleşimi geri alınır: başlık üstte, bant altta. */
.yo-trust__inner {
	display: block;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
	min-height: 0;
}

.yo-trust__head { max-width: 46ch; }

.yo-trust__support { margin-top: var(--wp--preset--spacing--3); }

/*
 * Bant kabın DIŞINA taşar: logolar ekran kenarından girip çıkar, bu yüzden
 * bandın "sayfa genişliğinde akan" hissi kurulur. Kenarlarda sert kırpma
 * yerine kısa bir maske; bu bir opaklık düşüşü DEĞİL, yalnız 56px'lik giriş
 * ve çıkış payı — logoların kendisi tam opaklıkta kalır.
 */
.yo-trust__viewport {
	margin-top: clamp(40px, 4vw, 60px);
	margin-inline: calc(clamp(24px, 3.4vw, 48px) * -1);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

.yo-trust__rail {
	display: flex;
	width: max-content;
	animation: yo-trust-scroll 64s linear infinite;
}

/* İmleç üzerindeyken ve klavye odağı bandın içindeyken durur. */
.yo-trust__viewport:hover .yo-trust__rail,
.yo-trust__viewport:focus-within .yo-trust__rail { animation-play-state: paused; }

@keyframes yo-trust-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.yo-trust__track {
	display: flex;
	align-items: center;
	gap: clamp(48px, 5vw, 88px);
	margin: 0;
	padding: 0 clamp(24px, 2.5vw, 44px) 0 0;
	list-style: none;
	flex: 0 0 auto;
}

.yo-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 96px;
}

/*
 * BOYUT: taban yükseklik × markanın optik çarpanı. Çarpanlar bir logonun
 * gerçek görsel ağırlığını dengeler (rozet ile geniş wordmark aynı piksel
 * yüksekliğinde eşit okunmaz), bu yüzden korunur; yalnız taban büyütüldü.
 * `max-width` geniş wordmark'ların bandı ele geçirmesini engeller.
 */
.yo-trust__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(60px * var(--yo-logo-scale, 1));
	max-width: 250px;
	object-fit: contain;
	/*
	 * Tam gri değil: markanın kendi tonundan bir iz kalır, bant yine de
	 * tek bir görsel dilde durur. Opaklık 0.62 → 0.90; §5'teki
	 * "çok düşük opacity yüzünden silikleşme olmasın" karşılanır.
	 */
	filter: grayscale(0.85) contrast(1.02);
	opacity: 0.9;
	transition: filter 260ms ease, opacity 260ms ease;
}

.yo-trust__item:hover .yo-trust__logo {
	filter: grayscale(0) contrast(1);
	opacity: 1;
}

/*
 * Saydam olmayan kaynaklar (JPEG, beyaz zeminli): `multiply` beyaz zemini
 * yutar. `filter` blend'den ÖNCE uygulandığı için bu hücrelerde parlaklık
 * düşürülmez — düşürülürse beyaz zemin griye döner ve kutu görünür.
 */
.yo-trust__item--opaque .yo-trust__logo {
	mix-blend-mode: multiply;
	filter: grayscale(0.85);
}

.yo-trust__item--opaque:hover .yo-trust__logo { filter: grayscale(0); }

@media (max-width: 1023px) {
	.yo-trust__item { height: 88px; }
	.yo-trust__logo { max-height: calc(54px * var(--yo-logo-scale, 1)); max-width: 216px; }
}

@media (max-width: 767px) {
	.yo-trust__item { height: 78px; }
	.yo-trust__logo { max-height: calc(46px * var(--yo-logo-scale, 1)); max-width: 184px; }
	.yo-trust__track { gap: clamp(36px, 9vw, 56px); }
	.yo-trust__viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	}
}

/*
 * HAREKET AZALTMA: bant durur, kopya set görsel olarak kaldırılır ve
 * kullanıcı bandı kendi eliyle kaydırabilir. Bilgi kaybı olmaz.
 */
@media (prefers-reduced-motion: reduce) {
	.yo-trust__rail { animation: none !important; width: 100%; }
	.yo-trust__track[aria-hidden="true"] { display: none; }
	.yo-trust__viewport { overflow-x: auto; }
}
/* Kırpılmış türevlerden sonra bant yeniden dengelendi.
   Dosyaların içindeki boş tuval payı temizlendiği için CSS'in verdiği kutu
   artık gerçekten markayla doluyor; max-width'i geniş wordmark (GOVISEC,
   7.56:1) belirler. */
.yo-trust__logo { max-width: 260px; }
.yo-trust__track { gap: clamp(44px, 4.4vw, 72px); }
/* Mobil bant: 390px'te GOVISEC (7.56:1) 184px kaplayıp aynı anda yalnız iki
   marka görünüyordu. Bant "kanıt" işlevini ancak arka arkaya birkaç marka
   okunduğunda görür; ölçüler kısıldı, aralık daraltıldı. */
@media (max-width: 767px) {
	.yo-trust__item { height: 72px; }
	.yo-trust__logo { max-height: calc(42px * var(--yo-logo-scale, 1)); max-width: 152px; }
	.yo-trust__track { gap: clamp(30px, 7.5vw, 46px); }
}
/* ==========================================================================
   Bölüm 35 — CR-25 · SABİT DİSİPLİN İNDEKSİ
   Dönen hero rayının (.yo-rail) yerine geçer. Rotasyon, aktif durum,
   ilerleme animasyonu ve JS bağımlılığı YOK.
   ========================================================================== */

.yo-disc {
	position: relative;
	z-index: 2;
	background-color: rgba(251, 250, 246, 0.94);
	border-top: 1px solid rgba(27, 32, 36, 0.10);
	/* Hero'nun alt kenarına biner — ray bir levha gibi okunur.
	   Ölçü HERO_OPTICAL_PASS_RAPORU §1'den korunmuştur. */
	margin-top: -14px;
}

.yo-disc__list {
	list-style: none;
	margin: 0 auto;
	max-width: 1600px;
	padding-inline: clamp(24px, 3.4vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.yo-disc__item { position: relative; }

/*
 * Giriş bir BAĞLANTIDIR: buton değil, sekme değil, aria-current yok.
 * Hedefi olmayan girişte aynı sınıf bir <span>e uygulanır — görsel ritim
 * bozulmaz, ölü bağlantı üretilmez.
 */
.yo-disc__entry {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
	min-block-size: 44px;
	padding-block: 14px;
	text-decoration: none;
	color: inherit;
}

a.yo-disc__entry:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: -3px;
}

.yo-disc__num {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	color: #5A636B;
}

/*
 * İki satırlık etiket. `min-block-size` sabittir: etiketler farklı satır
 * sayısına düşerse alttaki kural basamaklanır ve "kesintisiz hat" kavramı
 * ölür. Bu ölçü etiket metni değişse de değişmez.
 */
.yo-disc__label {
	display: block;
	min-block-size: calc(2 * 1.25em);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.07em;
	color: #4A525A;
}

.yo-disc__line { display: block; }

@media (min-width: 1024px) {
	/*
	 * 3 + boşluk + 1. Kırılım GRID'in kendisinde tanımlıdır, item'da değil:
	 * boş 4. track kırılımın ta kendisidir. `:nth-child()` marjıyla
	 * yazılsaydı bir yeniden adlandırmada sessizce kaybolurdu.
	 *
	 * Anlamı: 01–03 aldığınız işler, 04 sorumluluğunu aldığınız iş.
	 */
	.yo-disc__list {
		grid-template-columns: repeat(3, minmax(0, 1fr)) 32px minmax(0, 1fr);
	}

	.yo-disc__item:last-child { grid-column: 5; }

	/* Kural: sütun kenarından 10px içeride, komşularla kesintisiz birleşir. */
	.yo-disc__entry {
		position: relative;
		padding-block: 16px 18px;
	}

	.yo-disc__entry::after {
		content: "";
		position: absolute;
		inset-inline: 10px;
		inset-block-end: 0;
		block-size: 1px;
		background-color: rgba(27, 32, 36, 0.34);
		transition: block-size 180ms cubic-bezier(.22,.61,.36,1),
		            background-color 180ms cubic-bezier(.22,.61,.36,1);
	}
}

@media (hover: hover) and (min-width: 1024px) {
	a.yo-disc__entry:hover::after,
	a.yo-disc__entry:focus-visible::after {
		block-size: 2px;
		background-color: var(--wp--preset--color--brand-cobalt);
	}
	a.yo-disc__entry:hover .yo-disc__label,
	a.yo-disc__entry:hover .yo-disc__num { color: var(--wp--preset--color--brand-graphite); }
}

@media (prefers-reduced-motion: reduce) {
	.yo-disc__entry::after { transition: none; }
}

/* <1024: dikey liste. 3+1 kırılımı dikeyde de KORUNUR (08 §29). */
@media (max-width: 1023px) {
	.yo-disc__item + .yo-disc__item { border-top: 1px solid rgba(27, 32, 36, 0.14); }
	.yo-disc__item:last-child { margin-top: 12px; }
	.yo-disc__entry { padding-block: 12px; column-gap: 12px; align-items: baseline; }
	.yo-disc__label { min-block-size: 0; }
	.yo-disc__line { display: inline; }
	.yo-disc__line + .yo-disc__line::before { content: " "; }
}

/* ==========================================================================
   Bölüm 36 — CR-25 rev.2 · HERO KADRAJ DÜZELTMESİ

   ÖLÇÜMLE BULUNAN KUSUR (29.08.2026): sahne kabı 88vh = 846px olduğu için
   16:9 videoya 2.27:1 bir kap sunuluyordu ve `object-fit: cover` kaynağın
   büyük kısmını atıyordu:

       1024px → kaynağın yalnız %68'i görünüyordu
        390px → yalnız %28'i, 1.95× zoom ile

   Videonun tek işi "dağınık parçalar → tek sistem" demekti; bu kadrajda
   ızgaranın kurulduğu hiç görünmüyordu. Ayrıca `object-position` değerleri
   (72% / 64%) eski robotlu videoya göre ayarlanmıştı ve yeni videonun boş
   sol alanını kırpıp atıyordu.
   ========================================================================== */

@media (min-width: 768px) {
	/* Kap oranı 16:9'a yaklaştırılır — kırpma matematiksel olarak azalır. */
	.yo-scene,
	.yo-scene__content { min-height: 70vh; }

	/*
	 * Kaynak zaten solda boşluk taşıyor; kaydırmaya gerek yok. Ortalanınca
	 * kaynağın sol boşluğu kabın sol boşluğuna birebir oturur.
	 */
	.yo-scene__video { object-position: 50% 50%; }

	/*
	 * Perde yeniden yazıldı. Eski hâl KOYU videoyu açmak için konmuş açık
	 * bir gradyandı; açık videonun üzerinde iş görmüyor, yalnız görseli
	 * soluklaştırıyordu. Ölçüm: metin kontrastı perde olmadan da 9.1–12.9:1
	 * (24/24 geçiyor). Bu yüzden perde yalnız sol kenarda, çok hafif.
	 */
	.yo-scene__scrim {
		background: linear-gradient(
			100deg,
			rgba(250, 249, 246, 0.72) 0%,
			rgba(250, 249, 246, 0.38) 34%,
			rgba(250, 249, 246, 0) 52%
		);
	}
}

/*
 * MOBİL — tam kanama zemin BIRAKILDI.
 *
 * 390px'te dikey kap (792px) 16:9 videoyu 1.95× büyütüp %72'sini atıyordu.
 * Arka plan olarak kullanmak yerine video kendi 16:9 kutusunda üstte durur,
 * metin altında akar. CR-25 §2.2 mobil wireframe'i zaten bunu tarif ediyordu.
 */
@media (max-width: 767px) {
	.yo-scene {
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.yo-scene__media {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 9;
		width: 100%;
	}

	.yo-scene__video { object-position: 50% 50%; }

	/* Metin artık videonun ÜZERİNDE değil ALTINDA — perde gereksiz. */
	.yo-scene__scrim { display: none; }

	.yo-scene__content {
		position: relative;
		min-height: 0;
		padding-block: clamp(28px, 7vw, 44px) clamp(24px, 6vw, 36px);
	}
}

/* ==========================================================================
   Bölüm 37 — CR-25 rev.3 · TİPOGRAFİK HERO

   08 LOCKED §11: "Özgün hero görseli yoksa: tipografi + grid + kontrollü
   bilgi kompozisyonu." Aynı madde `autoplay hero video`yu yasaklar.
   Bu bölüm o reçetenin birebir uygulamasıdır.

   İKİ REGISTER: aynı aile (Source Serif 4), fark italik + renk.
   Sans/serif çakıştırması YAPILMAZ — Manrope bir UI yüzüdür, display değil.
   ========================================================================== */

.yo-hero--type {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
}

.yo-type__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
	/*
	 * CR-33 — YÜKSEKLİK DÜZELTMESİ.
	 * Ölçüm (1440×900): hero 1427px = 159svh. Ana mesajın "tek yumruk"
	 * etkisi aşağı doğru dağılıyordu. Güven şeridi ayrı bölüme alındı,
	 * dolgu da kısıldı. Hedef ~90svh.
	 */
	/*
	 * CR-40 — platform şeridi kaldırıldı, kazanılan 88px hero'ya verildi.
	 * Ölçüm (1440×900): hero 498px idi; katın yarısını bile doldurmuyordu.
	 * Dolgu ve H1 tavanı birlikte yükseltildi.
	 */
	padding-block: clamp(72px, 8.4vw, 140px) clamp(56px, 5.6vw, 92px);
}

.yo-type__eyebrow { color: var(--wp--preset--color--text-muted); }

.yo-type__title {
	margin-top: clamp(20px, 2.4vw, 36px);
	font-family: var(--wp--preset--font-family--editorial);
	font-weight: 400;
	/*
	 * Dramı punto taşır; süs taşımaz.
	 *
	 * Tavan geçmişte 5.25rem→4.5rem'e indirilmişti: o sırada H1 iki
	 * kolonlu yerleşimde %58'lik bir sütundaydı ve 84px'te beş satıra
	 * sarıyordu. Yerleşim `--clean` ile TEK KOLONA döndüğü için o sınır
	 * artık geçerli değil; iki satır da tam genişlikte duruyor.
	 * CR-40'ta tavan yükseltildi.
	 */
		/*
	 * Taban 2.25rem: 2.5rem'de 360px'te ilk satır üç satıra sarıyordu.
	 *
	 * Tavan, ölçülen GERÇEK metin genişliğine göre belirlendi (Range ile,
	 * blok genişliğiyle değil): 84px'te en uzun satır 1042px, kap 1344px
	 * — 302px boşta duruyordu. 6.7vw / 6.25rem'de satır kabın yaklaşık
	 * %92'sini doldurur ve hiçbir kırılma noktasında sarmaz.
	 */
	font-size: clamp(2.25rem, 6.7vw, 6.25rem);
	line-height: 1.02;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.yo-type__line { display: block; }

/* 1. satır — durum. Nötr, ağırbaşlı. */
.yo-type__line--a { color: var(--wp--preset--color--brand-graphite); }

/*
 * 2. satır — vaat. İkinci okuma burada açılır: aynı harf ailesi, italik
 * kesim, kobalt. Renk tek başına anlam taşımaz (08 §4); italik kesim
 * ayrımı renkten bağımsız olarak da görünür kılar.
 */
.yo-type__line--b {
	font-style: italic;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-type__foot {
	margin-top: clamp(32px, 4.4vw, 64px);
	display: grid;
	gap: clamp(24px, 3vw, 40px);
}

.yo-type__lead {
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
}

.yo-type__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2.4vw, 32px);
}

@media (min-width: 900px) {
	/*
	 * Destek metni SOLDA, aksiyonlar SAĞDA — referans yapının taşıdığı
	 * asıl denge. Alt sıra tek bir yatay hat gibi okunur.
	 */
	.yo-type__foot {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: clamp(32px, 4vw, 72px);
	}

	.yo-type__lead { max-width: 42ch; margin-bottom: 0; }
}

/*
 * Tipografik hero'da indeks doğrudan canvas üzerine oturur; video
 * sürümündeki levha etkisi (negatif margin + yarı saydam zemin) gerekmez.
 */
.yo-hero--type .yo-disc {
	margin-top: 0;
	background-color: transparent;
	border-top: 1px solid rgba(27, 32, 36, 0.14);
}

/* ==========================================================================
   Bölüm 38 — CR-29 · HERO İÇİ MARKA ŞERİDİ (kompakt trust rail)

   Şerit hero'nun içine alındı: iddia (H1) → ne yaptığımız (disiplin
   indeksi) → kim için yaptığımız (gerçek logolar) zinciri ilk ekranda
   tamamlanıyor. Kompakt modda bölüm başlığı basılmaz; hero'nun tek H1'i
   korunur ve başlık hiyerarşisi bozulmaz.

   Logolar GERÇEKTİR — metin-logo simülasyonu, web'den çekim veya üretim
   yapılmaz (trust-rail.php §17). Diskte dosyası olmayan kurum sessizce
   atlanır.
   ========================================================================== */

.yo-trust--compact {
	padding-block: 0;
	background-color: transparent;
	border-top: 1px solid rgba(27, 32, 36, 0.14);
}

.yo-trust--compact .yo-trust__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(24px, 3.4vw, 48px);
	padding-block: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
}

/* Bölüm başlığı değil, küçük bir yapısal etiket — bu yüzden <p>. */
.yo-trust--compact .yo-trust__tag {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

/* Kompakt şeritte logolar biraz küçülür — hero'daki tipografiyle yarışmasın. */
.yo-trust--compact .yo-trust__logo {
	max-height: clamp(26px, 2.6vw, 38px);
}

.yo-trust--compact .yo-trust__viewport {
	/* Kenarlarda yumuşak sönüm: şerit kesilmiş değil, devam ediyor okunur. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/*
 * Hareket tercihi: animasyon durur, kopya şerit gizlenir ve şerit normal
 * yatay kaydırmaya döner (klavye/dokunma ile erişilebilir kalır).
 */
@media (prefers-reduced-motion: reduce) {
	.yo-trust--compact .yo-trust__track { animation: none; }
	.yo-trust--compact .yo-trust__viewport { overflow-x: auto; }
	.yo-trust--compact .yo-trust__track[aria-hidden="true"] { display: none; }
}
/* ==========================================================================
   Bölüm 39 — CR-31 · TEŞHİS BAŞLIKLARI (hero'nun ikinci etkileşim yüzeyi)

   CR-30'un dekoratif tipografik dokusunun YERİNE GEÇER. Aynı dokuz cümle
   artık filigran değil, gerçek ve tıklanabilir bir liste.

   Kaldırılan 4'lü disiplin şeridinin (.yo-disc) taşıdığı "iki yol" kırılımı
   buraya taşındı: 4 büyüme + 2 sorumluluk. 03 v1.1 §15 (LOCKED) —
   "Ana sayfa iki yolu da açıkça gösterir, hiçbirini gizlemez."
   ========================================================================== */

/*
 * ORAN — ölçümle düzeltildi.
 * Önceki 1.42fr/0.78fr → sol %61.4 / sağ %33.7 (1440px, içerik kutusu).
 * Hedef bant sol %52-58 / sağ %32-38. Yeni değer: sol %58.0 / sağ %36.0.
 */
.yo-type__layout {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 1100px) {
	.yo-type__layout {
		grid-template-columns: minmax(0, 1.61fr) minmax(0, 1fr);
		gap: clamp(40px, 5.5vw, 96px);
		align-items: start;
	}
}

.yo-type__main { min-inline-size: 0; }

.yo-hero-aside { min-inline-size: 0; }

@media (min-width: 1100px) {
	.yo-hero-aside {
		border-inline-start: 1px solid rgba(27, 32, 36, 0.14);
		padding-inline-start: clamp(24px, 2.4vw, 40px);
	}
}

.yo-hero-aside__head { margin-bottom: clamp(18px, 2vw, 28px); }

/* Bölüm başlığı DEĞİL — hero'nun tek <h1>'i korunur. */
.yo-hero-aside__eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cobalt);
}

.yo-hero-aside__hint {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}

.yo-hero-aside__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yo-hero-aside__item {
	border-block-start: 1px solid rgba(27, 32, 36, 0.12);
	/*
	 * GİRİŞ ANİMASYONU — saf CSS, JS yok.
	 * `--_i` şablondan gelir; gecikmeyi CSS hesaplar. ui.js `defer` ile
	 * yüklendiği için kat üstü içerik script'e BAĞLANMAZ: script düşse
	 * bile liste görünür kalır.
	 *
	 * Bütçe: 320ms süre × 70ms stagger → son satır 670ms'de biter (<700ms).
	 * 120ms stagger alınmadı: 6 satırda toplam 920ms'ye çıkar ve 08 §20'nin
	 * "içerik görünürlüğünü geciktiren reveal" yasağına çarpar.
	 */
	animation: yo-aside-in 320ms cubic-bezier(.22, .61, .36, 1) both;
	animation-delay: calc(var(--_i, 0) * 70ms);
}

@keyframes yo-aside-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/*
 * KIRILIM — büyüme yolundan sorumluluk yoluna geçiş.
 * `path` verisinden gelen `--turn` sınıfıyla basılır, `:nth-child` ile
 * DEĞİL: sıra değişirse ayrım kendiliğinden doğru yere kayar.
 */
.yo-hero-aside__item--turn {
	margin-block-start: clamp(16px, 1.8vw, 26px);
	border-block-start-color: rgba(27, 32, 36, 0.26);
}

.yo-hero-aside__link {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--3);
	/* Birincil etkileşim yüzeyi — WCAG 2.2 SC 2.5.8 minimumu 24px, burada 48. */
	min-block-size: 48px;
	padding-block: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--brand-graphite);
	transition: color 180ms cubic-bezier(.22, .61, .36, 1),
	            translate 180ms cubic-bezier(.22, .61, .36, 1);
}

a.yo-hero-aside__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: -3px;
}

/*
 * TİPOGRAFİ — Source Serif 4 DİK.
 *
 * İtalik KULLANILMAZ: bu sitede italik işaretli bir register (H1'in 2.
 * satırı = "vaat"). Müşterinin dertlerini aynı kesimle dizmek, dert ile
 * vaadi aynı sesle konuşturur. Ağırlık 400'de kalır — editorial ailenin
 * 600'ü diskte yok, `font-weight: 600` sentetik bold üretirdi.
 */
.yo-hero-aside__text {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(1.25rem, 0.6rem + 0.86vw, 1.5rem);
	line-height: 1.32;
	letter-spacing: -0.006em;
}

/*
 * OK — temel durumda GÖRÜNÜR.
 * Önceki hâl `opacity: 0` idi ve 1'e yalnız @media (hover: hover) içinde
 * çıkıyordu: dokunmatik cihazda ve klavyede ok HİÇ görünmüyordu, yani
 * satırın tıklanabilir olduğuna dair tek işaret yoktu (08 §24 ihlali).
 * Artık hover yalnız HAREKET ekler, bilgiyi taşımaz.
 */
.yo-hero-aside__arrow {
	font-size: 0.875rem;
	line-height: 1;
	color: var(--wp--preset--color--brand-cobalt);
	flex-shrink: 0;
	transition: translate 180ms cubic-bezier(.22, .61, .36, 1);
}

/* Satır altındaki kural soldan sağa büyür — <li>'de, <a>'da değil:
   satır sağa ilerlerken kural yerinde kalsın, hareket ikiye katlanmasın. */
.yo-hero-aside__item { position: relative; }

.yo-hero-aside__item::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background-color: var(--wp--preset--color--brand-cobalt);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) {
	a.yo-hero-aside__link:hover { translate: 8px 0; }
	a.yo-hero-aside__link:hover .yo-hero-aside__text,
	a.yo-hero-aside__link:focus-visible .yo-hero-aside__text {
		color: var(--wp--preset--color--brand-cobalt);
	}
	a.yo-hero-aside__link:hover .yo-hero-aside__arrow { translate: 4px 0; }
	.yo-hero-aside__item:has(a.yo-hero-aside__link:hover)::after,
	.yo-hero-aside__item:has(a.yo-hero-aside__link:focus-visible)::after {
		transform: scaleX(1);
	}
}

/* Klavye: hover olmayan cihazlarda da odak görünür karşılık bulur. */
a.yo-hero-aside__link:focus-visible .yo-hero-aside__text {
	color: var(--wp--preset--color--brand-cobalt);
}

/*
 * HAREKET TERCİHİ.
 * `animation: none` YETMEZ — giriş animasyonunun temel durumu GÖRÜNMEZ
 * olduğu için satırlar sonsuza dek opacity:0'da kalırdı. Bitiş durumu
 * açıkça geri verilir. Hareket kalkar, DURUM kalkmaz: renk ve ok yerinde.
 */
@media (prefers-reduced-motion: reduce) {
	.yo-hero-aside__item {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.yo-hero-aside__link,
	.yo-hero-aside__arrow,
	.yo-hero-aside__item::after { transition: none; }
	a.yo-hero-aside__link:hover { translate: none; }
	a.yo-hero-aside__link:hover .yo-hero-aside__arrow { translate: none; }
}

/* <1100: aside metin bloğunun altına yığılır; kenar kuralı üste döner. */
@media (max-width: 1099px) {
	.yo-hero-aside {
		border-block-start: 1px solid rgba(27, 32, 36, 0.14);
		padding-block-start: clamp(24px, 4vw, 36px);
	}
	.yo-hero-aside__text { font-size: 1.25rem; }
}

/* ==========================================================================
   Bölüm 40 — CR-32 · PLATFORMLAR & ARAÇLAR

   ⚠️ Müşteri logolarından GÖRSEL OLARAK AYRIDIR ve olmak zorundadır.
   Meta/Instagram/Facebook/TikTok/X/ChatGPT/Claude ile resmî ortaklık yok;
   bunlar üzerinde çalışılan mecralar. Aynı şeride karıştırmak yanıltıcı
   ortaklık izlenimi üretir (kullanıcı kararı, 29.08.2026).

   Ayrımın üç taşıyıcısı: ayrı başlık · ayrı kural · belirgin daha küçük
   optik yükseklik. Kaydırma YOK — statik durmak "ortaklık vitrini"
   okumasını da azaltır.
   ========================================================================== */

.yo-trust__platforms {
	margin-block-start: clamp(20px, 2.4vw, 32px);
	padding-block-start: clamp(16px, 1.8vw, 24px);
	border-block-start: 1px solid rgba(27, 32, 36, 0.10);
}

.yo-trust__tag--platform { margin-bottom: clamp(10px, 1.2vw, 16px); }

.yo-trust__plat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 2.6vw, 40px);
}

.yo-trust__plat-item { display: flex; align-items: center; }

/*
 * Monokrom ve müşteri logolarından belirgin küçük: hiyerarşi net olsun.
 * Simple Icons SVG'leri tek renk `currentColor` değil sabit dolgu taşır,
 * bu yüzden gri tonlama filtreyle yapılır — dosya değiştirilmez.
 */
.yo-trust__plat-logo {
	display: block;
	block-size: clamp(18px, 1.6vw, 22px);
	inline-size: auto;
	filter: grayscale(1);
	opacity: 0.42;
	transition: opacity 180ms ease;
}

@media (hover: hover) {
	.yo-trust__plat-item:hover .yo-trust__plat-logo { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
	.yo-trust__plat-logo { transition: none; }
}

/* ==========================================================================
   Bölüm 41 — CR-33 · GÜVEN ŞERİDİ HERO'DAN AYRILDI

   CR-29'da şerit hero'nun İÇİNE alınmıştı. Ölçüm (1440×900): şerit 385px,
   hero 1427px — yani hero'nun %27'si. Toplam 159svh.

   Artık bağımsız bölüm: hero'nun hemen ardında, kendi üst sınırıyla
   ayrılmış. Kompakt sunum korunur (bölüm başlığı basılmaz), ama artık
   hero'nun yüksekliğine dahil değil.
   ========================================================================== */

.yo-trust--compact {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	border-block-start: 1px solid rgba(27, 32, 36, 0.14);
	border-block-end: 1px solid rgba(27, 32, 36, 0.10);
}

.yo-trust--compact .yo-trust__inner {
	padding-block: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px);
}

/* ==========================================================================
   Bölüm 42 — CR-35 · TEŞHİS LİSTESİ HERO'DAN KALDIRILDI

   Sağdaki "TEŞHİS BAŞLIKLARI" bileşeni hero'dan çıkarıldı (kullanıcı kararı,
   29.08.2026). Şablona `--clean` modifier'ı eklenmiş ama CSS karşılığı
   yazılmamıştı; `.yo-type__layout` iki kolon ilan etmeye devam ediyordu ve
   tek çocukla kalınca ölçüm şunu gösterdi:

       1440px → kap 1344 · içerik 780  →  BOŞ ALAN 564px (%42.0)
       1600px → kap 1504 · içerik 873  →  BOŞ ALAN 631px (%42.0)

   Tek kolona indirilir. H1 artık tam genişliği kullanır; satır sayısı düşer
   ve mesaj tek blok hâlinde vurur.

   NOT: 03 v1.1 §15 ("ana sayfa iki yolu da gösterir") İHLAL EDİLMEZ —
   madde ana sayfayı bağlar, hero'yu değil. Yol B ana sayfada duruyor
   (Stratejik Hizmetler + Teşhis bölümü).
   ========================================================================== */

.yo-type__layout--clean {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
	.yo-type__layout--clean {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* Lead kendi ölçüsünü zaten taşıyor (42ch); H1 tam genişlikte kalır. */
.yo-type__layout--clean .yo-type__main { max-inline-size: none; }

/* ==========================================================================
   Bölüm 43 — CR-36 · HERO ARKA PLAN VİDEOSU (hero adayı 1)

   Traverten plakalar + cam yüzeyler, doğal ışıkta dağınıktan tek hizalı
   duvara yerleşiyor. "Çalışan sistemi kuruyoruz" cümlesinin görsel
   karşılığı: parçalar → sistem.

   YETKİ NOTU: CR-34 (Master v1.6 §30) ile `autoplay hero video` yasağı
   kaldırıldı. Bu uygulama artık CR gerektirmiyor.

   KATMAN: `.yo-scene` şablonda `.yo-type`ın KARDEŞİDİR; varsayılan akışta
   metnin ÜSTÜNDE bir banner olarak dizilirdi. Arka plana alınması gerekiyor.
   ========================================================================== */

.yo-hero--type { position: relative; }

.yo-hero--type .yo-scene {
	position: absolute;
	inset: 0;
	min-height: 0;
	z-index: 0;
	overflow: hidden;
}

.yo-hero--type .yo-scene__media { position: absolute; inset: 0; }

.yo-hero--type .yo-scene__video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Metin videonun ÜSTÜNDE kalır. */
.yo-hero--type .yo-type { position: relative; z-index: 1; }

/*
 * PERDE — metin artık TAM GENİŞLİK olduğu için eski sol→sağ gradyan
 * yetmez. Kaynak zaten açık tonlu; perde yalnız zemini yeterince
 * sakinleştirecek kadar. Ölçüm sonrası ayarlanacak.
 */
.yo-hero--type .yo-scene__scrim {
	position: absolute;
	inset: 0;
	/* Ölçüm turu 2: 0.86/0.74/0.60 yetmedi (kobalt 1.01:1). Yükseltildi. */
	background: linear-gradient(
		180deg,
		rgba(247, 245, 240, 0.93) 0%,
		rgba(247, 245, 240, 0.90) 50%,
		rgba(247, 245, 240, 0.86) 100%
	);
}

/* --------------------------------------------------------------------------
   CR-36 · ÖLÇÜM TURU 3 DÜZELTMELERİ

   Saf zemin ölçümü (tüm metin gizlenerek, video duraklatılarak):

     390  eyebrow  1.00:1   ← mobilde koyu taş metnin altına geliyor
     390  h1-a     1.48:1
     1024 lead     4.34:1   ← eşik 4.5, kıl payı altında
     1440 lead     4.37:1
     1920 lead     4.48:1
   -------------------------------------------------------------------------- */

/*
 * MOBİL — video KAPATILIR.
 *
 * İki gerekçe: (1) kontrast ölçümü 390'da 1.00:1 ve 1.48:1 gösterdi,
 * perde ile kurtarılabilecek bir fark değil; (2) dikey dar kapta 16:9
 * kaynak zaten ~%72 kırpılıyordu — video okunmuyor, yalnız yük getiriyordu.
 * Telefonda mesaj hemen görünür; 419 KB da inmez.
 */
@media (max-width: 767px) {
	.yo-hero--type .yo-scene { display: none; }
}

/*
 * LEAD — yalnız videolu hero bağlamında bir ton koyulaşır.
 * `--text-muted` (93,102,109) hareketli zemin üzerinde 4.34:1'de kalıyordu.
 * `#4A525A` aynı gri ailesinin bir tık koyusu; global token DEĞİŞMEZ.
 */
.yo-hero--type .yo-type__lead { color: #4A525A; }

/* ==========================================================================
   Bölüm 44 — CR-37 rev.2 · SEKTÖRLER (kinetik tipografi girişi)

   REVİZYON GEREKÇESİ — kabul edilmeyen ilk sürümün ölçülen kusurları:
     · ayrı `<section>` idi → kartlardan kopuk iki sayfa hissi
     · dev dikey boşluk (144px üst dolgu + 104px alt)
     · ifade 44px, başlık 56px → istenen kinetik enerji oluşmuyordu
     · ifade İTALİK + ALTI ÇİZİLİ idi → bağlantı gibi okunuyordu

   Bu sürüm: kart bloğunun İÇİNDE, zemini paylaşan bir giriş parçası.
   Sans display (Manrope) 800, majüskül, italik yok, alt çizgi yok.

   AĞIRLIK NOTU: Manrope 700 ve 800 bu turda GERÇEK dosya olarak eklendi
   (`theme.json`). Sentetik bold kullanılmıyor.
   ========================================================================== */

.yo-sectors {
	max-inline-size: 1240px;
	margin-inline: auto;
	/* Kart grid'ine geçiş yakın olmalı — istenen ritim 56–72px. */
	margin-block-end: clamp(56px, 5.4vw, 72px);
	text-align: center;
}

/*
 * KURULUM CÜMLESİ — kinetik ifadeyi hazırlar, onunla yarışmaz.
 * Etiket rejimi: küçük, majüskül, geniş harf aralığı. Dev ifadeyle
 * arasındaki ölçek farkı böyle kasıtlı görünüyor; "küçük kalmış başlık"
 * gibi değil.
 */
.yo-sectors__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	text-wrap: balance;
}

/* kurulum → kinetik ifade : 28–36px */
.yo-sectors__line {
	position: relative;
	margin-block-start: clamp(24px, 2.6vw, 36px);
	font-family: var(--wp--preset--font-family--ui);
	max-inline-size: 92vw;
	margin-inline: auto;
}

/*
 * BLOOM — ifadenin arkasında çok hafif radial ışık. Dekoratif.
 * Neon yok, glassmorphism yok, startup gradyanı yok: tek merkez,
 * düşük opaklık, sıcak zemini kırmayan kobalt.
 */
.yo-sectors__bloom {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: min(760px, 96%);
	aspect-ratio: 2.6 / 1;
	/*
	 * Bloom KOBALT DEĞİL, IŞIK.
	 * Ölçüldü: sıcak zemin (#F7F5F0) üzerinde düşük alfalı kobalt griye
	 * düşüyor ve ekranda aura değil leke / sıkıştırma artefaktı gibi
	 * okunuyordu. Zemini karartmak yerine hafifçe AÇIYORUZ; ifade kendi
	 * ışığında duruyormuş hissi bu şekilde oluşuyor.
	 */
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 0.72) 0%,
		rgba(255, 255, 255, 0.30) 40%,
		rgba(255, 255, 255, 0) 70%
	);
	pointer-events: none;
	z-index: 0;
}

.yo-sectors__slot {
	position: relative;
	z-index: 1;
	display: inline-block;
	vertical-align: bottom;
	max-inline-size: 92vw;
	transition: inline-size 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yo-sectors__sizer {
	display: block;
	visibility: hidden;
	white-space: nowrap;
}

/*
 * İFADE — bloğun en güçlü görsel unsuru.
 * İTALİK YOK · ALT ÇİZGİ YOK · text-decoration YOK.
 */
.yo-sectors__word {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	white-space: nowrap;
	font-weight: 800;
	font-style: normal;
	text-decoration: none;
	letter-spacing: -0.028em;
	color: var(--wp--preset--color--brand-cobalt);
	opacity: 0;
	filter: blur(6px);
	/*
	 * YATAY CLIP KALDIRILDI.
	 * Önceki sürüm `clip-path: inset(0 50% 0 50%)` ile ifadeyi merkeze
	 * kapatıyordu. Ekran görüntüsünde yakalandı: geçişin ortasında
	 * "SİBER GÜVENLİK" ekranda "İBER GÜVENL" olarak duruyor. Göz harfin
	 * kesildiğini tanıyor ve bunu "açılma" değil "bozuk render" olarak
	 * okuyor. Metin üzerinde yatay kırpma bu yüzden yanlış araç.
	 *
	 * Yerine dikey yükseliş: giden ifade yukarı süzülüp bulanıklaşır,
	 * gelen ifade aşağıdan yerine oturur. Hiçbir karede yarım harf yok.
	 */
	translate: -50% 0.16em;
	/*
	 * ÇIKIŞ — hızlı ve gecikmesiz.
	 * Eşit süreli çapraz geçişte iki ifade aynı anda okunabilir kalıyor,
	 * kare üst üste binmiş iki kelime gösteriyordu (ölçüldü: giden ifade
	 * %46 opaklıkta hâlâ okunuyor). Giden önce çıkar.
	 */
	transition:
		opacity 300ms ease,
		filter 300ms ease,
		translate 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* GİRİŞ — çıkış bittikten sonra başlar. */
.yo-sectors__word.is-active {
	opacity: 1;
	filter: blur(0);
	translate: -50% 0;
	transition:
		opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
		filter 520ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
		translate 620ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

/* Slot ve ifade aynı punto bandını paylaşır. */
.yo-sectors__sizer,
.yo-sectors__word {
	font-size: clamp(2.5rem, 6.2vw, 6.5rem);
	line-height: 1.02;
}

/*
 * ACCENT BAR YOK.
 * İlk denemede slot'un altına ince bir kobalt bar konmuştu; ekranda
 * majüskülün hemen altında açık mavi bir çizgi olarak okunuyor ve
 * reddedilen "alt çizgili, link gibi" görüntüyü geri getiriyordu.
 * Vurgu artık yalnız punto, ağırlık ve renkle veriliyor.
 */

/* kinetik ifade → destek metni : 18–24px  (accent bar payı dahil) */
.yo-sectors__support {
	margin-block-start: clamp(18px, 1.9vw, 24px);
	margin-inline: auto;
	/* 46ch'te "Stratejiyi buna / göre kuruyoruz." diye kötü kırılıyordu. */
	max-inline-size: 58ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	.yo-sectors__slot,
	.yo-sectors__word { transition: none; }
	.yo-sectors__word {
		filter: none;
		translate: -50% 0;
	}
	.yo-sectors__bloom { display: none; }
}

/*
 * MOBİL — ifade taşmamalı.
 * En uzun ifade "FİNANSAL KURULUŞLAR" (19 karakter, majüskül, 800).
 * 320px'te 92vw = 294px; punto clamp'in alt ucu 2.5rem = 40px'te
 * yaklaşık 19 × 0.62em × 40 ≈ 470px eder — sığmaz. Dar bantta punto
 * ayrıca kısılır.
 */
@media (max-width: 600px) {
	/*
	 * Punto sınırını belirleyen ifade "FİNANSAL KURULUŞLAR" (19 karakter,
	 * majüskül, 800). Ölçüldü: 8.4vw'de bu ifade 320/360/390/430px'te metin
	 * sütununu 18–26px aşıyordu — viewport taşması yoktu ama sayfanın geri
	 * kalanından daha kenara dayanıp kaza gibi görünüyordu.
	 *
	 * 7.95vw'de en geniş ifade viewport'un ~%88'i olur: metin sütununu
	 * bilerek aşan ama iki yanında gerçek pay bırakan bir display ölçüsü.
	 */
	.yo-sectors__sizer,
	.yo-sectors__word { font-size: clamp(1.5rem, 7.95vw, 2.4rem); }
	.yo-sectors__title { font-size: 0.6875rem; letter-spacing: 0.14em; }
	/*
	 * Ölçüldü (390px): ifade 29px, destek 18px — aradaki fark yetersizdi,
	 * "durup bakılacak" an mobilde oluşmuyordu. İfade büyütüldü, destek
	 * bir kademe kısıldı; giriş cümlesi 16px'te en küçük kalıyor.
	 */
	.yo-sectors__support { font-size: 1.0625rem; }
}

/* ==========================================================================
   Bölüm 46 — CR-43 · ÇALIŞMALAR (editoryal vitrin · premium geçiş)

   CR-42 hiyerarşiyi kurmuştu (1 amiral + 2 yan vaka) ve yerleşim doğruydu.
   Bu geçiş yerleşimi korur, ZANAATI yükseltir. Ölçülen dört sorun:

   1. BAŞLIK KÜNYESİ genişliğin yarısını boş bırakıyordu (1440'ta başlık
      bloğu 68ch, sağında ~700px boşluk). Artık iki kolonlu editoryal
      künye: solda ifade, sağda kural çizgisiyle ayrılmış giriş.

   2. VAKA ADI Manrope 700'dü; bölüm başlığı serif olduğu için kart
      "bileşen", başlık "yayın" gibi okunuyordu. Ad artık editoryal serif
      (Source Serif 4 · 400 — ailede tek ağırlık var, sahte bold yok),
      sonuç satırı serif italik. Roman + italik + sans versal + sans metin:
      dört sesli gerçek bir tipografi sistemi.

   3. ETİKETLER kenarlıklı çip kutularıydı — bloğun en şablon duran öğesi.
      Dar yan kolonda ("Talep", "Çift Dilli") tek başına alt satıra
      düşüyordu. Artık kutu yok: versal, aralıklı, kılcal dikey çizgiyle
      ayrılmış tipografik dizi.

   4. KOBALT kartta üç yerde duruyordu (faz + sonuç satırı + CTA) ve vurgu
      olmaktan çıkıp "link rengi"ne dönüşmüştü. Dinlenmede tek bir kobalt
      kaldı: faz etiketi. Geri kalanı yalnız etkileşimde belirir.

   AYRICA: amiral vakanın gövdesi masaüstünde iki kolona ayrıldı ve görseli
   kalan yüksekliği doldurur. Böylece gövde altındaki ölü alan kapandı,
   görsel büyüdü, sol kolon yan kolonla kendiliğinden aynı hatta bitiyor.

   MOTION — 350-520ms bandı, sıçrama yok, parıltı yok. Görsel ölçek tavanı
   1.02. Neon / glassmorphism / gradyan / parallax bu blokta da yasak.
   ========================================================================== */

/* ==========================================================================
   BAŞLIK KÜNYESİ
   ========================================================================== */

.yo-works__head {
	/* CR-42'deki 68ch tavanı kaldırıldı; ölçü artık kolonun kendisinde. */
	max-inline-size: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 30px);
}

.yo-works__head-main {
	min-inline-size: 0;
}

.yo-works__head .yo-works__title {
	text-wrap: balance;
	/* 18ch ifadeyi dort satira boluyordu; iki satirlik kurgu geri geldi. */
	max-inline-size: 26ch;
}

.yo-works__head .yo-works__intro {
	margin-block-start: 0;
	max-inline-size: 44ch;
	font-size: clamp(1rem, 0.9vw + 0.78rem, 1.0625rem);
	line-height: 1.62;
}

@media (min-width: 1024px) {
	/*
	 * İfade solda, giriş sağda ve TABANDA. Sağ kolonun üstündeki kural
	 * çizgisi, girişi "başlığın altına düşmüş bir cümle" olmaktan çıkarıp
	 * künyenin ikinci sütunu yapar.
	 */
	.yo-works__head {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		column-gap: clamp(48px, 6vw, 112px);
		align-items: end;
	}

	.yo-works__head .yo-works__intro {
		border-block-start: 1px solid rgba(48, 47, 47, 0.16);
		padding-block-start: var(--wp--preset--spacing--4);
		/* Optik: son satır, başlığın alt gövde hattına otursun. */
		margin-block-end: 0.42em;
	}
}

/* ==========================================================================
   SAHNE
   ========================================================================== */

.yo-works__stage {
	margin-block-start: clamp(36px, 4vw, 64px);
	padding-block-start: clamp(28px, 3vw, 48px);
	/* Künyeyi vitrinden ayıran tek yatay kural — süs değil, bölüm sınırı. */
	border-block-start: 1px solid rgba(48, 47, 47, 0.14);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 2.1vw, 28px);
}

.yo-works__lead-col,
.yo-works__side-col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(20px, 2.1vw, 28px);
	min-inline-size: 0;
}

.yo-works__side-col {
	grid-auto-rows: 1fr;
}

.yo-wcase {
	display: flex;
	min-inline-size: 0;
}

/* ==========================================================================
   ORTAK YÜZEY
   ========================================================================== */

.yo-wcase__link {
	display: grid;
	inline-size: 100%;
	min-inline-size: 0;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	/* Çok ince, düşük kontrastlı. Kutu değil yüzey. */
	border: 1px solid rgba(48, 47, 47, 0.09);
	border-radius: 4px;
	transition:
		background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 420ms ease,
		box-shadow 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yo-wcase__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

/* --- Görsel --- */

.yo-wcase__media {
	display: block;
	position: relative;
	overflow: hidden;
	min-block-size: 0;
	background-color: rgba(48, 47, 47, 0.06);
}

.yo-wcase__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Odak noktası `inc/cases.php` içindeki `focus` alanından gelir. */
	object-position: var(--yo-focus, 50% 50%);
	/*
	 * Karartma YOK. Yalnız çok kontrollü tonal düzeltme: dinlenmede
	 * doygunluk bir tık kısık, hover'da tam açılır.
	 */
	filter: saturate(0.88);
	transform: scale(1);
	transition:
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 420ms ease;
}

/* --- Gövde --- */

.yo-wcase__body {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	font-family: var(--wp--preset--font-family--ui);
}

/* ==========================================================================
   ÜST KÜNYE — editoryal indeks + faz + kanıt notu
   ========================================================================== */

.yo-wcase__meta {
	/*
	 * Grid degil flex: 1024'te yan kolonun metin sutunu 176px'e kadar
	 * iniyor ve indeks + faz + kanit notu ayni satira sigmiyordu. Flex'te
	 * kanit notu kendi satirina duser, saga yaslanmis kalir; faz etiketi
	 * hicbir genislikte kelime ortasindan bolunmez.
	 */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: clamp(9px, 0.9vw, 14px);
	row-gap: 5px;
}

/*
 * İNDEKS — kapasite matrisindeki (Bölüm 45) editoryal indeksle aynı dil:
 * serif, hafif, düşük alfa. Vakayı "kart" değil "föy" yapan öğe.
 * Yalnız sırayı bildirir; ekran okuyucuya bilgi taşımaz (aria-hidden).
 */
.yo-wcase__index {
	font-family: var(--wp--preset--font-family--editorial);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: rgba(48, 47, 47, 0.30);
	transition: color 420ms ease;
}

.yo-wcase__phase {
	white-space: nowrap;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cobalt);
}

/*
 * KANIT NOTU — kutu DEĞİL.
 * İçeriği `inc/cases.php` içinde kanıt referansıyla tutulur (Master §28);
 * burada yalnız biçimlenir, asla üretilmez.
 */
.yo-wcase__badge {
	flex-shrink: 0;
	margin-inline-start: auto;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-muted);
	text-align: end;
	white-space: nowrap;
}

/* --- Ayraç kuralı — hover'da soldan kobalt dolar --- */

.yo-wcase__rule {
	display: block;
	position: relative;
	block-size: 1px;
	background-color: rgba(48, 47, 47, 0.12);
}

.yo-wcase__rule::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--brand-cobalt);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   METİN — serif ad · serif italik sonuç · sans spot
   ========================================================================== */

.yo-wcase__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.014em;
	color: var(--wp--preset--color--brand-graphite);
	text-wrap: balance;
}

/*
 * SONUÇ SATIRI — eskiden kobalt sans semibold'du ve "link" gibi okunuyordu.
 * Serif italik: dergi spotu dili, aynı ailede ikinci ses.
 */
.yo-wcase__kicker {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-weight: 400;
	line-height: 1.34;
	letter-spacing: 0;
	color: rgba(48, 47, 47, 0.78);
}

.yo-wcase__lead {
	line-height: 1.62;
	color: var(--wp--preset--color--text-muted);
}

/* ==========================================================================
   ETİKETLER — kutu yok, tipografik dizi
   ========================================================================== */

.yo-wcase__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.72em;
	row-gap: 7px;
}

.yo-wcase__tag {
	/* Etiket + ayracı tek parça: ikisi asla ayrı satıra düşmez. */
	white-space: nowrap;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	transition: color 420ms ease;
}

/*
 * Ayraç: nokta değil, kılcal dikey çizgi — daha keskin, daha az gürültü.
 * ::before değil ::after: dizi sarınca ayraç satır BAŞINA düşüyordu
 * ("| ÇİFT DİLLİ"). Ayraç artık kendinden önceki etiketle birlikte gezer.
 */
.yo-wcase__tag:not(:last-child)::after {
	content: "";
	display: inline-block;
	inline-size: 1px;
	block-size: 0.72em;
	margin-inline: 0.72em 0;
	vertical-align: -0.02em;
	background-color: rgba(48, 47, 47, 0.24);
	transition: background-color 420ms ease;
}

/* ==========================================================================
   CTA — dinlenmede grafit, etkileşimde kobalt
   ========================================================================== */

.yo-wcase__go {
	margin-block-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: start;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--brand-graphite);
	transition: color 420ms ease;
}

.yo-wcase__go-label {
	position: relative;
}

/* Dinlenmede sönük bir alt çizgi durur: bağlantı olduğu okunur. */
.yo-wcase__go-label::before {
	content: "";
	position: absolute;
	inset-block-end: -4px;
	inset-inline: 0;
	block-size: 1px;
	background-color: rgba(48, 47, 47, 0.26);
	transition: opacity 300ms ease;
}

.yo-wcase__go-label::after {
	content: "";
	position: absolute;
	inset-block-end: -4px;
	inset-inline: 0;
	block-size: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}

.yo-wcase__go .yo-arrow {
	display: inline-block;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   FEATURED KİPİ
   ========================================================================== */

.yo-wcase--feat .yo-wcase__link {
	grid-template-rows: auto 1fr;
}

.yo-wcase--feat .yo-wcase__media {
	aspect-ratio: 16 / 9;
}

.yo-wcase--feat .yo-wcase__body {
	gap: clamp(13px, 1.2vw, 17px);
	padding: clamp(28px, 2.7vw, 42px) clamp(28px, 2.7vw, 42px) clamp(30px, 2.9vw, 44px);
}

.yo-wcase--feat .yo-wcase__index {
	font-size: clamp(1.5rem, 2vw, 2rem);
}

.yo-wcase--feat .yo-wcase__rule {
	/* İndeksin optik ağırlığı arttı; kural çizgisine ayrı bir nefes. */
	margin-block: clamp(3px, 0.4vw, 6px) clamp(4px, 0.5vw, 8px);
}

.yo-wcase--feat .yo-wcase__title {
	font-size: clamp(1.9rem, 2.75vw, 2.75rem);
}

.yo-wcase--feat .yo-wcase__kicker {
	font-size: clamp(1.125rem, 1.35vw, 1.375rem);
}

.yo-wcase--feat .yo-wcase__lead {
	font-size: clamp(0.9375rem, 1.02vw, 1rem);
	max-inline-size: 48ch;
}

.yo-wcase--feat .yo-wcase__tags {
	font-size: 0.6875rem;
	letter-spacing: 0.11em;
}

.yo-wcase--feat .yo-wcase__go {
	margin-block-start: clamp(8px, 0.8vw, 14px);
	font-size: 0.9375rem;
}

/* ==========================================================================
   SECONDARY KİPİ
   ========================================================================== */

.yo-wcase--mini .yo-wcase__media {
	aspect-ratio: 16 / 10;
}

.yo-wcase--mini .yo-wcase__body {
	gap: clamp(9px, 0.85vw, 13px);
	padding: clamp(20px, 1.9vw, 28px);
}

.yo-wcase--mini .yo-wcase__index {
	font-size: 1.25rem;
}

.yo-wcase--mini .yo-wcase__title {
	font-size: clamp(1.1875rem, 1.45vw, 1.4375rem);
}

.yo-wcase--mini .yo-wcase__kicker {
	font-size: 0.9375rem;
}

.yo-wcase--mini .yo-wcase__lead {
	font-size: 0.8125rem;
}

.yo-wcase--mini .yo-wcase__tags {
	font-size: 0.625rem;
	letter-spacing: 0.09em;
}

.yo-wcase--mini .yo-wcase__go {
	font-size: 0.8125rem;
	margin-block-start: clamp(4px, 0.5vw, 8px);
}

/* ==========================================================================
   HOVER — sakin, 350-520ms. Sıçrama yok, parıltı yok.
   ========================================================================== */

@media (hover: hover) {
	.yo-wcase__link:hover {
		background-color: #FFFFFF;
		/*
		 * Kenar kobalta DÖNMÜYOR: mavi çerçeve "seçili UI kutusu" gibi
		 * okunuyordu. Yüzey yalnız bir ton koyulaşır, yükseklik gölgeden
		 * gelir. Kobalt kartın İÇİNDE — kuralda ve CTA'da — belirir.
		 */
		border-color: rgba(48, 47, 47, 0.16);
		box-shadow: 0 22px 48px -34px rgba(27, 32, 36, 0.46);
	}

	/* Görsel ölçek tavanı 1.02 — talimat gereği. */
	.yo-wcase__link:hover .yo-wcase__img {
		transform: scale(1.02);
		filter: saturate(1);
	}

	.yo-wcase__link:hover .yo-wcase__rule::after { transform: scaleX(1); }
	.yo-wcase__link:hover .yo-wcase__index { color: rgba(0, 127, 255, 0.5); }
	.yo-wcase__link:hover .yo-wcase__go { color: var(--wp--preset--color--brand-cobalt); }
	.yo-wcase__link:hover .yo-wcase__go-label::before { opacity: 0; }
	.yo-wcase__link:hover .yo-wcase__go-label::after { transform: scaleX(1); }
	.yo-wcase__link:hover .yo-arrow { transform: translate(3px, -3px); }
	.yo-wcase__link:hover .yo-wcase__tag { color: var(--wp--preset--color--brand-graphite); }
}

/* --- KLAVYE — hover'ın tamamı aynen tekrarlanır --- */

.yo-wcase__link:focus-visible {
	background-color: #FFFFFF;
	border-color: rgba(48, 47, 47, 0.16);
	box-shadow: 0 22px 48px -34px rgba(27, 32, 36, 0.46);
}

.yo-wcase__link:focus-visible .yo-wcase__img {
	transform: scale(1.02);
	filter: saturate(1);
}

.yo-wcase__link:focus-visible .yo-wcase__rule::after { transform: scaleX(1); }
.yo-wcase__link:focus-visible .yo-wcase__index { color: rgba(0, 127, 255, 0.5); }
.yo-wcase__link:focus-visible .yo-wcase__go { color: var(--wp--preset--color--brand-cobalt); }
.yo-wcase__link:focus-visible .yo-wcase__go-label::before { opacity: 0; }
.yo-wcase__link:focus-visible .yo-wcase__go-label::after { transform: scaleX(1); }
.yo-wcase__link:focus-visible .yo-arrow { transform: translate(3px, -3px); }

/* --- REDUCED MOTION --- */

@media (prefers-reduced-motion: reduce) {
	.yo-wcase__link,
	.yo-wcase__img,
	.yo-wcase__index,
	.yo-wcase__rule::after,
	.yo-wcase__tag,
	.yo-wcase__go,
	.yo-wcase__go-label::before,
	.yo-wcase__go-label::after,
	.yo-wcase__go .yo-arrow {
		transition: none;
	}

	.yo-wcase__link:hover .yo-wcase__img,
	.yo-wcase__link:focus-visible .yo-wcase__img { transform: none; }

	.yo-wcase__link:hover .yo-arrow,
	.yo-wcase__link:focus-visible .yo-arrow { transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet: featured tam genişlik, yan vakalar altta iki kolon. */
@media (min-width: 700px) {
	.yo-works__side-col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}
}

/* Masaüstü: sol %60 amiral vaka, sağ %40 iki yatay vaka. */
@media (min-width: 1024px) {
	.yo-works__stage {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		align-items: stretch;
	}

	.yo-works__side-col {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
	}

	/*
	 * AMİRAL GÖVDE İKİ KOLON
	 *   Tek kolonluyken gövde 740px genişlikteydi, metin 48ch'de bitiyor,
	 *   sağda ~280px ölü alan kalıyordu. Ad + sonuç + CTA solda; spot ve
	 *   etiketler sağda, alt hatta oturur. Dergi açılımı düzeni.
	 */
	.yo-wcase--feat .yo-wcase__body {
		display: grid;
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto auto minmax(0, 1fr);
		column-gap: clamp(30px, 3.2vw, 56px);
		row-gap: 0;
	}

	.yo-wcase--feat .yo-wcase__meta   { grid-column: 1 / -1; grid-row: 1; }
	.yo-wcase--feat .yo-wcase__rule   { grid-column: 1 / -1; grid-row: 2;
		margin-block: clamp(14px, 1.4vw, 20px) clamp(20px, 2vw, 28px); }
	.yo-wcase--feat .yo-wcase__title  { grid-column: 1; grid-row: 3; }
	.yo-wcase--feat .yo-wcase__kicker { grid-column: 1; grid-row: 4;
		margin-block-start: clamp(10px, 1vw, 14px); }
	.yo-wcase--feat .yo-wcase__go     { grid-column: 1; grid-row: 5;
		align-self: end; margin-block-start: clamp(26px, 2.6vw, 40px); }
	.yo-wcase--feat .yo-wcase__lead   { grid-column: 2; grid-row: 3 / 5;
		max-inline-size: 40ch; }
	.yo-wcase--feat .yo-wcase__tags   { grid-column: 2; grid-row: 5;
		align-self: end; margin-block-start: clamp(20px, 2vw, 30px); }

	/*
	 * Amiral görsel kalan yüksekliği alır. Sahnenin yüksekliğini yan kolon
	 * belirler; görsel `1fr` olduğu için gövdenin altında ölü alan oluşmaz
	 * ve iki kolon kendiliğinden aynı hatta biter.
	 */
	.yo-wcase--feat .yo-wcase__link {
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.yo-wcase--feat .yo-wcase__media {
		aspect-ratio: auto;
		min-block-size: clamp(320px, 26vw, 460px);
	}

	/*
	 * Meta ölçeği yalnız DAR KOLONDA kısılır (>=1024, yan kolon).
	 * Orada faz etiketi 11px/0.13em'de iki satıra sarıyordu.
	 */
	.yo-wcase--mini .yo-wcase__phase {
		font-size: 0.625rem;
		letter-spacing: 0.08em;
	}

	.yo-wcase--mini .yo-wcase__badge {
		font-size: 0.625rem;
	}

	.yo-wcase--mini .yo-wcase__index {
		font-size: 1.125rem;
	}

	/*
	 * Yan kolon dar olduğu için secondary kartlar YATAY kurulur:
	 * görsel solda, metin sağda.
	 */
	.yo-wcase--mini .yo-wcase__link {
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
		align-items: stretch;
	}

	.yo-wcase--mini .yo-wcase__media {
		aspect-ratio: auto;
		block-size: 100%;
	}
}


/* ==========================================================================
   SERVICES HUB & PRODUCT MATRIX (LOCKED v1.0)
   Source: 31_YANKI_OTESI_HIZMETLER_HUB_FINAL_COPY_LOCKED_v1.0.md
   ========================================================================== */

.yo-hub-page {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	color: var(--wp--preset--color--text, #1B2024);
	overflow-x: hidden;
}

/* --- 01. HUB HERO --- */
.yo-hub-hero {
	padding: calc(var(--wp--custom--header--height, 80px) + 32px) 0 64px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
	background: var(--wp--preset--color--canvas, #F7F5F0);
}

.yo-hub-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	margin-top: 28px;
}

.yo-hub-hero__content {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.yo-hub-hero__visual {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 20px;
	background: #E8E4DD;
	box-shadow: 0 20px 48px rgba(27, 32, 36, 0.12);
}

.yo-hub-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.yo-hub-hero__eyebrow-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.yo-hub-hero__eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-hero__eyebrow {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	margin: 0;
}

.yo-hub-hero__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2.4rem, 4.5vw, 3.8rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	text-wrap: balance;
}

.yo-hub-hero__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: clamp(1.05rem, 1.25vw, 1.2rem);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	max-width: 65ch;
}

.yo-hub-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.yo-hub-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF !important;
	padding: 15px 28px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 127, 255, 0.25);
	transition: all 0.25s ease;
}

.yo-hub-hero__cta-primary:hover {
	background: #0066cc;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 127, 255, 0.35);
}

.yo-hub-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	padding: 14px 24px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s ease;
}

.yo-hub-hero__cta-secondary:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-hero__editorial-line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid rgba(214, 220, 232, 0.6);
}

.yo-hub-hero__line-dash {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	font-weight: 800;
}

.yo-hub-hero__line-text {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- COMMON SECTION STYLES --- */
.yo-hub-section {
	padding: 88px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
}

.yo-hub-section__header {
	max-width: 800px;
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.yo-hub-section__eyebrow-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.yo-hub-section__eyebrow-line {
	width: 28px;
	height: 2px;
	background-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-section__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2rem, 3.2vw, 2.7rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	text-wrap: balance;
}

.yo-hub-section__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	line-height: 1.68;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 02. PROBLEM ROUTER GRID --- */
.yo-hub-router__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.yo-hub-router-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.yo-hub-router-card:hover {
	transform: translateY(-3px);
	border-color: rgba(0, 127, 255, 0.4);
	box-shadow: 0 12px 32px rgba(0, 127, 255, 0.08);
}

.yo-hub-router-card__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-hub-router-card__num {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: rgba(0, 127, 255, 0.08);
	padding: 2px 8px;
	border-radius: 6px;
	align-self: flex-start;
}

.yo-hub-router-card__quote {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-hub-router-card__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	flex-grow: 1;
}

.yo-hub-router-card__footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid rgba(214, 220, 232, 0.7);
}

.yo-hub-router-card__route {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.yo-hub-router-card__route-label,
.yo-hub-router-card__exp-label {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #5D666D);
	text-transform: uppercase;
}

.yo-hub-router-card__route-link {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yo-hub-router-card__route-link:hover {
	color: #0066cc;
	text-decoration: underline;
}

.yo-hub-router-card__exp {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.84rem;
}

.yo-hub-router-card__exp-link {
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.yo-hub-router-card__exp-link:hover {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

/* --- 03. SATILABİLİR ÜRÜNLER (CLUSTERS) --- */
.yo-hub-clusters {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.yo-hub-cluster {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.yo-hub-cluster__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wp--preset--color--brand-graphite, #302F2F);
}

.yo-hub-cluster__badge {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.85rem;
	font-weight: 800;
	background: var(--wp--preset--color--brand-graphite, #302F2F);
	color: #FFFFFF;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.yo-hub-cluster__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-hub-cluster__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.yo-hub-product-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	transition: all 0.28s ease;
	position: relative;
}

.yo-hub-product-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}

.yo-hub-product-card__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.yo-hub-product-card__code {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	padding: 3px 8px;
	border-radius: 6px;
	flex-shrink: 0;
}

.yo-hub-product-card__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-hub-product-card__summary {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.94rem;
	line-height: 1.62;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

.yo-hub-product-card__deliverable {
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.yo-hub-product-card__deliv-label {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-transform: uppercase;
}

.yo-hub-product-card__deliv-text {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	font-weight: 600;
}

.yo-hub-product-card__partner {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.82rem;
}

.yo-hub-product-card__partner-label {
	color: var(--wp--preset--color--text-muted, #5D666D);
	font-weight: 600;
}

.yo-hub-product-card__partner-val {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	font-weight: 700;
	text-decoration: none;
}

.yo-hub-product-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
	transition: all 0.2s ease;
	margin-top: 6px;
}

.yo-hub-product-card__link:hover {
	color: #0066cc;
	transform: translateX(3px);
}

/* --- 04. UZMANLIK KATMANI --- */
.yo-hub-expertise__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.yo-hub-exp-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	transition: all 0.25s ease;
}

.yo-hub-exp-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	transform: translateY(-2px);
}

.yo-hub-exp-card__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.yo-hub-exp-card__link {
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yo-hub-exp-card__link:hover {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-exp-card__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	flex-grow: 1;
}

.yo-hub-exp-card__arrow a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 700;
	transition: all 0.25s ease;
}

.yo-hub-exp-card:hover .yo-hub-exp-card__arrow a {
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF;
	transform: translateX(4px);
}

/* --- 05. OPERATING MODEL (DİJİTAL OTORİTE SİSTEMİ) --- */
.yo-hub-opmodel__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.yo-hub-opstep {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.yo-hub-opstep__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.yo-hub-opstep__num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	font-weight: 800;
}

.yo-hub-opstep__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-hub-opstep__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	flex-grow: 1;
}

.yo-hub-opstep__q-box {
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.yo-hub-opstep__q-label {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-transform: uppercase;
}

.yo-hub-opstep__q-text {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
}

/* --- 06. PROOF (GERÇEK İŞLER) --- */
.yo-hub-proof__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 36px;
}

.yo-hub-proof-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.25s ease;
}

.yo-hub-proof-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	transform: translateY(-2px);
}

.yo-hub-proof-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #EEF0F3;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
}

.yo-hub-proof-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.35s ease;
}

.yo-hub-proof-card:hover .yo-hub-proof-card__image {
	transform: scale(1.02);
}

.yo-hub-proof-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
}

.yo-hub-proof-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: rgba(0, 127, 255, 0.08);
	padding: 3px 8px;
	border-radius: 6px;
	align-self: flex-start;
}

.yo-hub-proof-card__badge-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-proof-card__client {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-hub-proof-card__scope {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	flex-grow: 1;
}

.yo-hub-proof-card__link {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.yo-hub-proof-card__link:hover {
	color: #0066cc;
	transform: translateX(3px);
}

.yo-hub-proof__footer {
	text-align: center;
}

/* --- 07. UYGULAMA EKOSİSTEMİ --- */
.yo-hub-ecosystem__card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 20px;
	padding: 48px 44px;
	max-width: 960px;
	margin: 0 auto;
}

.yo-hub-ecosystem__eyebrow-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.yo-hub-ecosystem__eyebrow-line {
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-ecosystem__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(1.8rem, 2.8vw, 2.3rem);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0 0 16px 0;
}

.yo-hub-ecosystem__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1rem;
	line-height: 1.68;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0 0 28px 0;
}

.yo-hub-ecosystem__partner-box {
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border: 1px solid rgba(0, 127, 255, 0.15);
	border-radius: 12px;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-hub-ecosystem__partner-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: rgba(0, 127, 255, 0.12);
	padding: 3px 10px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-hub-ecosystem__partner-text {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-hub-ecosystem__partner-sub {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 08. FINAL CTA --- */
.yo-hub-final-cta__card {
	background: #0E141C;
	border-radius: 24px;
	padding: clamp(44px, 5vw, 68px) clamp(32px, 4.5vw, 60px);
	color: #FFFFFF;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	box-shadow: 0 20px 56px rgba(14, 20, 28, 0.25);
}

.yo-hub-final-cta__card .yo-eyebrow {
	color: #8FA8F5;
}

.yo-hub-final-cta__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2.2rem, 3.5vw, 3rem);
	font-weight: 400;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.15;
	text-wrap: balance;
}

.yo-hub-final-cta__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	line-height: 1.68;
	color: rgba(240, 244, 248, 0.82);
	margin: 0;
	max-width: 58ch;
}

.yo-hub-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
}

.yo-hub-final-cta__btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF !important;
	padding: 16px 32px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 127, 255, 0.4);
	transition: all 0.25s ease;
}

.yo-hub-final-cta__btn-primary:hover {
	background: #3B6DF5;
	transform: translateY(-2px);
}

.yo-hub-final-cta__btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 15px 26px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s ease;
}

.yo-hub-final-cta__btn-secondary:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
}

/* --- RESPONSIVE BREAKPOINTS FOR HUB --- */
@media (max-width: 1024px) {
	.yo-hub-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 0.88fr);
		gap: 28px;
	}

	.yo-hub-router__grid,
	.yo-hub-expertise__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.yo-hub-opmodel__grid,
	.yo-hub-proof__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.yo-hub-hero {
		padding: calc(var(--wp--custom--header--height, 72px) + 20px) 0 48px 0;
	}

	.yo-hub-hero__layout {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-top: 22px;
	}

	.yo-hub-hero__content {
		max-width: none;
	}

	.yo-hub-hero__visual {
		border-radius: 16px;
		aspect-ratio: 16 / 10;
	}

	.yo-hub-section {
		padding: 60px 0;
	}

	.yo-hub-router__grid,
	.yo-hub-cluster__grid,
	.yo-hub-expertise__grid,
	.yo-hub-opmodel__grid,
	.yo-hub-proof__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.yo-hub-ecosystem__card {
		padding: 32px 24px;
	}

	.yo-hub-final-cta__card {
		padding: 40px 24px;
	}

	.yo-hub-hero__actions,
	.yo-hub-final-cta__actions {
		flex-direction: column;
		width: 100%;
	}

	.yo-hub-hero__cta-primary,
	.yo-hub-hero__cta-secondary,
	.yo-hub-final-cta__btn-primary,
	.yo-hub-final-cta__btn-secondary {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}


/* ==========================================================================
   PRODUCT PAGE ENGINE (LOCKED v1.0)
   Source: 16_PAGE_MISSION_MATRIX, 36_KURUMSAL_WEB_SITESI, 37_PERFORMANS_REKLAM
   ========================================================================== */

.yo-product-page {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	color: var(--wp--preset--color--text, #1B2024);
	overflow-x: hidden;
}

/* --- 01. PRODUCT HERO --- */
.yo-product-hero {
	padding: calc(var(--wp--custom--header--height, 80px) + 32px) 0 68px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
	background: var(--wp--preset--color--canvas, #F7F5F0);
}

.yo-product-hero__content {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.yo-product-hero__eyebrow-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.yo-product-hero__code-badge {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.82rem;
	font-weight: 800;
	color: #FFFFFF;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	padding: 2px 10px;
	border-radius: 6px;
}

.yo-product-hero__eyebrow {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.84rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	margin: 0;
}

.yo-product-hero__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2.3rem, 4.2vw, 3.6rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	text-wrap: balance;
}

.yo-product-hero__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: clamp(1.05rem, 1.25vw, 1.2rem);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	max-width: 65ch;
}

.yo-product-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.yo-product-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF !important;
	padding: 16px 32px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.98rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 127, 255, 0.25);
	transition: all 0.25s ease;
}

.yo-product-hero__cta-primary:hover {
	background: #0066cc;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 127, 255, 0.35);
}

.yo-product-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	padding: 15px 26px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s ease;
}

.yo-product-hero__cta-secondary:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-hero__editorial-line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 10px;
	padding-top: 18px;
	border-top: 1px solid rgba(214, 220, 232, 0.6);
}

.yo-product-hero__line-dash {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	font-weight: 800;
}

.yo-product-hero__line-text {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- COMMON PRODUCT SECTION --- */
.yo-product-section {
	padding: 88px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
}

.yo-product-section__header {
	max-width: 800px;
	margin-bottom: 44px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.yo-product-section__eyebrow-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.yo-product-section__eyebrow-line {
	width: 28px;
	height: 2px;
	background-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-section__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2rem, 3vw, 2.6rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	text-wrap: balance;
}

.yo-product-section__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.02rem;
	line-height: 1.68;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 02. PROBLEMS GRID --- */
.yo-product-problems__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.yo-product-prob-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.yo-product-prob-card__num {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: rgba(0, 127, 255, 0.08);
	padding: 2px 8px;
	border-radius: 6px;
	align-self: flex-start;
}

.yo-product-prob-card__title {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	line-height: 1.35;
}

.yo-product-prob-card__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 03. DELIVERABLES GRID --- */
.yo-product-deliverables__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.yo-product-deliv-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-product-deliv-card__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.yo-product-deliv-card__num {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	padding: 2px 8px;
	border-radius: 6px;
}

.yo-product-deliv-card__title {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-product-deliv-card__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 04. NARRATIVE / PARTNER --- */
.yo-product-narrative__card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 20px;
	padding: 44px 40px;
	max-width: 920px;
}

.yo-product-narrative__eyebrow-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.yo-product-narrative__eyebrow-line {
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-narrative__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(1.8rem, 2.8vw, 2.2rem);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0 0 16px 0;
}

.yo-product-narrative__body p {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 05. PROCESS TIMELINE --- */
.yo-product-process__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 860px;
}

.yo-product-step {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 14px;
	padding: 22px 24px;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 20px;
	align-items: center;
}

.yo-product-step__num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 800;
}

.yo-product-step__title {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0 0 4px 0;
}

.yo-product-step__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 06. STANDARDS GRID --- */
.yo-product-standards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.yo-product-std-card {
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border: 1px solid rgba(0, 127, 255, 0.15);
	border-radius: 14px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.yo-product-std-card__title {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-product-std-card__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* --- 07. PROOF GRID --- */
.yo-product-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.yo-product-proof-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
}

.yo-product-proof-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: rgba(0, 127, 255, 0.08);
	padding: 3px 8px;
	border-radius: 6px;
	align-self: flex-start;
}

.yo-product-proof-card__badge-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-proof-card__client {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-product-proof-card__scope {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	flex-grow: 1;
}

.yo-product-proof-card__link {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* --- 08. BOUNDARIES (ANTI-GUARANTEE & EXCLUSIONS) --- */
.yo-product-boundaries__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 28px;
}

.yo-product-bound-box {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 18px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-product-bound-box__badge span {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 3px 10px;
	border-radius: 6px;
}

.yo-product-bound-box--anti .yo-product-bound-box__badge span {
	background: rgba(0, 127, 255, 0.1);
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-bound-box--excl .yo-product-bound-box__badge span {
	background: rgba(180, 35, 24, 0.08);
	color: #B42318;
}

.yo-product-bound-box__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-product-bound-box__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.94rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

.yo-product-bound-box__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.yo-product-bound-box__list li {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	position: relative;
	padding-left: 18px;
}

.yo-product-bound-box__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: #B42318;
	font-weight: 800;
}

/* --- 09. FIT / UNFIT --- */
.yo-product-fit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.yo-product-fit-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 18px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.yo-product-fit-card--fit {
	border-top: 4px solid var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-fit-card--unfit {
	border-top: 4px solid var(--wp--preset--color--text-muted, #5D666D);
}

.yo-product-fit-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.yo-product-fit-card__icon {
	font-size: 1.2rem;
	font-weight: 800;
}

.yo-product-fit-card--fit .yo-product-fit-card__icon {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-product-fit-card--unfit .yo-product-fit-card__icon {
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-product-fit-card__title {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-product-fit-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-product-fit-card__list li {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text, #1B2024);
	position: relative;
	padding-left: 20px;
}

.yo-product-fit-card--fit .yo-product-fit-card__list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	font-size: 1.2rem;
	line-height: 1;
}

.yo-product-fit-card--unfit .yo-product-fit-card__list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--text-muted, #5D666D);
	font-size: 1.2rem;
	line-height: 1;
}

/* --- 10. RELATED LINKS --- */
.yo-product-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.yo-product-rel-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 14px;
	padding: 24px 20px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	transition: all 0.25s ease;
}

.yo-product-rel-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	transform: translateY(-2px);
}

.yo-product-rel-card__type {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-transform: uppercase;
}

.yo-product-rel-card__title {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-product-rel-card__arrow {
	align-self: flex-start;
	font-size: 1.1rem;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	font-weight: 700;
}

/* --- 11. FAQ ACCORDION --- */
.yo-product-faq__list {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-product-faq-item {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.yo-product-faq-item.is-open {
	border-color: rgba(0, 127, 255, 0.5);
}

.yo-product-faq-item__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	text-align: left;
}

.yo-product-faq-item__icon {
	font-size: 1.3rem;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	transition: transform 0.2s ease;
}

.yo-product-faq-item.is-open .yo-product-faq-item__icon {
	transform: rotate(45deg);
}

.yo-product-faq-item__a {
	padding: 0 24px 20px 24px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.94rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-product-faq-item__a p {
	margin: 0;
}

/* --- 12. FINAL CTA --- */
.yo-product-final-cta__card {
	background: #0E141C;
	border-radius: 24px;
	padding: clamp(44px, 5vw, 68px) clamp(32px, 4.5vw, 60px);
	color: #FFFFFF;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	box-shadow: 0 20px 56px rgba(14, 20, 28, 0.25);
}

.yo-product-final-cta__card .yo-eyebrow {
	color: #8FA8F5;
}

.yo-product-final-cta__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2.2rem, 3.5vw, 3rem);
	font-weight: 400;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.15;
	text-wrap: balance;
}

.yo-product-final-cta__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	line-height: 1.68;
	color: rgba(240, 244, 248, 0.82);
	margin: 0;
	max-width: 58ch;
}

.yo-product-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
}

.yo-product-final-cta__btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--brand-cobalt, #007fff);
	color: #FFFFFF !important;
	padding: 16px 32px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 127, 255, 0.4);
	transition: all 0.25s ease;
}

.yo-product-final-cta__btn-primary:hover {
	background: #3B6DF5;
	transform: translateY(-2px);
}

.yo-product-final-cta__btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 15px 26px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s ease;
}

.yo-product-final-cta__btn-secondary:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
}

/* --- RESPONSIVE BREAKPOINTS FOR PRODUCT PAGE --- */
@media (max-width: 1024px) {
	.yo-product-problems__grid,
	.yo-product-deliverables__grid,
	.yo-product-standards__grid,
	.yo-product-proof__grid,
	.yo-product-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.yo-product-boundaries__grid,
	.yo-product-fit__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.yo-product-hero {
		padding: calc(var(--wp--custom--header--height, 72px) + 20px) 0 48px 0;
	}

	.yo-product-section {
		padding: 60px 0;
	}

	.yo-product-problems__grid,
	.yo-product-deliverables__grid,
	.yo-product-standards__grid,
	.yo-product-proof__grid,
	.yo-product-related__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.yo-product-step {
		grid-template-columns: 36px 1fr;
		gap: 14px;
	}

	.yo-product-step__num {
		width: 36px;
		height: 36px;
		font-size: 0.82rem;
	}

	.yo-product-narrative__card {
		padding: 32px 24px;
	}

	.yo-product-bound-box,
	.yo-product-fit-card {
		padding: 28px 22px;
	}

	.yo-product-final-cta__card {
		padding: 40px 24px;
	}

	.yo-product-hero__actions,
	.yo-product-final-cta__actions {
		flex-direction: column;
		width: 100%;
	}

	.yo-product-hero__cta-primary,
	.yo-product-hero__cta-secondary,
	.yo-product-final-cta__btn-primary,
	.yo-product-final-cta__btn-secondary {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   PORTFOLIO HUB & CASE STUDY SYSTEM (LOCKED v1.0)
   Source: 09_HUB_COPY, 11_CASE_TEMPLATE, 12_HUB_LAYOUT, 13_REDIRECT_MATRIX
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. /calismalar/ PORTFOLIO HUB
   -------------------------------------------------------------------------- */

.yo-calismalar-hub {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	color: var(--wp--preset--color--text, #1B2024);
	overflow-x: hidden;
}

/* Hub Hero */
.yo-calismalar-hero {
	padding: calc(var(--wp--custom--header--height, 80px) + 36px) 0 48px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
	background: var(--wp--preset--color--canvas, #F7F5F0);
}

.yo-calismalar-hero__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.yo-calismalar-hero__head {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.yo-calismalar-hero__eyebrow-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.yo-calismalar-hero__eyebrow-line {
	width: 28px;
	height: 2px;
	background-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-calismalar-hero__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2.3rem, 4.2vw, 3.6rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	text-wrap: balance;
}

.yo-calismalar-hero__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: clamp(1.05rem, 1.2vw, 1.18rem);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	max-width: 68ch;
}

.yo-calismalar-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

/* Filter Bar (C-FILTER) */
.yo-calismalar-filter-bar {
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
	background: #FFFFFF;
	position: sticky;
	top: var(--wp--custom--header--height, 70px);
	z-index: 20;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.yo-calismalar-filter-bar__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.yo-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.yo-filter-btn {
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border: 1px solid transparent;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-height: 40px;
}

.yo-filter-btn:hover {
	background: #E2E6F0;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-filter-btn.is-active,
.yo-filter-btn[aria-pressed="true"] {
	background: var(--wp--preset--color--brand-graphite, #302F2F);
	color: #FFFFFF;
	border-color: var(--wp--preset--color--brand-graphite, #302F2F);
}

/* Case Grid (C-GRID) — 12_CALISMALAR_HUB_LAYOUT */
.yo-calismalar-grid-section {
	padding: 64px 0 96px 0;
}

.yo-calismalar-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.yo-calisma-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.yo-calisma-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 127, 255, 0.35);
	box-shadow: 0 14px 36px rgba(0, 127, 255, 0.08);
}

.yo-calisma-card--featured {
	grid-column: span 1;
}

.yo-calisma-card__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	position: relative;
}

.yo-calisma-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.yo-calisma-card:hover .yo-calisma-card__img {
	transform: scale(1.025);
}

.yo-calisma-card__body {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 12px;
}

.yo-calisma-card__category {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-transform: uppercase;
}

.yo-calisma-card__client {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	font-weight: 800;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin-top: -4px;
}

.yo-calisma-card__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.28rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-calisma-card__title a {
	color: inherit;
	text-decoration: none;
}

.yo-calisma-card__title a:hover {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-calisma-card__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	line-height: 1.62;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	flex-grow: 1;
}

.yo-calisma-card__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 0 4px;
	border-top: 1px solid rgba(214, 220, 232, 0.7);
}

.yo-calisma-card__proof-pill {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: rgba(0, 127, 255, 0.07);
	padding: 3px 8px;
	border-radius: 4px;
}

.yo-calisma-card__footer {
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.yo-calisma-card__cta {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: transform 0.2s ease;
}

.yo-calisma-card__cta:hover {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   B. SINGLE CASE STUDY TEMPLATE (11_CASE_TEMPLATE_ARCHITECTURE)
   -------------------------------------------------------------------------- */

.yo-single-case-layout {
	background-color: var(--wp--preset--color--canvas, #F7F5F0);
	color: var(--wp--preset--color--text, #1B2024);
	overflow-x: hidden;
}

/* 01: Breadcrumb */
.yo-breadcrumb-nav {
	padding-top: calc(var(--wp--custom--header--height, 80px) + 24px);
	padding-bottom: 12px;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.yo-breadcrumb-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.82rem;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-breadcrumb-item:not(:last-child)::after {
	content: "/";
	margin-left: 8px;
	color: var(--wp--preset--color--border, #D6DCE8);
}

.yo-breadcrumb-link {
	color: var(--wp--preset--color--text-muted, #5D666D);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yo-breadcrumb-link:hover {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-breadcrumb-item[aria-current="page"] span {
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	font-weight: 700;
}

/* 02: Case Hero (C-HERO) */
.yo-case-hero {
	padding: 24px 0 56px 0;
}

.yo-case-hero__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.yo-case-hero__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.yo-case-hero__eyebrow-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.yo-case-hero__accent-line {
	width: 28px;
	height: 2px;
	background-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-case-hero__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2.2rem, 3.8vw, 3.2rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
	text-wrap: balance;
}

.yo-case-hero__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: clamp(1.05rem, 1.2vw, 1.18rem);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
	max-width: 62ch;
}

.yo-case-hero__media {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.yo-case-hero__frame {
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
	aspect-ratio: 16 / 11;
}

.yo-case-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yo-case-hero__asset-notice {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	color: var(--wp--preset--color--text-muted, #5D666D);
	font-size: 0.76rem;
}

/* 03: Case Meta Strip (C-CASEMETA) */
.yo-case-meta-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 40px 24px;
}

.yo-case-meta-strip {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 14px;
	padding: 20px 28px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.yo-case-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.yo-case-meta-label {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #5D666D);
	text-transform: uppercase;
}

.yo-case-meta-val {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
}

/* 04: Proof Strip (C-PROOFSTRIP) */
.yo-case-proof-strip {
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border-top: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
	padding: 36px 0;
}

.yo-proof-strip-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.yo-proof-strip-card {
	background: #FFFFFF;
	border: 1px solid rgba(0, 127, 255, 0.15);
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.yo-proof-strip-icon {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	font-size: 0.9rem;
	flex-shrink: 0;
}

.yo-proof-strip-text {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.94rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

/* 05: Narrative (Bağlam -> Problem -> Strateji) */
.yo-case-narrative {
	padding: 72px 0;
}

.yo-case-narrative__container {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.yo-case-narrative-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-left: 3px solid var(--wp--preset--color--border, #D6DCE8);
	padding-left: 24px;
	transition: border-color 0.2s ease;
}

.yo-case-narrative-block:hover {
	border-left-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-case-narrative-heading {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	font-weight: 600;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-case-narrative-body {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text, #1B2024);
	margin: 0;
}

/* 06: Scope of Work (C-DELIV / yo/case-scope-grid) */
.yo-case-scope {
	padding: 72px 0;
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	border-top: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
}

.yo-case-scope__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.yo-case-scope__head {
	max-width: 760px;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yo-case-scope__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(1.8rem, 2.8vw, 2.4rem);
	font-weight: 400;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-case-scope__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.yo-case-scope-item {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 14px;
	padding: 24px 22px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.yo-case-scope-item__num {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
	padding: 4px 10px;
	border-radius: 6px;
	flex-shrink: 0;
}

.yo-case-scope-item__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.yo-case-scope-item__heading {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin: 0;
}

.yo-case-scope-item__desc {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0;
}

/* 07: Disclosure & Transparency (C-DISCLOSURE) */
.yo-case-disclosure-container {
	max-width: 860px;
	margin: 40px auto;
	padding: 0 24px;
}

.yo-case-disclosure-box {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-left: 4px solid var(--wp--preset--color--brand-graphite, #302F2F);
	border-radius: 10px;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-disclosure-row strong,
.yo-data-note-row strong {
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	margin-right: 6px;
}

/* 08: Related Services (yo/case-services) */
.yo-case-services-section {
	padding: 48px 0;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.yo-case-services-heading {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #5D666D);
	margin: 0 0 16px 0;
}

.yo-case-services-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.yo-case-service-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	text-decoration: none;
	transition: all 0.2s ease;
}

.yo-case-service-pill:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	transform: translateY(-2px);
}

.yo-case-service-arrow {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

/* 09: Next Case (C-CASENEXT) */
.yo-case-next-section {
	max-width: 1200px;
	margin: 24px auto 48px;
	padding: 0 24px;
}

.yo-case-next-box {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 14px;
	padding: 24px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.yo-case-next-label {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-case-next-title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0;
}

.yo-case-next-title a {
	color: var(--wp--preset--color--brand-graphite, #302F2F);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yo-case-next-title a:hover {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

/* 10: Final CTA (C-CTA) */
.yo-case-cta {
	padding: 80px 0;
	background: #0E141C;
	color: #FFFFFF;
}

.yo-case-cta__container {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.yo-case-cta__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.yo-case-cta__title {
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2rem, 3.2vw, 2.6rem);
	font-weight: 400;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.2;
}

.yo-case-cta__lead {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.05rem;
	line-height: 1.68;
	color: rgba(240, 244, 248, 0.82);
	margin: 0;
	max-width: 54ch;
}

.yo-case-cta__action {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   C. RESPONSIVE BREAKPOINTS (320px - 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.yo-case-hero__container {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.yo-case-meta-strip {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.yo-calismalar-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.yo-case-scope__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.yo-calismalar-hero {
		padding-top: calc(var(--wp--custom--header--height, 70px) + 24px);
		padding-bottom: 36px;
	}

	.yo-calismalar-filter-bar {
		padding: 16px 0;
	}

	.yo-filter-group {
		gap: 8px;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.yo-filter-btn {
		white-space: nowrap;
		font-size: 0.82rem;
		padding: 6px 14px;
		min-height: 36px;
	}

	.yo-case-next-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.yo-breadcrumb-nav {
		padding-top: calc(var(--wp--custom--header--height, 70px) + 16px);
	}

	.yo-case-cta__action {
		flex-direction: column;
		width: 100%;
	}

	.yo-case-cta__action .yo-button {
		width: 100%;
		justify-content: center;
	}
}


/* ==========================================================================
   VISUAL POLISH SPRINT — 1) STICKY HEADER / OVERLAP  5) HEADER POLISH
   Staging only. Presentation only: no copy, URL, schema or IA change.

   PROBLEM (measured): .yo-header--overlay is position:fixed with a
   transparent background. The solid ".is-stuck" state is toggled by
   ui.js, but NO script tag is emitted on this build, so the state never
   applied and the fixed header sat directly on top of the following
   section headings and body copy.

   FIX: the readable state no longer depends on JavaScript.
   - Default (and JS-less) state: the header always carries the canvas
     surface + hairline, so text can never pass underneath it unreadably.
   - Where scroll-driven CSS animation is supported, the header still
     starts transparent over the hero scene and resolves to the solid
     state as the hero leaves — the original design intent, without JS.
   - The existing .is-stuck rules are preserved and still win if ui.js
     is ever restored.
   ========================================================================== */

/* Anchor jumps must clear the fixed header. */
html { scroll-padding-top: calc(var(--wp--custom--header--height, 94px) + 16px); }

/* --- 1a. Fail-safe: solid header by default (no JS required) --- */
.yo-header--overlay {
	background-color: #FBFAF7;
	border-bottom: 1px solid rgba(27, 32, 36, 0.10);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Overlay link colours stay legible on the solid surface. */
.yo-header--overlay .yo-menu__link,
.yo-header--overlay .yo-logo-slot__tagline { color: var(--wp--preset--color--brand-graphite); }

/* --- 1b. Progressive enhancement: transparent over the hero, solid after ---
   Only where scroll-driven animations exist. Everything above remains the
   fallback, so an unsupported browser is still collision-free. */
@supports (animation-timeline: scroll()) {
	@keyframes yo-header-resolve {
		from {
			background-color: rgba(251, 250, 247, 0);
			border-bottom-color: rgba(27, 32, 36, 0);
		}
		to {
			background-color: rgba(251, 250, 247, 1);
			border-bottom-color: rgba(27, 32, 36, 0.10);
		}
	}

	.yo-header--overlay {
		animation: yo-header-resolve linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 120px;
	}
}

/* Reduced motion: no transition/animation, just the safe solid state. */
@media (prefers-reduced-motion: reduce) {
	.yo-header--overlay {
		animation: none !important;
		background-color: #FBFAF7 !important;
		border-bottom-color: rgba(27, 32, 36, 0.10) !important;
	}
}

/* --- 1c. Section headings keep clear air beneath the header --- */
.yo-section { scroll-margin-top: calc(var(--wp--custom--header--height, 94px) + 24px); }

/* --- 5. HEADER POLISH: calmer rhythm, less rigid CTA --- */
.yo-header--overlay .yo-header__inner {
	min-height: 88px;
	gap: clamp(20px, 2.4vw, 40px);
}

@media (min-width: 1024px) {
	.yo-header--overlay .yo-menu {
		gap: clamp(22px, 2vw, 36px);
	}

	.yo-header--overlay .yo-menu__link {
		font-size: 0.875rem;
		letter-spacing: 0.005em;
		padding-block: 6px;
		opacity: 0.86;
		transition: opacity 180ms ease, color 180ms ease;
	}

	.yo-header--overlay .yo-menu__link:hover,
	.yo-header--overlay .yo-menu__link:focus-visible { opacity: 1; }
}

/* CTA: softer shape, more generous padding, quieter border. */
.yo-header--overlay .yo-header__analysis {
	border-radius: 6px;
	border-color: rgba(27, 32, 36, 0.18);
	padding-block: 11px;
	padding-inline: clamp(16px, 1.4vw, 22px);
	font-size: 0.86rem;
	letter-spacing: 0.005em;
	white-space: nowrap;
	transition: background-color 180ms ease, border-color 180ms ease,
		color 180ms ease, transform 180ms ease;
}

.yo-header--overlay .yo-header__analysis:hover {
	transform: translateY(-1px);
}

.yo-header--overlay .yo-header__analysis:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cobalt, #007fff);
	outline-offset: 3px;
}

/* Logo optical size settles slightly on the solid bar. */
@media (min-width: 1024px) {
	.yo-header--overlay .yo-logo img,
	.yo-header--overlay .yo-logo-slot .custom-logo { width: 168px; }
}

/* ===============================================================
   İÇGÖRÜLER EDİTORYAL OTORİTE SİSTEMİ v1
   Hub, topic hub ve kart sistemi.

   ÇAKIŞMA ÖNLEMİ: ana sayfadaki mevcut `.yo-insights-*` sınıfları
   bu dosyada DEĞİŞTİRİLMEZ. Buradaki her sınıf `.yo-ins-*` veya
   `.yo-topic-*` ön ekini taşır; iki sistem yan yana yaşayabilir.
   =============================================================== */

/* --- Bölüm başlığı --------------------------------------------- */
.yo-ins-secthead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	gap: var(--wp--preset--spacing--4, 24px);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--5, 32px);
	padding-bottom: var(--wp--preset--spacing--3, 16px);
	border-bottom: 1px solid var(--wp--preset--color--border, #D6DCE8);
}

.yo-ins-secthead__eyebrow {
	margin: 0 0 6px 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-ins-secthead__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--brand-graphite, #1B2024);
}

.yo-ins-secthead__note {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

/* --- Konu navigasyonu ------------------------------------------ */
.yo-topic-nav {
	background: var(--wp--preset--color--surface, #FFFFFF);
	border-block: 1px solid var(--wp--preset--color--border, #D6DCE8);
	padding-block: 14px;
}

.yo-topic-nav__inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.yo-topic-nav__label {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-topic-nav__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Yatay kaydırma YALNIZ bu şeride aittir; sayfa gövdesi asla kaymaz. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.yo-topic-nav__list::-webkit-scrollbar { display: none; }

.yo-topic-nav__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 7px 14px;
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 999px;
	background: var(--wp--preset--color--canvas, #F7F5F0);
	color: var(--wp--preset--color--brand-graphite, #1B2024);
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.84rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.yo-topic-nav__pill:hover,
.yo-topic-nav__pill:focus-visible {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-topic-nav__pill.is-active {
	background: var(--wp--preset--color--brand-graphite, #1B2024);
	border-color: var(--wp--preset--color--brand-graphite, #1B2024);
	color: #FFFFFF;
}

.yo-topic-nav__count {
	font-size: 0.72rem;
	font-weight: 700;
	opacity: 0.55;
}

/* --- Kart ızgaraları ------------------------------------------- */
.yo-ins-grid {
	display: grid;
	gap: var(--wp--preset--spacing--4, 24px);
}

.yo-ins-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yo-ins-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Editoryal kart -------------------------------------------- */
.yo-ins-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--border, #D6DCE8);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.yo-ins-card:hover {
	border-color: var(--wp--preset--color--brand-cobalt, #007fff);
}

.yo-ins-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface-soft, #EEF1F8);
}

.yo-ins-card__media .yo-cover,
.yo-ins-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yo-ins-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.yo-ins-card__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.yo-ins-card__format {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(0, 127, 255, 0.08);
	border: 1px solid rgba(0, 127, 255, 0.2);
	color: var(--wp--preset--color--brand-cobalt, #007fff);
}

/* Gündem zamana bağlıdır; kalıcı formatlardan görsel olarak ayrılır. */
.yo-ins-card__format--gundem {
	background: rgba(197, 106, 67, 0.09);
	border-color: rgba(197, 106, 67, 0.22);
	color: #A8542F;
}

.yo-ins-card__topic {
	color: var(--wp--preset--color--text-muted, #5D666D);
	font-weight: 700;
}

.yo-ins-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.01em;
}

.yo-ins-card__link {
	color: var(--wp--preset--color--brand-graphite, #1B2024);
	text-decoration: none;
}

.yo-ins-card__link:hover,
.yo-ins-card__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yo-ins-card__dek {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-ins-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-ins-card__author { font-weight: 700; }
.yo-ins-card__sep { opacity: 0.5; }

/* Lider kart: daha büyük tipografi ve geniş kapak. */
.yo-ins-card--lead .yo-ins-card__title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.yo-ins-card--lead .yo-ins-card__body { padding: 26px; gap: 12px; }

/* Satır varyantı: kapaksız, yoğun liste. */
.yo-ins-card--row { border-radius: 0; border-inline: 0; border-top: 0; }
.yo-ins-card--row .yo-ins-card__body { padding-inline: 0; }

/* --- Öne çıkan bloğu ------------------------------------------- */
.yo-ins-featured__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--wp--preset--spacing--4, 24px);
}

.yo-ins-featured__support {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4, 24px);
}

/* --- Topic hub ------------------------------------------------- */
.yo-topic-hub__head {
	padding-block: 48px 28px;
	background: var(--wp--preset--color--canvas, #F7F5F0);
}

.yo-topic-hub__eyebrow {
	margin: 0 0 10px 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.yo-topic-hub__eyebrow a {
	color: var(--wp--preset--color--brand-cobalt, #007fff);
	text-decoration: none;
}

.yo-topic-hub__title {
	margin: 0 0 12px 0;
	font-family: var(--wp--preset--font-family--editorial, 'Source Serif 4', Georgia, serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-graphite, #1B2024);
}

.yo-topic-hub__lead {
	max-width: 64ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 1.06rem;
	line-height: 1.62;
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-topic-hub__empty {
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	color: var(--wp--preset--color--text-muted, #5D666D);
}

.yo-topic-hub__bridge {
	background: var(--wp--preset--color--brand-graphite, #1B2024);
	color: #F7F5F0;
	padding-block: 34px;
}

.yo-topic-hub__bridge-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.yo-topic-hub__bridge-eyebrow {
	margin: 0 0 6px 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: rgba(247, 245, 240, 0.6);
}

.yo-topic-hub__bridge-text {
	max-width: 56ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-size: 0.98rem;
	line-height: 1.55;
}

.yo-topic-hub__bridge-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--wp--preset--color--brand-graphite, #1B2024);
	font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

/* --- Duyarlı davranış ------------------------------------------ */
@media (max-width: 1024px) {
	.yo-ins-secthead { grid-template-columns: 1fr; align-items: start; }
	.yo-ins-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yo-ins-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yo-ins-featured__grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.yo-ins-grid--3,
	.yo-ins-grid--4 { grid-template-columns: 1fr; }

	.yo-topic-nav__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
	/* Şerit tam genişlikte kaysın; sayfa gutter'ı korunur. */
	.yo-topic-nav__list { width: 100%; }

	.yo-topic-hub__head { padding-block: 32px 22px; }
	.yo-topic-hub__bridge-cta { width: 100%; justify-content: center; }
}