/**
 * Yıldırım Yapı — homepage, projects and services.
 *
 * Design direction: architectural editorial. An engineering drawing crossed with
 * a Swiss magazine. The rules that separate things behave like drafting lines —
 * hairline, navy, never grey-black — and depth comes from those lines and from
 * flat navy fields rather than from shadow, because a construction drawing has
 * no drop shadows. Corners are square. Numerals are a design element, set large
 * and tabular against small tracked-out labels.
 *
 * Loaded last in the cascade: inherited.css still carries ID selectors from the
 * Forestra lineage, so anything competing on equal specificity has to follow it.
 */

/* ------------------------------------------------------------------ shell -- */

.yy-wrap {
	width: 100%;
	max-width: var(--yildirim-container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.yy-main {
	background: var(--yildirim-bg);
}

/* Shared section rhythm. */
.yy-process,
.yy-projects,
.yy-services,
.yy-why,
.yy-paths,
.yy-cta {
	padding-block: clamp(3.5rem, 9vw, var(--yildirim-space-6));
}

.yy-eyebrow {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--yildirim-slate);
}

.yy-eyebrow--inverse {
	color: rgba(255, 255, 255, 0.72);
}

/* The eyebrow sits on a drafting line, the way a drawing labels a dimension. */
.yy-eyebrow::before {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 1px;
	margin-inline-end: 0.75rem;
	vertical-align: 0.28em;
	background: currentColor;
	opacity: 0.55;
}

.yy-sec-head {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, var(--yildirim-space-4));
}

.yy-sec-head--row {
	display: flex;
	max-width: none;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--yildirim-space-3);
	flex-wrap: wrap;
}

.yy-sec-title {
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-heading);
	text-wrap: balance;
}

.yy-sec-title--inverse {
	color: var(--yildirim-white);
}

.yy-sec-lede {
	margin: var(--yildirim-space-2) 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--yildirim-text-muted);
	max-width: 42rem;
}

.yy-sec-lede--inverse {
	color: rgba(255, 255, 255, 0.78);
}

/* ----------------------------------------------------------------- buttons -- */

.yy-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--yildirim-radius);
	transition: background var(--yildirim-transition), color var(--yildirim-transition), border-color var(--yildirim-transition);
}

.yy-btn::after {
	content: "→";
	transition: transform var(--yildirim-transition);
}

.yy-btn:hover::after,
.yy-btn:focus-visible::after {
	transform: translateX(0.25rem);
}

/* On the navy hero. */
.yy-btn--light {
	background: var(--yildirim-white);
	color: var(--yildirim-navy);
}

.yy-btn--light:hover,
.yy-btn--light:focus-visible {
	background: var(--yildirim-sand);
	color: var(--yildirim-navy);
}

.yy-btn--ghost {
	background: transparent;
	color: var(--yildirim-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.yy-btn--ghost:hover,
.yy-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.09);
	border-color: var(--yildirim-white);
	color: var(--yildirim-white);
}

/* On light ground. */
.yy-btn--solid {
	background: var(--yildirim-cta-bg);
	color: var(--yildirim-cta-text);
}

.yy-btn--solid:hover,
.yy-btn--solid:focus-visible {
	background: var(--yildirim-cta-bg-hover);
	color: var(--yildirim-cta-text);
}

.yy-btn--quiet {
	background: transparent;
	color: var(--yildirim-navy);
	border-color: var(--yildirim-rule-strong);
}

.yy-btn--quiet:hover,
.yy-btn--quiet:focus-visible {
	border-color: var(--yildirim-navy);
	background: var(--yildirim-sand-50);
}

.yy-link-arrow {
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--yildirim-link);
	text-decoration: none;
	border-bottom: 1px solid var(--yildirim-rule-strong);
	padding-bottom: 0.2rem;
	transition: border-color var(--yildirim-transition);
	white-space: nowrap;
}

.yy-link-arrow::after {
	content: " →";
}

.yy-link-arrow:hover,
.yy-link-arrow:focus-visible {
	border-color: var(--yildirim-navy);
}

/* -------------------------------------------------------------------- hero -- */

.yy-hero {
	position: relative;
	overflow: hidden;
	background: var(--yildirim-navy);
	color: var(--yildirim-white);
	padding-block: clamp(4.5rem, 14vw, 9rem);
	isolation: isolate;
}

/* Blueprint grid, drawn with gradients so it costs no request. */
.yy-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(to right, var(--yildirim-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yildirim-grid-line) 1px, transparent 1px);
	background-size: var(--yildirim-grid-size) var(--yildirim-grid-size);
	mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 75%);
}

/*
 * The logo's gable, redrawn in CSS as an oversized watermark. Two clipped
 * blocks rather than an <img>: it has to scale to a third of the viewport
 * without shipping a large asset, and it is decoration, not content.
 */
.yy-hero__mark {
	position: absolute;
	z-index: -1;
	right: -6%;
	bottom: -14%;
	width: min(46vw, 34rem);
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.045);
	clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 78% 100%, 78% 52%, 50% 30%, 22% 52%, 22% 100%, 0% 100%, 0% 38%);
}

.yy-hero__inner {
	position: relative;
}

.yy-hero__title {
	margin: 0 0 var(--yildirim-space-3);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(2.4rem, 7.2vw, 5.25rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: var(--yildirim-tracking-heading);
	max-width: 18ch;
	text-wrap: balance;
	/* Stated, not inherited from .yy-hero. base.css colours every h1 navy, and
	   that element selector beats inheritance — which painted this navy on navy
	   and made the first line vanish while still taking up its space. */
	color: var(--yildirim-white);
}

/*
 * The second line is the emotional half of the sentence. Lighter weight rather
 * than italic — Jost's italic is a slanted geometric that reads as a mistake at
 * display size — and held apart by weight contrast alone.
 */
.yy-hero__title em {
	font-style: normal;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.82);
}

.yy-hero__lede {
	margin: 0 0 var(--yildirim-space-3);
	max-width: 44rem;
	font-size: clamp(1rem, 1.6vw, 1.1875rem);
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.8);
}

.yy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

.yy-hero__phone {
	margin: var(--yildirim-space-3) 0 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.62);
}

.yy-hero__phone a {
	color: var(--yildirim-white);
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-inline-start: 0.5rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 0.1rem;
}

.yy-hero__phone a:hover {
	border-color: var(--yildirim-white);
}

/* ------------------------------------------------------------------ paths -- */

.yy-paths {
	background: var(--yildirim-sand-50);
	border-bottom: 1px solid var(--yildirim-rule);
}

.yy-paths__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1px;
	background: var(--yildirim-rule);
	border: 1px solid var(--yildirim-rule);
}

.yy-path {
	display: block;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--yildirim-white);
	text-decoration: none;
	transition: background var(--yildirim-transition);
}

.yy-path:hover,
.yy-path:focus-visible {
	background: var(--yildirim-sand);
}

.yy-path__index {
	display: block;
	font-family: var(--yildirim-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	color: var(--yildirim-concrete);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--yildirim-space-2);
}

.yy-path__title {
	margin: 0 0 0.75rem;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-path__text {
	margin: 0 0 var(--yildirim-space-2);
	line-height: 1.65;
	color: var(--yildirim-text-muted);
}

.yy-path__cta {
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--yildirim-link);
}

.yy-path__cta::after {
	content: " →";
	display: inline-block;
	transition: transform var(--yildirim-transition);
}

.yy-path:hover .yy-path__cta::after {
	transform: translateX(0.25rem);
}

/* ---------------------------------------------------------------- process -- */

.yy-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--yildirim-rule);
}

/*
 * Each step is a ruled row, like a specification schedule. The number sits in
 * its own column so all six align regardless of how long the titles run.
 */
.yy-step {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: start;
	padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
	border-bottom: 1px solid var(--yildirim-rule);
	transition: background var(--yildirim-transition);
}

.yy-step:hover {
	background: var(--yildirim-sand-50);
}

.yy-step__num {
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 300;
	line-height: 1;
	color: var(--yildirim-concrete);
	font-variant-numeric: tabular-nums;
	font-feature-settings: var(--yildirim-numeral-feature);
}

.yy-step__title {
	margin: 0 0 0.5rem;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-step__text {
	margin: 0;
	line-height: 1.68;
	color: var(--yildirim-text-muted);
	max-width: 52ch;
}

.yy-step__time {
	font-family: var(--yildirim-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yildirim-slate);
	white-space: nowrap;
	padding-top: 0.35rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.yy-step {
		grid-template-columns: 3rem 1fr;
	}

	.yy-step__time {
		grid-column: 2;
		padding-top: 0.75rem;
	}
}

/* --------------------------------------------------------------- projects -- */

.yy-projects {
	background: var(--yildirim-bg);
	border-top: 1px solid var(--yildirim-rule);
}

/*
 * auto-fill, not auto-fit. The archive groups projects by status, and a status
 * with one project is normal for a new company — auto-fit collapses the empty
 * tracks and stretches that single card across the full row, which blows the
 * placeholder up to about a metre of grey. auto-fill keeps the empty columns so
 * a lone card stays card-sized.
 */
.yy-projects__grid,
.yy-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.yy-card {
	border: 1px solid var(--yildirim-rule);
	background: var(--yildirim-white);
	transition: border-color var(--yildirim-transition), transform var(--yildirim-transition);
}

.yy-card:hover {
	border-color: var(--yildirim-navy);
	transform: translateY(-3px);
}

.yy-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.yy-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--yildirim-sand);
}

.yy-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Stand-in while the company has no photography of its own. */
.yy-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background-color: var(--yildirim-sand);
	background-image:
		linear-gradient(to right, rgba(6, 33, 84, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(6, 33, 84, 0.06) 1px, transparent 1px);
	background-size: 24px 24px;
}

.yy-card__arch {
	width: 42%;
	aspect-ratio: 1 / 1;
	background: rgba(6, 33, 84, 0.14);
	clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 78% 100%, 78% 52%, 50% 30%, 22% 52%, 22% 100%, 0% 100%, 0% 38%);
}

.yy-chip {
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-start: 0.875rem;
	padding: 0.35rem 0.7rem;
	font-family: var(--yildirim-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yildirim-white);
	background: var(--yildirim-navy);
}

/*
 * Statuses differ by value, not hue, so each chip also carries its label as
 * text — colour is never the only signal. Planned uses concrete, which fails
 * contrast against white, so it takes ink text instead of white.
 */
.yy-chip--planned {
	background: var(--yildirim-concrete);
	color: var(--yildirim-ink);
}

.yy-chip--active {
	background: var(--yildirim-navy-400);
}

.yy-chip--completed {
	background: var(--yildirim-navy);
}

.yy-card__body {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.yy-card__loc {
	margin: 0 0 0.5rem;
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--yildirim-slate);
}

.yy-card__title {
	margin: 0 0 0.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--yildirim-text-muted);
}

/* ---------------------------------------------------------------- figures -- */

.yy-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: var(--yildirim-space-2) 0 0;
	padding-top: var(--yildirim-space-2);
	border-top: 1px solid var(--yildirim-rule);
}

.yy-figure {
	margin: 0;
}

.yy-figure__value {
	font-family: var(--yildirim-font-heading);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--yildirim-navy);
	font-variant-numeric: tabular-nums;
	font-feature-settings: var(--yildirim-numeral-feature);
}

.yy-figure__label {
	margin: 0.3rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--yildirim-slate);
}

.yy-concept-note {
	margin: var(--yildirim-space-2) 0 0;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--yildirim-rule-strong);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--yildirim-slate);
}

.yy-concept-note::before {
	content: "▲";
	margin-inline-end: 0.4rem;
	font-size: 0.625rem;
}

/* --------------------------------------------------------------- services -- */

.yy-services {
	background: var(--yildirim-sand-50);
	border-top: 1px solid var(--yildirim-rule);
}

.yy-service {
	display: block;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--yildirim-white);
	border: 1px solid var(--yildirim-rule);
	text-decoration: none;
	transition: border-color var(--yildirim-transition), background var(--yildirim-transition);
}

.yy-service:hover,
.yy-service:focus-visible {
	border-color: var(--yildirim-navy);
}

.yy-service__num {
	display: block;
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	color: var(--yildirim-concrete);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.875rem;
}

.yy-service__title {
	margin: 0 0 0.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-service__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.62;
	color: var(--yildirim-text-muted);
}

/* ----------------------------------------------------------------- why us -- */

.yy-why {
	position: relative;
	overflow: hidden;
	background: var(--yildirim-navy);
	isolation: isolate;
}

.yy-why__grid-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--yildirim-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yildirim-grid-line) 1px, transparent 1px);
	background-size: var(--yildirim-grid-size) var(--yildirim-grid-size);
	mask-image: radial-gradient(ellipse 80% 80% at 20% 0%, #000 10%, transparent 70%);
}

.yy-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1px;
	background: var(--yildirim-rule-inverse);
	border: 1px solid var(--yildirim-rule-inverse);
}

.yy-commit {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--yildirim-navy);
}

.yy-commit__title {
	margin: 0 0 0.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-white);
}

.yy-commit__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------------- cta -- */

.yy-cta {
	background: var(--yildirim-sand);
	border-top: 1px solid var(--yildirim-rule);
}

.yy-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
}

.yy-cta__text {
	flex: 1 1 28rem;
}

.yy-cta__title {
	margin: 0 0 0.75rem;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.6rem, 3.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
	text-wrap: balance;
}

.yy-cta__lede {
	margin: 0;
	max-width: 44rem;
	line-height: 1.65;
	color: var(--yildirim-text-muted);
}

.yy-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ------------------------------------------------------------------- a11y -- */

.yy-btn:focus-visible,
.yy-path:focus-visible,
.yy-service:focus-visible,
.yy-card__link:focus-visible,
.yy-link-arrow:focus-visible {
	outline: 2px solid var(--yildirim-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.yy-card:hover {
		transform: none;
	}

	.yy-btn:hover::after,
	.yy-path:hover .yy-path__cta::after {
		transform: none;
	}
}

/* ------------------------------------------------------- interior pages -- */

.yy-pagehead {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
	background: var(--yildirim-sand-50);
	border-bottom: 1px solid var(--yildirim-rule);
}

.yy-pagehead__title {
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
	text-wrap: balance;
}

.yy-pagehead__lede {
	margin: var(--yildirim-space-2) 0 0;
	max-width: 44rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--yildirim-text-muted);
}

.yy-eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* Status groups on the project archive. */
.yy-projects--group {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 0;
}

.yy-group-title {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-group-count {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--yildirim-slate);
	font-variant-numeric: tabular-nums;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--yildirim-rule);
}

.yy-empty {
	padding-block: var(--yildirim-space-4);
	text-align: center;
	color: var(--yildirim-text-muted);
}

/* ------------------------------------------------------- single project -- */

.yy-project__head {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--yildirim-sand-50);
	border-bottom: 1px solid var(--yildirim-rule);
}

.yy-project__title {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(2rem, 6vw, 4rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
	text-wrap: balance;
}

.yy-project__lede {
	margin: 0 0 var(--yildirim-space-2);
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--yildirim-text-muted);
}

/* The archive chip is absolutely positioned over a thumbnail; in the page
   header it sits in normal flow instead. */
.yy-chip--static {
	position: static;
	display: inline-block;
}

.yy-notice {
	margin: var(--yildirim-space-3) 0 0;
	padding: 0.9rem 1.1rem;
	border-inline-start: 3px solid var(--yildirim-concrete);
	background: var(--yildirim-sand-50);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--yildirim-text-muted);
}

.yy-notice strong {
	color: var(--yildirim-navy);
}

.yy-project__hero {
	margin-block: var(--yildirim-space-3);
}

.yy-project__img {
	width: 100%;
	height: auto;
	display: block;
}

.yy-project__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.yy-project__body {
		grid-template-columns: 1fr;
	}
}

.yy-project__content p {
	line-height: 1.75;
	color: var(--yildirim-text);
}

.yy-project__subhead {
	margin: var(--yildirim-space-3) 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-featlist {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--yildirim-rule);
}

.yy-featlist li {
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--yildirim-rule);
	line-height: 1.6;
}

.yy-featlist li::before {
	content: "—";
	margin-inline-end: 0.75rem;
	color: var(--yildirim-concrete);
}

/* The künye: a specification schedule, ruled like one. */
.yy-kunye {
	border: 1px solid var(--yildirim-rule);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--yildirim-sand-50);
	position: sticky;
	top: calc(var(--yildirim-header-height, 5rem) + 1rem);
}

.yy-kunye__title {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--yildirim-slate);
}

.yy-kunye__list {
	margin: 0;
	border-top: 1px solid var(--yildirim-rule);
}

.yy-kunye__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--yildirim-rule);
}

.yy-kunye__row dt {
	font-size: 0.8125rem;
	color: var(--yildirim-slate);
}

.yy-kunye__row dd {
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--yildirim-navy);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.yy-kunye__cta {
	width: 100%;
	justify-content: center;
	margin-top: var(--yildirim-space-2);
}

.yy-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	padding-bottom: var(--yildirim-space-4);
}

.yy-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------- prose --- */

.yy-prose {
	max-width: var(--yildirim-container-narrow);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.yy-prose p {
	margin: 0 0 1.35rem;
	font-size: 1.0625rem;
	line-height: 1.78;
	color: var(--yildirim-text);
}

.yy-prose h2 {
	margin: var(--yildirim-space-3) 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

/* ------------------------------------------------------------------ forms -- */

.yy-form {
	max-width: 44rem;
	margin-block: var(--yildirim-space-3);
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a screen reader is warned off by aria-hidden on the wrapper. */
.yy-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.yy-form__step {
	border: 0;
	border-top: 1px solid var(--yildirim-rule);
	margin: 0;
	padding: var(--yildirim-space-3) 0;
}

.yy-form__legend {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-form__num {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--yildirim-concrete);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--yildirim-tracking-eyebrow);
}

.yy-form__help {
	margin: 0.5rem 0 var(--yildirim-space-2) 2.4rem;
	font-size: 0.875rem;
	color: var(--yildirim-text-muted);
}

.yy-form__choices {
	display: grid;
	gap: 0.5rem;
	margin-inline-start: 2.4rem;
}

.yy-choice {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--yildirim-rule);
	cursor: pointer;
	transition: border-color var(--yildirim-transition), background var(--yildirim-transition);
}

.yy-choice:hover {
	border-color: var(--yildirim-navy);
	background: var(--yildirim-sand-50);
}

.yy-choice input {
	accent-color: var(--yildirim-navy);
	flex: none;
}

.yy-choice:has(input:checked) {
	border-color: var(--yildirim-navy);
	background: var(--yildirim-sand-50);
}

.yy-field {
	display: block;
	margin-inline-start: 2.4rem;
	margin-block-end: var(--yildirim-space-2);
}

.yy-field > span {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--yildirim-slate);
}

.yy-input {
	width: 100%;
	max-width: 26rem;
	padding: 0.75rem 0.9rem;
	font-family: var(--yildirim-font-body);
	font-size: 1rem;
	color: var(--yildirim-text);
	background: var(--yildirim-white);
	border: 1px solid var(--yildirim-rule-strong);
	border-radius: var(--yildirim-radius);
	margin-inline-start: 0;
}

.yy-form__step > .yy-input {
	margin-inline-start: 2.4rem;
}

.yy-input:focus-visible {
	outline: 2px solid var(--yildirim-focus);
	outline-offset: 1px;
	border-color: var(--yildirim-navy);
}

.yy-form__disclaimer {
	margin: var(--yildirim-space-3) 0;
	padding: 0.9rem 1.1rem;
	border-inline-start: 3px solid var(--yildirim-concrete);
	background: var(--yildirim-sand-50);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--yildirim-text-muted);
}

.yy-form-done {
	max-width: 40rem;
	margin-block: var(--yildirim-space-4);
	padding: var(--yildirim-space-3);
	border: 1px solid var(--yildirim-rule);
	background: var(--yildirim-sand-50);
}

.yy-form-done h2 {
	margin: 0 0 0.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--yildirim-navy);
}

.yy-form-done p {
	margin: 0;
	line-height: 1.65;
	color: var(--yildirim-text-muted);
}

.yy-contact {
	max-width: 34rem;
	border-top: 1px solid var(--yildirim-rule);
	margin-block: var(--yildirim-space-3);
}

@media (max-width: 600px) {
	.yy-form__help,
	.yy-form__choices,
	.yy-field,
	.yy-form__step > .yy-input {
		margin-inline-start: 0;
	}
}

.yy-form-done__next {
	margin-block: var(--yildirim-space-2) !important;
	padding-top: var(--yildirim-space-2);
	border-top: 1px solid var(--yildirim-rule);
}

.yy-form-done__next strong {
	color: var(--yildirim-navy);
}

/* ------------------------------------------------- generated elevations -- */

/*
 * The drawing takes its ink from these tokens rather than hard-coded hex, so the
 * same SVG reads correctly on a light card and on the navy project hero without
 * generating two versions of it.
 */
.yy-draw {
	--yy-draw-line: var(--yildirim-navy);
	--yy-draw-grid: rgba(6, 33, 84, 0.07);
	--yy-draw-fill: rgba(6, 33, 84, 0.04);
	--yy-draw-fill-solid: rgba(6, 33, 84, 0.10);
	--yy-draw-roof: rgba(6, 33, 84, 0.16);
	--yy-draw-window: var(--yildirim-white);
	--yy-draw-text: var(--yildirim-slate);

	display: block;
	width: 100%;
	height: 100%;
	font-family: var(--yildirim-font-heading);
	background: var(--yildirim-sand-50);
}

/* On navy the ink inverts. */
.yy-phero__media .yy-draw {
	--yy-draw-line: rgba(255, 255, 255, 0.85);
	--yy-draw-grid: rgba(255, 255, 255, 0.08);
	--yy-draw-fill: rgba(255, 255, 255, 0.05);
	--yy-draw-fill-solid: rgba(255, 255, 255, 0.12);
	--yy-draw-roof: rgba(255, 255, 255, 0.18);
	--yy-draw-window: rgba(6, 33, 84, 0.55);
	--yy-draw-text: rgba(255, 255, 255, 0.6);

	background: transparent;
}

/* --------------------------------------------------------- project hero -- */

.yy-phero {
	position: relative;
	overflow: hidden;
	background: var(--yildirim-navy);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
	isolation: isolate;
}

.yy-phero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--yildirim-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yildirim-grid-line) 1px, transparent 1px);
	background-size: var(--yildirim-grid-size) var(--yildirim-grid-size);
	mask-image: radial-gradient(ellipse 70% 90% at 85% 30%, #000 10%, transparent 72%);
}

.yy-phero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

@media (max-width: 860px) {
	.yy-phero__inner {
		grid-template-columns: 1fr;
	}
}

.yy-phero__title {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-white);
	text-wrap: balance;
}

.yy-phero__lede {
	margin: 0 0 var(--yildirim-space-2);
	max-width: 44rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

.yy-phero__media {
	border: 1px solid var(--yildirim-rule-inverse);
	padding: 0.75rem;
}

.yy-phero__img {
	width: 100%;
	height: auto;
	display: block;
}

.yy-phero__caption {
	margin: 0.6rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.5);
}

.yy-phero__figures {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--yildirim-rule-inverse);
}

.yy-bigfig {
	margin: 0;
}

.yy-bigfig__value {
	font-family: var(--yildirim-font-heading);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 300;
	line-height: 1;
	color: var(--yildirim-white);
	font-variant-numeric: tabular-nums;
	font-feature-settings: var(--yildirim-numeral-feature);
}

.yy-bigfig__label {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------ programme -- */

.yy-programme {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--yildirim-sand-50);
	border-bottom: 1px solid var(--yildirim-rule);
}

.yy-sec-title--sm {
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
}

.yy-track {
	list-style: none;
	display: flex;
	margin: var(--yildirim-space-3) 0 0;
	padding: 0;
}

.yy-track__step {
	flex: 1;
	position: relative;
	padding-top: 1.75rem;
	font-size: 0.875rem;
	color: var(--yildirim-text-muted);
}

/* The connecting rule, drawn behind the markers. */
.yy-track__step::before {
	content: "";
	position: absolute;
	inset-block-start: 0.44rem;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: var(--yildirim-concrete);
}

.yy-track__step:last-child::before {
	width: 0.5rem;
}

.yy-track__dot {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: var(--yildirim-white);
	border: 2px solid var(--yildirim-concrete);
}

.yy-track__step--done .yy-track__dot {
	background: var(--yildirim-navy);
	border-color: var(--yildirim-navy);
}

.yy-track__step--now .yy-track__dot {
	background: var(--yildirim-navy-400);
	border-color: var(--yildirim-navy-400);
	box-shadow: 0 0 0 4px rgba(28, 74, 158, 0.18);
}

.yy-track__step--now .yy-track__label,
.yy-track__step--done .yy-track__label {
	color: var(--yildirim-navy);
	font-weight: 600;
}

.yy-track__now {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.6875rem;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--yildirim-navy-400);
}

.yy-track__years {
	display: flex;
	justify-content: space-between;
	margin: var(--yildirim-space-2) 0 0;
	font-family: var(--yildirim-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--yildirim-slate);
}

/* --------------------------------------------------------- feature grid -- */

.yy-featgrid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	background: var(--yildirim-rule);
	border: 1px solid var(--yildirim-rule);
}

.yy-feat {
	display: flex;
	gap: 0.75rem;
	padding: 1.1rem 1.2rem;
	background: var(--yildirim-white);
	line-height: 1.55;
}

.yy-feat__num {
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--yildirim-concrete);
	font-variant-numeric: tabular-nums;
	padding-top: 0.15rem;
}

/* ----------------------------------------------------------- two doors --- */

.yy-cta {
	position: relative;
	overflow: hidden;
	background: var(--yildirim-navy);
	border-top: 0;
	isolation: isolate;
}

.yy-cta__grid-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--yildirim-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yildirim-grid-line) 1px, transparent 1px);
	background-size: var(--yildirim-grid-size) var(--yildirim-grid-size);
	mask-image: radial-gradient(ellipse 70% 80% at 25% 100%, #000 10%, transparent 70%);
}

.yy-cta__inner {
	display: block;
}

.yy-cta__head {
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.yy-cta__title {
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.7rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-white);
	text-wrap: balance;
}

.yy-doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1px;
	background: var(--yildirim-rule-inverse);
	border: 1px solid var(--yildirim-rule-inverse);
}

.yy-door {
	display: block;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--yildirim-navy);
	text-decoration: none;
	transition: background var(--yildirim-transition);
}

.yy-door:hover,
.yy-door:focus-visible {
	background: var(--yildirim-navy-600);
}

/*
 * The audience the page belongs to leads, but the other door is never hidden:
 * keeping both reachable is the entire point of the band.
 */
.yy-door--lead {
	background: var(--yildirim-navy-800);
}

.yy-door--lead:hover,
.yy-door--lead:focus-visible {
	background: var(--yildirim-navy-600);
}

.yy-door__index {
	display: block;
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	color: rgba(255, 255, 255, 0.42);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--yildirim-space-2);
}

.yy-door__title {
	margin: 0 0 0.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-white);
}

.yy-door__text {
	margin: 0 0 var(--yildirim-space-2);
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

.yy-door__cta {
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--yildirim-white);
}

.yy-door__cta::after {
	content: " →";
	display: inline-block;
	transition: transform var(--yildirim-transition);
}

.yy-door:hover .yy-door__cta::after {
	transform: translateX(0.25rem);
}

.yy-door:focus-visible {
	outline: 2px solid var(--yildirim-white);
	outline-offset: -2px;
}

.yy-cta__direct {
	margin: var(--yildirim-space-3) 0 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.6);
}

.yy-cta__direct a {
	color: var(--yildirim-white);
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
	text-decoration: none;
	margin-inline-start: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 0.1rem;
}

.yy-cta__direct a:hover {
	border-color: var(--yildirim-white);
}

@media (prefers-reduced-motion: reduce) {
	.yy-door:hover .yy-door__cta::after {
		transform: none;
	}
}

/* ====================================================== interior heroes == */

.yy-pagehero {
	position: relative;
	overflow: hidden;
	background: var(--yildirim-navy);
	padding-block: clamp(3rem, 8vw, 5.5rem);
	isolation: isolate;
}

.yy-pagehero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--yildirim-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yildirim-grid-line) 1px, transparent 1px);
	background-size: var(--yildirim-grid-size) var(--yildirim-grid-size);
	mask-image: radial-gradient(ellipse 80% 90% at 75% 20%, #000 15%, transparent 74%);
}

.yy-pagehero__title {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(2rem, 5.6vw, 4rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-white);
	max-width: 20ch;
	text-wrap: balance;
}

.yy-pagehero__lede {
	margin: 0;
	max-width: 46rem;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.78);
}

.yy-pagehero__figures {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--yildirim-rule-inverse);
}

.yy-pagehero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin: var(--yildirim-space-3) 0 0;
}

/* ========================================================== timeline ===== */

.yy-steps,
.yy-myths,
.yy-vm,
.yy-values,
.yy-models {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.yy-myths,
.yy-vm {
	background: var(--yildirim-sand-50);
	border-block: 1px solid var(--yildirim-rule);
}

.yy-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yy-tl {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: clamp(1rem, 3vw, 2rem);
	position: relative;
	padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* The spine. Drawn on the marker column and stopped on the last step so the
   line does not dangle past the final marker. */
.yy-tl::before {
	content: "";
	position: absolute;
	inset-block-start: 3.5rem;
	inset-block-end: 0;
	inset-inline-start: 1.7rem;
	width: 1px;
	background: var(--yildirim-rule-strong);
}

.yy-tl:last-child::before {
	display: none;
}

.yy-tl__marker {
	width: 3.5rem;
	height: 3.5rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--yildirim-rule-strong);
	background: var(--yildirim-white);
}

.yy-tl__num {
	font-family: var(--yildirim-font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--yildirim-navy);
	font-variant-numeric: tabular-nums;
}

.yy-tl__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 0.5rem;
}

.yy-tl__title {
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-tl__time {
	font-family: var(--yildirim-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yildirim-slate);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.yy-tl__who {
	margin: 0.4rem 0 0.6rem;
	font-size: 0.75rem;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--yildirim-concrete);
}

.yy-tl__text {
	margin: 0;
	max-width: 54ch;
	line-height: 1.68;
	color: var(--yildirim-text-muted);
}

/* ============================================================ myths ====== */

.yy-myth-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 1px;
	background: var(--yildirim-rule);
	border: 1px solid var(--yildirim-rule);
}

.yy-myth {
	padding: clamp(1.35rem, 3vw, 2rem);
	background: var(--yildirim-white);
}

.yy-myth__claim,
.yy-myth__truth {
	margin: 0;
	line-height: 1.62;
}

.yy-myth__claim {
	color: var(--yildirim-slate);
	padding-bottom: 0.9rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px dashed var(--yildirim-rule-strong);
}

.yy-myth__truth {
	color: var(--yildirim-text);
}

.yy-myth__tag {
	display: inline-block;
	margin-inline-end: 0.5rem;
	padding: 0.12rem 0.45rem;
	font-family: var(--yildirim-font-heading);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: 0.1em;
	color: var(--yildirim-ink);
	background: var(--yildirim-concrete);
}

.yy-myth__tag--true {
	color: var(--yildirim-white);
	background: var(--yildirim-navy);
}

/* ====================================================== vision/mission == */

.yy-vm__grid,
.yy-values__grid,
.yy-models__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1px;
	background: var(--yildirim-rule);
	border: 1px solid var(--yildirim-rule);
}

.yy-vm__card,
.yy-value,
.yy-model {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--yildirim-white);
}

.yy-vm__lead {
	margin: 0 0 0.9rem;
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.2rem, 2.6vw, 1.6rem);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
	text-wrap: balance;
}

.yy-vm__text {
	margin: 0;
	line-height: 1.68;
	color: var(--yildirim-text-muted);
}

.yy-value__num,
.yy-model__num {
	display: block;
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	color: var(--yildirim-concrete);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--yildirim-space-2);
}

.yy-value__title,
.yy-model__title {
	margin: 0 0 0.6rem;
	font-family: var(--yildirim-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-heading);
	color: var(--yildirim-navy);
}

.yy-value__text,
.yy-model__text {
	margin: 0;
	line-height: 1.65;
	color: var(--yildirim-text-muted);
}

/* ========================================================== models ====== */

.yy-model__specs {
	margin: var(--yildirim-space-2) 0 0;
	padding-top: var(--yildirim-space-2);
	border-top: 1px solid var(--yildirim-rule);
}

.yy-model__row {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 0.55rem;
	border-bottom: 1px solid var(--yildirim-rule);
	font-size: 0.8125rem;
}

.yy-model__row:last-child {
	border-bottom: 0;
}

.yy-model__row dt {
	color: var(--yildirim-slate);
	white-space: nowrap;
}

.yy-model__row dd {
	margin: 0;
	text-align: end;
	color: var(--yildirim-navy);
	font-weight: 600;
}

/* ============================================ honest / checklist bands == */

.yy-honest,
.yy-check {
	position: relative;
	background: var(--yildirim-navy);
	padding-block: clamp(3rem, 7vw, 5rem);
}

.yy-honest__inner,
.yy-check__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 900px) {
	.yy-honest__inner,
	.yy-check__inner {
		grid-template-columns: 1fr;
	}
}

.yy-doclist,
.yy-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--yildirim-rule-inverse);
}

.yy-doclist__head {
	padding: 0.9rem 1.1rem;
	font-family: var(--yildirim-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid var(--yildirim-rule-inverse);
}

.yy-doclist__item,
.yy-checklist__item {
	display: flex;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--yildirim-rule-inverse);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.yy-doclist__item:last-child,
.yy-checklist__item:last-child {
	border-bottom: 0;
}

.yy-doclist__item::before {
	content: "—";
	color: rgba(255, 255, 255, 0.4);
	flex: none;
}

.yy-checklist__num {
	font-family: var(--yildirim-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.42);
	font-variant-numeric: tabular-nums;
	padding-top: 0.15rem;
	flex: none;
}

/* ==================================================== 404 search box ==== */

.yy-404-search {
	margin-top: var(--yildirim-space-3);
	max-width: 26rem;
}

/* ================================================== no empty grid cells == */

/*
 * The hairline-grid trick — a coloured container showing through a 1px gap —
 * draws the rules for free, but it also paints every cell the items do not
 * reach. Four myths in a three-column grid left two grey blocks; three services
 * in a four-column row left one. The container was rendering the absence.
 *
 * The rules now live on the items themselves, so an unfilled cell is simply
 * page background and disappears. Adjacent borders are collapsed with a -1px
 * margin, which keeps the single-hairline look of the original.
 *
 * Declared after the originals rather than edited into them so the whole
 * correction reads as one decision.
 */
.yy-projects__grid,
.yy-services__grid,
.yy-myth-grid,
.yy-vm__grid,
.yy-values__grid,
.yy-models__grid,
.yy-featgrid,
.yy-paths__grid,
.yy-doors {
	background: none;
	border: 0;
	gap: 0;
}

.yy-myth,
.yy-vm__card,
.yy-value,
.yy-model,
.yy-feat,
.yy-path,
.yy-service {
	border: 1px solid var(--yildirim-rule);
	margin: 0 -1px -1px 0;
}

.yy-door {
	border: 1px solid var(--yildirim-rule-inverse);
	margin: 0 -1px -1px 0;
}

/* Project cards already carry their own border and a visual gap, so they only
   need the container background removing. */
.yy-projects__grid {
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * A lone card in a 1fr track fills the whole row, which is how a single
 * "Planlanan" project came to be a metre of drawing. Capping the track keeps a
 * solitary card card-sized without reintroducing the empty painted cells.
 */
.yy-projects__grid:has(> :only-child) {
	grid-template-columns: minmax(0, 24rem);
}

/* ============================================================== header === */

/*
 * Two actions on a both-audiences page. The second is quieter but present, so a
 * landowner on the homepage is not told they are in the wrong place.
 */
.yildirim-header__actions {
	gap: 0.5rem;
}

.yildirim-header__actions .yildirim-btn--outline {
	background: transparent;
	color: var(--yildirim-navy);
	border: 1px solid var(--yildirim-rule-strong);
}

.yildirim-header__actions .yildirim-btn--outline:hover,
.yildirim-header__actions .yildirim-btn--outline:focus-visible {
	border-color: var(--yildirim-navy);
	background: var(--yildirim-sand-50);
	color: var(--yildirim-navy);
}

/* Below the desktop breakpoint the pair does not fit beside the nav toggle;
   the second action stays reachable from the closing band on every page. */
@media (max-width: 1180px) {
	.yildirim-header__actions .yildirim-btn--outline {
		display: none;
	}
}

/* =========================================================== contact ===== */

.yy-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

@media (max-width: 900px) {
	.yy-contact-layout {
		grid-template-columns: 1fr;
	}
}

.yy-contact-intro {
	margin: 0 0 var(--yildirim-space-3);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--yildirim-text-muted);
}

/* The map facade. Nothing is requested from Google until the visitor asks for
   it, which is what keeps this KVKK-safe without a consent banner interaction. */
.yy-map {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--yildirim-rule);
	background-color: var(--yildirim-sand-50);
	background-image:
		linear-gradient(to right, rgba(6, 33, 84, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(6, 33, 84, 0.07) 1px, transparent 1px);
	background-size: 28px 28px;
	overflow: hidden;
}

.yy-map__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.yy-map__facade {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: var(--yildirim-space-3);
	text-align: center;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--yildirim-text-muted);
}

.yy-map__pin {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--yildirim-navy);
	clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 78% 100%, 78% 52%, 50% 30%, 22% 52%, 22% 100%, 0% 100%, 0% 38%);
}

.yy-map__addr {
	max-width: 26rem;
	margin: 0;
	font-family: var(--yildirim-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--yildirim-navy);
}

.yy-map__note {
	max-width: 26rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--yildirim-slate);
}

.yy-map__load {
	margin-top: 0.35rem;
	padding: 0.7rem 1.3rem;
	font-family: var(--yildirim-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--yildirim-cta-text);
	background: var(--yildirim-cta-bg);
}

.yy-map__facade:hover .yy-map__load {
	background: var(--yildirim-cta-bg-hover);
}

.yy-map__facade:focus-visible {
	outline: 2px solid var(--yildirim-focus);
	outline-offset: -3px;
}

.yy-map__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: var(--yildirim-space-2) 0 0;
	font-size: 0.875rem;
}

.yy-map__links a {
	color: var(--yildirim-link);
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--yildirim-rule-strong);
	padding-bottom: 0.15rem;
}

.yy-map__links a:hover {
	border-color: var(--yildirim-navy);
}

/* ================================================= project image credit == */

.yy-credit {
	margin: 0.5rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--yildirim-slate);
}

.yy-credit a {
	color: inherit;
}

.yy-phero__media .yy-credit {
	color: rgba(255, 255, 255, 0.5);
}

.yy-phero__media .yy-credit a {
	color: rgba(255, 255, 255, 0.72);
}

/*
 * Two header actions plus a six-item nav plus the language switcher overflowed
 * the bar and wrapped the navigation onto a second line at 1400px. The pair is
 * worth keeping — it is the fix for landowners on the homepage — so the buttons
 * give up the space instead: tighter padding, smaller type, and the secondary
 * drops its arrow.
 */
.yildirim-header__actions .yildirim-btn {
	padding: 0.7rem 1.05rem;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.yildirim-header__actions .yildirim-btn--outline .yildirim-btn__arrow {
	display: none;
}

/* Below this the nav collapses to the mobile menu anyway, and the secondary
   action stays reachable from the closing band on every page. */
@media (max-width: 1279px) {
	.yildirim-header__actions .yildirim-btn--outline {
		display: none;
	}
}

/*
 * Header fit at the 1280px container.
 *
 * Natural widths were logo 245 + nav ~640 + actions 367 + two 32px gaps = 1316,
 * against 1280 available. Flex resolved the 36px overflow by shrinking the nav
 * to 540px, which wrapped the six menu items onto a second line.
 *
 * The space comes back from the gaps and the menu's own spacing rather than
 * from the logo, which was deliberately enlarged, or from the second CTA, which
 * is the whole point of the pair.
 */
@media (min-width: 1024px) {
	.yildirim-header__inner {
		gap: var(--yildirim-space-2);
	}

	.yildirim-header__nav {
		gap: 1.4rem;
		flex: 0 1 auto;
	}

	.yildirim-header__nav > ul {
		flex-wrap: nowrap;
	}
}

/* ============================================ round 4: corrections ====== */

/*
 * The generated elevation drawings are gone. They were an interesting idea and
 * a bad picture: a schematic of window bays reads as a wireframe where a visitor
 * expects a building, and next to a real photograph it looked unfinished rather
 * than deliberate. Projects without photography fall back to the logo arch, the
 * same quiet placeholder the cards already used.
 */
.yy-phero__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background-color: rgba(255, 255, 255, 0.04);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 28px 28px;
}

.yy-phero__arch {
	width: 38%;
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.16);
	clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 78% 100%, 78% 52%, 50% 30%, 22% 52%, 22% 100%, 0% 100%, 0% 38%);
}

/*
 * The map now embeds directly, on the client's instruction, so the facade and
 * its pin are gone. The container keeps its frame and ratio.
 */
.yy-map {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--yildirim-rule);
	background: var(--yildirim-sand-50);
	overflow: hidden;
}

.yy-map__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Card media keeps a stable box whether it holds a photo or the arch. */
.yy-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--yildirim-sand);
}

.yy-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.yy-card__body {
	flex: 1 1 auto;
}

/* ================================== 2026 identity: ring, serif, silver === */

/*
 * The gable is gone.
 *
 * Every clip-path in this stylesheet drew the old logo's pitched-roof
 * silhouette. The 2026 mark is a circular monogram, so the recurring shape is a
 * ring — drawn with a border rather than a filled disc, because the logo's
 * roundel is an outline and a solid circle reads as a completely different mark.
 */
.yy-hero__mark {
	clip-path: none;
	background: none;
	border: 2px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--yildirim-ring);
	width: min(42vw, 30rem);
	right: -4%;
	bottom: -10%;
}

.yy-card__arch,
.yy-phero__arch {
	clip-path: none;
	border-radius: var(--yildirim-ring);
	background: none;
	border: 2px solid rgba(6, 33, 84, 0.16);
	width: 34%;
}

.yy-phero__arch {
	border-color: rgba(255, 255, 255, 0.22);
}

.yy-map__pin {
	clip-path: none;
	border-radius: var(--yildirim-ring);
	background: none;
	border: 3px solid var(--yildirim-navy);
}

/* ------------------------------------------------------ serif headings -- */

/*
 * Cormorant is a high-contrast Garamond: it sets much lighter than Jost at the
 * same nominal size, and its lowercase is small relative to its cap height. Two
 * consequences across the board — display sizes go up, and weights go up, or the
 * headings look faint rather than elegant.
 */
.yy-hero__title,
.yy-pagehero__title,
.yy-phero__title,
.yy-cta__title,
.yy-sec-title {
	font-weight: 600;
}

.yy-hero__title {
	font-size: clamp(2.6rem, 8vw, 5.75rem);
	line-height: 1.04;
}

/* The lighter second line was a weight contrast that a serif renders as a
   different typeface. Italic is the idiomatic serif equivalent. */
.yy-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.86);
}

.yy-pagehero__title,
.yy-phero__title {
	font-size: clamp(2.2rem, 6vw, 4.25rem);
	line-height: 1.06;
}

.yy-sec-title {
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	line-height: 1.12;
}

.yy-cta__title {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
}

/*
 * Small headings stay sans.
 *
 * A Garamond at 1.1rem inside a card loses its serifs to hinting and reads as a
 * rendering fault. The serif earns its place at display size; below that the
 * body face is simply clearer.
 */
.yy-card__title,
.yy-value__title,
.yy-model__title,
.yy-commit__title,
.yy-vm__card .yy-eyebrow,
.yy-tl__title,
.yy-service__title,
.yy-kunye__title,
.yy-form__legend {
	font-family: var(--yildirim-font-body);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Figures keep the serif — large, tabular, and the place its numerals shine. */
.yy-bigfig__value,
.yy-figure__value {
	font-family: var(--yildirim-font-heading);
	font-weight: 600;
}

/* The wordmark-style eyebrow sits better with the serif at a touch more size. */
.yy-eyebrow {
	font-family: var(--yildirim-font-body);
	font-size: 0.6875rem;
}

/* --------------------------------------------------- about-page pieces -- */

.yy-intro {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--yildirim-bg);
}

.yy-intro__inner {
	max-width: 46rem;
}

.yy-intro__lead {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	font-weight: 600;
	line-height: 1.24;
	color: var(--yildirim-navy);
	text-wrap: balance;
}

.yy-intro__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--yildirim-text-muted);
}

/* The client's own sign-off line, given the weight of a statement. */
.yy-motto {
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--yildirim-navy);
	text-align: center;
}

.yy-motto__inner {
	max-width: 44rem;
}

.yy-motto__text {
	margin: 0 0 var(--yildirim-space-2);
	font-family: var(--yildirim-font-heading);
	font-size: clamp(1.6rem, 4vw, 2.75rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.24;
	color: var(--yildirim-white);
	text-wrap: balance;
}

.yy-motto__attr {
	margin: 0;
	font-family: var(--yildirim-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--yildirim-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--yildirim-silver-dim);
}

.yy-sec-more {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}

/* Hero figures on the homepage sit under the actions rather than in a band. */
.yy-hero__figures {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--yildirim-rule-inverse);
}

/* ------------------------------------------------------------ cta band -- */

.yy-cta__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.yy-cta__text {
	max-width: 46rem;
}

.yy-cta__lede {
	margin: var(--yildirim-space-2) 0 0;
	font-size: 1.0625rem;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.78);
}

.yy-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

/*
 * The hero headline is two authored lines separated by a <br>. An 18ch cap was
 * sized for the old geometric face; Cormorant is narrower per character, so the
 * first line broke again on its own and the headline arrived as three ragged
 * lines instead of the intended two.
 */
.yy-hero__title {
	max-width: 24ch;
}

/* ===================================== round 5: vertical rhythm ========= */

/*
 * The section padding was set for a long, argument-heavy page that no longer
 * exists. With the site cut to five pages and three or four sections each, the
 * old clamp (up to 8rem top and bottom, so 16rem between two sections) left
 * bands of empty white large enough to read as a rendering fault.
 *
 * Roughly a third tighter. The design still breathes; it no longer gaps.
 */
.yy-process,
.yy-projects,
.yy-services,
.yy-why,
.yy-paths,
.yy-cta,
.yy-steps,
.yy-myths,
.yy-vm,
.yy-values,
.yy-models {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.yy-sec-head {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.yy-hero {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.yy-pagehero {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.yy-intro {
	padding-block: clamp(2rem, 4vw, 3rem);
}

.yy-motto {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* The homepage figure band sat a long way below the buttons. */
.yy-hero__figures {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ================================= round 6: horizontal distribution ===== */

/*
 * The header bar never distributed its children.
 *
 * `.yildirim-header__inner` is a 1280px flex row, but nothing set
 * justify-content, so it defaulted to flex-start and packed logo, navigation,
 * language switcher and CTA against the left edge — measured at 1600px wide,
 * the content ended at 817px and left 615px of empty bar to its right.
 *
 * space-between is the arrangement the design always assumed: brand left,
 * navigation centre, actions right.
 */
.yildirim-header__inner {
	justify-content: space-between;
}

@media (min-width: 1024px) {
	/* Let the nav take the middle rather than sit against the logo. */
	.yildirim-header__nav {
		flex: 1 1 auto;
		justify-content: center;
	}

	.yildirim-header__nav > ul {
		justify-content: center;
	}

	.yildirim-header__actions {
		flex: 0 0 auto;
	}
}

/*
 * Text-card grids fill the row; media-card grids do not.
 *
 * `auto-fill` keeps empty tracks, which is right for project and service cards
 * — a lone card stretched to full width turns its 4:3 image into a banner. It
 * is wrong for text cards: the two vision/mission cards were laid into a
 * three-track grid and left the last third of the page empty.
 *
 * So the two cases split. auto-fit collapses the unused track and the remaining
 * cards share the full width.
 */
.yy-vm__grid,
.yy-values__grid,
.yy-models__grid,
.yy-myth-grid,
.yy-featgrid,
.yy-doors,
.yy-paths__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Media grids keep auto-fill, but a single card is capped so it cannot span. */
.yy-projects__grid,
.yy-services__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* ------------------------------------------------------------------ *
 * Round 7 — the join between the last section and the footer.
 *
 * The closing contact band was removed at the client's request. It was
 * navy, the commitment section above it is navy and the footer is navy,
 * so the page already ended in three stacked blocks of #062154; losing
 * the middle one left the last section running into the footer with no
 * boundary at all. A hairline restores the edge without introducing a
 * fourth band. Against a light section it simply is not visible.
 * ------------------------------------------------------------------ */

.yildirim-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ *
 * The footer icon ring.
 *
 * Two things made the circle look cut off at the bottom. It had only a
 * top margin, so the language switcher began at exactly the circle's
 * lowest pixel and clipped it by sight if not by geometry; and the ring
 * is a hairline at 25% white, which on navy is about 1.3:1 — the top of
 * the arc survives against the heading above it and the bottom arc
 * dissolves into the background.
 * ------------------------------------------------------------------ */

.yildirim-social {
	margin-block-end: var(--yildirim-space-3, 1.5rem);
}

.yildirim-social__link {
	border-color: rgb(255 255 255 / 0.45);
}

.yildirim-social__link:hover,
.yildirim-social__link:focus-visible {
	border-color: rgb(255 255 255 / 0.75);
}

/* ------------------------------------------------------------------ *
 * Data values are set in the text face, not the display serif.
 *
 * Cormorant Garamond ships old-style figures: the digits sit on
 * varying baselines with ascenders and descenders, the way lowercase
 * letters do. That is beautiful in a pull quote and wrong for a phone
 * number, where "0212 670 30 60" came out looking like a word. The
 * same applies to the project künye, where floors, units and the year
 * of handover are all numerals.
 *
 * So the label stays in the serif and the value moves to Archivo, with
 * lining tabular figures: even height, even width, columns that align.
 * ------------------------------------------------------------------ */

.yy-kunye__row dd,
.yy-map__links a {
	font-family: var(--yildirim-font-body);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.yy-contact-intro + .yy-contact .yy-kunye__row dd {
	letter-spacing: 0.01em;
}